@fluentui/react-migration-v0-v9 9.6.34 → 9.6.35

package/lib/components/ItemLayout/ItemLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","useItemLayoutStyles","root","mc9l5x","Budl1dq","sshi5w","contentMedia","qb2dma","Br312pm","Bw0ie65","Ijaq50","nk6f5a","Be2twd7","Bg96gwp","contentWrapper","t21cq0","header","headerMedia","startMedia","endMedia","d"],"sources":["ItemLayout.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@fluentui/react-components';\nexport const useItemLayoutStyles = makeStyles({\n    root: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr auto auto',\n        minHeight: '48px'\n    },\n    contentMedia: {\n        alignSelf: 'start',\n        gridColumnStart: 3,\n        gridColumnEnd: 4,\n        gridRowStart: 2,\n        gridRowEnd: 3,\n        fontSize: '12px',\n        lineHeight: 1.3333\n    },\n    contentWrapper: {\n        alignSelf: 'start',\n        gridColumnStart: 2,\n        gridColumnEnd: 3,\n        gridRowStart: 2,\n        gridRowEnd: 3,\n        marginRight: '8px',\n        fontSize: '12px',\n        lineHeight: 1.3333\n    },\n    header: {\n        alignSelf: 'end',\n        gridColumnStart: 2,\n        gridColumnEnd: 3,\n        gridRowStart: 1,\n        gridRowEnd: 2,\n        fontSize: '14px',\n        marginRight: '8px'\n    },\n    headerMedia: {\n        alignSelf: 'end',\n        gridColumnStart: 3,\n        gridColumnEnd: 4,\n        gridRowStart: 1,\n        gridRowEnd: 2,\n        fontSize: '12px',\n        lineHeight: 1.3333\n    },\n    startMedia: {\n        alignSelf: 'center',\n        gridColumnStart: 1,\n        gridColumnEnd: 2,\n        gridRowStart: 1,\n        gridRowEnd: 3,\n        marginRight: '8px'\n    },\n    endMedia: {\n        alignSelf: 'center',\n        gridColumnStart: 4,\n        gridColumnEnd: 5,\n        gridRowStart: 1,\n        gridRowEnd: 3\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,mBAAmB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,cAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAI,MAAA;IAAAH,OAAA;IAAAC,OAAA;EAAA;EAAAG,MAAA;IAAAT,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAG,MAAA;EAAA;EAAAE,WAAA;IAAAV,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAK,UAAA;IAAAX,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAI,MAAA;EAAA;EAAAI,QAAA;IAAAZ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAS,CAAA;AAAA,CA0DlC,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","useItemLayoutStyles","root","mc9l5x","Budl1dq","sshi5w","contentMedia","qb2dma","Br312pm","Bw0ie65","Ijaq50","nk6f5a","Be2twd7","Bg96gwp","contentWrapper","t21cq0","header","headerMedia","startMedia","endMedia","d"],"sources":["ItemLayout.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from \"@fluentui/react-components\";\nexport const useItemLayoutStyles = makeStyles({\n    root: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr auto auto',\n        minHeight: '48px'\n    },\n    contentMedia: {\n        alignSelf: 'start',\n        gridColumnStart: 3,\n        gridColumnEnd: 4,\n        gridRowStart: 2,\n        gridRowEnd: 3,\n        fontSize: '12px',\n        lineHeight: 1.3333\n    },\n    contentWrapper: {\n        alignSelf: 'start',\n        gridColumnStart: 2,\n        gridColumnEnd: 3,\n        gridRowStart: 2,\n        gridRowEnd: 3,\n        marginRight: '8px',\n        fontSize: '12px',\n        lineHeight: 1.3333\n    },\n    header: {\n        alignSelf: 'end',\n        gridColumnStart: 2,\n        gridColumnEnd: 3,\n        gridRowStart: 1,\n        gridRowEnd: 2,\n        fontSize: '14px',\n        marginRight: '8px'\n    },\n    headerMedia: {\n        alignSelf: 'end',\n        gridColumnStart: 3,\n        gridColumnEnd: 4,\n        gridRowStart: 1,\n        gridRowEnd: 2,\n        fontSize: '12px',\n        lineHeight: 1.3333\n    },\n    startMedia: {\n        alignSelf: 'center',\n        gridColumnStart: 1,\n        gridColumnEnd: 2,\n        gridRowStart: 1,\n        gridRowEnd: 3,\n        marginRight: '8px'\n    },\n    endMedia: {\n        alignSelf: 'center',\n        gridColumnStart: 4,\n        gridColumnEnd: 5,\n        gridRowStart: 1,\n        gridRowEnd: 3\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,mBAAmB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,cAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAI,MAAA;IAAAH,OAAA;IAAAC,OAAA;EAAA;EAAAG,MAAA;IAAAT,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAG,MAAA;EAAA;EAAAE,WAAA;IAAAV,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAK,UAAA;IAAAX,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAI,MAAA;EAAA;EAAAI,QAAA;IAAAZ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAS,CAAA;AAAA,CA0DlC,CAAC","ignoreList":[]}

package/lib/components/ItemLayout/ItemLayout.styles.raw.js

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles } from '@fluentui/react-components';
+import { makeStyles } from "@fluentui/react-components";
 export const useItemLayoutStyles = makeStyles({
     root: {
         display: 'grid',

package/lib/components/ItemLayout/index.js

@@ -1,2 +1,2 @@
-export { ItemLayout, itemLayoutClassName } from './ItemLayout';
-export { useItemLayoutStyles } from './ItemLayout.styles';
+export { ItemLayout, itemLayoutClassName } from "./ItemLayout.js";
+export { useItemLayoutStyles } from "./ItemLayout.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ItemLayout/index.tsx"],"sourcesContent":["export { ItemLayout, itemLayoutClassName } from './ItemLayout';\nexport { useItemLayoutStyles } from './ItemLayout.styles';\n"],"names":["ItemLayout","itemLayoutClassName","useItemLayoutStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,mBAAmB,QAAQ,eAAe;AAC/D,SAASC,mBAAmB,QAAQ,sBAAsB"}
+{"version":3,"sources":["../src/components/ItemLayout/index.tsx"],"sourcesContent":["export { ItemLayout, itemLayoutClassName } from './ItemLayout';\nexport { useItemLayoutStyles } from './ItemLayout.styles';\n"],"names":["ItemLayout","itemLayoutClassName","useItemLayoutStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,mBAAmB,QAAQ,kBAAe;AAC/D,SAASC,mBAAmB,QAAQ,yBAAsB"}

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

@@ -1,10 +1,10 @@
 'use client';
-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';
+import * as React from "react";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
+import { useList_unstable } from "./useList.js";
+import { renderList_unstable } from "./renderList.js";
+import { useListStyles_unstable } from "./useListStyles.styles.js";
+import { useListContextValues_unstable } from "./useListContextValues.js";
 export const List = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useList_unstable(props, ref);
     const contextValues = useListContextValues_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/List/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,eAAY;AAC7C,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,sBAAsB,QAAQ,4BAAyB;AAEhE,SAASC,6BAA6B,QAAQ,4BAAyB;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/index.js

@@ -1,4 +1,4 @@
-export { List } from './List';
-export { renderList_unstable } from './renderList';
-export { useList_unstable } from './useList';
-export { listClassNames, useListStyles_unstable } from './useListStyles.styles';
+export { List } from "./List.js";
+export { renderList_unstable } from "./renderList.js";
+export { useList_unstable } from "./useList.js";
+export { listClassNames, useListStyles_unstable } from "./useListStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type { ListContextValue, ListContextValues, ListProps, ListSlots, ListState } from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/components/List/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type { ListContextValue, ListContextValues, ListProps, ListSlots, ListState } from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,YAAS;AAE9B,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,gBAAgB,QAAQ,eAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,4BAAyB"}

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

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from "@fluentui/react-context-selector";
 export const listContextDefaultValue = {
     navigable: false,
     selection: undefined,

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

@@ -1,6 +1,6 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
-import { ListContextProvider } from './listContext';
+import { assertSlots } from "@fluentui/react-utilities";
+import { ListContextProvider } from "./listContext.js";
 /**
  * Render the final JSX of List
  */ export const renderList_unstable = (state, contextValues)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAGxD,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/List/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAGxD,SAASC,mBAAmB,QAAQ,mBAAgB;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

@@ -1,7 +1,7 @@
 'use client';
-import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { useListSelection } from '../hooks/useListSelection';
+import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from "@fluentui/react-utilities";
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { useListSelection } from "../hooks/useListSelection.js";
 const DEFAULT_ROOT_EL_TYPE = 'ul';
 /**
  * Create the state required to render List.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnSelectionChangeData } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { 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":["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;AAIA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACnH,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"}
+{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnSelectionChangeData } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { 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":["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;AAIA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACnH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,gBAAgB,QAAQ,+BAA4B;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/useListStyles.styles.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
+import { __styles, __resetStyles, mergeClasses } from "@griffel/react";
 export const listClassNames = {
   root: 'fui-List'
 };

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

@@ -1 +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":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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;EACD;EACAJ,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","ignoreList":[]}
+{"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":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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;EACD;EACAJ,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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, makeResetStyles, mergeClasses } from "@griffel/react";
 export const listClassNames = {
     root: 'fui-List'
 };

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

@@ -1,9 +1,9 @@
 'use client';
-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';
+import * as React from "react";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
+import { useListItem_unstable } from "./useListItem.js";
+import { renderListItem_unstable } from "./renderListItem.js";
+import { useListItemStyles_unstable } from "./useListItemStyles.styles.js";
 export const ListItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useListItem_unstable(props, ref);
     useListItemStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/List/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,gCAA6B;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/index.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/List/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AAEtC,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,gCAA6B"}

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

@@ -1,6 +1,6 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { ItemLayout } from '../../ItemLayout';
-import { assertSlots } from '@fluentui/react-utilities';
+import { ItemLayout } from "../../ItemLayout/index.js";
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of ListItem
  */ export const renderListItem_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { ItemLayout } from '../../ItemLayout';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAGxD;;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"}
+{"version":3,"sources":["../src/components/List/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { ItemLayout } from '../../ItemLayout';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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,4BAAmB;AAC9C,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;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"}

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

@@ -1,7 +1,7 @@
 'use client';
-import { useARIAButtonProps } from '@fluentui/react-aria';
-import { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';
-import { useListContext_unstable } from '../List/listContext';
+import { useARIAButtonProps } from "@fluentui/react-aria";
+import { getIntrinsicElementProps, slot, useEventCallback, useId } from "@fluentui/react-utilities";
+import { useListContext_unstable } from "../List/listContext.js";
 const DEFAULT_ROOT_EL_TYPE = 'li';
 function validateProperElementTypes(parentRenderedAs, renderedAs) {
     if (process.env.NODE_ENV === 'production') {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type * 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  // avoid passing empty onClick to prevent items unnecessary being narrated as clickable\n  // see https://github.com/microsoft/fluentui/issues/20658\n  const passClickHandler = !!onClick || isSelectionEnabled;\n\n  const clickHandlerProps = {\n    onClick: passClickHandler ? handleClick : undefined,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  };\n\n  // This will give us the onKeyDown and onKeyUp props for Enter and Space\n  const ariaButtonProps = useARIAButtonProps('div', clickHandlerProps);\n\n  // v0 ListItem adds keyboard handling only for navigable or selectable items\n  const buttonProps = navigable || isSelectionEnabled ? ariaButtonProps : clickHandlerProps;\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","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","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"mappings":"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"}
+{"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type * 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  // avoid passing empty onClick to prevent items unnecessary being narrated as clickable\n  // see https://github.com/microsoft/fluentui/issues/20658\n  const passClickHandler = !!onClick || isSelectionEnabled;\n\n  const clickHandlerProps = {\n    onClick: passClickHandler ? handleClick : undefined,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  };\n\n  // This will give us the onKeyDown and onKeyUp props for Enter and Space\n  const ariaButtonProps = useARIAButtonProps('div', clickHandlerProps);\n\n  // v0 ListItem adds keyboard handling only for navigable or selectable items\n  const buttonProps = navigable || isSelectionEnabled ? ariaButtonProps : clickHandlerProps;\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","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","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","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

@@ -1,8 +1,8 @@
 'use client';
 
-import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { __styles, __resetStyles, mergeClasses } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
 export const listItemClassNames = {
   root: 'fui-ListItem',
   media: 'fui-ListItem__media',

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    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    padding: '0 10px',\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});\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        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    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,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,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B;EACAmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjB;IACAP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzB;IACAT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    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    padding: '0 10px',\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});\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        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    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,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,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B;EACAmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjB;IACAP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzB;IACAT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, makeResetStyles, mergeClasses } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
 export const listItemClassNames = {
     root: 'fui-ListItem',
     media: 'fui-ListItem__media',

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

@@ -1 +1 @@
-export { useListSelection } from './useListSelection';
+export { useListSelection } from "./useListSelection.js";

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

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

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

@@ -1,6 +1,6 @@
 'use client';
-import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
-import * as React from 'react';
+import { useControllableState, useEventCallback, useSelection } from "@fluentui/react-utilities";
+import * as React from "react";
 export function useListSelection(options = {
     selectionMode: 'multiselect'
 }) {

package/lib/components/List/index.js

@@ -1,3 +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';
+export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from "./List/index.js";
+export { ListItem, listItemClassNames, renderListItem_unstable, useListItemStyles_unstable, useListItem_unstable } from "./ListItem/index.js";
+export { useListSelection } from "./hooks/index.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/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"}
+{"version":3,"sources":["../src/components/List/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,kBAAS;AAG7G,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,sBAAa;AAGpB,SAASC,gBAAgB,QAAQ,mBAAU"}

package/lib/components/Primitive/Primitive.js

@@ -1,6 +1,6 @@
 'use client';
-import * as React from 'react';
-import { mergeClasses } from '@fluentui/react-components';
+import * as React from "react";
+import { mergeClasses } from "@fluentui/react-components";
 export const primitiveClassName = 'fui-Primitive';
 export const Primitive = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { as: Component = 'div', ...rest } = props;

package/lib/components/Primitive/index.js

@@ -1 +1 @@
-export { Primitive, primitiveClassName } from './Primitive';
+export { Primitive, primitiveClassName } from "./Primitive.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Primitive/index.tsx"],"sourcesContent":["export { Primitive, primitiveClassName } from './Primitive';\n"],"names":["Primitive","primitiveClassName"],"mappings":"AAAA,SAASA,SAAS,EAAEC,kBAAkB,QAAQ,cAAc"}
+{"version":3,"sources":["../src/components/Primitive/index.tsx"],"sourcesContent":["export { Primitive, primitiveClassName } from './Primitive';\n"],"names":["Primitive","primitiveClassName"],"mappings":"AAAA,SAASA,SAAS,EAAEC,kBAAkB,QAAQ,iBAAc"}

package/lib/components/Segment/Segment.js

@@ -1,7 +1,7 @@
 'use client';
-import { mergeClasses } from '@fluentui/react-components';
-import * as React from 'react';
-import { useSegmentStyles } from './Segment.styles';
+import { mergeClasses } from "@fluentui/react-components";
+import * as React from "react";
+import { useSegmentStyles } from "./Segment.styles.js";
 export const segmentClassName = 'fui-Segment';
 export const Segment = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { children, className, ...rest } = props;

package/lib/components/Segment/Segment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Segment/Segment.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useSegmentStyles } from './Segment.styles';\n\nexport const segmentClassName = 'fui-Segment';\n\nexport const Segment = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>((props, ref) => {\n  const { children, className, ...rest } = props;\n  const classes = useSegmentStyles();\n\n  const segmentClasses = mergeClasses(segmentClassName, classes.segment, className);\n\n  return (\n    <div ref={ref} className={segmentClasses} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nSegment.displayName = 'Segment';\n"],"names":["mergeClasses","React","useSegmentStyles","segmentClassName","Segment","forwardRef","props","ref","children","className","rest","classes","segmentClasses","segment","div","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,OAAO,MAAMC,mBAAmB,cAAc;AAE9C,OAAO,MAAMC,wBAAUH,MAAMI,UAAU,CAAoD,CAACC,OAAOC;IACjG,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,MAAMU,iBAAiBZ,aAAaG,kBAAkBQ,QAAQE,OAAO,EAAEJ;IAEvE,qBACE,oBAACK;QAAIP,KAAKA;QAAKE,WAAWG;QAAiB,GAAGF,IAAI;OAC/CF;AAGP,GAAG;AAEHJ,QAAQW,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Segment/Segment.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useSegmentStyles } from './Segment.styles';\n\nexport const segmentClassName = 'fui-Segment';\n\nexport const Segment = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>((props, ref) => {\n  const { children, className, ...rest } = props;\n  const classes = useSegmentStyles();\n\n  const segmentClasses = mergeClasses(segmentClassName, classes.segment, className);\n\n  return (\n    <div ref={ref} className={segmentClasses} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nSegment.displayName = 'Segment';\n"],"names":["mergeClasses","React","useSegmentStyles","segmentClassName","Segment","forwardRef","props","ref","children","className","rest","classes","segmentClasses","segment","div","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,sBAAmB;AAEpD,OAAO,MAAMC,mBAAmB,cAAc;AAE9C,OAAO,MAAMC,wBAAUH,MAAMI,UAAU,CAAoD,CAACC,OAAOC;IACjG,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,MAAMU,iBAAiBZ,aAAaG,kBAAkBQ,QAAQE,OAAO,EAAEJ;IAEvE,qBACE,oBAACK;QAAIP,KAAKA;QAAKE,WAAWG;QAAiB,GAAGF,IAAI;OAC/CF;AAGP,GAAG;AAEHJ,QAAQW,WAAW,GAAG"}

package/lib/components/Segment/Segment.styles.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { __styles, shorthands, tokens } from '@fluentui/react-components';
+import { __styles, shorthands, tokens } from "@fluentui/react-components";
 export const useSegmentStyles = /*#__PURE__*/__styles({
   segment: {
     Byoj8tv: 0,

package/lib/components/Segment/Segment.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","shorthands","tokens","useSegmentStyles","segment","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","g2u3we","h3c5rm","B9xav0g","zhjwy3","icvyot","vrafjx","oivjwe","wvpqe5","De3pzq","E5pizo","d","p"],"sources":["Segment.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nexport const useSegmentStyles = makeStyles({\n    segment: {\n        padding: '1em',\n        ...shorthands.borderWidth('2px', 0, 0),\n        ...shorthands.borderColor('transparent'),\n        ...shorthands.borderStyle('solid'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: `0 1px 1px 1px ${tokens.colorNeutralShadowKey}`\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,UAAU,EAAEC,MAAM,QAAQ,4BAA4B;AAC3E,OAAO,MAAMC,gBAAgB,gBAAGH,QAAA;EAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAS/B,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","shorthands","tokens","useSegmentStyles","segment","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","g2u3we","h3c5rm","B9xav0g","zhjwy3","icvyot","vrafjx","oivjwe","wvpqe5","De3pzq","E5pizo","d","p"],"sources":["Segment.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, shorthands, tokens } from \"@fluentui/react-components\";\nexport const useSegmentStyles = makeStyles({\n    segment: {\n        padding: '1em',\n        ...shorthands.borderWidth('2px', 0, 0),\n        ...shorthands.borderColor('transparent'),\n        ...shorthands.borderStyle('solid'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: `0 1px 1px 1px ${tokens.colorNeutralShadowKey}`\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,UAAU,EAAEC,MAAM,QAAQ,4BAA4B;AAC3E,OAAO,MAAMC,gBAAgB,gBAAGH,QAAA;EAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAS/B,CAAC","ignoreList":[]}

package/lib/components/Segment/Segment.styles.raw.js

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 export const useSegmentStyles = makeStyles({
     segment: {
         padding: '1em',

package/lib/components/Segment/index.js

@@ -1 +1 @@
-export { Segment, segmentClassName } from './Segment';
+export { Segment, segmentClassName } from "./Segment.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Segment/index.ts"],"sourcesContent":["export { Segment, segmentClassName } from './Segment';\n"],"names":["Segment","segmentClassName"],"mappings":"AAAA,SAASA,OAAO,EAAEC,gBAAgB,QAAQ,YAAY"}
+{"version":3,"sources":["../src/components/Segment/index.ts"],"sourcesContent":["export { Segment, segmentClassName } from './Segment';\n"],"names":["Segment","segmentClassName"],"mappings":"AAAA,SAASA,OAAO,EAAEC,gBAAgB,QAAQ,eAAY"}

package/lib/components/Slider/index.js

@@ -1 +1 @@
-export { slider } from './Slider.mixins';
+export { slider } from "./Slider.mixins.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { slider } from './Slider.mixins';\n"],"names":["slider"],"mappings":"AAAA,SAASA,MAAM,QAAQ,kBAAkB"}
+{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { slider } from './Slider.mixins';\n"],"names":["slider"],"mappings":"AAAA,SAASA,MAAM,QAAQ,qBAAkB"}

package/lib/components/Spinner/SpinnerMigration.mixins.js

@@ -1,4 +1,4 @@
-import { tokens, labelClassNames } from '@fluentui/react-components';
+import { tokens, labelClassNames } from "@fluentui/react-components";
 const v0Inline = ()=>({
         display: 'inline-flex'
     });

package/lib/components/Spinner/index.js

@@ -1 +1 @@
-export { spinner } from './SpinnerMigration.mixins';
+export { spinner } from "./SpinnerMigration.mixins.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.tsx"],"sourcesContent":["export { spinner } from './SpinnerMigration.mixins';\n"],"names":["spinner"],"mappings":"AAAA,SAASA,OAAO,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Spinner/index.tsx"],"sourcesContent":["export { spinner } from './SpinnerMigration.mixins';\n"],"names":["spinner"],"mappings":"AAAA,SAASA,OAAO,QAAQ,+BAA4B"}

package/lib/components/StyledText/StyledText.js

@@ -1,8 +1,8 @@
   'use client';
 import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import * as React from 'react';
-import { getIntrinsicElementProps, mergeClasses, slot } from '@fluentui/react-components';
-import { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';
+import * as React from "react";
+import { getIntrinsicElementProps, mergeClasses, slot } from "@fluentui/react-components";
+import { useSizeStyles, useStyles, useWeightStyles } from "./StyledText.styles.js";
 export const styledTextClassName = 'fui-StyledText';
 const sizeMap = {
     '100': 'base100',

package/lib/components/StyledText/StyledText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport * as React from 'react';\nimport type { Slot, ComponentProps } from '@fluentui/react-components';\nimport { getIntrinsicElementProps, mergeClasses, slot } from '@fluentui/react-components';\nimport { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';\n\nexport type StyledTextSlots = {\n  root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'time'>;\n};\n\nexport type StyledTextProps = ComponentProps<StyledTextSlots> & {\n  /**\n   * Aligns text based on the parent container.\n   */\n  align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * At mentions can be formatted to draw users' attention.\n   * Mentions for \"me\" can be formatted to appear differently.\n   */\n  atMention?: 'me' | boolean;\n\n  /**\n   * Set as disabled StyledText component\n   */\n  disabled?: boolean;\n\n  /**\n   * Set as error StyledText component\n   */\n  error?: boolean;\n\n  /**\n   * The StyledText can appear more important and draw user's attention\n   */\n  important?: boolean;\n\n  /**\n   * Applies font size and line height based on the theme tokens.\n   */\n  size?:\n    | 'smaller'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'large500'\n    | 'larger'\n    | 'largest'\n    | 100\n    | 200\n    | 300\n    | 400\n    | 500\n    | 600\n    | 700;\n\n  /**\n   * Set as success StyledText component\n   */\n  success?: boolean;\n\n  /**\n   * The text can signify a temporary state\n   */\n  temporary?: boolean;\n\n  /**\n   * Set as timestamp StyledText component\n   */\n  timestamp?: boolean;\n\n  /**\n   * Truncate overflowing text for block displays.\n   */\n  truncate?: boolean;\n\n  /**\n   * Applies font weight to the content.\n   */\n  weight?: 'light' | 'semilight' | 'regular' | 'medium' | 'semibold' | 'bold';\n\n  /**\n   * Wraps the text content on white spaces.\n   *\n   * @default true\n   */\n  wrap?: boolean;\n};\n\nexport const styledTextClassName = 'fui-StyledText';\n\nconst sizeMap: Record<string, 'base100' | 'base200' | 'base300' | 'base400' | 'base500' | 'base600' | 'hero700'> = {\n  '100': 'base100',\n  '200': 'base200',\n  '300': 'base300',\n  '400': 'base400',\n  '500': 'base500',\n  '600': 'base600',\n  '700': 'hero700',\n  smaller: 'base100',\n  small: 'base200',\n  medium: 'base300',\n  large: 'base400',\n  large500: 'base500',\n  larger: 'base600',\n  largest: 'hero700',\n};\n\nexport const StyledText = React.forwardRef<HTMLSpanElement, StyledTextProps>((props, ref) => {\n  const {\n    align,\n    atMention,\n    disabled,\n    error,\n    important,\n    success,\n    temporary,\n    timestamp,\n    truncate,\n    weight,\n    wrap = true,\n  } = props;\n\n  const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n  const sizeStyles = useSizeStyles();\n  const weightStyles = useWeightStyles();\n  const styles = useStyles();\n\n  const size = props.size ? sizeMap[props.size] : props.size;\n\n  const RootSlot = slot.always(\n    getIntrinsicElementProps('span', {\n      ref,\n      ...props,\n      dir,\n      className: mergeClasses(\n        styledTextClassName,\n        size && sizeStyles[size],\n        weight && weightStyles[weight],\n        wrap === false && styles.nowrap,\n        truncate && styles.truncate,\n        align === 'center' && styles.alignCenter,\n        align === 'end' && styles.alignEnd,\n        align === 'justify' && styles.alignJustify,\n\n        atMention && styles.mention,\n        atMention === 'me' && styles.mentionMe,\n        disabled && styles.disabled,\n        error && styles.error,\n        important && styles.important,\n        success && styles.success,\n        temporary && styles.temporary,\n        timestamp && styles.timestamp,\n        props.className,\n      ),\n    }),\n    { elementType: 'span' },\n  );\n\n  return <RootSlot />;\n});\n\nStyledText.displayName = 'StyledText';\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useSizeStyles","useStyles","useWeightStyles","styledTextClassName","sizeMap","smaller","small","medium","large","large500","larger","largest","StyledText","forwardRef","props","ref","align","atMention","disabled","error","important","success","temporary","timestamp","truncate","weight","wrap","dir","children","undefined","sizeStyles","weightStyles","styles","size","RootSlot","always","className","nowrap","alignCenter","alignEnd","alignJustify","mention","mentionMe","elementType","displayName"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC1F,SAASC,aAAa,EAAEC,SAAS,EAAEC,eAAe,QAAQ,sBAAsB;AAqFhF,OAAO,MAAMC,sBAAsB,iBAAiB;AAEpD,MAAMC,UAA6G;IACjH,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACPC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,UAAU;IACVC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,2BAAahB,MAAMiB,UAAU,CAAmC,CAACC,OAAOC;IACnF,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,OAAO,IAAI,EACZ,GAAGZ;IAEJ,MAAMa,MAAM,OAAOb,MAAMc,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,aAAa9B;IACnB,MAAM+B,eAAe7B;IACrB,MAAM8B,SAAS/B;IAEf,MAAMgC,OAAOnB,MAAMmB,IAAI,GAAG7B,OAAO,CAACU,MAAMmB,IAAI,CAAC,GAAGnB,MAAMmB,IAAI;IAE1D,MAAMC,WAAWnC,KAAKoC,MAAM,CAC1BtC,yBAAyB,QAAQ;QAC/BkB;QACA,GAAGD,KAAK;QACRa;QACAS,WAAWtC,aACTK,qBACA8B,QAAQH,UAAU,CAACG,KAAK,EACxBR,UAAUM,YAAY,CAACN,OAAO,EAC9BC,SAAS,SAASM,OAAOK,MAAM,EAC/Bb,YAAYQ,OAAOR,QAAQ,EAC3BR,UAAU,YAAYgB,OAAOM,WAAW,EACxCtB,UAAU,SAASgB,OAAOO,QAAQ,EAClCvB,UAAU,aAAagB,OAAOQ,YAAY,EAE1CvB,aAAae,OAAOS,OAAO,EAC3BxB,cAAc,QAAQe,OAAOU,SAAS,EACtCxB,YAAYc,OAAOd,QAAQ,EAC3BC,SAASa,OAAOb,KAAK,EACrBC,aAAaY,OAAOZ,SAAS,EAC7BC,WAAWW,OAAOX,OAAO,EACzBC,aAAaU,OAAOV,SAAS,EAC7BC,aAAaS,OAAOT,SAAS,EAC7BT,MAAMsB,SAAS;IAEnB,IACA;QAAEO,aAAa;IAAO;IAGxB,qBAAO,KAACT;AACV,GAAG;AAEHtB,WAAWgC,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport * as React from 'react';\nimport type { Slot, ComponentProps } from '@fluentui/react-components';\nimport { getIntrinsicElementProps, mergeClasses, slot } from '@fluentui/react-components';\nimport { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';\n\nexport type StyledTextSlots = {\n  root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'time'>;\n};\n\nexport type StyledTextProps = ComponentProps<StyledTextSlots> & {\n  /**\n   * Aligns text based on the parent container.\n   */\n  align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * At mentions can be formatted to draw users' attention.\n   * Mentions for \"me\" can be formatted to appear differently.\n   */\n  atMention?: 'me' | boolean;\n\n  /**\n   * Set as disabled StyledText component\n   */\n  disabled?: boolean;\n\n  /**\n   * Set as error StyledText component\n   */\n  error?: boolean;\n\n  /**\n   * The StyledText can appear more important and draw user's attention\n   */\n  important?: boolean;\n\n  /**\n   * Applies font size and line height based on the theme tokens.\n   */\n  size?:\n    | 'smaller'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'large500'\n    | 'larger'\n    | 'largest'\n    | 100\n    | 200\n    | 300\n    | 400\n    | 500\n    | 600\n    | 700;\n\n  /**\n   * Set as success StyledText component\n   */\n  success?: boolean;\n\n  /**\n   * The text can signify a temporary state\n   */\n  temporary?: boolean;\n\n  /**\n   * Set as timestamp StyledText component\n   */\n  timestamp?: boolean;\n\n  /**\n   * Truncate overflowing text for block displays.\n   */\n  truncate?: boolean;\n\n  /**\n   * Applies font weight to the content.\n   */\n  weight?: 'light' | 'semilight' | 'regular' | 'medium' | 'semibold' | 'bold';\n\n  /**\n   * Wraps the text content on white spaces.\n   *\n   * @default true\n   */\n  wrap?: boolean;\n};\n\nexport const styledTextClassName = 'fui-StyledText';\n\nconst sizeMap: Record<string, 'base100' | 'base200' | 'base300' | 'base400' | 'base500' | 'base600' | 'hero700'> = {\n  '100': 'base100',\n  '200': 'base200',\n  '300': 'base300',\n  '400': 'base400',\n  '500': 'base500',\n  '600': 'base600',\n  '700': 'hero700',\n  smaller: 'base100',\n  small: 'base200',\n  medium: 'base300',\n  large: 'base400',\n  large500: 'base500',\n  larger: 'base600',\n  largest: 'hero700',\n};\n\nexport const StyledText = React.forwardRef<HTMLSpanElement, StyledTextProps>((props, ref) => {\n  const {\n    align,\n    atMention,\n    disabled,\n    error,\n    important,\n    success,\n    temporary,\n    timestamp,\n    truncate,\n    weight,\n    wrap = true,\n  } = props;\n\n  const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n  const sizeStyles = useSizeStyles();\n  const weightStyles = useWeightStyles();\n  const styles = useStyles();\n\n  const size = props.size ? sizeMap[props.size] : props.size;\n\n  const RootSlot = slot.always(\n    getIntrinsicElementProps('span', {\n      ref,\n      ...props,\n      dir,\n      className: mergeClasses(\n        styledTextClassName,\n        size && sizeStyles[size],\n        weight && weightStyles[weight],\n        wrap === false && styles.nowrap,\n        truncate && styles.truncate,\n        align === 'center' && styles.alignCenter,\n        align === 'end' && styles.alignEnd,\n        align === 'justify' && styles.alignJustify,\n\n        atMention && styles.mention,\n        atMention === 'me' && styles.mentionMe,\n        disabled && styles.disabled,\n        error && styles.error,\n        important && styles.important,\n        success && styles.success,\n        temporary && styles.temporary,\n        timestamp && styles.timestamp,\n        props.className,\n      ),\n    }),\n    { elementType: 'span' },\n  );\n\n  return <RootSlot />;\n});\n\nStyledText.displayName = 'StyledText';\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useSizeStyles","useStyles","useWeightStyles","styledTextClassName","sizeMap","smaller","small","medium","large","large500","larger","largest","StyledText","forwardRef","props","ref","align","atMention","disabled","error","important","success","temporary","timestamp","truncate","weight","wrap","dir","children","undefined","sizeStyles","weightStyles","styles","size","RootSlot","always","className","nowrap","alignCenter","alignEnd","alignJustify","mention","mentionMe","elementType","displayName"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC1F,SAASC,aAAa,EAAEC,SAAS,EAAEC,eAAe,QAAQ,yBAAsB;AAqFhF,OAAO,MAAMC,sBAAsB,iBAAiB;AAEpD,MAAMC,UAA6G;IACjH,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACPC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,UAAU;IACVC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,2BAAahB,MAAMiB,UAAU,CAAmC,CAACC,OAAOC;IACnF,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,OAAO,IAAI,EACZ,GAAGZ;IAEJ,MAAMa,MAAM,OAAOb,MAAMc,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,aAAa9B;IACnB,MAAM+B,eAAe7B;IACrB,MAAM8B,SAAS/B;IAEf,MAAMgC,OAAOnB,MAAMmB,IAAI,GAAG7B,OAAO,CAACU,MAAMmB,IAAI,CAAC,GAAGnB,MAAMmB,IAAI;IAE1D,MAAMC,WAAWnC,KAAKoC,MAAM,CAC1BtC,yBAAyB,QAAQ;QAC/BkB;QACA,GAAGD,KAAK;QACRa;QACAS,WAAWtC,aACTK,qBACA8B,QAAQH,UAAU,CAACG,KAAK,EACxBR,UAAUM,YAAY,CAACN,OAAO,EAC9BC,SAAS,SAASM,OAAOK,MAAM,EAC/Bb,YAAYQ,OAAOR,QAAQ,EAC3BR,UAAU,YAAYgB,OAAOM,WAAW,EACxCtB,UAAU,SAASgB,OAAOO,QAAQ,EAClCvB,UAAU,aAAagB,OAAOQ,YAAY,EAE1CvB,aAAae,OAAOS,OAAO,EAC3BxB,cAAc,QAAQe,OAAOU,SAAS,EACtCxB,YAAYc,OAAOd,QAAQ,EAC3BC,SAASa,OAAOb,KAAK,EACrBC,aAAaY,OAAOZ,SAAS,EAC7BC,WAAWW,OAAOX,OAAO,EACzBC,aAAaU,OAAOV,SAAS,EAC7BC,aAAaS,OAAOT,SAAS,EAC7BT,MAAMsB,SAAS;IAEnB,IACA;QAAEO,aAAa;IAAO;IAGxB,qBAAO,KAACT;AACV,GAAG;AAEHtB,WAAWgC,WAAW,GAAG"}