@fluentui/react-migration-v0-v9 9.0.53 → 9.1.0

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

@@ -0,0 +1,118 @@
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useListContext_unstable } from '../List/listContext';
+const DEFAULT_ROOT_EL_TYPE = 'li';
+function validateProperElementTypes(parentRenderedAs, renderedAs) {
+    if (process.env.NODE_ENV === 'production') {
+        return;
+    }
+    if (renderedAs === 'div' && parentRenderedAs !== 'div') {
+        throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');
+    }
+    if (renderedAs === 'li' && parentRenderedAs === 'div') {
+        throw new Error('ListItem cannot be rendered as a li when its parent is a div.');
+    }
+}
+function validateNavigableWhenOnClickPresent(navigable, onClick) {
+    if (process.env.NODE_ENV === 'production') {
+        return;
+    }
+    if (onClick && !navigable) {
+        throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');
+    }
+}
+/**
+ * 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, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;
+    const navigable = useListContext_unstable((ctx)=>ctx.navigable);
+    const toggleItem = useListContext_unstable((ctx)=>{
+        var _ctx_selection;
+        return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
+    });
+    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 truncateHeaderOnList = useListContext_unstable((ctx)=>ctx.truncateHeader);
+    const truncateContentOnList = useListContext_unstable((ctx)=>ctx.truncateContent);
+    const parentRenderedAs = useListContext_unstable((ctx)=>ctx.as);
+    const renderedAs = props.as || DEFAULT_ROOT_EL_TYPE;
+    validateProperElementTypes(parentRenderedAs, renderedAs);
+    validateNavigableWhenOnClickPresent(navigable, onClick);
+    const handleClick = useEventCallback((e)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (!isSelectionEnabled || e.defaultPrevented) {
+            return;
+        }
+        toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
+    });
+    // This will give us the onKeyDown and onKeyUp props for Enter and Space
+    const buttonProps = useARIAButtonProps('div', {
+        onClick: handleClick,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+    });
+    const root = slot.always(getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {
+        ref: ref,
+        tabIndex: navigable || isSelectionEnabled ? 0 : undefined,
+        role: navigable ? 'menuitem' : 'listitem',
+        id: String(value),
+        ...isSelectionEnabled && {
+            role: 'option',
+            'aria-selected': isSelected
+        },
+        ...props,
+        onKeyDown: buttonProps.onKeyDown,
+        onKeyUp: buttonProps.onKeyUp,
+        onClick: buttonProps.onClick
+    }), {
+        elementType: DEFAULT_ROOT_EL_TYPE
+    });
+    const state = {
+        components: {
+            root: DEFAULT_ROOT_EL_TYPE,
+            media: 'div',
+            header: 'div',
+            contentWrapper: 'div',
+            headerMedia: 'div',
+            contentMedia: 'div',
+            endMedia: 'div'
+        },
+        root,
+        navigable,
+        selectable: isSelectionEnabled,
+        selected: isSelected,
+        media: slot.optional(props.media, {
+            elementType: 'div'
+        }),
+        header: slot.optional(props.header, {
+            elementType: 'div'
+        }),
+        contentWrapper: slot.optional(props.contentWrapper, {
+            elementType: 'div',
+            renderByDefault: true
+        }),
+        headerMedia: slot.optional(props.headerMedia, {
+            elementType: 'div'
+        }),
+        contentMedia: slot.optional(props.contentMedia, {
+            elementType: 'div'
+        }),
+        endMedia: slot.optional(props.endMedia, {
+            elementType: 'div'
+        }),
+        truncateHeader: truncateHeader !== null && truncateHeader !== void 0 ? truncateHeader : truncateHeaderOnList,
+        truncateContent: truncateContent !== null && truncateContent !== void 0 ? truncateContent : truncateContentOnList
+    };
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useListItem.tsx"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useListContext_unstable } from '../List/listContext';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\nfunction validateProperElementTypes(parentRenderedAs?: 'div' | 'ul' | 'ol', renderedAs?: 'div' | 'li') {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n\n  if (renderedAs === 'div' && parentRenderedAs !== 'div') {\n    throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n  }\n  if (renderedAs === 'li' && parentRenderedAs === 'div') {\n    throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n  }\n}\n\nfunction validateNavigableWhenOnClickPresent(navigable: boolean, onClick?: React.MouseEventHandler) {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n\n  if (onClick && !navigable) {\n    throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');\n  }\n}\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, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;\n\n  const navigable = useListContext_unstable(ctx => ctx.navigable);\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n\n  const truncateHeaderOnList = useListContext_unstable(ctx => ctx.truncateHeader);\n  const truncateContentOnList = useListContext_unstable(ctx => ctx.truncateContent);\n\n  const parentRenderedAs = useListContext_unstable(ctx => ctx.as);\n  const renderedAs = props.as || DEFAULT_ROOT_EL_TYPE;\n\n  validateProperElementTypes(parentRenderedAs, renderedAs);\n\n  validateNavigableWhenOnClickPresent(navigable, onClick);\n\n  const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n    onClick?.(e);\n\n    if (!isSelectionEnabled || e.defaultPrevented) {\n      return;\n    }\n\n    toggleItem?.(e, value);\n  });\n\n  // This will give us the onKeyDown and onKeyUp props for Enter and Space\n  const buttonProps = useARIAButtonProps('div', {\n    onClick: handleClick,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  });\n\n  const root = slot.always(\n    getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n      ref: ref as React.Ref<HTMLLIElement & HTMLDivElement>,\n      tabIndex: navigable || isSelectionEnabled ? 0 : undefined,\n      role: navigable ? 'menuitem' : 'listitem',\n      id: String(value),\n      ...(isSelectionEnabled && {\n        role: 'option',\n        'aria-selected': isSelected,\n      }),\n      ...props,\n      onKeyDown: buttonProps.onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n      onKeyUp: buttonProps.onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n      onClick: buttonProps.onClick as React.MouseEventHandler<HTMLLIElement & HTMLDivElement>,\n    }),\n    { elementType: DEFAULT_ROOT_EL_TYPE },\n  );\n\n  const state: ListItemState = {\n    components: {\n      root: DEFAULT_ROOT_EL_TYPE,\n      media: 'div',\n      header: 'div',\n      contentWrapper: 'div',\n      headerMedia: 'div',\n      contentMedia: 'div',\n      endMedia: 'div',\n    },\n    root,\n    navigable,\n    selectable: isSelectionEnabled,\n    selected: isSelected,\n    media: slot.optional(props.media, { elementType: 'div' }),\n    header: slot.optional(props.header, { elementType: 'div' }),\n    contentWrapper: slot.optional(props.contentWrapper, { elementType: 'div', renderByDefault: true }),\n    headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n    contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n    endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n    truncateHeader: truncateHeader ?? truncateHeaderOnList,\n    truncateContent: truncateContent ?? truncateContentOnList,\n  };\n\n  return state;\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","slot","useEventCallback","useId","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","buttonProps","root","always","tabIndex","undefined","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+import { __styles, __resetStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const listItemClassNames = {
+  root: 'fui-ListItem',
+  media: 'fui-ListItem__media',
+  header: 'fui-ListItem__header',
+  contentWrapper: 'fui-ListItem__contentWrapper',
+  headerMedia: 'fui-ListItem__headerMedia',
+  contentMedia: 'fui-ListItem__contentMedia',
+  endMedia: 'fui-ListItem__endMedia'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("rigpsx1", "r1tw60jj", [".rigpsx1{padding-top:0;padding-right:10px;padding-bottom:0;padding-left:10px;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;text-indent:0;list-style-type:none;}", ".rigpsx1[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);}", ".r1tw60jj{padding-top:0;padding-left:10px;padding-bottom:0;padding-right:10px;margin-top:0;margin-left:0;margin-bottom:0;margin-right:0;text-indent:0;list-style-type:none;}", ".r1tw60jj[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);}"]);
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  contentWrapper: {
+    Be2twd7: "fy9rknc"
+  },
+  contentWrapperWithoutMedia: {
+    Bw0ie65: "fsyjsko"
+  },
+  truncate: {
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    j4b8c3: "fv6wr3j",
+    ygn44y: "f1cmbuwj"
+  },
+  rootSelected: {
+    De3pzq: "f1nfm20t"
+  },
+  rootClickable: {
+    Bceei9c: "f1k6fduh",
+    Jwef8y: "f1knas48"
+  }
+}, {
+  d: [".fy9rknc{font-size:var(--fontSizeBase200);}", ".fsyjsko{grid-column-end:4;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fv6wr3j{text-wrap:nowrap;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f1k6fduh{cursor:pointer;}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"]
+});
+/**
+ * Apply styling to the ListItem slots based on the state
+ */
+export const useListItemStyles_unstable = state => {
+  const rootBaseStyles = useRootBaseStyles();
+  const styles = useStyles();
+  state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);
+  if (state.header) {
+    var _state_header;
+    state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);
+  }
+  if (state.contentWrapper) {
+    var _state_contentWrapper;
+    state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useListItemStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n    root: 'fui-ListItem',\n    media: 'fui-ListItem__media',\n    header: 'fui-ListItem__header',\n    contentWrapper: 'fui-ListItem__contentWrapper',\n    headerMedia: 'fui-ListItem__headerMedia',\n    contentMedia: 'fui-ListItem__contentMedia',\n    endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n    ...shorthands.padding(0, '10px'),\n    ...shorthands.margin(0),\n    textIndent: 0,\n    listStyleType: 'none',\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium)\n    }, {\n        selector: 'focus'\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    contentWrapper: {\n        fontSize: tokens.fontSizeBase200\n    },\n    // The content should go all the way to the end if the content media is not present\n    contentWrapperWithoutMedia: {\n        gridColumnEnd: 4\n    },\n    truncate: {\n        ...shorthands.overflow('hidden'),\n        textWrap: 'nowrap',\n        textOverflow: 'ellipsis'\n    },\n    rootSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected\n    },\n    rootClickable: {\n        cursor: 'pointer',\n        '&:hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover\n        }\n    }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n    if (state.header) {\n        var _state_header;\n        state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n    }\n    if (state.contentWrapper) {\n        var _state_contentWrapper;\n        state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGb,aAAA,8hCAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMc,SAAS,gBAAGf,QAAA;EAAAU,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGnB,iBAAiB,CAAC,CAAC;EAC1C,MAAMoB,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAACzB,IAAI,CAAC4B,SAAS,GAAGjC,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE0B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACR,aAAa,EAAEM,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACV,YAAY,EAAEQ,KAAK,CAACzB,IAAI,CAAC4B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACvB,MAAM,EAAE;IACd,IAAI8B,aAAa;IACjBP,KAAK,CAACvB,MAAM,CAAC0B,SAAS,GAAGjC,YAAY,CAAC8B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACf,QAAQ,EAAE,CAACoB,aAAa,GAAGP,KAAK,CAACvB,MAAM,MAAM,IAAI,IAAI8B,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACtB,cAAc,EAAE;IACtB,IAAI+B,qBAAqB;IACzBT,KAAK,CAACtB,cAAc,CAACyB,SAAS,GAAGjC,YAAY,CAACgC,MAAM,CAACxB,cAAc,EAAEsB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACf,QAAQ,EAAE,CAACa,KAAK,CAACpB,YAAY,IAAIsB,MAAM,CAACjB,0BAA0B,EAAE,CAACwB,qBAAqB,GAAGT,KAAK,CAACtB,cAAc,MAAM,IAAI,IAAI+B,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/List/hooks/index.js

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

package/lib/components/List/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useListSelection';\n"],"names":[],"mappings":"AAAA,cAAc,qBAAqB"}

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

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

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

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

package/lib/components/List/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/components/List/hooks/useListSelection.js.map

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

package/lib/components/List/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\nexport type { ListProps, ListSlots, ListState } from './List';\n\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\nexport { useListSelection } from './hooks';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection"],"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;AAGpB,SAASC,gBAAgB,QAAQ,UAAU"}

package/lib/index.js

@@ -9,3 +9,4 @@ export { StyledText, styledTextClassName } from './components/StyledText';
 export { Primitive, primitiveClassName } from './components/Primitive';
 export { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';
 export { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';
+export { List, ListItem, listClassNames, listItemClassNames, renderListItem_unstable, renderList_unstable, useListItemStyles_unstable, useListItem_unstable, useListSelection, useListStyles_unstable, useList_unstable } from './components/List';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\n"],"names":["GridShim","grid","gridClassName","useGridStyles","FormFieldShim","Segment","slider","input","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","spinner","StyledText","styledTextClassName","Primitive","primitiveClassName","ItemLayout","itemLayoutClassName","useItemLayoutStyles","Flex","flexClassName","flexItem","useFlexStyles"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AAEvF,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,MAAM,QAAQ,sBAAsB;AACzG,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,0BAA0B;AAE1E,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,0BAA0B;AAC/F,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\n"],"names":["GridShim","grid","gridClassName","useGridStyles","FormFieldShim","Segment","slider","input","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","spinner","StyledText","styledTextClassName","Primitive","primitiveClassName","ItemLayout","itemLayoutClassName","useItemLayoutStyles","Flex","flexClassName","flexItem","useFlexStyles","List","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AAEvF,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,MAAM,QAAQ,sBAAsB;AACzG,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,0BAA0B;AAE1E,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,0BAA0B;AAC/F,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,oBAAoB;AACjF,SACEC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,kBAAkB,EAClBC,uBAAuB,EACvBC,mBAAmB,EACnBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,QACX,oBAAoB"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "List", {
+    enumerable: true,
+    get: function() {
+        return List;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useList = require("./useList");
+const _renderList = require("./renderList");
+const _useListStylesstyles = require("./useListStyles.styles");
+const _useListContextValues = require("./useListContextValues");
+const List = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useList.useList_unstable)(props, ref);
+    const contextValues = (0, _useListContextValues.useListContextValues_unstable)(state);
+    (0, _useListStylesstyles.useListStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListStyles_unstable')(state);
+    return (0, _renderList.renderList_unstable)(state, contextValues);
+});
+List.displayName = 'List';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["List.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport { useListContextValues_unstable } from './useListContextValues';\nexport const List = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useList_unstable(props, ref);\n    const contextValues = useListContextValues_unstable(state);\n    useListStyles_unstable(state);\n    useCustomStyleHook_unstable('useListStyles_unstable')(state);\n    return renderList_unstable(state, contextValues);\n});\nList.displayName = 'List';\n"],"names":["List","React","forwardRef","props","ref","state","useList_unstable","contextValues","useListContextValues_unstable","useListStyles_unstable","useCustomStyleHook_unstable","renderList_unstable","displayName"],"mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;qCACqB;yBACX;4BACG;qCACG;sCACO;AACvC,MAAMA,OAAO,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvD,MAAMC,QAAQC,IAAAA,yBAAgB,EAACH,OAAOC;IACtC,MAAMG,gBAAgBC,IAAAA,mDAA6B,EAACH;IACpDI,IAAAA,2CAAsB,EAACJ;IACvBK,IAAAA,gDAA2B,EAAC,0BAA0BL;IACtD,OAAOM,IAAAA,+BAAmB,EAACN,OAAOE;AACtC;AACAP,KAAKY,WAAW,GAAG"}

package/lib-commonjs/components/List/List/List.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/components/List/List/List.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["List.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./List"), exports);
+_export_star._(require("./List.types"), exports);
+_export_star._(require("./renderList"), exports);
+_export_star._(require("./useList"), exports);
+_export_star._(require("./useListStyles.styles"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './List';\nexport * from './List.types';\nexport * from './renderList';\nexport * from './useList';\nexport * from './useListStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -0,0 +1,30 @@
+"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, {
+    listContextDefaultValue: function() {
+        return listContextDefaultValue;
+    },
+    ListContextProvider: function() {
+        return ListContextProvider;
+    },
+    useListContext_unstable: function() {
+        return useListContext_unstable;
+    }
+});
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const listContextDefaultValue = {
+    navigable: false,
+    selection: undefined,
+    as: undefined
+};
+const listContext = (0, _reactcontextselector.createContext)(undefined);
+const ListContextProvider = listContext.Provider;
+const useListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(listContext, (ctx = listContextDefaultValue)=>selector(ctx));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["listContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const listContextDefaultValue = {\n    navigable: false,\n    selection: undefined,\n    as: undefined\n};\nconst listContext = createContext(undefined);\nexport const ListContextProvider = listContext.Provider;\nexport const useListContext_unstable = (selector)=>useContextSelector(listContext, (ctx = listContextDefaultValue)=>selector(ctx));\n"],"names":["listContextDefaultValue","ListContextProvider","useListContext_unstable","navigable","selection","undefined","as","listContext","createContext","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,uBAAuB;eAAvBA;;IAMAC,mBAAmB;eAAnBA;;IACAC,uBAAuB;eAAvBA;;;sCARqC;AAC3C,MAAMF,0BAA0B;IACnCG,WAAW;IACXC,WAAWC;IACXC,IAAID;AACR;AACA,MAAME,cAAcC,IAAAA,mCAAa,EAACH;AAC3B,MAAMJ,sBAAsBM,YAAYE,QAAQ;AAChD,MAAMP,0BAA0B,CAACQ,WAAWC,IAAAA,wCAAkB,EAACJ,aAAa,CAACK,MAAMZ,uBAAuB,GAAGU,SAASE"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderList_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderList_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _listContext = require("./listContext");
+const renderList_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_listContext.ListContextProvider, {
+        value: contextValues.listContext,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderList.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ListContextProvider } from './listContext';\n/**\n * Render the final JSX of List\n */ export const renderList_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(ListContextProvider, {\n        value: contextValues.listContext,\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderList_unstable","state","contextValues","assertSlots","_jsx","ListContextProvider","value","listContext","children","root"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BALa;gCACF;6BACQ;AAGzB,MAAMA,sBAAsB,CAACC,OAAOC;IAC3CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,gCAAmB,EAAE;QAC3CC,OAAOJ,cAAcK,WAAW;QAChCC,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACH,MAAMQ,IAAI,EAAE,CAAC;IAC9C;AACJ"}

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useList_unstable", {
+    enumerable: true,
+    get: function() {
+        return useList_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttabster = require("@fluentui/react-tabster");
+const _useListSelection = require("../hooks/useListSelection");
+const DEFAULT_ROOT_EL_TYPE = 'ul';
+const useList_unstable = (props, ref)=>{
+    const { layout = 'vertical', navigable = false, selectable = false, selectionMode = 'single', selectedItems, defaultSelectedItems, as, onSelectionChange, truncateContent = false, truncateHeader = false } = props;
+    const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: layout === 'grid' ? 'grid-linear' : 'both',
+        memorizeCurrent: true
+    });
+    const [selectionState, setSelectionState] = (0, _reactutilities.useControllableState)({
+        state: selectedItems,
+        defaultState: defaultSelectedItems,
+        initialState: []
+    });
+    const onChange = (0, _reactutilities.useEventCallback)((e, data)=>{
+        const selectedItemsAsArray = Array.from(data.selectedItems);
+        setSelectionState(selectedItemsAsArray);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
+            selectedItems: selectedItemsAsArray
+        });
+    });
+    const selection = (0, _useListSelection.useListSelection)({
+        onSelectionChange: onChange,
+        selectionMode,
+        selectedItems: selectionState,
+        defaultSelectedItems
+    });
+    return {
+        components: {
+            root: DEFAULT_ROOT_EL_TYPE
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(DEFAULT_ROOT_EL_TYPE, {
+            ref,
+            ...navigable && {
+                role: 'menu'
+            },
+            ...selectable && {
+                role: 'listbox',
+                'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined
+            },
+            ...arrowNavigationAttributes,
+            ...props
+        }), {
+            elementType: DEFAULT_ROOT_EL_TYPE
+        }),
+        layout,
+        // context:
+        navigable,
+        as: as || DEFAULT_ROOT_EL_TYPE,
+        truncateContent,
+        truncateHeader,
+        // only pass down selection state if its handled internally, otherwise just report the events
+        selection: selectable ? selection : undefined
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useList.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useListSelection } from '../hooks/useListSelection';\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\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 */ export const useList_unstable = (props, ref)=>{\n    const { layout = 'vertical', navigable = false, selectable = false, selectionMode = 'single', selectedItems, defaultSelectedItems, as, onSelectionChange, truncateContent = false, truncateHeader = false } = props;\n    const arrowNavigationAttributes = useArrowNavigationGroup({\n        axis: layout === 'grid' ? 'grid-linear' : 'both',\n        memorizeCurrent: true\n    });\n    const [selectionState, setSelectionState] = useControllableState({\n        state: selectedItems,\n        defaultState: defaultSelectedItems,\n        initialState: []\n    });\n    const onChange = useEventCallback((e, data)=>{\n        const selectedItemsAsArray = Array.from(data.selectedItems);\n        setSelectionState(selectedItemsAsArray);\n        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {\n            selectedItems: selectedItemsAsArray\n        });\n    });\n    const selection = useListSelection({\n        onSelectionChange: onChange,\n        selectionMode,\n        selectedItems: selectionState,\n        defaultSelectedItems\n    });\n    return {\n        components: {\n            root: DEFAULT_ROOT_EL_TYPE\n        },\n        root: slot.always(getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n            ref,\n            ...navigable && {\n                role: 'menu'\n            },\n            ...selectable && {\n                role: 'listbox',\n                'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined\n            },\n            ...arrowNavigationAttributes,\n            ...props\n        }), {\n            elementType: DEFAULT_ROOT_EL_TYPE\n        }),\n        layout,\n        // context:\n        navigable,\n        as: as || DEFAULT_ROOT_EL_TYPE,\n        truncateContent,\n        truncateHeader,\n        // only pass down selection state if its handled internally, otherwise just report the events\n        selection: selectable ? selection : undefined\n    };\n};\n"],"names":["useList_unstable","DEFAULT_ROOT_EL_TYPE","props","ref","layout","navigable","selectable","selectionMode","selectedItems","defaultSelectedItems","as","onSelectionChange","truncateContent","truncateHeader","arrowNavigationAttributes","useArrowNavigationGroup","axis","memorizeCurrent","selectionState","setSelectionState","useControllableState","state","defaultState","initialState","onChange","useEventCallback","e","data","selectedItemsAsArray","Array","from","selection","useListSelection","components","root","slot","always","getIntrinsicElementProps","role","undefined","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACgE;8BAC/C;kCACP;AACjC,MAAMC,uBAAuB;AASlB,MAAMD,mBAAmB,CAACE,OAAOC;IACxC,MAAM,EAAEC,SAAS,UAAU,EAAEC,YAAY,KAAK,EAAEC,aAAa,KAAK,EAAEC,gBAAgB,QAAQ,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,EAAE,EAAEC,iBAAiB,EAAEC,kBAAkB,KAAK,EAAEC,iBAAiB,KAAK,EAAE,GAAGX;IAC9M,MAAMY,4BAA4BC,IAAAA,qCAAuB,EAAC;QACtDC,MAAMZ,WAAW,SAAS,gBAAgB;QAC1Ca,iBAAiB;IACrB;IACA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,oCAAoB,EAAC;QAC7DC,OAAOb;QACPc,cAAcb;QACdc,cAAc,EAAE;IACpB;IACA,MAAMC,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QAClC,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKnB,aAAa;QAC1DW,kBAAkBS;QAClBjB,sBAAsB,QAAQA,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBe,GAAG;YACvFlB,eAAeoB;QACnB;IACJ;IACA,MAAMG,YAAYC,IAAAA,kCAAgB,EAAC;QAC/BrB,mBAAmBa;QACnBjB;QACAC,eAAeU;QACfT;IACJ;IACA,OAAO;QACHwB,YAAY;YACRC,MAAMjC;QACV;QACAiC,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACpC,sBAAsB;YAC7DE;YACA,GAAGE,aAAa;gBACZiC,MAAM;YACV,CAAC;YACD,GAAGhC,cAAc;gBACbgC,MAAM;gBACN,wBAAwB/B,kBAAkB,gBAAgB,OAAOgC;YACrE,CAAC;YACD,GAAGzB,yBAAyB;YAC5B,GAAGZ,KAAK;QACZ,IAAI;YACAsC,aAAavC;QACjB;QACAG;QACA,WAAW;QACXC;QACAK,IAAIA,MAAMT;QACVW;QACAC;QACA,6FAA6F;QAC7FkB,WAAWzB,aAAayB,YAAYQ;IACxC;AACJ"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useListContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useListContextValues_unstable;
+    }
+});
+function useListContextValues_unstable(state) {
+    const { navigable, selection, as, truncateContent, truncateHeader } = state;
+    const listContext = {
+        navigable,
+        selection,
+        as,
+        truncateContent,
+        truncateHeader
+    };
+    return {
+        listContext
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useListContextValues.js"],"sourcesContent":["export function useListContextValues_unstable(state) {\n    const { navigable, selection, as, truncateContent, truncateHeader } = state;\n    const listContext = {\n        navigable,\n        selection,\n        as,\n        truncateContent,\n        truncateHeader\n    };\n    return {\n        listContext\n    };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,8BAA8BC,KAAK;IAC/C,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IACtE,MAAMM,cAAc;QAChBL;QACAC;QACAC;QACAC;QACAC;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    listClassNames: function() {
+        return listClassNames;
+    },
+    useListStyles_unstable: function() {
+        return useListStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1m6yby2", null, [
+    ".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}"
+]);
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    rootHorizontal: {
+        mc9l5x: "f22iagw"
+    },
+    rootGrid: {
+        mc9l5x: "f13qh94s"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f13qh94s{display:grid;}"
+    ]
+});
+const useListStyles_unstable = (state)=>{
+    const rootStyles = useRootBaseStyles();
+    const styles = useStyles();
+    const layoutToStyles = {
+        ['horizontal']: styles.rootHorizontal,
+        ['grid']: styles.rootGrid,
+        ['vertical']: undefined
+    };
+    state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);
+    return state;
+}; //# sourceMappingURL=useListStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useListStyles.styles.js"],"sourcesContent":["import { __styles, __resetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n  root: 'fui-List'\n};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"r1m6yby2\", null, [\".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}\"]);\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  rootHorizontal: {\n    mc9l5x: \"f22iagw\"\n  },\n  rootGrid: {\n    mc9l5x: \"f13qh94s\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f13qh94s{display:grid;}\"]\n});\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = state => {\n  const rootStyles = useRootBaseStyles();\n  const styles = useStyles();\n  const layoutToStyles = {\n    ['horizontal']: styles.rootHorizontal,\n    ['grid']: styles.rootGrid,\n    ['vertical']: undefined\n  };\n  state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n  return state;\n};\n//# sourceMappingURL=useListStyles.styles.js.map"],"names":["listClassNames","useListStyles_unstable","root","useRootBaseStyles","__resetStyles","useStyles","__styles","rootHorizontal","mc9l5x","rootGrid","d","state","rootStyles","styles","layoutToStyles","undefined","className","mergeClasses","layout"],"mappings":";;;;;;;;;;;IACaA,cAAc;eAAdA;;IAoBAC,sBAAsB;eAAtBA;;;uBArByC;AAC/C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAoE;AAC5I;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,gBAAgB;QACdC,QAAQ;IACV;IACAC,UAAU;QACRD,QAAQ;IACV;AACF,GAAG;IACDE,GAAG;QAAC;QAA2B;KAA2B;AAC5D;AAIO,MAAMT,yBAAyBU,CAAAA;IACpC,MAAMC,aAAaT;IACnB,MAAMU,SAASR;IACf,MAAMS,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IACAJ,MAAMT,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,eAAeE,IAAI,EAAEU,YAAYE,cAAc,CAACH,MAAMO,MAAM,CAAC,EAAEP,MAAMT,IAAI,CAACc,SAAS;IACvH,OAAOL;AACT,GACA,gDAAgD"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ListItem", {
+    enumerable: true,
+    get: function() {
+        return ListItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useListItem = require("./useListItem");
+const _renderListItem = require("./renderListItem");
+const _useListItemStylesstyles = require("./useListItemStyles.styles");
+const ListItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useListItem.useListItem_unstable)(props, ref);
+    (0, _useListItemStylesstyles.useListItemStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListItemStyles_unstable')(state);
+    return (0, _renderListItem.renderListItem_unstable)(state);
+});
+ListItem.displayName = 'ListItem';