@fluentui/react-list 9.2.7 → 9.4.0

package/lib-commonjs/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/List.ts"],"sourcesContent":["export type {\n  ListContextValue,\n  ListContextValues,\n  ListNavigationMode,\n  ListProps,\n  ListSlots,\n  ListState,\n  OnListSelectionChangeData,\n} from './components/List/index';\nexport {\n  List,\n  listClassNames,\n  renderList_unstable,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List/index';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUEA,IAAI;eAAJA,WAAI;;IACJC,cAAc;eAAdA,qBAAc;;IACdC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,gBAAgB;eAAhBA,uBAAgB;;;uBACX"}
+{"version":3,"sources":["../src/List.ts"],"sourcesContent":["export type {\n  ListContextValue,\n  ListContextValues,\n  ListNavigationMode,\n  ListProps,\n  ListSlots,\n  ListState,\n  OnListSelectionChangeData,\n} from './components/List/index';\nexport {\n  List,\n  listClassNames,\n  renderList_unstable,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List/index';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable"],"mappings":";;;;;;;;;;;;eAUEA,WAAI;;;eACJC,qBAAc;;;eACdC,0BAAmB;;;eACnBC,6BAAsB;;;eACtBC,uBAAgB;;;uBACX,0BAA0B"}

package/lib-commonjs/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ListItem.ts"],"sourcesContent":["export type {\n  ListItemActionEventData,\n  ListItemProps,\n  ListItemSlots,\n  ListItemState,\n  ListItemValue,\n} from './components/ListItem/index';\nexport {\n  ListItem,\n  listItemClassNames,\n  renderListItem_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n} from './components/ListItem/index';\n"],"names":["ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQEA,QAAQ;eAARA,eAAQ;;IACRC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,oBAAoB;eAApBA,2BAAoB;;;uBACf"}
+{"version":3,"sources":["../src/ListItem.ts"],"sourcesContent":["export type {\n  ListItemActionEventData,\n  ListItemProps,\n  ListItemSlots,\n  ListItemState,\n  ListItemValue,\n} from './components/ListItem/index';\nexport {\n  ListItem,\n  listItemClassNames,\n  renderListItem_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n} from './components/ListItem/index';\n"],"names":["ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":";;;;;;;;;;;;eAQEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}

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

@@ -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":["List","React","forwardRef","props","ref","state","useList_unstable","contextValues","useListContextValues_unstable","useListStyles_unstable","useCustomStyleHook_unstable","renderList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;qCAEqB;yBACX;4BACG;qCACG;sCAEO;AAEvC,MAAMA,OAAAA,WAAAA,GAAuCC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQC,IAAAA,yBAAAA,EAAiBH,OAAOC;IACtC,MAAMG,gBAAgBC,IAAAA,mDAAAA,EAA8BH;IAEpDI,IAAAA,2CAAAA,EAAuBJ;IACvBK,IAAAA,gDAAAA,EAA4B,0BAA0BL;IAEtD,OAAOM,IAAAA,+BAAAA,EAAoBN,OAAOE;AACpC;AAEAP,KAAKY,WAAW,GAAG"}
+{"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type {\n  ListContextValue,\n  ListContextValues,\n  ListNavigationMode,\n  ListProps,\n  ListSlots,\n  ListState,\n  OnListSelectionChangeData,\n} from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAYJC,cAAc;eAAdA,mCAAc;;IAFdC,mBAAmB;eAAnBA,+BAAmB;;IAEHC,sBAAsB;eAAtBA,2CAAsB;;IADtCC,gBAAgB;eAAhBA,yBAAgB;;;sBAXJ;4BAUe;yBACH;qCACsB"}
+{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type {\n  ListContextValue,\n  ListContextValues,\n  ListNavigationMode,\n  ListProps,\n  ListSlots,\n  ListState,\n  OnListSelectionChangeData,\n} from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,UAAI;;;eAYJG,mCAAc;;;eAFdF,+BAAmB;;;eAEHG,2CAAsB;;;eADtCF,yBAAgB;;;sBAXJ,SAAS;4BAUM,eAAe;yBAClB,YAAY;qCACU,yBAAyB"}

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

@@ -12,21 +12,39 @@ _export(exports, {
     ListContextProvider: function() {
         return ListContextProvider;
     },
+    ListSynchronousContextProvider: function() {
+        return ListSynchronousContextProvider;
+    },
     listContextDefaultValue: function() {
         return listContextDefaultValue;
     },
     useListContext_unstable: function() {
         return useListContext_unstable;
+    },
+    useListSynchronousContext: function() {
+        return useListSynchronousContext;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _reactcontextselector = require("@fluentui/react-context-selector");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const listContextDefaultValue = {
-    navigationMode: undefined,
     selection: undefined,
-    listItemRole: 'listitem',
     validateListItem: ()=>{
     /* noop */ }
 };
 const listContext = (0, _reactcontextselector.createContext)(undefined);
 const ListContextProvider = listContext.Provider;
 const useListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(listContext, (ctx = listContextDefaultValue)=>selector(ctx));
+// This is a context that uses the standard, React Context API.
+// The reason why this exists is that the Fluent UI Context Provider replaces the
+// React Context Provider with a custom one that needs a layout effect to update the context value.
+// This results in issues with element/role validation, as the ListItem component has not been updated yet
+// when the validation happens.
+// https://github.com/microsoft/fluentui/issues/34467
+const ListSynchronousContext = /*#__PURE__*/ _react.createContext(undefined);
+const ListSynchronousContextProvider = ListSynchronousContext.Provider;
+const useListSynchronousContext = ()=>_react.useContext(ListSynchronousContext) || {
+        navigationMode: undefined,
+        listItemRole: 'listitem'
+    };

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

@@ -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 { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n  navigationMode: undefined,\n  selection: undefined,\n  listItemRole: 'listitem',\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"],"names":["ListContextProvider","listContextDefaultValue","useListContext_unstable","navigationMode","undefined","selection","listItemRole","validateListItem","listContext","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeaA,mBAAAA;eAAAA;;IAXAC,uBAAAA;eAAAA;;IAaAC,uBAAAA;eAAAA;;;sCAjBqC;AAI3C,MAAMD,0BAA4C;IACvDE,gBAAgBC;IAChBC,WAAWD;IACXE,cAAc;IACdC,kBAAkB;IAChB,QAAQ,GACV;AACF;AAEA,MAAMC,cAAcC,IAAAA,mCAAAA,EAA4CL;AAEzD,MAAMJ,sBAAsBQ,YAAYE,QAAQ;AAEhD,MAAMR,0BAA0B,CAAIS,WACzCC,IAAAA,wCAAAA,EAAmBJ,aAAa,CAACK,MAAMZ,uBAAuB,GAAKU,SAASE"}
+{"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 = () =>\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"}

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

@@ -15,6 +15,9 @@ const renderList_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_listContext.ListContextProvider, {
         value: contextValues.listContext,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_listContext.ListSynchronousContextProvider, {
+            value: contextValues.synchronousContext,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues) => {\n  assertSlots<ListSlots>(state);\n\n  return (\n    <ListContextProvider value={contextValues.listContext}>\n      <state.root />\n    </ListContextProvider>\n  );\n};\n"],"names":["renderList_unstable","state","contextValues","assertSlots","_jsx","ListContextProvider","value","listContext","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;6BAEQ;AAK7B,MAAMA,sBAAsB,CAACC,OAAkBC;IACpDC,IAAAA,2BAAAA,EAAuBF;IAEvB,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,gCAAAA,EAAAA;QAAoBC,OAAOJ,cAAcK,WAAW;kBACnD,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
+{"version":3,"sources":["../src/components/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider, ListSynchronousContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues) => {\n  assertSlots<ListSlots>(state);\n\n  return (\n    <ListContextProvider value={contextValues.listContext}>\n      <ListSynchronousContextProvider value={contextValues.synchronousContext}>\n        <state.root />\n      </ListSynchronousContextProvider>\n    </ListContextProvider>\n  );\n};\n"],"names":["assertSlots","ListContextProvider","ListSynchronousContextProvider","renderList_unstable","state","contextValues","value","listContext","synchronousContext","root"],"mappings":";;;;+BAUaG;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;6BAEY,gBAAgB;AAK7E,4BAA4B,CAACC,OAAkBC;QACpDL,2BAAAA,EAAuBI;IAEvB,OAAA,WAAA,OACE,eAAA,EAACH,gCAAAA,EAAAA;QAAoBK,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACL,2CAAAA,EAAAA;YAA+BI,OAAOD,cAAcG,kBAAkB;sBACrE,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

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

@@ -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":["useList_unstable","DEFAULT_ROOT_EL_TYPE","props","ref","navigationMode","selectionMode","selectedItems","defaultSelectedItems","onSelectionChange","as","arrowNavigationAttributes","useArrowNavigationGroup","axis","memorizeCurrent","selectionState","setSelectionState","useControllableState","state","defaultState","initialState","onChange","useEventCallback","e","data","selectedItemsAsArray","Array","from","event","type","selection","useListSelection","listRole","role","calculateListRole","listItemRole","calculateListItemRoleForListRole","findAllFocusable","useFocusFinders","validateListItem","listItemEl","process","env","NODE_ENV","itemRole","getAttribute","focusable","validateProperElementTypes","tagName","toLocaleLowerCase","validateProperRolesAreUsed","length","validateGridCellsArePresent","components","root","slot","always","getIntrinsicElementProps","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BaA;;;eAAAA;;;;iEA9BU;gCAOhB;8BACkD;kCAExB;uBAO1B;AAEP,MAAMC,uBAAuB;AAWtB,MAAMD,mBAAmB,CAC9BE,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,aAAa,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGN;IAElG,MAAMO,KAAKP,MAAMO,EAAE,IAAIL,mBAAmB,cAAc,QAAQH;IAEhE,MAAMS,4BAA4BC,IAAAA,qCAAAA,EAAwB;QACxDC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC/DC,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAWC,IAAAA,gCAAAA,EAAiB,CAACC,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKjB,aAAa;QAC1DS,kBAAkBS;QAClBhB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBc,GAAG;YAAEK,OAAOL;YAAGM,MAAM;YAAUtB,eAAekB;QAAqB;IACzF;IAEA,MAAMK,YAAYC,IAAAA,kCAAAA,EAAiB;QACjCtB,mBAAmBY;QACnBf,eAAeA,iBAAiB;QAChCC,eAAeQ;IACjB;IAEA,MAAMiB,WAAW7B,MAAM8B,IAAI,IAAIC,IAAAA,wBAAAA,EAAkB7B,gBAAgB,CAAC,CAACC;IACnE,MAAM6B,eAAeC,IAAAA,uCAAAA,EAAiCJ;IAEtD,MAAM,EAAEK,gBAAgB,EAAE,GAAGC,IAAAA,6BAAAA;IAE7B,MAAMC,mBAAmBjB,IAAAA,gCAAAA,EAAiB,CAACkB;QACzC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC;QACF;QACA,MAAMC,WAAWJ,WAAWK,YAAY,CAAC,WAAW;QACpD,MAAMC,YAAYT,iBAAiBG;QACnCO,IAAAA,iCAAAA,EAA2BrC,IAAI8B,WAAWQ,OAAO,CAACC,iBAAiB;QACnEC,IAAAA,iCAAAA,EAA2BlB,UAAUY,UAAU,CAAC,CAACtC,eAAewC,UAAUK,MAAM,GAAG;QACnFC,IAAAA,kCAAAA,EAA4BpB,UAAUQ;IACxC;IAEA,OAAO;QACLa,YAAY;YACVC,MAAM5C;QACR;QACA4C,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB/C,IAAI;YAC3BN;YACA6B,MAAMD;YACN,GAAI1B,iBAAiB;gBACnB,wBAAwBA,kBAAkB,gBAAgB,OAAOoD;YACnE,CAAC;YACD,GAAG/C,yBAAyB;YAC5B,GAAGR,KAAK;QACV,IACA;YAAEwD,aAAajD;QAAG;QAEpByB;QACAI;QACAlC;QACA,6FAA6F;QAC7FyB,WAAWxB,gBAAgBwB,YAAY4B;IACzC;AACF"}
+{"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["import { 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    listItemRole,\n    navigationMode,\n    validateListItem,\n  };\n\n  return {\n    listContext,\n  };\n}\n"],"names":["useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAE;QACAD;QACAE;IACF;IAEA,OAAO;QACLC;IACF;AACF"}
+{"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"}

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

@@ -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":["listClassNames","useListStyles_unstable","root","useRootBaseStyles","__resetStyles","state","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,cAAc;eAAdA;;IAWIC,sBAAsB;eAAtBA;;;uBAZ6B;AACvC,MAAMD,iBAAiB;IAC1BE,MAAM;AACV;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB;AAGU,MAAMH,yBAA0BI,CAAAA;IACvC;IACA,MAAMC,aAAaH;IACnBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,eAAeE,IAAI,EAAEI,YAAYD,MAAMH,IAAI,CAACK,SAAS;IACzF,OAAOF;AACX"}
+{"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"}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    listClassNames: function() {
+        return listClassNames;
+    },
+    useListStyles_unstable: function() {
+        return useListStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+const useListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, state.root.className);
+    return state;
+};

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

@@ -0,0 +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"}

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

@@ -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":["ListItem","React","forwardRef","props","ref","state","useListItem_unstable","useListItemStyles_unstable","useCustomStyleHook_unstable","renderListItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;qCAEqB;6BACP;gCACG;yCACG;AAGpC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAC1D,OAAOI,IAAAA,uCAAAA,EAAwBJ;AACjC;AAGFL,SAASU,WAAW,GAAG"}
+{"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type {\n  ListItemActionEventData,\n  ListItemProps,\n  ListItemSlots,\n  ListItemState,\n  ListItemValue,\n} from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAURC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BATJ;gCAQe;6BACH;yCAC0B"}
+{"version":3,"sources":["../src/components/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type {\n  ListItemActionEventData,\n  ListItemProps,\n  ListItemSlots,\n  ListItemState,\n  ListItemValue,\n} from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAURG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BATJ,aAAa;gCAQE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListItemState, ListItemSlots } from './ListItem.types';\n\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState) => {\n  assertSlots<ListItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["renderListItem_unstable","state","assertSlots","_jsxs","root","checkmark","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,2BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMG,IAAI,CAACG,QAAQ;;;AAG1B"}
+{"version":3,"sources":["../src/components/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListItemState, ListItemSlots } from './ListItem.types';\n\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState) => {\n  assertSlots<ListItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderListItem_unstable","state","root","checkmark","children"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

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

@@ -24,13 +24,12 @@ const useListItem_unstable = (props, ref)=>{
         var _ctx_selection;
         return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
     });
-    const navigationMode = (0, _listContext.useListContext_unstable)((ctx)=>ctx.navigationMode);
+    const { navigationMode, listItemRole } = (0, _listContext.useListSynchronousContext)();
     const isSelectionEnabled = (0, _listContext.useListContext_unstable)((ctx)=>!!ctx.selection);
     const isSelected = (0, _listContext.useListContext_unstable)((ctx)=>{
         var _ctx_selection;
         return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
     });
-    const listItemRole = (0, _listContext.useListContext_unstable)((ctx)=>ctx.listItemRole);
     const validateListItem = (0, _listContext.useListContext_unstable)((ctx)=>ctx.validateListItem);
     const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
     const finalListItemRole = role || listItemRole;

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

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

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

@@ -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});\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.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":["listItemClassNames","useListItemStyles_unstable","root","checkmark","useRootBaseStyles","__resetStyles","useCheckmarkBaseStyles","__styles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","state","rootBaseStyles","checkmarkBaseStyles","styles","className","mergeClasses","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,kBAAkB;eAAlBA;;IAkCIC,0BAA0B;eAA1BA;;;uBArCyC;AAGnD,MAAMD,qBAAqB;IAC9BE,MAAM;IACNC,WAAW;AACf;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB;AACD,MAAMC,yBAAsB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAL,MAAA;QAAAM,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAQ/B;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGT,IAAAA,eAAA,EAAA;IAAAU,2BAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAL,GAAA;QAAA;QAAA;KAAA;AAAA;AAQX,MAAMb,6BAA8BmB,CAAAA;IAC3C;IACA,MAAMC,iBAAiBjB;IACvB,MAAMkB,sBAAsBhB;IAC5B,MAAMiB,SAASP;IACfI,MAAMlB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,mBAAmBE,IAAI,EAAEmB,gBAAgB,AAACD,CAAAA,MAAMM,UAAU,IAAIN,MAAMO,SAAS,AAATA,KAAcJ,OAAON,yBAAyB,EAAEG,MAAMlB,IAAI,CAACsB,SAAS;IAC5K,IAAIJ,MAAMjB,SAAS,EAAE;QACjBiB,MAAMjB,SAAS,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,mBAAmBG,SAAS,EAAEmB,oBAAoBpB,IAAI,EAAEkB,MAAMjB,SAAS,CAACqB,SAAS;IAC9H;IACA,OAAOJ;AACX"}
+{"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});\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.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","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":";;;;;;;;;;;IAGaK,kBAAkB;;;8BAkCY;eAA1BiB;;;uBArCyC,gBAAgB;AAGnE,2BAA2B;IAC9BhB,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;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AAGS,oCAAoCO,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGhB,iBAAiB,CAAC,CAAC;IAC1C,MAAMiB,mBAAmB,GAAGhB,sBAAsB,CAAC,CAAC;IACpD,MAAMiB,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1BK,KAAK,CAACjB,IAAI,CAACqB,SAAS,OAAGzB,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEkB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAAA,AAAS,KAAKH,MAAM,CAACP,yBAAyB,EAAEI,KAAK,CAACjB,IAAI,CAACqB,SAAS,CAAC;IAC7K,IAAIJ,KAAK,CAAChB,SAAS,EAAE;QACjBgB,KAAK,CAAChB,SAAS,CAACoB,SAAS,OAAGzB,mBAAY,EAACG,kBAAkB,CAACE,SAAS,EAAEkB,mBAAmB,CAACnB,IAAI,EAAEiB,KAAK,CAAChB,SAAS,CAACoB,SAAS,CAAC;IAC/H;IACA,OAAOJ,KAAK;AAChB,CAAC"}

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    listItemClassNames: function() {
+        return listItemClassNames;
+    },
+    useListItemStyles_unstable: function() {
+        return useListItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const listItemClassNames = {
+    root: 'fui-ListItem',
+    checkmark: 'fui-ListItem__checkmark'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+const useCheckmarkBaseStyles = (0, _react.makeStyles)({
+    root: {
+        alignSelf: 'center',
+        '& .fui-Checkbox__indicator': {
+            margin: '4px'
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    rootClickableOrSelectable: {
+        display: 'flex',
+        cursor: 'pointer'
+    }
+});
+const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const checkmarkBaseStyles = useCheckmarkBaseStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.root.className);
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
+    }
+    return state;
+};

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

@@ -0,0 +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\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.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","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":";;;;;;;;;;;IAMaK,kBAAAA;;;8BAuCAoB;eAAAA;;;uBA5C6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DnB,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;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,iBAAiBnB;IACvB,MAAMoB,sBAAsBT;IAC5B,MAAMU,SAASR;IAEfK,MAAMpB,IAAI,CAACwB,SAAS,OAAG5B,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBqB,gBACCD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAAA,AAAQ,KAAMH,OAAOP,yBAAyB,EACzEI,MAAMpB,IAAI,CAACwB,SAAS;IAGtB,IAAIJ,MAAMnB,SAAS,EAAE;QACnBmB,MAAMnB,SAAS,CAACuB,SAAS,OAAG5B,mBAAAA,EAC1BG,mBAAmBE,SAAS,EAC5BqB,oBAAoBtB,IAAI,EACxBoB,MAAMnB,SAAS,CAACuB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BAASA;;;eAAAA,kCAAgB;;;kCAAQ"}
+{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"mappings":";;;;;;;eAASA,kCAAgB;;;kCAAQ,qBAAqB"}

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

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

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

@@ -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":["useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","useControllableState","state","defaultState","initialState","selected","selectionMethods","useSelection","e","data","toggleItem","useEventCallback","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","React","useMemo","Array","from","isSelected","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;gCAJ0E;iEACnE;AAGhB,SAASA,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7DC,OAAOP,QAAQI,aAAa;QAC5BI,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGC,IAAAA,4BAAAA,EAAa;QAChDX;QACAC;QACAE;QACAD,mBAAmB,CAACU,GAAGC;YACrBT,iBAAiBS,KAAKV,aAAa;YACnCD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBU,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CC,IAAAA,gCAAAA,EAAiB,CAACH,GAAGI,SACxEN,iBAAiBI,UAAU,CAACF,GAAGI;IAGjC,MAAMC,iBAAuDF,IAAAA,gCAAAA,EAAiB,CAACH,GAAGM;QAChFR,iBAAiBO,cAAc,CAACL,GAAGM;IACrC;IAEA,MAAMC,eAAmDJ,IAAAA,gCAAAA,EAAiB,CAACH,GAAGI,SAC5EN,iBAAiBS,YAAY,CAACP,GAAGI;IAGnC,MAAMI,aAA+CL,IAAAA,gCAAAA,EAAiB,CAACH,GAAGI,SACxEN,iBAAiBU,UAAU,CAACR,GAAGI;IAGjC,MAAMK,iBAAuDN,IAAAA,gCAAAA,EAAiBH,CAAAA,IAAKF,iBAAiBY,UAAU,CAACV;IAE/G,MAAMW,gBAAgBC,OAAMC,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAAClB,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLN,eAAeoB;QACfT;QACAG;QACAE;QACAC;QACAhB;QACAwB,YAAY,CAACC,KAAwBnB,iBAAiBkB,UAAU,CAACC;QACjER;IACF;AACF"}
+{"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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\n\nexport type { ListProps, ListSlots, ListState } from './List';\nexport {\n  ListItem,\n  listItemClassNames,\n  renderListItem_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n} from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';\n"],"names":["List","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListStyles_unstable","useList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAIXC,QAAQ;eAARA,kBAAQ;;IAJKC,cAAc;eAAdA,oBAAc;;IAK3BC,kBAAkB;eAAlBA,4BAAkB;;IAClBC,uBAAuB;eAAvBA,iCAAuB;;IANMC,mBAAmB;eAAnBA,yBAAmB;;IAOhDC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;IAR8BC,sBAAsB;eAAtBA,4BAAsB;;IAAEC,gBAAgB;eAAhBA,sBAAgB;;;sBAAQ;0BAS7F"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\n\nexport type { ListProps, ListSlots, ListState } from './List';\nexport {\n  ListItem,\n  listItemClassNames,\n  renderListItem_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n} from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":";;;;;;;;;;;IAASA;yBAAI;;IAIXK;iCAAQ;;;eAJKJ,oBAAc;;sBAKT;eAAlBK;;;eACAC,iCAAuB;;;eANML,yBAAmB;;;eAOhDM,oCAA0B;;;eAC1BC,8BAAoB;;;eAR8BN,4BAAsB;;;eAAEC,sBAAgB;;;sBAAQ,SAAS;0BAStG,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/calculateListItemRoleForListRole.ts"],"sourcesContent":["/**\n * Calculate the role for the list item based on the list role.\n * @param listRole - the role of the list\n * @returns proper role for the list item\n */\nexport const calculateListItemRoleForListRole = (listRole: string): string => {\n  switch (listRole) {\n    case 'list':\n      return 'listitem';\n    case 'listbox':\n      return 'option';\n    case 'grid':\n      return 'row';\n    default:\n      return 'listitem';\n  }\n};\n"],"names":["calculateListItemRoleForListRole","listRole"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC;;;;+BACYA;;;eAAAA;;;AAAN,MAAMA,mCAAmC,CAACC;IAC/C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF"}
+{"version":3,"sources":["../src/utils/calculateListItemRoleForListRole.ts"],"sourcesContent":["/**\n * Calculate the role for the list item based on the list role.\n * @param listRole - the role of the list\n * @returns proper role for the list item\n */\nexport const calculateListItemRoleForListRole = (listRole: string): string => {\n  switch (listRole) {\n    case 'list':\n      return 'listitem';\n    case 'listbox':\n      return 'option';\n    case 'grid':\n      return 'row';\n    default:\n      return 'listitem';\n  }\n};\n"],"names":["calculateListItemRoleForListRole","listRole"],"mappings":"AAAA;;;;CAIC,GACD;;;;;;;;;;AAAO,MAAMA,mCAAmC,CAACC;IAC/C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { calculateListRole } from './calculateListRole';\nexport { validateProperElementTypes } from './validateProperElementTypes';\nexport { validateProperRolesAreUsed } from './validateProperRolesAreUsed';\nexport { calculateListItemRoleForListRole } from './calculateListItemRoleForListRole';\nexport { validateGridCellsArePresent } from './validateGridCellsArePresent';\n"],"names":["calculateListItemRoleForListRole","calculateListRole","validateGridCellsArePresent","validateProperElementTypes","validateProperRolesAreUsed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGSA,gCAAgC;eAAhCA,kEAAgC;;IAHhCC,iBAAiB;eAAjBA,oCAAiB;;IAIjBC,2BAA2B;eAA3BA,wDAA2B;;IAH3BC,0BAA0B;eAA1BA,sDAA0B;;IAC1BC,0BAA0B;eAA1BA,sDAA0B;;;mCAFD;4CACS;4CACA;kDACM;6CACL"}
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { calculateListRole } from './calculateListRole';\nexport { validateProperElementTypes } from './validateProperElementTypes';\nexport { validateProperRolesAreUsed } from './validateProperRolesAreUsed';\nexport { calculateListItemRoleForListRole } from './calculateListItemRoleForListRole';\nexport { validateGridCellsArePresent } from './validateGridCellsArePresent';\n"],"names":["calculateListRole","validateProperElementTypes","validateProperRolesAreUsed","calculateListItemRoleForListRole","validateGridCellsArePresent"],"mappings":";;;;;;;;;;;;eAGSG,kEAAgC;;;eAHhCH,oCAAiB;;;eAIjBI,wDAA2B;;;eAH3BH,sDAA0B;;;eAC1BC,sDAA0B;;;mCAFD,sBAAsB;4CACb,+BAA+B;4CAC/B,+BAA+B;kDACzB,qCAAqC;6CAC1C,gCAAgC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/validateGridCellsArePresent.ts"],"sourcesContent":["/**\n * Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.\n * If grid cells are not present and we're not running in production mode, a warning will be logged to the console.\n * @param listRole - The role of the list\n * @param listItemEl - The list item element\n * @returns\n */\nexport const validateGridCellsArePresent = (listRole: string, listItemEl: HTMLElement) => {\n  if (listRole !== 'grid') {\n    return;\n  }\n\n  const gridCells = listItemEl.querySelectorAll(':scope > [role=\"gridcell\"]');\n  if (gridCells.length === 0) {\n    //eslint-disable-next-line no-console\n    console.warn(\n      `@fluentui/react-list [useList]:\\nList items in List with \"grid\" role (which is automatically assigned when navigationMode is set to \"composite\") must contain at least one \"gridcell\" as direct child of <ListItem /> for proper screen reader support.`,\n      `Ideally, each focus target should be in it's own \"gridcell\", which is a direct child of <ListItem />.\\n`,\n    );\n  }\n};\n"],"names":["validateGridCellsArePresent","listRole","listItemEl","gridCells","querySelectorAll","length","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;CAMC;;;;+BACYA;;;eAAAA;;;AAAN,MAAMA,8BAA8B,CAACC,UAAkBC;IAC5D,IAAID,aAAa,QAAQ;QACvB;IACF;IAEA,MAAME,YAAYD,WAAWE,gBAAgB,CAAC;IAC9C,IAAID,UAAUE,MAAM,KAAK,GAAG;QAC1B,qCAAqC;QACrCC,QAAQC,IAAI,CACV,CAAC,uPAAuP,CAAC,EACzP,CAAC,uGAAuG,CAAC;IAE7G;AACF"}
+{"version":3,"sources":["../src/utils/validateGridCellsArePresent.ts"],"sourcesContent":["/**\n * Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.\n * If grid cells are not present and we're not running in production mode, a warning will be logged to the console.\n * @param listRole - The role of the list\n * @param listItemEl - The list item element\n * @returns\n */\nexport const validateGridCellsArePresent = (listRole: string, listItemEl: HTMLElement) => {\n  if (listRole !== 'grid') {\n    return;\n  }\n\n  const gridCells = listItemEl.querySelectorAll(':scope > [role=\"gridcell\"]');\n  if (gridCells.length === 0) {\n    //eslint-disable-next-line no-console\n    console.warn(\n      `@fluentui/react-list [useList]:\\nList items in List with \"grid\" role (which is automatically assigned when navigationMode is set to \"composite\") must contain at least one \"gridcell\" as direct child of <ListItem /> for proper screen reader support.`,\n      `Ideally, each focus target should be in it's own \"gridcell\", which is a direct child of <ListItem />.\\n`,\n    );\n  }\n};\n"],"names":["validateGridCellsArePresent","listRole","listItemEl","gridCells","querySelectorAll","length","console","warn"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;AAAO,MAAMA,8BAA8B,CAACC,UAAkBC;IAC5D,IAAID,aAAa,QAAQ;QACvB;IACF;IAEA,MAAME,YAAYD,WAAWE,gBAAgB,CAAC;IAC9C,IAAID,UAAUE,MAAM,KAAK,GAAG;QAC1B,qCAAqC;QACrCC,QAAQC,IAAI,CACV,CAAC,uPAAuP,CAAC,EACzP,CAAC,uGAAuG,CAAC;IAE7G;AACF,EAAE"}