@fluentui/react-list 9.1.3 → 9.1.4

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-list
 
-This log was last generated on Thu, 27 Mar 2025 21:08:38 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Apr 2025 14:05:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.4)
+
+Tue, 01 Apr 2025 14:05:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.3..@fluentui/react-list_v9.1.4)
+
+### Patches
+
+- bugfix: ensure external tabster attributes are merged with internals ([PR #34117](https://github.com/microsoft/fluentui/pull/34117) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-checkbox to v9.3.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+- Bump @fluentui/react-tabster to v9.24.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+
 ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.3)
 
-Thu, 27 Mar 2025 21:08:38 GMT 
+Thu, 27 Mar 2025 21:12:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.2..@fluentui/react-list_v9.1.3)
 
 ### Patches

package/lib/components/ListItem/useListItem.js

@@ -142,7 +142,7 @@ const DEFAULT_ROOT_EL_TYPE = 'li';
     const arrowNavigationAttributes = useArrowNavigationGroup({
         axis: 'horizontal'
     });
-    const tabsterAttributes = useMergedTabsterAttributes_unstable(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs);
+    const tabsterAttributes = useMergedTabsterAttributes_unstable(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs, props);
     const root = slot.always(getIntrinsicElementProps(as, {
         ref: useMergedRefs(rootRef, ref),
         tabIndex: focusableItems ? 0 : undefined,
@@ -151,8 +151,8 @@ const DEFAULT_ROOT_EL_TYPE = 'li';
         ...isSelectionEnabled && {
             'aria-selected': isSelected
         },
-        ...tabsterAttributes,
         ...props,
+        ...tabsterAttributes,
         onKeyDown: handleKeyDown,
         onClick: isSelectionEnabled || onClick || onAction ? handleClick : undefined
     }), {

package/lib/components/ListItem/useListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\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 { 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 } = props;\n\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const navigationMode = useListContext_unstable(ctx => ctx.navigationMode);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n  const listItemRole = useListContext_unstable(ctx => ctx.listItemRole);\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(isSelectionEnabled || 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 (isSelectionEnabled) {\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 (isSelectionEnabled) {\n          toggleItem?.(e, value);\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 (!isSelectionEnabled || 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  );\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      ...(isSelectionEnabled && {\n        'aria-selected': isSelected,\n      }),\n      ...tabsterAttributes,\n      ...props,\n      onKeyDown: handleKeyDown,\n      onClick: isSelectionEnabled || 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    },\n    renderByDefault: isSelectionEnabled,\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    selectable: isSelectionEnabled,\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","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","toggleItem","ctx","selection","navigationMode","isSelectionEnabled","isSelected","listItemRole","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","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["import * 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 { 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 } = props;\n\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const navigationMode = useListContext_unstable(ctx => ctx.navigationMode);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n  const listItemRole = useListContext_unstable(ctx => ctx.listItemRole);\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(isSelectionEnabled || 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 (isSelectionEnabled) {\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 (isSelectionEnabled) {\n          toggleItem?.(e, value);\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 (!isSelectionEnabled || 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      ...(isSelectionEnabled && {\n        'aria-selected': isSelected,\n      }),\n      ...props,\n      ...tabsterAttributes,\n      onKeyDown: handleKeyDown,\n      onClick: isSelectionEnabled || 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    },\n    renderByDefault: isSelectionEnabled,\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    selectable: isSelectionEnabled,\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","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","toggleItem","ctx","selection","navigationMode","isSelectionEnabled","isSelected","listItemRole","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","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/ListItem/useListItem.js

@@ -145,7 +145,7 @@ const useListItem_unstable = (props, ref)=>{
     const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
         axis: 'horizontal'
     });
-    const tabsterAttributes = (0, _reacttabster.useMergedTabsterAttributes_unstable)(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs);
+    const tabsterAttributes = (0, _reacttabster.useMergedTabsterAttributes_unstable)(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs, props);
     const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
         ref: (0, _reactutilities.useMergedRefs)(rootRef, ref),
         tabIndex: focusableItems ? 0 : undefined,
@@ -154,8 +154,8 @@ const useListItem_unstable = (props, ref)=>{
         ...isSelectionEnabled && {
             'aria-selected': isSelected
         },
-        ...tabsterAttributes,
         ...props,
+        ...tabsterAttributes,
         onKeyDown: handleKeyDown,
         onClick: isSelectionEnabled || onClick || onAction ? handleClick : undefined
     }), {

package/lib-commonjs/components/ListItem/useListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\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 { 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 } = props;\n\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const navigationMode = useListContext_unstable(ctx => ctx.navigationMode);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n  const listItemRole = useListContext_unstable(ctx => ctx.listItemRole);\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(isSelectionEnabled || 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 (isSelectionEnabled) {\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 (isSelectionEnabled) {\n          toggleItem?.(e, value);\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 (!isSelectionEnabled || 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  );\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      ...(isSelectionEnabled && {\n        'aria-selected': isSelected,\n      }),\n      ...tabsterAttributes,\n      ...props,\n      onKeyDown: handleKeyDown,\n      onClick: isSelectionEnabled || 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    },\n    renderByDefault: isSelectionEnabled,\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    selectable: isSelectionEnabled,\n    navigable: focusableItems,\n  };\n\n  return state;\n};\n"],"names":["useListItem_unstable","DEFAULT_ROOT_EL_TYPE","props","ref","id","useId","value","onKeyDown","onClick","tabIndex","role","onAction","toggleItem","useListContext_unstable","ctx","selection","navigationMode","isSelectionEnabled","isSelected","listItemRole","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","React","useRef","checkmarkRef","handleAction","useEventCallback","event","type","ListItemActionEventName","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","createListItemActionEvent","target","dispatchEvent","focusableGroupAttrs","useFocusableGroup","ignoreDefaultKeydown","Enter","tabBehavior","handleClick","isFromCheckbox","elementContains","handleKeyDown","currentTarget","key","ArrowLeft","GroupperMoveFocusEvent","action","GroupperMoveFocusActions","Escape","ArrowDown","ArrowUp","preventDefault","MoverMoveFocusEvent","MoverKeys","Space","ArrowRight","onCheckboxChange","data","arrowNavigationAttributes","useArrowNavigationGroup","axis","tabsterAttributes","useMergedTabsterAttributes_unstable","root","slot","always","getIntrinsicElementProps","useMergedRefs","undefined","String","elementType","checkmark","optional","defaultProps","checked","renderByDefault","Checkbox","mergedCheckmarkRef","onChange","mergeCallbacks","state","components","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["import * 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 { 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 } = props;\n\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const navigationMode = useListContext_unstable(ctx => ctx.navigationMode);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n  const listItemRole = useListContext_unstable(ctx => ctx.listItemRole);\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(isSelectionEnabled || 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 (isSelectionEnabled) {\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 (isSelectionEnabled) {\n          toggleItem?.(e, value);\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 (!isSelectionEnabled || 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      ...(isSelectionEnabled && {\n        'aria-selected': isSelected,\n      }),\n      ...props,\n      ...tabsterAttributes,\n      onKeyDown: handleKeyDown,\n      onClick: isSelectionEnabled || 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    },\n    renderByDefault: isSelectionEnabled,\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    selectable: isSelectionEnabled,\n    navigable: focusableItems,\n  };\n\n  return state;\n};\n"],"names":["useListItem_unstable","DEFAULT_ROOT_EL_TYPE","props","ref","id","useId","value","onKeyDown","onClick","tabIndex","role","onAction","toggleItem","useListContext_unstable","ctx","selection","navigationMode","isSelectionEnabled","isSelected","listItemRole","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","React","useRef","checkmarkRef","handleAction","useEventCallback","event","type","ListItemActionEventName","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","createListItemActionEvent","target","dispatchEvent","focusableGroupAttrs","useFocusableGroup","ignoreDefaultKeydown","Enter","tabBehavior","handleClick","isFromCheckbox","elementContains","handleKeyDown","currentTarget","key","ArrowLeft","GroupperMoveFocusEvent","action","GroupperMoveFocusActions","Escape","ArrowDown","ArrowUp","preventDefault","MoverMoveFocusEvent","MoverKeys","Space","ArrowRight","onCheckboxChange","data","arrowNavigationAttributes","useArrowNavigationGroup","axis","tabsterAttributes","useMergedTabsterAttributes_unstable","root","slot","always","getIntrinsicElementProps","useMergedRefs","undefined","String","elementType","checkmark","optional","defaultProps","checked","renderByDefault","Checkbox","mergedCheckmarkRef","onChange","mergeCallbacks","state","components","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyCaA;;;eAAAA;;;;iEAzCU;8BAUhB;gCASA;6BAEiC;8BACgC;+BACzB;qCAKxC;AAEP,MAAMC,uBAAuB;AAWtB,MAAMD,uBAAuB,CAClCE,OACAC;IAEA,MAAMC,KAAKC,IAAAA,qBAAAA,EAAM;IACjB,MAAM,EAAEC,QAAQF,EAAE,EAAEG,SAAS,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGT;IAErE,MAAMU,aAAaC,IAAAA,oCAAAA,EAAwBC,CAAAA;YAAOA;eAAAA,CAAAA,iBAAAA,IAAIC,SAAS,AAATA,MAAS,QAAbD,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAeF,UAAU;;IAC3E,MAAMI,iBAAiBH,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIE,cAAc;IACxE,MAAMC,qBAAqBJ,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAO,CAAC,CAACA,IAAIC,SAAS;IACzE,MAAMG,aAAaL,IAAAA,oCAAAA,EAAwBC,CAAAA;YAAOA;eAAAA,CAAAA,iBAAAA,IAAIC,SAAS,AAATA,MAAS,QAAbD,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAeI,UAAU,CAACZ;;IAC5E,MAAMa,eAAeN,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIK,YAAY;IACpE,MAAMC,mBAAmBP,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIM,gBAAgB;IAE5E,MAAMC,KAAKnB,MAAMmB,EAAE,IAAIL,mBAAmB,cAAc,QAAQf;IAEhE,MAAMqB,oBAAoBZ,QAAQS;IAElC,MAAMI,iBAAiBC,QAAQP,sBAAsBD,kBAAkBP,aAAa;IAEpF,MAAMgB,UAAUC,OAAMC,MAAM,CAAiC;IAC7D,MAAMC,eAAeF,OAAMC,MAAM,CAA0B;IAE3D,MAAME,eAAqDC,IAAAA,gCAAAA,EAAiBC,CAAAA;QAC1EpB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWoB,OAAO;YAAEA;YAAOzB;YAAO0B,MAAMC,4CAAAA;QAAwB;QAEhE,IAAIF,MAAMG,gBAAgB,EAAE;YAC1B;QACF;QAEA,IAAIjB,oBAAoB;YACtBL,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAamB,MAAMI,MAAM,CAACC,aAAa,EAAE9B;QAC3C;IACF;IAEAoB,OAAMW,SAAS,CAAC;QACd,IAAIZ,QAAQa,OAAO,EAAE;YACnBlB,iBAAiBK,QAAQa,OAAO;QAClC;IACF,GAAG;QAAClB;KAAiB;IAErB,MAAMmB,gBAAgB,CAACC;QACrB,MAAMC,cAAcC,IAAAA,8CAAAA,EAA0BF;QAC9CX,aAAaY;QACbD,EAAEG,MAAM,CAACC,aAAa,CAACH;IACzB;IAEA,MAAMI,sBAAsBC,IAAAA,+BAAAA,EAAkB;QAC5CC,sBAAsB;YAAEC,OAAO;QAAK;QACpCC,aAAa;IACf;IAEA,MAAMC,cAAuEpB,IAAAA,gCAAAA,EAAiBU,CAAAA;QAC5FhC,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUgC;QAEV,IAAIA,EAAEN,gBAAgB,EAAE;YACtB;QACF;QAEA,MAAMiB,iBAAiBC,IAAAA,+BAAAA,EAAgBxB,aAAaU,OAAO,EAAEE,EAAEG,MAAM;QACrE,IAAIQ,gBAAgB;YAClB;QACF;QAEAZ,cAAcC;IAChB;IAEA,MAAMa,gBAA4EvB,IAAAA,gCAAAA,EAAiBU,CAAAA;QACjGjC,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYiC;QAEZ,IAAIA,EAAEN,gBAAgB,EAAE;YACtB;QACF;QAEA,6DAA6D;QAC7D,IAAIM,EAAEG,MAAM,KAAKH,EAAEc,aAAa,EAAE;YAChC,IAAI/B,gBAAgB;gBAClB,qFAAqF;gBACrF,OAAQiB,EAAEe,GAAG;oBACX,+FAA+F;oBAC/F,uFAAuF;oBACvF,2EAA2E;oBAC3E,KAAKC,uBAAAA;wBACHhB,EAAEG,MAAM,CAACC,aAAa,CAAC,IAAIa,oCAAAA,CAAuB;4BAAEC,QAAQC,sCAAAA,CAAyBC,MAAM;wBAAC;wBAC5F;oBAEF,KAAKC,uBAAAA;oBACL,KAAKC,qBAAAA;wBACHtB,EAAEuB,cAAc;wBAChB,2EAA2E;wBAC3EvB,EAAEG,MAAM,CAACC,aAAa,CAAC,IAAIa,oCAAAA,CAAuB;4BAAEC,QAAQC,sCAAAA,CAAyBC,MAAM;wBAAC;wBAC5F,+DAA+D;wBAC/DpB,EAAEc,aAAa,CAACV,aAAa,CAAC,IAAIoB,iCAAAA,CAAoB;4BAAET,KAAKU,uBAAS,CAACzB,EAAEe,GAAG,CAAC;wBAAC;gBAClF;gBACA;YACF;YACA;QACF;QAEA,OAAQf,EAAEe,GAAG;YACX,KAAKW,mBAAAA;gBACH,+EAA+E;gBAC/E1B,EAAEuB,cAAc;gBAEhB,8CAA8C;gBAC9C,IAAI9C,oBAAoB;oBACtBL,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAa4B,GAAGlC;gBAClB,OAAO;oBACLiC,cAAcC;gBAChB;gBAEA;YAEF,KAAKQ,mBAAAA;gBACHT,cAAcC;gBACd;YAEF,KAAK2B,wBAAAA;gBACH,IAAInD,mBAAmB,aAAa;oBAClCwB,EAAEG,MAAM,CAACC,aAAa,CAAC,IAAIa,oCAAAA,CAAuB;wBAAEC,QAAQC,sCAAAA,CAAyBX,KAAK;oBAAC;gBAC7F;gBAEA;QACJ;IACF;IAEA,MAAMoB,mBAAmBtC,IAAAA,gCAAAA,EAAiB,CAACU,GAAwC6B;QACjF,IAAI,CAACpD,sBAAsBuB,EAAEN,gBAAgB,EAAE;YAC7C;QACF;QAEAtB,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAa4B,GAAGlC;IAClB;IAEA,MAAMgE,4BAA4BC,IAAAA,qCAAAA,EAAwB;QACxDC,MAAM;IACR;IAEA,MAAMC,oBAAoBC,IAAAA,iDAAAA,EACxBnD,iBAAiB+C,4BAA4B,CAAC,GAC9CzB,qBACA3C;IAGF,MAAMyE,OAAOC,oBAAAA,CAAKC,MAAM,CACtBC,IAAAA,wCAAAA,EAAyBzD,IAAI;QAC3BlB,KAAK4E,IAAAA,6BAAAA,EAActD,SAAStB;QAC5BM,UAAUc,iBAAiB,IAAIyD;QAC/BtE,MAAMY;QACNlB,IAAI6E,OAAO3E;QACX,GAAIW,sBAAsB;YACxB,iBAAiBC;QACnB,CAAC;QACD,GAAGhB,KAAK;QACR,GAAGuE,iBAAiB;QACpBlE,WAAW8C;QACX7C,SAASS,sBAAsBT,WAAWG,WAAWuC,cAAc8B;IACrE,IACA;QAAEE,aAAa7D;IAAG;IAGpB,MAAM8D,YAAYP,oBAAAA,CAAKQ,QAAQ,CAAClF,MAAMiF,SAAS,EAAE;QAC/CE,cAAc;YACZC,SAASpE;YACTT,UAAU,CAAC;QACb;QACA8E,iBAAiBtE;QACjBiE,aAAaM,uBAAAA;IACf;IAEA,MAAMC,qBAAqBV,IAAAA,6BAAAA,EAAcI,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWhF,GAAG,EAAEyB;IACzD,IAAIuD,WAAW;QACbA,UAAUO,QAAQ,GAAGC,IAAAA,8BAAAA,EAAeR,UAAUO,QAAQ,EAAEtB;QACxDe,UAAUhF,GAAG,GAAGsF;IAClB;IAEA,MAAMG,QAAuB;QAC3BC,YAAY;YACVlB,MAAMtD;YACN8D,WAAWK,uBAAAA;QACb;QACAb;QACAQ;QACAW,YAAY7E;QACZ8E,WAAWxE;IACb;IAEA,OAAOqE;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-list",
-  "version": "9.1.3",
+  "version": "9.1.4",
   "description": "React List v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,11 +26,11 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-checkbox": "^9.3.3",
+    "@fluentui/react-checkbox": "^9.3.4",
     "@fluentui/react-context-selector": "^9.1.75",
     "@fluentui/react-jsx-runtime": "^9.0.53",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-tabster": "^9.24.3",
+    "@fluentui/react-tabster": "^9.24.4",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.18.23",
     "@fluentui/react-shared-contexts": "^9.23.1",