@fluentui/react-list 9.6.13 → 9.6.14

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-list
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.14)
+
+Thu, 23 Apr 2026 11:59:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.13..@fluentui/react-list_v9.6.14)
+
+### Patches
+
+- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.6.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
 ## [9.6.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.13)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.12..@fluentui/react-list_v9.6.13)
 
 ### Patches

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Checkbox } from '@fluentui/react-checkbox';
+import type { Checkbox } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { EventData } from '@fluentui/react-utilities';
@@ -6,7 +6,7 @@ import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import { SelectionItemId } from '@fluentui/react-utilities';
+import type { SelectionItemId } from '@fluentui/react-utilities';
 import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';

package/lib/components/List/List.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering List
+ */ export { };

package/lib/components/List/List.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  SelectionMode,\n  SelectionItemId,\n  EventHandler,\n  EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n  selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  navigationMode?: ListNavigationMode;\n  selectionMode?: SelectionMode;\n  selectedItems?: SelectionItemId[];\n  defaultSelectedItems?: SelectionItemId[];\n  onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n  selection?: ListSelectionState;\n  validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n  navigationMode: ListNavigationMode | undefined;\n  listItemRole: string;\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n  synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/List/List.types.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  SelectionMode,\n  SelectionItemId,\n  EventHandler,\n  EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n  selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  navigationMode?: ListNavigationMode;\n  selectionMode?: SelectionMode;\n  selectedItems?: SelectionItemId[];\n  defaultSelectedItems?: SelectionItemId[];\n  onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n  selection?: ListSelectionState;\n  validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n  navigationMode: ListNavigationMode | undefined;\n  listItemRole: string;\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n  synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAAmG"}

package/lib/components/List/listContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n  selection: undefined,\n  validateListItem: () => {\n    /* noop */\n  },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n  React.useContext(ListSynchronousContext) || {\n    navigationMode: undefined,\n    listItemRole: 'listitem',\n  };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGrF,YAAYC,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,yBAAyBX,MAAMF,aAAa,CAA0CK;AAE5F,OAAO,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AAC9E,OAAO,MAAMM,4BAA4B,IACvCb,MAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}
+{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n  selection: undefined,\n  validateListItem: () => {\n    /* noop */\n  },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n  React.useContext(ListSynchronousContext) || {\n    navigationMode: undefined,\n    listItemRole: 'listitem',\n  };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGrF,YAAYC,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,yBAAyBX,MAAMF,aAAa,CAA0CK;AAE5F,OAAO,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AAC9E,OAAO,MAAMM,4BAA4B,IACvCb,MAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

package/lib/components/List/useList.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
 import { useListSelection } from '../../hooks/useListSelection';

package/lib/components/List/useList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/useList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  OnSelectionChangeData,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../../hooks/useListSelection';\nimport {\n  calculateListItemRoleForListRole,\n  calculateListRole,\n  validateGridCellsArePresent,\n  validateProperElementTypes,\n  validateProperRolesAreUsed,\n} from '../../utils';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (\n  props: ListProps,\n  ref: React.Ref<HTMLDivElement | HTMLUListElement | HTMLOListElement>,\n): ListState => {\n  const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;\n\n  const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { event: e, type: 'change', selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode: selectionMode || 'multiselect',\n    selectedItems: selectionState,\n  });\n\n  const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);\n  const listItemRole = calculateListItemRoleForListRole(listRole);\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const validateListItem = useEventCallback((listItemEl: HTMLElement) => {\n    if (process.env.NODE_ENV === 'production') {\n      return;\n    }\n    const itemRole = listItemEl.getAttribute('role') || '';\n    const focusable = findAllFocusable(listItemEl);\n    validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());\n    validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);\n    validateGridCellsArePresent(listRole, listItemEl);\n  });\n\n  return {\n    components: {\n      root: as,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        ref,\n        role: listRole,\n        ...(selectionMode && {\n          'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        }),\n        ...arrowNavigationAttributes,\n        ...props,\n      }),\n      { elementType: as },\n    ),\n    listItemRole,\n    validateListItem,\n    navigationMode,\n    // only pass down selection state if its handled internally, otherwise just report the events\n    selection: selectionMode ? selection : undefined,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useFocusFinders","useListSelection","calculateListItemRoleForListRole","calculateListRole","validateGridCellsArePresent","validateProperElementTypes","validateProperRolesAreUsed","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","navigationMode","selectionMode","selectedItems","defaultSelectedItems","onSelectionChange","as","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","event","type","selection","listRole","role","listItemRole","findAllFocusable","validateListItem","listItemEl","process","env","NODE_ENV","itemRole","getAttribute","focusable","tagName","toLocaleLowerCase","length","components","root","always","undefined","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EAExBC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AAEnF,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SACEC,gCAAgC,EAChCC,iBAAiB,EACjBC,2BAA2B,EAC3BC,0BAA0B,EAC1BC,0BAA0B,QACrB,cAAc;AAErB,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,aAAa,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGN;IAElG,MAAMO,KAAKP,MAAMO,EAAE,IAAIL,mBAAmB,cAAc,QAAQJ;IAEhE,MAAMU,4BAA4BlB,wBAAwB;QACxDmB,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGxB,qBAAqB;QAC/DyB,OAAOT;QACPU,cAAcT;QACdU,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAW3B,iBAAiB,CAAC4B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKd,aAAa;QAC1DQ,kBAAkBO;QAClBb,8BAAAA,wCAAAA,kBAAoBW,GAAG;YAAEK,OAAOL;YAAGM,MAAM;YAAUnB,eAAee;QAAqB;IACzF;IAEA,MAAMK,YAAYhC,iBAAiB;QACjCc,mBAAmBU;QACnBb,eAAeA,iBAAiB;QAChCC,eAAeO;IACjB;IAEA,MAAMc,WAAWzB,MAAM0B,IAAI,IAAIhC,kBAAkBQ,gBAAgB,CAAC,CAACC;IACnE,MAAMwB,eAAelC,iCAAiCgC;IAEtD,MAAM,EAAEG,gBAAgB,EAAE,GAAGrC;IAE7B,MAAMsC,mBAAmBxC,iBAAiB,CAACyC;QACzC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC;QACF;QACA,MAAMC,WAAWJ,WAAWK,YAAY,CAAC,WAAW;QACpD,MAAMC,YAAYR,iBAAiBE;QACnClC,2BAA2BW,IAAIuB,WAAWO,OAAO,CAACC,iBAAiB;QACnEzC,2BAA2B4B,UAAUS,UAAU,CAAC,CAAC/B,eAAeiC,UAAUG,MAAM,GAAG;QACnF5C,4BAA4B8B,UAAUK;IACxC;IAEA,OAAO;QACLU,YAAY;YACVC,MAAMlC;QACR;QACAkC,MAAMtD,KAAKuD,MAAM,CACfxD,yBAAyBqB,IAAI;YAC3BN;YACAyB,MAAMD;YACN,GAAItB,iBAAiB;gBACnB,wBAAwBA,kBAAkB,gBAAgB,OAAOwC;YACnE,CAAC;YACD,GAAGnC,yBAAyB;YAC5B,GAAGR,KAAK;QACV,IACA;YAAE4C,aAAarC;QAAG;QAEpBoB;QACAE;QACA3B;QACA,6FAA6F;QAC7FsB,WAAWrB,gBAAgBqB,YAAYmB;IACzC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/List/useList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnSelectionChangeData } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../../hooks/useListSelection';\nimport {\n  calculateListItemRoleForListRole,\n  calculateListRole,\n  validateGridCellsArePresent,\n  validateProperElementTypes,\n  validateProperRolesAreUsed,\n} from '../../utils';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (\n  props: ListProps,\n  ref: React.Ref<HTMLDivElement | HTMLUListElement | HTMLOListElement>,\n): ListState => {\n  const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;\n\n  const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { event: e, type: 'change', selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode: selectionMode || 'multiselect',\n    selectedItems: selectionState,\n  });\n\n  const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);\n  const listItemRole = calculateListItemRoleForListRole(listRole);\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const validateListItem = useEventCallback((listItemEl: HTMLElement) => {\n    if (process.env.NODE_ENV === 'production') {\n      return;\n    }\n    const itemRole = listItemEl.getAttribute('role') || '';\n    const focusable = findAllFocusable(listItemEl);\n    validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());\n    validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);\n    validateGridCellsArePresent(listRole, listItemEl);\n  });\n\n  return {\n    components: {\n      root: as,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        ref,\n        role: listRole,\n        ...(selectionMode && {\n          'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        }),\n        ...arrowNavigationAttributes,\n        ...props,\n      }),\n      { elementType: as },\n    ),\n    listItemRole,\n    validateListItem,\n    navigationMode,\n    // only pass down selection state if its handled internally, otherwise just report the events\n    selection: selectionMode ? selection : undefined,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useFocusFinders","useListSelection","calculateListItemRoleForListRole","calculateListRole","validateGridCellsArePresent","validateProperElementTypes","validateProperRolesAreUsed","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","navigationMode","selectionMode","selectedItems","defaultSelectedItems","onSelectionChange","as","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","event","type","selection","listRole","role","listItemRole","findAllFocusable","validateListItem","listItemEl","process","env","NODE_ENV","itemRole","getAttribute","focusable","tagName","toLocaleLowerCase","length","components","root","always","undefined","elementType"],"mappings":"AAAA;AAIA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACnH,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AAEnF,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SACEC,gCAAgC,EAChCC,iBAAiB,EACjBC,2BAA2B,EAC3BC,0BAA0B,EAC1BC,0BAA0B,QACrB,cAAc;AAErB,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,aAAa,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGN;IAElG,MAAMO,KAAKP,MAAMO,EAAE,IAAIL,mBAAmB,cAAc,QAAQJ;IAEhE,MAAMU,4BAA4BlB,wBAAwB;QACxDmB,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGxB,qBAAqB;QAC/DyB,OAAOT;QACPU,cAAcT;QACdU,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAW3B,iBAAiB,CAAC4B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKd,aAAa;QAC1DQ,kBAAkBO;QAClBb,8BAAAA,wCAAAA,kBAAoBW,GAAG;YAAEK,OAAOL;YAAGM,MAAM;YAAUnB,eAAee;QAAqB;IACzF;IAEA,MAAMK,YAAYhC,iBAAiB;QACjCc,mBAAmBU;QACnBb,eAAeA,iBAAiB;QAChCC,eAAeO;IACjB;IAEA,MAAMc,WAAWzB,MAAM0B,IAAI,IAAIhC,kBAAkBQ,gBAAgB,CAAC,CAACC;IACnE,MAAMwB,eAAelC,iCAAiCgC;IAEtD,MAAM,EAAEG,gBAAgB,EAAE,GAAGrC;IAE7B,MAAMsC,mBAAmBxC,iBAAiB,CAACyC;QACzC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC;QACF;QACA,MAAMC,WAAWJ,WAAWK,YAAY,CAAC,WAAW;QACpD,MAAMC,YAAYR,iBAAiBE;QACnClC,2BAA2BW,IAAIuB,WAAWO,OAAO,CAACC,iBAAiB;QACnEzC,2BAA2B4B,UAAUS,UAAU,CAAC,CAAC/B,eAAeiC,UAAUG,MAAM,GAAG;QACnF5C,4BAA4B8B,UAAUK;IACxC;IAEA,OAAO;QACLU,YAAY;YACVC,MAAMlC;QACR;QACAkC,MAAMtD,KAAKuD,MAAM,CACfxD,yBAAyBqB,IAAI;YAC3BN;YACAyB,MAAMD;YACN,GAAItB,iBAAiB;gBACnB,wBAAwBA,kBAAkB,gBAAgB,OAAOwC;YACnE,CAAC;YACD,GAAGnC,yBAAyB;YAC5B,GAAGR,KAAK;QACV,IACA;YAAE4C,aAAarC;QAAG;QAEpBoB;QACAE;QACA3B;QACA,6FAA6F;QAC7FsB,WAAWrB,gBAAgBqB,YAAYmB;IACzC;AACF,EAAE"}

package/lib/components/List/useListContextValues.js

@@ -2,11 +2,15 @@
 import * as React from 'react';
 export function useListContextValues_unstable(state) {
     const { selection, navigationMode, listItemRole, validateListItem } = state;
-    const listContext = {
+    const listContext = React.useMemo(()=>({
+            selection,
+            navigationMode,
+            validateListItem
+        }), [
         selection,
         navigationMode,
         validateListItem
-    };
+    ]);
     const synchronousContext = React.useMemo(()=>({
             listItemRole,
             navigationMode

package/lib/components/List/useListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n  const listContext = {\n    selection,\n    navigationMode,\n    validateListItem,\n  };\n\n  const synchronousContext = React.useMemo(\n    () => ({\n      listItemRole,\n      navigationMode,\n    }),\n    [listItemRole, navigationMode],\n  );\n\n  return {\n    listContext,\n    synchronousContext,\n  };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","synchronousContext","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAC;QACAE;IACF;IAEA,MAAME,qBAAqBR,MAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;QACF,CAAA,GACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n  const listContext = React.useMemo(\n    () => ({\n      selection,\n      navigationMode,\n      validateListItem,\n    }),\n    [selection, navigationMode, validateListItem],\n  );\n\n  const synchronousContext = React.useMemo(\n    () => ({\n      listItemRole,\n      navigationMode,\n    }),\n    [listItemRole, navigationMode],\n  );\n\n  return {\n    listContext,\n    synchronousContext,\n  };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","useMemo","synchronousContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAcP,MAAMQ,OAAO,CAC/B,IAAO,CAAA;YACLL;YACAC;YACAE;QACF,CAAA,GACA;QAACH;QAAWC;QAAgBE;KAAiB;IAG/C,MAAMG,qBAAqBT,MAAMQ,OAAO,CACtC,IAAO,CAAA;YACLH;YACAD;QACF,CAAA,GACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAE;IACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n  value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: ListItemValue;\n  onAction?: EventHandler<ListItemActionEventData>;\n  disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable: boolean;\n  navigable: boolean;\n  disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}
+{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import type { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n  value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: ListItemValue;\n  onAction?: EventHandler<ListItemActionEventData>;\n  disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable: boolean;\n  navigable: boolean;\n  disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}

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

@@ -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)) ?? 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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"}
+{"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 type { CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { ListItemActionEvent } from '../../events/ListItemActionEvent';\nimport { createListItemActionEvent, ListItemActionEventName } 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/lib/events/ListItemActionEvent.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export const ListItemActionEventName = 'ListItemAction';
 export const createListItemActionEvent = (originalEvent)=>new CustomEvent(ListItemActionEventName, {
         cancelable: true,

package/lib/events/ListItemActionEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n  originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n  originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n  new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n    cancelable: true,\n    bubbles: true,\n    detail: { originalEvent },\n  });\n"],"names":["React","ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA0B,iBAAiB;AAQxD,OAAO,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}
+{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n  originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n  originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n  new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n    cancelable: true,\n    bubbles: true,\n    detail: { originalEvent },\n  });\n"],"names":["ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":"AAEA,OAAO,MAAMA,0BAA0B,iBAAiB;AAQxD,OAAO,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}

package/lib/hooks/types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n  isSelected: (item: string | number) => boolean;\n  toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n  deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  clearSelection: (e: React.SyntheticEvent) => void;\n  toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n  setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n  selectedItems: SelectionItemId[];\n};\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import type { SelectionItemId } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type ListSelectionState = {\n  isSelected: (item: string | number) => boolean;\n  toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n  deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  clearSelection: (e: React.SyntheticEvent) => void;\n  toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n  setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n  selectedItems: SelectionItemId[];\n};\n"],"names":[],"mappings":"AAGA,WASE"}

package/lib/hooks/useListSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n  const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n  const [selectedItems, setSelectedItems] = useControllableState({\n    state: options.selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange: (e, data) => {\n      setSelectedItems(data.selectedItems);\n      onSelectionChange?.(e, data);\n    },\n  });\n\n  const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n    selectionMethods.toggleItem(e, itemId),\n  );\n\n  const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n    selectionMethods.toggleAllItems(e, itemIds);\n  });\n\n  const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.deselectItem(e, itemId),\n  );\n\n  const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.selectItem(e, itemId),\n  );\n\n  const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n  return {\n    selectedItems: selectedArray,\n    toggleItem,\n    toggleAllItems,\n    deselectItem,\n    selectItem,\n    setSelectedItems,\n    isSelected: (id: string | number) => selectionMethods.isSelected(id),\n    clearSelection,\n  };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;AAEA,SAA8BA,oBAAoB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAG/B,OAAO,SAASC,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,qBAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGb,aAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,8BAAAA,wCAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CjB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,iBAAuDnB,iBAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,eAAmDrB,iBAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,aAA+CtB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,iBAAuDvB,iBAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,MAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport type { SelectionHookParams } from '@fluentui/react-utilities';\nimport { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n  const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n  const [selectedItems, setSelectedItems] = useControllableState({\n    state: options.selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange: (e, data) => {\n      setSelectedItems(data.selectedItems);\n      onSelectionChange?.(e, data);\n    },\n  });\n\n  const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n    selectionMethods.toggleItem(e, itemId),\n  );\n\n  const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n    selectionMethods.toggleAllItems(e, itemIds);\n  });\n\n  const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.deselectItem(e, itemId),\n  );\n\n  const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.selectItem(e, itemId),\n  );\n\n  const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n  return {\n    selectedItems: selectedArray,\n    toggleItem,\n    toggleAllItems,\n    deselectItem,\n    selectItem,\n    setSelectedItems,\n    isSelected: (id: string | number) => selectionMethods.isSelected(id),\n    clearSelection,\n  };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;AAGA,SAASA,oBAAoB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AACjG,YAAYC,WAAW,QAAQ;AAG/B,OAAO,SAASC,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,qBAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGb,aAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,8BAAAA,wCAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CjB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,iBAAuDnB,iBAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,eAAmDrB,iBAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,aAA+CtB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,iBAAuDvB,iBAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,MAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}

package/lib/utils/calculateListRole.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import { ListNavigationMode } from '../List';\n\n/**\n * Calculate the role for the list based on the navigation mode and selectable state\n * @param navigationMode - the navigation mode of the list\n * @param selectable - whether the list is selectable\n * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not\n */\n\nexport const calculateListRole = (\n  navigationMode: ListNavigationMode | undefined,\n  selectable: boolean,\n): 'grid' | 'listbox' | 'list' => {\n  if (navigationMode === 'composite') {\n    return 'grid';\n  } else if (selectable) {\n    return 'listbox';\n  } else {\n    return 'list';\n  }\n};\n"],"names":["calculateListRole","navigationMode","selectable"],"mappings":"AAEA;;;;;CAKC,GAED,OAAO,MAAMA,oBAAoB,CAC/BC,gBACAC;IAEA,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}
+{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import type { ListNavigationMode } from '../List';\n\n/**\n * Calculate the role for the list based on the navigation mode and selectable state\n * @param navigationMode - the navigation mode of the list\n * @param selectable - whether the list is selectable\n * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not\n */\n\nexport const calculateListRole = (\n  navigationMode: ListNavigationMode | undefined,\n  selectable: boolean,\n): 'grid' | 'listbox' | 'list' => {\n  if (navigationMode === 'composite') {\n    return 'grid';\n  } else if (selectable) {\n    return 'listbox';\n  } else {\n    return 'list';\n  }\n};\n"],"names":["calculateListRole","navigationMode","selectable"],"mappings":"AAEA;;;;;CAKC,GAED,OAAO,MAAMA,oBAAoB,CAC/BC,gBACAC;IAEA,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}

package/lib-commonjs/components/List/List.types.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering List
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/List/List.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  SelectionMode,\n  SelectionItemId,\n  EventHandler,\n  EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n  selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  navigationMode?: ListNavigationMode;\n  selectionMode?: SelectionMode;\n  selectedItems?: SelectionItemId[];\n  defaultSelectedItems?: SelectionItemId[];\n  onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n  selection?: ListSelectionState;\n  validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n  navigationMode: ListNavigationMode | undefined;\n  listItemRole: string;\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n  synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/List/List.types.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  SelectionMode,\n  SelectionItemId,\n  EventHandler,\n  EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n  selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  navigationMode?: ListNavigationMode;\n  selectionMode?: SelectionMode;\n  selectedItems?: SelectionItemId[];\n  defaultSelectedItems?: SelectionItemId[];\n  onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n  selection?: ListSelectionState;\n  validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n  navigationMode: ListNavigationMode | undefined;\n  listItemRole: string;\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n  synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAAmG"}

package/lib-commonjs/components/List/listContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n  selection: undefined,\n  validateListItem: () => {\n    /* noop */\n  },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n  React.useContext(ListSynchronousContext) || {\n    navigationMode: undefined,\n    listItemRole: 'listitem',\n  };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;;;;;;;;;;;;uBAgBaQ;eAAAA;;kCAaAM;;;2BAtBAX;;;2BAWAO;;;IAYAK,yBAAAA;;;;;sCA5BqC,mCAAmC;iEAG9D,QAAQ;AAExB,MAAMZ,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,kBAAcP,mCAAAA,EAA4CK;AAEzD,4BAA4BE,YAAYE,QAAQ,CAAC;AAEjD,MAAMC,0BAA0B,CAAIC,eACzCV,wCAAAA,EAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,uCAAyBX,OAAMF,aAAa,CAA0CK;AAErF,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AACvE,kCAAkC,IACvCP,OAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}
+{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n  selection: undefined,\n  validateListItem: () => {\n    /* noop */\n  },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n  React.useContext(ListSynchronousContext) || {\n    navigationMode: undefined,\n    listItemRole: 'listitem',\n  };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;;;;;;;;;;;;uBAgBaQ;eAAAA;;kCAaAM;;;2BAtBAX;;;2BAWAO;;;IAYAK,yBAAAA;;;;;sCA5BqC,mCAAmC;iEAG9D,QAAQ;AAExB,MAAMZ,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,kBAAcP,mCAAAA,EAA4CK;AAEzD,4BAA4BE,YAAYE,QAAQ,CAAC;AAEjD,MAAMC,0BAA0B,CAAIC,eACzCV,wCAAAA,EAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,uCAAyBX,OAAMF,aAAa,CAA0CK;AAErF,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AACvE,kCAAkC,IACvCP,OAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

package/lib-commonjs/components/List/useList.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useList_unstable", {
         return useList_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttabster = require("@fluentui/react-tabster");
 const _useListSelection = require("../../hooks/useListSelection");

package/lib-commonjs/components/List/useList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/useList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  OnSelectionChangeData,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../../hooks/useListSelection';\nimport {\n  calculateListItemRoleForListRole,\n  calculateListRole,\n  validateGridCellsArePresent,\n  validateProperElementTypes,\n  validateProperRolesAreUsed,\n} from '../../utils';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (\n  props: ListProps,\n  ref: React.Ref<HTMLDivElement | HTMLUListElement | HTMLOListElement>,\n): ListState => {\n  const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;\n\n  const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { event: e, type: 'change', selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode: selectionMode || 'multiselect',\n    selectedItems: selectionState,\n  });\n\n  const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);\n  const listItemRole = calculateListItemRoleForListRole(listRole);\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const validateListItem = useEventCallback((listItemEl: HTMLElement) => {\n    if (process.env.NODE_ENV === 'production') {\n      return;\n    }\n    const itemRole = listItemEl.getAttribute('role') || '';\n    const focusable = findAllFocusable(listItemEl);\n    validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());\n    validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);\n    validateGridCellsArePresent(listRole, listItemEl);\n  });\n\n  return {\n    components: {\n      root: as,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        ref,\n        role: listRole,\n        ...(selectionMode && {\n          'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        }),\n        ...arrowNavigationAttributes,\n        ...props,\n      }),\n      { elementType: as },\n    ),\n    listItemRole,\n    validateListItem,\n    navigationMode,\n    // only pass down selection state if its handled internally, otherwise just report the events\n    selection: selectionMode ? selection : undefined,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useFocusFinders","useListSelection","calculateListItemRoleForListRole","calculateListRole","validateGridCellsArePresent","validateProperElementTypes","validateProperRolesAreUsed","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","navigationMode","selectionMode","selectedItems","defaultSelectedItems","onSelectionChange","as","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","event","type","selection","listRole","role","listItemRole","findAllFocusable","validateListItem","listItemEl","process","env","NODE_ENV","itemRole","getAttribute","focusable","tagName","toLocaleLowerCase","length","components","root","always","undefined","elementType"],"mappings":"AAAA;;;;;+BAgCac;;;;;;;iEA9BU,QAAQ;gCAOxB,4BAA4B;8BACsB,0BAA0B;kCAElD,+BAA+B;uBAOzD,cAAc;AAErB,MAAMD,uBAAuB;AAWtB,yBAAyB,CAC9BE,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,aAAa,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGN;IAElG,MAAMO,KAAKP,MAAMO,EAAE,IAAIL,mBAAmB,cAAc,QAAQJ;IAEhE,MAAMU,4BAA4BlB,yCAAAA,EAAwB;QACxDmB,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,OAAGxB,oCAAAA,EAAqB;QAC/DyB,OAAOT;QACPU,cAAcT;QACdU,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAW3B,gCAAAA,EAAiB,CAAC4B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKd,aAAa;QAC1DQ,kBAAkBO;QAClBb,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBW,GAAG;YAAEK,OAAOL;YAAGM,MAAM;YAAUnB,eAAee;QAAqB;IACzF;IAEA,MAAMK,gBAAYhC,kCAAAA,EAAiB;QACjCc,mBAAmBU;QACnBb,eAAeA,iBAAiB;QAChCC,eAAeO;IACjB;IAEA,MAAMc,WAAWzB,MAAM0B,IAAI,QAAIhC,wBAAAA,EAAkBQ,gBAAgB,CAAC,CAACC;IACnE,MAAMwB,mBAAelC,uCAAAA,EAAiCgC;IAEtD,MAAM,EAAEG,gBAAgB,EAAE,OAAGrC,6BAAAA;IAE7B,MAAMsC,uBAAmBxC,gCAAAA,EAAiB,CAACyC;QACzC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC;QACF;QACA,MAAMC,WAAWJ,WAAWK,YAAY,CAAC,WAAW;QACpD,MAAMC,YAAYR,iBAAiBE;YACnClC,iCAAAA,EAA2BW,IAAIuB,WAAWO,OAAO,CAACC,iBAAiB;YACnEzC,iCAAAA,EAA2B4B,UAAUS,UAAU,CAAC,CAAC/B,eAAeiC,UAAUG,MAAM,GAAG;YACnF5C,kCAAAA,EAA4B8B,UAAUK;IACxC;IAEA,OAAO;QACLU,YAAY;YACVC,MAAMlC;QACR;QACAkC,MAAMtD,oBAAAA,CAAKuD,MAAM,KACfxD,wCAAAA,EAAyBqB,IAAI;YAC3BN;YACAyB,MAAMD;YACN,GAAItB,iBAAiB;gBACnB,wBAAwBA,kBAAkB,gBAAgB,OAAOwC;YACnE,CAAC;YACD,GAAGnC,yBAAyB;YAC5B,GAAGR,KAAK;QACV,IACA;YAAE4C,aAAarC;QAAG;QAEpBoB;QACAE;QACA3B;QACA,6FAA6F;QAC7FsB,WAAWrB,gBAAgBqB,YAAYmB;IACzC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/List/useList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnSelectionChangeData } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../../hooks/useListSelection';\nimport {\n  calculateListItemRoleForListRole,\n  calculateListRole,\n  validateGridCellsArePresent,\n  validateProperElementTypes,\n  validateProperRolesAreUsed,\n} from '../../utils';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (\n  props: ListProps,\n  ref: React.Ref<HTMLDivElement | HTMLUListElement | HTMLOListElement>,\n): ListState => {\n  const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;\n\n  const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { event: e, type: 'change', selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode: selectionMode || 'multiselect',\n    selectedItems: selectionState,\n  });\n\n  const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);\n  const listItemRole = calculateListItemRoleForListRole(listRole);\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const validateListItem = useEventCallback((listItemEl: HTMLElement) => {\n    if (process.env.NODE_ENV === 'production') {\n      return;\n    }\n    const itemRole = listItemEl.getAttribute('role') || '';\n    const focusable = findAllFocusable(listItemEl);\n    validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());\n    validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);\n    validateGridCellsArePresent(listRole, listItemEl);\n  });\n\n  return {\n    components: {\n      root: as,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        ref,\n        role: listRole,\n        ...(selectionMode && {\n          'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        }),\n        ...arrowNavigationAttributes,\n        ...props,\n      }),\n      { elementType: as },\n    ),\n    listItemRole,\n    validateListItem,\n    navigationMode,\n    // only pass down selection state if its handled internally, otherwise just report the events\n    selection: selectionMode ? selection : undefined,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useFocusFinders","useListSelection","calculateListItemRoleForListRole","calculateListRole","validateGridCellsArePresent","validateProperElementTypes","validateProperRolesAreUsed","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","navigationMode","selectionMode","selectedItems","defaultSelectedItems","onSelectionChange","as","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","event","type","selection","listRole","role","listItemRole","findAllFocusable","validateListItem","listItemEl","process","env","NODE_ENV","itemRole","getAttribute","focusable","tagName","toLocaleLowerCase","length","components","root","always","undefined","elementType"],"mappings":"AAAA;;;;;+BA2Baa;;;;;;gCAvB0E,4BAA4B;8BAC1D,0BAA0B;kCAElD,+BAA+B;uBAOzD,cAAc;AAErB,MAAMD,uBAAuB;AAWtB,yBAAyB,CAC9BE,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,aAAa,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGN;IAElG,MAAMO,KAAKP,MAAMO,EAAE,IAAIL,mBAAmB,cAAc,QAAQJ;IAEhE,MAAMU,gCAA4BlB,qCAAAA,EAAwB;QACxDmB,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,OAAGxB,oCAAAA,EAAqB;QAC/DyB,OAAOT;QACPU,cAAcT;QACdU,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAW3B,gCAAAA,EAAiB,CAAC4B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKd,aAAa;QAC1DQ,kBAAkBO;QAClBb,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBW,GAAG;YAAEK,OAAOL;YAAGM,MAAM;YAAUnB,eAAee;QAAqB;IACzF;IAEA,MAAMK,gBAAYhC,kCAAAA,EAAiB;QACjCc,mBAAmBU;QACnBb,eAAeA,iBAAiB;QAChCC,eAAeO;IACjB;IAEA,MAAMc,WAAWzB,MAAM0B,IAAI,QAAIhC,wBAAAA,EAAkBQ,gBAAgB,CAAC,CAACC;IACnE,MAAMwB,mBAAelC,uCAAAA,EAAiCgC;IAEtD,MAAM,EAAEG,gBAAgB,EAAE,OAAGrC,6BAAAA;IAE7B,MAAMsC,uBAAmBxC,gCAAAA,EAAiB,CAACyC;QACzC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC;QACF;QACA,MAAMC,WAAWJ,WAAWK,YAAY,CAAC,WAAW;QACpD,MAAMC,YAAYR,iBAAiBE;YACnClC,iCAAAA,EAA2BW,IAAIuB,WAAWO,OAAO,CAACC,iBAAiB;YACnEzC,iCAAAA,EAA2B4B,UAAUS,UAAU,CAAC,CAAC/B,eAAeiC,UAAUG,MAAM,GAAG;YACnF5C,kCAAAA,EAA4B8B,UAAUK;IACxC;IAEA,OAAO;QACLU,YAAY;YACVC,MAAMlC;QACR;QACAkC,MAAMtD,oBAAAA,CAAKuD,MAAM,KACfxD,wCAAAA,EAAyBqB,IAAI;YAC3BN;YACAyB,MAAMD;YACN,GAAItB,iBAAiB;gBACnB,wBAAwBA,kBAAkB,gBAAgB,OAAOwC;YACnE,CAAC;YACD,GAAGnC,yBAAyB;YAC5B,GAAGR,KAAK;QACV,IACA;YAAE4C,aAAarC;QAAG;QAEpBoB;QACAE;QACA3B;QACA,6FAA6F;QAC7FsB,WAAWrB,gBAAgBqB,YAAYmB;IACzC;AACF,EAAE"}

package/lib-commonjs/components/List/useListContextValues.js

@@ -13,11 +13,15 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useListContextValues_unstable(state) {
     const { selection, navigationMode, listItemRole, validateListItem } = state;
-    const listContext = {
+    const listContext = _react.useMemo(()=>({
+            selection,
+            navigationMode,
+            validateListItem
+        }), [
         selection,
         navigationMode,
         validateListItem
-    };
+    ]);
     const synchronousContext = _react.useMemo(()=>({
             listItemRole,
             navigationMode

package/lib-commonjs/components/List/useListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n  const listContext = {\n    selection,\n    navigationMode,\n    validateListItem,\n  };\n\n  const synchronousContext = React.useMemo(\n    () => ({\n      listItemRole,\n      navigationMode,\n    }),\n    [listItemRole, navigationMode],\n  );\n\n  return {\n    listContext,\n    synchronousContext,\n  };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","synchronousContext","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAC;QACAE;IACF;IAEA,MAAME,qBAAqBR,OAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;SACF,CAAA,EACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n  const listContext = React.useMemo(\n    () => ({\n      selection,\n      navigationMode,\n      validateListItem,\n    }),\n    [selection, navigationMode, validateListItem],\n  );\n\n  const synchronousContext = React.useMemo(\n    () => ({\n      listItemRole,\n      navigationMode,\n    }),\n    [listItemRole, navigationMode],\n  );\n\n  return {\n    listContext,\n    synchronousContext,\n  };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","useMemo","synchronousContext"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAcP,OAAMQ,OAAO,CAC/B,IAAO,CAAA;YACLL;YACAC;YACAE;SACF,CAAA,EACA;QAACH;QAAWC;QAAgBE;KAAiB;IAG/C,MAAMG,qBAAqBT,OAAMQ,OAAO,CACtC,IAAO,CAAA;YACLH;YACAD;SACF,CAAA,EACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAE;IACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n  value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: ListItemValue;\n  onAction?: EventHandler<ListItemActionEventData>;\n  disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable: boolean;\n  navigable: boolean;\n  disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}
+{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import type { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n  value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: ListItemValue;\n  onAction?: EventHandler<ListItemActionEventData>;\n  disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable: boolean;\n  navigable: boolean;\n  disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}

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

@@ -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)) ?? 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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"}
+{"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 type { CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { ListItemActionEvent } from '../../events/ListItemActionEvent';\nimport { createListItemActionEvent, ListItemActionEventName } 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/lib-commonjs/events/ListItemActionEvent.js

@@ -16,8 +16,6 @@ _export(exports, {
         return createListItemActionEvent;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const ListItemActionEventName = 'ListItemAction';
 const createListItemActionEvent = (originalEvent)=>new CustomEvent(ListItemActionEventName, {
         cancelable: true,

package/lib-commonjs/events/ListItemActionEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n  originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n  originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n  new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n    cancelable: true,\n    bubbles: true,\n    detail: { originalEvent },\n  });\n"],"names":["React","ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":";;;;;;;;;;;2BAEaC;;;6BAQAC;;;;;iEAVU,QAAQ;AAExB,MAAMD,0BAA0B,iBAAiB;AAQjD,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}
+{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n  originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n  originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n  new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n    cancelable: true,\n    bubbles: true,\n    detail: { originalEvent },\n  });\n"],"names":["ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":";;;;;;;;;;;2BAEaA;;;6BAQAC;;;;AARN,MAAMD,0BAA0B,iBAAiB;AAQjD,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}

package/lib-commonjs/hooks/types.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n  isSelected: (item: string | number) => boolean;\n  toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n  deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  clearSelection: (e: React.SyntheticEvent) => void;\n  toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n  setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n  selectedItems: SelectionItemId[];\n};\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}
+{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import type { SelectionItemId } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type ListSelectionState = {\n  isSelected: (item: string | number) => boolean;\n  toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n  deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  clearSelection: (e: React.SyntheticEvent) => void;\n  toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n  setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n  selectedItems: SelectionItemId[];\n};\n"],"names":[],"mappings":""}

package/lib-commonjs/hooks/useListSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n  const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n  const [selectedItems, setSelectedItems] = useControllableState({\n    state: options.selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange: (e, data) => {\n      setSelectedItems(data.selectedItems);\n      onSelectionChange?.(e, data);\n    },\n  });\n\n  const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n    selectionMethods.toggleItem(e, itemId),\n  );\n\n  const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n    selectionMethods.toggleAllItems(e, itemIds);\n  });\n\n  const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.deselectItem(e, itemId),\n  );\n\n  const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.selectItem(e, itemId),\n  );\n\n  const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n  return {\n    selectedItems: selectedArray,\n    toggleItem,\n    toggleAllItems,\n    deselectItem,\n    selectItem,\n    setSelectedItems,\n    isSelected: (id: string | number) => selectionMethods.isSelected(id),\n    clearSelection,\n  };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;;;;;+BAMgBI;;;;;;;gCAJ0E,4BAA4B;iEAC/F,QAAQ;AAGxB,0BAA0BC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,wCAAAA,EAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,OAAGb,4BAAAA,EAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,iBAA+CjB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,qBAAuDnB,gCAAAA,EAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,mBAAmDrB,gCAAAA,EAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,iBAA+CtB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,qBAAuDvB,gCAAAA,EAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,OAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport type { SelectionHookParams } from '@fluentui/react-utilities';\nimport { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n  const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n  const [selectedItems, setSelectedItems] = useControllableState({\n    state: options.selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange: (e, data) => {\n      setSelectedItems(data.selectedItems);\n      onSelectionChange?.(e, data);\n    },\n  });\n\n  const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n    selectionMethods.toggleItem(e, itemId),\n  );\n\n  const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n    selectionMethods.toggleAllItems(e, itemIds);\n  });\n\n  const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.deselectItem(e, itemId),\n  );\n\n  const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.selectItem(e, itemId),\n  );\n\n  const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n  return {\n    selectedItems: selectedArray,\n    toggleItem,\n    toggleAllItems,\n    deselectItem,\n    selectItem,\n    setSelectedItems,\n    isSelected: (id: string | number) => selectionMethods.isSelected(id),\n    clearSelection,\n  };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;;;;;+BAOgBI;;;;;;;gCAJqD,4BAA4B;iEAC1E,QAAQ;AAGxB,0BAA0BC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,wCAAAA,EAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,OAAGb,4BAAAA,EAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,iBAA+CjB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,qBAAuDnB,gCAAAA,EAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,mBAAmDrB,gCAAAA,EAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,iBAA+CtB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,qBAAuDvB,gCAAAA,EAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,OAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}

package/lib-commonjs/utils/calculateListRole.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import { ListNavigationMode } from '../List';\n\n/**\n * Calculate the role for the list based on the navigation mode and selectable state\n * @param navigationMode - the navigation mode of the list\n * @param selectable - whether the list is selectable\n * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not\n */\n\nexport const calculateListRole = (\n  navigationMode: ListNavigationMode | undefined,\n  selectable: boolean,\n): 'grid' | 'listbox' | 'list' => {\n  if (navigationMode === 'composite') {\n    return 'grid';\n  } else if (selectable) {\n    return 'listbox';\n  } else {\n    return 'list';\n  }\n};\n"],"names":["calculateListRole","navigationMode","selectable"],"mappings":"AAEA;;;;;CAKC,GAED;;;;;;;;;;AAAO,MAAMA,oBAAoB,CAC/BC,gBACAC;IAEA,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}
+{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import type { ListNavigationMode } from '../List';\n\n/**\n * Calculate the role for the list based on the navigation mode and selectable state\n * @param navigationMode - the navigation mode of the list\n * @param selectable - whether the list is selectable\n * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not\n */\n\nexport const calculateListRole = (\n  navigationMode: ListNavigationMode | undefined,\n  selectable: boolean,\n): 'grid' | 'listbox' | 'list' => {\n  if (navigationMode === 'composite') {\n    return 'grid';\n  } else if (selectable) {\n    return 'listbox';\n  } else {\n    return 'list';\n  }\n};\n"],"names":["calculateListRole","navigationMode","selectable"],"mappings":"AAEA;;;;;CAKC,GAED;;;;;;;;;;AAAO,MAAMA,oBAAoB,CAC/BC,gBACAC;IAEA,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-list",
-  "version": "9.6.13",
+  "version": "9.6.14",
   "description": "React List v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,13 +18,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-checkbox": "^9.6.0",
-    "@fluentui/react-context-selector": "^9.2.15",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-checkbox": "^9.6.1",
+    "@fluentui/react-context-selector": "^9.2.16",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-tabster": "^9.26.14",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"