npm - @fluentui/react-combobox - Versions diffs - 9.0.0-beta.21 → 9.0.0-beta.23 - Mend

@fluentui/react-combobox 9.0.0-beta.21 → 9.0.0-beta.23

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

package/lib/components/Dropdown/useDropdownStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,SAAS,QAAQ,4BAA4B;AAGtD,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,MAAM,EAAE,sBAAsB;EAC9BC,UAAU,EAAE,0BAA0B;EACtCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAkKhB;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAiCpB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC;EAAI,CAAE,GAAGJ,KAAK;EAC5D,MAAMK,OAAO,GAAG,GAAGL,KAAK,CAACN,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC5D,MAAMY,QAAQ,GAAGN,KAAK,CAACN,MAAM,CAACY,QAAQ;EACtC,MAAMC,MAAM,GAAGV,SAAS,EAAE;EAC1B,MAAMW,UAAU,GAAGV,aAAa,EAAE;EAElCE,KAAK,CAACP,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CACjCG,kBAAkB,CAACC,IAAI,EACvBc,MAAM,CAACd,IAAI,EACXc,MAAM,CAACN,UAAU,CAAC,EAClBI,OAAO,IAAIJ,UAAU,KAAK,WAAW,IAAIM,MAAM,CAACF,OAAO,EACvDA,OAAO,IAAIJ,UAAU,KAAK,WAAW,IAAIM,MAAM,CAACG,gBAAgB,EAChEJ,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BN,KAAK,CAACP,IAAI,CAACgB,SAAS,CACrB;EAEDT,KAAK,CAACN,MAAM,CAACe,SAAS,GAAGpB,YAAY,CACnCG,kBAAkB,CAACE,MAAM,EACzBa,MAAM,CAACb,MAAM,EACba,MAAM,CAACH,IAAI,CAAC,EACZD,kBAAkB,IAAII,MAAM,CAACI,WAAW,EACxCX,KAAK,CAACN,MAAM,CAACe,SAAS,CACvB;EAED,IAAIT,KAAK,CAACJ,OAAO,EAAE;IACjBI,KAAK,CAACJ,OAAO,CAACa,SAAS,GAAGpB,YAAY,CACpCG,kBAAkB,CAACI,OAAO,EAC1BW,MAAM,CAACX,OAAO,EACd,CAACM,IAAI,IAAIK,MAAM,CAACK,gBAAgB,EAChCZ,KAAK,CAACJ,OAAO,CAACa,SAAS,CACxB;;EAGH,IAAIT,KAAK,CAACL,UAAU,EAAE;IACpBK,KAAK,CAACL,UAAU,CAACc,SAAS,GAAGpB,YAAY,CACvCG,kBAAkB,CAACG,UAAU,EAC7Ba,UAAU,CAACK,IAAI,EACfL,UAAU,CAACJ,IAAI,CAAC,EAChBE,QAAQ,IAAIE,UAAU,CAACF,QAAQ,EAC/BN,KAAK,CAACL,UAAU,CAACc,SAAS,CAC3B;;EAGH,OAAOT,KAAK;AACd,CAAC","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","invalidUnderline","placeholder","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { 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 expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/*\n Styles for Dropdown\n /\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\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 ...shorthands.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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\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 ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.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\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\n/\n Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, 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\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\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 state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\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 state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { 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 expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/*\n Styles for Dropdown\n /\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\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 ...shorthands.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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\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 ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.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\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\n/\n Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, 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\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 !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 state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}

package/lib/utils/useTriggerListboxSlots.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
 /*
  * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,
@@ -26,7 +26,9 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
   // handle trigger focus/blur
   const triggerRef = React.useRef(null);
   // resolve listbox shorthand props
+  const listboxId = useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
   const listbox = listboxSlot && {
+    id: listboxId,
     multiselect,
     tabIndex: undefined,
     ...listboxSlot

package/lib/utils/useTriggerListboxSlots.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["React","mergeCallbacks","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listbox","tabIndex","undefined","trigger","id","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/\n useTriggerListboxSlots 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 /\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement \| HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listbox: typeof listboxSlot = listboxSlot && {\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n /\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n const listboxOnClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox?.onClick),\n );\n\n const listboxOnMouseOver = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox?.onMouseOver),\n );\n\n const listboxOnMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox?.onMouseDown),\n );\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n listbox.onClick = listboxOnClick;\n listbox.onMouseOver = listboxOnMouseOver;\n listbox.onMouseDown = listboxOnMouseDown;\n }\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAElG,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,6BAA6B;AAmB1F;;;;;AAKA,OAAM,SAAUC,sBAAsB,CACpCC,KAAwB,EACxBC,KAAwB,EACxBC,GAAoD,EACpDC,WAAgF,EAChFC,WAAoD;EAKpD,MAAM;IAAEC;EAAW,CAAE,GAAGL,KAAK;EAC7B,MAAM;IACJM,YAAY;IACZC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,cAAc;IACdC,IAAI;IACJC,YAAY;IACZC,eAAe;IACfC,eAAe;IACfC,WAAW;IACXC;EAAO,CACR,GAAGf,KAAK;EAET;EACA,MAAMgB,UAAU,GAAezB,KAAK,CAAC0B,MAAM,CAAC,IAAI,CAAC;EAEjD;EACA,MAAMC,SAAS,GAAGzB,KAAK,CAAC,gBAAgB,EAAEU,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEgB,EAAE,CAAC;EAC1D,MAAMC,OAAO,GAAuBjB,WAAW,IAAI;IACjDgB,EAAE,EAAED,SAAS;IACbd,WAAW;IACXiB,QAAQ,EAAEC,SAAS;IACnB,GAAGnB;GACJ;EAED;EACA,MAAMoB,OAAO,GAAuB;IAClC,eAAe,EAAEb,IAAI;IACrB,uBAAuB,EAAEA,IAAI,GAAGL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEc,EAAE,GAAGG,SAAS;IAC5DE,IAAI,EAAE,UAAU;IAChB,GAAGtB,WAAW;IACd;IACA;IACA;IACAD,GAAG,EAAEN,aAAa,CAACM,GAAG,EAAEC,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAED,GAAG,EAAEe,UAAU;GACrD;EAED;;;;;EAKA,MAAMS,cAAc,GAAG/B,gBAAgB,CACrCF,cAAc,CAAEkC,KAAuC,IAAI;;IACzD,gBAAU,CAACC,OAAO,0CAAEC,KAAK,EAAE;EAC7B,CAAC,EAAER,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,OAAO,CAAC,CACrB;EAED,MAAMC,kBAAkB,GAAGpC,gBAAgB,CACzCF,cAAc,CAAEkC,KAAuC,IAAI;IACzDb,eAAe,CAAC,KAAK,CAAC;EACxB,CAAC,EAAEO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEW,WAAW,CAAC,CACzB;EAED,MAAMC,kBAAkB,GAAGtC,gBAAgB,CACzCF,cAAc,CAAEkC,KAAuC,IAAI;IACzDjB,cAAc,CAACkB,OAAO,GAAG,IAAI;EAC/B,CAAC,EAAEP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEa,WAAW,CAAC,CACzB;EAED;EACA,IAAIb,OAAO,EAAE;IACXA,OAAO,CAACS,OAAO,GAAGJ,cAAc;IAChCL,OAAO,CAACW,WAAW,GAAGD,kBAAkB;IACxCV,OAAO,CAACa,WAAW,GAAGD,kBAAkB;;EAG1C;EACAT,OAAO,CAACW,MAAM,GAAG1C,cAAc,CAAEkC,KAA+E,IAAI;IAClH,IAAI,CAACjB,cAAc,CAACkB,OAAO,EAAE;MAC3BZ,OAAO,CAACW,KAAK,EAAE,KAAK,CAAC;;IAGvBjB,cAAc,CAACkB,OAAO,GAAG,KAAK;IAE9Bb,WAAW,CAAC,KAAK,CAAC;EACpB,CAAC,EAAES,OAAO,CAACW,MAAM,CAAC;EAElBX,OAAO,CAACM,OAAO,GAAGrC,cAAc,CAC7BkC,KAA+E,IAAI;IAClFX,OAAO,CAACW,KAAK,EAAE,CAAChB,IAAI,CAAC;EACvB,CAAC,EACDa,OAAO,CAACM,OAAO,CAChB;EAEDN,OAAO,CAACY,OAAO,GAAG3C,cAAc,CAC7BkC,KAA+E,IAAI;IAClFZ,WAAW,CAAC,IAAI,CAAC;EACnB,CAAC,EACDS,OAAO,CAACY,OAAO,CAChB;EAED;EACAZ,OAAO,CAACa,SAAS,GAAG5C,cAAc,CAC/BkC,KAAqF,IAAI;IACxF,MAAMW,MAAM,GAAGzC,wBAAwB,CAAC8B,KAAK,EAAE;MAAEhB,IAAI;MAAEN;IAAW,CAAE,CAAC;IACrE,MAAMkC,QAAQ,GAAGhC,QAAQ,EAAE,GAAG,CAAC;IAC/B,MAAMiC,WAAW,GAAGlC,YAAY,GAAGE,YAAY,CAACF,YAAY,CAACc,EAAE,CAAC,GAAG,CAAC,CAAC;IACrE,IAAIqB,QAAQ,GAAGD,WAAW;IAE1B,QAAQF,MAAM;MACZ,KAAK,MAAM;QACTX,KAAK,CAACe,cAAc,EAAE;QACtB5B,eAAe,CAAC,IAAI,CAAC;QACrBE,OAAO,CAACW,KAAK,EAAE,IAAI,CAAC;QACpB;MACF,KAAK,OAAO;QACV;QACAA,KAAK,CAACgB,eAAe,EAAE;QACvBhB,KAAK,CAACe,cAAc,EAAE;QACtB1B,OAAO,CAACW,KAAK,EAAE,KAAK,CAAC;QACrB;MACF,KAAK,aAAa;QAChB,CAACtB,WAAW,IAAI,EAACC,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEsC,QAAQ,KAAI5B,OAAO,CAACW,KAAK,EAAE,KAAK,CAAC;MAClE;MACA,KAAK,QAAQ;QACXrB,YAAY,IAAIM,YAAY,CAACe,KAAK,EAAErB,YAAY,CAAC;QACjDqB,KAAK,CAACe,cAAc,EAAE;QACtB;MACF,KAAK,KAAK;QACR,CAACrC,WAAW,IAAIC,YAAY,IAAIM,YAAY,CAACe,KAAK,EAAErB,YAAY,CAAC;QACjE;MACF;QACEmC,QAAQ,GAAG3C,kBAAkB,CAACwC,MAAM,EAAEE,WAAW,EAAED,QAAQ,CAAC;IAAC;IAEjE,IAAIE,QAAQ,KAAKD,WAAW,EAAE;MAC5B;MACAb,KAAK,CAACe,cAAc,EAAE;MACtB7B,eAAe,CAACJ,gBAAgB,CAACgC,QAAQ,CAAC,CAAC;MAC3C3B,eAAe,CAAC,IAAI,CAAC;;EAEzB,CAAC,EACDU,OAAO,CAACa,SAAS,CAClB;EAEDb,OAAO,CAACQ,WAAW,GAAGvC,cAAc,CACjCkC,KAA+E,IAAI;IAClFb,eAAe,CAAC,KAAK,CAAC;EACxB,CAAC,EACDU,OAAO,CAACQ,WAAW,CACpB;EAED,OAAO,CAACR,OAAO,EAAEH,OAAO,CAAC;AAC3B","names":["React","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxId","id","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/\n useTriggerListboxSlots 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 /\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement \| HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listboxId = useId('fluent-listbox', listboxSlot?.id);\n const listbox: typeof listboxSlot = listboxSlot && {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n /\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n const listboxOnClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox?.onClick),\n );\n\n const listboxOnMouseOver = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox?.onMouseOver),\n );\n\n const listboxOnMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox?.onMouseDown),\n );\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n listbox.onClick = listboxOnClick;\n listbox.onMouseOver = listboxOnMouseOver;\n listbox.onMouseDown = listboxOnMouseDown;\n }\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"]}

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

@@ -22,7 +22,7 @@ const Listbox_1 = /*#__PURE__*/require("../Listbox/Listbox");
  * @param ref - reference to root HTMLElement of Combobox
  */
 const useCombobox_unstable = (props, ref) => {
-  var _a;
+  var _a, _b;
   const baseState = useComboboxBaseState_1.useComboboxBaseState({
     ...props,
     editable: true
@@ -43,9 +43,12 @@ const useCombobox_unstable = (props, ref) => {
     value
   } = baseState;
   const {
+    disabled,
     freeform,
+    inlinePopup,
     multiselect
   } = props;
+  const comboId = react_utilities_1.useId('combobox-');
   const {
     primary: triggerNativeProps,
     root: rootNativeProps
@@ -105,6 +108,9 @@ const useCombobox_unstable = (props, ref) => {
     }
   };
   baseState.setOpen = (ev, newState) => {
+    if (disabled) {
+      return;
+    }
     if (!newState && !freeform) {
       setValue(undefined);
     }
@@ -127,7 +133,7 @@ const useCombobox_unstable = (props, ref) => {
   // open Combobox when typing
   const onTriggerKeyDown = ev => {
     if (!open && dropdownKeyActions_1.getDropdownActionFromKey(ev) === 'Type') {
-      setOpen(ev, true);
+      baseState.setOpen(ev, true);
     }
   };
   // resolve input and listbox slot props
@@ -165,6 +171,7 @@ const useCombobox_unstable = (props, ref) => {
     root: react_utilities_1.resolveShorthand(props.root, {
       required: true,
       defaultProps: {
+        'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
         ...rootNativeProps
       }
     }),
@@ -173,11 +180,12 @@ const useCombobox_unstable = (props, ref) => {
     expandIcon: react_utilities_1.resolveShorthand(props.expandIcon, {
       required: true,
       defaultProps: {
-        children: React.createElement(react_icons_1.ChevronDownRegular, null)
+        'aria-expanded': open,
+        children: React.createElement(react_icons_1.ChevronDownRegular, null),
+        role: 'button'
       }
     }),
-    ...baseState,
-    setOpen
+    ...baseState
   };
   state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, rootRef);
   /* handle open/close + focus change when clicking expandIcon */
@@ -202,6 +210,27 @@ const useCombobox_unstable = (props, ref) => {
   if (state.expandIcon) {
     state.expandIcon.onMouseDown = onExpandIconMouseDown;
     state.expandIcon.onClick = onExpandIconClick;
+    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
+    // using the following steps:
+    // 1. If there is an aria-label, it is "Open [aria-label]"
+    // 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
+    // 3. If there is no aria-label/ledby attr, it falls back to "Open"
+    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
+    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
+    const defaultOpenString = 'Open'; // this is english-only since it is the fallback
+    if (!hasExpandLabel) {
+      if (props['aria-labelledby']) {
+        const chevronId = (_b = state.expandIcon.id) !== null && _b !== void 0 ? _b : `${comboId}-chevron`;
+        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
+        state.expandIcon['aria-label'] = defaultOpenString;
+        state.expandIcon.id = chevronId;
+        state.expandIcon['aria-labelledby'] = chevronLabelledBy;
+      } else if (props['aria-label']) {
+        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
+      } else {
+        state.expandIcon['aria-label'] = defaultOpenString;
+      }
+    }
   }
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["useCombobox_unstable","props","ref","baseState","useComboboxBaseState_1","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","freeform","multiselect","primary","triggerNativeProps","root","rootNativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","popupDimensions","setPopupDimensions","useState","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","dropdownKeyActions_1","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/*\n Create the state required to render Combobox.\n \n The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n \n @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n /\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n const baseState = useComboboxBaseState({ ...props, editable: true });\n const {\n activeOption,\n clearSelection,\n getIndexOfId,\n getOptionsMatchingText,\n hasFocus,\n open,\n selectOption,\n selectedOptions,\n setActiveOption,\n setFocusVisible,\n setOpen,\n setValue,\n value,\n } = baseState;\n const { freeform, multiselect } = props;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n // calculate listbox width style based on trigger width\n const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n React.useEffect(() => {\n // only recalculate width when opening\n if (open) {\n const width = `${rootRef.current?.clientWidth}px`;\n if (width !== popupDimensions?.width) {\n setPopupDimensions({ width });\n }\n }\n }, [open, popupDimensions]);\n\n // set active option and selection based on typing\n const getOptionFromInput = (inputValue: string): OptionValue \| undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString \|\| searchString.length === 0) {\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\n };\n\n / Handle typed input /\n\n // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!baseState.open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n baseState.selectOption(ev, 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 baseState.setOpen = (ev, newState: boolean) => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n // update value and active option based on input\n const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.target.value;\n // update uncontrolled value\n baseState.setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n\n setFocusVisible(true);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (\n !multiselect &&\n selectedOptions.length === 1 &&\n (inputValue.length < 1 \|\| selectedOptions[0].indexOf(inputValue) !== 0)\n ) {\n clearSelection(ev);\n }\n };\n\n // open Combobox when typing\n const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n setOpen(ev, true);\n }\n };\n\n // resolve input and listbox slot props\n let triggerSlot: Slot<'input'>;\n let listboxSlot: Slot<typeof Listbox> \| undefined;\n\n triggerSlot = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref: useMergedRefs(props.input?.ref, triggerRef),\n type: 'text',\n value: value ?? '',\n ...triggerNativeProps,\n },\n });\n\n triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n // only resolve listbox slot if needed\n listboxSlot =\n open \|\| hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: popupDimensions,\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n const state: ComboboxState = {\n components: {\n root: 'div',\n input: 'input',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n }),\n ...baseState,\n setOpen,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n / handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon \|\| {};\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, () => {\n // do not dismiss on blur when closing via clicking the icon\n if (open) {\n baseState.ignoreNextBlur.current = true;\n }\n }),\n );\n\n const onExpandIconClick = useEventCallback(\n mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n // open and set focus\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n\n // set focus visible=false, since this can only be done with the mouse/pointer\n setFocusVisible(false);\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["useCombobox_unstable","props","ref","baseState","useComboboxBaseState_1","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","react_utilities_1","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","popupDimensions","setPopupDimensions","useState","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","dropdownKeyActions_1","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/*\n Create the state required to render Combobox.\n \n The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n \n @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n /\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n const baseState = useComboboxBaseState({ ...props, editable: true });\n const {\n activeOption,\n clearSelection,\n getIndexOfId,\n getOptionsMatchingText,\n hasFocus,\n open,\n selectOption,\n selectedOptions,\n setActiveOption,\n setFocusVisible,\n setOpen,\n setValue,\n value,\n } = baseState;\n const { disabled, freeform, inlinePopup, multiselect } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n // calculate listbox width style based on trigger width\n const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n React.useEffect(() => {\n // only recalculate width when opening\n if (open) {\n const width = `${rootRef.current?.clientWidth}px`;\n if (width !== popupDimensions?.width) {\n setPopupDimensions({ width });\n }\n }\n }, [open, popupDimensions]);\n\n // set active option and selection based on typing\n const getOptionFromInput = (inputValue: string): OptionValue \| undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString \|\| searchString.length === 0) {\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\n };\n\n / Handle typed input /\n\n // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!baseState.open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n baseState.selectOption(ev, 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 baseState.setOpen = (ev, newState: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n // update value and active option based on input\n const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.target.value;\n // update uncontrolled value\n baseState.setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n\n setFocusVisible(true);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (\n !multiselect &&\n selectedOptions.length === 1 &&\n (inputValue.length < 1 \|\| selectedOptions[0].indexOf(inputValue) !== 0)\n ) {\n clearSelection(ev);\n }\n };\n\n // open Combobox when typing\n const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n baseState.setOpen(ev, true);\n }\n };\n\n // resolve input and listbox slot props\n let triggerSlot: Slot<'input'>;\n let listboxSlot: Slot<typeof Listbox> \| undefined;\n\n triggerSlot = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref: useMergedRefs(props.input?.ref, triggerRef),\n type: 'text',\n value: value ?? '',\n ...triggerNativeProps,\n },\n });\n\n triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n // only resolve listbox slot if needed\n listboxSlot =\n open \|\| hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: popupDimensions,\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n const state: ComboboxState = {\n components: {\n root: 'div',\n input: 'input',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n 'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n }),\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n / handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon \|\| {};\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, () => {\n // do not dismiss on blur when closing via clicking the icon\n if (open) {\n baseState.ignoreNextBlur.current = true;\n }\n }),\n );\n\n const onExpandIconClick = useEventCallback(\n mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n // open and set focus\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n\n // set focus visible=false, since this can only be done with the mouse/pointer\n setFocusVisible(false);\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\n\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const hasExpandLabel = state.expandIcon['aria-label'] \|\| state.expandIcon['aria-labelledby'];\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (props['aria-labelledby']) {\n const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n state.expandIcon['aria-label'] = defaultOpenString;\n state.expandIcon.id = chevronId;\n state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n } else if (props['aria-label']) {\n state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n } else {\n state.expandIcon['aria-label'] = defaultOpenString;\n }\n }\n }\n\n return state;\n};\n"]}

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

@@ -250,6 +250,7 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
   icon: {
     B7ck84d: "f1ewtqcl",
     sj55zd: "fxkbij4",
+    Bceei9c: "f1k6fduh",
     mc9l5x: "ftgm304",
     Be2twd7: "f1pp30po",
     Bo70h7d: "fvc9v3g"
@@ -267,10 +268,11 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
     Frg6f3: ["f1t5qyk5", "f1ikr372"]
   },
   disabled: {
-    sj55zd: "f1s2aq7o"
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["exports","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","react_1","useInputStyles","useIconStyles","useComboboxStyles_unstable","state","appearance","open","size","invalid","disabled","styles","iconStyles","inputStyles","className","outlineInteractive","invalidUnderline","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { 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 listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n small: '22px',\n medium: '30px',\n large: '38px',\n};\n\n/*\n Styles for Combobox\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.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\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 ...shorthands.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\n listboxCollapsed: {\n display: 'none',\n },\n\n // size variants\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalM,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.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 backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\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 height: fieldHeights.small,\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n medium: {\n height: fieldHeights.medium,\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n large: {\n height: fieldHeights.large,\n ...typographyStyles.body2,\n ...shorthands.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 display: 'block',\n fontSize: tokens.fontSizeBase500,\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/\n Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n const { appearance, open, size } = 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 !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 state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AAGaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,UAAU,EAAE,0BAA0B;EACtCC,OAAO,EAAE;CACV;AAED;AACA;AACA,MAAMC,YAAY,GAAG;EACnBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EA8H1B;AAEF,MAAMC,cAAc,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAyC/B;AAEF,MAAME,aAAa,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgC9B;AAEF;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAAI,CAAE,GAAGH,KAAK;EACxC,MAAMI,OAAO,GAAG,GAAGJ,KAAK,CAACZ,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC3D,MAAMiB,QAAQ,GAAGL,KAAK,CAACZ,KAAK,CAACiB,QAAQ;EACrC,MAAMC,MAAM,GAAGX,SAAS,EAAE;EAC1B,MAAMY,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,WAAW,GAAGX,cAAc,EAAE;EAEpCG,KAAK,CAACb,IAAI,CAACsB,SAAS,GAAGb,oBAAY,CACjCV,0BAAkB,CAACC,IAAI,EACvBmB,MAAM,CAACnB,IAAI,EACXmB,MAAM,CAACL,UAAU,CAAC,EAClBK,MAAM,CAACH,IAAI,CAAC,EACZ,CAACE,QAAQ,IAAIJ,UAAU,KAAK,SAAS,IAAIK,MAAM,CAACI,kBAAkB,EAClEN,OAAO,IAAIH,UAAU,KAAK,WAAW,IAAIK,MAAM,CAACF,OAAO,EACvDA,OAAO,IAAIH,UAAU,KAAK,WAAW,IAAIK,MAAM,CAACK,gBAAgB,EAChEN,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACb,IAAI,CAACsB,SAAS,CACrB;EAEDT,KAAK,CAACZ,KAAK,CAACqB,SAAS,GAAGb,oBAAY,CAClCV,0BAAkB,CAACE,KAAK,EACxBoB,WAAW,CAACpB,KAAK,EACjBoB,WAAW,CAACL,IAAI,CAAC,EACjBE,QAAQ,IAAIG,WAAW,CAACH,QAAQ,EAChCL,KAAK,CAACZ,KAAK,CAACqB,SAAS,CACtB;EAED,IAAIT,KAAK,CAACV,OAAO,EAAE;IACjBU,KAAK,CAACV,OAAO,CAACmB,SAAS,GAAGb,oBAAY,CACpCV,0BAAkB,CAACI,OAAO,EAC1BgB,MAAM,CAAChB,OAAO,EACd,CAACY,IAAI,IAAII,MAAM,CAACM,gBAAgB,EAChCZ,KAAK,CAACV,OAAO,CAACmB,SAAS,CACxB;;EAGH,IAAIT,KAAK,CAACX,UAAU,EAAE;IACpBW,KAAK,CAACX,UAAU,CAACoB,SAAS,GAAGb,oBAAY,CACvCV,0BAAkB,CAACG,UAAU,EAC7BkB,UAAU,CAACM,IAAI,EACfN,UAAU,CAACJ,IAAI,CAAC,EAChBE,QAAQ,IAAIE,UAAU,CAACF,QAAQ,EAC/BL,KAAK,CAACX,UAAU,CAACoB,SAAS,CAC3B;;EAGH,OAAOT,KAAK;AACd,CAAC;AAhDYd,kCAA0B","names":["exports","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","react_1","useInputStyles","useIconStyles","useComboboxStyles_unstable","state","appearance","open","size","invalid","disabled","styles","iconStyles","inputStyles","className","outlineInteractive","invalidUnderline","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { 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 listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n small: '22px',\n medium: '30px',\n large: '38px',\n};\n\n/*\n Styles for Combobox\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.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\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 ...shorthands.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\n listboxCollapsed: {\n display: 'none',\n },\n\n // size variants\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalM,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.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 backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\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 height: fieldHeights.small,\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n medium: {\n height: fieldHeights.medium,\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n large: {\n height: fieldHeights.large,\n ...typographyStyles.body2,\n ...shorthands.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\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 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 const { appearance, open, size } = 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 !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 state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}

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

@@ -133,6 +133,7 @@ const useDropdown_unstable = (props, ref) => {
     root: react_utilities_1.resolveShorthand(props.root, {
       required: true,
       defaultProps: {
+        'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
         children: props.children,
         ...rootNativeProps
       }

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["useDropdown_unstable","props","ref","baseState","useComboboxBaseState_1","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","rootRef","React","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionValue","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","dropdownKeyActions_1","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","placeholderVisible","react_utilities_2","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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 const baseState = useComboboxBaseState(props);\n const {\n activeOption,\n getIndexOfId,\n getOptionsMatchingText,\n open,\n setActiveOption,\n setFocusVisible,\n setOpen,\n } = baseState;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: ['children'],\n });\n\n // set listbox popup width based off the root/trigger width\n const rootRef = React.useRef<HTMLDivElement>(null);\n const [popupWidth, setPopupWidth] = React.useState<string>();\n React.useEffect(() => {\n const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n setPopupWidth(width);\n }, [open]);\n\n // jump to matching option based on typing\n const searchString = React.useRef('');\n const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n const getNextMatchingOption = (): OptionValue \| undefined => {\n // first check for matches for the full searchString\n let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n let matches = getOptionsMatchingText(matcher);\n let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n // if the dropdown is already open and the searchstring is a single character,\n // then look after the current activeOption for letters\n // this is so slowly typing the same letter will cycle through matches\n if (open && searchString.current.length === 1) {\n startIndex++;\n }\n\n // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n if (!matches.length) {\n const letters = searchString.current.split('');\n const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n // if the search is all the same letter, cycle through options starting with that letter\n if (allSameLetter) {\n startIndex++;\n matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n matches = getOptionsMatchingText(matcher);\n }\n }\n\n // if there is an active option and multiple matches,\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\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 // update state\n !open && setOpen(ev, true);\n\n const nextOption = getNextMatchingOption();\n setActiveOption(nextOption);\n setFocusVisible(true);\n }\n };\n\n // resolve button and listbox slot props\n let triggerSlot: Slot<'button'>;\n let listboxSlot: Slot<typeof Listbox> \| undefined;\n\n triggerSlot = resolveShorthand(props.button, {\n required: true,\n defaultProps: {\n type: 'button',\n children: baseState.value \|\| props.placeholder,\n ...triggerNativeProps,\n },\n });\n\n triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n listboxSlot =\n baseState.open \|\| baseState.hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: { width: popupWidth },\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n const state: DropdownState = {\n components: {\n root: 'div',\n button: 'button',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n children: props.children,\n ...rootNativeProps,\n },\n }),\n button: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["useDropdown_unstable","props","ref","baseState","useComboboxBaseState_1","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","rootRef","React","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionValue","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","dropdownKeyActions_1","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","inlinePopup","react_icons_1","placeholderVisible","react_utilities_2","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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 const baseState = useComboboxBaseState(props);\n const {\n activeOption,\n getIndexOfId,\n getOptionsMatchingText,\n open,\n setActiveOption,\n setFocusVisible,\n setOpen,\n } = baseState;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: ['children'],\n });\n\n // set listbox popup width based off the root/trigger width\n const rootRef = React.useRef<HTMLDivElement>(null);\n const [popupWidth, setPopupWidth] = React.useState<string>();\n React.useEffect(() => {\n const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n setPopupWidth(width);\n }, [open]);\n\n // jump to matching option based on typing\n const searchString = React.useRef('');\n const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n const getNextMatchingOption = (): OptionValue \| undefined => {\n // first check for matches for the full searchString\n let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n let matches = getOptionsMatchingText(matcher);\n let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n // if the dropdown is already open and the searchstring is a single character,\n // then look after the current activeOption for letters\n // this is so slowly typing the same letter will cycle through matches\n if (open && searchString.current.length === 1) {\n startIndex++;\n }\n\n // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n if (!matches.length) {\n const letters = searchString.current.split('');\n const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n // if the search is all the same letter, cycle through options starting with that letter\n if (allSameLetter) {\n startIndex++;\n matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n matches = getOptionsMatchingText(matcher);\n }\n }\n\n // if there is an active option and multiple matches,\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\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 // update state\n !open && setOpen(ev, true);\n\n const nextOption = getNextMatchingOption();\n setActiveOption(nextOption);\n setFocusVisible(true);\n }\n };\n\n // resolve button and listbox slot props\n let triggerSlot: Slot<'button'>;\n let listboxSlot: Slot<typeof Listbox> \| undefined;\n\n triggerSlot = resolveShorthand(props.button, {\n required: true,\n defaultProps: {\n type: 'button',\n children: baseState.value \|\| props.placeholder,\n ...triggerNativeProps,\n },\n });\n\n triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n listboxSlot =\n baseState.open \|\| baseState.hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: { width: popupWidth },\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n const state: DropdownState = {\n components: {\n root: 'div',\n button: 'button',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n 'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n }),\n button: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n return state;\n};\n"]}

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

@@ -198,9 +198,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     Bn1d65q: ["f1rvyvqg", "f14g86mu"],
     Bxeuatn: "f1cwzwz",
     n51gp8: ["f14g86mu", "f1rvyvqg"]
+  },
+  disabledText: {
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr"
   }
 }, {
-  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
   w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
@@ -265,8 +269,8 @@ const useDropdownStyles_unstable = state => {
   const disabled = state.button.disabled;
   const styles = useStyles();
   const iconStyles = useIconStyles();
-  state.root.className = react_1.mergeClasses(exports.dropdownClassNames.root, styles.root, styles[appearance], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
-  state.button.className = react_1.mergeClasses(exports.dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, state.button.className);
+  state.root.className = react_1.mergeClasses(exports.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);
+  state.button.className = react_1.mergeClasses(exports.dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
   if (state.listbox) {
     state.listbox.className = react_1.mergeClasses(exports.dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
   }

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["exports","root","button","expandIcon","listbox","useStyles","react_1","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","invalidUnderline","placeholder","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { 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 expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/*\n Styles for Dropdown\n /\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\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 ...shorthands.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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\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 ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.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\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\n/\n Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, 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\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\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 state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\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 state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["exports","root","button","expandIcon","listbox","useStyles","react_1","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { 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 expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/*\n Styles for Dropdown\n /\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\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 ...shorthands.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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\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 ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.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\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\n/\n Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, 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\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 !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 state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}

package/lib-commonjs/utils/useTriggerListboxSlots.js CHANGED Viewed

@@ -32,7 +32,9 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
   // handle trigger focus/blur
   const triggerRef = React.useRef(null);
   // resolve listbox shorthand props
+  const listboxId = react_utilities_1.useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
   const listbox = listboxSlot && {
+    id: listboxId,
     multiselect,
     tabIndex: undefined,
     ...listboxSlot