@fluentui/react-list 9.2.7 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-list
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.4.0)
+
+Mon, 28 Jul 2025 18:44:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.3.0..@fluentui/react-list_v9.4.0)
+
+### Minor changes
+
+- fix(react-list): Dont crash in dev mode when navigation mode is changed ([PR #34613](https://github.com/microsoft/fluentui/pull/34613) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.5.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.3.0)
+
+Thu, 17 Jul 2025 13:49:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.7..@fluentui/react-list_v9.3.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.5.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.6..@fluentui/react-list_v9.2.7)
 
 ### Patches

package/dist/index.d.ts

@@ -17,14 +17,13 @@ export declare const List: ForwardRefComponent<ListProps>;
 export declare const listClassNames: SlotClassNames<ListSlots>;
 
 declare type ListContextValue = {
-    navigationMode: ListNavigationMode | undefined;
     selection?: ListSelectionState;
-    listItemRole: string;
     validateListItem: (listItemElement: HTMLElement) => void;
 };
 
 declare type ListContextValues = {
     listContext: ListContextValue;
+    synchronousContext: ListSynchronousContextValue;
 };
 
 export declare const ListItem: ForwardRefComponent<ListItemProps>;
@@ -97,7 +96,12 @@ export declare type ListSlots = {
 /**
  * State used in rendering List
  */
-export declare type ListState = ComponentState<ListSlots> & ListContextValue;
+export declare type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;
+
+declare type ListSynchronousContextValue = {
+    navigationMode: ListNavigationMode | undefined;
+    listItemRole: string;
+};
 
 declare type OnListSelectionChangeData = EventData<'change', React_2.SyntheticEvent> & {
     selectedItems: SelectionItemId[];

package/lib/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":"AASA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}
+{"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":"AASA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}

package/lib/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":"AAOA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"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":"AAOA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}

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

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

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

package/lib/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","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAU9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}
+{"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":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAU9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

package/lib/components/List/listContext.js

@@ -1,11 +1,22 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import * as React from 'react';
 export const listContextDefaultValue = {
-    navigationMode: undefined,
     selection: undefined,
-    listItemRole: 'listitem',
     validateListItem: ()=>{
     /* noop */ }
 };
 const listContext = createContext(undefined);
 export const ListContextProvider = listContext.Provider;
 export const useListContext_unstable = (selector)=>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 = React.createContext(undefined);
+export const ListSynchronousContextProvider = ListSynchronousContext.Provider;
+export const useListSynchronousContext = ()=>React.useContext(ListSynchronousContext) || {
+        navigationMode: undefined,
+        listItemRole: 'listitem'
+    };

package/lib/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":["createContext","useContextSelector","listContextDefaultValue","navigationMode","undefined","selection","listItemRole","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,gBAAgBC;IAChBC,WAAWD;IACXE,cAAc;IACdC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcR,cAA4CI;AAEhE,OAAO,MAAMK,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCX,mBAAmBO,aAAa,CAACK,MAAMX,uBAAuB,GAAKU,SAASC,MAAM"}
+{"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":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGrF,YAAYC,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,yBAAyBX,MAAMF,aAAa,CAA0CK;AAE5F,OAAO,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AAC9E,OAAO,MAAMM,4BAA4B,IACvCb,MAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

package/lib/components/List/renderList.js

@@ -1,12 +1,15 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
-import { ListContextProvider } from './listContext';
+import { ListContextProvider, ListSynchronousContextProvider } from './listContext';
 /**
  * Render the final JSX of List
  */ export const renderList_unstable = (state, contextValues)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsx(ListContextProvider, {
         value: contextValues.listContext,
-        children: /*#__PURE__*/ _jsx(state.root, {})
+        children: /*#__PURE__*/ _jsx(ListSynchronousContextProvider, {
+            value: contextValues.synchronousContext,
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
     });
 };

package/lib/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":["assertSlots","ListContextProvider","renderList_unstable","state","contextValues","value","listContext","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,gBAAgB;AAEpF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDL,YAAuBI;IAEvB,qBACE,KAACH;QAAoBK,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACL;YAA+BI,OAAOD,cAAcG,kBAAkB;sBACrE,cAAA,KAACJ,MAAMK,IAAI;;;AAInB,EAAE"}

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

package/lib/components/List/useListContextValues.js

@@ -1,12 +1,20 @@
+import * as React from 'react';
 export 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/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":"AAEA,OAAO,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":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAC;QACAE;IACF;IAEA,MAAME,qBAAqBR,MAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;QACF,CAAA,GACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}

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

@@ -0,0 +1,18 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+/**
+ * Apply styling to the List slots based on the state
+ */ export const useListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootBaseStyles();
+    state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);
+    return state;
+};

package/lib/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":"AACA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n  value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: ListItemValue;\n  onAction?: EventHandler<ListItemActionEventData>;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & { selectable: boolean; navigable: boolean };\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC,GACD,WAAwG"}
+{"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/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","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAQtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAQtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/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":["assertSlots","renderListItem_unstable","state","root","checkmark","children"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}
+{"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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

package/lib/components/ListItem/useListItem.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys, useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from '@fluentui/react-tabster';
 import { elementContains, getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
-import { useListContext_unstable } from '../List/listContext';
+import { useListSynchronousContext, useListContext_unstable } from '../List/listContext';
 import { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { createListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';
@@ -21,13 +21,12 @@ const DEFAULT_ROOT_EL_TYPE = 'li';
         var _ctx_selection;
         return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
     });
-    const navigationMode = useListContext_unstable((ctx)=>ctx.navigationMode);
+    const { navigationMode, listItemRole } = useListSynchronousContext();
     const isSelectionEnabled = useListContext_unstable((ctx)=>!!ctx.selection);
     const isSelected = useListContext_unstable((ctx)=>{
         var _ctx_selection;
         return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
     });
-    const listItemRole = useListContext_unstable((ctx)=>ctx.listItemRole);
     const validateListItem = useListContext_unstable((ctx)=>ctx.validateListItem);
     const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
     const finalListItemRole = role || listItemRole;

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

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

@@ -0,0 +1,48 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const listItemClassNames = {
+    root: 'fui-ListItem',
+    checkmark: 'fui-ListItem__checkmark'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        borderRadius: tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+const useCheckmarkBaseStyles = makeStyles({
+    root: {
+        alignSelf: 'center',
+        '& .fui-Checkbox__indicator': {
+            margin: '4px'
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    rootClickableOrSelectable: {
+        display: 'flex',
+        cursor: 'pointer'
+    }
+});
+/**
+ * Apply styling to the ListItem slots based on the state
+ */ export const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const checkmarkBaseStyles = useCheckmarkBaseStyles();
+    const styles = useStyles();
+    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.root.className);
+    if (state.checkmark) {
+        state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
+    }
+    return state;
+};

package/lib/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":"AACA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,oBAAoBP,gBAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGT,gCACD;QACEU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,OAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBnB,WAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,YAAYrB,WAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBnB;IACvB,MAAMoB,sBAAsBT;IAC5B,MAAMU,SAASR;IAEfK,MAAMpB,IAAI,CAACwB,SAAS,GAAG5B,aACrBG,mBAAmBC,IAAI,EACvBqB,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAAD,KAAMH,OAAOP,yBAAyB,EACzEI,MAAMpB,IAAI,CAACwB,SAAS;IAGtB,IAAIJ,MAAMnB,SAAS,EAAE;QACnBmB,MAAMnB,SAAS,CAACuB,SAAS,GAAG5B,aAC1BG,mBAAmBE,SAAS,EAC5BqB,oBAAoBtB,IAAI,EACxBoB,MAAMnB,SAAS,CAACuB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

package/lib/events/ListItemActionEvent.js.map

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

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"rangeMappings":"","mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB"}
+{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB"}

package/lib/hooks/types.js.map

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

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

package/lib/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","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"rangeMappings":";","mappings":"AAAA,SAASA,IAAI,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,EAAEC,gBAAgB,QAAQ,SAAS;AAG7G,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}
+{"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":"AAAA,SAASA,IAAI,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,EAAEC,gBAAgB,QAAQ,SAAS;AAG7G,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}

package/lib/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,GACD,OAAO,MAAMA,mCAAmC,CAACC;IAC/C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF,EAAE"}
+{"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,OAAO,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/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,GAED,OAAO,MAAMA,oBAAoB,CAACC,gBAAgDC;IAChF,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}
+{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import { 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,OAAO,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/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":["calculateListRole","validateProperElementTypes","validateProperRolesAreUsed","calculateListItemRoleForListRole","validateGridCellsArePresent"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,2BAA2B,QAAQ,gCAAgC"}
+{"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":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,2BAA2B,QAAQ,gCAAgC"}

package/lib/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,GACD,OAAO,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"}
+{"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,OAAO,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"}

package/lib/utils/validateProperElementTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/validateProperElementTypes.ts"],"sourcesContent":["/**\n * Validates that the List and ListItem elements are compatible\n * @param listRenderedAs - the type of the parent element\n * @param listItemRenderedAs - the type of the child element\n */\nexport function validateProperElementTypes(listRenderedAs?: string, listItemRenderedAs?: string) {\n  if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {\n    throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n  }\n  if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {\n    throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n  }\n}\n"],"names":["validateProperElementTypes","listRenderedAs","listItemRenderedAs","Error"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,2BAA2BC,cAAuB,EAAEC,kBAA2B;IAC7F,IAAIA,uBAAuB,SAASD,mBAAmB,OAAO;QAC5D,MAAM,IAAIE,MAAM;IAClB;IACA,IAAID,uBAAuB,QAAQD,mBAAmB,OAAO;QAC3D,MAAM,IAAIE,MAAM;IAClB;AACF"}
+{"version":3,"sources":["../src/utils/validateProperElementTypes.ts"],"sourcesContent":["/**\n * Validates that the List and ListItem elements are compatible\n * @param listRenderedAs - the type of the parent element\n * @param listItemRenderedAs - the type of the child element\n */\nexport function validateProperElementTypes(listRenderedAs?: string, listItemRenderedAs?: string) {\n  if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {\n    throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n  }\n  if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {\n    throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n  }\n}\n"],"names":["validateProperElementTypes","listRenderedAs","listItemRenderedAs","Error"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,2BAA2BC,cAAuB,EAAEC,kBAA2B;IAC7F,IAAIA,uBAAuB,SAASD,mBAAmB,OAAO;QAC5D,MAAM,IAAIE,MAAM;IAClB;IACA,IAAID,uBAAuB,QAAQD,mBAAmB,OAAO;QAC3D,MAAM,IAAIE,MAAM;IAClB;AACF"}

package/lib/utils/validateProperRolesAreUsed.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/validateProperRolesAreUsed.ts"],"sourcesContent":["/**\n * Validate that the proper roles are used for the given combination of roles and states.\n * If the roles are invalid and we're not running in production mode, an warning will be logged to the console.\n *\n * @param role - the role of the list\n * @param listItemRole - the role of the list item\n * @param hasSelection - whether the list has selection enabled\n * @param hasFocusableChildren - whether the list has focusable children\n * @returns\n */\nexport const validateProperRolesAreUsed = (\n  role: string,\n  listItemRole: string,\n  hasSelection: boolean,\n  hasFocusableChildren: boolean,\n) => {\n  // Explode when the pair of roles is invalid\n  if (role === 'list' && listItemRole !== 'listitem') {\n    throw new Error('When the List role is \"list\", ListItem role must be \"listitem\".');\n  }\n  if (role === 'listbox' && listItemRole !== 'option') {\n    throw new Error('When the List role is \"listbox\", ListItem role must be \"option\".');\n  }\n  if (role === 'grid' && listItemRole !== 'row') {\n    throw new Error('When the List role is \"grid\", ListItem role must be \"row\".');\n  }\n\n  const expectedRole = (() => {\n    if (hasFocusableChildren) {\n      return 'grid';\n    } else {\n      if (hasSelection) {\n        return 'listbox';\n      } else {\n        return 'list';\n      }\n    }\n  })();\n\n  if (role !== expectedRole) {\n    /* eslint-disable-next-line no-console */\n    console.warn(`@fluentui/react-list [useList]:\\nThe role \"${role}\" does not match the expected role \"${expectedRole}\".\\nPlease use the \"navigationMode\" property for automatic role assignment and keyboard navigation.\\nIf you are using this role intentionally, make sure to verify screen reader support.\n    `);\n  }\n};\n"],"names":["validateProperRolesAreUsed","role","listItemRole","hasSelection","hasFocusableChildren","Error","expectedRole","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;;;;CASC,GACD,OAAO,MAAMA,6BAA6B,CACxCC,MACAC,cACAC,cACAC;IAEA,4CAA4C;IAC5C,IAAIH,SAAS,UAAUC,iBAAiB,YAAY;QAClD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,aAAaC,iBAAiB,UAAU;QACnD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,UAAUC,iBAAiB,OAAO;QAC7C,MAAM,IAAIG,MAAM;IAClB;IAEA,MAAMC,eAAe,AAAC,CAAA;QACpB,IAAIF,sBAAsB;YACxB,OAAO;QACT,OAAO;YACL,IAAID,cAAc;gBAChB,OAAO;YACT,OAAO;gBACL,OAAO;YACT;QACF;IACF,CAAA;IAEA,IAAIF,SAASK,cAAc;QACzB,uCAAuC,GACvCC,QAAQC,IAAI,CAAC,CAAC,2CAA2C,EAAEP,KAAK,oCAAoC,EAAEK,aAAa;IACnH,CAAC;IACH;AACF,EAAE"}
+{"version":3,"sources":["../src/utils/validateProperRolesAreUsed.ts"],"sourcesContent":["/**\n * Validate that the proper roles are used for the given combination of roles and states.\n * If the roles are invalid and we're not running in production mode, an warning will be logged to the console.\n *\n * @param role - the role of the list\n * @param listItemRole - the role of the list item\n * @param hasSelection - whether the list has selection enabled\n * @param hasFocusableChildren - whether the list has focusable children\n * @returns\n */\nexport const validateProperRolesAreUsed = (\n  role: string,\n  listItemRole: string,\n  hasSelection: boolean,\n  hasFocusableChildren: boolean,\n) => {\n  // Explode when the pair of roles is invalid\n  if (role === 'list' && listItemRole !== 'listitem') {\n    throw new Error('When the List role is \"list\", ListItem role must be \"listitem\".');\n  }\n  if (role === 'listbox' && listItemRole !== 'option') {\n    throw new Error('When the List role is \"listbox\", ListItem role must be \"option\".');\n  }\n  if (role === 'grid' && listItemRole !== 'row') {\n    throw new Error('When the List role is \"grid\", ListItem role must be \"row\".');\n  }\n\n  const expectedRole = (() => {\n    if (hasFocusableChildren) {\n      return 'grid';\n    } else {\n      if (hasSelection) {\n        return 'listbox';\n      } else {\n        return 'list';\n      }\n    }\n  })();\n\n  if (role !== expectedRole) {\n    /* eslint-disable-next-line no-console */\n    console.warn(`@fluentui/react-list [useList]:\\nThe role \"${role}\" does not match the expected role \"${expectedRole}\".\\nPlease use the \"navigationMode\" property for automatic role assignment and keyboard navigation.\\nIf you are using this role intentionally, make sure to verify screen reader support.\n    `);\n  }\n};\n"],"names":["validateProperRolesAreUsed","role","listItemRole","hasSelection","hasFocusableChildren","Error","expectedRole","console","warn"],"mappings":"AAAA;;;;;;;;;CASC,GACD,OAAO,MAAMA,6BAA6B,CACxCC,MACAC,cACAC,cACAC;IAEA,4CAA4C;IAC5C,IAAIH,SAAS,UAAUC,iBAAiB,YAAY;QAClD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,aAAaC,iBAAiB,UAAU;QACnD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,UAAUC,iBAAiB,OAAO;QAC7C,MAAM,IAAIG,MAAM;IAClB;IAEA,MAAMC,eAAe,AAAC,CAAA;QACpB,IAAIF,sBAAsB;YACxB,OAAO;QACT,OAAO;YACL,IAAID,cAAc;gBAChB,OAAO;YACT,OAAO;gBACL,OAAO;YACT;QACF;IACF,CAAA;IAEA,IAAIF,SAASK,cAAc;QACzB,uCAAuC,GACvCC,QAAQC,IAAI,CAAC,CAAC,2CAA2C,EAAEP,KAAK,oCAAoC,EAAEK,aAAa;IACnH,CAAC;IACH;AACF,EAAE"}