@fluentui/react-combobox 9.2.4 → 9.2.6

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

@@ -1 +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/packages/react-components/react-combobox/src/components/Option/useOptionStyles.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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"}
+{"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.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.map

@@ -1 +1 @@
-{"version":3,"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHooks_unstable","OptionGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAGtE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,uBAAuB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEjDL,6BAA6B,CAACM,KAAK,CAAC;EAEpC,MAAM;IAAEN,6BAA6B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACzFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,0BAA0B,CAACO,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACM,WAAW,GAAG,aAAa"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n  /* The root group wrapper */\n  root: NonNullable<Slot<'div'>>;\n\n  /*\n   * The option group label, displayed as static text before the child options.\n   * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n   */\n  label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/OptionGroup/OptionGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n  /* The root group wrapper */\n  root: NonNullable<Slot<'div'>>;\n\n  /*\n   * The option group label, displayed as static text before the child options.\n   * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n   */\n  label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"],"mappings":"AAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/OptionGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"]}
+{"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"}

package/lib/components/OptionGroup/renderOptionGroup.js

@@ -8,10 +8,6 @@ export const renderOptionGroup_unstable = state => {
     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);
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.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/packages/react-components/react-combobox/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,GAAGH,SAAS,CAACG,KAAK,CAACC,QAAQ,CAAe,EACzFJ,SAAS,CAACE,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC"}
+{"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"}

package/lib/components/OptionGroup/useOptionGroup.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 /**
  * Create the state required to render OptionGroup.

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

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"sources":["../src/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n  const labelId = useId('group-label');\n  const { label } = props;\n\n  return {\n    components: {\n      root: 'div',\n      label: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      'aria-labelledby': label ? labelId : undefined,\n      ...props,\n    }),\n    label: resolveShorthand(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n    }),\n  };\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,OAAO,GAAGJ,KAAK,CAAC,aAAa,CAAC;EACpC,MAAM;IAAEK;EAAK,CAAE,GAAGH,KAAK;EAEvB,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,KAAK,EAAE;KACR;IACDE,IAAI,EAAET,qBAAqB,CAAC,KAAK,EAAE;MACjCK,GAAG;MACHK,IAAI,EAAE,OAAO;MACb,iBAAiB,EAAEH,KAAK,GAAGD,OAAO,GAAGK,SAAS;MAC9C,GAAGP;KACJ,CAAC;IACFG,KAAK,EAAEN,gBAAgB,CAACM,KAAK,EAAE;MAC7BK,YAAY,EAAE;QACZC,EAAE,EAAEP,OAAO;QACXI,IAAI,EAAE;;KAET;GACF;AACH,CAAC"}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"sources":["../../../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n  const labelId = useId('group-label');\n  const { label } = props;\n\n  return {\n    components: {\n      root: 'div',\n      label: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      'aria-labelledby': label ? labelId : undefined,\n      ...props,\n    }),\n    label: resolveShorthand(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAG/D;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAMC,OAAA,GAAUJ,KAAA,CAAM;EACtB,MAAM;IAAEK;EAAK,CAAE,GAAGH,KAAA;EAElB,OAAO;IACLI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNF,KAAA,EAAO;IACT;IACAE,IAAA,EAAMT,qBAAA,CAAsB,OAAO;MACjCK,GAAA;MACAK,IAAA,EAAM;MACN,mBAAmBH,KAAA,GAAQD,OAAA,GAAUK,SAAS;MAC9C,GAAGP;IACL;IACAG,KAAA,EAAON,gBAAA,CAAiBM,KAAA,EAAO;MAC7BK,YAAA,EAAc;QACZC,EAAA,EAAIP,OAAA;QACJI,IAAA,EAAM;MACR;IACF;EACF;AACF"}

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

@@ -1 +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/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.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,uBAAuB;AAE9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;CACR;AAED;;;AAGA,MAAMC,SAAS,gBAAGN,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,EAwBhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,MAAM,GAAG7B,SAAS,EAAE;EAC1B4B,KAAK,CAAC9B,IAAI,CAACgC,SAAS,GAAGnC,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAE+B,MAAM,CAAC/B,IAAI,EAAE8B,KAAK,CAAC9B,IAAI,CAACgC,SAAS,CAAC;EAElG,IAAIF,KAAK,CAAC7B,KAAK,EAAE;IACf6B,KAAK,CAAC7B,KAAK,CAAC+B,SAAS,GAAGnC,YAAY,CAACE,qBAAqB,CAACE,KAAK,EAAE8B,MAAM,CAAC9B,KAAK,EAAE6B,KAAK,CAAC7B,KAAK,CAAC+B,SAAS,CAAC;;EAGxG,OAAOF,KAAK;AACd,CAAC"}
+{"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.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/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"sources":["../src/packages/react-components/react-combobox/src/contexts/ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  | 'activeOption'\n  | 'appearance'\n  | 'focusVisible'\n  | 'open'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setOpen'\n  | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAoBhE;AACA,OAAO,MAAMC,eAAe,gBAAGD,aAAa,CAAuB;EACjEE,YAAY,EAAEC,SAAS;EACvBC,UAAU,EAAE,SAAS;EACrBC,YAAY,EAAE,KAAK;EACnBC,IAAI,EAAE,KAAK;EACXC,cAAcA,CAAA;IACZ,OAAO,MAAMJ,SAAS;EACxB,CAAC;EACDK,eAAe,EAAE,EAAE;EACnBC,YAAYA,CAAA;IACV;EAAA,CACD;EACDC,eAAeA,CAAA;IACb;EAAA,CACD;EACDC,OAAOA,CAAA;IACL;EAAA,CACD;EACDC,IAAI,EAAE;CACP,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAGZ,eAAe,CAACa,QAAQ"}
+{"version":3,"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"sources":["../../src/contexts/ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  | 'activeOption'\n  | 'appearance'\n  | 'focusVisible'\n  | 'open'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setOpen'\n  | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAoB9B;AACA,OAAO,MAAMC,eAAA,gBAAkBD,aAAA,CAAoC;EACjEE,YAAA,EAAcC,SAAA;EACdC,UAAA,EAAY;EACZC,YAAA,EAAc,KAAK;EACnBC,IAAA,EAAM,KAAK;EACXC,eAAA,EAAiB;IACf,OAAO,MAAMJ,SAAA;EACf;EACAK,eAAA,EAAiB,EAAE;EACnBC,aAAA,EAAe;IACb;EAAA,CACF;EACAC,gBAAA,EAAkB;IAChB;EAAA,CACF;EACAC,QAAA,EAAU;IACR;EAAA,CACF;EACAC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,gBAAA,GAAmBZ,eAAA,CAAgBa,QAAQ"}

package/lib/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"sources":["../src/packages/react-components/react-combobox/src/contexts/ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAiBhE;AACA,OAAO,MAAMC,cAAc,gBAAGD,aAAa,CAAsB;EAC/DE,YAAY,EAAEC,SAAS;EACvBC,YAAY,EAAE,KAAK;EACnBC,WAAW,EAAE,KAAK;EAClBC,cAAcA,CAAA;IACZ,OAAO,MAAMH,SAAS;EACxB,CAAC;EACDI,eAAe,EAAE,EAAE;EACnBC,YAAYA,CAAA;IACV;EAAA,CACD;EACDC,eAAeA,CAAA;IACb;EAAA;CAEH,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAGT,cAAc,CAACU,QAAQ"}
+{"version":3,"names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"sources":["../../src/contexts/ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAiB9B;AACA,OAAO,MAAMC,cAAA,gBAAiBD,aAAA,CAAmC;EAC/DE,YAAA,EAAcC,SAAA;EACdC,YAAA,EAAc,KAAK;EACnBC,WAAA,EAAa,KAAK;EAClBC,eAAA,EAAiB;IACf,OAAO,MAAMH,SAAA;EACf;EACAI,eAAA,EAAiB,EAAE;EACnBC,aAAA,EAAe;IACb;EAAA,CACF;EACAC,gBAAA,EAAkB;IAChB;EAAA;AAEJ;AAEA,OAAO,MAAMC,eAAA,GAAkBT,cAAA,CAAeU,QAAQ"}

package/lib/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"sources":["../src/packages/react-components/react-combobox/src/contexts/useComboboxContextValues.ts"],"sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n  const {\n    activeOption,\n    appearance,\n    focusVisible,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n  } = state;\n\n  const combobox = {\n    activeOption,\n    appearance,\n    focusVisible,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n  };\n\n  return { combobox };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,wBAAwBA,CAACC,KAAwB;EAC/D,MAAM;IACJC,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC,eAAe;IACfC,OAAO;IACPC;EAAI,CACL,GAAGV,KAAK;EAET,MAAMW,QAAQ,GAAG;IACfV,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC,eAAe;IACfC,OAAO;IACPC;GACD;EAED,OAAO;IAAEC;EAAQ,CAAE;AACrB"}
+{"version":3,"names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"sources":["../../src/contexts/useComboboxContextValues.ts"],"sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n  const {\n    activeOption,\n    appearance,\n    focusVisible,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n  } = state;\n\n  const combobox = {\n    activeOption,\n    appearance,\n    focusVisible,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n  };\n\n  return { combobox };\n}\n"],"mappings":"AAEA,OAAO,SAASA,yBAAyBC,KAAwB,EAA6B;EAC5F,MAAM;IACJC,YAAA;IACAC,UAAA;IACAC,YAAA;IACAC,IAAA;IACAC,cAAA;IACAC,eAAA;IACAC,YAAA;IACAC,eAAA;IACAC,OAAA;IACAC;EAAI,CACL,GAAGV,KAAA;EAEJ,MAAMW,QAAA,GAAW;IACfV,YAAA;IACAC,UAAA;IACAC,YAAA;IACAC,IAAA;IACAC,cAAA;IACAC,eAAA;IACAC,YAAA;IACAC,eAAA;IACAC,OAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAS;AACpB"}

package/lib/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"sources":["../src/packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts"],"sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } =\n    state;\n\n  // get register/unregister functions from parent combobox context\n  const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n  const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption,\n    focusVisible,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n  };\n\n  return { listbox };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ,kCAAkC;AAE1F,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,OAAM,SAAUC,uBAAuBA,CAACC,KAAmB;EACzD,MAAMC,kBAAkB,GAAGJ,mBAAmB,CAACC,eAAe,CAAC;EAC/D,MAAM;IAAEI,YAAY;IAAEC,YAAY;IAAEC,WAAW;IAAEC,cAAc;IAAEC,eAAe;IAAEC,YAAY;IAAEC;EAAe,CAAE,GAC/GR,KAAK;EAEP;EACA,MAAMS,sBAAsB,GAAGb,kBAAkB,CAACE,eAAe,EAAEY,GAAG,IAAIA,GAAG,CAACL,cAAc,CAAC;EAE7F,MAAMM,mBAAmB,GAAGV,kBAAkB,GAAGQ,sBAAsB,GAAGJ,cAAc;EAExF,MAAMO,OAAO,GAAG;IACdV,YAAY;IACZC,YAAY;IACZC,WAAW;IACXC,cAAc,EAAEM,mBAAmB;IACnCL,eAAe;IACfC,YAAY;IACZC;GACD;EAED,OAAO;IAAEI;EAAO,CAAE;AACpB"}
+{"version":3,"names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"sources":["../../src/contexts/useListboxContextValues.ts"],"sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } =\n    state;\n\n  // get register/unregister functions from parent combobox context\n  const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n  const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption,\n    focusVisible,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n  };\n\n  return { listbox };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ;AAExD,SAASC,eAAe,QAAQ;AAEhC,OAAO,SAASC,wBAAwBC,KAAmB,EAAwB;EACjF,MAAMC,kBAAA,GAAqBJ,mBAAA,CAAoBC,eAAA;EAC/C,MAAM;IAAEI,YAAA;IAAcC,YAAA;IAAcC,WAAA;IAAaC,cAAA;IAAgBC,eAAA;IAAiBC,YAAA;IAAcC;EAAe,CAAE,GAC/GR,KAAA;EAEF;EACA,MAAMS,sBAAA,GAAyBb,kBAAA,CAAmBE,eAAA,EAAiBY,GAAA,IAAOA,GAAA,CAAIL,cAAc;EAE5F,MAAMM,mBAAA,GAAsBV,kBAAA,GAAqBQ,sBAAA,GAAyBJ,cAAc;EAExF,MAAMO,OAAA,GAAU;IACdV,YAAA;IACAC,YAAA;IACAC,WAAA;IACAC,cAAA,EAAgBM,mBAAA;IAChBL,eAAA;IACAC,YAAA;IACAC;EACF;EAEA,OAAO;IAAEI;EAAQ;AACnB"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"sources":["../src/packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,wBAAwB,QAAQ,qCAAqC;AAC9E,SAASC,uBAAuB,QAAQ,oCAAoC;AAC5E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW;AAElB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB"}
+{"version":3,"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"sources":["../src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ;AAEjC,SAASC,eAAe,QAAQ;AAEhC,SAASC,wBAAwB,QAAQ;AACzC,SAASC,uBAAuB,QAAQ;AACxC,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd;AAEP,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb;AAEP,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf;AASP,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf;AASP,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB;AAGP;AACA,SAASC,aAAA,IAAiBC,sBAAsB,EAAEC,uBAAuB,QAAQ"}

package/lib/utils/ComboboxBase.types.js

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=ComboboxBase.types.js.map

package/lib/utils/ComboboxBase.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxBase.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n  /**\n   * Controls the colors and borders of the combobox trigger.\n   * @default 'outline'\n   */\n  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n  /**\n   * The default open state when open is uncontrolled\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n   */\n  defaultValue?: string;\n\n  /**\n   * Render the combobox's popup inline in the DOM.\n   * This has accessibility benefits, particularly for touch screen readers.\n   */\n  inlinePopup?: boolean;\n\n  /**\n   * Callback when the open/closed state of the dropdown changes\n   */\n  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n  /**\n   * Sets the open/closed state of the dropdown.\n   * Use together with onOpenChange to fully control the dropdown's visibility\n   */\n  open?: boolean;\n\n  /**\n   * If set, the placeholder will show when no value is selected\n   */\n  placeholder?: string;\n\n  /**\n   * Configure the positioning of the combobox dropdown\n   *\n   * @defaultvalue below\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Controls the size of the combobox faceplate\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value displayed by the Combobox.\n   * Use this with `onOptionSelect` to directly control the displayed value string\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    // whether the combobox/dropdown currently has focus\n    hasFocus: boolean;\n\n    /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    setActiveOption(option?: OptionValue): void;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"]}
+{"version":3,"names":["React"],"sources":["../../src/utils/ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n  /**\n   * Controls the colors and borders of the combobox trigger.\n   * @default 'outline'\n   */\n  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n  /**\n   * The default open state when open is uncontrolled\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n   */\n  defaultValue?: string;\n\n  /**\n   * Render the combobox's popup inline in the DOM.\n   * This has accessibility benefits, particularly for touch screen readers.\n   */\n  inlinePopup?: boolean;\n\n  /**\n   * Callback when the open/closed state of the dropdown changes\n   */\n  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n  /**\n   * Sets the open/closed state of the dropdown.\n   * Use together with onOpenChange to fully control the dropdown's visibility\n   */\n  open?: boolean;\n\n  /**\n   * If set, the placeholder will show when no value is selected\n   */\n  placeholder?: string;\n\n  /**\n   * Configure the positioning of the combobox dropdown\n   *\n   * @defaultvalue below\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Controls the size of the combobox faceplate\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value displayed by the Combobox.\n   * Use this with `onOptionSelect` to directly control the displayed value string\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    // whether the combobox/dropdown currently has focus\n    hasFocus: boolean;\n\n    /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    setActiveOption(option?: OptionValue): void;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/utils/OptionCollection.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionCollection.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/OptionCollection.types.ts"],"names":[],"mappings":"","sourcesContent":["export type OptionValue = {\n  /** The disabled state of the option. */\n  disabled?: boolean;\n\n  /** The `id` attribute of the option. */\n  id: string;\n\n  /** The `text` string for the option. */\n  text: string;\n\n  /** The value string of the option. */\n  value: string;\n};\n\nexport type OptionCollectionState = {\n  /** The total number of options in the collection. */\n  getCount: () => number;\n\n  /** Returns the index of an option by key. */\n  getIndexOfId(id: string): number;\n\n  /** Returns the option data for the nth option. */\n  getOptionAtIndex(index: number): OptionValue | undefined;\n\n  /** Returns the option data by key. */\n  getOptionById(id: string): OptionValue | undefined;\n\n  /** Returns an array of options filtered by a value matching function against the option's text string. */\n  getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];\n\n  /** Returns an array of options filtered by a value matching function against the option's value string. */\n  getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];\n\n  /** The unordered option data. */\n  options: OptionValue[];\n\n  /* A function that child options call to register their values. Returns a function to unregister the option. */\n  registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"]}
+{"version":3,"names":[],"sources":["../../src/utils/OptionCollection.types.ts"],"sourcesContent":["export type OptionValue = {\n  /** The disabled state of the option. */\n  disabled?: boolean;\n\n  /** The `id` attribute of the option. */\n  id: string;\n\n  /** The `text` string for the option. */\n  text: string;\n\n  /** The value string of the option. */\n  value: string;\n};\n\nexport type OptionCollectionState = {\n  /** The total number of options in the collection. */\n  getCount: () => number;\n\n  /** Returns the index of an option by key. */\n  getIndexOfId(id: string): number;\n\n  /** Returns the option data for the nth option. */\n  getOptionAtIndex(index: number): OptionValue | undefined;\n\n  /** Returns the option data by key. */\n  getOptionById(id: string): OptionValue | undefined;\n\n  /** Returns an array of options filtered by a value matching function against the option's text string. */\n  getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];\n\n  /** Returns an array of options filtered by a value matching function against the option's value string. */\n  getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];\n\n  /** The unordered option data. */\n  options: OptionValue[];\n\n  /* A function that child options call to register their values. Returns a function to unregister the option. */\n  registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"],"mappings":"AAAA"}

package/lib/utils/Selection.types.js

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=Selection.types.js.map

package/lib/utils/Selection.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/Selection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /**\n   * For an uncontrolled component, sets the initial selection.\n   * If this is set, the `defaultValue` prop MUST also be set.\n   */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /* Callback when an option is selected */\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   * If this is set, the `value` prop MUST also be controlled.\n   */\n  selectedOptions?: string[];\n};\n\n/* Values returned by the useSelection hook */\nexport type SelectionState = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/*\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n  optionValue: string | undefined;\n  optionText: string | undefined;\n  selectedOptions: string[];\n};\n\n/* Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}
+{"version":3,"names":["React"],"sources":["../../src/utils/Selection.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /**\n   * For an uncontrolled component, sets the initial selection.\n   * If this is set, the `defaultValue` prop MUST also be set.\n   */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /* Callback when an option is selected */\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   * If this is set, the `value` prop MUST also be controlled.\n   */\n  selectedOptions?: string[];\n};\n\n/* Values returned by the useSelection hook */\nexport type SelectionState = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/*\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n  optionValue: string | undefined;\n  optionText: string | undefined;\n  selectedOptions: string[];\n};\n\n/* Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/utils/dropdownKeyActions.js

@@ -1,4 +1,5 @@
 import * as keys from '@fluentui/keyboard-keys';
+import * as React from 'react';
 /**
  * Converts a keyboard interaction into a defined action
  */

package/lib/utils/dropdownKeyActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["keys","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab","getIndexFromAction","action","currentIndex","maxIndex","Math","min","max"],"sources":["../src/packages/react-components/react-combobox/src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n\n/**\n * Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n  switch (action) {\n    case 'Next':\n      return Math.min(maxIndex, currentIndex + 1);\n      break;\n    case 'Previous':\n      return Math.max(0, currentIndex - 1);\n    case 'First':\n      return 0;\n    case 'Last':\n      return maxIndex;\n    case 'PageDown':\n      return Math.min(maxIndex, currentIndex + 10);\n    case 'PageUp':\n      return Math.max(0, currentIndex - 10);\n    default:\n      return currentIndex;\n  }\n}\n"],"mappings":"AAAA,OAAO,KAAKA,IAAI,MAAM,yBAAyB;AA2B/C;;;AAGA,OAAM,SAAUC,wBAAwBA,CACtCC,CAAsC,EACtCC,OAAA,GAAiC,EAAE;EAEnC,MAAM;IAAEC,IAAI,GAAG,IAAI;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGF,OAAO;EACpD,MAAMG,IAAI,GAAGJ,CAAC,CAACK,GAAG;EAClB,MAAM;IAAEC,MAAM;IAAEC,OAAO;IAAEF,GAAG;IAAEG;EAAO,CAAE,GAAGR,CAAC;EAE3C;EACA,IAAIK,GAAG,CAACI,MAAM,KAAK,CAAC,IAAIL,IAAI,KAAKN,IAAI,CAACY,KAAK,IAAI,CAACJ,MAAM,IAAI,CAACC,OAAO,IAAI,CAACC,OAAO,EAAE;IAC9E,OAAO,MAAM;;EAGf;EACA,IAAI,CAACN,IAAI,EAAE;IACT,IAAIE,IAAI,KAAKN,IAAI,CAACa,SAAS,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIR,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAIT,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;MAClG,OAAO,MAAM;;IAGf;IACA,OAAO,MAAM;;EAGf;EACA,IAAKN,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIN,MAAM,IAAKF,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAK,CAACV,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAM,EAAE;IACrG,OAAO,aAAa;;EAEtB,IAAIP,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;IACtC,OAAO,QAAQ;;EAEjB,IAAIN,IAAI,KAAKN,IAAI,CAACgB,MAAM,EAAE;IACxB,OAAO,OAAO;;EAGhB;EACA,IAAIV,IAAI,KAAKN,IAAI,CAACa,SAAS,EAAE;IAC3B,OAAO,MAAM;;EAEf,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,EAAE;IACzB,OAAO,UAAU;;EAEnB,IAAIR,IAAI,KAAKN,IAAI,CAACiB,IAAI,EAAE;IACtB,OAAO,OAAO;;EAEhB,IAAIX,IAAI,KAAKN,IAAI,CAACkB,GAAG,EAAE;IACrB,OAAO,MAAM;;EAEf,IAAIZ,IAAI,KAAKN,IAAI,CAACmB,MAAM,EAAE;IACxB,OAAO,QAAQ;;EAEjB,IAAIb,IAAI,KAAKN,IAAI,CAACoB,QAAQ,EAAE;IAC1B,OAAO,UAAU;;EAEnB,IAAId,IAAI,KAAKN,IAAI,CAACqB,GAAG,EAAE;IACrB,OAAO,KAAK;;EAGd;EACA,OAAO,MAAM;AACf;AAEA;;;AAGA,OAAM,SAAUC,kBAAkBA,CAACC,MAAuB,EAAEC,YAAoB,EAAEC,QAAgB;EAChG,QAAQF,MAAM;IACZ,KAAK,MAAM;MACT,OAAOG,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,CAAC,CAAC;MAC3C;IACF,KAAK,UAAU;MACb,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,CAAC,CAAC;IACtC,KAAK,OAAO;MACV,OAAO,CAAC;IACV,KAAK,MAAM;MACT,OAAOC,QAAQ;IACjB,KAAK,UAAU;MACb,OAAOC,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,EAAE,CAAC;IAC9C,KAAK,QAAQ;MACX,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,EAAE,CAAC;IACvC;MACE,OAAOA,YAAY;EAAC;AAE1B"}
+{"version":3,"names":["keys","React","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab","getIndexFromAction","action","currentIndex","maxIndex","Math","min","max"],"sources":["../../src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n\n/**\n * Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n  switch (action) {\n    case 'Next':\n      return Math.min(maxIndex, currentIndex + 1);\n      break;\n    case 'Previous':\n      return Math.max(0, currentIndex - 1);\n    case 'First':\n      return 0;\n    case 'Last':\n      return maxIndex;\n    case 'PageDown':\n      return Math.min(maxIndex, currentIndex + 10);\n    case 'PageUp':\n      return Math.max(0, currentIndex - 10);\n    default:\n      return currentIndex;\n  }\n}\n"],"mappings":"AAAA,YAAYA,IAAA,MAAU;AACtB,YAAYC,KAAA,MAAW;AA0BvB;;;AAGA,OAAO,SAASC,yBACdC,CAAsC,EACtCC,OAAA,GAAiC,CAAC,CAAC,EAClB;EACjB,MAAM;IAAEC,IAAA,GAAO,IAAI;IAAEC,WAAA,GAAc;EAAK,CAAE,GAAGF,OAAA;EAC7C,MAAMG,IAAA,GAAOJ,CAAA,CAAEK,GAAG;EAClB,MAAM;IAAEC,MAAA;IAAQC,OAAA;IAASF,GAAA;IAAKG;EAAO,CAAE,GAAGR,CAAA;EAE1C;EACA,IAAIK,GAAA,CAAII,MAAM,KAAK,KAAKL,IAAA,KAASP,IAAA,CAAKa,KAAK,IAAI,CAACJ,MAAA,IAAU,CAACC,OAAA,IAAW,CAACC,OAAA,EAAS;IAC9E,OAAO;EACT;EAEA;EACA,IAAI,CAACN,IAAA,EAAM;IACT,IAAIE,IAAA,KAASP,IAAA,CAAKc,SAAS,IAAIP,IAAA,KAASP,IAAA,CAAKe,OAAO,IAAIR,IAAA,KAASP,IAAA,CAAKgB,KAAK,IAAIT,IAAA,KAASP,IAAA,CAAKa,KAAK,EAAE;MAClG,OAAO;IACT;IAEA;IACA,OAAO;EACT;EAEA;EACA,IAAIN,IAAC,KAASP,IAAA,CAAKe,OAAO,IAAIN,MAAA,IAAWF,IAAA,KAASP,IAAA,CAAKgB,KAAK,IAAK,CAACV,WAAA,IAAeC,IAAA,KAASP,IAAA,CAAKa,KAAK,EAAG;IACrG,OAAO;EACT;EACA,IAAIP,WAAA,IAAeC,IAAA,KAASP,IAAA,CAAKa,KAAK,EAAE;IACtC,OAAO;EACT;EACA,IAAIN,IAAA,KAASP,IAAA,CAAKiB,MAAM,EAAE;IACxB,OAAO;EACT;EAEA;EACA,IAAIV,IAAA,KAASP,IAAA,CAAKc,SAAS,EAAE;IAC3B,OAAO;EACT;EACA,IAAIP,IAAA,KAASP,IAAA,CAAKe,OAAO,EAAE;IACzB,OAAO;EACT;EACA,IAAIR,IAAA,KAASP,IAAA,CAAKkB,IAAI,EAAE;IACtB,OAAO;EACT;EACA,IAAIX,IAAA,KAASP,IAAA,CAAKmB,GAAG,EAAE;IACrB,OAAO;EACT;EACA,IAAIZ,IAAA,KAASP,IAAA,CAAKoB,MAAM,EAAE;IACxB,OAAO;EACT;EACA,IAAIb,IAAA,KAASP,IAAA,CAAKqB,QAAQ,EAAE;IAC1B,OAAO;EACT;EACA,IAAId,IAAA,KAASP,IAAA,CAAKsB,GAAG,EAAE;IACrB,OAAO;EACT;EAEA;EACA,OAAO;AACT;AAEA;;;AAGA,OAAO,SAASC,mBAAmBC,MAAuB,EAAEC,YAAoB,EAAEC,QAAgB,EAAU;EAC1G,QAAQF,MAAA;IACN,KAAK;MACH,OAAOG,IAAA,CAAKC,GAAG,CAACF,QAAA,EAAUD,YAAA,GAAe;MACzC;IACF,KAAK;MACH,OAAOE,IAAA,CAAKE,GAAG,CAAC,GAAGJ,YAAA,GAAe;IACpC,KAAK;MACH,OAAO;IACT,KAAK;MACH,OAAOC,QAAA;IACT,KAAK;MACH,OAAOC,IAAA,CAAKC,GAAG,CAACF,QAAA,EAAUD,YAAA,GAAe;IAC3C,KAAK;MACH,OAAOE,IAAA,CAAKE,GAAG,CAAC,GAAGJ,YAAA,GAAe;IACpC;MACE,OAAOA,YAAA;EAAA;AAEb"}

package/lib/utils/internalTokens.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconSizes","small","medium","large"],"sources":["../src/packages/react-components/react-combobox/src/utils/internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR"}
+{"version":3,"names":["iconSizes","small","medium","large"],"sources":["../../src/utils/internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,SAAA,GAAY;EACvBC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;AACT"}

package/lib/utils/useComboboxBaseState.js

@@ -78,9 +78,7 @@ export const useComboboxBaseState = props => {
       if (!multiselect && selectedOptions.length > 0) {
         const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();
         selectedOption && setActiveOption(selectedOption);
-      }
-      // default to starting at the first option
-      else {
+      } else {
         setActiveOption(getOptionAtIndex(0));
       }
     } else if (!open) {

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sources":["../src/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sources":["../../src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"],"mappings":"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"}

package/lib/utils/useComboboxPopup.js.map

@@ -1 +1 @@
-{"version":3,"names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"sources":["../src/packages/react-components/react-combobox/src/utils/useComboboxPopup.ts"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"],"mappings":"AAAA,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,6BAA6B;AACzF,SAAiCC,aAAa,QAAQ,2BAA2B;AAejF,OAAM,SAAUC,gBAAgBA,CAC9BC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD;EAKzD,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAK;EAE7B;EACA,MAAMI,aAAa,GAAG;IACpBC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,OAAgB;IACvBC,MAAM,EAAE;MAAEC,SAAS,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAC,CAAE;IACrC,GAAGb,2BAA2B,CAACO,WAAW;GAC3C;EAED,MAAM;IAAEO,SAAS;IAAEC;EAAY,CAAE,GAAGd,cAAc,CAACO,aAAa,CAAC;EAEjE,MAAMQ,UAAU,GAAGd,aAAa,CAACI,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEW,GAAG,EAAEF,YAAY,CAAC;EACrE,MAAMG,OAAO,GAAGZ,gBAAgB,IAAI;IAAE,GAAGA,gBAAgB;IAAEW,GAAG,EAAED;EAAU,CAAE;EAE5E,OAAO,CAAC;IAAE,GAAGX,gBAAgB;IAAEY,GAAG,EAAEf,aAAa,CAACG,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEY,GAAG,EAAEH,SAAS;EAAC,CAAE,EAAEI,OAAO,CAAC;AACjG"}
+{"version":3,"names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"sources":["../../src/utils/useComboboxPopup.ts"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"],"mappings":"AAAA,SAASA,2BAA2B,EAAEC,cAAc,QAAQ;AAC5D,SAAiCC,aAAa,QAAQ;AAetD,OAAO,SAASC,iBACdC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD,EAIzD;EACA,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAA;EAExB;EACA,MAAMI,aAAA,GAAgB;IACpBC,QAAA,EAAU;IACVC,KAAA,EAAO;IACPC,MAAA,EAAQ;MAAEC,SAAA,EAAW;MAAGC,QAAA,EAAU;IAAE;IACpC,GAAGb,2BAAA,CAA4BO,WAAA;EACjC;EAEA,MAAM;IAAEO,SAAA;IAAWC;EAAY,CAAE,GAAGd,cAAA,CAAeO,aAAA;EAEnD,MAAMQ,UAAA,GAAad,aAAA,CAAcI,gBAAA,aAAAA,gBAAA,uBAAAA,gBAAA,CAAkBW,GAAG,EAAEF,YAAA;EACxD,MAAMG,OAAA,GAAUZ,gBAAA,IAAoB;IAAE,GAAGA,gBAAgB;IAAEW,GAAA,EAAKD;EAAW;EAE3E,OAAO,CAAC;IAAE,GAAGX,gBAAgB;IAAEY,GAAA,EAAKf,aAAA,CAAcG,gBAAA,aAAAA,gBAAA,uBAAAA,gBAAA,CAAkBY,GAAG,EAAEH,SAAA;EAAW,GAAGI,OAAA,CAAQ;AACjG"}

package/lib/utils/useOptionCollection.js

@@ -7,8 +7,8 @@ export const useOptionCollection = () => {
   const collectionAPI = React.useMemo(() => {
     const getCount = () => nodes.current.length;
     const getOptionAtIndex = index => {
-      var _a;
-      return (_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option;
+      var _nodes_current_index;
+      return (_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option;
     };
     const getIndexOfId = id => nodes.current.findIndex(node => node.option.id === id);
     const getOptionById = id => {
@@ -31,7 +31,7 @@ export const useOptionCollection = () => {
     };
   }, []);
   const registerOption = React.useCallback((option, element) => {
-    var _a;
+    var _nodes_current_index;
     const index = nodes.current.findIndex(node => {
       if (!node.element || !element) {
         return false;
@@ -44,7 +44,7 @@ export const useOptionCollection = () => {
       return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
     });
     // do not register the option if it already exists
-    if (((_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option.id) !== option.id) {
+    if (((_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option.id) !== option.id) {
       const newItem = {
         element,
         option

package/lib/utils/useOptionCollection.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","_a","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"sources":["../src/packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","_nodes_current_index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"sources":["../../src/utils/useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"mappings":"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"}

package/lib/utils/useScrollOptionsIntoView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"sources":["../src/packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,2BAA2B;AAGrD,OAAM,SAAUC,wBAAwBA,CAACC,KAAmB;EAC1D,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAK;EAC9B,MAAME,kBAAkB,GAAGL,KAAK,CAACM,MAAM,CAAiB,IAAI,CAAC;EAE7DN,KAAK,CAACO,SAAS,CAAC,MAAK;IACnB,IAAIF,kBAAkB,CAACG,OAAO,IAAIJ,YAAY,IAAIH,SAAS,EAAE,EAAE;MAC7D,MAAMQ,mBAAmB,GAAGJ,kBAAkB,CAACG,OAAO,CAACE,aAAa,CAAC,IAAIN,YAAY,CAACO,EAAE,EAAE,CAAgB;MAE1G,IAAI,CAACF,mBAAmB,EAAE;QACxB;;MAGF,MAAM;QAAEG,YAAY;QAAEC;MAAS,CAAE,GAAGJ,mBAAmB;MACvD,MAAM;QAAEG,YAAY,EAAEE,kBAAkB;QAAEC;MAAS,CAAE,GAAGV,kBAAkB,CAACG,OAAO;MAElF,MAAMQ,OAAO,GAAGH,SAAS,GAAGE,SAAS;MACrC,MAAME,OAAO,GAAGJ,SAAS,GAAGD,YAAY,GAAGG,SAAS,GAAGD,kBAAkB;MAEzE;MACA;MACA,MAAMI,MAAM,GAAG,CAAC;MAEhB,IAAIF,OAAO,EAAE;QACXX,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGK,MAAM,CAAC;OAC3D,MAAM,IAAID,OAAO,EAAE;QAClBZ,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGC,kBAAkB,GAAGF,YAAY,GAAGM,MAAM,CAAC;;;EAGpG,CAAC,EAAE,CAACd,YAAY,CAAC,CAAC;EAElB,OAAOC,kBAAkB;AAC3B"}
+{"version":3,"names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"sources":["../../src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,SAAS,QAAQ;AAG1B,OAAO,SAASC,yBAAyBC,KAAmB,EAA6B;EACvF,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAA;EACzB,MAAME,kBAAA,GAAqBL,KAAA,CAAMM,MAAM,CAAiB,IAAI;EAE5DN,KAAA,CAAMO,SAAS,CAAC,MAAM;IACpB,IAAIF,kBAAA,CAAmBG,OAAO,IAAIJ,YAAA,IAAgBH,SAAA,IAAa;MAC7D,MAAMQ,mBAAA,GAAsBJ,kBAAA,CAAmBG,OAAO,CAACE,aAAa,CAAE,IAAGN,YAAA,CAAaO,EAAG,EAAC;MAE1F,IAAI,CAACF,mBAAA,EAAqB;QACxB;MACF;MAEA,MAAM;QAAEG,YAAA;QAAcC;MAAS,CAAE,GAAGJ,mBAAA;MACpC,MAAM;QAAEG,YAAA,EAAcE,kBAAA;QAAoBC;MAAS,CAAE,GAAGV,kBAAA,CAAmBG,OAAO;MAElF,MAAMQ,OAAA,GAAUH,SAAA,GAAYE,SAAA;MAC5B,MAAME,OAAA,GAAUJ,SAAA,GAAYD,YAAA,GAAeG,SAAA,GAAYD,kBAAA;MAEvD;MACA;MACA,MAAMI,MAAA,GAAS;MAEf,IAAIF,OAAA,EAAS;QACXX,kBAAA,CAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,SAAA,GAAYK,MAAA;MACrD,OAAO,IAAID,OAAA,EAAS;QAClBZ,kBAAA,CAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,SAAA,GAAYC,kBAAA,GAAqBF,YAAA,GAAeM,MAAA;MACzF;IACF;EACF,GAAG,CAACd,YAAA,CAAa;EAEjB,OAAOC,kBAAA;AACT"}

package/lib/utils/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"sources":["../src/packages/react-components/react-combobox/src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,OAAO,MAAMC,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,oBAAoB,CAAC;IACjEQ,KAAK,EAAEN,KAAK,CAACI,eAAe;IAC5BG,YAAY,EAAEN,sBAAsB;IACpCO,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGZ,WAAW,CAC9B,CAACa,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAW,EAAE;MACf,MAAMa,aAAa,GAAGX,eAAe,CAACY,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,CAACc,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGX,eAAe,CAACc,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,EAAEO,MAAM,CAACG,KAAK,CAAC;;;IAIrDT,kBAAkB,CAACQ,YAAY,CAAC;IAChCV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEjB,eAAe,EAAES;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACV,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMiB,cAAc,GAAIZ,KAAsB,IAAI;IAChDL,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEnB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEkB,cAAc;IAAEb,YAAY;IAAEL;EAAe,CAAE;AAC1D,CAAC"}
+{"version":3,"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"sources":["../../src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ;AAC5B,SAASC,oBAAoB,QAAQ;AAIrC,OAAO,MAAMC,YAAA,GAAgBC,KAAA,IAA0C;EACrE,MAAM;IAAEC,sBAAA;IAAwBC,WAAA;IAAaC;EAAc,CAAE,GAAGH,KAAA;EAEhE,MAAM,CAACI,eAAA,EAAiBC,kBAAA,CAAmB,GAAGP,oBAAA,CAAqB;IACjEQ,KAAA,EAAON,KAAA,CAAMI,eAAe;IAC5BG,YAAA,EAAcN,sBAAA;IACdO,YAAA,EAAc;EAChB;EAEA,MAAMC,YAAA,GAAeZ,WAAA,CACnB,CAACa,KAAA,EAAwBC,MAAA,KAAwB;IAC/C;IACA,IAAIA,MAAA,CAAOC,QAAQ,EAAE;MACnB;IACF;IAEA;IACA,IAAIC,YAAA,GAAe,CAACF,MAAA,CAAOG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAA,EAAa;MACf,MAAMa,aAAA,GAAgBX,eAAA,CAAgBY,SAAS,CAACC,CAAA,IAAKA,CAAA,KAAMN,MAAA,CAAOG,KAAK;MACvE,IAAIC,aAAA,GAAgB,CAAC,GAAG;QACtB;QACAF,YAAA,GAAe,C,GAAIT,eAAA,CAAgBc,KAAK,CAAC,GAAGH,aAAA,G,GAAmBX,eAAA,CAAgBc,KAAK,CAACH,aAAA,GAAgB,GAAG;MAC1G,OAAO;QACL;QACAF,YAAA,GAAe,C,GAAIT,eAAA,EAAiBO,MAAA,CAAOG,KAAK,CAAC;MACnD;IACF;IAEAT,kBAAA,CAAmBQ,YAAA;IACnBV,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAiBO,KAAA,EAAO;MAAES,WAAA,EAAaR,MAAA,CAAOG,KAAK;MAAEM,UAAA,EAAYT,MAAA,CAAOU,IAAI;MAAEjB,eAAA,EAAiBS;IAAa;EAC9G,GACA,CAACV,cAAA,EAAgBD,WAAA,EAAaE,eAAA,EAAiBC,kBAAA,CAAmB;EAGpE,MAAMiB,cAAA,GAAkBZ,KAAA,IAA2B;IACjDL,kBAAA,CAAmB,EAAE;IACrBF,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAiBO,KAAA,EAAO;MAAES,WAAA,EAAaI,SAAA;MAAWH,UAAA,EAAYG,SAAA;MAAWnB,eAAA,EAAiB;IAAG;EAC/F;EAEA,OAAO;IAAEkB,cAAA;IAAgBb,YAAA;IAAcL;EAAgB;AACzD"}