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

package/CHANGELOG.md

@@ -1,18 +1,34 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Thu, 30 Nov 2023 13:37:55 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Dec 2023 09:51:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.1.0)
+
+Thu, 14 Dec 2023 09:51:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.54..@fluentui/react-migration-v0-v9_v9.1.0)
+
+### Minor changes
+
+- feat: List v0 migration shim ([PR #29975](https://github.com/microsoft/fluentui/pull/29975) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-aria to v9.5.0 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-components to v9.43.0 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.43 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.21 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.13.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-tabster to v9.15.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-utilities to v9.15.3 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+
 ## [9.0.54](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.54)
 
-Thu, 30 Nov 2023 13:37:55 GMT 
+Thu, 30 Nov 2023 13:42:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.53..@fluentui/react-migration-v0-v9_v9.0.54)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
-- Bump @fluentui/react-components to v9.42.0 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
+- Bump @fluentui/react-components to v9.42.0 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
 
 ## [9.0.53](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.53)
 

package/dist/index.d.ts

@@ -1,10 +1,19 @@
+/// <reference types="react" />
+
 import { ComponentProps } from '@fluentui/react-components';
+import type { ComponentProps as ComponentProps_2 } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { GriffelStyle } from '@fluentui/react-components';
 import { ObjectOf } from '@fluentui/react-northstar';
 import type { ObjectShorthandValue } from '@fluentui/react-northstar';
 import * as React_2 from 'react';
+import { SelectionHookParams } from '@fluentui/react-utilities';
+import { SelectionItemId } from '@fluentui/react-utilities';
+import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
 import { Slot } from '@fluentui/react-components';
 import { Slot as Slot_2 } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { SlotRenderFunction } from '@fluentui/react-utilities';
 
 export declare const Flex: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & FlexProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -125,6 +134,134 @@ declare type ItemLayoutSlots = {
     endMedia?: Slot_2<'div'>;
 };
 
+export declare const List: ForwardRefComponent<ListProps>;
+
+export declare const listClassNames: SlotClassNames<ListSlots>;
+
+declare type ListContextValue = {
+    navigable: boolean;
+    selection?: ListSelectionState;
+    as?: 'div' | 'ol' | 'ul';
+    truncateHeader?: ListProps['truncateHeader'];
+    truncateContent?: ListProps['truncateContent'];
+};
+
+declare type ListContextValues = {
+    listContext: ListContextValue;
+};
+
+export declare const ListItem: ForwardRefComponent<ListItemProps>;
+
+export declare const listItemClassNames: SlotClassNames<ListItemSlots>;
+
+/**
+ * ListItem Props
+ */
+export declare type ListItemProps = ComponentProps_2<ListItemSlots> & {
+    value?: string | number;
+    truncateHeader?: boolean;
+    truncateContent?: boolean;
+};
+
+export declare type ListItemSlots = {
+    root: NonNullable<Slot_2<'li', 'div'>>;
+    media?: React_2.ComponentProps<typeof ItemLayout>['startMedia'];
+    header?: React_2.ComponentProps<typeof ItemLayout>['header'];
+    contentWrapper?: React_2.ComponentProps<typeof ItemLayout>['contentWrapper'];
+    headerMedia?: React_2.ComponentProps<typeof ItemLayout>['headerMedia'];
+    contentMedia?: React_2.ComponentProps<typeof ItemLayout>['contentMedia'];
+    endMedia?: React_2.ComponentProps<typeof ItemLayout>['endMedia'];
+};
+
+/**
+ * State used in rendering ListItem
+ */
+export declare type ListItemState = ComponentState<ListItemSlots> & {
+    selectable?: boolean;
+    selected?: boolean;
+    navigable?: boolean;
+    truncateHeader?: boolean;
+    truncateContent?: boolean;
+};
+
+declare type ListLayout = 'horizontal' | 'vertical' | 'grid';
+
+/**
+ * List Props
+ */
+export declare type ListProps = ComponentProps_2<ListSlots> & {
+    /**
+     * Defines the layout orientation.
+     *
+     * @default vertical
+     */
+    layout?: ListLayout;
+    /**
+     * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.
+     *
+     * @default false
+     */
+    navigable?: boolean;
+    /**
+     * Defines if the List items should be selectable.
+     *
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Defines selection mode for the List.
+     *
+     * @default single
+     */
+    selectionMode?: SelectionMode_2;
+    /**
+     * For controlled selection - defines selected items
+     */
+    selectedItems?: SelectionItemId[];
+    /**
+     * For uncontrolled selection - defines default selected items
+     */
+    defaultSelectedItems?: SelectionItemId[];
+    /**
+     * Callback for selection change events, used for both controlled and uncontrolled (as notification)
+     */
+    onSelectionChange?: (event: React_2.SyntheticEvent, data: {
+        selectedItems: SelectionItemId[];
+    }) => void;
+    /**
+     * Truncates header
+     *
+     * @default false
+     */
+    truncateHeader?: boolean;
+    /**
+     * Truncates content
+     *
+     * @default false
+     */
+    truncateContent?: boolean;
+};
+
+declare type ListSelectionState = {
+    isSelected: (item: string | number) => boolean;
+    toggleItem: (e: React_2.SyntheticEvent, id: string | number) => void;
+    deselectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
+    selectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
+    clearSelection: (e: React_2.SyntheticEvent) => void;
+    toggleAllItems: (e: React_2.SyntheticEvent, itemIds: string[] | number[]) => void;
+    setSelectedItems: React_2.Dispatch<React_2.SetStateAction<Iterable<SelectionItemId>>>;
+    selectedItems: SelectionItemId[];
+};
+
+export declare type ListSlots = {
+    root: NonNullable<Slot_2<'ul', 'div' | 'ol'>>;
+};
+
+/**
+ * State used in rendering List
+ */
+export declare type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;
+
 export declare const Primitive: PrimitiveComponent;
 
 export declare const primitiveClassName = "fui-Primitive";
@@ -140,6 +277,16 @@ declare interface PrimitiveComponent {
     displayName: string;
 }
 
+/**
+ * Render the final JSX of List
+ */
+export declare const renderList_unstable: (state: ListState, contextValues: ListContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of ListItem
+ */
+export declare const renderListItem_unstable: (state: ListItemState) => JSX.Element;
+
 export declare const Segment: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const slider: {
@@ -219,6 +366,40 @@ export declare const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" |
 
 export declare const useItemLayoutStyles: () => Record<"header" | "root" | "contentMedia" | "contentWrapper" | "headerMedia" | "startMedia" | "endMedia", string>;
 
+/**
+ * Create the state required to render List.
+ *
+ * The returned state can be modified with hooks such as useListStyles_unstable,
+ * before being passed to renderList_unstable.
+ *
+ * @param props - props from this instance of List
+ * @param ref - reference to root HTMLElement of List
+ */
+export declare const useList_unstable: (props: ListProps, ref: React_2.Ref<HTMLDivElement | HTMLUListElement>) => ListState;
+
+/**
+ * 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 declare const useListItem_unstable: (props: ListItemProps, ref: React_2.Ref<HTMLLIElement | HTMLDivElement>) => ListItemState;
+
+/**
+ * Apply styling to the ListItem slots based on the state
+ */
+export declare const useListItemStyles_unstable: (state: ListItemState) => ListItemState;
+
+export declare function useListSelection(options?: SelectionHookParams): ListSelectionState;
+
+/**
+ * Apply styling to the List slots based on the state
+ */
+export declare const useListStyles_unstable: (state: ListState) => ListState;
+
 export declare const v0Icon: () => GriffelStyle;
 
 export declare const v9CustomSizeIcon: () => GriffelStyle;

package/lib/components/List/List/List.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useList_unstable } from './useList';
+import { renderList_unstable } from './renderList';
+import { useListStyles_unstable } from './useListStyles.styles';
+import { useListContextValues_unstable } from './useListContextValues';
+export const List = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useList_unstable(props, ref);
+    const contextValues = useListContextValues_unstable(state);
+    useListStyles_unstable(state);
+    useCustomStyleHook_unstable('useListStyles_unstable')(state);
+    return renderList_unstable(state, contextValues);
+});
+List.displayName = 'List';

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["List.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  /**\n   * Defines the layout orientation.\n   *\n   * @default vertical\n   */\n  layout?: ListLayout;\n\n  /**\n   * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n   *\n   * @default false\n   */\n  navigable?: boolean;\n\n  /**\n   * Defines if the List items should be selectable.\n   *\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * Defines selection mode for the List.\n   *\n   * @default single\n   */\n  selectionMode?: SelectionMode;\n\n  /**\n   * For controlled selection - defines selected items\n   */\n  selectedItems?: SelectionItemId[];\n\n  /**\n   * For uncontrolled selection - defines default selected items\n   */\n  defaultSelectedItems?: SelectionItemId[];\n\n  /**\n   * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n   */\n  onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n  /**\n   * Truncates header\n   *\n   * @default false\n   */\n  truncateHeader?: boolean;\n\n  /**\n   * Truncates content\n   *\n   * @default false\n   */\n  truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n  navigable: boolean;\n  selection?: ListSelectionState;\n  as?: 'div' | 'ol' | 'ul';\n  truncateHeader?: ListProps['truncateHeader'];\n  truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+export * from './List';
+export * from './List.types';
+export * from './renderList';
+export * from './useList';
+export * from './useListStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './List';\nexport * from './List.types';\nexport * from './renderList';\nexport * from './useList';\nexport * from './useListStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,yBAAyB"}

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

@@ -0,0 +1,9 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const listContextDefaultValue = {
+    navigable: false,
+    selection: undefined,
+    as: undefined
+};
+const listContext = createContext(undefined);
+export const ListContextProvider = listContext.Provider;
+export const useListContext_unstable = (selector)=>useContextSelector(listContext, (ctx = listContextDefaultValue)=>selector(ctx));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["listContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n  navigable: false,\n  selection: undefined,\n  as: undefined,\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","listContextDefaultValue","navigable","selection","undefined","as","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMV,uBAAuB,GAAKS,SAASC,MAAM"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues) => {\n  assertSlots<ListSlots>(state);\n\n  return (\n    <ListContextProvider value={contextValues.listContext}>\n      <state.root />\n    </ListContextProvider>\n  );\n};\n"],"names":["assertSlots","ListContextProvider","renderList_unstable","state","contextValues","value","listContext","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useListSelection } from '../hooks/useListSelection';
+const DEFAULT_ROOT_EL_TYPE = 'ul';
+/**
+ * Create the state required to render List.
+ *
+ * The returned state can be modified with hooks such as useListStyles_unstable,
+ * before being passed to renderList_unstable.
+ *
+ * @param props - props from this instance of List
+ * @param ref - reference to root HTMLElement of List
+ */ export const useList_unstable = (props, ref)=>{
+    const { layout = 'vertical', navigable = false, selectable = false, selectionMode = 'single', selectedItems, defaultSelectedItems, as, onSelectionChange, truncateContent = false, truncateHeader = false } = props;
+    const arrowNavigationAttributes = useArrowNavigationGroup({
+        axis: layout === 'grid' ? 'grid-linear' : 'both',
+        memorizeCurrent: true
+    });
+    const [selectionState, setSelectionState] = useControllableState({
+        state: selectedItems,
+        defaultState: defaultSelectedItems,
+        initialState: []
+    });
+    const onChange = useEventCallback((e, data)=>{
+        const selectedItemsAsArray = Array.from(data.selectedItems);
+        setSelectionState(selectedItemsAsArray);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
+            selectedItems: selectedItemsAsArray
+        });
+    });
+    const selection = useListSelection({
+        onSelectionChange: onChange,
+        selectionMode,
+        selectedItems: selectionState,
+        defaultSelectedItems
+    });
+    return {
+        components: {
+            root: DEFAULT_ROOT_EL_TYPE
+        },
+        root: slot.always(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/components/List/List/useList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  OnSelectionChangeData,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../hooks/useListSelection';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (props: ListProps, ref: React.Ref<HTMLDivElement | HTMLUListElement>): ListState => {\n  const {\n    layout = 'vertical',\n    navigable = false,\n    selectable = false,\n    selectionMode = 'single',\n    selectedItems,\n    defaultSelectedItems,\n    as,\n    onSelectionChange,\n    truncateContent = false,\n    truncateHeader = false,\n  } = props;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: layout === 'grid' ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode,\n    selectedItems: selectionState,\n    defaultSelectedItems,\n  });\n\n  return {\n    components: {\n      root: DEFAULT_ROOT_EL_TYPE,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n        ref,\n        ...(navigable && { role: 'menu' }),\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":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useListSelection","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","layout","navigable","selectable","selectionMode","selectedItems","defaultSelectedItems","as","onSelectionChange","truncateContent","truncateHeader","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","selection","components","root","always","role","undefined","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EAExBC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAM,EACJC,SAAS,UAAU,EACnBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,gBAAgB,QAAQ,EACxBC,aAAa,EACbC,oBAAoB,EACpBC,EAAE,EACFC,iBAAiB,EACjBC,kBAAkB,KAAK,EACvBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,MAAMY,4BAA4BhB,wBAAwB;QACxDiB,MAAMX,WAAW,SAAS,gBAAgB;QAC1CY,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGtB,qBAAqB;QAC/DuB,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAWzB,iBAAiB,CAAC0B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKhB,aAAa;QAC1DU,kBAAkBO;QAClBd,8BAAAA,wCAAAA,kBAAoBY,GAAG;YAAEf,eAAeiB;QAAqB;IAC/D;IAEA,MAAMG,YAAY7B,iBAAiB;QACjCY,mBAAmBW;QACnBf;QACAC,eAAeS;QACfR;IACF;IAEA,OAAO;QACLoB,YAAY;YACVC,MAAM9B;QACR;QACA8B,MAAMnC,KAAKoC,MAAM,CACfrC,yBAAyBM,sBAAsB;YAC7CG;YACA,GAAIE,aAAa;gBAAE2B,MAAM;YAAO,CAAC;YACjC,GAAI1B,cAAc;gBAChB0B,MAAM;gBACN,wBAAwBzB,kBAAkB,gBAAgB,OAAO0B;YACnE,CAAC;YACD,GAAGnB,yBAAyB;YAC5B,GAAGZ,KAAK;QACV,IACA;YAAEgC,aAAalC;QAAqB;QAEtCI;QACA,WAAW;QACXC;QACAK,IAAIA,MAAMV;QACVY;QACAC;QACA,6FAA6F;QAC7Fe,WAAWtB,aAAasB,YAAYK;IACtC;AACF,EAAE"}

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

@@ -0,0 +1,13 @@
+export function useListContextValues_unstable(state) {
+    const { navigable, selection, as, truncateContent, truncateHeader } = state;
+    const listContext = {
+        navigable,
+        selection,
+        as,
+        truncateContent,
+        truncateHeader
+    };
+    return {
+        listContext
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useListContextValues.ts"],"sourcesContent":["import { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n  const listContext = {\n    navigable,\n    selection,\n    as,\n    truncateContent,\n    truncateHeader,\n  };\n\n  return {\n    listContext,\n  };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}

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

@@ -0,0 +1,33 @@
+import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+  root: 'fui-List'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1m6yby2", null, [".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}"]);
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  rootHorizontal: {
+    mc9l5x: "f22iagw"
+  },
+  rootGrid: {
+    mc9l5x: "f13qh94s"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f13qh94s{display:grid;}"]
+});
+/**
+ * Apply styling to the List slots based on the state
+ */
+export const useListStyles_unstable = state => {
+  const rootStyles = useRootBaseStyles();
+  const styles = useStyles();
+  const layoutToStyles = {
+    ['horizontal']: styles.rootHorizontal,
+    ['grid']: styles.rootGrid,
+    ['vertical']: undefined
+  };
+  state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);
+  return state;
+};
+//# sourceMappingURL=useListStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n    root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: 0,\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rootHorizontal: {\n        display: 'flex'\n    },\n    rootGrid: {\n        display: 'grid'\n    }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export 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"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACDJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ListItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n  header?: React.ComponentProps<typeof ItemLayout>['header'];\n  contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n  headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n  contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n  endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: string | number;\n  truncateHeader?: boolean;\n  truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable?: boolean;\n  selected?: boolean;\n  navigable?: boolean;\n  truncateHeader?: boolean;\n  truncateContent?: boolean;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+export * from './ListItem';
+export * from './ListItem.types';
+export * from './renderListItem';
+export * from './useListItem';
+export * from './useListItemStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ListItem';\nexport * from './ListItem.types';\nexport * from './renderListItem';\nexport * from './useListItem';\nexport * from './useListItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}

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

@@ -0,0 +1,19 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { ItemLayout } from '../../ItemLayout';
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ListItem
+ */ export const renderListItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(ItemLayout, {
+            startMedia: state.media,
+            header: state.header,
+            headerMedia: state.headerMedia,
+            contentWrapper: state.contentWrapper,
+            contentMedia: state.contentMedia,
+            endMedia: state.endMedia,
+            children: state.root.children
+        })
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { ItemLayout } from '../../ItemLayout';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState) => {\n  assertSlots<ListItemSlots>(state);\n\n  return (\n    <state.root>\n      <ItemLayout\n        startMedia={state.media}\n        header={state.header}\n        headerMedia={state.headerMedia}\n        contentWrapper={state.contentWrapper}\n        contentMedia={state.contentMedia}\n        endMedia={state.endMedia}\n      >\n        {state.root.children}\n      </ItemLayout>\n    </state.root>\n  );\n};\n"],"names":["ItemLayout","assertSlots","renderListItem_unstable","state","root","startMedia","media","header","headerMedia","contentWrapper","contentMedia","endMedia","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;YACCK,YAAYF,MAAMG,KAAK;YACvBC,QAAQJ,MAAMI,MAAM;YACpBC,aAAaL,MAAMK,WAAW;YAC9BC,gBAAgBN,MAAMM,cAAc;YACpCC,cAAcP,MAAMO,YAAY;YAChCC,UAAUR,MAAMQ,QAAQ;sBAEvBR,MAAMC,IAAI,CAACQ,QAAQ;;;AAI5B,EAAE"}