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

package/lib/components/Option/useOptionStyles.js

@@ -7,99 +7,123 @@ export const optionClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__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
  */
-
-
 export const useOptionStyles_unstable = state => {
   const {
     active,
@@ -110,11 +134,9 @@ export const useOptionStyles_unstable = state => {
   } = state;
   const styles = useStyles();
   state.root.className = mergeClasses(optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
-
   if (state.checkIcon) {
     state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, state.checkIcon.className, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled);
   }
-
   return state;
 };
 //# sourceMappingURL=useOptionStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Option/useOptionStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE;AAFgD,CAAtD;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;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;;;AACH,OAAO,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,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,IAAI,YAAV,IAA0B,MAAM,CAAC,MAHA,EAIjC,QAAQ,IAAI,MAAM,CAAC,QAJc,EAKjC,QAAQ,IAAI,MAAM,CAAC,QALc,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,gBAAgB,CAAC,SADqB,EAEtC,MAAM,CAAC,SAF+B,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,EAItC,WAAW,IAAI,MAAM,CAAC,gBAJgB,EAKtC,QAAQ,IAAI,MAAM,CAAC,aALmB,EAMtC,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,wBANI,EAOtC,QAAQ,IAAI,MAAM,CAAC,aAPmB,CAAxC;EASD;;EAED,OAAO,KAAP;AACD,CAzBM","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,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;CACZ;AAED;;;AAGA,MAAMC,SAAS,gBAAG;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,EA4GhB;AAEF;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,WAAW;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EACvE,MAAMM,MAAM,GAAGR,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACW,SAAS,GAAGd,YAAY,CACjCE,gBAAgB,CAACC,IAAI,EACrBU,MAAM,CAACV,IAAI,EACXK,MAAM,IAAIE,YAAY,IAAIG,MAAM,CAACL,MAAM,EACvCC,QAAQ,IAAII,MAAM,CAACJ,QAAQ,EAC3BG,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACJ,IAAI,CAACW,SAAS,CACrB;EAED,IAAIP,KAAK,CAACH,SAAS,EAAE;IACnBG,KAAK,CAACH,SAAS,CAACU,SAAS,GAAGd,YAAY,CACtCE,gBAAgB,CAACE,SAAS,EAC1BS,MAAM,CAACT,SAAS,EAChBG,KAAK,CAACH,SAAS,CAACU,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","names":["tokens","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","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/components/OptionGroup/OptionGroup.js

@@ -5,7 +5,6 @@ import { useOptionGroupStyles_unstable } from './useOptionGroupStyles';
 /**
  * OptionGroup component: allows grouping of Option components within a Combobox
  */
-
 export const OptionGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOptionGroup_unstable(props, ref);
   useOptionGroupStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","OptionGroup","forwardRef","props","ref","state","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/components/OptionGroup/OptionGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.types.js","sourceRoot":"../src/","sources":["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,"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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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,"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"]}

package/lib/components/OptionGroup/renderOptionGroup.js

@@ -3,14 +3,15 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of OptionGroup
  */
-
 export const renderOptionGroup_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  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,"sources":["components/OptionGroup/renderOptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,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","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,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,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,GAAGF,SAAS,CAACE,KAAK,CAACC,QAAQ,CAAe,EACzFH,SAAS,CAACC,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC","names":["React","getSlots","renderOptionGroup_unstable","state","slots","slotProps","root","label","children"],"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/components/OptionGroup/useOptionGroup.js

@@ -8,7 +8,6 @@ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-
  * @param props - props from this instance of OptionGroup
  * @param ref - reference to root HTMLElement of OptionGroup
  */
-
 export const useOptionGroup_unstable = (props, ref) => {
   const labelId = useId('group-label');
   const {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/useOptionGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,OAAO,GAAG,KAAK,CAAC,aAAD,CAArB;EACA,MAAM;IAAE;EAAF,IAAY,KAAlB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE;IAFG,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,OAF2B;MAGjC,mBAAmB,KAAK,GAAG,OAAH,GAAa,SAHJ;MAIjC,GAAG;IAJ8B,CAAR,CALtB;IAWL,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,YAAY,EAAE;QACZ,EAAE,EAAE,OADQ;QAEZ,IAAI,EAAE;MAFM;IADe,CAAR;EAXlB,CAAP;AAkBD,CAtBM","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,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,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","names":["getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"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/components/OptionGroup/useOptionGroupStyles.js

@@ -7,54 +7,49 @@ export const optionGroupClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__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
  */
-
-
 export const useOptionGroupStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
-
   if (state.label) {
     state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useOptionGroupStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OptionGroup/useOptionGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,KAAK,EAAE;AAF8D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;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;EAAA;AAAA;EAAA;AAAA,EAAlB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,qBAAqB,CAAC,KAAvB,EAA8B,MAAM,CAAC,KAArC,EAA4C,KAAK,CAAC,KAAN,CAAY,SAAxD,CAApC;EACD;;EAED,OAAO,KAAP;AACD,CATM","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;CACR;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;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;EAAA;AAAA;EAAA;AAAA,EAwBhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAElG,IAAIF,KAAK,CAACH,KAAK,EAAE;IACfG,KAAK,CAACH,KAAK,CAACK,SAAS,GAAGT,YAAY,CAACE,qBAAqB,CAACE,KAAK,EAAEI,MAAM,CAACJ,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACK,SAAS,CAAC;;EAGxG,OAAOF,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","optionGroupClassNames","root","label","useStyles","useOptionGroupStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["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"]}

package/lib/contexts/ComboboxContext.js

@@ -1,26 +1,24 @@
-import { createContext } from '@fluentui/react-context-selector'; // eslint-disable-next-line @fluentui/no-context-default-value
-
+import { createContext } from '@fluentui/react-context-selector';
+// eslint-disable-next-line @fluentui/no-context-default-value
 export const ComboboxContext = /*#__PURE__*/createContext({
   activeOption: undefined,
   appearance: 'outline',
   focusVisible: false,
   open: false,
-
   registerOption() {
     return () => undefined;
   },
-
   selectedOptions: [],
-
-  selectOption() {// noop
+  selectOption() {
+    // noop
   },
-
-  setActiveOption() {// noop
+  setActiveOption() {
+    // noop
   },
-
-  setOpen() {// noop
+  setOpen() {
+    // noop
   },
-
   size: 'medium'
 });
+export const ComboboxProvider = ComboboxContext.Provider;
 //# sourceMappingURL=ComboboxContext.js.map

package/lib/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAoBA;;AACA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,YAAY,EAAE,SADmD;EAEjE,UAAU,EAAE,SAFqD;EAGjE,YAAY,EAAE,KAHmD;EAIjE,IAAI,EAAE,KAJ2D;;EAKjE,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAPgE;;EAQjE,eAAe,EAAE,EARgD;;EASjE,YAAY,GAAA,CACV;EACD,CAXgE;;EAYjE,eAAe,GAAA,CACb;EACD,CAdgE;;EAejE,OAAO,GAAA,CACL;EACD,CAjBgE;;EAkBjE,IAAI,EAAE;AAlB2D,CAAvB,CAArC","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"],"sourceRoot":"../src/"}
+{"version":3,"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,cAAc;IACZ,OAAO,MAAMJ,SAAS;EACxB,CAAC;EACDK,eAAe,EAAE,EAAE;EACnBC,YAAY;IACV;EAAA,CACD;EACDC,eAAe;IACb;EAAA,CACD;EACDC,OAAO;IACL;EAAA,CACD;EACDC,IAAI,EAAE;CACP,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAGZ,eAAe,CAACa,QAAQ","names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"sourceRoot":"../src/","sources":["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"]}

package/lib/contexts/ListboxContext.js

@@ -1,21 +1,19 @@
-import { createContext } from '@fluentui/react-context-selector'; // eslint-disable-next-line @fluentui/no-context-default-value
-
+import { createContext } from '@fluentui/react-context-selector';
+// eslint-disable-next-line @fluentui/no-context-default-value
 export const ListboxContext = /*#__PURE__*/createContext({
   activeOption: undefined,
   focusVisible: false,
   multiselect: false,
-
   registerOption() {
     return () => undefined;
   },
-
   selectedOptions: [],
-
-  selectOption() {// noop
+  selectOption() {
+    // noop
   },
-
-  setActiveOption() {// noop
+  setActiveOption() {
+    // noop
   }
-
 });
+export const ListboxProvider = ListboxContext.Provider;
 //# sourceMappingURL=ListboxContext.js.map

package/lib/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/ListboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAiBA;;AACA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAsB;EAC/D,YAAY,EAAE,SADiD;EAE/D,YAAY,EAAE,KAFiD;EAG/D,WAAW,EAAE,KAHkD;;EAI/D,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAN8D;;EAO/D,eAAe,EAAE,EAP8C;;EAQ/D,YAAY,GAAA,CACV;EACD,CAV8D;;EAW/D,eAAe,GAAA,CACb;EACD;;AAb8D,CAAtB,CAApC","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"],"sourceRoot":"../src/"}
+{"version":3,"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,cAAc;IACZ,OAAO,MAAMH,SAAS;EACxB,CAAC;EACDI,eAAe,EAAE,EAAE;EACnBC,YAAY;IACV;EAAA,CACD;EACDC,eAAe;IACb;EAAA;CAEH,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAGT,cAAc,CAACU,QAAQ","names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"sourceRoot":"../src/","sources":["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"]}

package/lib/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/useComboboxContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,wBAAV,CAAmC,KAAnC,EAA2D;EAC/D,MAAM;IACJ,YADI;IAEJ,UAFI;IAGJ,YAHI;IAIJ,IAJI;IAKJ,cALI;IAMJ,eANI;IAOJ,YAPI;IAQJ,eARI;IASJ,OATI;IAUJ;EAVI,IAWF,KAXJ;EAaA,MAAM,QAAQ,GAAG;IACf,YADe;IAEf,UAFe;IAGf,YAHe;IAIf,IAJe;IAKf,cALe;IAMf,eANe;IAOf,YAPe;IAQf,eARe;IASf,OATe;IAUf;EAVe,CAAjB;EAaA,OAAO;IAAE;EAAF,CAAP;AACD","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAEA,OAAM,SAAUA,wBAAwB,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","names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"sourceRoot":"../src/","sources":["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"]}

package/lib/contexts/useListboxContextValues.js

@@ -10,8 +10,8 @@ export function useListboxContextValues(state) {
     selectedOptions,
     selectOption,
     setActiveOption
-  } = state; // get register/unregister functions from parent combobox context
-
+  } = state;
+  // get register/unregister functions from parent combobox context
   const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);
   const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;
   const listbox = {

package/lib/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/useListboxContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAEA,OAAM,SAAU,uBAAV,CAAkC,KAAlC,EAAqD;EACzD,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;EACA,MAAM;IACJ,YADI;IAEJ,YAFI;IAGJ,WAHI;IAIJ,cAJI;IAKJ,eALI;IAMJ,YANI;IAOJ;EAPI,IAQF,KARJ,CAFyD,CAYzD;;EACA,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,eAAD,EAAkB,GAAG,IAAI,GAAG,CAAC,cAA7B,CAAjD;EAEA,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,sBAAH,GAA4B,cAA1E;EAEA,MAAM,OAAO,GAAG;IACd,YADc;IAEd,YAFc;IAGd,WAHc;IAId,cAAc,EAAE,mBAJF;IAKd,eALc;IAMd,YANc;IAOd;EAPc,CAAhB;EAUA,OAAO;IAAE;EAAF,CAAP;AACD","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 {\n    activeOption,\n    focusVisible,\n    multiselect,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ,kCAAkC;AAE1F,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,OAAM,SAAUC,uBAAuB,CAACC,KAAmB;EACzD,MAAMC,kBAAkB,GAAGJ,mBAAmB,CAACC,eAAe,CAAC;EAC/D,MAAM;IACJI,YAAY;IACZC,YAAY;IACZC,WAAW;IACXC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC;EAAe,CAChB,GAAGR,KAAK;EAET;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","names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"sourceRoot":"../src/","sources":["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 {\n    activeOption,\n    focusVisible,\n    multiselect,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    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"]}