@fluentui/react-combobox 9.11.4 → 9.11.6

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 (31) hide show
  1. package/CHANGELOG.md +34 -3
  2. package/dist/index.d.ts +38 -0
  3. package/lib/components/Combobox/Combobox.types.js.map +1 -1
  4. package/lib/components/Combobox/useComboboxStyles.styles.js +157 -82
  5. package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
  6. package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
  7. package/lib/components/Dropdown/useDropdownStyles.styles.js +139 -73
  8. package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
  9. package/lib/components/Listbox/Listbox.types.js.map +1 -1
  10. package/lib/components/Listbox/useListboxStyles.styles.js +15 -9
  11. package/lib/components/Listbox/useListboxStyles.styles.js.map +1 -1
  12. package/lib/components/Option/Option.types.js.map +1 -1
  13. package/lib/components/Option/useOptionStyles.styles.js +67 -41
  14. package/lib/components/Option/useOptionStyles.styles.js.map +1 -1
  15. package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
  16. package/lib/components/OptionGroup/useOptionGroupStyles.styles.js +29 -17
  17. package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
  18. package/lib/utils/ComboboxBase.types.js.map +1 -1
  19. package/lib/utils/OptionCollection.types.js.map +1 -1
  20. package/lib/utils/Selection.types.js.map +1 -1
  21. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +232 -252
  22. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
  23. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +214 -241
  24. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
  25. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +21 -20
  26. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map +1 -1
  27. package/lib-commonjs/components/Option/useOptionStyles.styles.js +90 -158
  28. package/lib-commonjs/components/Option/useOptionStyles.styles.js.map +1 -1
  29. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +43 -54
  30. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
  31. package/package.json +11 -11
package/lib/components/Combobox/useComboboxStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","B6of3ja","t21cq0","jrapky","Frg6f3","B68tc82","Bmxbyg5","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n/**\n * Styles for Combobox\n */ const 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 // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n // size variants\n small: {\n height: fieldHeights.small,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n height: fieldHeights.medium,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n height: fieldHeights.large,\n paddingRight: tokens.spacingHorizontalM\n },\n // 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 '&: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 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});\nconst useInputStyles = makeStyles({\n input: {\n alignSelf: 'stretch',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n }\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n 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});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\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 hidden: {\n display: 'none'\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n ...shorthands.margin('-1px'),\n ...shorthands.overflow('hidden'),\n ...shorthands.padding('0px'),\n width: '1px',\n position: 'absolute'\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 * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n const { appearance, open, size, showClearIcon } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n }\n if (state.clearIcon) {\n state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z8tnut","B0ocmuz","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n // size variants\n small: {\n height: fieldHeights.small,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n height: fieldHeights.medium,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n height: fieldHeights.large,\n paddingRight: tokens.spacingHorizontalM\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n 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});\nconst useInputStyles = makeStyles({\n input: {\n alignSelf: 'stretch',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n }\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n medium: {\n ...typographyStyles.body1,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n ...typographyStyles.body2,\n padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\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 hidden: {\n display: 'none'\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n },\n // 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 * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n const { appearance, open, size, showClearIcon } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n }\n if (state.clearIcon) {\n state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/Dropdown/Dropdown.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /* The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /* The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /* The dropdown clear icon */\n clearButton?: Slot<'button'>;\n\n /* The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /* The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n Omit<ComboboxBaseState, 'freeform'> & {\n /* Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n\n showClearButton?: boolean;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AAAA,WAmDwE"}
1
+ {"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /** The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /** The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /** The dropdown clear icon */\n clearButton?: Slot<'button'>;\n\n /** The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /** The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n Omit<ComboboxBaseState, 'freeform'> & {\n /** Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n\n showClearButton?: boolean;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AAAA,WAmDwE"}
package/lib/components/Dropdown/useDropdownStyles.styles.js CHANGED
@@ -14,10 +14,11 @@ export const dropdownClassNames = {
14
14
  */
15
15
  const useStyles = /*#__PURE__*/__styles({
16
16
  root: {
17
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
18
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
19
- B7oj6ja: ["f1jar5jt", "fyu767a"],
20
- Btl43ni: ["fyu767a", "f1jar5jt"],
17
+ Beyfa6y: 0,
18
+ Bbmb7ep: 0,
19
+ Btl43ni: 0,
20
+ B7oj6ja: 0,
21
+ Dimara: "ft85np5",
21
22
  B7ck84d: "f1ewtqcl",
22
23
  mc9l5x: "ftuwxu6",
23
24
  Bf4jedk: "f1exfvgq",
@@ -34,9 +35,10 @@ const useStyles = /*#__PURE__*/__styles({
34
35
  Dlnsje: "ffyw7fx",
35
36
  d9w3h3: ["f1kp91vd", "f1ibwz09"],
36
37
  B3778ie: ["f1ibwz09", "f1kp91vd"],
37
- Bcgy8vk: "f14pi962",
38
- Bw17bha: "f1lh990p",
39
- B1q35kw: "f1jc6hxc",
38
+ B1q35kw: 0,
39
+ Bw17bha: 0,
40
+ Bcgy8vk: 0,
41
+ Bjuhk93: "f1mnjydx",
40
42
  Gjdm7m: "f13evtba",
41
43
  b1kco5: "f1yk9hq",
42
44
  Ba2ppi3: "fhwpy7i",
@@ -57,10 +59,11 @@ const useStyles = /*#__PURE__*/__styles({
57
59
  listbox: {
58
60
  B7ck84d: "f1ewtqcl",
59
61
  E5pizo: "f1hg901r",
60
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
61
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
62
- B7oj6ja: ["f1jar5jt", "fyu767a"],
63
- Btl43ni: ["fyu767a", "f1jar5jt"],
62
+ Beyfa6y: 0,
63
+ Bbmb7ep: 0,
64
+ Btl43ni: 0,
65
+ B7oj6ja: 0,
66
+ Dimara: "ft85np5",
64
67
  Bxyxcbc: "fmmk62d"
65
68
  },
66
69
  listboxCollapsed: {
@@ -72,10 +75,23 @@ const useStyles = /*#__PURE__*/__styles({
72
75
  button: {
73
76
  Bt984gj: "f122n59",
74
77
  De3pzq: "f1c21dwh",
75
- B4j52fo: "fre7gi1",
76
- Bekrc4i: ["f1358rze", "f1rvrf73"],
77
- Bn0qgzm: "fqdk4by",
78
- ibv6hh: ["f1rvrf73", "f1358rze"],
78
+ Bgfg5da: 0,
79
+ B9xav0g: 0,
80
+ oivjwe: 0,
81
+ Bn0qgzm: 0,
82
+ B4g9neb: 0,
83
+ zhjwy3: 0,
84
+ wvpqe5: 0,
85
+ ibv6hh: 0,
86
+ u1mtju: 0,
87
+ h3c5rm: 0,
88
+ vrafjx: 0,
89
+ Bekrc4i: 0,
90
+ i8vvqc: 0,
91
+ g2u3we: 0,
92
+ icvyot: 0,
93
+ B4j52fo: 0,
94
+ irswps: "f3bhgqh",
79
95
  B7ck84d: "f1ewtqcl",
80
96
  sj55zd: "f19n0e5",
81
97
  i8kkvl: "f14mj54c",
@@ -96,20 +112,22 @@ const useStyles = /*#__PURE__*/__styles({
96
112
  Be2twd7: "fy9rknc",
97
113
  Bhrd7zp: "figsok6",
98
114
  Bg96gwp: "fwrc4pm",
99
- z8tnut: "f1khb0e9",
100
- z189sj: ["fdw0yi8", "fk8j09s"],
101
- Byoj8tv: "f1jnq6q7",
102
- uwmqm3: ["f1xile11", "fqznh8f"]
115
+ Byoj8tv: 0,
116
+ uwmqm3: 0,
117
+ z189sj: 0,
118
+ z8tnut: 0,
119
+ B0ocmuz: ["fye6m5k", "f3cq2dl"]
103
120
  },
104
121
  medium: {
105
122
  Bahqtrf: "fk6fouc",
106
123
  Be2twd7: "fkhj508",
107
124
  Bhrd7zp: "figsok6",
108
125
  Bg96gwp: "f1i3iumi",
109
- z8tnut: "f1sbtcvk",
110
- z189sj: ["f11gcy0p", "f1ng84yb"],
111
- Byoj8tv: "fdghr9",
112
- uwmqm3: ["f1e60jzv", "f135dnwl"]
126
+ Byoj8tv: 0,
127
+ uwmqm3: 0,
128
+ z189sj: 0,
129
+ z8tnut: 0,
130
+ B0ocmuz: ["f14ev680", "f58uxzw"]
113
131
  },
114
132
  large: {
115
133
  i8kkvl: "f1rjii52",
@@ -117,25 +135,31 @@ const useStyles = /*#__PURE__*/__styles({
117
135
  Be2twd7: "fod5ikn",
118
136
  Bhrd7zp: "figsok6",
119
137
  Bg96gwp: "faaz57k",
120
- z8tnut: "f1a1bwwz",
121
- z189sj: ["fw5db7e", "f1uw59to"],
122
- Byoj8tv: "fy7v416",
123
- uwmqm3: ["fnphzt9", "flt1dlf"]
138
+ Byoj8tv: 0,
139
+ uwmqm3: 0,
140
+ z189sj: 0,
141
+ z8tnut: 0,
142
+ B0ocmuz: ["f139mn7i", "f1v3q0m"]
124
143
  },
125
144
  outline: {
126
145
  De3pzq: "fxugw4r",
127
- B4j52fo: "f192inf7",
128
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
129
- Bn0qgzm: "f1vxd6vx",
130
- ibv6hh: ["f1ojsxk5", "f5tn483"],
131
- icvyot: "fzkkow9",
132
- vrafjx: ["fcdblym", "fjik90z"],
133
- oivjwe: "fg706s2",
134
- wvpqe5: ["fjik90z", "fcdblym"],
135
- g2u3we: "fj3muxo",
136
- h3c5rm: ["f1akhkt", "f1lxtadh"],
146
+ Bgfg5da: 0,
137
147
  B9xav0g: "f1c1zstj",
138
- zhjwy3: ["f1lxtadh", "f1akhkt"]
148
+ oivjwe: 0,
149
+ Bn0qgzm: 0,
150
+ B4g9neb: 0,
151
+ zhjwy3: 0,
152
+ wvpqe5: 0,
153
+ ibv6hh: 0,
154
+ u1mtju: 0,
155
+ h3c5rm: 0,
156
+ vrafjx: 0,
157
+ Bekrc4i: 0,
158
+ i8vvqc: 0,
159
+ g2u3we: 0,
160
+ icvyot: 0,
161
+ B4j52fo: 0,
162
+ irswps: "fhz96rm"
139
163
  },
140
164
  outlineInteractive: {
141
165
  Bgoe8wy: "fvcxoqz",
@@ -149,43 +173,55 @@ const useStyles = /*#__PURE__*/__styles({
149
173
  },
150
174
  underline: {
151
175
  De3pzq: "f1c21dwh",
152
- Bn0qgzm: "f1vxd6vx",
153
- oivjwe: "fg706s2",
154
- B9xav0g: "f1c1zstj",
155
- Bbmb7ep: ["f1krrbdw", "f1deotkl"],
156
- Beyfa6y: ["f1deotkl", "f1krrbdw"],
157
- B7oj6ja: ["f10ostut", "f1ozlkrg"],
158
- Btl43ni: ["f1ozlkrg", "f10ostut"]
176
+ B9xav0g: 0,
177
+ oivjwe: 0,
178
+ Bn0qgzm: 0,
179
+ Bgfg5da: "f9ez7ne",
180
+ Beyfa6y: 0,
181
+ Bbmb7ep: 0,
182
+ Btl43ni: 0,
183
+ B7oj6ja: 0,
184
+ Dimara: "fokr779"
159
185
  },
160
186
  "filled-lighter": {
161
187
  De3pzq: "fxugw4r",
162
- B4j52fo: "f192inf7",
163
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
164
- Bn0qgzm: "f1vxd6vx",
165
- ibv6hh: ["f1ojsxk5", "f5tn483"],
166
- icvyot: "fzkkow9",
167
- vrafjx: ["fcdblym", "fjik90z"],
168
- oivjwe: "fg706s2",
169
- wvpqe5: ["fjik90z", "fcdblym"],
170
- g2u3we: "f1p3nwhy",
171
- h3c5rm: ["f11589ue", "f1pdflbu"],
172
- B9xav0g: "f1q5o8ev",
173
- zhjwy3: ["f1pdflbu", "f11589ue"]
188
+ Bgfg5da: 0,
189
+ B9xav0g: 0,
190
+ oivjwe: 0,
191
+ Bn0qgzm: 0,
192
+ B4g9neb: 0,
193
+ zhjwy3: 0,
194
+ wvpqe5: 0,
195
+ ibv6hh: 0,
196
+ u1mtju: 0,
197
+ h3c5rm: 0,
198
+ vrafjx: 0,
199
+ Bekrc4i: 0,
200
+ i8vvqc: 0,
201
+ g2u3we: 0,
202
+ icvyot: 0,
203
+ B4j52fo: 0,
204
+ irswps: "fs2rfia"
174
205
  },
175
206
  "filled-darker": {
176
207
  De3pzq: "f16xq7d1",
177
- B4j52fo: "f192inf7",
178
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
179
- Bn0qgzm: "f1vxd6vx",
180
- ibv6hh: ["f1ojsxk5", "f5tn483"],
181
- icvyot: "fzkkow9",
182
- vrafjx: ["fcdblym", "fjik90z"],
183
- oivjwe: "fg706s2",
184
- wvpqe5: ["fjik90z", "fcdblym"],
185
- g2u3we: "f1p3nwhy",
186
- h3c5rm: ["f11589ue", "f1pdflbu"],
187
- B9xav0g: "f1q5o8ev",
188
- zhjwy3: ["f1pdflbu", "f11589ue"]
208
+ Bgfg5da: 0,
209
+ B9xav0g: 0,
210
+ oivjwe: 0,
211
+ Bn0qgzm: 0,
212
+ B4g9neb: 0,
213
+ zhjwy3: 0,
214
+ wvpqe5: 0,
215
+ ibv6hh: 0,
216
+ u1mtju: 0,
217
+ h3c5rm: 0,
218
+ vrafjx: 0,
219
+ Bekrc4i: 0,
220
+ i8vvqc: 0,
221
+ g2u3we: 0,
222
+ icvyot: 0,
223
+ B4j52fo: 0,
224
+ irswps: "fs2rfia"
189
225
  },
190
226
  invalid: {
191
227
  tvckwq: "fs4k3qj",
@@ -216,7 +252,37 @@ const useStyles = /*#__PURE__*/__styles({
216
252
  mc9l5x: "fjseox"
217
253
  }
218
254
  }, {
219
- 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;}", ".ftuwxu6{display:inline-flex;}", ".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{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".f122n59{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{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{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{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);}"],
255
+ d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
256
+ p: -1
257
+ }], ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".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);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
258
+ p: -1
259
+ }], ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
260
+ p: -1
261
+ }], ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".f122n59{align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f3bhgqh{border:none;}", {
262
+ p: -2
263
+ }], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{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{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);}", [".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
264
+ p: -1
265
+ }], [".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}", {
266
+ p: -1
267
+ }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
268
+ p: -1
269
+ }], [".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}", {
270
+ p: -1
271
+ }], ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", {
272
+ p: -1
273
+ }], [".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}", {
274
+ p: -1
275
+ }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
276
+ p: -2
277
+ }], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", [".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
278
+ p: -1
279
+ }], [".fokr779{border-radius:0;}", {
280
+ p: -1
281
+ }], [".fs2rfia{border:var(--strokeWidthThin) solid transparent;}", {
282
+ p: -2
283
+ }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", [".fs2rfia{border:var(--strokeWidthThin) solid transparent;}", {
284
+ p: -2
285
+ }], ".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);}"],
220
286
  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{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);}"],
221
287
  m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
222
288
  m: "screen and (prefers-reduced-motion: reduce)"
@@ -266,9 +332,9 @@ const useIconStyles = /*#__PURE__*/__styles({
266
332
  }, {
267
333
  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".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);}"]
268
334
  });
269
- const useBaseClearButtonStyle = /*#__PURE__*/__resetStyles("r1ekmruf", "r1aeuc1g", {
270
- r: [".r1ekmruf{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1ekmruf:focus{outline-style:none;}", ".r1ekmruf:focus-visible{outline-style:none;}", ".r1ekmruf[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1ekmruf[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1aeuc1g{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1aeuc1g:focus{outline-style:none;}", ".r1aeuc1g:focus-visible{outline-style:none;}", ".r1aeuc1g[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1aeuc1g[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
271
- s: ["@media (forced-colors: active){.r1ekmruf[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1aeuc1g[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
335
+ const useBaseClearButtonStyle = /*#__PURE__*/__resetStyles("rticfuj", "r1vp6jef", {
336
+ r: [".rticfuj{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".rticfuj:focus{outline-style:none;}", ".rticfuj:focus-visible{outline-style:none;}", ".rticfuj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rticfuj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1vp6jef{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1vp6jef:focus{outline-style:none;}", ".r1vp6jef:focus-visible{outline-style:none;}", ".r1vp6jef[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1vp6jef[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
337
+ s: ["@media (forced-colors: active){.rticfuj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1vp6jef[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
272
338
  });
273
339
  /**
274
340
  * Apply styling to the Dropdown slots based on the state
package/lib/components/Dropdown/useDropdownStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n clearButton: 'fui-Dropdown__clearButton',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-flex',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n '@supports selector(:has(*))': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)'\n }\n }\n },\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...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 '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding('3px', tokens.spacingHorizontalSNudge, '3px', `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding('5px', tokens.spacingHorizontalMNudge, '5px', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding('7px', tokens.spacingHorizontalM, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\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 '&: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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n alignSelf: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n cursor: 'pointer',\n height: 'fit-content',\n margin: 0,\n marginRight: tokens.spacingHorizontalMNudge,\n padding: 0,\n position: 'relative',\n ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n const { appearance, open, placeholderVisible, showClearButton, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const clearButtonStyle = useBaseClearButtonStyle();\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n }\n if (state.clearButton) {\n state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,SAAS,QAAQ,4BAA4B;AACtD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,MAAM,EAAE,sBAAsB;EAC9BC,WAAW,EAAE,2BAA2B;EACxCC,UAAU,EAAE,0BAA0B;EACtCC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAK,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAxC,OAAA;IAAAM,OAAA;IAAAmC,MAAA;IAAAvC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAqC,OAAA;EAAA;EAAAC,gBAAA;IAAApC,MAAA;EAAA;EAAAqC,aAAA;IAAAC,OAAA;EAAA;EAAAhD,MAAA;IAAAiD,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA7C,OAAA;IAAA8C,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA/C,MAAA;IAAAgD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,WAAA;IAAAT,MAAA;EAAA;EAAAU,KAAA;IAAAP,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAf,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAlB,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,OAAA;IAAAzB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAA3C,MAAA;IAAAG,OAAA;IAAAyB,MAAA;IAAAI,OAAA;IAAA7E,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA;IAAA0C,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAjC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAA3C,OAAA;IAAAP,MAAA;IAAA8B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAlD,MAAA;IAAAE,OAAA;EAAA;EAAAiD,MAAA;IAAAhG,MAAA;EAAA;AAAA;EAAAiG,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA8JrB,CAAC;AACF,MAAMC,aAAa,gBAAGxH,QAAA;EAAAyH,IAAA;IAAA1G,OAAA;IAAA8C,MAAA;IAAA7C,MAAA;IAAAwD,OAAA;IAAAkD,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAArD,KAAA;IAAAC,OAAA;IAAAqD,MAAA;EAAA;EAAA9C,MAAA;IAAAP,OAAA;IAAAqD,MAAA;EAAA;EAAA7C,KAAA;IAAAR,OAAA;IAAAqD,MAAA;EAAA;EAAAnB,QAAA;IAAA7C,MAAA;EAAA;AAAA;EAAAoD,CAAA;AAAA,CA8BrB,CAAC;AACF,MAAMa,uBAAuB,gBAAG/H,aAAA;EAAAgI,CAAA;EAAAC,CAAA;AAAA,CAW/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;EAAK,CAAC,GAAGL,KAAK;EAC7E,MAAM9B,OAAO,GAAI,GAAE8B,KAAK,CAAC5H,MAAM,CAAC,cAAc,CAAE,EAAC,KAAK,MAAM;EAC5D,MAAMoG,QAAQ,GAAGwB,KAAK,CAAC5H,MAAM,CAACoG,QAAQ;EACtC,MAAM8B,MAAM,GAAG9H,SAAS,CAAC,CAAC;EAC1B,MAAM+H,UAAU,GAAGjB,aAAa,CAAC,CAAC;EAClC,MAAMkB,gBAAgB,GAAGZ,uBAAuB,CAAC,CAAC;EAClDI,KAAK,CAAC7H,IAAI,CAACsI,SAAS,GAAG1I,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEmI,MAAM,CAACnI,IAAI,EAAEmI,MAAM,CAACL,UAAU,CAAC,EAAE,CAACzB,QAAQ,IAAIyB,UAAU,KAAK,SAAS,IAAIK,MAAM,CAAC9C,kBAAkB,EAAEU,OAAO,IAAI+B,UAAU,KAAK,WAAW,IAAIK,MAAM,CAACpC,OAAO,EAAEA,OAAO,IAAI+B,UAAU,KAAK,WAAW,IAAIK,MAAM,CAAC/B,gBAAgB,EAAEC,QAAQ,IAAI8B,MAAM,CAAC9B,QAAQ,EAAEwB,KAAK,CAAC7H,IAAI,CAACsI,SAAS,CAAC;EAC/UT,KAAK,CAAC5H,MAAM,CAACqI,SAAS,GAAG1I,YAAY,CAACG,kBAAkB,CAACE,MAAM,EAAEkI,MAAM,CAAClI,MAAM,EAAEkI,MAAM,CAACD,IAAI,CAAC,EAAEF,kBAAkB,IAAIG,MAAM,CAAClE,WAAW,EAAEoC,QAAQ,IAAI8B,MAAM,CAACzB,YAAY,EAAEmB,KAAK,CAAC5H,MAAM,CAACqI,SAAS,CAAC;EAChM,IAAIT,KAAK,CAACzH,OAAO,EAAE;IACfyH,KAAK,CAACzH,OAAO,CAACkI,SAAS,GAAG1I,YAAY,CAACG,kBAAkB,CAACK,OAAO,EAAE+H,MAAM,CAAC/H,OAAO,EAAEyH,KAAK,CAACU,WAAW,IAAIJ,MAAM,CAACnF,aAAa,EAAE,CAAC+E,IAAI,IAAII,MAAM,CAACpF,gBAAgB,EAAE8E,KAAK,CAACzH,OAAO,CAACkI,SAAS,CAAC;EAC5L;EACA,IAAIT,KAAK,CAAC1H,UAAU,EAAE;IAClB0H,KAAK,CAAC1H,UAAU,CAACmI,SAAS,GAAG1I,YAAY,CAACG,kBAAkB,CAACI,UAAU,EAAEiI,UAAU,CAAChB,IAAI,EAAEgB,UAAU,CAACF,IAAI,CAAC,EAAE7B,QAAQ,IAAI+B,UAAU,CAAC/B,QAAQ,EAAE4B,eAAe,IAAIE,MAAM,CAACxB,MAAM,EAAEkB,KAAK,CAAC1H,UAAU,CAACmI,SAAS,CAAC;EAC9M;EACA,IAAIT,KAAK,CAAC3H,WAAW,EAAE;IACnB2H,KAAK,CAAC3H,WAAW,CAACoI,SAAS,GAAG1I,YAAY,CAACG,kBAAkB,CAACG,WAAW,EAAEmI,gBAAgB,EAAED,UAAU,CAAChB,IAAI,EAAEgB,UAAU,CAACF,IAAI,CAAC,EAAE7B,QAAQ,IAAI+B,UAAU,CAAC/B,QAAQ,EAAE,CAAC4B,eAAe,IAAIE,MAAM,CAACxB,MAAM,EAAEkB,KAAK,CAAC3H,WAAW,CAACoI,SAAS,CAAC;EACpO;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n clearButton: 'fui-Dropdown__clearButton',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n display: 'inline-flex',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n '@supports selector(:has(*))': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)'\n }\n }\n },\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n medium: {\n ...typographyStyles.body1,\n padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n alignSelf: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n cursor: 'pointer',\n height: 'fit-content',\n margin: 0,\n marginRight: tokens.spacingHorizontalMNudge,\n padding: 0,\n position: 'relative',\n ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n const { appearance, open, placeholderVisible, showClearButton, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const clearButtonStyle = useBaseClearButtonStyle();\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n }\n if (state.clearButton) {\n state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/Listbox/Listbox.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /* The root slot, a `<div>` with `role=\"listbox\"` */\n root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.active()\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsDE"}
1
+ {"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /** The root slot, a `<div>` with `role=\"listbox\"` */\n root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.active()\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsDE"}
package/lib/components/Listbox/useListboxStyles.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { tokens } from '@fluentui/react-theme';
2
- import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
+ import { __styles, mergeClasses } from '@griffel/react';
3
3
  export const listboxClassNames = {
4
4
  root: 'fui-Listbox'
5
5
  };
@@ -14,17 +14,23 @@ const useStyles = /*#__PURE__*/__styles({
14
14
  Beiy3e4: "f1vx9l62",
15
15
  Bf4jedk: "f3hsy1e",
16
16
  Bmxbyg5: "f5zp4f",
17
- Bpd4iqm: "fpvhumw",
18
- oeaueh: "f1yog68k",
19
- Bw0xxkn: "f13sgyd8",
20
- z8tnut: "f1x4af0m",
21
- z189sj: ["f7x41pl", "fruq291"],
22
- Byoj8tv: "fd55psn",
23
- uwmqm3: ["fruq291", "f7x41pl"],
17
+ Bw0xxkn: 0,
18
+ oeaueh: 0,
19
+ Bpd4iqm: 0,
20
+ Befb4lg: "f1iepc6i",
21
+ Byoj8tv: 0,
22
+ uwmqm3: 0,
23
+ z189sj: 0,
24
+ z8tnut: 0,
25
+ B0ocmuz: "f1t35pdg",
24
26
  Belr9w4: "fiut8dr"
25
27
  }
26
28
  }, {
27
- d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
29
+ d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", [".f1iepc6i{outline:1px solid var(--colorTransparentStroke);}", {
30
+ p: -1
31
+ }], [".f1t35pdg{padding:var(--spacingHorizontalXS);}", {
32
+ p: -1
33
+ }], ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
28
34
  });
29
35
  /**
30
36
  * Apply styling to the Listbox slots based on the state
package/lib/components/Listbox/useListboxStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bpd4iqm","oeaueh","Bw0xxkn","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","d","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding(tokens.spacingHorizontalXS),\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/Option/Option.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n /* The root option slot, with role=\"option\" */\n root: NonNullable<Slot<'div'>>;\n\n /* The check icon that is visible for selected options */\n checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /**\n * Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n */\n disabled?: boolean;\n\n /*\n * Defines a unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n */\n value?: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /**\n * @deprecated - no longer used internally\n */\n active: boolean;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /* If true, the option is part of a multiselect combobox or listbox */\n multiselect?: boolean;\n\n /* If true, the option is selected */\n selected: boolean;\n };\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n /** The root option slot, with role=\"option\" */\n root: NonNullable<Slot<'div'>>;\n\n /** The check icon that is visible for selected options */\n checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /**\n * Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n */\n disabled?: boolean;\n\n /**\n * Defines a unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n */\n value?: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /**\n * @deprecated - no longer used internally\n */\n active: boolean;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /** If true, the option is part of a multiselect combobox or listbox */\n multiselect?: boolean;\n\n /** If true, the option is selected */\n selected: boolean;\n };\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}