npm - @fluentui/react-migration-v0-v9 - Versions diffs - 9.6.6 → 9.6.8 - Mend

@fluentui/react-migration-v0-v9 9.6.6 → 9.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/lib-commonjs/components/List/ListItem/useListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["~~import~~ { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useListContext_unstable } from '../List/listContext';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\nfunction validateProperElementTypes(parentRenderedAs?: 'div' \| 'ul' \| 'ol', renderedAs?: 'div' \| 'li') {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (renderedAs === 'div' && parentRenderedAs !== 'div') {\n throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n }\n if (renderedAs === 'li' && parentRenderedAs === 'div') {\n throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n }\n}\n\nfunction validateNavigableWhenOnClickPresent(navigable: boolean, onClick?: React.MouseEventHandler) {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (onClick && !navigable) {\n throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');\n }\n}\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;\n\n const navigable = useListContext_unstable(ctx => ctx.navigable);\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n\n const truncateHeaderOnList = useListContext_unstable(ctx => ctx.truncateHeader);\n const truncateContentOnList = useListContext_unstable(ctx => ctx.truncateContent);\n\n const parentRenderedAs = useListContext_unstable(ctx => ctx.as);\n const renderedAs = props.as \|\| DEFAULT_ROOT_EL_TYPE;\n\n validateProperElementTypes(parentRenderedAs, renderedAs);\n\n validateNavigableWhenOnClickPresent(navigable, onClick);\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (!isSelectionEnabled \|\| e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n // 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","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"mappings":"~~;;;;+BAwCakB~~;;;;;;;2BAxCsB,uBAAuB;gCACc,4BAA4B;iEAC7E,QAAQ;6BACS,sBAAsB;AAG9D,MAAMX,uBAAuB;AAE7B,SAASC,2BAA2BC,gBAAsC,EAAEC,UAAyB;IACnG,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC;IACF;IAEA,IAAIH,eAAe,SAASD,qBAAqB,OAAO;QACtD,MAAM,IAAIK,MAAM;IAClB;IACA,IAAIJ,eAAe,QAAQD,qBAAqB,OAAO;QACrD,MAAM,IAAIK,MAAM;IAClB;AACF;AAEA,SAASC,oCAAoCC,SAAkB,EAAEC,OAAiC;IAChG,IAAIN,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC;IACF;IAEA,IAAII,WAAW,CAACD,WAAW;QACzB,MAAM,IAAIF,MAAM;IAClB;AACF;AAWO,6BAA6B,CAClCK,OACAC;IAEA,MAAMC,SAAKjB,qBAAAA,EAAM;IACjB,MAAM,EAAEkB,QAAQD,EAAE,EAAEE,cAAc,EAAEC,eAAe,EAAEP,OAAO,EAAEQ,SAAS,EAAEC,OAAO,EAAE,GAAGP;IAErF,MAAMH,gBAAYV,oCAAAA,EAAwBqB,CAAAA,MAAOA,IAAIX,SAAS;IAC9D,MAAMY,~~aAAatB~~,~~wCAAAA~~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"}
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 * 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","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","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-commonjs/components/List/ListItem/useListItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n 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 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null \|\| _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null \|\| _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"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"],"mappings":"~~;;;;;;;;;;;IAGaK~~,kBAAkB;;;8BAgDY~~;eAA1B2B;;;uBAnDyC~~,gBAAgB;AAGnE,2BAA2B;~~IAC9B1B~~,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,qBAAqB;IAC5BC,MAAM,EAAE,sBAAsB;IAC9BC,cAAc,EAAE,8BAA8B;IAC9CC,WAAW,EAAE,2BAA2B;IACxCC,YAAY,EAAE,4BAA4B;IAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGZ,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF;;CAEA,GAAI,MAAMa,SAAS,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAS,cAAA,EAAA;QAAAM,OAAA,EAAA;IAAA;IAAAC,0BAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,~~oCAAoCE~~,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;IAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1BmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,OAAGlC,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,~~EAAGD~~,~~AAAD~~,~~KAAM~~,~~EAACI~~,UAAU,IAAIJ,KAAK,CAACK,SAAAA,AAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;IACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;QACd,IAAIgC,aAAa;QACjBP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,OAAGlC,mBAAY,EAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAAA,AAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;IAC1L;IACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;QACtB,IAAIiC,qBAAqB;QACzBT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,OAAGlC,mBAAY,EAACiC,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,cAAAA,AAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;IACpT;IACA,OAAOH,KAAK;AAChB,CAAC"}
1	+ {"version":3,"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 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null \|\| _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null \|\| _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BAgDY;;;;uBAnDe,gBAAgB;AAGnE,2BAA2B;IAC9BC,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,qBAAqB;IAC5BC,MAAM,EAAE,sBAAsB;IAC9BC,cAAc,EAAE,8BAA8B;IAC9CC,WAAW,EAAE,2BAA2B;IACxCC,YAAY,EAAE,4BAA4B;IAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGZ,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF;;CAEA,GAAI,MAAMa,SAAS,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAS,cAAA,EAAA;QAAAM,OAAA,EAAA;IAAA;IAAAC,0BAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;IAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1BmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,OAAGlC,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAAA,AAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;IACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;QACd,IAAIgC,aAAa;QACjBP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,OAAGlC,mBAAY,EAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAAA,AAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;IAC1L;IACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;QACtB,IAAIiC,qBAAqB;QACzBT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,OAAGlC,mBAAY,EAACiC,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,cAAAA,AAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;IACpT;IACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/List/ListItem/useListItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/List/ListItem/useListItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\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};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\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\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"~~;;;;;;;;;;;IAMaK~~,kBAAAA;;;~~8BAwDAkC~~;;;;uBA7D6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DjC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,~~oBAAoBZ~~,~~0BAAAA~~,EAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGd,6CAAAA,EACD;QACEe,SAAS,GAAGd,kBAAAA,CAAOe,gBAAgB,CAAC,OAAO,EAAEf,kBAAAA,CAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,kBAAAA,CAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,kBAAAA,CAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,kBAAAA,CAAOkC,4BAA4B;QACtD;IACF;AACF;AAKO,~~MAAMC~~,~~6BAA6B,CAACC~~;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEfgB,MAAMlC,IAAI,CAACqC,SAAS,OAAGzC,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBmC,gBACCD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAAA,AAAQ,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAC+DgC;QAA/EA,MAAMhC,MAAM,CAACmC,SAAS,OAAGzC,mBAAAA,EAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,EAAA,CAAEW,gBAAAA,MAAMhC,MAAAA,AAAM,MAAA,QAAZgC,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAKtB+B;QAJFA,MAAM/B,cAAc,CAACkC,SAAS,OAAGzC,mBAAAA,EAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,EAAA,CACxDa,wBAAAA,MAAM/B,cAAAA,AAAc,MAAA,QAApB+B,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\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};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\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\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,kBAAAA;;;IAwDAkC,0BAAAA;;;;uBA7D6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DjC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,wBAAoBZ,sBAAAA,EAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGd,6CAAAA,EACD;QACEe,SAAS,GAAGd,kBAAAA,CAAOe,gBAAgB,CAAC,OAAO,EAAEf,kBAAAA,CAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,kBAAAA,CAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,kBAAAA,CAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,kBAAAA,CAAOkC,4BAA4B;QACtD;IACF;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEfgB,MAAMlC,IAAI,CAACqC,SAAS,OAAGzC,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBmC,gBACCD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAAA,AAAQ,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAC+DgC;QAA/EA,MAAMhC,MAAM,CAACmC,SAAS,OAAGzC,mBAAAA,EAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,EAAA,CAAEW,gBAAAA,MAAMhC,MAAAA,AAAM,MAAA,QAAZgC,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAKtB+B;QAJFA,MAAM/B,cAAc,CAACkC,SAAS,OAAGzC,mBAAAA,EAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,EAAA,CACxDa,wBAAAA,MAAM/B,cAAAA,AAAc,MAAA,QAApB+B,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}

package/lib-commonjs/components/List/hooks/useListSelection.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/List/hooks/useListSelection.js.map CHANGED Viewed

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

package/lib-commonjs/components/Primitive/Primitive.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Primitive/Primitive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Primitive/Primitive.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport type { JSXIntrinsicElement, JSXIntrinsicElementKeys } from '@fluentui/react-utilities';\n\n// Simplified version from https://github.com/reach/reach-ui/blob/55d28eda39afc4c667e97f5f62a48d1de034b93f/packages/utils/src/polymorphic.ts\ninterface PrimitiveComponent {\n /*\n Infers props from JSX.IntrinsicElements based on \"as\" value. Explicitly avoids `React.ElementType` and manually\n * narrow the prop types so that events are typed when using JSX.IntrinsicElements.\n */\n <As extends JSXIntrinsicElementKeys>(props: { as?: As } & JSXIntrinsicElement<As>): React.ReactElement \| null;\n\n displayName: string;\n}\n\nexport const primitiveClassName = 'fui-Primitive';\n\nexport const Primitive = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & { as: 'div' }>(\n (props, ref) => {\n const { as: Component = 'div', ...rest } = props;\n\n const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n const className = mergeClasses(primitiveClassName, props.className);\n\n return <Component dir={dir} {...rest} className={className} ref={ref} />;\n },\n) as PrimitiveComponent;\n\nPrimitive.displayName = 'Primitive';\n"],"names":["React","mergeClasses","primitiveClassName","Primitive","forwardRef","props","ref","as","Component","rest","dir","children","undefined","className","displayName"],"mappings":"~~;;;;;;;;;;;IAiBaG~~,SAAAA;;;sBAFAD;;;;;iEAfU,QAAQ;iCACF,6BAA6B;AAcnD,MAAMA,qBAAqB,gBAAgB;AAE3C,kBAAMC,WAAAA,GAAYH,OAAMI,UAAU,CACvC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAIC,YAAY,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE3C,MAAMK,MAAM,OAAOL,MAAMM,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,gBAAYZ,6BAAAA,EAAaC,oBAAoBG,MAAMQ,SAAS;IAElE,OAAA,WAAA,GAAO,OAAA,aAAA,CAACL,WAAAA;QAAUE,KAAKA;QAAM,GAAGD,IAAI;QAAEI,WAAWA;QAAWP,KAAKA;;AACnE,GACsB;AAExBH,UAAUW,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Primitive/Primitive.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport type { JSXIntrinsicElement, JSXIntrinsicElementKeys } from '@fluentui/react-utilities';\n\n// Simplified version from https://github.com/reach/reach-ui/blob/55d28eda39afc4c667e97f5f62a48d1de034b93f/packages/utils/src/polymorphic.ts\ninterface PrimitiveComponent {\n /*\n Infers props from JSX.IntrinsicElements based on \"as\" value. Explicitly avoids `React.ElementType` and manually\n * narrow the prop types so that events are typed when using JSX.IntrinsicElements.\n */\n <As extends JSXIntrinsicElementKeys>(props: { as?: As } & JSXIntrinsicElement<As>): React.ReactElement \| null;\n\n displayName: string;\n}\n\nexport const primitiveClassName = 'fui-Primitive';\n\nexport const Primitive = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & { as: 'div' }>(\n (props, ref) => {\n const { as: Component = 'div', ...rest } = props;\n\n const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n const className = mergeClasses(primitiveClassName, props.className);\n\n return <Component dir={dir} {...rest} className={className} ref={ref} />;\n },\n) as PrimitiveComponent;\n\nPrimitive.displayName = 'Primitive';\n"],"names":["React","mergeClasses","primitiveClassName","Primitive","forwardRef","props","ref","as","Component","rest","dir","children","undefined","className","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAmBaG,SAAAA;;;sBAFAD;;;;;iEAfU,QAAQ;iCACF,6BAA6B;AAcnD,MAAMA,qBAAqB,gBAAgB;AAE3C,kBAAMC,WAAAA,GAAYH,OAAMI,UAAU,CACvC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAIC,YAAY,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE3C,MAAMK,MAAM,OAAOL,MAAMM,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,gBAAYZ,6BAAAA,EAAaC,oBAAoBG,MAAMQ,SAAS;IAElE,OAAA,WAAA,GAAO,OAAA,aAAA,CAACL,WAAAA;QAAUE,KAAKA;QAAM,GAAGD,IAAI;QAAEI,WAAWA;QAAWP,KAAKA;;AACnE,GACsB;AAExBH,UAAUW,WAAW,GAAG"}

package/lib-commonjs/components/Segment/Segment.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Segment/Segment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Segment/Segment.tsx"],"sourcesContent":["~~import~~ { 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":"~~;;;;;;;;;;;IAOaI~~,OAAAA;;;oBAFAD;;;;;iCALgB,6BAA6B;iEACnC,QAAQ;+BAEE,mBAAmB;AAE7C,MAAMA,mBAAmB,cAAc;AAEvC,gBAAMC,WAAAA,GAAUH,OAAMI,UAAU,CAAoD,CAACC,OAAOC;IACjG,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,~~cAAUT,+BAAAA~~;IAEhB,MAAMU,qBAAiBZ,6BAAAA,EAAaG,kBAAkBQ,QAAQE,OAAO,EAAEJ;IAEvE,OAAA,WAAA,GACE,OAAA,aAAA,CAACK,OAAAA;QAAIP,KAAKA;QAAKE,WAAWG;QAAiB,GAAGF,IAAI;OAC/CF;AAGP,GAAG;AAEHJ,QAAQW,WAAW,GAAG"}
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;;;;;;;;;;;;IASaI,OAAAA;;;oBAFAD;;;;;iCALgB,6BAA6B;iEACnC,QAAQ;+BAEE,mBAAmB;AAE7C,MAAMA,mBAAmB,cAAc;AAEvC,gBAAMC,WAAAA,GAAUH,OAAMI,UAAU,CAAoD,CAACC,OAAOC;IACjG,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT,mCAAAA;IAEhB,MAAMU,qBAAiBZ,6BAAAA,EAAaG,kBAAkBQ,QAAQE,OAAO,EAAEJ;IAEvE,OAAA,WAAA,GACE,OAAA,aAAA,CAACK,OAAAA;QAAIP,KAAKA;QAAKE,WAAWG;QAAiB,GAAGF,IAAI;OAC/CF;AAGP,GAAG;AAEHJ,QAAQW,WAAW,GAAG"}

package/lib-commonjs/components/StyledText/StyledText.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/StyledText/StyledText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, Slot, ComponentProps, 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":"~~;;;;;;;;;;;IA6GagB~~,UAAAA;;;~~IAnBAT~~,~~mBAAAA;;;;;4BAzFb,gDAAiD;iEAE1B,~~QAAQ;iCACoD,6BAA6B;kCACtD,sBAAsB;AAqFzE,~~4BAA4B~~,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;AAEO,mBAAMC,WAAAA,GAAahB,OAAMiB,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,~~iBAAa9B,+BAAAA~~;IACnB,MAAM+B,mBAAe7B,iCAAAA;IACrB,MAAM8B,aAAS/B,2BAAAA;IAEf,MAAMgC,OAAOnB,MAAMmB,IAAI,GAAG7B,OAAO,CAACU,MAAMmB,IAAI,CAAC,GAAGnB,MAAMmB,IAAI;IAE1D,MAAMC,WAAWnC,qBAAAA,CAAKoC,MAAM,~~CAC1BtC~~,~~6CAAAA~~,EAAyB,QAAQ;QAC/BkB;QACA,GAAGD,KAAK;QACRa;QACAS,eAAWtC,6BAAAA,EACTK,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,OAAA,WAAA,OAAO,eAAA,EAACT,UAAAA,CAAAA;AACV,GAAG;AAEHtB,WAAWgC,WAAW,GAAG"}
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 { getIntrinsicElementProps, mergeClasses, Slot, ComponentProps, 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,wBAA0B,GAC1B,iDAAiD,GAEjD;;;;;;;;;;;;IA4GagB,UAAAA;;;uBAnBAT;;;;;;iEAvFU,QAAQ;iCACoD,6BAA6B;kCACtD,sBAAsB;AAqFzE,MAAMA,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;AAEO,mBAAMC,WAAAA,GAAahB,OAAMiB,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,mCAAAA;IACnB,MAAM+B,mBAAe7B,iCAAAA;IACrB,MAAM8B,aAAS/B,2BAAAA;IAEf,MAAMgC,OAAOnB,MAAMmB,IAAI,GAAG7B,OAAO,CAACU,MAAMmB,IAAI,CAAC,GAAGnB,MAAMmB,IAAI;IAE1D,MAAMC,WAAWnC,qBAAAA,CAAKoC,MAAM,KAC1BtC,yCAAAA,EAAyB,QAAQ;QAC/BkB;QACA,GAAGD,KAAK;QACRa;QACAS,eAAWtC,6BAAAA,EACTK,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,OAAA,WAAA,OAAO,eAAA,EAACT,UAAAA,CAAAA;AACV,GAAG;AAEHtB,WAAWgC,WAAW,GAAG"}

package/lib-commonjs/components/Video/Video.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Video/Video.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["~~import~~ { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/*\n Video component props\n /\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /\n The source URL of the video\n /\n src: string;\n\n /\n Whether the video should start playing automatically\n * @default false\n /\n autoPlay?: boolean;\n\n /\n Whether the video should display controls\n * @default true\n /\n controls?: boolean;\n\n /\n Whether the video should loop\n /\n loop?: boolean;\n\n /\n Whether the video should be muted\n /\n muted?: boolean;\n\n /\n The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>();\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"~~;;;;;;;;;;;IA2CaK~~,KAAAA;;;kBAvCAD;;;;;iCAJ+B,6BAA6B;iEAClD,QAAQ;6BACA,iBAAiB;AAEzC,MAAMA,iBAAiB,YAAY;AAuCnC,cAAMC,WAAAA,GAAQH,OAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,OAAMW,MAAM;IAE7B,MAAMC,cAAUX,2BAAAA;IAChBD,OAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,OAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,OAAA,WAAA,GACE,OAAA,aAAA,CAACQ,SAAAA;QACCV,~~KAAKP~~,~~kCAAAA~~,EAAcO,KAAKI;QACxBO,MAAK;QACLV,eAAWT,6BAAAA,EAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/*\n Video component props\n /\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /\n The source URL of the video\n /\n src: string;\n\n /\n Whether the video should start playing automatically\n * @default false\n /\n autoPlay?: boolean;\n\n /\n Whether the video should display controls\n * @default true\n /\n controls?: boolean;\n\n /\n Whether the video should loop\n /\n loop?: boolean;\n\n /\n Whether the video should be muted\n /\n muted?: boolean;\n\n /\n The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>();\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA6CaK,KAAAA;;;kBAvCAD;;;;;iCAJ+B,6BAA6B;iEAClD,QAAQ;6BACA,iBAAiB;AAEzC,MAAMA,iBAAiB,YAAY;AAuCnC,cAAMC,WAAAA,GAAQH,OAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,OAAMW,MAAM;IAE7B,MAAMC,cAAUX,2BAAAA;IAChBD,OAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,OAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,OAAA,WAAA,GACE,OAAA,aAAA,CAACQ,SAAAA;QACCV,SAAKP,8BAAAA,EAAcO,KAAKI;QACxBO,MAAK;QACLV,eAAWT,6BAAAA,EAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
-  "version": "9.6.6",
+  "version": "9.6.8",
   "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,15 +20,15 @@
     "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.17.0",
-    "@fluentui/react-components": "^9.70.0",
-    "@fluentui/react-context-selector": "^9.2.7",
+    "@fluentui/react-aria": "^9.17.1",
+    "@fluentui/react-components": "^9.72.0",
+    "@fluentui/react-context-selector": "^9.2.8",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
-    "@fluentui/react-shared-contexts": "^9.25.1",
-    "@fluentui/react-tabster": "^9.26.5",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.6",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },