v3 TreeView

jest.config.js

@@ -197,7 +197,7 @@ module.exports = {
             tsx: true,
             importAssertions: true
           },
-          
+
           transform: {
             react: {
               runtime: 'automatic'

package.json

@@ -199,7 +199,8 @@
       "exclude": [
         "**/*.global.css",
         "packages/@react-aria/example-theme/**",
-        "packages/@react-spectrum/style-macro-s1/**"
+        "packages/@react-spectrum/style-macro-s1/**",
+        "packages/@react-spectrum/tree/**"
       ]
     },
     "drafts": {

packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

@@ -53,10 +53,6 @@ governing permissions and limitations under the License.
     &.spectrum-ActionGroup-item--iconOnly {
       padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
     }
-
-    .spectrum-ActionGroup-itemIcon {
-      padding-inline-end: 0;
-    }
   }
 
   &:focus {

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -229,6 +229,10 @@ a.spectrum-ActionButton {
   .spectrum-ActionButton-hold + .spectrum-Icon:last-child {
     padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
   }
+
+  .spectrum-ActionGroup-itemIcon {
+    padding-inline-end: 0;
+  }
 }
 
 .spectrum-ActionButton-hold {

packages/@react-aria/gridlist/intl/ar-AE.json

@@ -0,0 +1,4 @@
+{
+  "hasActionAnnouncement": "row has action",
+  "hasLinkAnnouncement": "row has link: {link}"
+}

packages/@react-aria/gridlist/intl/en-US.json

@@ -0,0 +1,4 @@
+{
+  "hasActionAnnouncement": "row has action",
+  "hasLinkAnnouncement": "row has link: {link}"
+}

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -16,11 +16,13 @@ import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {getLastItem} from '@react-stately/collections';
 import {getRowId, listMap} from './utils';
 import {HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, RefObject, useRef} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {isFocusVisible} from '@react-aria/interactions';
 import type {ListState} from '@react-stately/list';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
 import type {TreeState} from '@react-stately/tree';
-import {useLocale} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaGridListItemOptions {
   /** An object representing the list item. Contains all the relevant information that makes up the list row. */
@@ -65,6 +67,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     shouldSelectOnPressUp
   } = props;
 
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/gridlist');
   let {direction} = useLocale();
   let {onAction, linkBehavior} = listMap.get(state);
   let descriptionId = useSlotId();
@@ -226,11 +229,20 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
   };
 
   let linkProps = itemStates.hasAction ? getSyntheticLinkProps(node.props) : {};
+  let rowAnnouncement;
+  if (onAction) {
+    rowAnnouncement = stringFormatter.format('hasActionAnnouncement');
+  } else if (hasLink) {
+    rowAnnouncement = stringFormatter.format('hasLinkAnnouncement', {
+      link: node.props.href
+    });
+  }
+
   let rowProps: DOMAttributes = mergeProps(itemProps, linkProps, {
     role: 'row',
     onKeyDownCapture: onKeyDown,
     onFocus,
-    'aria-label': node.textValue || undefined,
+    'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
     'aria-selected': state.selectionManager.canSelectItem(node.key) ? state.selectionManager.isSelected(node.key) : undefined,
     'aria-disabled': state.selectionManager.isDisabled(node.key) || undefined,
     'aria-labelledby': descriptionId && node.textValue ? `${getRowId(state, node.key)} ${descriptionId}` : undefined,

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -308,13 +308,12 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, staticColor,
             text: {
               id: hideButtonText ? textId : null,
               isHidden: hideButtonText
-            },
-            icon: {
-              UNSAFE_className: hideButtonText ? classNames(styles, 'spectrum-ActionGroup-itemIcon') : null
             }
           }}>
           <ActionButton
             ref={ref}
+            // @ts-ignore (private)
+            hideButtonText={hideButtonText}
             UNSAFE_className={
               classNames(
                 styles,

packages/@react-spectrum/button/src/ActionButton.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import CornerTriangle from '@spectrum-icons/ui/CornerTriangle';
 import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
@@ -26,6 +26,8 @@ import {useProviderProps} from '@react-spectrum/provider';
 function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   props = useSlotProps(props, 'actionButton');
+  let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text');
+
   let {
     isQuiet,
     isDisabled,
@@ -34,6 +36,8 @@ function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLBu
     autoFocus,
     // @ts-ignore (private)
     holdAffordance,
+    // @ts-ignore (private)
+    hideButtonText,
     ...otherProps
   } = props;
 
@@ -68,20 +72,28 @@ function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLBu
         {holdAffordance &&
           <CornerTriangle UNSAFE_className={classNames(styles, 'spectrum-ActionButton-hold')} />
         }
-        <SlotProvider
-          slots={{
-            icon: {
-              size: 'S',
-              UNSAFE_className: classNames(styles, 'spectrum-Icon')
-            },
-            text: {
-              UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')
-            }
-          }}>
-          {typeof children === 'string' || isTextOnly
-            ? <Text>{children}</Text>
-            : children}
-        </SlotProvider>
+        <ClearSlots>
+          <SlotProvider
+            slots={{
+              icon: {
+                size: 'S',
+                UNSAFE_className: classNames(
+                  styles,
+                  'spectrum-Icon',
+                  {
+                    'spectrum-ActionGroup-itemIcon': hideButtonText
+                  }
+                )
+              },
+              text: {
+                ...textProps
+              }
+            }}>
+            {typeof children === 'string' || isTextOnly
+              ? <Text>{children}</Text>
+              : children}
+          </SlotProvider>
+        </ClearSlots>
       </button>
     </FocusRing>
   );

packages/@react-spectrum/checkbox/package.json

@@ -47,7 +47,8 @@
     "@react-types/checkbox": "^3.7.1",
     "@react-types/shared": "^3.22.1",
     "@spectrum-icons/ui": "^3.6.5",
-    "@swc/helpers": "^0.5.0"
+    "@swc/helpers": "^0.5.0",
+    "react-aria-components": "^1.1.1"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"

packages/@react-spectrum/checkbox/src/Checkbox.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {CheckboxContext, useContextProps} from 'react-aria-components';
 import {CheckboxGroupContext} from './context';
 import CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
@@ -27,6 +28,10 @@ import {useToggleState} from '@react-stately/toggle';
 
 function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   let originalProps = props;
+  let inputRef = useRef<HTMLInputElement>(null);
+  let domRef = useFocusableRef(ref, inputRef);
+
+  [props, domRef] = useContextProps(props, domRef, CheckboxContext);
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -38,9 +43,6 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
   } = props;
   let {styleProps} = useStyleProps(otherProps);
 
-  let inputRef = useRef<HTMLInputElement>(null);
-  let domRef = useFocusableRef(ref, inputRef);
-
   // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
   // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
   // but since the checkbox won't move in and out of a group, it should be safe.

packages/@react-spectrum/style-macro-s1/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-spectrum/style-macro-s1",
   "private": true,
-  "version": "3.5.3",
+  "version": "1.0.0-alpha.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "source": "src/index.ts",

packages/@react-spectrum/tree/chromatic/TreeView.chromatic-fc.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionGroup, Item} from '@react-spectrum/actiongroup';
+import {ActionMenu} from '@react-spectrum/menu';
+import Add from '@spectrum-icons/workflow/Add';
+import Delete from '@spectrum-icons/workflow/Delete';
+import Edit from '@spectrum-icons/workflow/Edit';
+import FileTxt from '@spectrum-icons/workflow/FileTxt';
+import Folder from '@spectrum-icons/workflow/Folder';
+import React from 'react';
+import {Text} from '@react-spectrum/text';
+import {TreeView, TreeViewItem} from '../src';
+
+export default {
+  title: 'TreeView'
+};
+
+function TestTree(props) {
+  return (
+    <div style={{width: '300px', height: '800px'}}>
+      <TreeView {...props} disabledKeys={['projects-1']} defaultExpandedKeys={['Photos', 'projects', 'projects-1']} aria-label="test static tree">
+        <TreeViewItem href="https://adobe.com/" id="Photos" textValue="Photos">
+          <Text>Photos</Text>
+          <Folder />
+          <ActionGroup>
+            <Item key="edit">
+              <Edit />
+              <Text>Edit</Text>
+            </Item>
+            <Item key="delete">
+              <Delete />
+              <Text>Delete</Text>
+            </Item>
+          </ActionGroup>
+        </TreeViewItem>
+        <TreeViewItem id="projects" textValue="Projects">
+          <Text>Projects</Text>
+          <Folder />
+          <ActionMenu>
+            <Item key="add">
+              <Add />
+              <Text>Add</Text>
+            </Item>
+            <Item key="delete">
+              <Delete />
+              <Text>Delete</Text>
+            </Item>
+          </ActionMenu>
+          <TreeViewItem id="projects-1" textValue="Projects-1">
+            <Text>Projects-1</Text>
+            <Folder />
+            <ActionGroup>
+              <Item key="edit">
+                <Edit />
+                <Text>Edit</Text>
+              </Item>
+              <Item key="delete">
+                <Delete />
+                <Text>Delete</Text>
+              </Item>
+            </ActionGroup>
+            <TreeViewItem id="projects-1A" textValue="Projects-1A">
+              <Text>Projects-1A</Text>
+              <FileTxt />
+              <ActionMenu>
+                <Item key="add">
+                  <Add />
+                  <Text>Add</Text>
+                </Item>
+                <Item key="delete">
+                  <Delete />
+                  <Text>Delete</Text>
+                </Item>
+              </ActionMenu>
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem id="projects-2" textValue="Projects-2">
+            <Text>Projects-2</Text>
+            <FileTxt />
+            <ActionGroup>
+              <Item key="edit">
+                <Edit />
+                <Text>Edit</Text>
+              </Item>
+              <Item key="delete">
+                <Delete />
+                <Text>Delete</Text>
+              </Item>
+            </ActionGroup>
+          </TreeViewItem>
+          <TreeViewItem id="projects-3" textValue="Projects-3">
+            <Text>Projects-3</Text>
+            <FileTxt />
+          </TreeViewItem>
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  );
+}
+
+export const Default = () => (
+  <TestTree />
+);
+
+export const SelectionMode = () => (
+  <TestTree selectionMode="multiple" />
+);
+
+export const DisabledBehaviorAll = () => (
+  <TestTree disabledBehavior="all" selectionMode="multiple" />
+);
+
+export const HiglightSelectionWithDisabledBehaviorAll = () => (
+  <TestTree selectionStyle="highlight" selectionMode="multiple" disabledBehavior="all" />
+);