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

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

@@ -4,21 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComboboxStyles_unstable = exports.comboboxClassNames = void 0;
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const internalTokens_1 = /*#__PURE__*/require("../../utils/internalTokens");
-
 exports.comboboxClassNames = {
   root: 'fui-Combobox',
   input: 'fui-Combobox__input',
   expandIcon: 'fui-Combobox__expandIcon',
   listbox: 'fui-Combobox__listbox'
-}; // Matches internal heights for Select and Input, but there are no theme variables for these
+};
+// Matches internal heights for Select and Input, but there are no theme variables for these
 // field heights are 2px less than other controls, since the border is on the parent element.
-
 const fieldHeights = {
   small: '22px',
   medium: '30px',
@@ -27,227 +23,287 @@ const fieldHeights = {
 /**
  * Styles for Combobox
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "Bt984gj": "f122n59",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "f1p3nwhy",
-    "h3c5rm": ["f11589ue", "f1pdflbu"],
-    "B9xav0g": "f1q5o8ev",
-    "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
-    "B7ck84d": "f1ewtqcl",
-    "i8kkvl": "f14mj54c",
-    "mc9l5x": "fwk3njj",
-    "Budl1dq": "fz17x9o",
-    "Brf1p80": "f1869bpl",
-    "Bf4jedk": "f1exfvgq",
-    "qhf8xq": "f10pi13n",
-    "Bbr2w1p": "f14a1fxs",
-    "Bduesf4": "f3e99gv",
-    "Bpq79vn": "fhljsf7",
-    "li1rpt": "f1gw3sf2",
-    "Bsft5z2": "f13zj6fq",
-    "E3zdtr": "f1mdlcz9",
-    "Eqx8gd": ["f1a7op3", "f1cjjd47"],
-    "By385i5": "f1gboi2j",
-    "B1piin3": ["f1cjjd47", "f1a7op3"],
-    "Dlnsje": "f145g4dw",
-    "d9w3h3": ["f1kp91vd", "f1ibwz09"],
-    "B3778ie": ["f1ibwz09", "f1kp91vd"],
-    "Bcgy8vk": "f14pi962",
-    "Bw17bha": "f1lh990p",
-    "B1q35kw": "f1jc6hxc",
-    "Gjdm7m": "f13evtba",
-    "b1kco5": "f1yk9hq",
-    "Ba2ppi3": "fhwpy7i",
-    "F2fol1": "f14ee0xe",
-    "lck23g": "f1xhbsuh",
-    "df92cz": "fv8e3ye",
-    "I188md": "ftb5wc6",
-    "umuwi5": "fjw5xc1",
-    "Blcqepd": "f1xdyd5c",
-    "nplu4u": "fatpbeo",
-    "Bioka5o": "fb7uyps",
-    "H713fs": "f1cmft4k",
-    "B9ooomg": "f1x58t8o",
-    "Bercvud": "f1ibeo51"
-  },
-  "listbox": {},
-  "listboxCollapsed": {
-    "mc9l5x": "fjseox"
-  },
-  "small": {
-    "z189sj": ["fdw0yi8", "fk8j09s"]
-  },
-  "medium": {
-    "z189sj": ["f11gcy0p", "f1ng84yb"]
-  },
-  "large": {
-    "i8kkvl": "f1rjii52",
-    "z189sj": ["fw5db7e", "f1uw59to"]
-  },
-  "outline": {
-    "De3pzq": "fxugw4r",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "fj3muxo",
-    "h3c5rm": ["f1akhkt", "f1lxtadh"],
-    "B9xav0g": "f1c1zstj",
-    "zhjwy3": ["f1lxtadh", "f1akhkt"],
-    "Bgoe8wy": "fvcxoqz",
-    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
-    "oetu4i": "flmw63s",
-    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
-    "B6oc9vd": "fvs00aa",
-    "ak43y8": ["f1assf6x", "f4ruux4"],
-    "wmxk5l": "fqhmt4z",
-    "B50zh58": ["f4ruux4", "f1assf6x"]
-  },
-  "underline": {
-    "De3pzq": "f1c21dwh",
-    "Bn0qgzm": "f1vxd6vx",
-    "oivjwe": "fg706s2",
-    "B9xav0g": "f1c1zstj",
-    "Bbmb7ep": ["f1krrbdw", "f1deotkl"],
-    "Beyfa6y": ["f1deotkl", "f1krrbdw"],
-    "B7oj6ja": ["f10ostut", "f1ozlkrg"],
-    "Btl43ni": ["f1ozlkrg", "f10ostut"]
+  root: {
+    Bt984gj: "f122n59",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    B7ck84d: "f1ewtqcl",
+    i8kkvl: "f14mj54c",
+    mc9l5x: "fwk3njj",
+    Budl1dq: "fz17x9o",
+    Brf1p80: "f1869bpl",
+    Bf4jedk: "f1exfvgq",
+    qhf8xq: "f10pi13n",
+    Bbr2w1p: "f14a1fxs",
+    Bduesf4: "f3e99gv",
+    Bpq79vn: "fhljsf7",
+    li1rpt: "f1gw3sf2",
+    Bsft5z2: "f13zj6fq",
+    E3zdtr: "f1mdlcz9",
+    Eqx8gd: ["f1a7op3", "f1cjjd47"],
+    By385i5: "f1gboi2j",
+    B1piin3: ["f1cjjd47", "f1a7op3"],
+    Dlnsje: "f145g4dw",
+    d9w3h3: ["f1kp91vd", "f1ibwz09"],
+    B3778ie: ["f1ibwz09", "f1kp91vd"],
+    Bcgy8vk: "f14pi962",
+    Bw17bha: "f1lh990p",
+    B1q35kw: "f1jc6hxc",
+    Gjdm7m: "f13evtba",
+    b1kco5: "f1yk9hq",
+    Ba2ppi3: "fhwpy7i",
+    F2fol1: "f14ee0xe",
+    lck23g: "f1xhbsuh",
+    df92cz: "fv8e3ye",
+    I188md: "ftb5wc6",
+    umuwi5: "fjw5xc1",
+    Blcqepd: "f1xdyd5c",
+    nplu4u: "fatpbeo",
+    Bioka5o: "fb7uyps",
+    H713fs: "f1cmft4k",
+    B9ooomg: "f1x58t8o",
+    Bercvud: "f1ibeo51"
+  },
+  listbox: {
+    E5pizo: "f1hg901r",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Bxyxcbc: "fmmk62d"
+  },
+  listboxCollapsed: {
+    mc9l5x: "fjseox"
+  },
+  small: {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  medium: {
+    z189sj: ["f11gcy0p", "f1ng84yb"]
+  },
+  large: {
+    i8kkvl: "f1rjii52",
+    z189sj: ["fw5db7e", "f1uw59to"]
+  },
+  outline: {
+    De3pzq: "fxugw4r",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1c1zstj",
+    zhjwy3: ["f1lxtadh", "f1akhkt"]
+  },
+  outlineInteractive: {
+    Bgoe8wy: "fvcxoqz",
+    Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
+    oetu4i: "flmw63s",
+    gg5e9n: ["f1m52nbi", "f1ub3y4t"],
+    B6oc9vd: "fvs00aa",
+    ak43y8: ["f1assf6x", "f4ruux4"],
+    wmxk5l: "fqhmt4z",
+    B50zh58: ["f4ruux4", "f1assf6x"]
+  },
+  underline: {
+    De3pzq: "f1c21dwh",
+    Bn0qgzm: "f1vxd6vx",
+    oivjwe: "fg706s2",
+    B9xav0g: "f1c1zstj",
+    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
+    Beyfa6y: ["f1deotkl", "f1krrbdw"],
+    B7oj6ja: ["f10ostut", "f1ozlkrg"],
+    Btl43ni: ["f1ozlkrg", "f10ostut"]
   },
   "filled-lighter": {
-    "De3pzq": "fxugw4r"
+    De3pzq: "fxugw4r",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"]
   },
   "filled-darker": {
-    "De3pzq": "f16xq7d1"
+    De3pzq: "f16xq7d1",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"]
+  },
+  invalid: {
+    tvckwq: "fs4k3qj",
+    gk2u95: ["fcee079", "fmyw78r"],
+    hhx65j: "f1fgmyf4",
+    Bxowmz0: ["fmyw78r", "fcee079"]
+  },
+  invalidUnderline: {
+    hhx65j: "f1fgmyf4"
+  },
+  disabled: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    Bjwas2f: "fg455y9",
+    Bn1d65q: ["f1rvyvqg", "f14g86mu"],
+    Bxeuatn: "f1cwzwz",
+    n51gp8: ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".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);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
-  "w": [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
-  "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
-    "m": "screen and (prefers-reduced-motion: reduce)"
+  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);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".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;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
-    "m": "screen and (prefers-reduced-motion: reduce)"
+    m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
-    "m": "screen and (prefers-reduced-motion: reduce)"
+    m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
-    "m": "screen and (prefers-reduced-motion: reduce)"
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
   }]],
-  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
-  "a": [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
+  h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
+  a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
 });
-
 const useInputStyles = /*#__PURE__*/react_1.__styles({
-  "input": {
-    "De3pzq": "f1c21dwh",
-    "B4j52fo": "fre7gi1",
-    "Bekrc4i": ["f1358rze", "f1rvrf73"],
-    "Bn0qgzm": "fqdk4by",
-    "ibv6hh": ["f1rvrf73", "f1358rze"],
-    "sj55zd": "f19n0e5",
-    "Bahqtrf": "fk6fouc",
-    "Brovlpu": "ftqa4ok",
-    "yvdlaj": "fwyc1cq",
-    "B3o7kgh": "f13ta7ih"
-  },
-  "small": {
-    "Be2twd7": "fy9rknc",
-    "Bqenvij": "f50nw0v",
-    "Bg96gwp": "fwrc4pm",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1xile11", "fqznh8f"]
-  },
-  "medium": {
-    "Be2twd7": "fkhj508",
-    "Bqenvij": "f1tvdnth",
-    "Bg96gwp": "f1i3iumi",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1e60jzv", "f135dnwl"]
-  },
-  "large": {
-    "Be2twd7": "fod5ikn",
-    "Bqenvij": "f1ihhdec",
-    "Bg96gwp": "faaz57k",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["fnphzt9", "flt1dlf"]
+  input: {
+    De3pzq: "f1c21dwh",
+    B4j52fo: "fre7gi1",
+    Bekrc4i: ["f1358rze", "f1rvrf73"],
+    Bn0qgzm: "fqdk4by",
+    ibv6hh: ["f1rvrf73", "f1358rze"],
+    sj55zd: "f19n0e5",
+    Bahqtrf: "fk6fouc",
+    Brovlpu: "ftqa4ok",
+    yvdlaj: "fwyc1cq",
+    B3o7kgh: "f13ta7ih"
+  },
+  small: {
+    Bqenvij: "f50nw0v",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1xile11", "fqznh8f"]
+  },
+  medium: {
+    Bqenvij: "f1tvdnth",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1e60jzv", "f135dnwl"]
+  },
+  large: {
+    Bqenvij: "f1ihhdec",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "faaz57k",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["fnphzt9", "flt1dlf"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    De3pzq: "f1c21dwh",
+    Bceei9c: "fdrzuqr",
+    yvdlaj: "fahhnxm"
   }
 }, {
-  "d": [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f50nw0v{height:22px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1tvdnth{height:30px;}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1ihhdec{height:38px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"]
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f50nw0v{height:22px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1tvdnth{height:30px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1ihhdec{height:38px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"]
 });
-
 const useIconStyles = /*#__PURE__*/react_1.__styles({
-  "icon": {
-    "B7ck84d": "f1ewtqcl",
-    "sj55zd": "fxkbij4",
-    "mc9l5x": "ftgm304",
-    "Be2twd7": "f1pp30po",
-    "Bo70h7d": "fvc9v3g"
-  },
-  "small": {
-    "Be2twd7": "f4ybsrx",
-    "Frg6f3": ["f1h9en5y", "f1xk557c"]
-  },
-  "medium": {
-    "Be2twd7": "fe5j1ua",
-    "Frg6f3": ["f1h9en5y", "f1xk557c"]
-  },
-  "large": {
-    "Be2twd7": "f1rt2boy",
-    "Frg6f3": ["f1t5qyk5", "f1ikr372"]
+  icon: {
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "fxkbij4",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "ftgm304",
+    Be2twd7: "f1pp30po",
+    Bo70h7d: "fvc9v3g"
+  },
+  small: {
+    Be2twd7: "f4ybsrx",
+    Frg6f3: ["f1h9en5y", "f1xk557c"]
+  },
+  medium: {
+    Be2twd7: "fe5j1ua",
+    Frg6f3: ["f1h9en5y", "f1xk557c"]
+  },
+  large: {
+    Be2twd7: "f1rt2boy",
+    Frg6f3: ["f1t5qyk5", "f1ikr372"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}"]
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state
  */
-
-
 const useComboboxStyles_unstable = state => {
   const {
     appearance,
     open,
     size
   } = state;
+  const invalid = `${state.input['aria-invalid']}` === 'true';
+  const disabled = state.input.disabled;
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const inputStyles = useInputStyles();
-  state.root.className = react_1.mergeClasses(exports.comboboxClassNames.root, styles.root, styles[appearance], styles[size], state.root.className);
-  state.input.className = react_1.mergeClasses(exports.comboboxClassNames.input, inputStyles.input, inputStyles[size], state.input.className);
-
+  state.root.className = react_1.mergeClasses(exports.comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+  state.input.className = react_1.mergeClasses(exports.comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
   if (state.listbox) {
     state.listbox.className = react_1.mergeClasses(exports.comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
   }
-
   if (state.expandIcon) {
-    state.expandIcon.className = react_1.mergeClasses(exports.comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], state.expandIcon.className);
+    state.expandIcon.className = react_1.mergeClasses(exports.comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
   }
-
   return state;
 };
-
 exports.useComboboxStyles_unstable = useComboboxStyles_unstable;
 //# sourceMappingURL=useComboboxStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {},\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    fontSize: tokens.fontSizeBase200,\n    height: fieldHeights.small,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    height: fieldHeights.medium,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    height: fieldHeights.large,\n    lineHeight: tokens.lineHeightBase400,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["exports","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","react_1","useInputStyles","useIconStyles","useComboboxStyles_unstable","state","appearance","open","size","invalid","disabled","styles","iconStyles","inputStyles","className","outlineInteractive","invalidUnderline","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    ...typographyStyles.caption1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    height: fieldHeights.medium,\n    ...typographyStyles.body1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    height: fieldHeights.large,\n    ...typographyStyles.body2,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxField = exports.comboboxFieldClassNames = void 0;
+/* eslint-disable deprecation/deprecation */
+const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
+const Combobox_1 = /*#__PURE__*/require("../../Combobox");
+/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
+exports.comboboxFieldClassNames = /*#__PURE__*/react_field_1.getDeprecatedFieldClassNames(Combobox_1.comboboxClassNames.root);
+/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
+exports.ComboboxField = /*#__PURE__*/react_field_1.makeDeprecatedField(Combobox_1.Combobox);
+//# sourceMappingURL=ComboboxField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAIA;AACaA,+BAAuB,gBAAGC,0CAA4B,CAACC,6BAAkB,CAACC,IAAI,CAAC;AAC5F;AACaH,qBAAa,gBAA4CC,iCAAmB,CAACC,mBAAQ,CAAC","names":["exports","react_field_1","Combobox_1","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Combobox, comboboxClassNames, ComboboxProps } from '../../Combobox';\n\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport type ComboboxFieldProps = DeprecatedFieldProps<ComboboxProps>;\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const comboboxFieldClassNames = getDeprecatedFieldClassNames(comboboxClassNames.root);\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = makeDeprecatedField(Combobox);\n"]}

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./ComboboxField"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/ComboboxField/index.ts"],"sourcesContent":["export * from './ComboboxField';\n"]}