@fluentui/react-combobox 9.3.4 → 9.4.1

package/lib/components/Combobox/useComboboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","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","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","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"sources":["../../../src/components/Combobox/useComboboxStyles.styles.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    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\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"],"mappings":"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"}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","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","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","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"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    listbox: 'fui-Combobox__listbox'\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 * 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    },\n    listboxCollapsed: {\n        display: 'none'\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    // 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        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        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});\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    // 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  } = 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, !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, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/Dropdown/Dropdown.js

@@ -6,13 +6,11 @@ import { useComboboxContextValues } from '../../contexts/useComboboxContextValue
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Dropdown component: a selection control that allows users to choose from a set of possible options
- */
-export const Dropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useDropdown_unstable(props, ref);
-  const contextValues = useComboboxContextValues(state);
-  useDropdownStyles_unstable(state);
-  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);
-  return renderDropdown_unstable(state, contextValues);
+ */ export const Dropdown = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useDropdown_unstable(props, ref);
+    const contextValues = useComboboxContextValues(state);
+    useDropdownStyles_unstable(state);
+    useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);
+    return renderDropdown_unstable(state, contextValues);
 });
 Dropdown.displayName = 'Dropdown';
-//# sourceMappingURL=Dropdown.js.map

package/lib/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,wBAAwB,QAAQ;AAEzC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQT,oBAAA,CAAqBO,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBP,wBAAA,CAAyBM,KAAA;EAE/CP,0BAAA,CAA2BO,KAAA;EAE3BL,2BAAA,CAA4B,8BAA8BK,KAAA;EAE1D,OAAOR,uBAAA,CAAwBQ,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}
+{"version":3,"sources":["Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/Dropdown/Dropdown.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=Dropdown.types.js.map
+export { };

package/lib/components/Dropdown/Dropdown.types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\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 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  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"mappings":"AAAA"}
+{"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\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 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  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"names":[],"mappings":"AAAA,WAyCgE"}

package/lib/components/Dropdown/index.js

@@ -3,4 +3,3 @@ export * from './Dropdown.types';
 export * from './renderDropdown';
 export * from './useDropdown';
 export * from './useDropdownStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Dropdown/index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}

package/lib/components/Dropdown/renderDropdown.js

@@ -1,17 +1,12 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { Portal } from '@fluentui/react-portal';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Dropdown
- */
-export const renderDropdown_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(ComboboxContext.Provider, {
-    value: contextValues.combobox
-  }, /*#__PURE__*/createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(slots.listbox, slotProps.listbox)))));
+ */ export const renderDropdown_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
+        value: contextValues.combobox
+    }, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, null, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
 };
-//# sourceMappingURL=renderDropdown.js.map

package/lib/components/Dropdown/renderDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"sources":["../../../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlotsNext<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,MAAM,QAAQ;AAEvB,SAASC,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAGhC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA4BG,KAAA;EAEzD,oBACEJ,aAjBJ,CAiBKM,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BR,aAlBN,CAkBOE,eAAA,CAAgBO,QAAQ;IAACC,KAAA,EAAOL,aAAA,CAAcM;kBAC7CX,aAnBR,CAmBSM,KAAA,CAAMM,MAAM,EAAKL,SAAA,CAAUK,MAAM,EAC/BL,SAAA,CAAUK,MAAM,CAACC,QAAQ,EACzBP,KAAA,CAAMQ,UAAU,iBAAId,aArB/B,CAqBgCM,KAAA,CAAMQ,UAAU,EAAKP,SAAA,CAAUO,UAAU,IAEhER,KAAA,CAAMS,OAAO,KACXX,KAAA,CAAMY,WAAW,gBAChBhB,aAzBZ,CAyBaM,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,iBAEpCf,aA3BZ,CA2BaD,MAAA,qBACCC,aA5Bd,CA4BeM,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,EAEvC,CAAD;AAIV"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlotsNext<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAjBJ,cAiBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAlBN,cAkBON,gBAAgBO,QAAQ;QAACC,OAAOL,cAAcM,QAAQ;qBACrD,AAnBR,cAmBSL,MAAMM,MAAM,EAAKL,UAAUK,MAAM,EAC/BL,UAAUK,MAAM,CAACC,QAAQ,EACzBP,MAAMQ,UAAU,kBAAI,AArB/B,cAqBgCR,MAAMQ,UAAU,EAAKP,UAAUO,UAAU,IAEhER,MAAMS,OAAO,IACXX,CAAAA,MAAMY,WAAW,iBAChB,AAzBZ,cAyBaV,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,kBAEpC,AA3BZ,cA2BahB,4BACC,AA5Bd,cA4BeO,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,EAEvC,AAAD;AAIV,EAAE"}

package/lib/components/Dropdown/useDropdown.js

@@ -16,140 +16,131 @@ import { useMergedRefs } from '@fluentui/react-utilities';
  *
  * @param props - props from this instance of Dropdown
  * @param ref - reference to root HTMLElement of Dropdown
- */
-export const useDropdown_unstable = (props, ref) => {
-  // Merge props from surrounding <Field>, if any
-  props = useFieldControlProps_unstable(props, {
-    supportsLabelFor: true,
-    supportsSize: true
-  });
-  const baseState = useComboboxBaseState(props);
-  const {
-    activeOption,
-    getIndexOfId,
-    getOptionsMatchingText,
-    open,
-    setActiveOption,
-    setFocusVisible,
-    setOpen
-  } = baseState;
-  const {
-    primary: triggerNativeProps,
-    root: rootNativeProps
-  } = getPartitionedNativeProps({
-    props,
-    primarySlotTagName: 'button',
-    excludedPropNames: ['children']
-  });
-  // set listbox popup width based off the root/trigger width
-  const rootRef = React.useRef(null);
-  const [popupWidth, setPopupWidth] = React.useState();
-  React.useEffect(() => {
-    var _rootRef_current;
-    const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;
-    setPopupWidth(width);
-  }, [open]);
-  // jump to matching option based on typing
-  const searchString = React.useRef('');
-  const [setKeyTimeout, clearKeyTimeout] = useTimeout();
-  const getNextMatchingOption = () => {
-    // first check for matches for the full searchString
-    let matcher = optionText => optionText.toLowerCase().indexOf(searchString.current) === 0;
-    let matches = getOptionsMatchingText(matcher);
-    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;
-    // if the dropdown is already open and the searchstring is a single character,
-    // then look after the current activeOption for letters
-    // this is so slowly typing the same letter will cycle through matches
-    if (open && searchString.current.length === 1) {
-      startIndex++;
-    }
-    // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
-    if (!matches.length) {
-      const letters = searchString.current.split('');
-      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);
-      // if the search is all the same letter, cycle through options starting with that letter
-      if (allSameLetter) {
-        startIndex++;
-        matcher = optionText => optionText.toLowerCase().indexOf(letters[0]) === 0;
-        matches = getOptionsMatchingText(matcher);
-      }
-    }
-    // if there is an active option and multiple matches,
-    // return first matching option after the current active option, looping back to the top
-    if (matches.length > 1 && activeOption) {
-      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
-      return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
-    }
-    var _matches_;
-    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
-  };
-  const onTriggerKeyDown = ev => {
-    // clear timeout, if it exists
-    clearKeyTimeout();
-    // if the key was a char key, update search string
-    if (getDropdownActionFromKey(ev) === 'Type') {
-      // update search string
-      searchString.current += ev.key.toLowerCase();
-      setKeyTimeout(() => {
-        searchString.current = '';
-      }, 500);
-      // update state
-      !open && setOpen(ev, true);
-      const nextOption = getNextMatchingOption();
-      setActiveOption(nextOption);
-      setFocusVisible(true);
-    }
-  };
-  // resolve button and listbox slot props
-  let triggerSlot;
-  let listboxSlot;
-  triggerSlot = resolveShorthand(props.button, {
-    required: true,
-    defaultProps: {
-      type: 'button',
-      children: baseState.value || props.placeholder,
-      ...triggerNativeProps
-    }
-  });
-  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);
-  listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {
-    required: true,
-    defaultProps: {
-      children: props.children,
-      style: {
-        width: popupWidth
-      }
-    }
-  }) : undefined;
-  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
-  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
-  const state = {
-    components: {
-      root: 'div',
-      button: 'button',
-      expandIcon: 'span',
-      listbox: Listbox
-    },
-    root: resolveShorthand(props.root, {
-      required: true,
-      defaultProps: {
-        'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
-        children: props.children,
-        ...rootNativeProps
-      }
-    }),
-    button: triggerSlot,
-    listbox: listboxSlot,
-    expandIcon: resolveShorthand(props.expandIcon, {
-      required: true,
-      defaultProps: {
-        children: /*#__PURE__*/React.createElement(ChevronDownIcon, null)
-      }
-    }),
-    placeholderVisible: !baseState.value && !!props.placeholder,
-    ...baseState
-  };
-  state.root.ref = useMergedRefs(state.root.ref, rootRef);
-  return state;
+ */ export const useDropdown_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsSize: true
+    });
+    const baseState = useComboboxBaseState(props);
+    const { activeOption , getIndexOfId , getOptionsMatchingText , open , setActiveOption , setFocusVisible , setOpen  } = baseState;
+    const { primary: triggerNativeProps , root: rootNativeProps  } = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'button',
+        excludedPropNames: [
+            'children'
+        ]
+    });
+    // set listbox popup width based off the root/trigger width
+    const rootRef = React.useRef(null);
+    const [popupWidth, setPopupWidth] = React.useState();
+    React.useEffect(()=>{
+        var _rootRef_current;
+        const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;
+        setPopupWidth(width);
+    }, [
+        open
+    ]);
+    // jump to matching option based on typing
+    const searchString = React.useRef('');
+    const [setKeyTimeout, clearKeyTimeout] = useTimeout();
+    const getNextMatchingOption = ()=>{
+        // first check for matches for the full searchString
+        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;
+        let matches = getOptionsMatchingText(matcher);
+        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;
+        // if the dropdown is already open and the searchstring is a single character,
+        // then look after the current activeOption for letters
+        // this is so slowly typing the same letter will cycle through matches
+        if (open && searchString.current.length === 1) {
+            startIndex++;
+        }
+        // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
+        if (!matches.length) {
+            const letters = searchString.current.split('');
+            const allSameLetter = letters.length && letters.every((letter)=>letter === letters[0]);
+            // if the search is all the same letter, cycle through options starting with that letter
+            if (allSameLetter) {
+                startIndex++;
+                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;
+                matches = getOptionsMatchingText(matcher);
+            }
+        }
+        // if there is an active option and multiple matches,
+        // return first matching option after the current active option, looping back to the top
+        if (matches.length > 1 && activeOption) {
+            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
+            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+        }
+        var _matches_;
+        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+    };
+    const onTriggerKeyDown = (ev)=>{
+        // clear timeout, if it exists
+        clearKeyTimeout();
+        // if the key was a char key, update search string
+        if (getDropdownActionFromKey(ev) === 'Type') {
+            // update search string
+            searchString.current += ev.key.toLowerCase();
+            setKeyTimeout(()=>{
+                searchString.current = '';
+            }, 500);
+            // update state
+            !open && setOpen(ev, true);
+            const nextOption = getNextMatchingOption();
+            setActiveOption(nextOption);
+            setFocusVisible(true);
+        }
+    };
+    // resolve button and listbox slot props
+    let triggerSlot;
+    let listboxSlot;
+    triggerSlot = resolveShorthand(props.button, {
+        required: true,
+        defaultProps: {
+            type: 'button',
+            children: baseState.value || props.placeholder,
+            ...triggerNativeProps
+        }
+    });
+    triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);
+    listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {
+        required: true,
+        defaultProps: {
+            children: props.children,
+            style: {
+                width: popupWidth
+            }
+        }
+    }) : undefined;
+    [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
+    [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
+    const state = {
+        components: {
+            root: 'div',
+            button: 'button',
+            expandIcon: 'span',
+            listbox: Listbox
+        },
+        root: resolveShorthand(props.root, {
+            required: true,
+            defaultProps: {
+                'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+                children: props.children,
+                ...rootNativeProps
+            }
+        }),
+        button: triggerSlot,
+        listbox: listboxSlot,
+        expandIcon: resolveShorthand(props.expandIcon, {
+            required: true,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)
+            }
+        }),
+        placeholderVisible: !baseState.value && !!props.placeholder,
+        ...baseState
+    };
+    state.root.ref = useMergedRefs(state.root.ref, rootRef);
+    return state;
 };
-//# sourceMappingURL=useDropdown.js.map

package/lib/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","createElement","placeholderVisible"],"sources":["../../../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, 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 = (optionText: string) => optionText.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 = (optionText: string) => optionText.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"],"mappings":"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"}
+{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, 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 = (optionText: string) => optionText.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 = (optionText: string) => optionText.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"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"mappings":"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"}

package/lib/components/Dropdown/useDropdownStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","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","E5pizo","Bxyxcbc","listboxCollapsed","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","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["../../../src/components/Dropdown/useDropdownStyles.styles.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    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\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"],"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ;AAEzC,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AACrD,SAASC,SAAS,QAAQ;AAG1B,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;AACX;AAEA;;;AAGA,MAAMC,SAAA,gBAAYT,QAAA;EAAAK,IAAA;IAAAK,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;EAAA;EAAAtC,OAAA;IAAAuC,MAAA;IAAArC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAmC,OAAA;EAAA;EAAAC,gBAAA;IAAAlC,MAAA;EAAA;EAAAT,MAAA;IAAA4C,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAzC,OAAA;IAAA0C,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA3C,MAAA;IAAA4C,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;IAAAzE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA;IAAAsC,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;AAAA;EAAAiD,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;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EA2KlB;AAEA,MAAMC,aAAA,gBAAgBjH,QAAA;EAAAkH,IAAA;IAAApG,OAAA;IAAA0C,MAAA;IAAAzC,MAAA;IAAAoD,OAAA;IAAAgD,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAnD,KAAA;IAAAC,OAAA;IAAAmD,MAAA;EAAA;EAAA5C,MAAA;IAAAP,OAAA;IAAAmD,MAAA;EAAA;EAAA3C,KAAA;IAAAR,OAAA;IAAAmD,MAAA;EAAA;EAAAjB,QAAA;IAAA7C,MAAA;EAAA;AAAA;EAAAmD,CAAA;AAAA,EAiCtB;AAEA;;;AAGA,OAAO,MAAMY,0BAAA,GAA8BC,KAAA,IAAwC;EACjF,MAAM;IAAEC,UAAA;IAAYC,IAAA;IAAMC,kBAAA;IAAoBC;EAAI,CAAE,GAAGJ,KAAA;EACvD,MAAMzB,OAAA,GAAW,GAAEyB,KAAA,CAAMlH,MAAM,CAAC,eAAgB,EAAC,KAAK;EACtD,MAAM+F,QAAA,GAAWmB,KAAA,CAAMlH,MAAM,CAAC+F,QAAQ;EACtC,MAAMwB,MAAA,GAASpH,SAAA;EACf,MAAMqH,UAAA,GAAab,aAAA;EAEnBO,KAAA,CAAMnH,IAAI,CAAC0H,SAAS,GAAG9H,YAAA,CACrBG,kBAAA,CAAmBC,IAAI,EACvBwH,MAAA,CAAOxH,IAAI,EACXwH,MAAM,CAACJ,UAAA,CAAW,EAClB,CAACpB,QAAA,IAAYoB,UAAA,KAAe,aAAaI,MAAA,CAAOxC,kBAAkB,EAClEU,OAAA,IAAW0B,UAAA,KAAe,eAAeI,MAAA,CAAO9B,OAAO,EACvDA,OAAA,IAAW0B,UAAA,KAAe,eAAeI,MAAA,CAAOzB,gBAAgB,EAChEC,QAAA,IAAYwB,MAAA,CAAOxB,QAAQ,EAC3BmB,KAAA,CAAMnH,IAAI,CAAC0H,SAAS;EAGtBP,KAAA,CAAMlH,MAAM,CAACyH,SAAS,GAAG9H,YAAA,CACvBG,kBAAA,CAAmBE,MAAM,EACzBuH,MAAA,CAAOvH,MAAM,EACbuH,MAAM,CAACD,IAAA,CAAK,EACZD,kBAAA,IAAsBE,MAAA,CAAO5D,WAAW,EACxCoC,QAAA,IAAYwB,MAAA,CAAOnB,YAAY,EAC/Bc,KAAA,CAAMlH,MAAM,CAACyH,SAAS;EAGxB,IAAIP,KAAA,CAAMhH,OAAO,EAAE;IACjBgH,KAAA,CAAMhH,OAAO,CAACuH,SAAS,GAAG9H,YAAA,CACxBG,kBAAA,CAAmBI,OAAO,EAC1BqH,MAAA,CAAOrH,OAAO,EACd,CAACkH,IAAA,IAAQG,MAAA,CAAO5E,gBAAgB,EAChCuE,KAAA,CAAMhH,OAAO,CAACuH,SAAS;EAE3B;EAEA,IAAIP,KAAA,CAAMjH,UAAU,EAAE;IACpBiH,KAAA,CAAMjH,UAAU,CAACwH,SAAS,GAAG9H,YAAA,CAC3BG,kBAAA,CAAmBG,UAAU,EAC7BuH,UAAA,CAAWZ,IAAI,EACfY,UAAU,CAACF,IAAA,CAAK,EAChBvB,QAAA,IAAYyB,UAAA,CAAWzB,QAAQ,EAC/BmB,KAAA,CAAMjH,UAAU,CAACwH,SAAS;EAE9B;EAEA,OAAOP,KAAA;AACT"}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","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","E5pizo","Bxyxcbc","listboxCollapsed","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","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\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-block',\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    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\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});\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});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\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    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, !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, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}