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

@fluentui/react-combobox 9.17.1 → 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 (78) hide show

package/lib-commonjs/components/Combobox/useComboboxStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Combobox/useComboboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/*\n Styles for Combobox\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\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(2px, ${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\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\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 // size variants\n small: {\n height: fieldHeights.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n height: fieldHeights.medium,\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n height: fieldHeights.large,\n paddingRight: tokens.spacingHorizontalM,\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 ${tokens.colorTransparentStroke}`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\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\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\nconst useInputStyles = makeStyles({\n input: {\n alignSelf: 'stretch',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n medium: {\n ...typographyStyles.body1,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n large: {\n ...typographyStyles.body2,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n // position: relative provides the containing block for the ::after clickable-area extension below.\n position: 'relative',\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 // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n // The negative `right` is overridden per size variant below to match the root's paddingRight.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n },\n hidden: {\n display: 'none',\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n '::after': {\n right: `calc(-1 ${tokens.spacingHorizontalSNudge})`,\n },\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n '::after': {\n right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`,\n },\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n '::after': {\n right: `calc(-1 * ${tokens.spacingHorizontalM})`,\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\n/*\n Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n 'use no memo';\n\n const { appearance, open, size, showClearIcon } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n comboboxClassNames.root,\n styles.root,\n styles[appearance],\n styles[size],\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.input.className = mergeClasses(\n comboboxClassNames.input,\n inputStyles.input,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n comboboxClassNames.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 comboboxClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n showClearIcon && iconStyles.visuallyHidden,\n state.expandIcon.className,\n );\n }\n\n if (state.clearIcon) {\n state.clearIcon.className = mergeClasses(\n comboboxClassNames.clearIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n !showClearIcon && iconStyles.hidden,\n state.clearIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","alignItems","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalXXS","display","gridTemplateColumns","justifyContent","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","paddingRight","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useInputStyles","alignSelf","color","colorNeutralForeground1","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","caption1","padding","body1","body2","colorNeutralForegroundDisabled","useIconStyles","icon","fontSize","fontSizeBase500","top","hidden","visuallyHidden","clip","margin","overflow","width","marginLeft","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Combobox/useComboboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/*\n Styles for Combobox\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\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(2px, ${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\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\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 // size variants\n small: {\n height: fieldHeights.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n height: fieldHeights.medium,\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n height: fieldHeights.large,\n paddingRight: tokens.spacingHorizontalM,\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 ${tokens.colorTransparentStroke}`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\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\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\nconst useInputStyles = makeStyles({\n input: {\n alignSelf: 'stretch',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n medium: {\n ...typographyStyles.body1,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n large: {\n ...typographyStyles.body2,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n // position: relative provides the containing block for the ::after clickable-area extension below.\n position: 'relative',\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 // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n // The negative `right` is overridden per size variant below to match the root's paddingRight.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n },\n hidden: {\n display: 'none',\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n '::after': {\n right: `calc(-1 ${tokens.spacingHorizontalSNudge})`,\n },\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n '::after': {\n right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`,\n },\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n '::after': {\n right: `calc(-1 * ${tokens.spacingHorizontalM})`,\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\n/*\n Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n 'use no memo';\n\n const { appearance, open, size, showClearIcon } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n comboboxClassNames.root,\n styles.root,\n styles[appearance],\n styles[size],\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.input.className = mergeClasses(\n comboboxClassNames.input,\n inputStyles.input,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(\n comboboxClassNames.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 comboboxClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n showClearIcon && iconStyles.visuallyHidden,\n state.expandIcon.className,\n );\n }\n\n if (state.clearIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearIcon.className = mergeClasses(\n comboboxClassNames.clearIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n !showClearIcon && iconStyles.hidden,\n state.clearIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","alignItems","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalXXS","display","gridTemplateColumns","justifyContent","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","paddingRight","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useInputStyles","alignSelf","color","colorNeutralForeground1","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","caption1","padding","body1","body2","colorNeutralForegroundDisabled","useIconStyles","icon","fontSize","fontSizeBase500","top","hidden","visuallyHidden","clip","margin","overflow","width","marginLeft","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"mappings":"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"}

package/lib-commonjs/components/Combobox/useInputTriggerSlot.js CHANGED Viewed

@@ -66,7 +66,9 @@ function useInputTriggerSlot(triggerFromProps, ref, options) {
         elementType: 'input',
         activeDescendantController
     });
+    // eslint-disable-next-line react-hooks/immutability
     trigger.onChange = (0, _reactutilities.mergeCallbacks)(trigger.onChange, onChange);
+    // eslint-disable-next-line react-hooks/immutability
     trigger.onBlur = (0, _reactutilities.mergeCallbacks)(trigger.onBlur, onBlur);
     // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
     // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
@@ -106,8 +108,10 @@ function useInputTriggerSlot(triggerFromProps, ref, options) {
         }
         defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
     });
+    // eslint-disable-next-line react-hooks/immutability
     trigger.onKeyDown = onKeyDown;
     if (hideActiveDescendant) {
+        // eslint-disable-next-line react-hooks/immutability
         trigger['aria-activedescendant'] = undefined;
     }
     return trigger;

package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport type { ComboboxProps } from '../Combobox/Combobox.types';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport type { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n Pick<ComboboxBaseState, 'value' \| 'setValue' \| 'selectedOptions' \| 'clearSelection' \| 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n state: UsedComboboxState;\n freeform: boolean \| undefined;\n defaultProps?: Partial<ComboboxProps>;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/*\n useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n \n @internal\n /\nexport function useInputTriggerSlot(\n triggerFromProps: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n 'use no memo';\n\n const {\n state: {\n open,\n value,\n selectOption,\n setValue,\n multiselect,\n selectedOptions,\n clearSelection,\n getOptionById,\n setOpen,\n },\n freeform,\n defaultProps,\n activeDescendantController,\n } = options;\n\n const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!open && !freeform) {\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n selectOption(event, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n const getOptionFromInput = (inputValue: string): OptionValue \| undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString \|\| searchString.length === 0) {\n activeDescendantController.blur();\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const match = activeDescendantController.find(id => {\n const option = getOptionById(id);\n return !!option && matcher(option.text);\n });\n\n if (!match) {\n activeDescendantController.blur();\n return undefined;\n }\n\n return getOptionById(match);\n };\n\n // update value and active option based on input\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = event.target.value;\n // update uncontrolled value\n setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 \|\| !matchingOption)) {\n clearSelection(event);\n }\n };\n\n const trigger = useTriggerSlot(triggerFromProps, ref, {\n state: options.state,\n defaultProps,\n elementType: 'input',\n activeDescendantController,\n });\n\n trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n // save the typing vs. navigating options state, as the space key should behave differently in each case\n // we do not want to update the combobox when this changes, just save the value between renders\n const isTyping = React.useRef(false);\n\n /\n Freeform combobox should not select\n */\n const defaultOnKeyDown = trigger.onKeyDown;\n const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(event) === 'Type') {\n setOpen(event, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (event.key === ArrowLeft \|\| event.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect });\n if (action === 'Type') {\n isTyping.current = true;\n }\n // otherwise, update the typing state to false if opening or navigating dropdown options\n // other actions, like closing the dropdown, should not impact typing state.\n else if (\n (action === 'Open' && event.key !== ' ') \|\|\n action === 'Next' \|\|\n action === 'Previous' \|\|\n action === 'First' \|\|\n action === 'Last' \|\|\n action === 'PageUp' \|\|\n action === 'PageDown'\n ) {\n isTyping.current = false;\n }\n\n // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n if ((isTyping.current \|\| !open) && event.key === ' ') {\n triggerFromProps?.onKeyDown?.(event);\n return;\n }\n\n defaultOnKeyDown?.(event);\n });\n\n trigger.onKeyDown = onKeyDown;\n\n if (hideActiveDescendant) {\n trigger['aria-activedescendant'] = undefined;\n }\n\n return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport type { ComboboxProps } from '../Combobox/Combobox.types';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport type { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n Pick<ComboboxBaseState, 'value' \| 'setValue' \| 'selectedOptions' \| 'clearSelection' \| 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n state: UsedComboboxState;\n freeform: boolean \| undefined;\n defaultProps?: Partial<ComboboxProps>;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/*\n useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n \n @internal\n /\nexport function useInputTriggerSlot(\n triggerFromProps: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n 'use no memo';\n\n const {\n state: {\n open,\n value,\n selectOption,\n setValue,\n multiselect,\n selectedOptions,\n clearSelection,\n getOptionById,\n setOpen,\n },\n freeform,\n defaultProps,\n activeDescendantController,\n } = options;\n\n const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!open && !freeform) {\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n selectOption(event, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n const getOptionFromInput = (inputValue: string): OptionValue \| undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString \|\| searchString.length === 0) {\n activeDescendantController.blur();\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const match = activeDescendantController.find(id => {\n const option = getOptionById(id);\n return !!option && matcher(option.text);\n });\n\n if (!match) {\n activeDescendantController.blur();\n return undefined;\n }\n\n return getOptionById(match);\n };\n\n // update value and active option based on input\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = event.target.value;\n // update uncontrolled value\n setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 \|\| !matchingOption)) {\n clearSelection(event);\n }\n };\n\n const trigger = useTriggerSlot(triggerFromProps, ref, {\n state: options.state,\n defaultProps,\n elementType: 'input',\n activeDescendantController,\n });\n\n // eslint-disable-next-line react-hooks/immutability\n trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n // eslint-disable-next-line react-hooks/immutability\n trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n // save the typing vs. navigating options state, as the space key should behave differently in each case\n // we do not want to update the combobox when this changes, just save the value between renders\n const isTyping = React.useRef(false);\n\n /\n Freeform combobox should not select\n */\n const defaultOnKeyDown = trigger.onKeyDown;\n const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(event) === 'Type') {\n setOpen(event, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (event.key === ArrowLeft \|\| event.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect });\n if (action === 'Type') {\n isTyping.current = true;\n }\n // otherwise, update the typing state to false if opening or navigating dropdown options\n // other actions, like closing the dropdown, should not impact typing state.\n else if (\n (action === 'Open' && event.key !== ' ') \|\|\n action === 'Next' \|\|\n action === 'Previous' \|\|\n action === 'First' \|\|\n action === 'Last' \|\|\n action === 'PageUp' \|\|\n action === 'PageDown'\n ) {\n isTyping.current = false;\n }\n\n // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n if ((isTyping.current \|\| !open) && event.key === ' ') {\n triggerFromProps?.onKeyDown?.(event);\n return;\n }\n\n defaultOnKeyDown?.(event);\n });\n\n // eslint-disable-next-line react-hooks/immutability\n trigger.onKeyDown = onKeyDown;\n\n if (hideActiveDescendant) {\n // eslint-disable-next-line react-hooks/immutability\n trigger['aria-activedescendant'] = undefined;\n }\n\n return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}

package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js CHANGED Viewed

@@ -85,6 +85,7 @@ function useButtonTriggerSlot(triggerFromProps, ref, options) {
         elementType: 'button',
         activeDescendantController
     });
+    // eslint-disable-next-line react-hooks/immutability, react-hooks/refs
     trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)(onTriggerKeyDown, trigger.onKeyDown);
     return trigger;
 }

package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/*\n useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n \n @internal\n /\nexport function useButtonTriggerSlot(\n triggerFromProps: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n 'use no memo';\n\n const {\n state: { open, setOpen, getOptionById },\n defaultProps,\n activeDescendantController,\n } = options;\n\n // jump to matching option based on typing\n const searchString = React.useRef('');\n const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n const moveToNextMatchingOption = (\n matcher: (optionText: string) => boolean,\n opt: { startFromNext: boolean } = { startFromNext: false },\n ) => {\n const { startFromNext } = opt;\n const activeOptionId = activeDescendantController.active();\n\n const nextInOrder = activeDescendantController.find(\n id => {\n const option = getOptionById(id);\n return !!option && matcher(option.text);\n },\n { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n );\n\n if (nextInOrder) {\n return nextInOrder;\n }\n\n // Cycle back to first match\n return activeDescendantController.find(id => {\n const option = getOptionById(id);\n return !!option && matcher(option.text);\n });\n };\n\n const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n if (\n moveToNextMatchingOption(\n optionText => {\n return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n },\n {\n // Slowly pressing the same key will cycle through options\n startFromNext: searchString.current.length === 1,\n },\n )\n ) {\n return;\n }\n\n // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n if (\n allCharactersSame(searchString.current) &&\n moveToNextMatchingOption(\n optionText => {\n return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n },\n {\n // if the search is all the same letter, cycle through options starting with that letter\n startFromNext: true,\n },\n )\n ) {\n return;\n }\n\n activeDescendantController.blur();\n };\n\n const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n // clear timeout, if it exists\n clearKeyTimeout();\n\n // if the key was a char key, update search string\n if (getDropdownActionFromKey(ev) === 'Type') {\n // update search string\n searchString.current += ev.key.toLowerCase();\n setKeyTimeout(() => {\n searchString.current = '';\n }, 500);\n\n if (open) {\n moveToNextMatchingOptionWithSameCharacterHandling();\n }\n\n // update state\n !open && setOpen(ev, true);\n }\n };\n\n const trigger = useTriggerSlot(triggerFromProps, ref, {\n state: options.state,\n defaultProps,\n elementType: 'button',\n activeDescendantController,\n });\n trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n return trigger;\n}\n\n/\n @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n for (let i = 1; i < str.length; i++) {\n if (str[i] !== str[i - 1]) {\n return false;\n }\n }\n\n return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA;;;;;+BAuBgBK;;;;;;;iEArBO,QAAQ;gCACY,4BAA4B;gCAIxC,6BAA6B;oCACnB,iCAAiC;AAenE,8BACLC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,OAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,OAAGjB,0BAAAA;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,QAAId,4CAAAA,EAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI3B,MAAM;gBACRuB;YACF;YAEA,eAAe;YACf,CAACvB,QAAQC,QAAQ+B,IAAI;QACvB;IACF;IAEA,MAAMG,~~cAAU1C~~,~~8BAAAA~~,EAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA+B,QAAQE,SAAS,OAAG7C,8BAAAA,EAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}
1	+ {"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/*\n useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n \n @internal\n /\nexport function useButtonTriggerSlot(\n triggerFromProps: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n 'use no memo';\n\n const {\n state: { open, setOpen, getOptionById },\n defaultProps,\n activeDescendantController,\n } = options;\n\n // jump to matching option based on typing\n const searchString = React.useRef('');\n const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n const moveToNextMatchingOption = (\n matcher: (optionText: string) => boolean,\n opt: { startFromNext: boolean } = { startFromNext: false },\n ) => {\n const { startFromNext } = opt;\n const activeOptionId = activeDescendantController.active();\n\n const nextInOrder = activeDescendantController.find(\n id => {\n const option = getOptionById(id);\n return !!option && matcher(option.text);\n },\n { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n );\n\n if (nextInOrder) {\n return nextInOrder;\n }\n\n // Cycle back to first match\n return activeDescendantController.find(id => {\n const option = getOptionById(id);\n return !!option && matcher(option.text);\n });\n };\n\n const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n if (\n moveToNextMatchingOption(\n optionText => {\n return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n },\n {\n // Slowly pressing the same key will cycle through options\n startFromNext: searchString.current.length === 1,\n },\n )\n ) {\n return;\n }\n\n // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n if (\n allCharactersSame(searchString.current) &&\n moveToNextMatchingOption(\n optionText => {\n return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n },\n {\n // if the search is all the same letter, cycle through options starting with that letter\n startFromNext: true,\n },\n )\n ) {\n return;\n }\n\n activeDescendantController.blur();\n };\n\n const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n // clear timeout, if it exists\n clearKeyTimeout();\n\n // if the key was a char key, update search string\n if (getDropdownActionFromKey(ev) === 'Type') {\n // update search string\n searchString.current += ev.key.toLowerCase();\n setKeyTimeout(() => {\n searchString.current = '';\n }, 500);\n\n if (open) {\n moveToNextMatchingOptionWithSameCharacterHandling();\n }\n\n // update state\n !open && setOpen(ev, true);\n }\n };\n\n const trigger = useTriggerSlot(triggerFromProps, ref, {\n state: options.state,\n defaultProps,\n elementType: 'button',\n activeDescendantController,\n });\n // eslint-disable-next-line react-hooks/immutability, react-hooks/refs\n trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n return trigger;\n}\n\n/\n @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n for (let i = 1; i < str.length; i++) {\n if (str[i] !== str[i - 1]) {\n return false;\n }\n }\n\n return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA;;;;;+BAuBgBK;;;;;;;iEArBO,QAAQ;gCACY,4BAA4B;gCAIxC,6BAA6B;oCACnB,iCAAiC;AAenE,8BACLC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,OAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,OAAGjB,0BAAAA;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,QAAId,4CAAAA,EAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI3B,MAAM;gBACRuB;YACF;YAEA,eAAe;YACf,CAACvB,QAAQC,QAAQ+B,IAAI;QACvB;IACF;IAEA,MAAMG,UAAU1C,kCAAAA,EAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA,sEAAsE;IACtE+B,QAAQE,SAAS,OAAG7C,8BAAAA,EAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}

package/lib-commonjs/components/Dropdown/useDropdown.js CHANGED Viewed

@@ -29,7 +29,7 @@ const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
 const _Listbox = require("../Listbox/Listbox");
 const _useListboxSlot = require("../../utils/useListboxSlot");
 const _useButtonTriggerSlot = require("./useButtonTriggerSlot");
-const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
+const _isComboboxOptionElement = require("../../utils/isComboboxOptionElement");
 const useDropdownBase_unstable = (props, ref)=>{
     'use no memo';
     var _state_clearButton;
@@ -38,7 +38,7 @@ const useDropdownBase_unstable = (props, ref)=>{
         supportsLabelFor: true
     });
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
-        matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
+        matchOption: _isComboboxOptionElement.isComboboxOptionElement
     });
     const dropdownInternalState = (0, _useComboboxBaseState.useComboboxBaseState)({
         ...props,

package/lib-commonjs/components/Dropdown/useDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useMergedRefs,\n slot,\n useEventCallback,\n useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownBaseProps, DropdownBaseState, DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/*\n Create the base state required to render Dropdown, without design-only props.\n \n @param props - props from this instance of Dropdown (without appearance and size)\n * @param ref - reference to root HTMLButtonElement of Dropdown\n /\nexport const useDropdownBase_unstable = (\n props: DropdownBaseProps,\n ref: React.Ref<HTMLButtonElement>,\n): DropdownBaseState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const dropdownInternalState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n const { appearance: _appearance, size: _size, freeform: _freeform, ...baseState } = dropdownInternalState;\n const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: ['children'],\n });\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n state: dropdownInternalState,\n triggerRef,\n defaultProps: {\n children: props.children,\n },\n });\n\n const { targetDocument } = useFluent();\n\n useOnClickOutside({\n element: targetDocument,\n callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n disabled: !open,\n });\n\n const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: dropdownInternalState,\n defaultProps: {\n type: 'button',\n // tabster navigation breaks if the button is disabled and tabIndex is 0\n tabIndex: triggerNativeProps.disabled ? undefined : 0,\n children: baseState.value \|\| props.placeholder,\n 'aria-controls': open ? listbox?.id : undefined,\n ...triggerNativeProps,\n },\n activeDescendantController,\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n const state: DropdownBaseState = {\n components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n root: rootSlot,\n button: trigger,\n listbox: open \|\| hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n // Safari doesn't allow to focus an element with this\n // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n tabIndex: showClearButton ? 0 : undefined,\n type: 'button',\n },\n elementType: 'button',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n elementType: 'span',\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n activeDescendantController,\n ...baseState,\n };\n\n const onClearButtonClick = useEventCallback(\n mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n clearSelection(ev);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n\n/\n Create the state required to render Dropdown.\n \n The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n \n @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n 'use no memo';\n\n const { appearance = 'outline', size = 'medium', ...baseProps } = props;\n const baseState = useDropdownBase_unstable(baseProps, ref);\n\n if (baseState.clearButton) {\n baseState.clearButton.children ??= <DismissIcon />;\n }\n\n if (baseState.expandIcon) {\n baseState.expandIcon.children ??= <ChevronDownIcon />;\n }\n\n return {\n ...baseState,\n appearance,\n size,\n };\n};\n"],"names":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdownBase_unstable","props","ref","state","supportsLabelFor","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","dropdownInternalState","freeform","appearance","_appearance","size","_size","_freeform","baseState","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error","useDropdown_unstable","baseProps"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useMergedRefs,\n slot,\n useEventCallback,\n useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownBaseProps, DropdownBaseState, DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\n\n/*\n Create the base state required to render Dropdown, without design-only props.\n \n @param props - props from this instance of Dropdown (without appearance and size)\n * @param ref - reference to root HTMLButtonElement of Dropdown\n /\nexport const useDropdownBase_unstable = (\n props: DropdownBaseProps,\n ref: React.Ref<HTMLButtonElement>,\n): DropdownBaseState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n matchOption: isComboboxOptionElement,\n });\n\n const dropdownInternalState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n const { appearance: _appearance, size: _size, freeform: _freeform, ...baseState } = dropdownInternalState;\n const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: ['children'],\n });\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n state: dropdownInternalState,\n triggerRef,\n defaultProps: {\n children: props.children,\n },\n });\n\n const { targetDocument } = useFluent();\n\n useOnClickOutside({\n element: targetDocument,\n callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n disabled: !open,\n });\n\n const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: dropdownInternalState,\n defaultProps: {\n type: 'button',\n // tabster navigation breaks if the button is disabled and tabIndex is 0\n tabIndex: triggerNativeProps.disabled ? undefined : 0,\n children: baseState.value \|\| props.placeholder,\n 'aria-controls': open ? listbox?.id : undefined,\n ...triggerNativeProps,\n },\n activeDescendantController,\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n const state: DropdownBaseState = {\n components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n root: rootSlot,\n button: trigger,\n listbox: open \|\| hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n // Safari doesn't allow to focus an element with this\n // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n tabIndex: showClearButton ? 0 : undefined,\n type: 'button',\n },\n elementType: 'button',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n elementType: 'span',\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n activeDescendantController,\n ...baseState,\n };\n\n const onClearButtonClick = useEventCallback(\n // eslint-disable-next-line react-hooks/refs\n mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n clearSelection(ev);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n\n/\n Create the state required to render Dropdown.\n \n The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n \n @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n 'use no memo';\n\n const { appearance = 'outline', size = 'medium', ...baseProps } = props;\n const baseState = useDropdownBase_unstable(baseProps, ref);\n\n if (baseState.clearButton) {\n baseState.clearButton.children ??= <DismissIcon />;\n }\n\n if (baseState.expandIcon) {\n baseState.expandIcon.children ??= <ChevronDownIcon />;\n }\n\n return {\n ...baseState,\n appearance,\n size,\n };\n};\n"],"names":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","isComboboxOptionElement","useDropdownBase_unstable","props","ref","state","supportsLabelFor","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","dropdownInternalState","freeform","appearance","_appearance","size","_size","_freeform","baseState","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error","useDropdown_unstable","baseProps"],"mappings":"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"}

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

@@ -638,15 +638,20 @@ const useDropdownStyles_unstable = (state)=>{
     const styles = useStyles();
     const iconStyles = useIconStyles();
     const clearButtonStyle = useBaseClearButtonStyle();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.button.className = (0, _react.mergeClasses)(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.className = (0, _react.mergeClasses)(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
     }
     if (state.clearButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
     }
     return state;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDropdownStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\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 Styles for Dropdown\n / const 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 // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\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 '@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 '@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 '@supports selector(:has())': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)'\n }\n }\n },\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\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 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 '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n medium: {\n ...typographyStyles.body1,\n padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\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 '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\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 // 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 // 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 disabled: {\n color: tokens.colorNeutralForegroundDisabled\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 ...createFocusOutlineStyle()\n});\n/*\n Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n 'use no memo';\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 state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n }\n if (state.clearButton) {\n state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n }\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Br277j9","Btis473","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}
1	+ {"version":3,"sources":["useDropdownStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\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 Styles for Dropdown\n / const 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 // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\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 '@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 '@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 '@supports selector(:has())': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)'\n }\n }\n },\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\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 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 '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n medium: {\n ...typographyStyles.body1,\n padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\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 '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\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 // 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 // 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 disabled: {\n color: tokens.colorNeutralForegroundDisabled\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 ...createFocusOutlineStyle()\n});\n/*\n Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n 'use no memo';\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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n }\n if (state.clearButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n }\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Br277j9","Btis473","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}

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

@@ -245,15 +245,20 @@ const useDropdownStyles_unstable = (state)=>{
     const styles = useStyles();
     const iconStyles = useIconStyles();
     const clearButtonStyle = useBaseClearButtonStyle();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.button.className = (0, _react.mergeClasses)(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.className = (0, _react.mergeClasses)(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
     }
     if (state.clearButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
     }
     return state;

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 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 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":"AAAA;;;;;;;;;;;;IASaQ,kBAAAA;;;IA2PAuG,0BAAAA;;;;8BAlQ2B,0BAA0B;4BACzB,wBAAwB;uBAEK,iBAAiB;gCAC7D,6BAA6B;AAGhD,2BAA0D;IAC/DtG,MAAM;IACNC,QAAQ;IACRC,aAAa;IACbC,YAAY;IACZC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BK,MAAM;QACJM,cAAcd,kBAAAA,CAAOe,kBAAkB;QACvCC,WAAW;QACXC,SAAS;QACTC,UAAU;QACVC,UAAU;QACVC,eAAe;QAEf,6CAA6C;QAC7C,iBAAiB;YACfC,cAAc;YACdC,cAAc;YACdC,cAAc;QAChB;QAEA,iEAAiE;QACjE,WAAW;YACTP,WAAW;YACXQ,SAAS;YACTL,UAAU;YACVM,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAAC,IAAI,EAAE5B,kBAAAA,CAAO6B,gBAAgB,CAAC,EAAE,EAAE7B,kBAAAA,CAAOe,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB9B,kBAAAA,CAAOe,kBAAkB;YACjDgB,yBAAyB/B,kBAAAA,CAAOe,kBAAkB;YAClDiB,cAAc,GAAGhC,kBAAAA,CAAO6B,gBAAgB,CAAC,OAAO,EAAE7B,kBAAAA,CAAOiC,wBAAwB,EAAE;YACnFC,UAAU;YACVC,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,kBAAAA,CAAOsC,iBAAiB;YAC5CC,iBAAiBvC,kBAAAA,CAAOwC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,kBAAAA,CAAOyC,cAAc;YACzCF,iBAAiBvC,kBAAAA,CAAO0C,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7BI,mBAAmB3C,kBAAAA,CAAO4C,+BAA+B;QAC3D;QAEA,+BAA+B;YAC7B,CAAC,CAAC,MAAM,EAAErC,mBAAmBG,WAAW,CAAC,cAAc,CAAC,CAAC,EAAE;gBACzDiC,mBAAmB;gBACnBR,WAAW;YACb;QACF;IACF;IAEAvB,SAAS;QACPI,WAAW;QACX6B,WAAW,GAAG7C,kBAAAA,CAAO8C,QAAQ,EAAE;QAC/BhC,cAAcd,kBAAAA,CAAOe,kBAAkB;QACvCgC,WAAW;IACb;IAEAC,kBAAkB;QAChB/B,SAAS;IACX;IAEA,+GAA+G;IAC/G,0GAA0G;IAC1GgC,eAAe;QACbC,QAAQ;IACV;IAEAzC,QAAQ;QACN0C,YAAY;QACZC,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;QAClDC,QAAQ;QACRtC,WAAW;QACXuC,OAAOvD,kBAAAA,CAAOwD,uBAAuB;QACrCC,WAAWzD,kBAAAA,CAAO0D,oBAAoB;QACtCC,QAAQ;QACR1C,SAAS;QACT2C,YAAY5D,kBAAAA,CAAO6D,cAAc;QACjCC,qBAAqB;QACrBC,gBAAgB;QAChBC,WAAW;QACXC,OAAO;QAEP,WAAW;YACT3C,cAAc;QAChB;IACF;IAEA4C,aAAa;QACXX,OAAOvD,kBAAAA,CAAOmE,uBAAuB;IACvC;IAEA,gBAAgB;IAChBC,OAAO;QACL,GAAGnE,4BAAAA,CAAiBoE,QAAQ;QAC5BC,SAAS,CAAC,IAAI,EACZtE,kBAAAA,CAAOuE,uBAAuB,CAC/B,KAAK,EAAE,CAAC,KAAK,EAAEvE,kBAAAA,CAAOuE,uBAAuB,CAAC,GAAG,EAAEvE,kBAAAA,CAAO0D,oBAAoB,CAAC,CAAC,CAAC,EAAE;IACtF;IACAc,QAAQ;QACN,GAAGvE,4BAAAA,CAAiBwE,KAAK;QACzBH,SAAS,CAAC,IAAI,EACZtE,kBAAAA,CAAO0E,uBAAuB,CAC/B,KAAK,EAAE,CAAC,KAAK,EAAE1E,kBAAAA,CAAO0E,uBAAuB,CAAC,GAAG,EAAE1E,kBAAAA,CAAO0D,oBAAoB,CAAC,CAAC,CAAC,EAAE;IACtF;IACAiB,OAAO;QACLlB,WAAWzD,kBAAAA,CAAOuE,uBAAuB;QACzC,GAAGtE,4BAAAA,CAAiB2E,KAAK;QACzBN,SAAS,CAAC,IAAI,EACZtE,kBAAAA,CAAO6E,kBAAkB,CAC1B,KAAK,EAAE,CAAC,KAAK,EAAE7E,kBAAAA,CAAO6E,kBAAkB,CAAC,GAAG,EAAE7E,kBAAAA,CAAOuE,uBAAuB,CAAC,CAAC,CAAC,EAAE;IACpF;IAEA,sBAAsB;IACtBO,SAAS;QACP1B,iBAAiBpD,kBAAAA,CAAO+E,uBAAuB;QAC/CzB,QAAQ,GAAGtD,kBAAAA,CAAOgF,eAAe,CAAC,OAAO,EAAEhF,kBAAAA,CAAOiF,mBAAmB,EAAE;QACvEtC,mBAAmB3C,kBAAAA,CAAOkF,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,WAAW;YACT,GAAG9E,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAOqF,wBAAwB,CAAC;YAC1D1C,mBAAmB3C,kBAAAA,CAAOsF,iCAAiC;QAC7D;QAEA,YAAY;YACV,GAAGjF,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAOuF,0BAA0B,CAAC;YAC5D5C,mBAAmB3C,kBAAAA,CAAOwF,mCAAmC;QAC/D;QAEA,kBAAkB;YAChB,GAAGnF,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAOuF,0BAA0B,CAAC;YAC5D5C,mBAAmB3C,kBAAAA,CAAOwF,mCAAmC;QAC/D;IACF;IACAC,WAAW;QACTrC,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;QAClDrB,cAAc,GAAGhC,kBAAAA,CAAOgF,eAAe,CAAC,OAAO,EAAEhF,kBAAAA,CAAOkF,4BAA4B,EAAE;QACtFpE,cAAc;IAChB;IACA,kBAAkB;QAChBsC,iBAAiBpD,kBAAAA,CAAO+E,uBAAuB;QAC/CzB,QAAQ,GAAGtD,kBAAAA,CAAOgF,eAAe,CAAC,kBAAkB,CAAC;IACvD;IACA,iBAAiB;QACf5B,iBAAiBpD,kBAAAA,CAAO0F,uBAAuB;QAC/CpC,QAAQ,GAAGtD,kBAAAA,CAAOgF,eAAe,CAAC,kBAAkB,CAAC;IACvD;IACAW,SAAS;QACP,iDAAiD;YAC/C,GAAGtF,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAO4F,sBAAsB,CAAC;QAC1D;IACF;IACAC,kBAAkB;QAChB,iDAAiD;YAC/ClD,mBAAmB3C,kBAAAA,CAAO4F,sBAAsB;QAClD;IACF;IACAE,UAAU;QACRnC,QAAQ;QACRP,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;QAClD,GAAGhD,iBAAAA,CAAW+E,WAAW,CAACpF,kBAAAA,CAAO+F,0BAA0B,CAAC;QAC5D,kCAAkC;YAChC,GAAG1F,iBAAAA,CAAW+E,WAAW,CAAC,WAAW;QACvC;IACF;IAEAY,cAAc;QACZzC,OAAOvD,kBAAAA,CAAOiG,8BAA8B;QAC5CtC,QAAQ;IACV;IAEAuC,QAAQ;QACNjF,SAAS;IACX;AACF;AAEA,MAAMkF,oBAAgBhG,iBAAAA,EAAW;IAC/BiG,MAAM;QACJpF,WAAW;QACXuC,OAAOvD,kBAAAA,CAAOkF,4BAA4B;QAC1CjE,SAAS;QACToF,UAAUrG,kBAAAA,CAAOsG,eAAe;QAChCC,iBAAiB;QACjBC,eAAe;QAEf,4DAA4D;QAC5D,oEAAoE;QACpE,SAAS;YACPvF,SAAS;QACX;IACF;IAEA,qBAAqB;IACrBmD,OAAO;QACLiC,UAAU/F,yBAAAA,CAAU8D,KAAK;QACzBqC,YAAYzG,kBAAAA,CAAO0D,oBAAoB;IACzC;IACAc,QAAQ;QACN6B,UAAU/F,yBAAAA,CAAUkE,MAAM;QAC1BiC,YAAYzG,kBAAAA,CAAO0D,oBAAoB;IACzC;IACAiB,OAAO;QACL0B,UAAU/F,yBAAAA,CAAUqE,KAAK;QACzB8B,YAAYzG,kBAAAA,CAAOuE,uBAAuB;IAC5C;IAEAuB,UAAU;QACRvC,OAAOvD,kBAAAA,CAAOiG,8BAA8B;IAC9C;AACF;AAEA,MAAMS,8BAA0BxG,sBAAAA,EAAgB;IAC9CyG,WAAW;IACXvD,iBAAiBpD,kBAAAA,CAAOqD,0BAA0B;IAClDC,QAAQ;IACRK,QAAQ;IACR/B,QAAQ;IACRgF,QAAQ;IACRC,aAAa7G,kBAAAA,CAAO0E,uBAAuB;IAC3CJ,SAAS;IACTnD,UAAU;IAEV,OAAGpB,qCAAAA,GAAyB;AAC9B;AAKO,mCAAmC,CAACgH;IACzC;IAEA,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,kBAAkB,EAAEC,eAAe,EAAEC,IAAI,EAAE,GAAGL;IACxE,MAAMpB,UAAU,GAAGoB,MAAMtG,MAAM,CAAC,eAAe,EAAE,KAAK;IACtD,MAAMqF,WAAWiB,MAAMtG,MAAM,CAACqF,QAAQ;IACtC,MAAMuB,SAASxG;IACf,MAAMyG,aAAanB;IACnB,MAAMoB,mBAAmBb;IAEzB,oDAAoD;IACpDK,MAAMvG,IAAI,CAACgH,SAAS,OAAGpH,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvB6G,OAAO7G,IAAI,EACX6G,MAAM,CAACL,WAAW,EAClB,CAAClB,YAAYkB,eAAe,aAAaK,OAAOlC,kBAAkB,EAClEQ,WAAWqB,eAAe,eAAeK,OAAO1B,OAAO,EACvDA,WAAWqB,eAAe,eAAeK,OAAOxB,gBAAgB,EAChEC,YAAYuB,OAAOvB,QAAQ,EAC3BiB,MAAMvG,IAAI,CAACgH,SAAS;IAGtB,oDAAoD;IACpDT,MAAMtG,MAAM,CAAC+G,SAAS,OAAGpH,mBAAAA,EACvBG,mBAAmBE,MAAM,EACzB4G,OAAO5G,MAAM,EACb4G,MAAM,CAACD,KAAK,EACZF,sBAAsBG,OAAOnD,WAAW,EACxC4B,YAAYuB,OAAOrB,YAAY,EAC/Be,MAAMtG,MAAM,CAAC+G,SAAS;IAGxB,IAAIT,MAAMnG,OAAO,EAAE;QACjB,oDAAoD;QACpDmG,MAAMnG,OAAO,CAAC4G,SAAS,OAAGpH,mBAAAA,EACxBG,mBAAmBK,OAAO,EAC1ByG,OAAOzG,OAAO,EACdmG,MAAMU,WAAW,IAAIJ,OAAOpE,aAAa,EACzC,CAACgE,QAAQI,OAAOrE,gBAAgB,EAChC+D,MAAMnG,OAAO,CAAC4G,SAAS;IAE3B;IAEA,IAAIT,MAAMpG,UAAU,EAAE;QACpB,oDAAoD;QACpDoG,MAAMpG,UAAU,CAAC6G,SAAS,OAAGpH,mBAAAA,EAC3BG,mBAAmBI,UAAU,EAC7B2G,WAAWlB,IAAI,EACfkB,UAAU,CAACF,KAAK,EAChBtB,YAAYwB,WAAWxB,QAAQ,EAC/BqB,mBAAmBE,OAAOnB,MAAM,EAChCa,MAAMpG,UAAU,CAAC6G,SAAS;IAE9B;IAEA,IAAIT,MAAMrG,WAAW,EAAE;QACrB,oDAAoD;QACpDqG,MAAMrG,WAAW,CAAC8G,SAAS,OAAGpH,mBAAAA,EAC5BG,mBAAmBG,WAAW,EAC9B6G,kBACAD,WAAWlB,IAAI,EACfkB,UAAU,CAACF,KAAK,EAChBtB,YAAYwB,WAAWxB,QAAQ,EAC/B,CAACqB,mBAAmBE,OAAOnB,MAAM,EACjCa,MAAMrG,WAAW,CAAC8G,SAAS;IAE/B;IAEA,OAAOT;AACT,EAAE"}