@fluentui/react-list 0.0.0-nightly-20250107-0406.1

package/lib/components/List/useList.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useListSelection } from '../../hooks/useListSelection';
+import { calculateListItemRoleForListRole, calculateListRole, validateGridCellsArePresent, validateProperElementTypes, validateProperRolesAreUsed } from '../../utils';
+const DEFAULT_ROOT_EL_TYPE = 'ul';
+/**
+ * Create the state required to render List.
+ *
+ * The returned state can be modified with hooks such as useListStyles_unstable,
+ * before being passed to renderList_unstable.
+ *
+ * @param props - props from this instance of List
+ * @param ref - reference to root HTMLElement of List
+ */ export const useList_unstable = (props, ref)=>{
+    const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;
+    const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
+    const arrowNavigationAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        memorizeCurrent: true
+    });
+    const [selectionState, setSelectionState] = useControllableState({
+        state: selectedItems,
+        defaultState: defaultSelectedItems,
+        initialState: []
+    });
+    const onChange = useEventCallback((e, data)=>{
+        const selectedItemsAsArray = Array.from(data.selectedItems);
+        setSelectionState(selectedItemsAsArray);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
+            event: e,
+            type: 'change',
+            selectedItems: selectedItemsAsArray
+        });
+    });
+    const selection = useListSelection({
+        onSelectionChange: onChange,
+        selectionMode: selectionMode || 'multiselect',
+        selectedItems: selectionState
+    });
+    const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);
+    const listItemRole = calculateListItemRoleForListRole(listRole);
+    const { findAllFocusable } = useFocusFinders();
+    const validateListItem = useEventCallback((listItemEl)=>{
+        if (process.env.NODE_ENV === 'production') {
+            return;
+        }
+        const itemRole = listItemEl.getAttribute('role') || '';
+        const focusable = findAllFocusable(listItemEl);
+        validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());
+        validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);
+        validateGridCellsArePresent(listRole, listItemEl);
+    });
+    return {
+        components: {
+            root: as
+        },
+        root: slot.always(getIntrinsicElementProps(as, {
+            ref,
+            role: listRole,
+            ...selectionMode && {
+                'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined
+            },
+            ...arrowNavigationAttributes,
+            ...props
+        }), {
+            elementType: as
+        }),
+        listItemRole,
+        validateListItem,
+        navigationMode,
+        // only pass down selection state if its handled internally, otherwise just report the events
+        selection: selectionMode ? selection : undefined
+    };
+};

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

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

package/lib/components/List/useListContextValues.js

@@ -0,0 +1,12 @@
+export function useListContextValues_unstable(state) {
+    const { selection, navigationMode, listItemRole, validateListItem } = state;
+    const listContext = {
+        selection,
+        listItemRole,
+        navigationMode,
+        validateListItem
+    };
+    return {
+        listContext
+    };
+}

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

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

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

@@ -0,0 +1,15 @@
+import { __resetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+  root: 'fui-List'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1m6yby2", null, [".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type: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.js.map

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

package/lib/components/ListItem/ListItem.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useListItem_unstable } from './useListItem';
+import { renderListItem_unstable } from './renderListItem';
+import { useListItemStyles_unstable } from './useListItemStyles.styles';
+export const ListItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useListItem_unstable(props, ref);
+    useListItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useListItemStyles_unstable')(state);
+    return renderListItem_unstable(state);
+});
+ListItem.displayName = 'ListItem';

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

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

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering ListItem
+ */ export { };

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

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

package/lib/components/ListItem/index.js

@@ -0,0 +1,4 @@
+export { ListItem } from './ListItem';
+export { renderListItem_unstable } from './renderListItem';
+export { useListItem_unstable } from './useListItem';
+export { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';

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

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

package/lib/components/ListItem/renderListItem.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ListItem
+ */ export const renderListItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.checkmark && /*#__PURE__*/ _jsx(state.checkmark, {}),
+            state.root.children
+        ]
+    });
+};

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

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

package/lib/components/ListItem/useListItem.js

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

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

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

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

@@ -0,0 +1,48 @@
+import { __styles, __resetStyles, 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 = /*#__PURE__*/__resetStyles("rikgcmv", null, [".rikgcmv{padding:0;margin:0;text-indent:0;list-style-type:none;}", ".rikgcmv[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}"]);
+const useCheckmarkBaseStyles = /*#__PURE__*/__styles({
+  root: {
+    qb2dma: "f7nlbp4",
+    Bpb5tq4: 0,
+    Biccaaf: 0,
+    Gaeyjg: 0,
+    ldoezw: 0,
+    B6gmeee: "f1bgo3o3"
+  }
+}, {
+  d: [".f7nlbp4{align-self:center;}", [".f1bgo3o3 .fui-Checkbox__indicator{margin:4px;}", {
+    p: -1
+  }]]
+});
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  rootClickableOrSelectable: {
+    mc9l5x: "f22iagw",
+    Bceei9c: "f1k6fduh"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1k6fduh{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.js.map

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

package/lib/events/ListItemActionEvent.js

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

package/lib/events/ListItemActionEvent.js.map

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

package/lib/hooks/index.js

@@ -0,0 +1 @@
+export { useListSelection } from './useListSelection';

package/lib/hooks/index.js.map

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

package/lib/hooks/types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/hooks/types.js.map

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

package/lib/hooks/useListSelection.js

@@ -0,0 +1,41 @@
+import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
+import * as React from 'react';
+export function useListSelection(options = {
+    selectionMode: 'multiselect'
+}) {
+    const { selectionMode, defaultSelectedItems, onSelectionChange } = options;
+    const [selectedItems, setSelectedItems] = useControllableState({
+        state: options.selectedItems,
+        defaultState: defaultSelectedItems,
+        initialState: []
+    });
+    const [selected, selectionMethods] = useSelection({
+        selectionMode,
+        defaultSelectedItems,
+        selectedItems,
+        onSelectionChange: (e, data)=>{
+            setSelectedItems(data.selectedItems);
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, data);
+        }
+    });
+    const toggleItem = useEventCallback((e, itemId)=>selectionMethods.toggleItem(e, itemId));
+    const toggleAllItems = useEventCallback((e, itemIds)=>{
+        selectionMethods.toggleAllItems(e, itemIds);
+    });
+    const deselectItem = useEventCallback((e, itemId)=>selectionMethods.deselectItem(e, itemId));
+    const selectItem = useEventCallback((e, itemId)=>selectionMethods.selectItem(e, itemId));
+    const clearSelection = useEventCallback((e)=>selectionMethods.clearItems(e));
+    const selectedArray = React.useMemo(()=>Array.from(selected), [
+        selected
+    ]);
+    return {
+        selectedItems: selectedArray,
+        toggleItem,
+        toggleAllItems,
+        deselectItem,
+        selectItem,
+        setSelectedItems,
+        isSelected: (id)=>selectionMethods.isSelected(id),
+        clearSelection
+    };
+}

package/lib/hooks/useListSelection.js.map

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

package/lib/index.js

@@ -0,0 +1,2 @@
+export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';
+export { ListItem, listItemClassNames, renderListItem_unstable, useListItemStyles_unstable, useListItem_unstable } from './ListItem';

package/lib/index.js.map

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

package/lib/utils/calculateListItemRoleForListRole.js

@@ -0,0 +1,16 @@
+/**
+ * Calculate the role for the list item based on the list role.
+ * @param listRole - the role of the list
+ * @returns proper role for the list item
+ */ export const calculateListItemRoleForListRole = (listRole)=>{
+    switch(listRole){
+        case 'list':
+            return 'listitem';
+        case 'listbox':
+            return 'option';
+        case 'grid':
+            return 'row';
+        default:
+            return 'listitem';
+    }
+};

package/lib/utils/calculateListItemRoleForListRole.js.map

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

package/lib/utils/calculateListRole.js

@@ -0,0 +1,14 @@
+/**
+ * Calculate the role for the list based on the navigation mode and selectable state
+ * @param navigationMode - the navigation mode of the list
+ * @param selectable - whether the list is selectable
+ * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not
+ */ export const calculateListRole = (navigationMode, selectable)=>{
+    if (navigationMode === 'composite') {
+        return 'grid';
+    } else if (selectable) {
+        return 'listbox';
+    } else {
+        return 'list';
+    }
+};

package/lib/utils/calculateListRole.js.map

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

package/lib/utils/index.js

@@ -0,0 +1,5 @@
+export { calculateListRole } from './calculateListRole';
+export { validateProperElementTypes } from './validateProperElementTypes';
+export { validateProperRolesAreUsed } from './validateProperRolesAreUsed';
+export { calculateListItemRoleForListRole } from './calculateListItemRoleForListRole';
+export { validateGridCellsArePresent } from './validateGridCellsArePresent';

package/lib/utils/index.js.map

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