diff --git a/packages/@react-aria/tree/src/useTreeItem.ts b/packages/@react-aria/tree/src/useTreeItem.ts index b94313429c1..f16c2d8b43c 100644 --- a/packages/@react-aria/tree/src/useTreeItem.ts +++ b/packages/@react-aria/tree/src/useTreeItem.ts @@ -15,8 +15,8 @@ import {AriaGridListItemOptions, GridListItemAria, useGridListItem} from '@react import {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {isAndroid, useLabels} from '@react-aria/utils'; import {TreeState} from '@react-stately/tree'; +import {useLabels} from '@react-aria/utils'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; export interface AriaTreeItemOptions extends Omit { @@ -59,7 +59,8 @@ export function useTreeItem(props: AriaTreeItemOptions, state: TreeState, state.selectionManager.setFocusedKey(node.key); } }, - tabIndex: isAndroid() ? -1 : null, + excludeFromTabOrder: true, + preventFocusOnPress: true, 'data-react-aria-prevent-focus': true, ...labelProps }; diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx index 59f4cdfcf32..9c6062710a9 100644 --- a/packages/@react-spectrum/s2/src/TreeView.tsx +++ b/packages/@react-spectrum/s2/src/TreeView.tsx @@ -33,7 +33,6 @@ import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' wit import {DOMRef, Key} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; -import {isAndroid} from '@react-aria/utils'; import {raw} from '../style/style-macro' with {type: 'macro'}; import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react'; import {TextContext} from './Content'; @@ -413,18 +412,14 @@ const expandButton = style({ function ExpandableRowChevron(props: ExpandableRowChevronProps) { let expandButtonRef = useRef(null); let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext); - let {isExpanded, isDisabled, scale, isHidden} = fullProps; + let {isExpanded, scale, isHidden} = fullProps; let {direction} = useLocale(); - isDisabled = isDisabled || isHidden; return ( + )} + {props.title || props.children} + + + )} + + {props.title && props.children} + + ); +}; + const TreeExampleStaticRender = (args) => ( Photos @@ -147,6 +185,53 @@ const TreeExampleStaticRender = (args) => ( ); +const TreeExampleStaticNoActionsRender = (args) => ( + + Photos + + + + Projects-1A + + + + Projects-2 + + + Projects-3 + + + classNames(styles, 'tree-item', { + focused: isFocused, + 'focus-visible': isFocusVisible, + selected: isSelected, + hovered: isHovered + })}> + + Reports + + + classNames(styles, 'tree-item', { + focused: isFocused, + 'focus-visible': isFocusVisible, + selected: isSelected, + hovered: isHovered + })}> + + {({isFocused}) => ( + {`${isFocused} Tests`} + )} + + + +); + export const TreeExampleStatic = { render: TreeExampleStaticRender, args: { @@ -176,6 +261,35 @@ export const TreeExampleStatic = { } }; +export const TreeExampleStaticNoActions = { + render: TreeExampleStaticNoActionsRender, + args: { + selectionMode: 'none', + selectionBehavior: 'toggle', + disabledBehavior: 'selection', + disallowClearAll: false + }, + argTypes: { + selectionMode: { + control: 'radio', + options: ['none', 'single', 'multiple'] + }, + selectionBehavior: { + control: 'radio', + options: ['toggle', 'replace'] + }, + disabledBehavior: { + control: 'radio', + options: ['selection', 'all'] + } + }, + parameters: { + description: { + data: 'Note that the last two items are just to test bare minimum TreeItem and thus dont have the checkbox or any of the other contents that the other items have. The last item tests the isFocused renderProp. This story specifically tests tab behaviour when there are no additional actions in the tree.' + } + } +}; + let rows = [ {id: 'projects', name: 'Projects', childItems: [ {id: 'project-1', name: 'Project 1'}, @@ -396,7 +510,7 @@ function LoadingStoryDepOnCollection(args) { getKey: item => item.id, getChildren: item => item.childItems }); - + return ( @@ -663,11 +777,11 @@ function SecondTree(args) { }); return ( - 'Drop items here'}> {(item: any) => (