@fluentui/react-combobox 9.0.0-beta.9 → 9.0.0

package/lib-commonjs/components/Option/useOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Option/useOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getValueString(value: string | undefined, children: React.ReactNode) {\n  if (value) {\n    return value;\n  }\n\n  let valueString = '';\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      valueString += child;\n    }\n  });\n  return valueString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { disabled, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionValue = getValueString(value, props.children);\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, value: optionValue }), [\n    id,\n    disabled,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      role: 'option',\n      'aria-disabled': disabled ? 'true' : undefined,\n      'aria-selected': `${selected}`,\n      id,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","react_utilities_1","optionData","useMemo","focusVisible","react_context_selector_1","ListboxContext_1","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","ComboboxContext_1","active","activeOption","CheckIcon","react_icons_1","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      'aria-disabled': disabled ? 'true' : undefined,\n      id,\n      ...semanticProps,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"]}

package/lib-commonjs/components/Option/useOptionStyles.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOptionStyles_unstable = exports.optionClassNames = void 0;
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 exports.optionClassNames = {
   root: 'fui-Option',
   checkIcon: 'fui-Option__checkIcon'
@@ -16,99 +13,123 @@ exports.optionClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "Bt984gj": "f122n59",
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
-    "sj55zd": "f19n0e5",
-    "i8kkvl": "f1ufnopg",
-    "Bceei9c": "f1k6fduh",
-    "mc9l5x": "f22iagw",
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fkhj508",
-    "Bg96gwp": "f1i3iumi",
-    "z8tnut": "fp2oml8",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "f1tdddsa",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "qhf8xq": "f10pi13n",
-    "Jwef8y": "f1knas48",
-    "ecr2s2": "fb40n2d"
+  root: {
+    Bt984gj: "f122n59",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    sj55zd: "f19n0e5",
+    i8kkvl: "f1ufnopg",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f22iagw",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "fp2oml8",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1tdddsa",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    qhf8xq: "f10pi13n",
+    Jwef8y: "f1knas48",
+    ecr2s2: "fb40n2d"
   },
-  "active": {
-    "Bsft5z2": "f13zj6fq",
-    "E3zdtr": "f1mdlcz9",
-    "B80jsxd": "f1nwj1ja",
-    "t2ki1e": "ffmd2fr",
-    "Bm2nyyq": "f8rth92",
-    "Barhvk9": ["flthirb", "ftkbnf5"],
-    "Bw17bha": "f1lh990p",
-    "vfts7": ["ftkbnf5", "flthirb"],
-    "xrcqlc": "fc9v8v1",
-    "Ihftqj": ["f1mwfetb", "f18mat8f"],
-    "Bcgy8vk": "f1cb6c3",
-    "Bhxzhr1": ["f18mat8f", "f1mwfetb"],
-    "B3778ie": ["f1ibwz09", "f1kp91vd"],
-    "d9w3h3": ["f1kp91vd", "f1ibwz09"],
-    "Bl18szs": ["f1pix4dl", "f13nd1z4"],
-    "B4j8arr": ["f13nd1z4", "f1pix4dl"],
-    "B0n5ga8": "f1qw5sz7",
-    "s924m2": ["f19va7ni", "f1a9v3mw"],
-    "B1q35kw": "fkkziue",
-    "Gp14am": ["f1a9v3mw", "f19va7ni"],
-    "bn5sak": "f1a97anr",
-    "By385i5": "f5226zp",
-    "Eqx8gd": ["fa2bdqt", "fei6g0k"],
-    "B1piin3": ["fei6g0k", "fa2bdqt"]
+  active: {
+    Bsft5z2: "f13zj6fq",
+    E3zdtr: "f1mdlcz9",
+    B80jsxd: "f1nwj1ja",
+    t2ki1e: "ffmd2fr",
+    Bm2nyyq: "f8rth92",
+    Barhvk9: ["flthirb", "ftkbnf5"],
+    Bw17bha: "f1lh990p",
+    vfts7: ["ftkbnf5", "flthirb"],
+    xrcqlc: "fc9v8v1",
+    Ihftqj: ["f1mwfetb", "f18mat8f"],
+    Bcgy8vk: "f1cb6c3",
+    Bhxzhr1: ["f18mat8f", "f1mwfetb"],
+    B3778ie: ["f1ibwz09", "f1kp91vd"],
+    d9w3h3: ["f1kp91vd", "f1ibwz09"],
+    Bl18szs: ["f1pix4dl", "f13nd1z4"],
+    B4j8arr: ["f13nd1z4", "f1pix4dl"],
+    B0n5ga8: "f1qw5sz7",
+    s924m2: ["f19va7ni", "f1a9v3mw"],
+    B1q35kw: "fkkziue",
+    Gp14am: ["f1a9v3mw", "f19va7ni"],
+    bn5sak: "f1a97anr",
+    By385i5: "f5226zp",
+    Eqx8gd: ["fa2bdqt", "fei6g0k"],
+    B1piin3: ["fei6g0k", "fa2bdqt"]
   },
-  "disabled": {
-    "sj55zd": "f1s2aq7o",
-    "Jwef8y": "f9ql6rf",
-    "ecr2s2": "fgj9um3",
-    "Bbusuzp": "f1dcs8yz"
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Jwef8y: "f9ql6rf",
+    ecr2s2: "fgj9um3",
+    Bbusuzp: "f1dcs8yz"
   },
-  "selected": {},
-  "checkIcon": {
-    "Be2twd7": "fod5ikn",
-    "Frg6f3": ["f18b9hdq", "fn6qj8t"],
-    "t21cq0": ["f1xk557c", "f1h9en5y"],
-    "Bcdw1i0": "fd7fpy0",
-    "Bo70h7d": "fvc9v3g"
+  selected: {},
+  checkIcon: {
+    Be2twd7: "fod5ikn",
+    Frg6f3: ["f18b9hdq", "fn6qj8t"],
+    t21cq0: ["f1xk557c", "f1h9en5y"],
+    Bcdw1i0: "fd7fpy0",
+    Bo70h7d: "fvc9v3g"
   },
-  "multiselectCheck": {
-    "sj55zd": "f11d4kpn",
-    "Be2twd7": "f1pp30po",
-    "Bcdw1i0": "f1022m68"
+  selectedCheck: {
+    Bcdw1i0: "f1022m68"
   },
-  "selectedCheck": {
-    "Bcdw1i0": "f1022m68"
+  multiselectCheck: {
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fq0vr37",
+    h3c5rm: ["f1byw159", "f11cr0be"],
+    B9xav0g: "f1c1zstj",
+    zhjwy3: ["f11cr0be", "f1byw159"],
+    Bbmb7ep: ["f1g3puop", "fi2rrw2"],
+    Beyfa6y: ["fi2rrw2", "f1g3puop"],
+    B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
+    Btl43ni: ["f1s4nn1u", "f1rstyi9"],
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bkfmm31: "f1w9h62z",
+    Be2twd7: "f1ugzwwg",
+    Bqenvij: "fd461yt",
+    a9b677: "fjw5fx7",
+    Bcdw1i0: "f1022m68"
   },
-  "selectedMultiselectCheck": {
-    "sj55zd": "f1817uup"
+  selectedMultiselectCheck: {
+    De3pzq: "ftywsgz",
+    sj55zd: "fqpbvvt",
+    g2u3we: "f3xi7mh",
+    h3c5rm: ["ftovhe4", "f1wczvin"],
+    B9xav0g: "f68vbr6",
+    zhjwy3: ["f1wczvin", "ftovhe4"]
   },
-  "checkDisabled": {
-    "sj55zd": "f1s2aq7o",
-    "Bbusuzp": "f1dcs8yz"
+  checkDisabled: {
+    sj55zd: "f1s2aq7o",
+    Bbusuzp: "f1dcs8yz"
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1nwj1ja::after{pointer-events:none;}", ".ffmd2fr::after{z-index:1;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fc9v8v1::after{border-top-width:2px;}", ".f1mwfetb::after{border-right-width:2px;}", ".f18mat8f::after{border-left-width:2px;}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}", ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}", ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}", ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1a97anr::after{top:-2px;}", ".f5226zp::after{bottom:-2px;}", ".fa2bdqt::after{left:-2px;}", ".fei6g0k::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1022m68{visibility:visible;}", ".f1817uup{color:var(--colorBrandBackground);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}"],
-  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}"],
-  "m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
+  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1nwj1ja::after{pointer-events:none;}", ".ffmd2fr::after{z-index:1;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fc9v8v1::after{border-top-width:2px;}", ".f1mwfetb::after{border-right-width:2px;}", ".f18mat8f::after{border-left-width:2px;}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}", ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}", ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}", ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1a97anr::after{top:-2px;}", ".f5226zp::after{bottom:-2px;}", ".fa2bdqt::after{left:-2px;}", ".fei6g0k::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1ewtqcl{box-sizing:border-box;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1w9h62z{fill:currentColor;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}", ".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}", ".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}", ".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}"],
+  a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}"],
+  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }]]
 });
 /**
  * Apply styling to the Option slots based on the state
  */
-
-
 const useOptionStyles_unstable = state => {
   const {
     active,
@@ -119,13 +140,10 @@ const useOptionStyles_unstable = state => {
   } = state;
   const styles = useStyles();
   state.root.className = react_1.mergeClasses(exports.optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
-
   if (state.checkIcon) {
     state.checkIcon.className = react_1.mergeClasses(exports.optionClassNames.checkIcon, styles.checkIcon, state.checkIcon.className, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled);
   }
-
   return state;
 };
-
 exports.useOptionStyles_unstable = useOptionStyles_unstable;
 //# sourceMappingURL=useOptionStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Option/useOptionStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,gBAAA,GAAgD;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE;AAFgD,CAAhD;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAkGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,MAAF;IAAU,QAAV;IAAoB,YAApB;IAAkC,WAAlC;IAA+C;EAA/C,IAA4D,KAAlE;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,IAAI,YAAV,IAA0B,MAAM,CAAC,MAHZ,EAIrB,QAAQ,IAAI,MAAM,CAAC,QAJE,EAKrB,QAAQ,IAAI,MAAM,CAAC,QALE,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EASA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAC1B,OAAA,CAAA,gBAAA,CAAiB,SADS,EAE1B,MAAM,CAAC,SAFmB,EAG1B,KAAK,CAAC,SAAN,CAAgB,SAHU,EAI1B,WAAW,IAAI,MAAM,CAAC,gBAJI,EAK1B,QAAQ,IAAI,MAAM,CAAC,aALO,EAM1B,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,wBANR,EAO1B,QAAQ,IAAI,MAAM,CAAC,aAPO,CAA5B;EASD;;EAED,OAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","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  multiselectCheck: {\n    color: tokens.colorNeutralForeground3,\n    fontSize: tokens.fontSizeBase500,\n    visibility: 'visible',\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    color: tokens.colorBrandBackground,\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;CACZ;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA4G1B;AAEF;;;AAGO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,WAAW;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EACvE,MAAMM,MAAM,GAAGT,SAAS,EAAE;EAC1BG,KAAK,CAACL,IAAI,CAACY,SAAS,GAAGT,oBAAY,CACjCJ,wBAAgB,CAACC,IAAI,EACrBW,MAAM,CAACX,IAAI,EACXM,MAAM,IAAIE,YAAY,IAAIG,MAAM,CAACL,MAAM,EACvCC,QAAQ,IAAII,MAAM,CAACJ,QAAQ,EAC3BG,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACL,IAAI,CAACY,SAAS,CACrB;EAED,IAAIP,KAAK,CAACJ,SAAS,EAAE;IACnBI,KAAK,CAACJ,SAAS,CAACW,SAAS,GAAGT,oBAAY,CACtCJ,wBAAgB,CAACE,SAAS,EAC1BU,MAAM,CAACV,SAAS,EAChBI,KAAK,CAACJ,SAAS,CAACW,SAAS,EACzBH,WAAW,IAAIE,MAAM,CAACE,gBAAgB,EACtCH,QAAQ,IAAIC,MAAM,CAACG,aAAa,EAChCJ,QAAQ,IAAID,WAAW,IAAIE,MAAM,CAACI,wBAAwB,EAC1DR,QAAQ,IAAII,MAAM,CAACK,aAAa,CACjC;;EAGH,OAAOX,KAAK;AACd,CAAC;AAzBYN,gCAAwB","names":["exports","root","checkIcon","useStyles","react_1","useOptionStyles_unstable","state","active","disabled","focusVisible","multiselect","selected","styles","className","multiselectCheck","selectedCheck","selectedMultiselectCheck","checkDisabled"],"sourceRoot":"../src/","sources":["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"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OptionGroup = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useOptionGroup_1 = /*#__PURE__*/require("./useOptionGroup");
-
 const renderOptionGroup_1 = /*#__PURE__*/require("./renderOptionGroup");
-
 const useOptionGroupStyles_1 = /*#__PURE__*/require("./useOptionGroupStyles");
 /**
  * OptionGroup component: allows grouping of Option components within a Combobox
  */
-
-
 exports.OptionGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOptionGroup_1.useOptionGroup_unstable(props, ref);
   useOptionGroupStyles_1.useOptionGroupStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","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';\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  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useOptionGroup_1","useOptionGroupStyles_1","renderOptionGroup_1","displayName"],"sourceRoot":"../src/","sources":["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';\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  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./OptionGroup"), exports);
-
 tslib_1.__exportStar(require("./OptionGroup.types"), exports);
-
 tslib_1.__exportStar(require("./renderOptionGroup"), exports);
-
 tslib_1.__exportStar(require("./useOptionGroup"), exports);
-
 tslib_1.__exportStar(require("./useOptionGroupStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/OptionGroup/index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"]}

package/lib-commonjs/components/OptionGroup/renderOptionGroup.js

@@ -4,24 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderOptionGroup_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of OptionGroup
  */
-
-
 const renderOptionGroup_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.label && React.createElement(slots.label, { ...slotProps.label
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.label && React.createElement(slots.label, {
+    ...slotProps.label
   }, slotProps.label.children), slotProps.root.children);
 };
-
 exports.renderOptionGroup_unstable = renderOptionGroup_unstable;
 //# sourceMappingURL=renderOptionGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/renderOptionGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,EAAmC,SAAS,CAAC,KAAV,CAAgB,QAAnD,CADlB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,GAAGJ,SAAS,CAACI,KAAK,CAACC,QAAQ,CAAe,EACzFL,SAAS,CAACG,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC;AATYC,kCAA0B","names":["renderOptionGroup_unstable","state","slots","slotProps","react_utilities_1","React","root","label","children","exports"],"sourceRoot":"../src/","sources":["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"]}

package/lib-commonjs/components/OptionGroup/useOptionGroup.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOptionGroup_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render OptionGroup.
@@ -15,8 +14,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  * @param props - props from this instance of OptionGroup
  * @param ref - reference to root HTMLElement of OptionGroup
  */
-
-
 const useOptionGroup_unstable = (props, ref) => {
   const labelId = react_utilities_1.useId('group-label');
   const {
@@ -41,6 +38,5 @@ const useOptionGroup_unstable = (props, ref) => {
     })
   };
 };
-
 exports.useOptionGroup_unstable = useOptionGroup_unstable;
 //# sourceMappingURL=useOptionGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/useOptionGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,OAAO,GAAG,iBAAA,CAAA,KAAA,CAAM,aAAN,CAAhB;EACA,MAAM;IAAE;EAAF,IAAY,KAAlB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE;IAFG,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,IAAI,EAAE,OAF2B;MAGjC,mBAAmB,KAAK,GAAG,OAAH,GAAa,SAHJ;MAIjC,GAAG;IAJ8B,CAA7B,CALD;IAWL,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;MAC7B,YAAY,EAAE;QACZ,EAAE,EAAE,OADQ;QAEZ,IAAI,EAAE;MAFM;IADe,CAAxB;EAXF,CAAP;AAkBD,CAtBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,OAAO,GAAGC,uBAAK,CAAC,aAAa,CAAC;EACpC,MAAM;IAAEC;EAAK,CAAE,GAAGJ,KAAK;EAEvB,OAAO;IACLK,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,KAAK,EAAE;KACR;IACDE,IAAI,EAAEH,uCAAqB,CAAC,KAAK,EAAE;MACjCF,GAAG;MACHM,IAAI,EAAE,OAAO;MACb,iBAAiB,EAAEH,KAAK,GAAGF,OAAO,GAAGM,SAAS;MAC9C,GAAGR;KACJ,CAAC;IACFI,KAAK,EAAED,kCAAgB,CAACC,KAAK,EAAE;MAC7BK,YAAY,EAAE;QACZC,EAAE,EAAER,OAAO;QACXK,IAAI,EAAE;;KAET;GACF;AACH,CAAC;AAtBYI,+BAAuB","names":["useOptionGroup_unstable","props","ref","labelId","react_utilities_1","label","components","root","role","undefined","defaultProps","id","exports"],"sourceRoot":"../src/","sources":["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"]}

package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOptionGroupStyles_unstable = exports.optionGroupClassNames = void 0;
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 exports.optionGroupClassNames = {
   root: 'fui-OptionGroup',
   label: 'fui-OptionGroup__label'
@@ -16,56 +13,50 @@ exports.optionGroupClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Belr9w4": "fiut8dr",
-    "B8lkq7l": "f1xxzjds",
-    "Gwp8xu": "fu19d3i",
-    "H93o2g": "flylvvz",
-    "eii1in": "f1ug5m11",
-    "om0q45": "f5642y",
-    "Hl9o3s": "ffdf81h",
-    "Bi9x0x4": "flgyru6",
-    "B0i58d9": ["f1fjgumo", "f1sgo0dv"],
-    "sl1c2c": "fwsdxdw",
-    "z4hxbw": ["f1sgo0dv", "f1fjgumo"]
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "fiut8dr",
+    B8lkq7l: "f1xxzjds",
+    Gwp8xu: "fu19d3i",
+    H93o2g: "flylvvz",
+    eii1in: "f1ug5m11",
+    om0q45: "f5642y",
+    Hl9o3s: "ffdf81h",
+    Bi9x0x4: "flgyru6",
+    B0i58d9: ["f1fjgumo", "f1sgo0dv"],
+    sl1c2c: "fwsdxdw",
+    z4hxbw: ["f1sgo0dv", "f1fjgumo"]
   },
-  "label": {
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
-    "sj55zd": "f11d4kpn",
-    "mc9l5x": "ftgm304",
-    "Be2twd7": "fy9rknc",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "fwrc4pm",
-    "z8tnut": "f17mpqex",
-    "z189sj": ["fdw0yi8", "fk8j09s"],
-    "Byoj8tv": "fdvome7",
-    "uwmqm3": ["fk8j09s", "fdw0yi8"]
+  label: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    sj55zd: "f11d4kpn",
+    mc9l5x: "ftgm304",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm",
+    z8tnut: "f17mpqex",
+    z189sj: ["fdw0yi8", "fk8j09s"],
+    Byoj8tv: "fdvome7",
+    uwmqm3: ["fk8j09s", "fdw0yi8"]
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".f1xxzjds:not(:last-child)::after{content:\"\";}", ".fu19d3i:not(:last-child)::after{border-bottom-width:var(--strokeWidthThin);}", ".flylvvz:not(:last-child)::after{border-bottom-style:solid;}", ".f1ug5m11:not(:last-child)::after{border-bottom-color:var(--colorNeutralStroke2);}", ".f5642y:not(:last-child)::after{display:block;}", ".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}", ".flgyru6:not(:last-child)::after{margin-top:0;}", ".f1fjgumo:not(:last-child)::after{margin-right:calc(var(--spacingHorizontalXS) * -1);}", ".f1sgo0dv:not(:last-child)::after{margin-left:calc(var(--spacingHorizontalXS) * -1);}", ".fwsdxdw:not(:last-child)::after{margin-bottom:var(--spacingVerticalXS);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".ftgm304{display:block;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".f1xxzjds:not(:last-child)::after{content:\"\";}", ".fu19d3i:not(:last-child)::after{border-bottom-width:var(--strokeWidthThin);}", ".flylvvz:not(:last-child)::after{border-bottom-style:solid;}", ".f1ug5m11:not(:last-child)::after{border-bottom-color:var(--colorNeutralStroke2);}", ".f5642y:not(:last-child)::after{display:block;}", ".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}", ".flgyru6:not(:last-child)::after{margin-top:0;}", ".f1fjgumo:not(:last-child)::after{margin-right:calc(var(--spacingHorizontalXS) * -1);}", ".f1sgo0dv:not(:last-child)::after{margin-left:calc(var(--spacingHorizontalXS) * -1);}", ".fwsdxdw:not(:last-child)::after{margin-bottom:var(--spacingVerticalXS);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".ftgm304{display:block;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}"]
 });
 /**
  * Apply styling to the OptionGroup slots based on the state
  */
-
-
 const useOptionGroupStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = react_1.mergeClasses(exports.optionGroupClassNames.root, styles.root, state.root.className);
-
   if (state.label) {
     state.label.className = react_1.mergeClasses(exports.optionGroupClassNames.label, styles.label, state.label.className);
   }
-
   return state;
 };
-
 exports.useOptionGroupStyles_unstable = useOptionGroupStyles_unstable;
 //# sourceMappingURL=useOptionGroupStyles.js.map