npm - @fluentui/react-combobox - Versions diffs - 9.17.0 → 9.17.2 - Mend

@fluentui/react-combobox 9.17.0 → 9.17.2

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 (127) hide show

package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n clearButton: 'fui-Dropdown__clearButton',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/*\n Styles for Dropdown\n /\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n display: 'inline-flex',\n minWidth: '250px',\n position: 'relative',\n verticalAlign: 'middle',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n\n '@supports selector(:has())': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)',\n },\n },\n },\n\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1,\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `3px ${\n tokens.spacingHorizontalSNudge\n } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n medium: {\n ...typographyStyles.body1,\n padding: `5px ${\n tokens.spacingHorizontalMNudge\n } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${\n tokens.spacingHorizontalM\n } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n '&:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n\n hidden: {\n display: 'none',\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\nconst useBaseClearButtonStyle = makeResetStyles({\n alignSelf: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n cursor: 'pointer',\n height: 'fit-content',\n margin: 0,\n marginRight: tokens.spacingHorizontalMNudge,\n padding: 0,\n position: 'relative',\n\n ...createFocusOutlineStyle(),\n});\n\n/*\n Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n 'use no memo';\n\n const { appearance, open, placeholderVisible, showClearButton, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const clearButtonStyle = useBaseClearButtonStyle();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\n !disabled && appearance === 'outline' && styles.outlineInteractive,\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n disabled && styles.disabledText,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\n state.inlinePopup && styles.inlineListbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n showClearButton && styles.hidden,\n state.expandIcon.className,\n );\n }\n\n if (state.clearButton) {\n state.clearButton.className = mergeClasses(\n dropdownClassNames.clearButton,\n clearButtonStyle,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n !showClearButton && styles.hidden,\n state.clearButton.className,\n );\n }\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","borderRadius","borderRadiusMedium","boxSizing","display","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","strokeWidthThick","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","alignItems","backgroundColor","colorTransparentBackground","border","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","gridTemplateColumns","justifyContent","textAlign","width","placeholder","colorNeutralForeground4","small","caption1","padding","spacingHorizontalSNudge","medium","body1","spacingHorizontalMNudge","large","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","useIconStyles","icon","fontSize","fontSizeBase500","gridColumnStart","gridColumnEnd","marginLeft","useBaseClearButtonStyle","alignSelf","margin","marginRight","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n clearButton: 'fui-Dropdown__clearButton',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/*\n Styles for Dropdown\n /\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n display: 'inline-flex',\n minWidth: '250px',\n position: 'relative',\n verticalAlign: 'middle',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n\n '@supports selector(:has())': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)',\n },\n },\n },\n\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1,\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `3px ${\n tokens.spacingHorizontalSNudge\n } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n medium: {\n ...typographyStyles.body1,\n padding: `5px ${\n tokens.spacingHorizontalMNudge\n } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${\n tokens.spacingHorizontalM\n } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n '&:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n\n hidden: {\n display: 'none',\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\nconst useBaseClearButtonStyle = makeResetStyles({\n alignSelf: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n cursor: 'pointer',\n height: 'fit-content',\n margin: 0,\n marginRight: tokens.spacingHorizontalMNudge,\n padding: 0,\n position: 'relative',\n\n ...createFocusOutlineStyle(),\n});\n\n/*\n Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n 'use no memo';\n\n const { appearance, open, placeholderVisible, showClearButton, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const clearButtonStyle = useBaseClearButtonStyle();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\n !disabled && appearance === 'outline' && styles.outlineInteractive,\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n disabled && styles.disabledText,\n state.button.className,\n );\n\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\n state.inlinePopup && styles.inlineListbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n showClearButton && styles.hidden,\n state.expandIcon.className,\n );\n }\n\n if (state.clearButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearButton.className = mergeClasses(\n dropdownClassNames.clearButton,\n clearButtonStyle,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n !showClearButton && styles.hidden,\n state.clearButton.className,\n );\n }\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","borderRadius","borderRadiusMedium","boxSizing","display","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","strokeWidthThick","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","alignItems","backgroundColor","colorTransparentBackground","border","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","gridTemplateColumns","justifyContent","textAlign","width","placeholder","colorNeutralForeground4","small","caption1","padding","spacingHorizontalSNudge","medium","body1","spacingHorizontalMNudge","large","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","useIconStyles","icon","fontSize","fontSizeBase500","gridColumnStart","gridColumnEnd","marginLeft","useBaseClearButtonStyle","alignSelf","margin","marginRight","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}

package/lib-commonjs/components/Listbox/Listbox.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /** The root slot, a `<div>` with `role=\"listbox\"` /\n root: Slot<'div'>;\n};\n\n/\n Listbox Props\n /\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n SelectionProps & {\n /\n Disable auto-focusing on the first item when mounting.\n \n @default false\n /\n disableAutoFocus?: boolean;\n };\n\n/\n State used in rendering Listbox\n /\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /\n @deprecated - no longer used internally\n * @see activeDescendantController.active()\n /\n activeOption?: OptionValue;\n\n /\n @deprecated - no longer used internally\n /\n focusVisible: boolean;\n\n /\n @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n standalone: boolean;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":""}
1	+ {"version":3,"sources":["../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport type { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport type { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /** The root slot, a `<div>` with `role=\"listbox\"` /\n root: Slot<'div'>;\n};\n\n/\n Listbox Props\n /\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n SelectionProps & {\n /\n Disable auto-focusing on the first item when mounting.\n \n @default false\n /\n disableAutoFocus?: boolean;\n };\n\n/\n State used in rendering Listbox\n /\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /\n @deprecated - no longer used internally\n * @see activeDescendantController.active()\n /\n activeOption?: OptionValue;\n\n /\n @deprecated - no longer used internally\n /\n focusVisible: boolean;\n\n /\n @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n standalone: boolean;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Listbox/useListbox.js CHANGED Viewed

@@ -17,9 +17,9 @@ const _reactaria = require("@fluentui/react-aria");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useOptionCollection = require("../../utils/useOptionCollection");
 const _useSelection = require("../../utils/useSelection");
-const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
 const _ListboxContext = require("../../contexts/ListboxContext");
 const _reacttabster = require("@fluentui/react-tabster");
+const _isComboboxOptionElement = require("../../utils/isComboboxOptionElement");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,
@@ -31,7 +31,7 @@ const useListbox_unstable = (props, ref)=>{
     const { multiselect, disableAutoFocus = false } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = (0, _reactaria.useActiveDescendant)({
-        matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
+        matchOption: _isComboboxOptionElement.isComboboxOptionElement
     });
     const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
     const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
@@ -39,6 +39,7 @@ const useListbox_unstable = (props, ref)=>{
     const contextGetOptionsMatchingValue = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionsMatchingValue);
     const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;
     const getOptionsMatchingValue = hasListboxContext ? contextGetOptionsMatchingValue : optionCollection.getOptionsMatchingValue;
+    // eslint-disable-next-line react-hooks/immutability
     const listenerRef = _react.useMemo(()=>{
         let element = null;
         const listener = (untypedEvent)=>{
@@ -51,6 +52,7 @@ const useListbox_unstable = (props, ref)=>{
                 element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);
                 return;
             }
+            // eslint-disable-next-line react-hooks/immutability
             element = el;
             element.addEventListener('activedescendantchange', listener);
         };

package/lib-commonjs/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n slot,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n ActiveDescendantChangeEvent,\n useActiveDescendant,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: () => null,\n};\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n 'use no memo';\n\n const { multiselect, disableAutoFocus = false } = props;\n const optionCollection = useOptionCollection();\n\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const hasListboxContext = useHasParentContext(ListboxContext);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n const getOptionsMatchingValue = hasListboxContext\n ? contextGetOptionsMatchingValue\n : optionCollection.getOptionsMatchingValue;\n\n const listenerRef = React.useMemo(() => {\n let element: HTMLDivElement \| null = null;\n\n const listener = (untypedEvent: Event) => {\n // Typescript doesn't support custom event types on handler\n const event = untypedEvent as ActiveDescendantChangeEvent;\n onActiveDescendantChange?.(event);\n };\n\n return (el: HTMLDivElement \| null) => {\n if (!el) {\n element?.removeEventListener('activedescendantchange', listener);\n return;\n }\n\n element = el;\n element.addEventListener('activedescendantchange', listener);\n };\n }, [onActiveDescendantChange]);\n\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n const activeDescendantContext = useActiveDescendantContext();\n const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n event.preventDefault();\n break;\n }\n\n switch (action) {\n case 'Next':\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'Previous':\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'PageUp':\n case 'First':\n activeDescendantController.first();\n break;\n case 'PageDown':\n case 'Last':\n activeDescendantController.last();\n break;\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n }\n };\n\n // get state from parent combobox, if it exists\n const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasListboxContext\n ? {\n selectedOptions: contextSelectedOptions,\n selectOption: contextSelectOption,\n ...UNSAFE_noLongerUsed,\n }\n : {\n selectedOptions,\n selectOption,\n ...UNSAFE_noLongerUsed,\n };\n\n React.useEffect(() => {\n // if the listbox has a parent context, that parent context should handle the activedescendant\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n // disable focus-visible attributes until focus is received\n activeDescendantController.hideFocusVisibleAttributes();\n\n if (!disableAutoFocus) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n\n // otherwise start at the first option\n else {\n activeDescendantController.first();\n }\n }\n\n return () => {\n activeDescendantController.blur();\n };\n\n // this should only be run once in the lifecycle of the Listbox\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const onFocus = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.showFocusVisibleAttributes();\n\n if (isNavigatingWithKeyboard) {\n activeDescendantController.scrollActiveIntoView();\n }\n }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n const onBlur = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.hideFocusVisibleAttributes();\n }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n role: multiselect ? 'menu' : 'listbox',\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n standalone: !hasListboxContext,\n multiselect,\n clearSelection,\n activeDescendantController,\n onActiveDescendantChange,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","optionClassNames","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","always","role","tabIndex","elementType","standalone"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n slot,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport {\n useActiveDescendant,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: () => null,\n};\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n 'use no memo';\n\n const { multiselect, disableAutoFocus = false } = props;\n const optionCollection = useOptionCollection();\n\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: isComboboxOptionElement,\n });\n\n const hasListboxContext = useHasParentContext(ListboxContext);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n const getOptionsMatchingValue = hasListboxContext\n ? contextGetOptionsMatchingValue\n : optionCollection.getOptionsMatchingValue;\n\n // eslint-disable-next-line react-hooks/immutability\n const listenerRef = React.useMemo(() => {\n let element: HTMLDivElement \| null = null;\n\n const listener = (untypedEvent: Event) => {\n // Typescript doesn't support custom event types on handler\n const event = untypedEvent as ActiveDescendantChangeEvent;\n onActiveDescendantChange?.(event);\n };\n\n return (el: HTMLDivElement \| null) => {\n if (!el) {\n element?.removeEventListener('activedescendantchange', listener);\n return;\n }\n\n // eslint-disable-next-line react-hooks/immutability\n element = el;\n element.addEventListener('activedescendantchange', listener);\n };\n }, [onActiveDescendantChange]);\n\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n const activeDescendantContext = useActiveDescendantContext();\n const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n event.preventDefault();\n break;\n }\n\n switch (action) {\n case 'Next':\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'Previous':\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'PageUp':\n case 'First':\n activeDescendantController.first();\n break;\n case 'PageDown':\n case 'Last':\n activeDescendantController.last();\n break;\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n }\n };\n\n // get state from parent combobox, if it exists\n const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasListboxContext\n ? {\n selectedOptions: contextSelectedOptions,\n selectOption: contextSelectOption,\n ...UNSAFE_noLongerUsed,\n }\n : {\n selectedOptions,\n selectOption,\n ...UNSAFE_noLongerUsed,\n };\n\n React.useEffect(() => {\n // if the listbox has a parent context, that parent context should handle the activedescendant\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n // disable focus-visible attributes until focus is received\n activeDescendantController.hideFocusVisibleAttributes();\n\n if (!disableAutoFocus) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n\n // otherwise start at the first option\n else {\n activeDescendantController.first();\n }\n }\n\n return () => {\n activeDescendantController.blur();\n };\n\n // this should only be run once in the lifecycle of the Listbox\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const onFocus = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.showFocusVisibleAttributes();\n\n if (isNavigatingWithKeyboard) {\n activeDescendantController.scrollActiveIntoView();\n }\n }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n const onBlur = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.hideFocusVisibleAttributes();\n }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n role: multiselect ? 'menu' : 'listbox',\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n standalone: !hasListboxContext,\n multiselect,\n clearSelection,\n activeDescendantController,\n onActiveDescendantChange,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","isComboboxOptionElement","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","el","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","root","always","role","tabIndex","elementType","standalone"],"mappings":"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"}

package/lib-commonjs/components/Listbox/useListboxStyles.styles.js CHANGED Viewed

@@ -68,6 +68,7 @@ const listboxClassNames = {
 const useListboxStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/\n Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,iBAAiB;;;6BAoBY;;;;uBArBD,gBAAgB;AAClD,0BAA0B;IAC7BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;~~IAC1BoB~~,KAAK,CAACrB,IAAI,CAACuB,SAAS,OAAGzB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/\n Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,iBAAiB;;;6BAoBY;;;;uBArBD,gBAAgB;AAClD,0BAA0B;IAC7BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,OAAGzB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Listbox/useListboxStyles.styles.raw.js CHANGED Viewed

@@ -40,6 +40,7 @@ const listboxClassNames = {
 const useListboxStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/Listbox/useListboxStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n root: 'fui-Listbox',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS,\n },\n});\n\n/\n Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","listboxClassNames","root","useStyles","backgroundColor","colorNeutralBackground1","boxSizing","display","flexDirection","minWidth","overflowY","outline","colorTransparentStroke","padding","spacingHorizontalXS","rowGap","spacingHorizontalXXS","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,iBAAAA;;;IAwBAgB,yBAAAA;;;;4BA7BU,wBAAwB;uBAEN,iBAAiB;AAGnD,0BAAwD;IAC7Df,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,iBAAiBN,kBAAAA,CAAOO,uBAAuB;QAC/CC,WAAW;QACXC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,SAAS,CAAC,UAAU,EAAEb,kBAAAA,CAAOc,sBAAsB,EAAE;QACrDC,SAASf,kBAAAA,CAAOgB,mBAAmB;QACnCC,QAAQjB,kBAAAA,CAAOkB,oBAAoB;IACrC;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAMC,SAAShB;~~IACfe~~,MAAMhB,IAAI,CAACkB,SAAS,OAAGpB,mBAAAA,EAAaC,kBAAkBC,IAAI,EAAEiB,OAAOjB,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IAE7F,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n root: 'fui-Listbox',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS,\n },\n});\n\n/\n Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","listboxClassNames","root","useStyles","backgroundColor","colorNeutralBackground1","boxSizing","display","flexDirection","minWidth","overflowY","outline","colorTransparentStroke","padding","spacingHorizontalXS","rowGap","spacingHorizontalXXS","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,iBAAAA;;;IAwBAgB,yBAAAA;;;;4BA7BU,wBAAwB;uBAEN,iBAAiB;AAGnD,0BAAwD;IAC7Df,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,iBAAiBN,kBAAAA,CAAOO,uBAAuB;QAC/CC,WAAW;QACXC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,SAAS,CAAC,UAAU,EAAEb,kBAAAA,CAAOc,sBAAsB,EAAE;QACrDC,SAASf,kBAAAA,CAAOgB,mBAAmB;QACnCC,QAAQjB,kBAAAA,CAAOkB,oBAAoB;IACrC;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAMC,SAAShB;IACf,oDAAoD;IACpDe,MAAMhB,IAAI,CAACkB,SAAS,OAAGpB,mBAAAA,EAAaC,kBAAkBC,IAAI,EAAEiB,OAAOjB,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IAE7F,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Option/Option.types.js CHANGED Viewed

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

package/lib-commonjs/components/Option/Option.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n /** The root option slot, with role=\"option\" /\n root: NonNullable<Slot<'div'>>;\n\n /* The check icon that is visible for selected options /\n checkIcon: Slot<'span'>;\n};\n\n/\n Option Props\n /\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /\n Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n /\n disabled?: boolean;\n\n /\n Defines a unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n /\n value?: string;\n} & (\n \| {\n /\n An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n /\n text?: string;\n children: string;\n }\n \| {\n /\n The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n /\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/\n State used in rendering Option\n /\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /\n @deprecated - no longer used internally\n /\n active: boolean;\n\n /\n @deprecated - no longer used internally\n /\n focusVisible: boolean;\n\n /* If true, the option is part of a multiselect combobox or listbox /\n multiselect?: boolean;\n\n /* If true, the option is selected */\n selected: boolean;\n };\n"],"names":[~~"React"~~],"mappings":"~~;;;;;iEACuB~~,~~QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type OptionSlots = {\n /** The root option slot, with role=\"option\" /\n root: NonNullable<Slot<'div'>>;\n\n /* The check icon that is visible for selected options /\n checkIcon: Slot<'span'>;\n};\n\n/\n Option Props\n /\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /\n Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n /\n disabled?: boolean;\n\n /\n Defines a unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n /\n value?: string;\n} & (\n \| {\n /\n An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n /\n text?: string;\n children: string;\n }\n \| {\n /\n The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n /\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/\n State used in rendering Option\n /\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /\n @deprecated - no longer used internally\n /\n active: boolean;\n\n /\n @deprecated - no longer used internally\n /\n focusVisible: boolean;\n\n /* If true, the option is part of a multiselect combobox or listbox /\n multiselect?: boolean;\n\n /* If true, the option is selected */\n selected: boolean;\n };\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAiBI"}

package/lib-commonjs/components/Option/useOptionStyles.styles.js CHANGED Viewed

@@ -44,7 +44,9 @@ const optionClassNames = {
         z189sj: 0,
         z8tnut: 0,
         B0ocmuz: "fm5eomj",
-        qhf8xq: "f10pi13n",
+        qhf8xq: "f10pi13n"
+    },
+    interactive: {
         Jwef8y: "f1knas48",
         Bi91k9c: "feu1g3u",
         zqbkvg: "fo79ri9",
@@ -110,30 +112,7 @@ const optionClassNames = {
     },
     disabled: {
         sj55zd: "f1s2aq7o",
-        Jwef8y: "f9ql6rf",
-        Bi91k9c: "fvgxktp",
-        zqbkvg: "f185j3qj",
-        h82x05: [
-            "f1dligi3",
-            "f1vydzie"
-        ],
-        cqj998: "fjw1di3",
-        j3hlsh: [
-            "f1vydzie",
-            "f1dligi3"
-        ],
-        ecr2s2: "fgj9um3",
-        lj723h: "f19wldhg",
-        Btxx2vb: "f1ss0kt2",
-        sltcwy: [
-            "f1t6oli3",
-            "fjy9ci8"
-        ],
-        dnwvvm: "fresaxk",
-        Blyvkvs: [
-            "fjy9ci8",
-            "f1t6oli3"
-        ],
+        Bceei9c: "f158kwzp",
         B7iucu3: "f1cyfu5x"
     },
     selected: {},
@@ -261,6 +240,7 @@ const optionClassNames = {
         ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
         ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
         ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f158kwzp{cursor:default;}",
         ".fi64zpg{flex-shrink:0;}",
         ".fod5ikn{font-size:var(--fontSizeBase400);}",
         ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
@@ -305,13 +285,7 @@ const optionClassNames = {
         ".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
         ".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
         ".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
-        ".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
-        ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
-        ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
-        ".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
-        ".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
-        ".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
-        ".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
+        ".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}"
     ],
     a: [
         ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
@@ -319,13 +293,7 @@ const optionClassNames = {
         ".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
         ".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
         ".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
-        ".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
-        ".fgj9um3:active{background-color:var(--colorTransparentBackground);}",
-        ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
-        ".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
-        ".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
-        ".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
-        ".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
+        ".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}"
     ],
     m: [
         [
@@ -340,8 +308,10 @@ const useOptionStyles_unstable = (state)=>{
     'use no memo';
     const { disabled, multiselect, selected } = state;
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
     if (state.checkIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
     }
     return state;

package/lib-commonjs/components/Option/useOptionStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","B7iucu3","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}
1	+ {"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative'\n },\n interactive: {\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","interactive","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","B7iucu3","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}

package/lib-commonjs/components/Option/useOptionStyles.styles.raw.js CHANGED Viewed

@@ -38,7 +38,9 @@ const optionClassNames = {
         fontSize: _reacttheme.tokens.fontSizeBase300,
         lineHeight: _reacttheme.tokens.lineHeightBase300,
         padding: `${_reacttheme.tokens.spacingVerticalSNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
-        position: 'relative',
+        position: 'relative'
+    },
+    interactive: {
         ':hover': {
             backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
             color: _reacttheme.tokens.colorNeutralForeground1Hover,
@@ -66,16 +68,7 @@ const optionClassNames = {
     },
     disabled: {
         color: _reacttheme.tokens.colorNeutralForegroundDisabled,
-        ':hover': {
-            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
-            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
-            [`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
-        },
-        ':active': {
-            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
-            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
-            [`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
-        },
+        cursor: 'default',
         '@media (forced-colors: active)': {
             color: 'GrayText'
         }
@@ -126,8 +119,10 @@ const useOptionStyles_unstable = (state)=>{
     'use no memo';
     const { disabled, multiselect, selected } = state;
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
     if (state.checkIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
     }
     return state;

package/lib-commonjs/components/Option/useOptionStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n },\n\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n ':~~hover':~~ {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n },\n\n '~~:active~~'~~: {\n backgroundColor: tokens.colorTransparentBackground~~,\n ~~color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n },\n~~\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n});\n\n/*\n Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n 'use no memo';\n\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n disabled && multiselect && styles.multiselectCheckDisabled,\n state.checkIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","makeStyles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","borderColor","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","~~colorTransparentBackground","~~selected","flexShrink","fontSizeBase400","marginLeft","spacingHorizontalXXS","marginRight","visibility","selectedCheck","multiselectCheck","strokeWidthThin","colorNeutralStrokeAccessible","borderRadiusSmall","boxSizing","justifyContent","fill","height","width","selectedMultiselectCheck","colorCompoundBrandBackground","colorNeutralForegroundInverted","checkDisabled","multiselectCheckDisabled","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,gBAAAA;;;~~4BA+HAgE;eAAAA;;;4BArIU~~,wBAAwB;2BAES,uBAAuB;uBAC1B,iBAAiB;AAG/D,yBAAsD;IAC3D/D,MAAM;IACNC,WAAW;AACb,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,YAAY;QACZC,cAAcV,kBAAAA,CAAOW,kBAAkB;QACvCC,OAAOZ,kBAAAA,CAAOa,uBAAuB;QACrCC,WAAWd,kBAAAA,CAAOe,mBAAmB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAYlB,kBAAAA,CAAOmB,cAAc;QACjCC,UAAUpB,kBAAAA,CAAOqB,eAAe;QAChCC,YAAYtB,kBAAAA,CAAOuB,iBAAiB;QACpCC,SAAS,GAAGxB,kBAAAA,CAAOyB,qBAAqB,CAAC,CAAC,EAAEzB,kBAAAA,CAAO0B,kBAAkB,EAAE;QACvEC,UAAU;~~QAEV~~,UAAU;YACRC,~~iBAAiB5B~~,kBAAAA,~~CAAO6B~~,4BAA4B;~~YACpDjB~~,OAAOZ,kBAAAA,~~CAAO8B~~,4BAA4B;YAC1C,CAAC,CAAC,GAAG,~~EAAEzB~~,iBAAiBE,SAAS,EAAE,CAAC,EAAEH,iBAAAA,~~CAAW2B~~,WAAW,~~CAAC/B~~,kBAAAA,~~CAAO8B~~,4BAA4B;QAClG;QAEA,WAAW;YACTF,~~iBAAiB5B~~,kBAAAA,~~CAAOgC~~,8BAA8B;~~YACtDpB~~,OAAOZ,kBAAAA,~~CAAOiC~~,8BAA8B;YAC5C,CAAC,CAAC,GAAG,~~EAAE5B~~,iBAAiBE,SAAS,EAAE,CAAC,EAAEH,iBAAAA,~~CAAW2B~~,WAAW,~~CAAC/B~~,kBAAAA,~~CAAO8B~~,4BAA4B;QAClG;IACF;IAEAI,QAAQ;QACN,CAAC,CAAC,CAAC,~~EAAEjC~~,kDAAAA,CAAwC,QAAQ,CAAC,CAAC,EAAE;~~YACvDkC~~,SAAS;~~YACTR~~,UAAU;~~YACVS~~,eAAe;YACfC,QAAQ;YAERC,QAAQ,CAAC,UAAU,~~EAAEtC~~,kBAAAA,~~CAAOuC~~,iBAAiB,EAAE;YAC/~~C7B~~,cAAcV,kBAAAA,CAAOW,kBAAkB;~~YAEvC6B~~,KAAK;YACLC,QAAQ;YACRC,MAAM;YACNC,OAAO;QACT;IACF;IAEAC,UAAU;~~QACRhC~~,OAAOZ,kBAAAA,~~CAAO6C,8BAA8B;QAE5C,UAAU;YACRjB,iBAAiB5B,kBAAAA,~~CAAO8C,~~0BAA0B;YAClDlC,OAAOZ,kBAAAA,CAAO6C,~~8BAA8B;~~YAC5C~~,~~CAAC,CAAC,GAAG,EAAExC,iBAAiBE,SAAS,EAAE,CAAC,EAAEH,iBAAAA,CAAW2B,WAAW,CAAC/B,kBAAAA,CAAO6C,8BAA8B~~;~~QACpG;QAEA~~,~~WAAW;YACTjB,iBAAiB5B,kBAAAA,CAAO8C,0BAA0B;YAClDlC,OAAOZ,kBAAAA,CAAO6C,8BAA8B;YAC5C,CAAC,CAAC,GAAG,EAAExC,iBAAiBE,SAAS,EAAE,CAAC,EAAEH,iBAAAA,CAAW2B,WAAW,CAAC/B,kBAAAA,CAAO6C,8BAA8B;QACpG;QAEA,~~kCAAkC;~~YAChCjC~~,OAAO;QACT;IACF;IAEAmC,UAAU,CAAC;IAEXxC,WAAW;QACTyC,YAAY;QACZ5B,UAAUpB,kBAAAA,CAAOiD,eAAe;QAChC,6FAA6F;QAC7F,wGAAwG;QACxGC,YAAY,CAAC,KAAK,EAAElD,kBAAAA,CAAOmD,oBAAoB,CAAC,MAAM,CAAC;QACvDC,aAAapD,kBAAAA,CAAOmD,oBAAoB;QACxCE,YAAY;QAEZ,SAAS;YACPpC,SAAS;QACX;IACF;IAEAqC,eAAe;QACbD,YAAY;IACd;IAEAE,kBAAkB;~~QAChBjB~~,QAAQ,~~GAAGtC~~,kBAAAA,CAAOwD,eAAe,CAAC,OAAO,EAAExD,kBAAAA,CAAOyD,4BAA4B,EAAE;QAChF/C,cAAcV,kBAAAA,CAAO0D,iBAAiB;QACtCC,WAAW;QAEX1C,SAAS;QACTR,YAAY;QACZmD,gBAAgB;QAEhBC,MAAM;QACNzC,UAAU;QACV0C,QAAQ;QACRC,OAAO;QACPV,YAAY;IACd;IAEAW,0BAA0B;~~QACxBpC~~,~~iBAAiB5B~~,kBAAAA,CAAOiE,4BAA4B;QACpDrD,OAAOZ,kBAAAA,CAAOkE,8BAA8B;QAC5C,GAAG9D,iBAAAA,~~CAAW2B~~,WAAW,~~CAAC/B~~,kBAAAA,CAAOiE,4BAA4B,CAAC;IAChE;IAEAE,eAAe;QACbvD,OAAOZ,kBAAAA,~~CAAO6C~~,8BAA8B;QAE5C,kCAAkC;~~YAChCjC~~,OAAO;QACT;IACF;IACAwD,0BAA0BhE,iBAAAA,~~CAAW2B~~,WAAW,~~CAAC/B~~,kBAAAA,~~CAAO6C~~,8BAA8B;AACxF;AAKO,~~iCAAiC~~,~~CAACyB~~;IACvC;IAEA,MAAM,~~EAAE1B~~,QAAQ,~~EAAE2B~~,WAAW,EAAExB,QAAQ,EAAE,GAAGuB;IAC5C,MAAME,SAAShE;~~IACf8D~~,MAAMhE,IAAI,CAACmE,SAAS,OAAGtE,mBAAAA,EACrBE,iBAAiBC,IAAI,EACrBkE,OAAOlE,IAAI,~~EACXkE~~,~~OAAOtC~~,MAAM,EACbU,~~YAAY4B~~,~~OAAO5B~~,QAAQ,~~EAC3BG~~,YAAYyB,OAAOzB,QAAQ,EAC3BuB,MAAMhE,IAAI,CAACmE,SAAS;IAGtB,IAAIH,MAAM/D,SAAS,EAAE;QACnB+D,MAAM/D,SAAS,CAACkE,SAAS,~~OAAGtE~~,~~mBAAAA~~,EAC1BE,iBAAiBE,SAAS,EAC1BiE,OAAOjE,SAAS,EAChBgE,eAAeC,OAAOjB,gBAAgB,EACtCR,YAAYyB,OAAOlB,aAAa,EAChCP,YAAYwB,eAAeC,OAAOR,wBAAwB,~~EAC1DpB~~,~~YAAY4B~~,OAAOL,aAAa,~~EAChCvB~~,~~YAAY2B~~,eAAeC,OAAOJ,wBAAwB,EAC1DE,MAAM/D,SAAS,CAACkE,SAAS;IAE7B;IAEA,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n },\n\n interactive: {\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover),\n },\n },\n\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n});\n\n/*\n Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n 'use no memo';\n\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n !disabled && styles.interactive,\n styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n disabled && multiselect && styles.multiselectCheckDisabled,\n state.checkIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","makeStyles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","interactive","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","borderColor","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","selected","flexShrink","fontSizeBase400","marginLeft","spacingHorizontalXXS","marginRight","visibility","selectedCheck","multiselectCheck","strokeWidthThin","colorNeutralStrokeAccessible","borderRadiusSmall","boxSizing","justifyContent","fill","height","width","selectedMultiselectCheck","colorCompoundBrandBackground","colorNeutralForegroundInverted","checkDisabled","multiselectCheckDisabled","useOptionStyles_unstable","state","multiselect","styles","className"],"mappings":"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"}

package/lib-commonjs/components/OptionGroup/useOptionGroup.js CHANGED Viewed

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useOptionGroup_unstable", {
         return useOptionGroup_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useOptionGroup_unstable = (props, ref)=>{
     const labelId = (0, _reactutilities.useId)('group-label');

package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/*\n Create the state required to render OptionGroup.\n \n The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n \n @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["~~React","~~getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+~~BAaaI;;;;;;;iEAbU~~,~~QAAQ;gCACuB,~~4BAA4B;AAY3E,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,cAAUL,qBAAAA,EAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,oBAAAA,CAAKQ,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,oBAAAA,CAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/*\n Create the state required to render OptionGroup.\n \n The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n \n @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+BAaaG;;;;;;gCAZyC,4BAA4B;AAY3E,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,cAAUL,qBAAAA,EAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,oBAAAA,CAAKQ,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,oBAAAA,CAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js CHANGED Viewed

@@ -101,8 +101,10 @@ const optionGroupClassNames = {
 const useOptionGroupStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(optionGroupClassNames.label, styles.label, state.label.className);
     }
     return state;