@fluentui/react-combobox 9.2.10 → 9.3.0

package/lib/components/Dropdown/{useDropdownStyles.js → useDropdownStyles.styles.js}

@@ -280,4 +280,4 @@ export const useDropdownStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDropdownStyles.js.map
+//# sourceMappingURL=useDropdownStyles.styles.js.map

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

@@ -0,0 +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":"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"}

package/lib/components/Listbox/Listbox.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useListbox_unstable } from './useListbox';
 import { renderListbox_unstable } from './renderListbox';
-import { useListboxStyles_unstable } from './useListboxStyles';
+import { useListboxStyles_unstable } from './useListboxStyles.styles';
 import { useListboxContextValues } from '../../contexts/useListboxContextValues';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Listbox component: a standalone selection control, or the popup in a Combobox
  */
@@ -11,10 +11,7 @@ export const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useListbox_unstable(props, ref);
   const contextValues = useListboxContextValues(state);
   useListboxStyles_unstable(state);
-  const {
-    useListboxStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);
   return renderListbox_unstable(state, contextValues);
 });
 Listbox.displayName = 'Listbox';

package/lib/components/Listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHooks_unstable","Listbox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  const { useListboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAE1C,SAASC,uBAAuB,QAAQ;AAExC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,uBAAA,CAAwBM,KAAA;EAE9CP,yBAAA,CAA0BO,KAAA;EAE1B,MAAM;IAAEP,yBAAA,EAA2BS;EAAe,CAAE,GAAGP,4BAAA;EACvDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQO,WAAW,GAAG"}
+{"version":3,"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAE1C,SAASC,uBAAuB,QAAQ;AAExC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,uBAAA,CAAwBM,KAAA;EAE9CP,yBAAA,CAA0BO,KAAA;EAE1BL,2BAAA,CAA4B,6BAA6BK,KAAA;EAEzD,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQM,WAAW,GAAG"}

package/lib/components/Listbox/index.js

@@ -2,5 +2,5 @@ export * from './Listbox';
 export * from './Listbox.types';
 export * from './renderListbox';
 export * from './useListbox';
-export * from './useListboxStyles';
+export * from './useListboxStyles.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Listbox/index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/Listbox/index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Listbox/renderListbox.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { ListboxContext } from '../../contexts/ListboxContext';
 /**
  * Render the final JSX of Listbox
@@ -8,9 +8,9 @@ export const renderListbox_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(ListboxContext.Provider, {
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(ListboxContext.Provider, {
     value: contextValues.listbox
-  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root));
+  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
 };
 //# sourceMappingURL=renderListbox.js.map

package/lib/components/Listbox/renderListbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","listbox","root"],"sources":["../../../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAEzB,SAASC,cAAc,QAAQ;AAE/B;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAqBC,aAAA,KAAwC;EAClG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAuBG,KAAA;EAEpD,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,cAAA,CAAeO,QAAQ;IAACC,KAAA,EAAOL,aAAA,CAAcM;kBAC5CX,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI;AAGpC"}
+{"version":3,"names":["createElement","getSlotsNext","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","Provider","value","listbox","root"],"sources":["../../../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlotsNext<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,cAAc,QAAQ;AAE/B;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAqBC,aAAA,KAAwC;EAClG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA2BG,KAAA;EAExD,oBACEJ,aAfJ,CAeKE,cAAA,CAAeM,QAAQ;IAACC,KAAA,EAAOJ,aAAA,CAAcK;kBAC5CV,aAhBN,CAgBOM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAGpC"}

package/lib/components/Listbox/{useListboxStyles.js → useListboxStyles.styles.js}

@@ -34,4 +34,4 @@ export const useListboxStyles_unstable = state => {
   state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
   return state;
 };
-//# sourceMappingURL=useListboxStyles.js.map
+//# sourceMappingURL=useListboxStyles.styles.js.map

package/lib/components/Listbox/useListboxStyles.styles.js.map

@@ -0,0 +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":["../../../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,iBAAA,GAAkD;EAC7DC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYL,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,EAYlB;AAEA;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAsC;EAC9E,MAAMC,MAAA,GAASlB,SAAA;EACfiB,KAAA,CAAMlB,IAAI,CAACoB,SAAS,GAAGvB,YAAA,CAAaE,iBAAA,CAAkBC,IAAI,EAAEmB,MAAA,CAAOnB,IAAI,EAAEkB,KAAA,CAAMlB,IAAI,CAACoB,SAAS;EAE7F,OAAOF,KAAA;AACT"}

package/lib/components/Option/Option.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useOption_unstable } from './useOption';
 import { renderOption_unstable } from './renderOption';
-import { useOptionStyles_unstable } from './useOptionStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useOptionStyles_unstable } from './useOptionStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Option component: a styled child option of a Combobox
  */
 export const Option = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOption_unstable(props, ref);
   useOptionStyles_unstable(state);
-  const {
-    useOptionStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);
   return renderOption_unstable(state);
 });
 Option.displayName = 'Option';

package/lib/components/Option/Option.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHooks_unstable","Option","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  const { useOptionStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzB,MAAM;IAAEN,wBAAA,EAA0BO;EAAe,CAAE,GAAGN,4BAAA;EACtDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AAEAJ,MAAA,CAAOM,WAAW,GAAG"}
+{"version":3,"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzBL,2BAAA,CAA4B,4BAA4BK,KAAA;EAExD,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AAEAJ,MAAA,CAAOK,WAAW,GAAG"}

package/lib/components/Option/index.js

@@ -2,5 +2,5 @@ export * from './Option';
 export * from './Option.types';
 export * from './renderOption';
 export * from './useOption';
-export * from './useOptionStyles';
+export * from './useOptionStyles.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Option/index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/Option/index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Option/renderOption.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Option
  */
@@ -7,7 +7,7 @@ export const renderOption_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/React.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
 };
 //# sourceMappingURL=renderOption.js.map

package/lib/components/Option/renderOption.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderOption_unstable","state","slots","slotProps","createElement","root","checkIcon","children"],"sources":["../../../src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkIcon && <slots.checkIcon {...slotProps.checkIcon} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EAEnD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,SAAS,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,SAAS,EAAKH,SAAA,CAAUG,SAAS,GAC3DH,SAAA,CAAUE,IAAI,CAACE,QAAQ;AAG9B"}
+{"version":3,"names":["createElement","getSlotsNext","renderOption_unstable","state","slots","slotProps","root","checkIcon","children"],"sources":["../../../src/components/Option/renderOption.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlotsNext<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkIcon && <slots.checkIcon {...slotProps.checkIcon} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA0BE,KAAA;EAEvD,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,SAAS,iBAAIP,aAf1B,CAe2BI,KAAA,CAAMG,SAAS,EAAKF,SAAA,CAAUE,SAAS,GAC3DF,SAAA,CAAUC,IAAI,CAACE,QAAQ;AAG9B"}

package/lib/components/Option/{useOptionStyles.js → useOptionStyles.styles.js}

@@ -139,4 +139,4 @@ export const useOptionStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useOptionStyles.js.map
+//# sourceMappingURL=useOptionStyles.styles.js.map

package/lib/components/Option/useOptionStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","ecr2s2","active","Bsft5z2","E3zdtr","B80jsxd","t2ki1e","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B0n5ga8","s924m2","B1q35kw","Gp14am","bn5sak","By385i5","Eqx8gd","B1piin3","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","d","h","a","m","useOptionStyles_unstable","state","focusVisible","multiselect","styles","className"],"sources":["../../../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n  root: 'fui-Option',\n  checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n    position: 'relative',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n\n  active: {\n    // taken from @fluentui/react-tabster\n    // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth('2px'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  selected: {},\n\n  checkIcon: {\n    fontSize: tokens.fontSizeBase400,\n    // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n    // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n    marginRight: tokens.spacingHorizontalXXS,\n    visibility: 'hidden',\n\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  multiselectCheck: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    boxSizing: 'border-box',\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    fill: 'currentColor',\n    fontSize: '12px',\n    height: '16px',\n    width: '16px',\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n  },\n\n  checkDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n  const { active, disabled, focusVisible, multiselect, selected } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    optionClassNames.root,\n    styles.root,\n    active && focusVisible && styles.active,\n    disabled && styles.disabled,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.checkIcon) {\n    state.checkIcon.className = mergeClasses(\n      optionClassNames.checkIcon,\n      styles.checkIcon,\n      state.checkIcon.className,\n      multiselect && styles.multiselectCheck,\n      selected && styles.selectedCheck,\n      selected && multiselect && styles.selectedMultiselectCheck,\n      disabled && styles.checkDisabled,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/OptionGroup/OptionGroup.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useOptionGroup_unstable } from './useOptionGroup';
 import { renderOptionGroup_unstable } from './renderOptionGroup';
-import { useOptionGroupStyles_unstable } from './useOptionGroupStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * OptionGroup component: allows grouping of Option components within a Combobox
  */
 export const OptionGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOptionGroup_unstable(props, ref);
   useOptionGroupStyles_unstable(state);
-  const {
-    useOptionGroupStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);
   return renderOptionGroup_unstable(state);
 });
 OptionGroup.displayName = 'OptionGroup';

package/lib/components/OptionGroup/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHooks_unstable","OptionGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  const { useOptionGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9B,MAAM;IAAEN,6BAAA,EAA+BO;EAAe,CAAE,GAAGN,4BAAA;EAC3DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYM,WAAW,GAAG"}
+{"version":3,"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}

package/lib/components/OptionGroup/index.js

@@ -2,5 +2,5 @@ export * from './OptionGroup';
 export * from './OptionGroup.types';
 export * from './renderOptionGroup';
 export * from './useOptionGroup';
-export * from './useOptionGroupStyles';
+export * from './useOptionGroupStyles.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/OptionGroup/index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/OptionGroup/index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/OptionGroup/renderOptionGroup.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of OptionGroup
  */
@@ -7,7 +7,7 @@ export const renderOptionGroup_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label, slotProps.label.children), slotProps.root.children);
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/createElement(slots.label, slotProps.label, slotProps.label.children), slotProps.root.children);
 };
 //# sourceMappingURL=renderOptionGroup.js.map

package/lib/components/OptionGroup/renderOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderOptionGroup_unstable","state","slots","slotProps","createElement","root","label","children"],"sources":["../../../src/components/OptionGroup/renderOptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n  const { slots, slotProps } = getSlots<OptionGroupSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA2BE,KAAA;EAExD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,EAAGH,SAAA,CAAUG,KAAK,CAACC,QAAQ,GAC1EJ,SAAA,CAAUE,IAAI,CAACE,QAAQ;AAG9B"}
+{"version":3,"names":["createElement","getSlotsNext","renderOptionGroup_unstable","state","slots","slotProps","root","label","children"],"sources":["../../../src/components/OptionGroup/renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n  const { slots, slotProps } = getSlotsNext<OptionGroupSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,KAAK,iBAAIP,aAftB,CAeuBI,KAAA,CAAMG,KAAK,EAAKF,SAAA,CAAUE,KAAK,EAAGF,SAAA,CAAUE,KAAK,CAACC,QAAQ,GAC1EH,SAAA,CAAUC,IAAI,CAACE,QAAQ;AAG9B"}

package/lib/components/OptionGroup/{useOptionGroupStyles.js → useOptionGroupStyles.styles.js}

@@ -52,4 +52,4 @@ export const useOptionGroupStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useOptionGroupStyles.js.map
+//# sourceMappingURL=useOptionGroupStyles.styles.js.map

package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","Gwp8xu","H93o2g","eii1in","om0q45","Hl9o3s","Bi9x0x4","B0i58d9","sl1c2c","z4hxbw","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","d","useOptionGroupStyles_unstable","state","styles","className"],"sources":["../../../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n  root: 'fui-OptionGroup',\n  label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingHorizontalXXS,\n\n    '&:not(:last-child)::after': {\n      content: '\"\"',\n      ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n      display: 'block',\n      paddingBottom: tokens.spacingHorizontalXS,\n      ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS),\n    },\n  },\n\n  label: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge),\n  },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,KAAA,EAAO;AACT;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAd,KAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAwBlB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAAS7B,SAAA;EACf4B,KAAA,CAAM9B,IAAI,CAACgC,SAAS,GAAGnC,YAAA,CAAaE,qBAAA,CAAsBC,IAAI,EAAE+B,MAAA,CAAO/B,IAAI,EAAE8B,KAAA,CAAM9B,IAAI,CAACgC,SAAS;EAEjG,IAAIF,KAAA,CAAM7B,KAAK,EAAE;IACf6B,KAAA,CAAM7B,KAAK,CAAC+B,SAAS,GAAGnC,YAAA,CAAaE,qBAAA,CAAsBE,KAAK,EAAE8B,MAAA,CAAO9B,KAAK,EAAE6B,KAAA,CAAM7B,KAAK,CAAC+B,SAAS;EACvG;EAEA,OAAOF,KAAA;AACT"}

package/lib-commonjs/components/Combobox/Combobox.js

@@ -10,15 +10,14 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useCombobox = require("./useCombobox");
 const _renderCombobox = require("./renderCombobox");
-const _useComboboxStyles = require("./useComboboxStyles");
+const _useComboboxStylesStyles = require("./useComboboxStyles.styles");
 const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const Combobox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCombobox.useCombobox_unstable)(props, ref);
     const contextValues = (0, _useComboboxContextValues.useComboboxContextValues)(state);
-    (0, _useComboboxStyles.useComboboxStyles_unstable)(state);
-    const { useComboboxStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useComboboxStylesStyles.useComboboxStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useComboboxStyles_unstable')(state);
     return (0, _renderCombobox.renderCombobox_unstable)(state, contextValues);
 });
 Combobox.displayName = 'Combobox'; //# sourceMappingURL=Combobox.js.map

package/lib-commonjs/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Combobox/Combobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n  useComboboxStyles_unstable(state);\n  const {\n    useComboboxStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderCombobox_unstable(state, contextValues);\n});\nCombobox.displayName = 'Combobox';\n//# sourceMappingURL=Combobox.js.map"],"names":["Combobox","React","forwardRef","props","ref","state","useCombobox_unstable","contextValues","useComboboxContextValues","useComboboxStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderCombobox_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;6BACc;gCACG;mCACG;0CACF;qCACI;AAItC,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAwB,EAACH;IAC/CI,IAAAA,6CAA0B,EAACJ;IAC3B,MAAM,EACJI,4BAA4BC,gBAAe,EAC5C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBL;IAChB,OAAOO,IAAAA,uCAAuB,EAACP,OAAOE;AACxC;AACAP,SAASa,WAAW,GAAG,YACvB,oCAAoC"}
+{"version":3,"sources":["../../../lib/components/Combobox/Combobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n  useComboboxStyles_unstable(state);\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n  return renderCombobox_unstable(state, contextValues);\n});\nCombobox.displayName = 'Combobox';\n//# sourceMappingURL=Combobox.js.map"],"names":["Combobox","React","forwardRef","props","ref","state","useCombobox_unstable","contextValues","useComboboxContextValues","useComboboxStyles_unstable","useCustomStyleHook_unstable","renderCombobox_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;6BACc;gCACG;yCACG;0CACF;qCACG;AAIrC,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAwB,EAACH;IAC/CI,IAAAA,mDAA0B,EAACJ;IAC3BK,IAAAA,gDAA2B,EAAC,8BAA8BL;IAC1D,OAAOM,IAAAA,uCAAuB,EAACN,OAAOE;AACxC;AACAP,SAASY,WAAW,GAAG,YACvB,oCAAoC"}

package/lib-commonjs/components/Combobox/index.js

@@ -7,7 +7,7 @@ _exportStar(require("./Combobox"), exports);
 _exportStar(require("./Combobox.types"), exports);
 _exportStar(require("./renderCombobox"), exports);
 _exportStar(require("./useCombobox"), exports);
-_exportStar(require("./useComboboxStyles"), exports);
+_exportStar(require("./useComboboxStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Combobox/index.js"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/Combobox/index.js"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/Combobox/renderCombobox.js

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,16 +6,15 @@ Object.defineProperty(exports, "renderCombobox_unstable", {
     enumerable: true,
     get: ()=>renderCombobox_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactPortal = require("@fluentui/react-portal");
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _comboboxContext = require("../../contexts/ComboboxContext");
 const renderCombobox_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(_comboboxContext.ComboboxContext.Provider, {
+    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_comboboxContext.ComboboxContext.Provider, {
         value: contextValues.combobox
-    }, /*#__PURE__*/ _react.createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ _react.createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ _react.createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ _react.createElement(_reactPortal.Portal, null, /*#__PURE__*/ _react.createElement(slots.listbox, slotProps.listbox)))));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox) : /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPortal.Portal, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox)))));
 }; //# sourceMappingURL=renderCombobox.js.map
 
 //# sourceMappingURL=renderCombobox.js.map

package/lib-commonjs/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Combobox/renderCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {\n    value: contextValues.combobox\n  }, /*#__PURE__*/React.createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox)))));\n};\n//# sourceMappingURL=renderCombobox.js.map"],"names":["renderCombobox_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","root","ComboboxContext","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","Portal"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;6BACA;gCACE;iCACO;AAIzB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAkB;IAC/D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACE,gCAAe,CAACC,QAAQ,EAAE;QAC7HC,OAAOT,cAAcU,QAAQ;IAC/B,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMU,KAAK,EAAET,UAAUS,KAAK,GAAGV,MAAMW,UAAU,IAAI,WAAW,GAAER,OAAMC,aAAa,CAACJ,MAAMW,UAAU,EAAEV,UAAUU,UAAU,GAAGX,MAAMY,OAAO,IAAKd,CAAAA,MAAMe,WAAW,GAAG,WAAW,GAAEV,OAAMC,aAAa,CAACJ,MAAMY,OAAO,EAAEX,UAAUW,OAAO,IAAI,WAAW,GAAET,OAAMC,aAAa,CAACU,mBAAM,EAAE,IAAI,EAAE,WAAW,GAAEX,OAAMC,aAAa,CAACJ,MAAMY,OAAO,EAAEX,UAAUW,OAAO,EAAE,AAAD;AAC/X,GACA,0CAA0C"}
+{"version":3,"sources":["../../../lib/components/Combobox/renderCombobox.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { Portal } from '@fluentui/react-portal';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(ComboboxContext.Provider, {\n    value: contextValues.combobox\n  }, /*#__PURE__*/createElement(slots.input, slotProps.input), 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)))));\n};\n//# sourceMappingURL=renderCombobox.js.map"],"names":["renderCombobox_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","ComboboxContext","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","Portal"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAOrCA;;aAAAA;;6BAP8D;iCAC7C;gCACD;iCACG;AAIzB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAkB;IAC/D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAED,IAAAA,8BAAa,EAACE,gCAAe,CAACC,QAAQ,EAAE;QACjHC,OAAOR,cAAcS,QAAQ;IAC/B,GAAG,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMS,KAAK,EAAER,UAAUQ,KAAK,GAAGT,MAAMU,UAAU,IAAI,WAAW,GAAEP,IAAAA,8BAAa,EAACH,MAAMU,UAAU,EAAET,UAAUS,UAAU,GAAGV,MAAMW,OAAO,IAAKb,CAAAA,MAAMc,WAAW,GAAG,WAAW,GAAET,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,IAAI,WAAW,GAAER,IAAAA,8BAAa,EAACU,mBAAM,EAAE,IAAI,EAAE,WAAW,GAAEV,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,EAAE,AAAD;AACjW,GACA,0CAA0C"}

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

@@ -46,6 +46,9 @@ const useCombobox_unstable = (props, ref)=>{
     // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
     // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
     const [hideActiveDescendant, setHideActiveDescendant] = _react.useState(false);
+    // save the typing vs. navigating options state, as the space key should behave differently in each case
+    // we do not want to update the combobox when this changes, just save the value between renders
+    const isTyping = _react.useRef(false);
     // calculate listbox width style based on trigger width
     const [popupDimensions, setPopupDimensions] = _react.useState();
     _react.useEffect(()=>{
@@ -119,18 +122,6 @@ const useCombobox_unstable = (props, ref)=>{
             clearSelection(ev);
         }
     };
-    // open Combobox when typing
-    const onTriggerKeyDown = (ev)=>{
-        if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
-            baseState.setOpen(ev, true);
-        }
-        // clear activedescendant when moving the text insertion cursor
-        if (ev.key === _keyboardKeys.ArrowLeft || ev.key === _keyboardKeys.ArrowRight) {
-            setHideActiveDescendant(true);
-        } else {
-            setHideActiveDescendant(false);
-        }
-    };
     // resolve input and listbox slot props
     let triggerSlot;
     let listboxSlot;
@@ -143,9 +134,9 @@ const useCombobox_unstable = (props, ref)=>{
             ...triggerNativeProps
         }
     });
+    const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
     triggerSlot.onChange = (0, _reactUtilities.mergeCallbacks)(triggerSlot.onChange, onTriggerChange);
     triggerSlot.onBlur = (0, _reactUtilities.mergeCallbacks)(triggerSlot.onBlur, onTriggerBlur);
-    triggerSlot.onKeyDown = (0, _reactUtilities.mergeCallbacks)(triggerSlot.onKeyDown, onTriggerKeyDown);
     // only resolve listbox slot if needed
     listboxSlot = open || hasFocus ? (0, _reactUtilities.resolveShorthand)(props.listbox, {
         required: true,
@@ -186,6 +177,35 @@ const useCombobox_unstable = (props, ref)=>{
         ...baseState
     };
     state.root.ref = (0, _reactUtilities.useMergedRefs)(state.root.ref, rootRef);
+    /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;
+    state.input.onKeyDown = (0, _reactUtilities.useEventCallback)((ev)=>{
+        if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
+            baseState.setOpen(ev, true);
+        }
+        // clear activedescendant when moving the text insertion cursor
+        if (ev.key === _keyboardKeys.ArrowLeft || ev.key === _keyboardKeys.ArrowRight) {
+            setHideActiveDescendant(true);
+        } else {
+            setHideActiveDescendant(false);
+        }
+        // update typing state to true if the user is typing
+        const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(ev, {
+            open,
+            multiselect
+        });
+        if (action === 'Type') {
+            isTyping.current = true;
+        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
+            isTyping.current = false;
+        }
+        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
+        if (freeform && (isTyping.current || !open) && ev.key === ' ') {
+            resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
+            return;
+        }
+        // if we're not allowing space to type, continue with default behavior
+        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
+    });
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown , onClick: onIconClick  } = state.expandIcon || {};
     const onExpandIconMouseDown = (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(onIconMouseDown, ()=>{
         // do not dismiss on blur when closing via clicking the icon