@fluentui/react-list 9.6.2 → 9.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-list
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Oct 2025 14:13:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.3)
|
|
8
|
+
|
|
9
|
+
Tue, 21 Oct 2025 14:13:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.2..@fluentui/react-list_v9.6.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Fix selection becoming broken after re-enabling ([PR #35331](https://github.com/microsoft/fluentui/pull/35331) by jirivyhnalek@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-checkbox to v9.5.8 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.2)
|
|
8
19
|
|
|
9
|
-
Wed, 08 Oct 2025 12:
|
|
20
|
+
Wed, 08 Oct 2025 12:04:53 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.1..@fluentui/react-list_v9.6.2)
|
|
11
22
|
|
|
12
23
|
### Patches
|
|
@@ -24,10 +24,11 @@ const DEFAULT_ROOT_EL_TYPE = 'li';
|
|
|
24
24
|
});
|
|
25
25
|
const { navigationMode, listItemRole } = useListSynchronousContext();
|
|
26
26
|
const isSelectionModeEnabled = useListContext_unstable((ctx)=>!!ctx.selection);
|
|
27
|
-
|
|
27
|
+
var _useListContext_unstable;
|
|
28
|
+
const isSelected = (_useListContext_unstable = useListContext_unstable((ctx)=>{
|
|
28
29
|
var _ctx_selection;
|
|
29
30
|
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
|
|
30
|
-
});
|
|
31
|
+
})) !== null && _useListContext_unstable !== void 0 ? _useListContext_unstable : false;
|
|
31
32
|
const validateListItem = useListContext_unstable((ctx)=>ctx.validateListItem);
|
|
32
33
|
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
|
|
33
34
|
const finalListItemRole = role || listItemRole;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/**\n * Create the state required to render ListItem.\n *\n * The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n *\n * @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement | HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n const validateListItem = useListContext_unstable(ctx => ctx.validateListItem);\n\n const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n const finalListItemRole = role || listItemRole;\n\n const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);\n\n const rootRef = React.useRef<HTMLLIElement | HTMLDivElement>(null);\n const checkmarkRef = React.useRef<HTMLInputElement | null>(null);\n\n const handleAction: (event: ListItemActionEvent) => void = useEventCallback(event => {\n onAction?.(event, { event, value, type: ListItemActionEventName });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (isSelectionModeEnabled && !disabledSelection) {\n toggleItem?.(event.detail.originalEvent, value);\n }\n });\n\n React.useEffect(() => {\n if (rootRef.current) {\n validateListItem(rootRef.current);\n }\n }, [validateListItem]);\n\n const triggerAction = (e: React.MouseEvent | React.KeyboardEvent) => {\n const actionEvent = createListItemActionEvent(e);\n handleAction(actionEvent);\n e.target.dispatchEvent(actionEvent);\n };\n\n const focusableGroupAttrs = useFocusableGroup({\n ignoreDefaultKeydown: { Enter: true },\n tabBehavior: 'limited-trap-focus',\n });\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n const isFromCheckbox = elementContains(checkmarkRef.current, e.target as Node);\n if (isFromCheckbox) {\n return;\n }\n\n triggerAction(e);\n });\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onKeyDown?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n // If the event is fired from an element inside the list item\n if (e.target !== e.currentTarget) {\n if (focusableItems) {\n // If the items are focusable, we need to handle the arrow keys to move focus to them\n switch (e.key) {\n // If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself\n // The ArrowLeft will only trigger if the target element is the leftmost, otherwise the\n // arrowNavigationAttributes handles it and prevents it from bubbling here.\n case ArrowLeft:\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n break;\n\n case ArrowDown:\n case ArrowUp:\n e.preventDefault();\n // Press ESC on the original target to get focus to the parent group (List)\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n // Now dispatch the original key to move up or down in the list\n e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n return;\n }\n return;\n }\n\n switch (e.key) {\n case Space:\n // we have to prevent default here otherwise the space key will scroll the page\n e.preventDefault();\n\n // Space always toggles selection (if enabled)\n if (isSelectionModeEnabled) {\n if (!disabledSelection) {\n toggleItem?.(e, value);\n }\n } else {\n triggerAction(e);\n }\n\n break;\n\n case Enter:\n triggerAction(e);\n break;\n\n case ArrowRight:\n if (navigationMode === 'composite') {\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Enter }));\n }\n\n break;\n }\n });\n\n const onCheckboxChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\n if (!isSelectionModeEnabled || e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: 'horizontal',\n });\n\n const tabsterAttributes = useMergedTabsterAttributes_unstable(\n focusableItems ? arrowNavigationAttributes : {},\n focusableGroupAttrs,\n props as Partial<TabsterDOMAttribute>,\n );\n\n const root = slot.always(\n getIntrinsicElementProps(as, {\n ref: useMergedRefs(rootRef, ref) as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: focusableItems ? 0 : undefined,\n role: finalListItemRole,\n id: String(value),\n ...(isSelectionModeEnabled && {\n 'aria-selected': isSelected,\n 'aria-disabled': (disabledSelection && !onAction) || undefined,\n }),\n ...props,\n ...tabsterAttributes,\n onKeyDown: handleKeyDown,\n onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined,\n }),\n { elementType: as },\n );\n\n const checkmark = slot.optional(props.checkmark, {\n defaultProps: {\n checked: isSelected,\n tabIndex: -1,\n disabled: disabledSelection,\n },\n renderByDefault: isSelectionModeEnabled,\n elementType: Checkbox,\n });\n\n const mergedCheckmarkRef = useMergedRefs(checkmark?.ref, checkmarkRef);\n if (checkmark) {\n checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);\n checkmark.ref = mergedCheckmarkRef;\n }\n\n const state: ListItemState = {\n components: {\n root: as,\n checkmark: Checkbox,\n },\n root,\n checkmark,\n disabled: disabledSelection && !onAction,\n selectable: isSelectionModeEnabled,\n navigable: focusableItems,\n };\n\n return state;\n};\n"],"names":["React","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","elementContains","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useId","useMergedRefs","useListSynchronousContext","useListContext_unstable","Enter","Space","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Checkbox","createListItemActionEvent","ListItemActionEventName","DEFAULT_ROOT_EL_TYPE","useListItem_unstable","props","ref","id","value","onKeyDown","onClick","tabIndex","role","onAction","disabledSelection","toggleItem","ctx","selection","navigationMode","listItemRole","isSelectionModeEnabled","isSelected","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","useRef","checkmarkRef","handleAction","event","type","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","target","dispatchEvent","focusableGroupAttrs","ignoreDefaultKeydown","tabBehavior","handleClick","isFromCheckbox","handleKeyDown","currentTarget","key","action","Escape","preventDefault","onCheckboxChange","data","arrowNavigationAttributes","axis","tabsterAttributes","root","always","undefined","String","elementType","checkmark","optional","defaultProps","checked","disabled","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/**\n * Create the state required to render ListItem.\n *\n * The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n *\n * @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement | HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value)) ?? false;\n const validateListItem = useListContext_unstable(ctx => ctx.validateListItem);\n\n const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n const finalListItemRole = role || listItemRole;\n\n const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);\n\n const rootRef = React.useRef<HTMLLIElement | HTMLDivElement>(null);\n const checkmarkRef = React.useRef<HTMLInputElement | null>(null);\n\n const handleAction: (event: ListItemActionEvent) => void = useEventCallback(event => {\n onAction?.(event, { event, value, type: ListItemActionEventName });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (isSelectionModeEnabled && !disabledSelection) {\n toggleItem?.(event.detail.originalEvent, value);\n }\n });\n\n React.useEffect(() => {\n if (rootRef.current) {\n validateListItem(rootRef.current);\n }\n }, [validateListItem]);\n\n const triggerAction = (e: React.MouseEvent | React.KeyboardEvent) => {\n const actionEvent = createListItemActionEvent(e);\n handleAction(actionEvent);\n e.target.dispatchEvent(actionEvent);\n };\n\n const focusableGroupAttrs = useFocusableGroup({\n ignoreDefaultKeydown: { Enter: true },\n tabBehavior: 'limited-trap-focus',\n });\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n const isFromCheckbox = elementContains(checkmarkRef.current, e.target as Node);\n if (isFromCheckbox) {\n return;\n }\n\n triggerAction(e);\n });\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onKeyDown?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n // If the event is fired from an element inside the list item\n if (e.target !== e.currentTarget) {\n if (focusableItems) {\n // If the items are focusable, we need to handle the arrow keys to move focus to them\n switch (e.key) {\n // If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself\n // The ArrowLeft will only trigger if the target element is the leftmost, otherwise the\n // arrowNavigationAttributes handles it and prevents it from bubbling here.\n case ArrowLeft:\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n break;\n\n case ArrowDown:\n case ArrowUp:\n e.preventDefault();\n // Press ESC on the original target to get focus to the parent group (List)\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n // Now dispatch the original key to move up or down in the list\n e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n return;\n }\n return;\n }\n\n switch (e.key) {\n case Space:\n // we have to prevent default here otherwise the space key will scroll the page\n e.preventDefault();\n\n // Space always toggles selection (if enabled)\n if (isSelectionModeEnabled) {\n if (!disabledSelection) {\n toggleItem?.(e, value);\n }\n } else {\n triggerAction(e);\n }\n\n break;\n\n case Enter:\n triggerAction(e);\n break;\n\n case ArrowRight:\n if (navigationMode === 'composite') {\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Enter }));\n }\n\n break;\n }\n });\n\n const onCheckboxChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\n if (!isSelectionModeEnabled || e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: 'horizontal',\n });\n\n const tabsterAttributes = useMergedTabsterAttributes_unstable(\n focusableItems ? arrowNavigationAttributes : {},\n focusableGroupAttrs,\n props as Partial<TabsterDOMAttribute>,\n );\n\n const root = slot.always(\n getIntrinsicElementProps(as, {\n ref: useMergedRefs(rootRef, ref) as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: focusableItems ? 0 : undefined,\n role: finalListItemRole,\n id: String(value),\n ...(isSelectionModeEnabled && {\n 'aria-selected': isSelected,\n 'aria-disabled': (disabledSelection && !onAction) || undefined,\n }),\n ...props,\n ...tabsterAttributes,\n onKeyDown: handleKeyDown,\n onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined,\n }),\n { elementType: as },\n );\n\n const checkmark = slot.optional(props.checkmark, {\n defaultProps: {\n checked: isSelected,\n tabIndex: -1,\n disabled: disabledSelection,\n },\n renderByDefault: isSelectionModeEnabled,\n elementType: Checkbox,\n });\n\n const mergedCheckmarkRef = useMergedRefs(checkmark?.ref, checkmarkRef);\n if (checkmark) {\n checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);\n checkmark.ref = mergedCheckmarkRef;\n }\n\n const state: ListItemState = {\n components: {\n root: as,\n checkmark: Checkbox,\n },\n root,\n checkmark,\n disabled: disabledSelection && !onAction,\n selectable: isSelectionModeEnabled,\n navigable: focusableItems,\n };\n\n return state;\n};\n"],"names":["React","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","elementContains","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useId","useMergedRefs","useListSynchronousContext","useListContext_unstable","Enter","Space","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Checkbox","createListItemActionEvent","ListItemActionEventName","DEFAULT_ROOT_EL_TYPE","useListItem_unstable","props","ref","id","value","onKeyDown","onClick","tabIndex","role","onAction","disabledSelection","toggleItem","ctx","selection","navigationMode","listItemRole","isSelectionModeEnabled","isSelected","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","useRef","checkmarkRef","handleAction","event","type","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","target","dispatchEvent","focusableGroupAttrs","ignoreDefaultKeydown","tabBehavior","handleClick","isFromCheckbox","handleKeyDown","currentTarget","key","action","Escape","preventDefault","onCheckboxChange","data","arrowNavigationAttributes","axis","tabsterAttributes","root","always","undefined","String","elementType","checkmark","optional","defaultProps","checked","disabled","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"mappings":"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"}
|
|
@@ -27,10 +27,11 @@ const useListItem_unstable = (props, ref)=>{
|
|
|
27
27
|
});
|
|
28
28
|
const { navigationMode, listItemRole } = (0, _listContext.useListSynchronousContext)();
|
|
29
29
|
const isSelectionModeEnabled = (0, _listContext.useListContext_unstable)((ctx)=>!!ctx.selection);
|
|
30
|
-
|
|
30
|
+
var _useListContext_unstable;
|
|
31
|
+
const isSelected = (_useListContext_unstable = (0, _listContext.useListContext_unstable)((ctx)=>{
|
|
31
32
|
var _ctx_selection;
|
|
32
33
|
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
|
|
33
|
-
});
|
|
34
|
+
})) !== null && _useListContext_unstable !== void 0 ? _useListContext_unstable : false;
|
|
34
35
|
const validateListItem = (0, _listContext.useListContext_unstable)((ctx)=>ctx.validateListItem);
|
|
35
36
|
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
|
|
36
37
|
const finalListItemRole = role || listItemRole;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/**\n * Create the state required to render ListItem.\n *\n * The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n *\n * @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement | HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n const validateListItem = useListContext_unstable(ctx => ctx.validateListItem);\n\n const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n const finalListItemRole = role || listItemRole;\n\n const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);\n\n const rootRef = React.useRef<HTMLLIElement | HTMLDivElement>(null);\n const checkmarkRef = React.useRef<HTMLInputElement | null>(null);\n\n const handleAction: (event: ListItemActionEvent) => void = useEventCallback(event => {\n onAction?.(event, { event, value, type: ListItemActionEventName });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (isSelectionModeEnabled && !disabledSelection) {\n toggleItem?.(event.detail.originalEvent, value);\n }\n });\n\n React.useEffect(() => {\n if (rootRef.current) {\n validateListItem(rootRef.current);\n }\n }, [validateListItem]);\n\n const triggerAction = (e: React.MouseEvent | React.KeyboardEvent) => {\n const actionEvent = createListItemActionEvent(e);\n handleAction(actionEvent);\n e.target.dispatchEvent(actionEvent);\n };\n\n const focusableGroupAttrs = useFocusableGroup({\n ignoreDefaultKeydown: { Enter: true },\n tabBehavior: 'limited-trap-focus',\n });\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n const isFromCheckbox = elementContains(checkmarkRef.current, e.target as Node);\n if (isFromCheckbox) {\n return;\n }\n\n triggerAction(e);\n });\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onKeyDown?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n // If the event is fired from an element inside the list item\n if (e.target !== e.currentTarget) {\n if (focusableItems) {\n // If the items are focusable, we need to handle the arrow keys to move focus to them\n switch (e.key) {\n // If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself\n // The ArrowLeft will only trigger if the target element is the leftmost, otherwise the\n // arrowNavigationAttributes handles it and prevents it from bubbling here.\n case ArrowLeft:\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n break;\n\n case ArrowDown:\n case ArrowUp:\n e.preventDefault();\n // Press ESC on the original target to get focus to the parent group (List)\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n // Now dispatch the original key to move up or down in the list\n e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n return;\n }\n return;\n }\n\n switch (e.key) {\n case Space:\n // we have to prevent default here otherwise the space key will scroll the page\n e.preventDefault();\n\n // Space always toggles selection (if enabled)\n if (isSelectionModeEnabled) {\n if (!disabledSelection) {\n toggleItem?.(e, value);\n }\n } else {\n triggerAction(e);\n }\n\n break;\n\n case Enter:\n triggerAction(e);\n break;\n\n case ArrowRight:\n if (navigationMode === 'composite') {\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Enter }));\n }\n\n break;\n }\n });\n\n const onCheckboxChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\n if (!isSelectionModeEnabled || e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: 'horizontal',\n });\n\n const tabsterAttributes = useMergedTabsterAttributes_unstable(\n focusableItems ? arrowNavigationAttributes : {},\n focusableGroupAttrs,\n props as Partial<TabsterDOMAttribute>,\n );\n\n const root = slot.always(\n getIntrinsicElementProps(as, {\n ref: useMergedRefs(rootRef, ref) as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: focusableItems ? 0 : undefined,\n role: finalListItemRole,\n id: String(value),\n ...(isSelectionModeEnabled && {\n 'aria-selected': isSelected,\n 'aria-disabled': (disabledSelection && !onAction) || undefined,\n }),\n ...props,\n ...tabsterAttributes,\n onKeyDown: handleKeyDown,\n onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined,\n }),\n { elementType: as },\n );\n\n const checkmark = slot.optional(props.checkmark, {\n defaultProps: {\n checked: isSelected,\n tabIndex: -1,\n disabled: disabledSelection,\n },\n renderByDefault: isSelectionModeEnabled,\n elementType: Checkbox,\n });\n\n const mergedCheckmarkRef = useMergedRefs(checkmark?.ref, checkmarkRef);\n if (checkmark) {\n checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);\n checkmark.ref = mergedCheckmarkRef;\n }\n\n const state: ListItemState = {\n components: {\n root: as,\n checkmark: Checkbox,\n },\n root,\n checkmark,\n disabled: disabledSelection && !onAction,\n selectable: isSelectionModeEnabled,\n navigable: focusableItems,\n };\n\n return state;\n};\n"],"names":["React","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","elementContains","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useId","useMergedRefs","useListSynchronousContext","useListContext_unstable","Enter","Space","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Checkbox","createListItemActionEvent","ListItemActionEventName","DEFAULT_ROOT_EL_TYPE","useListItem_unstable","props","ref","id","value","onKeyDown","onClick","tabIndex","role","onAction","disabledSelection","toggleItem","ctx","selection","navigationMode","listItemRole","isSelectionModeEnabled","isSelected","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","useRef","checkmarkRef","handleAction","event","type","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","target","dispatchEvent","focusableGroupAttrs","ignoreDefaultKeydown","tabBehavior","handleClick","isFromCheckbox","handleKeyDown","currentTarget","key","action","Escape","preventDefault","onCheckboxChange","data","arrowNavigationAttributes","axis","tabsterAttributes","root","always","undefined","String","elementType","checkmark","optional","defaultProps","checked","disabled","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/**\n * Create the state required to render ListItem.\n *\n * The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n *\n * @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement | HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value)) ?? false;\n const validateListItem = useListContext_unstable(ctx => ctx.validateListItem);\n\n const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n const finalListItemRole = role || listItemRole;\n\n const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);\n\n const rootRef = React.useRef<HTMLLIElement | HTMLDivElement>(null);\n const checkmarkRef = React.useRef<HTMLInputElement | null>(null);\n\n const handleAction: (event: ListItemActionEvent) => void = useEventCallback(event => {\n onAction?.(event, { event, value, type: ListItemActionEventName });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (isSelectionModeEnabled && !disabledSelection) {\n toggleItem?.(event.detail.originalEvent, value);\n }\n });\n\n React.useEffect(() => {\n if (rootRef.current) {\n validateListItem(rootRef.current);\n }\n }, [validateListItem]);\n\n const triggerAction = (e: React.MouseEvent | React.KeyboardEvent) => {\n const actionEvent = createListItemActionEvent(e);\n handleAction(actionEvent);\n e.target.dispatchEvent(actionEvent);\n };\n\n const focusableGroupAttrs = useFocusableGroup({\n ignoreDefaultKeydown: { Enter: true },\n tabBehavior: 'limited-trap-focus',\n });\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n const isFromCheckbox = elementContains(checkmarkRef.current, e.target as Node);\n if (isFromCheckbox) {\n return;\n }\n\n triggerAction(e);\n });\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onKeyDown?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n // If the event is fired from an element inside the list item\n if (e.target !== e.currentTarget) {\n if (focusableItems) {\n // If the items are focusable, we need to handle the arrow keys to move focus to them\n switch (e.key) {\n // If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself\n // The ArrowLeft will only trigger if the target element is the leftmost, otherwise the\n // arrowNavigationAttributes handles it and prevents it from bubbling here.\n case ArrowLeft:\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n break;\n\n case ArrowDown:\n case ArrowUp:\n e.preventDefault();\n // Press ESC on the original target to get focus to the parent group (List)\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n // Now dispatch the original key to move up or down in the list\n e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n return;\n }\n return;\n }\n\n switch (e.key) {\n case Space:\n // we have to prevent default here otherwise the space key will scroll the page\n e.preventDefault();\n\n // Space always toggles selection (if enabled)\n if (isSelectionModeEnabled) {\n if (!disabledSelection) {\n toggleItem?.(e, value);\n }\n } else {\n triggerAction(e);\n }\n\n break;\n\n case Enter:\n triggerAction(e);\n break;\n\n case ArrowRight:\n if (navigationMode === 'composite') {\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Enter }));\n }\n\n break;\n }\n });\n\n const onCheckboxChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\n if (!isSelectionModeEnabled || e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: 'horizontal',\n });\n\n const tabsterAttributes = useMergedTabsterAttributes_unstable(\n focusableItems ? arrowNavigationAttributes : {},\n focusableGroupAttrs,\n props as Partial<TabsterDOMAttribute>,\n );\n\n const root = slot.always(\n getIntrinsicElementProps(as, {\n ref: useMergedRefs(rootRef, ref) as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: focusableItems ? 0 : undefined,\n role: finalListItemRole,\n id: String(value),\n ...(isSelectionModeEnabled && {\n 'aria-selected': isSelected,\n 'aria-disabled': (disabledSelection && !onAction) || undefined,\n }),\n ...props,\n ...tabsterAttributes,\n onKeyDown: handleKeyDown,\n onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined,\n }),\n { elementType: as },\n );\n\n const checkmark = slot.optional(props.checkmark, {\n defaultProps: {\n checked: isSelected,\n tabIndex: -1,\n disabled: disabledSelection,\n },\n renderByDefault: isSelectionModeEnabled,\n elementType: Checkbox,\n });\n\n const mergedCheckmarkRef = useMergedRefs(checkmark?.ref, checkmarkRef);\n if (checkmark) {\n checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);\n checkmark.ref = mergedCheckmarkRef;\n }\n\n const state: ListItemState = {\n components: {\n root: as,\n checkmark: Checkbox,\n },\n root,\n checkmark,\n disabled: disabledSelection && !onAction,\n selectable: isSelectionModeEnabled,\n navigable: focusableItems,\n };\n\n return state;\n};\n"],"names":["React","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","elementContains","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useId","useMergedRefs","useListSynchronousContext","useListContext_unstable","Enter","Space","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Checkbox","createListItemActionEvent","ListItemActionEventName","DEFAULT_ROOT_EL_TYPE","useListItem_unstable","props","ref","id","value","onKeyDown","onClick","tabIndex","role","onAction","disabledSelection","toggleItem","ctx","selection","navigationMode","listItemRole","isSelectionModeEnabled","isSelected","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","useRef","checkmarkRef","handleAction","event","type","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","target","dispatchEvent","focusableGroupAttrs","ignoreDefaultKeydown","tabBehavior","handleClick","isFromCheckbox","handleKeyDown","currentTarget","key","action","Escape","preventDefault","onCheckboxChange","data","arrowNavigationAttributes","axis","tabsterAttributes","root","always","undefined","String","elementType","checkmark","optional","defaultProps","checked","disabled","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-list",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.3",
|
|
4
4
|
"description": "React List v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"@fluentui/scripts-cypress": "*"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@fluentui/react-checkbox": "^9.5.
|
|
29
|
+
"@fluentui/react-checkbox": "^9.5.8",
|
|
30
30
|
"@fluentui/react-context-selector": "^9.2.9",
|
|
31
|
-
"@fluentui/react-jsx-runtime": "^9.
|
|
31
|
+
"@fluentui/react-jsx-runtime": "^9.3.0",
|
|
32
32
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
33
33
|
"@fluentui/react-tabster": "^9.26.7",
|
|
34
34
|
"@fluentui/react-theme": "^9.2.0",
|