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

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

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useListItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return useListItem_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactutilities = require("@fluentui/react-utilities");
+const _listContext = require("../List/listContext");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _reactcheckbox = require("@fluentui/react-checkbox");
+const _ListItemActionEvent = require("../../events/ListItemActionEvent");
+const DEFAULT_ROOT_EL_TYPE = 'li';
+const useListItem_unstable = (props, ref)=>{
+    const id = (0, _reactutilities.useId)('listItem');
+    const { value = id, onKeyDown, onClick, tabIndex, role, onAction } = props;
+    const toggleItem = (0, _listContext.useListContext_unstable)((ctx)=>{
+        var _ctx_selection;
+        return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
+    });
+    const navigationMode = (0, _listContext.useListContext_unstable)((ctx)=>ctx.navigationMode);
+    const isSelectionEnabled = (0, _listContext.useListContext_unstable)((ctx)=>!!ctx.selection);
+    const isSelected = (0, _listContext.useListContext_unstable)((ctx)=>{
+        var _ctx_selection;
+        return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
+    });
+    const listItemRole = (0, _listContext.useListContext_unstable)((ctx)=>ctx.listItemRole);
+    const validateListItem = (0, _listContext.useListContext_unstable)((ctx)=>ctx.validateListItem);
+    const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
+    const finalListItemRole = role || listItemRole;
+    const focusableItems = Boolean(isSelectionEnabled || navigationMode || tabIndex === 0);
+    const rootRef = _react.useRef(null);
+    const checkmarkRef = _react.useRef(null);
+    const handleAction = (0, _reactutilities.useEventCallback)((event)=>{
+        onAction === null || onAction === void 0 ? void 0 : onAction(event, {
+            event,
+            value,
+            type: _ListItemActionEvent.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 = (0, _ListItemActionEvent.createListItemActionEvent)(e);
+        handleAction(actionEvent);
+        e.target.dispatchEvent(actionEvent);
+    };
+    const focusableGroupAttrs = (0, _reacttabster.useFocusableGroup)({
+        ignoreDefaultKeydown: {
+            Enter: true
+        },
+        tabBehavior: 'limited-trap-focus'
+    });
+    const handleClick = (0, _reactutilities.useEventCallback)((e)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (e.defaultPrevented) {
+            return;
+        }
+        const isFromCheckbox = (0, _reactutilities.elementContains)(checkmarkRef.current, e.target);
+        if (isFromCheckbox) {
+            return;
+        }
+        triggerAction(e);
+    });
+    const handleKeyDown = (0, _reactutilities.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 _keyboardkeys.ArrowLeft:
+                        e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
+                            action: _reacttabster.GroupperMoveFocusActions.Escape
+                        }));
+                        break;
+                    case _keyboardkeys.ArrowDown:
+                    case _keyboardkeys.ArrowUp:
+                        e.preventDefault();
+                        // Press ESC on the original target to get focus to the parent group (List)
+                        e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
+                            action: _reacttabster.GroupperMoveFocusActions.Escape
+                        }));
+                        // Now dispatch the original key to move up or down in the list
+                        e.currentTarget.dispatchEvent(new _reacttabster.MoverMoveFocusEvent({
+                            key: _reacttabster.MoverKeys[e.key]
+                        }));
+                }
+                return;
+            }
+            return;
+        }
+        switch(e.key){
+            case _keyboardkeys.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 _keyboardkeys.Enter:
+                triggerAction(e);
+                break;
+            case _keyboardkeys.ArrowRight:
+                if (navigationMode === 'composite') {
+                    e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
+                        action: _reacttabster.GroupperMoveFocusActions.Enter
+                    }));
+                }
+                break;
+        }
+    });
+    const onCheckboxChange = (0, _reactutilities.useEventCallback)((e, data)=>{
+        if (!isSelectionEnabled || e.defaultPrevented) {
+            return;
+        }
+        toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
+    });
+    const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'horizontal'
+    });
+    const tabsterAttributes = (0, _reacttabster.useMergedTabsterAttributes_unstable)(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs);
+    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
+        ref: (0, _reactutilities.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 = _reactutilities.slot.optional(props.checkmark, {
+        defaultProps: {
+            checked: isSelected,
+            tabIndex: -1
+        },
+        renderByDefault: isSelectionEnabled,
+        elementType: _reactcheckbox.Checkbox
+    });
+    const mergedCheckmarkRef = (0, _reactutilities.useMergedRefs)(checkmark === null || checkmark === void 0 ? void 0 : checkmark.ref, checkmarkRef);
+    if (checkmark) {
+        checkmark.onChange = (0, _reactutilities.mergeCallbacks)(checkmark.onChange, onCheckboxChange);
+        checkmark.ref = mergedCheckmarkRef;
+    }
+    const state = {
+        components: {
+            root: as,
+            checkmark: _reactcheckbox.Checkbox
+        },
+        root,
+        checkmark,
+        selectable: isSelectionEnabled,
+        navigable: focusableItems
+    };
+    return state;
+};

package/lib-commonjs/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":["useListItem_unstable","DEFAULT_ROOT_EL_TYPE","props","ref","id","useId","value","onKeyDown","onClick","tabIndex","role","onAction","toggleItem","useListContext_unstable","ctx","selection","navigationMode","isSelectionEnabled","isSelected","listItemRole","validateListItem","as","finalListItemRole","focusableItems","Boolean","rootRef","React","useRef","checkmarkRef","handleAction","useEventCallback","event","type","ListItemActionEventName","defaultPrevented","detail","originalEvent","useEffect","current","triggerAction","e","actionEvent","createListItemActionEvent","target","dispatchEvent","focusableGroupAttrs","useFocusableGroup","ignoreDefaultKeydown","Enter","tabBehavior","handleClick","isFromCheckbox","elementContains","handleKeyDown","currentTarget","key","ArrowLeft","GroupperMoveFocusEvent","action","GroupperMoveFocusActions","Escape","ArrowDown","ArrowUp","preventDefault","MoverMoveFocusEvent","MoverKeys","Space","ArrowRight","onCheckboxChange","data","arrowNavigationAttributes","useArrowNavigationGroup","axis","tabsterAttributes","useMergedTabsterAttributes_unstable","root","slot","always","getIntrinsicElementProps","useMergedRefs","undefined","String","elementType","checkmark","optional","defaultProps","checked","renderByDefault","Checkbox","mergedCheckmarkRef","onChange","mergeCallbacks","state","components","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    listItemClassNames: function() {
+        return listItemClassNames;
+    },
+    useListItemStyles_unstable: function() {
+        return useListItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const listItemClassNames = {
+    root: 'fui-ListItem',
+    checkmark: 'fui-ListItem__checkmark'
+};
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__styles)({
+    rootClickableOrSelectable: {
+        mc9l5x: "f22iagw",
+        Bceei9c: "f1k6fduh"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1k6fduh{cursor:pointer;}"
+    ]
+});
+const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const checkmarkBaseStyles = useCheckmarkBaseStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.root.className);
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n    root: 'fui-ListItem',\n    checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: 0,\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none',\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        borderRadius: tokens.borderRadiusMedium\n    }, {\n        selector: 'focus'\n    })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n    root: {\n        alignSelf: 'center',\n        '& .fui-Checkbox__indicator': {\n            margin: '4px'\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rootClickableOrSelectable: {\n        display: 'flex',\n        cursor: 'pointer'\n    }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const checkmarkBaseStyles = useCheckmarkBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.root.className);\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n    }\n    return state;\n};\n"],"names":["listItemClassNames","useListItemStyles_unstable","root","checkmark","useRootBaseStyles","__resetStyles","useCheckmarkBaseStyles","__styles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","state","rootBaseStyles","checkmarkBaseStyles","styles","className","mergeClasses","selectable","navigable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,kBAAkB;eAAlBA;;IAkCIC,0BAA0B;eAA1BA;;;uBArCyC;AAGnD,MAAMD,qBAAqB;IAC9BE,MAAM;IACNC,WAAW;AACf;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB;AACD,MAAMC,yBAAsB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAL,MAAA;QAAAM,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAQ/B;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGT,IAAAA,eAAA,EAAA;IAAAU,2BAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAL,GAAA;QAAA;QAAA;KAAA;AAAA;AAQX,MAAMb,6BAA8BmB,CAAAA;IAC3C;IACA,MAAMC,iBAAiBjB;IACvB,MAAMkB,sBAAsBhB;IAC5B,MAAMiB,SAASP;IACfI,MAAMlB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,mBAAmBE,IAAI,EAAEmB,gBAAgB,AAACD,CAAAA,MAAMM,UAAU,IAAIN,MAAMO,SAAS,AAATA,KAAcJ,OAAON,yBAAyB,EAAEG,MAAMlB,IAAI,CAACsB,SAAS;IAC5K,IAAIJ,MAAMjB,SAAS,EAAE;QACjBiB,MAAMjB,SAAS,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,mBAAmBG,SAAS,EAAEmB,oBAAoBpB,IAAI,EAAEkB,MAAMjB,SAAS,CAACqB,SAAS;IAC9H;IACA,OAAOJ;AACX"}

package/lib-commonjs/events/ListItemActionEvent.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ListItemActionEventName: function() {
+        return ListItemActionEventName;
+    },
+    createListItemActionEvent: function() {
+        return createListItemActionEvent;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const ListItemActionEventName = 'ListItemAction';
+const createListItemActionEvent = (originalEvent)=>new CustomEvent(ListItemActionEventName, {
+        cancelable: true,
+        bubbles: true,
+        detail: {
+            originalEvent
+        }
+    });

package/lib-commonjs/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":["ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,uBAAAA;eAAAA;;IAQAC,yBAAAA;eAAAA;;;;iEAVU;AAEhB,MAAMD,0BAA0B;AAQhC,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B"}

package/lib-commonjs/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useListSelection", {
+    enumerable: true,
+    get: function() {
+        return _useListSelection.useListSelection;
+    }
+});
+const _useListSelection = require("./useListSelection");

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

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

package/lib-commonjs/hooks/types.js

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

package/lib-commonjs/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":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}

package/lib-commonjs/hooks/useListSelection.js

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

package/lib-commonjs/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    List: function() {
+        return _List.List;
+    },
+    ListItem: function() {
+        return _ListItem.ListItem;
+    },
+    listClassNames: function() {
+        return _List.listClassNames;
+    },
+    listItemClassNames: function() {
+        return _ListItem.listItemClassNames;
+    },
+    renderListItem_unstable: function() {
+        return _ListItem.renderListItem_unstable;
+    },
+    renderList_unstable: function() {
+        return _List.renderList_unstable;
+    },
+    useListItemStyles_unstable: function() {
+        return _ListItem.useListItemStyles_unstable;
+    },
+    useListItem_unstable: function() {
+        return _ListItem.useListItem_unstable;
+    },
+    useListStyles_unstable: function() {
+        return _List.useListStyles_unstable;
+    },
+    useList_unstable: function() {
+        return _List.useList_unstable;
+    }
+});
+const _List = require("./List");
+const _ListItem = require("./ListItem");

package/lib-commonjs/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","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListStyles_unstable","useList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAIXC,QAAQ;eAARA,kBAAQ;;IAJKC,cAAc;eAAdA,oBAAc;;IAK3BC,kBAAkB;eAAlBA,4BAAkB;;IAClBC,uBAAuB;eAAvBA,iCAAuB;;IANMC,mBAAmB;eAAnBA,yBAAmB;;IAOhDC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;IAR8BC,sBAAsB;eAAtBA,4BAAsB;;IAAEC,gBAAgB;eAAhBA,sBAAgB;;;sBAAQ;0BAS7F"}

package/lib-commonjs/utils/calculateListItemRoleForListRole.js

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "calculateListItemRoleForListRole", {
+    enumerable: true,
+    get: function() {
+        return calculateListItemRoleForListRole;
+    }
+});
+const calculateListItemRoleForListRole = (listRole)=>{
+    switch(listRole){
+        case 'list':
+            return 'listitem';
+        case 'listbox':
+            return 'option';
+        case 'grid':
+            return 'row';
+        default:
+            return 'listitem';
+    }
+};

package/lib-commonjs/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;;;;+BACYA;;;eAAAA;;;AAAN,MAAMA,mCAAmC,CAACC;IAC/C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF"}

package/lib-commonjs/utils/calculateListRole.js

@@ -0,0 +1,24 @@
+/**
+ * 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
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "calculateListRole", {
+    enumerable: true,
+    get: function() {
+        return calculateListRole;
+    }
+});
+const calculateListRole = (navigationMode, selectable)=>{
+    if (navigationMode === 'composite') {
+        return 'grid';
+    } else if (selectable) {
+        return 'listbox';
+    } else {
+        return 'list';
+    }
+};

package/lib-commonjs/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;;;;+BAEYA;;;eAAAA;;;AAAN,MAAMA,oBAAoB,CAACC,gBAAgDC;IAChF,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF"}

package/lib-commonjs/utils/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    calculateListItemRoleForListRole: function() {
+        return _calculateListItemRoleForListRole.calculateListItemRoleForListRole;
+    },
+    calculateListRole: function() {
+        return _calculateListRole.calculateListRole;
+    },
+    validateGridCellsArePresent: function() {
+        return _validateGridCellsArePresent.validateGridCellsArePresent;
+    },
+    validateProperElementTypes: function() {
+        return _validateProperElementTypes.validateProperElementTypes;
+    },
+    validateProperRolesAreUsed: function() {
+        return _validateProperRolesAreUsed.validateProperRolesAreUsed;
+    }
+});
+const _calculateListRole = require("./calculateListRole");
+const _validateProperElementTypes = require("./validateProperElementTypes");
+const _validateProperRolesAreUsed = require("./validateProperRolesAreUsed");
+const _calculateListItemRoleForListRole = require("./calculateListItemRoleForListRole");
+const _validateGridCellsArePresent = require("./validateGridCellsArePresent");

package/lib-commonjs/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":["calculateListItemRoleForListRole","calculateListRole","validateGridCellsArePresent","validateProperElementTypes","validateProperRolesAreUsed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGSA,gCAAgC;eAAhCA,kEAAgC;;IAHhCC,iBAAiB;eAAjBA,oCAAiB;;IAIjBC,2BAA2B;eAA3BA,wDAA2B;;IAH3BC,0BAA0B;eAA1BA,sDAA0B;;IAC1BC,0BAA0B;eAA1BA,sDAA0B;;;mCAFD;4CACS;4CACA;kDACM;6CACL"}

package/lib-commonjs/utils/validateGridCellsArePresent.js

@@ -0,0 +1,26 @@
+/**
+ * Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.
+ * If grid cells are not present and we're not running in production mode, a warning will be logged to the console.
+ * @param listRole - The role of the list
+ * @param listItemEl - The list item element
+ * @returns
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "validateGridCellsArePresent", {
+    enumerable: true,
+    get: function() {
+        return validateGridCellsArePresent;
+    }
+});
+const validateGridCellsArePresent = (listRole, listItemEl)=>{
+    if (listRole !== 'grid') {
+        return;
+    }
+    const gridCells = listItemEl.querySelectorAll(':scope > [role="gridcell"]');
+    if (gridCells.length === 0) {
+        //eslint-disable-next-line no-console
+        console.warn(`@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.`, `Ideally, each focus target should be in it's own "gridcell", which is a direct child of <ListItem />.\n`);
+    }
+};

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

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

package/lib-commonjs/utils/validateProperElementTypes.js

@@ -0,0 +1,22 @@
+/**
+ * Validates that the List and ListItem elements are compatible
+ * @param listRenderedAs - the type of the parent element
+ * @param listItemRenderedAs - the type of the child element
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "validateProperElementTypes", {
+    enumerable: true,
+    get: function() {
+        return validateProperElementTypes;
+    }
+});
+function validateProperElementTypes(listRenderedAs, listItemRenderedAs) {
+    if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {
+        throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');
+    }
+    if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {
+        throw new Error('ListItem cannot be rendered as a li when its parent is a div.');
+    }
+}

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

@@ -0,0 +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;;;;+BACeA;;;eAAAA;;;AAAT,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"}