npm - @fluentui/react-list - Versions diffs - 9.6.0 → 9.6.1 - Mend

@fluentui/react-list 9.6.0 → 9.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-list
-This log was last generated on Mon, 08 Sep 2025 12:41:43 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:12 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.1)
+Thu, 02 Oct 2025 15:07:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.0..@fluentui/react-list_v9.6.1)
+### Patches
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.5.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.0)
-Mon, 08 Sep 2025 12:41:43 GMT
+Mon, 08 Sep 2025 12:51:04 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.5.0..@fluentui/react-list_v9.6.0)
 ### Minor changes

package/lib/components/List/List.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useList_unstable } from './useList';

package/lib/components/List/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

package/lib/components/List/listContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import * as React from 'react';
 export const listContextDefaultValue = {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["~~import~~ { 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,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"}
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"}

package/lib/components/List/useList.js CHANGED Viewed

@@ -1,3 +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';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/useList.ts"],"sourcesContent":["~~import~~ * 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,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"}
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"}

package/lib/components/List/useListContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useListContextValues_unstable(state) {
     const { selection, navigationMode, listItemRole, validateListItem } = state;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["~~import~~ * 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,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"}
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"}

package/lib/components/List/useListStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __resetStyles, mergeClasses } from '@griffel/react';
 export const listClassNames = {
   root: 'fui-List'

package/lib/components/List/useListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"sources":["useListStyles.styles.js"],"sourcesContent":["~~import~~ { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/*\n Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;EACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC1F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/*\n Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;EACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC1F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/List/useListStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, mergeClasses } from '@griffel/react';
 export const listClassNames = {
     root: 'fui-List'

package/lib/components/List/useListStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/*\n Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"~~AACA~~,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/*\n Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

package/lib/components/ListItem/ListItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useListItem_unstable } from './useListItem';

package/lib/components/ListItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement \| HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement \| HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

package/lib/components/ListItem/useListItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys, useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from '@fluentui/react-tabster';
 import { elementContains, getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n const validateListItem = useListContext_unstable(ctx => ctx.validateListItem);\n\n const as = props.as \|\| navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n const finalListItemRole = role \|\| listItemRole;\n\n const focusableItems = Boolean(isSelectionModeEnabled \|\| navigationMode \|\| tabIndex === 0);\n\n const rootRef = React.useRef<HTMLLIElement \| HTMLDivElement>(null);\n const checkmarkRef = React.useRef<HTMLInputElement \| null>(null);\n\n const handleAction: (event: ListItemActionEvent) => void = useEventCallback(event => {\n onAction?.(event, { event, value, type: ListItemActionEventName });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (isSelectionModeEnabled && !disabledSelection) {\n toggleItem?.(event.detail.originalEvent, value);\n }\n });\n\n React.useEffect(() => {\n if (rootRef.current) {\n validateListItem(rootRef.current);\n }\n }, [validateListItem]);\n\n const triggerAction = (e: React.MouseEvent \| React.KeyboardEvent) => {\n const actionEvent = createListItemActionEvent(e);\n handleAction(actionEvent);\n e.target.dispatchEvent(actionEvent);\n };\n\n const focusableGroupAttrs = useFocusableGroup({\n ignoreDefaultKeydown: { Enter: true },\n tabBehavior: 'limited-trap-focus',\n });\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n const isFromCheckbox = elementContains(checkmarkRef.current, e.target as Node);\n if (isFromCheckbox) {\n return;\n }\n\n triggerAction(e);\n });\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onKeyDown?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n // If the event is fired from an element inside the list item\n if (e.target !== e.currentTarget) {\n if (focusableItems) {\n // If the items are focusable, we need to handle the arrow keys to move focus to them\n switch (e.key) {\n // If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself\n // The ArrowLeft will only trigger if the target element is the leftmost, otherwise the\n // arrowNavigationAttributes handles it and prevents it from bubbling here.\n case ArrowLeft:\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n break;\n\n case ArrowDown:\n case ArrowUp:\n e.preventDefault();\n // Press ESC on the original target to get focus to the parent group (List)\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n // Now dispatch the original key to move up or down in the list\n e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n return;\n }\n return;\n }\n\n switch (e.key) {\n case Space:\n // we have to prevent default here otherwise the space key will scroll the page\n e.preventDefault();\n\n // Space always toggles selection (if enabled)\n if (isSelectionModeEnabled) {\n if (!disabledSelection) {\n toggleItem?.(e, value);\n }\n } else {\n triggerAction(e);\n }\n\n break;\n\n case Enter:\n triggerAction(e);\n break;\n\n case ArrowRight:\n if (navigationMode === 'composite') {\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Enter }));\n }\n\n break;\n }\n });\n\n const onCheckboxChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\n if (!isSelectionModeEnabled \|\| e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: 'horizontal',\n });\n\n const tabsterAttributes = useMergedTabsterAttributes_unstable(\n focusableItems ? arrowNavigationAttributes : {},\n focusableGroupAttrs,\n props as Partial<TabsterDOMAttribute>,\n );\n\n const root = slot.always(\n getIntrinsicElementProps(as, {\n ref: useMergedRefs(rootRef, ref) as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: focusableItems ? 0 : undefined,\n role: finalListItemRole,\n id: String(value),\n ...(isSelectionModeEnabled && {\n 'aria-selected': isSelected,\n 'aria-disabled': (disabledSelection && !onAction) \|\| undefined,\n }),\n ...props,\n ...tabsterAttributes,\n onKeyDown: handleKeyDown,\n onClick: isSelectionModeEnabled \|\| onClick \|\| onAction ? handleClick : undefined,\n }),\n { elementType: as },\n );\n\n const checkmark = slot.optional(props.checkmark, {\n defaultProps: {\n checked: isSelected,\n tabIndex: -1,\n disabled: disabledSelection,\n },\n renderByDefault: isSelectionModeEnabled,\n elementType: Checkbox,\n });\n\n const mergedCheckmarkRef = useMergedRefs(checkmark?.ref, checkmarkRef);\n if (checkmark) {\n checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);\n checkmark.ref = mergedCheckmarkRef;\n }\n\n const state: ListItemState = {\n components: {\n root: as,\n checkmark: Checkbox,\n },\n root,\n checkmark,\n disabled: disabledSelection && !onAction,\n selectable: isSelectionModeEnabled,\n navigable: focusableItems,\n };\n\n return state;\n};\n"],"names":["React","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","elementContains","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useId","useMergedRefs","useListSynchronousContext","useListContext_unstable","Enter","Space","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Checkbox","createListItemActionEvent","ListItemActionEventName","DEFAULT_ROOT_EL_TYPE","useListItem_unstable","props","ref","id","value","onKeyDown","onClick","tabIndex","role","onAction","disabledSelection","toggleItem","ctx","selection","navigationMode","listItemRole","isSelectionModeEnabled","isSelected","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","useRef","checkmarkRef","handleAction","event","type","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","target","dispatchEvent","focusableGroupAttrs","ignoreDefaultKeydown","tabBehavior","handleClick","isFromCheckbox","handleKeyDown","currentTarget","key","action","Escape","preventDefault","onCheckboxChange","data","arrowNavigationAttributes","axis","tabsterAttributes","root","always","undefined","String","elementType","checkmark","optional","defaultProps","checked","disabled","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\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":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,SAAS,EACTC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,QAE9B,0BAA0B;AACjC,SACEC,eAAe,EACfC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,QACR,4BAA4B;AAEnC,SAASC,yBAAyB,EAAEC,uBAAuB,QAAQ,sBAAsB;AACzF,SAASC,KAAK,EAAEC,KAAK,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAClG,SAASC,QAAQ,QAA8B,2BAA2B;AAC1E,SACEC,yBAAyB,EAEzBC,uBAAuB,QAClB,mCAAmC;AAE1C,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,OACAC;IAEA,MAAMC,KAAKjB,MAAM;IACjB,MAAM,EAAEkB,QAAQD,EAAE,EAAEE,SAAS,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGT;IAExF,MAAMU,aAAatB,wBAAwBuB,CAAAA;YAAOA;gBAAAA,iBAAAA,IAAIC,SAAS,cAAbD,qCAAAA,eAAeD,UAAU;;IAE3E,MAAM,EAAEG,cAAc,EAAEC,YAAY,EAAE,GAAG3B;IAEzC,MAAM4B,yBAAyB3B,wBAAwBuB,CAAAA,MAAO,CAAC,CAACA,IAAIC,SAAS;IAC7E,MAAMI,aAAa5B,wBAAwBuB,CAAAA;YAAOA;gBAAAA,iBAAAA,IAAIC,SAAS,cAAbD,qCAAAA,eAAeK,UAAU,CAACb;;IAC5E,MAAMc,mBAAmB7B,wBAAwBuB,CAAAA,MAAOA,IAAIM,gBAAgB;IAE5E,MAAMC,KAAKlB,MAAMkB,EAAE,IAAIL,mBAAmB,cAAc,QAAQf;IAEhE,MAAMqB,oBAAoBZ,QAAQO;IAElC,MAAMM,iBAAiBC,QAAQN,0BAA0BF,kBAAkBP,aAAa;IAExF,MAAMgB,UAAUlD,MAAMmD,MAAM,CAAiC;IAC7D,MAAMC,eAAepD,MAAMmD,MAAM,CAA0B;IAE3D,MAAME,eAAqDzC,iBAAiB0C,CAAAA;QAC1ElB,qBAAAA,+BAAAA,SAAWkB,OAAO;YAAEA;YAAOvB;YAAOwB,MAAM9B;QAAwB;QAEhE,IAAI6B,MAAME,gBAAgB,EAAE;YAC1B;QACF;QAEA,IAAIb,0BAA0B,CAACN,mBAAmB;YAChDC,uBAAAA,iCAAAA,WAAagB,MAAMG,MAAM,CAACC,aAAa,EAAE3B;QAC3C;IACF;IAEA/B,MAAM2D,SAAS,CAAC;QACd,IAAIT,QAAQU,OAAO,EAAE;YACnBf,iBAAiBK,QAAQU,OAAO;QAClC;IACF,GAAG;QAACf;KAAiB;IAErB,MAAMgB,gBAAgB,CAACC;QACrB,MAAMC,cAAcvC,0BAA0BsC;QAC9CT,aAAaU;QACbD,EAAEE,MAAM,CAACC,aAAa,CAACF;IACzB;IAEA,MAAMG,sBAAsB5D,kBAAkB;QAC5C6D,sBAAsB;YAAElD,OAAO;QAAK;QACpCmD,aAAa;IACf;IAEA,MAAMC,cAAuEzD,iBAAiBkD,CAAAA;QAC5F7B,oBAAAA,8BAAAA,QAAU6B;QAEV,IAAIA,EAAEN,gBAAgB,EAAE;YACtB;QACF;QAEA,MAAMc,iBAAiB9D,gBAAgB4C,aAAaQ,OAAO,EAAEE,EAAEE,MAAM;QACrE,IAAIM,gBAAgB;YAClB;QACF;QAEAT,cAAcC;IAChB;IAEA,MAAMS,gBAA4E3D,iBAAiBkD,CAAAA;QACjG9B,sBAAAA,gCAAAA,UAAY8B;QAEZ,IAAIA,EAAEN,gBAAgB,EAAE;YACtB;QACF;QAEA,6DAA6D;QAC7D,IAAIM,EAAEE,MAAM,KAAKF,EAAEU,aAAa,EAAE;YAChC,IAAIxB,gBAAgB;gBAClB,qFAAqF;gBACrF,OAAQc,EAAEW,GAAG;oBACX,+FAA+F;oBAC/F,uFAAuF;oBACvF,2EAA2E;oBAC3E,KAAKnD;wBACHwC,EAAEE,MAAM,CAACC,aAAa,CAAC,IAAIhE,uBAAuB;4BAAEyE,QAAQvE,yBAAyBwE,MAAM;wBAAC;wBAC5F;oBAEF,KAAKvD;oBACL,KAAKD;wBACH2C,EAAEc,cAAc;wBAChB,2EAA2E;wBAC3Ed,EAAEE,MAAM,CAACC,aAAa,CAAC,IAAIhE,uBAAuB;4BAAEyE,QAAQvE,yBAAyBwE,MAAM;wBAAC;wBAC5F,+DAA+D;wBAC/Db,EAAEU,aAAa,CAACP,aAAa,CAAC,IAAI/D,oBAAoB;4BAAEuE,KAAKrE,SAAS,CAAC0D,EAAEW,GAAG,CAAC;wBAAC;gBAClF;gBACA;YACF;YACA;QACF;QAEA,OAAQX,EAAEW,GAAG;YACX,KAAKvD;gBACH,+EAA+E;gBAC/E4C,EAAEc,cAAc;gBAEhB,8CAA8C;gBAC9C,IAAIjC,wBAAwB;oBAC1B,IAAI,CAACN,mBAAmB;wBACtBC,uBAAAA,iCAAAA,WAAawB,GAAG/B;oBAClB;gBACF,OAAO;oBACL8B,cAAcC;gBAChB;gBAEA;YAEF,KAAK7C;gBACH4C,cAAcC;gBACd;YAEF,KAAKzC;gBACH,IAAIoB,mBAAmB,aAAa;oBAClCqB,EAAEE,MAAM,CAACC,aAAa,CAAC,IAAIhE,uBAAuB;wBAAEyE,QAAQvE,yBAAyBc,KAAK;oBAAC;gBAC7F;gBAEA;QACJ;IACF;IAEA,MAAM4D,mBAAmBjE,iBAAiB,CAACkD,GAAwCgB;QACjF,IAAI,CAACnC,0BAA0BmB,EAAEN,gBAAgB,EAAE;YACjD;QACF;QAEAlB,uBAAAA,iCAAAA,WAAawB,GAAG/B;IAClB;IAEA,MAAMgD,4BAA4B1E,wBAAwB;QACxD2E,MAAM;IACR;IAEA,MAAMC,oBAAoB1E,oCACxByC,iBAAiB+B,4BAA4B,CAAC,GAC9Cb,qBACAtC;IAGF,MAAMsD,OAAOvE,KAAKwE,MAAM,CACtB1E,yBAAyBqC,IAAI;QAC3BjB,KAAKf,cAAcoC,SAASrB;QAC5BK,UAAUc,iBAAiB,IAAIoC;QAC/BjD,MAAMY;QACNjB,IAAIuD,OAAOtD;QACX,GAAIY,0BAA0B;YAC5B,iBAAiBC;YACjB,iBAAiB,AAACP,qBAAqB,CAACD,YAAagD;QACvD,CAAC;QACD,GAAGxD,KAAK;QACR,GAAGqD,iBAAiB;QACpBjD,WAAWuC;QACXtC,SAASU,0BAA0BV,WAAWG,WAAWiC,cAAce;IACzE,IACA;QAAEE,aAAaxC;IAAG;IAGpB,MAAMyC,YAAY5E,KAAK6E,QAAQ,CAAC5D,MAAM2D,SAAS,EAAE;QAC/CE,cAAc;YACZC,SAAS9C;YACTV,UAAU,CAAC;YACXyD,UAAUtD;QACZ;QACAuD,iBAAiBjD;QACjB2C,aAAa/D;IACf;IAEA,MAAMsE,qBAAqB/E,cAAcyE,sBAAAA,gCAAAA,UAAW1D,GAAG,EAAEuB;IACzD,IAAImC,WAAW;QACbA,UAAUO,QAAQ,GAAGpF,eAAe6E,UAAUO,QAAQ,EAAEjB;QACxDU,UAAU1D,GAAG,GAAGgE;IAClB;IAEA,MAAME,QAAuB;QAC3BC,YAAY;YACVd,MAAMpC;YACNyC,WAAWhE;QACb;QACA2D;QACAK;QACAI,UAAUtD,qBAAqB,CAACD;QAChC6D,YAAYtD;QACZuD,WAAWlD;IACb;IAEA,OAAO+C;AACT,EAAE"}

package/lib/components/ListItem/useListItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

package/lib/components/ListItem/useListItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/\n Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,gBAAGP,aAAA,mOAWzB,CAAC;AACF,MAAMQ,sBAAsB,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAO9B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGlB,QAAA;EAAAmB,yBAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;EACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;EAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;IACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;EAC/H;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/\n Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,gBAAGP,aAAA,mOAWzB,CAAC;AACF,MAAMQ,sBAAsB,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAO9B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGlB,QAAA;EAAAmB,yBAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;EACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;EAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;IACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;EAC/H;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ListItem/useListItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

package/lib/components/ListItem/useListItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"~~AACA~~,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,oBAAoBP,gBAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGT,gCACD;QACEU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,OAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBnB,WAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,YAAYrB,WAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,mBAAmBC,IAAI,EACvBsB,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAAD,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,GAAG7B,aAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,oBAAoBP,gBAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGT,gCACD;QACEU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,OAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBnB,WAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,YAAYrB,WAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,mBAAmBC,IAAI,EACvBsB,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAAD,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,GAAG7B,aAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

package/lib/hooks/useListSelection.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
 import * as React from 'react';
 export function useListSelection(options = {

package/lib/hooks/useListSelection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["~~import~~ { 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,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"}
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"}

package/lib-commonjs/components/List/List.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/List/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"~~;;;;+BASaM;;;;;;;iEATU~~,QAAQ;qCAEa,kCAAkC;yBAC7C,YAAY;4BACT,eAAe;qCACZ,yBAAyB;sCAElB,yBAAyB;AAEhE,~~aAAMA~~,WAAAA,GAAuCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,YAAQR,yBAAAA,EAAiBM,OAAOC;IACtC,MAAME,oBAAgBN,mDAAAA,EAA8BK;QAEpDN,2CAAAA,EAAuBM;QACvBT,gDAAAA,EAA4B,0BAA0BS;IAEtD,WAAOP,+BAAAA,EAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;yBAC7C,YAAY;4BACT,eAAe;qCACZ,yBAAyB;sCAElB,yBAAyB;AAEhE,MAAMM,OAAAA,WAAAA,GAAuCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,YAAQR,yBAAAA,EAAiBM,OAAOC;IACtC,MAAME,oBAAgBN,mDAAAA,EAA8BK;QAEpDN,2CAAAA,EAAuBM;QACvBT,gDAAAA,EAA4B,0BAA0BS;IAEtD,WAAOP,+BAAAA,EAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

package/lib-commonjs/components/List/listContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["~~import~~ { 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":"~~;;;;;;;;;;;IAcaQ,mBAAAA;;;kCAaAM~~;eAAAA;;2BAtBAX;;;~~IAWAO~~,~~uBAAAA;;;6BAYAK~~;;;;;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,~~gCAAgC~~,~~CAAIE~~,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,~~uCAAuCQ~~,uBAAuBJ,QAAQ,CAAC;AACvE,~~MAAMM~~,~~4BAA4B~~,~~IACvCb,~~OAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}
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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/useList.ts"],"sourcesContent":["~~import~~ * 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":"~~;;;;+BA8Bac~~;;;;;;;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,~~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"}
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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["~~import~~ * 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":"~~;;;;+BAGgBC;;;;;;;iEAHO~~,QAAQ;AAGxB,~~uCAAuCC~~,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"}
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"}

package/lib-commonjs/components/List/useListStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/List/useListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListStyles.styles.js"],"sourcesContent":["~~import~~ { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/*\n Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"mappings":"~~;;;;;;;;;;;IACaE~~,~~cAAc~~;;;0BAWY;;;;uBAZO,gBAAgB;AACvD,~~uBAAuB~~;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB,CAAC;AAGS,MAAMK,0BAA0BC,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;IACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC1F,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/*\n Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;kBAEe;;;0BAWY;;;;uBAZO,gBAAgB;AACvD,MAAME,iBAAiB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB,CAAC;AAGS,MAAMK,0BAA0BC,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;IACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC1F,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/List/useListStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/List/useListStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/*\n Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"~~;;;;;;;;;;;IAIaE,cAAAA~~;;;0BAcAO;;;;uBAjBiC,iBAAiB;AAGxD,~~uBAAkD~~;~~IACvDN~~,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBJ,sBAAAA,EAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAKO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/*\n Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;0BAcAO;;;;uBAjBiC,iBAAiB;AAGxD,MAAMP,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBJ,sBAAAA,EAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAKO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/ListItem/ListItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ListItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement \| HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"~~;;;;+BAQaK;;;;;;;iEARU~~,QAAQ;qCAEa,kCAAkC;6BACzC,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;AAGjE,~~iBAAMA~~,WAAAA,GAA+CL,OAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,~~QAAQP~~,~~qCAAAA~~,EAAqBK,OAAOC;QAE1CJ,mDAAAA,EAA2BK;QAC3BR,gDAAAA,EAA4B,8BAA8BQ;IAC1D,WAAON,uCAAAA,EAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement \| HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;6BACzC,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;AAGjE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,YAAQP,iCAAAA,EAAqBK,OAAOC;QAE1CJ,mDAAAA,EAA2BK;QAC3BR,gDAAAA,EAA4B,8BAA8BQ;IAC1D,WAAON,uCAAAA,EAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n const validateListItem = useListContext_unstable(ctx => ctx.validateListItem);\n\n const as = props.as \|\| navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;\n\n const finalListItemRole = role \|\| listItemRole;\n\n const focusableItems = Boolean(isSelectionModeEnabled \|\| navigationMode \|\| tabIndex === 0);\n\n const rootRef = React.useRef<HTMLLIElement \| HTMLDivElement>(null);\n const checkmarkRef = React.useRef<HTMLInputElement \| null>(null);\n\n const handleAction: (event: ListItemActionEvent) => void = useEventCallback(event => {\n onAction?.(event, { event, value, type: ListItemActionEventName });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (isSelectionModeEnabled && !disabledSelection) {\n toggleItem?.(event.detail.originalEvent, value);\n }\n });\n\n React.useEffect(() => {\n if (rootRef.current) {\n validateListItem(rootRef.current);\n }\n }, [validateListItem]);\n\n const triggerAction = (e: React.MouseEvent \| React.KeyboardEvent) => {\n const actionEvent = createListItemActionEvent(e);\n handleAction(actionEvent);\n e.target.dispatchEvent(actionEvent);\n };\n\n const focusableGroupAttrs = useFocusableGroup({\n ignoreDefaultKeydown: { Enter: true },\n tabBehavior: 'limited-trap-focus',\n });\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n const isFromCheckbox = elementContains(checkmarkRef.current, e.target as Node);\n if (isFromCheckbox) {\n return;\n }\n\n triggerAction(e);\n });\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onKeyDown?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n // If the event is fired from an element inside the list item\n if (e.target !== e.currentTarget) {\n if (focusableItems) {\n // If the items are focusable, we need to handle the arrow keys to move focus to them\n switch (e.key) {\n // If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself\n // The ArrowLeft will only trigger if the target element is the leftmost, otherwise the\n // arrowNavigationAttributes handles it and prevents it from bubbling here.\n case ArrowLeft:\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n break;\n\n case ArrowDown:\n case ArrowUp:\n e.preventDefault();\n // Press ESC on the original target to get focus to the parent group (List)\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n // Now dispatch the original key to move up or down in the list\n e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n return;\n }\n return;\n }\n\n switch (e.key) {\n case Space:\n // we have to prevent default here otherwise the space key will scroll the page\n e.preventDefault();\n\n // Space always toggles selection (if enabled)\n if (isSelectionModeEnabled) {\n if (!disabledSelection) {\n toggleItem?.(e, value);\n }\n } else {\n triggerAction(e);\n }\n\n break;\n\n case Enter:\n triggerAction(e);\n break;\n\n case ArrowRight:\n if (navigationMode === 'composite') {\n e.target.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Enter }));\n }\n\n break;\n }\n });\n\n const onCheckboxChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\n if (!isSelectionModeEnabled \|\| e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: 'horizontal',\n });\n\n const tabsterAttributes = useMergedTabsterAttributes_unstable(\n focusableItems ? arrowNavigationAttributes : {},\n focusableGroupAttrs,\n props as Partial<TabsterDOMAttribute>,\n );\n\n const root = slot.always(\n getIntrinsicElementProps(as, {\n ref: useMergedRefs(rootRef, ref) as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: focusableItems ? 0 : undefined,\n role: finalListItemRole,\n id: String(value),\n ...(isSelectionModeEnabled && {\n 'aria-selected': isSelected,\n 'aria-disabled': (disabledSelection && !onAction) \|\| undefined,\n }),\n ...props,\n ...tabsterAttributes,\n onKeyDown: handleKeyDown,\n onClick: isSelectionModeEnabled \|\| onClick \|\| onAction ? handleClick : undefined,\n }),\n { elementType: as },\n );\n\n const checkmark = slot.optional(props.checkmark, {\n defaultProps: {\n checked: isSelected,\n tabIndex: -1,\n disabled: disabledSelection,\n },\n renderByDefault: isSelectionModeEnabled,\n elementType: Checkbox,\n });\n\n const mergedCheckmarkRef = useMergedRefs(checkmark?.ref, checkmarkRef);\n if (checkmark) {\n checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);\n checkmark.ref = mergedCheckmarkRef;\n }\n\n const state: ListItemState = {\n components: {\n root: as,\n checkmark: Checkbox,\n },\n root,\n checkmark,\n disabled: disabledSelection && !onAction,\n selectable: isSelectionModeEnabled,\n navigable: focusableItems,\n };\n\n return state;\n};\n"],"names":["React","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","elementContains","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useId","useMergedRefs","useListSynchronousContext","useListContext_unstable","Enter","Space","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Checkbox","createListItemActionEvent","ListItemActionEventName","DEFAULT_ROOT_EL_TYPE","useListItem_unstable","props","ref","id","value","onKeyDown","onClick","tabIndex","role","onAction","disabledSelection","toggleItem","ctx","selection","navigationMode","listItemRole","isSelectionModeEnabled","isSelected","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","useRef","checkmarkRef","handleAction","event","type","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","target","dispatchEvent","focusableGroupAttrs","ignoreDefaultKeydown","tabBehavior","handleClick","isFromCheckbox","handleKeyDown","currentTarget","key","action","Escape","preventDefault","onCheckboxChange","data","arrowNavigationAttributes","axis","tabsterAttributes","root","always","undefined","String","elementType","checkmark","optional","defaultProps","checked","disabled","renderByDefault","mergedCheckmarkRef","onChange","state","components","selectable","navigable"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\nimport {\n elementContains,\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\nimport { useListSynchronousContext, useListContext_unstable } from '../List/listContext';\nimport { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { Checkbox, CheckboxOnChangeData } from '@fluentui/react-checkbox';\nimport {\n createListItemActionEvent,\n ListItemActionEvent,\n ListItemActionEventName,\n} from '../../events/ListItemActionEvent';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;\n\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n\n const { navigationMode, listItemRole } = useListSynchronousContext();\n\n const isSelectionModeEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\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/components/ListItem/useListItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ListItem/useListItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/\n Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"~~;;;;;;;;;;;IAGaK~~,kBAAkB;;;~~IAqCdkB~~,~~0BAA0B;;;;uBAxCe,~~gBAAgB;AAGnE,2BAA2B;IAC9BjB,IAAI,EAAE,cAAc;IACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF,MAAMQ,sBAAsB,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAO9B,CAAC;AACF;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAmB,yBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,oCAAoCQ,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;IACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAAA,AAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;IAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;QACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;IAC/H;IACA,OAAOJ,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/\n Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BAqCY;eAA1BkB;;;uBAxCyC,gBAAgB;AAGnE,2BAA2B;IAC9BjB,IAAI,EAAE,cAAc;IACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF,MAAMQ,sBAAsB,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAO9B,CAAC;AACF;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAmB,yBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,oCAAoCQ,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;IACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAAA,AAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;IAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;QACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;IAC/H;IACA,OAAOJ,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/ListItem/useListItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ListItem/useListItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"~~;;;;;;;;;;;IAMaK~~,kBAAAA;;;~~8BA2CAqB;eAAAA;;;~~uBAhD6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DpB,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGT,6CAAAA,EACD;QACEU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,6BAAyBnB,iBAAAA,EAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,gBAAYrB,iBAAAA,EAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACG;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,OAAG7B,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBsB,gBACCD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAAA,AAAQ,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,OAAG7B,mBAAAA,EAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,kBAAAA;;;IA2CAqB,0BAAAA;;;;uBAhD6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DpB,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGT,6CAAAA,EACD;QACEU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,6BAAyBnB,iBAAAA,EAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,gBAAYrB,iBAAAA,EAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACG;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,OAAG7B,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBsB,gBACCD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAAA,AAAQ,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,OAAG7B,mBAAAA,EAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

package/lib-commonjs/hooks/useListSelection.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["~~import~~ { 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":"~~;;;;+BAIgBI~~;;;;;;;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,~~OAAGV~~,~~oCAAAA~~,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,~~aAA~~+CtB,~~oCAAAA~~,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"}
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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-list",
-  "version": "9.6.0",
+  "version": "9.6.1",
   "description": "React List v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,14 +26,14 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-checkbox": "^9.5.5",
-    "@fluentui/react-context-selector": "^9.2.7",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
+    "@fluentui/react-checkbox": "^9.5.6",
+    "@fluentui/react-context-selector": "^9.2.8",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-tabster": "^9.26.5",
+    "@fluentui/react-tabster": "^9.26.6",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
-    "@fluentui/react-shared-contexts": "^9.25.1",
+    "@fluentui/react-utilities": "^9.25.0",
+    "@fluentui/react-shared-contexts": "^9.25.2",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },