@fluentui/react-combobox 9.5.39 → 9.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -2
- package/dist/index.d.ts +11 -2
- package/lib/components/Combobox/Combobox.types.js.map +1 -1
- package/lib/components/Combobox/renderCombobox.js +2 -1
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Combobox/useCombobox.js +41 -3
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.js +27 -3
- package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib/components/Combobox/useInputTriggerSlot.js +1 -1
- package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js +2 -1
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +41 -3
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.js +22 -5
- package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +2 -1
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js +2 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js +40 -2
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +52 -2
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js +1 -1
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js +2 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +39 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +37 -5
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +2 -1
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/package.json +8 -7
|
@@ -21,6 +21,7 @@ const comboboxClassNames = {
|
|
|
21
21
|
root: 'fui-Combobox',
|
|
22
22
|
input: 'fui-Combobox__input',
|
|
23
23
|
expandIcon: 'fui-Combobox__expandIcon',
|
|
24
|
+
clearIcon: 'fui-Combobox__clearIcon',
|
|
24
25
|
listbox: 'fui-Combobox__listbox'
|
|
25
26
|
};
|
|
26
27
|
// Matches internal heights for Select and Input, but there are no theme variables for these
|
|
@@ -593,6 +594,37 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
593
594
|
Be2twd7: "f1pp30po",
|
|
594
595
|
Bo70h7d: "fvc9v3g"
|
|
595
596
|
},
|
|
597
|
+
hidden: {
|
|
598
|
+
mc9l5x: "fjseox"
|
|
599
|
+
},
|
|
600
|
+
visuallyHidden: {
|
|
601
|
+
Bh84pgu: "f1ekcaio",
|
|
602
|
+
Bqenvij: "f1mpe4l3",
|
|
603
|
+
B6of3ja: "fkrn0sh",
|
|
604
|
+
t21cq0: [
|
|
605
|
+
"f179hvsh",
|
|
606
|
+
"f1538868"
|
|
607
|
+
],
|
|
608
|
+
jrapky: "fmxx68s",
|
|
609
|
+
Frg6f3: [
|
|
610
|
+
"f1538868",
|
|
611
|
+
"f179hvsh"
|
|
612
|
+
],
|
|
613
|
+
B68tc82: "f1p9o1ba",
|
|
614
|
+
Bmxbyg5: "f1sil6mw",
|
|
615
|
+
z8tnut: "f1nbblvp",
|
|
616
|
+
z189sj: [
|
|
617
|
+
"fifp7yv",
|
|
618
|
+
"f1asdtw4"
|
|
619
|
+
],
|
|
620
|
+
Byoj8tv: "f1ov4xf1",
|
|
621
|
+
uwmqm3: [
|
|
622
|
+
"f1asdtw4",
|
|
623
|
+
"fifp7yv"
|
|
624
|
+
],
|
|
625
|
+
a9b677: "frkrog8",
|
|
626
|
+
qhf8xq: "f1euv43f"
|
|
627
|
+
},
|
|
596
628
|
small: {
|
|
597
629
|
Be2twd7: "f4ybsrx",
|
|
598
630
|
Frg6f3: [
|
|
@@ -626,6 +658,21 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
626
658
|
".ftgm304{display:block;}",
|
|
627
659
|
".f1pp30po{font-size:var(--fontSizeBase500);}",
|
|
628
660
|
".fvc9v3g svg{display:block;}",
|
|
661
|
+
".fjseox{display:none;}",
|
|
662
|
+
".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}",
|
|
663
|
+
".f1mpe4l3{height:1px;}",
|
|
664
|
+
".fkrn0sh{margin-top:-1px;}",
|
|
665
|
+
".f179hvsh{margin-right:-1px;}",
|
|
666
|
+
".f1538868{margin-left:-1px;}",
|
|
667
|
+
".fmxx68s{margin-bottom:-1px;}",
|
|
668
|
+
".f1p9o1ba{overflow-x:hidden;}",
|
|
669
|
+
".f1sil6mw{overflow-y:hidden;}",
|
|
670
|
+
".f1nbblvp{padding-top:0px;}",
|
|
671
|
+
".fifp7yv{padding-right:0px;}",
|
|
672
|
+
".f1asdtw4{padding-left:0px;}",
|
|
673
|
+
".f1ov4xf1{padding-bottom:0px;}",
|
|
674
|
+
".frkrog8{width:1px;}",
|
|
675
|
+
".f1euv43f{position:absolute;}",
|
|
629
676
|
".f4ybsrx{font-size:16px;}",
|
|
630
677
|
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
|
|
631
678
|
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
|
|
@@ -638,7 +685,7 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
638
685
|
]
|
|
639
686
|
});
|
|
640
687
|
const useComboboxStyles_unstable = (state)=>{
|
|
641
|
-
const { appearance, open, size } = state;
|
|
688
|
+
const { appearance, open, size, showClearIcon } = state;
|
|
642
689
|
const invalid = `${state.input['aria-invalid']}` === 'true';
|
|
643
690
|
const disabled = state.input.disabled;
|
|
644
691
|
const styles = useStyles();
|
|
@@ -650,7 +697,10 @@ const useComboboxStyles_unstable = (state)=>{
|
|
|
650
697
|
state.listbox.className = (0, _react.mergeClasses)(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
|
|
651
698
|
}
|
|
652
699
|
if (state.expandIcon) {
|
|
653
|
-
state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
|
|
700
|
+
state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
|
|
701
|
+
}
|
|
702
|
+
if (state.clearIcon) {
|
|
703
|
+
state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
|
|
654
704
|
}
|
|
655
705
|
return state;
|
|
656
706
|
}; //# sourceMappingURL=useComboboxStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n listbox: 'fui-Combobox__listbox'\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 * Styles for Combobox\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n Bt984gj: \"f122n59\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n B7ck84d: \"f1ewtqcl\",\n i8kkvl: \"f14mj54c\",\n mc9l5x: \"fwk3njj\",\n Budl1dq: \"fz17x9o\",\n Brf1p80: \"f1869bpl\",\n Bf4jedk: \"f1exfvgq\",\n qhf8xq: \"f10pi13n\",\n Bbr2w1p: \"f14a1fxs\",\n Bduesf4: \"f3e99gv\",\n Bpq79vn: \"fhljsf7\",\n li1rpt: \"f1gw3sf2\",\n Bsft5z2: \"f13zj6fq\",\n E3zdtr: \"f1mdlcz9\",\n Eqx8gd: [\"f1a7op3\", \"f1cjjd47\"],\n By385i5: \"f1gboi2j\",\n B1piin3: [\"f1cjjd47\", \"f1a7op3\"],\n Dlnsje: \"f145g4dw\",\n d9w3h3: [\"f1kp91vd\", \"f1ibwz09\"],\n B3778ie: [\"f1ibwz09\", \"f1kp91vd\"],\n Bcgy8vk: \"f14pi962\",\n Bw17bha: \"f1lh990p\",\n B1q35kw: \"f1jc6hxc\",\n Gjdm7m: \"f13evtba\",\n b1kco5: \"f1yk9hq\",\n Ba2ppi3: \"fhwpy7i\",\n F2fol1: \"f14ee0xe\",\n lck23g: \"f1xhbsuh\",\n df92cz: \"fv8e3ye\",\n I188md: \"ftb5wc6\",\n umuwi5: \"fjw5xc1\",\n Blcqepd: \"f1xdyd5c\",\n nplu4u: \"fatpbeo\",\n Bioka5o: \"fb7uyps\",\n H713fs: \"f1cmft4k\",\n B9ooomg: \"f1x58t8o\",\n Bercvud: \"f1ibeo51\"\n },\n listbox: {\n E5pizo: \"f1hg901r\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n Bxyxcbc: \"fmmk62d\",\n B7ck84d: \"f1ewtqcl\"\n },\n listboxCollapsed: {\n mc9l5x: \"fjseox\"\n },\n small: {\n z189sj: [\"fdw0yi8\", \"fk8j09s\"]\n },\n medium: {\n z189sj: [\"f11gcy0p\", \"f1ng84yb\"]\n },\n large: {\n i8kkvl: \"f1rjii52\",\n z189sj: [\"fw5db7e\", \"f1uw59to\"]\n },\n outline: {\n De3pzq: \"fxugw4r\",\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fj3muxo\",\n h3c5rm: [\"f1akhkt\", \"f1lxtadh\"],\n B9xav0g: \"f1c1zstj\",\n zhjwy3: [\"f1lxtadh\", \"f1akhkt\"]\n },\n outlineInteractive: {\n Bgoe8wy: \"fvcxoqz\",\n Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n oetu4i: \"flmw63s\",\n gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n B6oc9vd: \"fvs00aa\",\n ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n wmxk5l: \"fqhmt4z\",\n B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n },\n underline: {\n De3pzq: \"f1c21dwh\",\n Bn0qgzm: \"f1vxd6vx\",\n oivjwe: \"fg706s2\",\n B9xav0g: \"f1c1zstj\",\n Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n Btl43ni: [\"f1ozlkrg\", \"f10ostut\"]\n },\n \"filled-lighter\": {\n De3pzq: \"fxugw4r\",\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"]\n },\n \"filled-darker\": {\n De3pzq: \"f16xq7d1\",\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"]\n },\n invalid: {\n tvckwq: \"fs4k3qj\",\n gk2u95: [\"fcee079\", \"fmyw78r\"],\n hhx65j: \"f1fgmyf4\",\n Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n },\n invalidUnderline: {\n hhx65j: \"f1fgmyf4\"\n },\n disabled: {\n Bceei9c: \"fdrzuqr\",\n De3pzq: \"f1c21dwh\",\n g2u3we: \"f1jj8ep1\",\n h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n B9xav0g: \"f4ikngz\",\n zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n Bjwas2f: \"fg455y9\",\n Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n Bxeuatn: \"f1cwzwz\",\n n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n }\n}, {\n d: [\".f122n59{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{column-gap:var(--spacingHorizontalXXS);}\", \".fwk3njj{display:inline-grid;}\", \".fz17x9o{grid-template-columns:1fr auto;}\", \".f1869bpl{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{clip-path:inset(calc(100% - 2px) 0 0 0);}\", \".f1yk9hq::after{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{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);}\"],\n w: [\".f14a1fxs:focus-within{outline-width:2px;}\", \".f3e99gv:focus-within{outline-style:solid;}\", \".fhljsf7:focus-within{outline-color:transparent;}\", \".fjw5xc1:focus-within::after{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);}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]],\n 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);}\"],\n 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);}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n input: {\n De3pzq: \"f1c21dwh\",\n B4j52fo: \"fre7gi1\",\n Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n Bn0qgzm: \"fqdk4by\",\n ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n sj55zd: \"f19n0e5\",\n Bahqtrf: \"fk6fouc\",\n Brovlpu: \"ftqa4ok\",\n yvdlaj: \"fwyc1cq\",\n B3o7kgh: \"f13ta7ih\"\n },\n small: {\n Bqenvij: \"f50nw0v\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"fwrc4pm\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1xile11\", \"fqznh8f\"]\n },\n medium: {\n Bqenvij: \"f1tvdnth\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1e60jzv\", \"f135dnwl\"]\n },\n large: {\n Bqenvij: \"f1ihhdec\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"faaz57k\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"fnphzt9\", \"flt1dlf\"]\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n De3pzq: \"f1c21dwh\",\n Bceei9c: \"fdrzuqr\",\n yvdlaj: \"fahhnxm\"\n }\n}, {\n 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);}\"],\n f: [\".ftqa4ok:focus{outline-style:none;}\"]\n});\nconst useIconStyles = /*#__PURE__*/__styles({\n icon: {\n B7ck84d: \"f1ewtqcl\",\n sj55zd: \"fxkbij4\",\n Bceei9c: \"f1k6fduh\",\n mc9l5x: \"ftgm304\",\n Be2twd7: \"f1pp30po\",\n Bo70h7d: \"fvc9v3g\"\n },\n small: {\n Be2twd7: \"f4ybsrx\",\n Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n },\n medium: {\n Be2twd7: \"fe5j1ua\",\n Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n },\n large: {\n Be2twd7: \"f1rt2boy\",\n Frg6f3: [\"f1t5qyk5\", \"f1ikr372\"]\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n Bceei9c: \"fdrzuqr\"\n }\n}, {\n 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;}\"]\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = state => {\n const {\n appearance,\n open,\n size\n } = 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 state.root.className = mergeClasses(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);\n state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);\n }\n return state;\n};\n//# sourceMappingURL=useComboboxStyles.styles.js.map"],"names":["comboboxClassNames","useComboboxStyles_unstable","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","__styles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","state","appearance","open","size","styles","iconStyles","inputStyles","className","mergeClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n clearIcon: 'fui-Combobox__clearIcon',\n listbox: 'fui-Combobox__listbox'\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 * Styles for Combobox\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n Bt984gj: \"f122n59\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n B7ck84d: \"f1ewtqcl\",\n i8kkvl: \"f14mj54c\",\n mc9l5x: \"fwk3njj\",\n Budl1dq: \"fz17x9o\",\n Brf1p80: \"f1869bpl\",\n Bf4jedk: \"f1exfvgq\",\n qhf8xq: \"f10pi13n\",\n Bbr2w1p: \"f14a1fxs\",\n Bduesf4: \"f3e99gv\",\n Bpq79vn: \"fhljsf7\",\n li1rpt: \"f1gw3sf2\",\n Bsft5z2: \"f13zj6fq\",\n E3zdtr: \"f1mdlcz9\",\n Eqx8gd: [\"f1a7op3\", \"f1cjjd47\"],\n By385i5: \"f1gboi2j\",\n B1piin3: [\"f1cjjd47\", \"f1a7op3\"],\n Dlnsje: \"f145g4dw\",\n d9w3h3: [\"f1kp91vd\", \"f1ibwz09\"],\n B3778ie: [\"f1ibwz09\", \"f1kp91vd\"],\n Bcgy8vk: \"f14pi962\",\n Bw17bha: \"f1lh990p\",\n B1q35kw: \"f1jc6hxc\",\n Gjdm7m: \"f13evtba\",\n b1kco5: \"f1yk9hq\",\n Ba2ppi3: \"fhwpy7i\",\n F2fol1: \"f14ee0xe\",\n lck23g: \"f1xhbsuh\",\n df92cz: \"fv8e3ye\",\n I188md: \"ftb5wc6\",\n umuwi5: \"fjw5xc1\",\n Blcqepd: \"f1xdyd5c\",\n nplu4u: \"fatpbeo\",\n Bioka5o: \"fb7uyps\",\n H713fs: \"f1cmft4k\",\n B9ooomg: \"f1x58t8o\",\n Bercvud: \"f1ibeo51\"\n },\n listbox: {\n E5pizo: \"f1hg901r\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n Bxyxcbc: \"fmmk62d\",\n B7ck84d: \"f1ewtqcl\"\n },\n listboxCollapsed: {\n mc9l5x: \"fjseox\"\n },\n small: {\n z189sj: [\"fdw0yi8\", \"fk8j09s\"]\n },\n medium: {\n z189sj: [\"f11gcy0p\", \"f1ng84yb\"]\n },\n large: {\n i8kkvl: \"f1rjii52\",\n z189sj: [\"fw5db7e\", \"f1uw59to\"]\n },\n outline: {\n De3pzq: \"fxugw4r\",\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fj3muxo\",\n h3c5rm: [\"f1akhkt\", \"f1lxtadh\"],\n B9xav0g: \"f1c1zstj\",\n zhjwy3: [\"f1lxtadh\", \"f1akhkt\"]\n },\n outlineInteractive: {\n Bgoe8wy: \"fvcxoqz\",\n Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n oetu4i: \"flmw63s\",\n gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n B6oc9vd: \"fvs00aa\",\n ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n wmxk5l: \"fqhmt4z\",\n B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n },\n underline: {\n De3pzq: \"f1c21dwh\",\n Bn0qgzm: \"f1vxd6vx\",\n oivjwe: \"fg706s2\",\n B9xav0g: \"f1c1zstj\",\n Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n Btl43ni: [\"f1ozlkrg\", \"f10ostut\"]\n },\n \"filled-lighter\": {\n De3pzq: \"fxugw4r\",\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"]\n },\n \"filled-darker\": {\n De3pzq: \"f16xq7d1\",\n B4j52fo: \"f192inf7\",\n Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n Bn0qgzm: \"f1vxd6vx\",\n ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"]\n },\n invalid: {\n tvckwq: \"fs4k3qj\",\n gk2u95: [\"fcee079\", \"fmyw78r\"],\n hhx65j: \"f1fgmyf4\",\n Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n },\n invalidUnderline: {\n hhx65j: \"f1fgmyf4\"\n },\n disabled: {\n Bceei9c: \"fdrzuqr\",\n De3pzq: \"f1c21dwh\",\n g2u3we: \"f1jj8ep1\",\n h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n B9xav0g: \"f4ikngz\",\n zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n Bjwas2f: \"fg455y9\",\n Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n Bxeuatn: \"f1cwzwz\",\n n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n }\n}, {\n d: [\".f122n59{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{column-gap:var(--spacingHorizontalXXS);}\", \".fwk3njj{display:inline-grid;}\", \".fz17x9o{grid-template-columns:1fr auto;}\", \".f1869bpl{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{clip-path:inset(calc(100% - 2px) 0 0 0);}\", \".f1yk9hq::after{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{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);}\"],\n w: [\".f14a1fxs:focus-within{outline-width:2px;}\", \".f3e99gv:focus-within{outline-style:solid;}\", \".fhljsf7:focus-within{outline-color:transparent;}\", \".fjw5xc1:focus-within::after{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);}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]],\n 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);}\"],\n 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);}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n input: {\n De3pzq: \"f1c21dwh\",\n B4j52fo: \"fre7gi1\",\n Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n Bn0qgzm: \"fqdk4by\",\n ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n sj55zd: \"f19n0e5\",\n Bahqtrf: \"fk6fouc\",\n Brovlpu: \"ftqa4ok\",\n yvdlaj: \"fwyc1cq\",\n B3o7kgh: \"f13ta7ih\"\n },\n small: {\n Bqenvij: \"f50nw0v\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"fwrc4pm\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1xile11\", \"fqznh8f\"]\n },\n medium: {\n Bqenvij: \"f1tvdnth\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1e60jzv\", \"f135dnwl\"]\n },\n large: {\n Bqenvij: \"f1ihhdec\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"faaz57k\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"fnphzt9\", \"flt1dlf\"]\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n De3pzq: \"f1c21dwh\",\n Bceei9c: \"fdrzuqr\",\n yvdlaj: \"fahhnxm\"\n }\n}, {\n 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);}\"],\n f: [\".ftqa4ok:focus{outline-style:none;}\"]\n});\nconst useIconStyles = /*#__PURE__*/__styles({\n icon: {\n B7ck84d: \"f1ewtqcl\",\n sj55zd: \"fxkbij4\",\n Bceei9c: \"f1k6fduh\",\n mc9l5x: \"ftgm304\",\n Be2twd7: \"f1pp30po\",\n Bo70h7d: \"fvc9v3g\"\n },\n hidden: {\n mc9l5x: \"fjseox\"\n },\n visuallyHidden: {\n Bh84pgu: \"f1ekcaio\",\n Bqenvij: \"f1mpe4l3\",\n B6of3ja: \"fkrn0sh\",\n t21cq0: [\"f179hvsh\", \"f1538868\"],\n jrapky: \"fmxx68s\",\n Frg6f3: [\"f1538868\", \"f179hvsh\"],\n B68tc82: \"f1p9o1ba\",\n Bmxbyg5: \"f1sil6mw\",\n z8tnut: \"f1nbblvp\",\n z189sj: [\"fifp7yv\", \"f1asdtw4\"],\n Byoj8tv: \"f1ov4xf1\",\n uwmqm3: [\"f1asdtw4\", \"fifp7yv\"],\n a9b677: \"frkrog8\",\n qhf8xq: \"f1euv43f\"\n },\n small: {\n Be2twd7: \"f4ybsrx\",\n Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n },\n medium: {\n Be2twd7: \"fe5j1ua\",\n Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n },\n large: {\n Be2twd7: \"f1rt2boy\",\n Frg6f3: [\"f1t5qyk5\", \"f1ikr372\"]\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n Bceei9c: \"fdrzuqr\"\n }\n}, {\n 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;}\", \".fjseox{display:none;}\", \".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}\", \".f1mpe4l3{height:1px;}\", \".fkrn0sh{margin-top:-1px;}\", \".f179hvsh{margin-right:-1px;}\", \".f1538868{margin-left:-1px;}\", \".fmxx68s{margin-bottom:-1px;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1nbblvp{padding-top:0px;}\", \".fifp7yv{padding-right:0px;}\", \".f1asdtw4{padding-left:0px;}\", \".f1ov4xf1{padding-bottom:0px;}\", \".frkrog8{width:1px;}\", \".f1euv43f{position:absolute;}\", \".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;}\"]\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = state => {\n const {\n appearance,\n open,\n size,\n showClearIcon\n } = 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 state.root.className = mergeClasses(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);\n state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n }\n if (state.clearIcon) {\n state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n }\n return state;\n};\n//# sourceMappingURL=useComboboxStyles.styles.js.map"],"names":["comboboxClassNames","useComboboxStyles_unstable","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","__styles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","B6of3ja","t21cq0","jrapky","Frg6f3","B68tc82","Bmxbyg5","a9b677","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,kBAAkB;eAAlBA;;IAwSAC,0BAA0B;eAA1BA;;;uBA1SsC;AAE5C,MAAMD,qBAAqB;IAChCE,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,WAAW;IACXC,SAAS;AACX;AACA,4FAA4F;AAC5F,6FAA6F;AAC7F,MAAMC,eAAe;IACnBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCV,MAAM;QACJW,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACA/C,SAAS;QACPgD,QAAQ;QACRxC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;QAChCsC,SAAS;QACTrC,SAAS;IACX;IACAsC,kBAAkB;QAChBpC,QAAQ;IACV;IACAZ,OAAO;QACLiD,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAhD,QAAQ;QACNgD,QAAQ;YAAC;YAAY;SAAW;IAClC;IACA/C,OAAO;QACLS,QAAQ;QACRsC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,SAAS;QACPC,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,oBAAoB;QAClBC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAW;IAClC;IACAC,WAAW;QACTtB,QAAQ;QACRG,SAAS;QACTI,QAAQ;QACRI,SAAS;QACTxD,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;IACnC;IACA,kBAAkB;QAChB0C,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACA,iBAAiB;QACfZ,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAW,SAAS;QACPC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAU;IACjC;IACAC,kBAAkB;QAChBF,QAAQ;IACV;IACAG,UAAU;QACRC,SAAS;QACT9B,QAAQ;QACRS,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;QAC9BmB,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;QAAoE;QAAmE;QAAiE;QAA+D;QAAqC;QAAsD;QAAkC;QAA6C;QAA6C;QAA+B;QAAiC;QAA4C;QAAmC;QAAwC;QAA+B;QAAiC;QAAkC;QAAiE;QAA0E;QAA2E;QAAkE;QAAgD;QAA0E;QAA8D;QAAyC;QAAmD;QAAmE;QAAiE;QAA0C;QAA8B;QAA0B;QAA2D;QAA0D;QAA4D;QAA2D;QAAyD;QAAsD;QAAsD;QAA8D;QAAuD;QAAwD;QAAwD;QAA0D;QAAqC;QAAuC;QAAsC;QAAwC;QAA0D;QAA4D;QAA4D;QAAuE;QAAkE;QAA4C;QAA2C;QAAyC;QAAwC;QAA6D;QAAgE;QAA8D;QAAgE;QAA+D;QAAkH;QAAoH;QAAmH;QAAuH;QAAiC;QAAkE;QAAmE;QAAkE;KAAmE;IACh5HC,GAAG;QAAC;QAA8C;QAA+C;QAAqD;QAAsD;QAAiE;QAA4E;QAA6E;KAAoG;IAC1gBC,GAAG;QAAC;YAAC;YAAoG;gBACvGA,GAAG;YACL;SAAE;QAAE;YAAC;YAAiG;gBACpGA,GAAG;YACL;SAAE;QAAE;YAAC;YAAkH;gBACrHA,GAAG;YACL;SAAE;QAAE;YAAC;YAA+G;gBAClHA,GAAG;YACL;SAAE;QAAE;YAAC;YAAwE;gBAC3EA,GAAG;YACL;SAAE;QAAE;YAAC;YAAiH;gBACpHA,GAAG;YACL;SAAE;QAAE;YAAC;YAA2E;gBAC9EA,GAAG;YACL;SAAE;KAAC;IACHC,GAAG;QAAC;QAAqE;QAAwE;QAAuE;KAA2E;IACnSC,GAAG;QAAC;QAAwE;QAA2E;QAAyE;KAA4E;AAC9S;AACA,MAAMC,iBAAiB,WAAW,GAAEvF,IAAAA,eAAQ,EAAC;IAC3CT,OAAO;QACLwD,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCqC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAhG,OAAO;QACLiG,SAAS;QACTJ,SAAS;QACTK,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRpD,QAAQ;YAAC;YAAW;SAAW;QAC/BqD,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAtG,QAAQ;QACNgG,SAAS;QACTJ,SAAS;QACTK,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRpD,QAAQ;YAAC;YAAW;SAAW;QAC/BqD,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACArG,OAAO;QACL+F,SAAS;QACTJ,SAAS;QACTK,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRpD,QAAQ;YAAC;YAAW;SAAW;QAC/BqD,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAvB,UAAU;QACRY,QAAQ;QACRzC,QAAQ;QACR8B,SAAS;QACTc,QAAQ;IACV;AACF,GAAG;IACDT,GAAG;QAAC;QAAkE;QAAiC;QAAoC;QAAmC;QAAoC;QAAmD;QAAgD;QAA8E;QAAqE;QAAoD;QAA2C;QAA0B;QAA+C;QAAmD;QAAmD;QAA6B;QAA8B;QAA8B;QAAgC;QAA+F;QAA+F;QAA2B;QAA+C;QAAoD;QAA+F;QAAgG;QAA2B;QAA+C;QAAmD;QAA4F;QAA6F;QAA2D;QAAiC;QAAqF;KAA2E;IAC53DkB,GAAG;QAAC;KAAsC;AAC5C;AACA,MAAMC,gBAAgB,WAAW,GAAErG,IAAAA,eAAQ,EAAC;IAC1CsG,MAAM;QACJhG,SAAS;QACTkF,QAAQ;QACRX,SAAS;QACTrE,QAAQ;QACRsF,SAAS;QACTS,SAAS;IACX;IACAC,QAAQ;QACNhG,QAAQ;IACV;IACAiG,gBAAgB;QACdC,SAAS;QACTb,SAAS;QACTc,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTf,QAAQ;QACRpD,QAAQ;YAAC;YAAW;SAAW;QAC/BqD,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/Bc,QAAQ;QACRrG,QAAQ;IACV;IACAhB,OAAO;QACLkG,SAAS;QACTgB,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAjH,QAAQ;QACNiG,SAAS;QACTgB,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAhH,OAAO;QACLgG,SAAS;QACTgB,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAlC,UAAU;QACRY,QAAQ;QACRX,SAAS;IACX;AACF,GAAG;IACDK,GAAG;QAAC;QAAqC;QAAwD;QAA8B;QAA4B;QAAgD;QAAgC;QAA0B;QAA6C;QAA0B;QAA8B;QAAiC;QAAgC;QAAiC;QAAiC;QAAiC;QAA+B;QAAgC;QAAgC;QAAkC;QAAwB;QAAiC;QAA6B;QAAuD;QAAwD;QAA6B;QAA8B;QAA0D;QAA2D;QAA2D;KAAgC;AACjmC;AAIO,MAAM7F,6BAA6B6H,CAAAA;IACxC,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,IAAI,EACJC,aAAa,EACd,GAAGJ;IACJ,MAAM5C,UAAU,CAAC,EAAE4C,MAAM3H,KAAK,CAAC,eAAe,CAAC,CAAC,KAAK;IACrD,MAAMqF,WAAWsC,MAAM3H,KAAK,CAACqF,QAAQ;IACrC,MAAM2C,SAASxH;IACf,MAAMyH,aAAanB;IACnB,MAAMoB,cAAclC;IACpB2B,MAAM5H,IAAI,CAACoI,SAAS,GAAGC,IAAAA,mBAAY,EAACvI,mBAAmBE,IAAI,EAAEiI,OAAOjI,IAAI,EAAEiI,MAAM,CAACJ,WAAW,EAAEI,MAAM,CAACF,KAAK,EAAE,CAACzC,YAAYuC,eAAe,aAAaI,OAAO3D,kBAAkB,EAAEU,WAAW6C,eAAe,eAAeI,OAAOjD,OAAO,EAAEA,WAAW6C,eAAe,eAAeI,OAAO5C,gBAAgB,EAAEC,YAAY2C,OAAO3C,QAAQ,EAAEsC,MAAM5H,IAAI,CAACoI,SAAS;IAC5VR,MAAM3H,KAAK,CAACmI,SAAS,GAAGC,IAAAA,mBAAY,EAACvI,mBAAmBG,KAAK,EAAEkI,YAAYlI,KAAK,EAAEkI,WAAW,CAACJ,KAAK,EAAEzC,YAAY6C,YAAY7C,QAAQ,EAAEsC,MAAM3H,KAAK,CAACmI,SAAS;IAC5J,IAAIR,MAAMxH,OAAO,EAAE;QACjBwH,MAAMxH,OAAO,CAACgI,SAAS,GAAGC,IAAAA,mBAAY,EAACvI,mBAAmBM,OAAO,EAAE6H,OAAO7H,OAAO,EAAE,CAAC0H,QAAQG,OAAO3E,gBAAgB,EAAEsE,MAAMxH,OAAO,CAACgI,SAAS;IAC9I;IACA,IAAIR,MAAM1H,UAAU,EAAE;QACpB0H,MAAM1H,UAAU,CAACkI,SAAS,GAAGC,IAAAA,mBAAY,EAACvI,mBAAmBI,UAAU,EAAEgI,WAAWlB,IAAI,EAAEkB,UAAU,CAACH,KAAK,EAAEzC,YAAY4C,WAAW5C,QAAQ,EAAE0C,iBAAiBE,WAAWf,cAAc,EAAES,MAAM1H,UAAU,CAACkI,SAAS;IACrN;IACA,IAAIR,MAAMzH,SAAS,EAAE;QACnByH,MAAMzH,SAAS,CAACiI,SAAS,GAAGC,IAAAA,mBAAY,EAACvI,mBAAmBK,SAAS,EAAE+H,WAAWlB,IAAI,EAAEkB,UAAU,CAACH,KAAK,EAAEzC,YAAY4C,WAAW5C,QAAQ,EAAE,CAAC0C,iBAAiBE,WAAWhB,MAAM,EAAEU,MAAMzH,SAAS,CAACiI,SAAS;IAC3M;IACA,OAAOR;AACT,GACA,oDAAoD"}
|
|
@@ -95,7 +95,7 @@ function useInputTriggerSlot(triggerFromProps, ref, options) {
|
|
|
95
95
|
isTyping.current = false;
|
|
96
96
|
}
|
|
97
97
|
// allow space to insert a character if freeform & the last action was typing, or if the popup is closed
|
|
98
|
-
if (
|
|
98
|
+
if ((isTyping.current || !open) && ev.key === ' ') {
|
|
99
99
|
var _triggerFromProps_onKeyDown;
|
|
100
100
|
triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);
|
|
101
101
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInputTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useInputTriggerSlot(triggerFromProps, ref, options) {\n const { state: { open, value, activeOption, selectOption, setValue, setActiveOption, setFocusVisible, multiselect, selectedOptions, clearSelection, getOptionsMatchingText, getIndexOfId, setOpen }, freeform, defaultProps } = options;\n const onBlur = (ev)=>{\n // handle selection and updating value if freeform is false\n if (!open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n selectOption(ev, activeOption);\n }\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n const getOptionFromInput = (inputValue)=>{\n const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n if (!searchString || searchString.length === 0) {\n return;\n }\n const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);\n return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n }\n var _matches_;\n return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n };\n // update value and active option based on input\n const onChange = (ev)=>{\n const inputValue = ev.target.value;\n // update uncontrolled value\n setValue(inputValue);\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n setFocusVisible(true);\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n clearSelection(ev);\n }\n };\n const trigger = useTriggerSlot(triggerFromProps, ref, {\n state: options.state,\n defaultProps,\n elementType: 'input'\n });\n trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n // save the typing vs. navigating options state, as the space key should behave differently in each case\n // we do not want to update the combobox when this changes, just save the value between renders\n const isTyping = React.useRef(false);\n /**\n * Freeform combobox should not select\n */ const defaultOnKeyDown = trigger.onKeyDown;\n const onKeyDown = useEventCallback((ev)=>{\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n setOpen(ev, true);\n }\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(ev, {\n open,\n multiselect\n });\n if (action === 'Type') {\n isTyping.current = true;\n } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n isTyping.current = false;\n }\n // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n if (
|
|
1
|
+
{"version":3,"sources":["useInputTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useInputTriggerSlot(triggerFromProps, ref, options) {\n const { state: { open, value, activeOption, selectOption, setValue, setActiveOption, setFocusVisible, multiselect, selectedOptions, clearSelection, getOptionsMatchingText, getIndexOfId, setOpen }, freeform, defaultProps } = options;\n const onBlur = (ev)=>{\n // handle selection and updating value if freeform is false\n if (!open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n selectOption(ev, activeOption);\n }\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n const getOptionFromInput = (inputValue)=>{\n const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n if (!searchString || searchString.length === 0) {\n return;\n }\n const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);\n return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n }\n var _matches_;\n return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n };\n // update value and active option based on input\n const onChange = (ev)=>{\n const inputValue = ev.target.value;\n // update uncontrolled value\n setValue(inputValue);\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n setFocusVisible(true);\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n clearSelection(ev);\n }\n };\n const trigger = useTriggerSlot(triggerFromProps, ref, {\n state: options.state,\n defaultProps,\n elementType: 'input'\n });\n trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n // save the typing vs. navigating options state, as the space key should behave differently in each case\n // we do not want to update the combobox when this changes, just save the value between renders\n const isTyping = React.useRef(false);\n /**\n * Freeform combobox should not select\n */ const defaultOnKeyDown = trigger.onKeyDown;\n const onKeyDown = useEventCallback((ev)=>{\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n setOpen(ev, true);\n }\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(ev, {\n open,\n multiselect\n });\n if (action === 'Type') {\n isTyping.current = true;\n } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n isTyping.current = false;\n }\n // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n if ((isTyping.current || !open) && ev.key === ' ') {\n var _triggerFromProps_onKeyDown;\n triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);\n return;\n }\n defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(ev);\n });\n trigger.onKeyDown = onKeyDown;\n if (hideActiveDescendant) {\n trigger['aria-activedescendant'] = undefined;\n }\n return trigger;\n}\n"],"names":["useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","activeOption","selectOption","setValue","setActiveOption","setFocusVisible","multiselect","selectedOptions","clearSelection","getOptionsMatchingText","getIndexOfId","setOpen","freeform","defaultProps","onBlur","ev","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","onChange","target","matchingOption","trigger","useTriggerSlot","elementType","mergeCallbacks","hideActiveDescendant","setHideActiveDescendant","React","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current","_triggerFromProps_onKeyDown","call"],"mappings":"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"}
|
|
@@ -21,9 +21,10 @@ const renderDropdown_unstable = (state, contextValues)=>{
|
|
|
21
21
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
|
|
22
22
|
children: [
|
|
23
23
|
state.button.children,
|
|
24
|
-
|
|
24
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
|
|
25
25
|
]
|
|
26
26
|
}),
|
|
27
|
+
state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
|
|
27
28
|
state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
|
|
28
29
|
mountNode: state.mountNode,
|
|
29
30
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderDropdown.js"],"sourcesContent":[" import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(state.root, {\n children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n value: contextValues.combobox,\n children: [\n /*#__PURE__*/ _jsxs(state.button, {\n children: [\n state.button.children,\n
|
|
1
|
+
{"version":3,"sources":["renderDropdown.js"],"sourcesContent":[" import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(state.root, {\n children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n value: contextValues.combobox,\n children: [\n /*#__PURE__*/ _jsxs(state.button, {\n children: [\n state.button.children,\n /*#__PURE__*/ _jsx(state.expandIcon, {})\n ]\n }),\n state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n mountNode: state.mountNode,\n children: /*#__PURE__*/ _jsx(state.listbox, {})\n }))\n ]\n })\n });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","_jsxs","ComboboxContext","Provider","value","combobox","button","expandIcon","clearButton","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;6BACtB;gCACK;iCACI;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;YACpDC,OAAOR,cAAcS,QAAQ;YAC7BL,UAAU;gBACN,WAAW,GAAGC,IAAAA,gBAAK,EAACN,MAAMW,MAAM,EAAE;oBAC9BN,UAAU;wBACNL,MAAMW,MAAM,CAACN,QAAQ;wBACrB,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMY,UAAU,EAAE,CAAC;qBACzC;gBACL;gBACAZ,MAAMa,WAAW,IAAI,WAAW,GAAGV,IAAAA,eAAI,EAACH,MAAMa,WAAW,EAAE,CAAC;gBAC5Db,MAAMc,OAAO,IAAKd,CAAAA,MAAMe,WAAW,GAAG,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGX,IAAAA,eAAI,EAACa,mBAAM,EAAE;oBACrGC,WAAWjB,MAAMiB,SAAS;oBAC1BZ,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC;gBACjD,EAAC;aACJ;QACL;IACJ;AACJ"}
|
|
@@ -19,13 +19,14 @@ const _Listbox = require("../Listbox/Listbox");
|
|
|
19
19
|
const _useListboxSlot = require("../../utils/useListboxSlot");
|
|
20
20
|
const _useButtonTriggerSlot = require("./useButtonTriggerSlot");
|
|
21
21
|
const useDropdown_unstable = (props, ref)=>{
|
|
22
|
+
var _state_clearButton;
|
|
22
23
|
// Merge props from surrounding <Field>, if any
|
|
23
24
|
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
|
|
24
25
|
supportsLabelFor: true,
|
|
25
26
|
supportsSize: true
|
|
26
27
|
});
|
|
27
28
|
const baseState = (0, _useComboboxBaseState.useComboboxBaseState)(props);
|
|
28
|
-
const {
|
|
29
|
+
const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;
|
|
29
30
|
const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
|
|
30
31
|
props,
|
|
31
32
|
primarySlotTagName: 'button',
|
|
@@ -61,16 +62,28 @@ const useDropdown_unstable = (props, ref)=>{
|
|
|
61
62
|
elementType: 'div'
|
|
62
63
|
});
|
|
63
64
|
rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
|
|
65
|
+
const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;
|
|
64
66
|
const state = {
|
|
65
67
|
components: {
|
|
66
68
|
root: 'div',
|
|
67
69
|
button: 'button',
|
|
70
|
+
clearButton: 'button',
|
|
68
71
|
expandIcon: 'span',
|
|
69
72
|
listbox: _Listbox.Listbox
|
|
70
73
|
},
|
|
71
74
|
root: rootSlot,
|
|
72
75
|
button: trigger,
|
|
73
76
|
listbox: open || hasFocus ? listbox : undefined,
|
|
77
|
+
clearButton: _reactutilities.slot.optional(props.clearButton, {
|
|
78
|
+
defaultProps: {
|
|
79
|
+
'aria-label': 'Clear selection',
|
|
80
|
+
children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
|
|
81
|
+
// Safari doesn't allow to focus an element with this
|
|
82
|
+
tabIndex: 0
|
|
83
|
+
},
|
|
84
|
+
elementType: 'button',
|
|
85
|
+
renderByDefault: true
|
|
86
|
+
}),
|
|
74
87
|
expandIcon: _reactutilities.slot.optional(props.expandIcon, {
|
|
75
88
|
renderByDefault: true,
|
|
76
89
|
defaultProps: {
|
|
@@ -79,7 +92,32 @@ const useDropdown_unstable = (props, ref)=>{
|
|
|
79
92
|
elementType: 'span'
|
|
80
93
|
}),
|
|
81
94
|
placeholderVisible: !baseState.value && !!props.placeholder,
|
|
95
|
+
showClearButton,
|
|
82
96
|
...baseState
|
|
83
97
|
};
|
|
98
|
+
const onClearButtonClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{
|
|
99
|
+
var _triggerRef_current;
|
|
100
|
+
clearSelection(ev);
|
|
101
|
+
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
102
|
+
}));
|
|
103
|
+
if (state.clearButton) {
|
|
104
|
+
state.clearButton.onClick = onClearButtonClick;
|
|
105
|
+
}
|
|
106
|
+
// Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
|
|
107
|
+
if (multiselect) {
|
|
108
|
+
state.clearButton = undefined;
|
|
109
|
+
}
|
|
110
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
111
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
|
|
112
|
+
_react.useEffect(()=>{
|
|
113
|
+
if (clearable && multiselect) {
|
|
114
|
+
// eslint-disable-next-line no-console
|
|
115
|
+
console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
|
|
116
|
+
}
|
|
117
|
+
}, [
|
|
118
|
+
clearable,
|
|
119
|
+
multiselect
|
|
120
|
+
]);
|
|
121
|
+
}
|
|
84
122
|
return state;
|
|
85
123
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */ export const useDropdown_unstable = (props, ref)=>{\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsSize: true\n });\n const baseState = useComboboxBaseState(props);\n const {
|
|
1
|
+
{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */ export const useDropdown_unstable = (props, ref)=>{\n var _state_clearButton;\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsSize: true\n });\n const baseState = useComboboxBaseState(props);\n const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: [\n 'children'\n ]\n });\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const triggerRef = React.useRef(null);\n const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children\n }\n });\n var _props_button;\n const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 0,\n children: baseState.value || props.placeholder,\n ...triggerNativeProps\n }\n });\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n children: props.children,\n ...rootNativeProps\n },\n elementType: 'div'\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n const state = {\n components: {\n root: 'div',\n button: 'button',\n clearButton: 'button',\n expandIcon: 'span',\n listbox: Listbox\n },\n root: rootSlot,\n button: trigger,\n listbox: open || hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n // Safari doesn't allow to focus an element with this\n tabIndex: 0\n },\n elementType: 'button',\n renderByDefault: true\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n },\n elementType: 'span'\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n ...baseState\n };\n const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n var _triggerRef_current;\n clearSelection(ev);\n (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n }));\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(()=>{\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [\n clearable,\n multiselect\n ]);\n }\n return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","useMergedRefs","type","tabIndex","value","placeholder","rootSlot","slot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
|
|
@@ -20,6 +20,7 @@ const _react = require("@griffel/react");
|
|
|
20
20
|
const dropdownClassNames = {
|
|
21
21
|
root: 'fui-Dropdown',
|
|
22
22
|
button: 'fui-Dropdown__button',
|
|
23
|
+
clearButton: 'fui-Dropdown__clearButton',
|
|
23
24
|
expandIcon: 'fui-Dropdown__expandIcon',
|
|
24
25
|
listbox: 'fui-Dropdown__listbox'
|
|
25
26
|
};
|
|
@@ -44,7 +45,7 @@ const dropdownClassNames = {
|
|
|
44
45
|
"f1jar5jt"
|
|
45
46
|
],
|
|
46
47
|
B7ck84d: "f1ewtqcl",
|
|
47
|
-
mc9l5x: "
|
|
48
|
+
mc9l5x: "ftuwxu6",
|
|
48
49
|
Bf4jedk: "f1exfvgq",
|
|
49
50
|
qhf8xq: "f10pi13n",
|
|
50
51
|
Bbr2w1p: "f14a1fxs",
|
|
@@ -87,7 +88,9 @@ const dropdownClassNames = {
|
|
|
87
88
|
Bioka5o: "fb7uyps",
|
|
88
89
|
H713fs: "f1cmft4k",
|
|
89
90
|
B9ooomg: "f1x58t8o",
|
|
90
|
-
Bercvud: "f1ibeo51"
|
|
91
|
+
Bercvud: "f1ibeo51",
|
|
92
|
+
Bz04dq9: "f132nw8t",
|
|
93
|
+
Budl3uf: "f1htdosj"
|
|
91
94
|
},
|
|
92
95
|
listbox: {
|
|
93
96
|
B7ck84d: "f1ewtqcl",
|
|
@@ -378,6 +381,9 @@ const dropdownClassNames = {
|
|
|
378
381
|
disabledText: {
|
|
379
382
|
sj55zd: "f1s2aq7o",
|
|
380
383
|
Bceei9c: "fdrzuqr"
|
|
384
|
+
},
|
|
385
|
+
hidden: {
|
|
386
|
+
mc9l5x: "fjseox"
|
|
381
387
|
}
|
|
382
388
|
}, {
|
|
383
389
|
d: [
|
|
@@ -386,7 +392,7 @@ const dropdownClassNames = {
|
|
|
386
392
|
".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
|
|
387
393
|
".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
|
|
388
394
|
".f1ewtqcl{box-sizing:border-box;}",
|
|
389
|
-
".
|
|
395
|
+
".ftuwxu6{display:inline-flex;}",
|
|
390
396
|
".f1exfvgq{min-width:250px;}",
|
|
391
397
|
".f10pi13n{position:relative;}",
|
|
392
398
|
".f1gw3sf2::after{box-sizing:border-box;}",
|
|
@@ -539,6 +545,10 @@ const dropdownClassNames = {
|
|
|
539
545
|
}
|
|
540
546
|
]
|
|
541
547
|
],
|
|
548
|
+
t: [
|
|
549
|
+
"@supports selector(:has(*)){.f132nw8t:has(.fui-Dropdown__clearButton:focus)::after{border-bottom-color:initial;}}",
|
|
550
|
+
"@supports selector(:has(*)){.f1htdosj:has(.fui-Dropdown__clearButton:focus)::after{transform:scaleX(0);}}"
|
|
551
|
+
],
|
|
542
552
|
f: [
|
|
543
553
|
".ftqa4ok:focus{outline-style:none;}"
|
|
544
554
|
],
|
|
@@ -608,19 +618,41 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
608
618
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
|
|
609
619
|
]
|
|
610
620
|
});
|
|
621
|
+
const useBaseClearButtonStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1ekmruf", "r1aeuc1g", {
|
|
622
|
+
r: [
|
|
623
|
+
".r1ekmruf{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}",
|
|
624
|
+
".r1ekmruf:focus{outline-style:none;}",
|
|
625
|
+
".r1ekmruf:focus-visible{outline-style:none;}",
|
|
626
|
+
".r1ekmruf[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
627
|
+
".r1ekmruf[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
628
|
+
".r1aeuc1g{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}",
|
|
629
|
+
".r1aeuc1g:focus{outline-style:none;}",
|
|
630
|
+
".r1aeuc1g:focus-visible{outline-style:none;}",
|
|
631
|
+
".r1aeuc1g[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
632
|
+
".r1aeuc1g[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
633
|
+
],
|
|
634
|
+
s: [
|
|
635
|
+
"@media (forced-colors: active){.r1ekmruf[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
|
|
636
|
+
"@media (forced-colors: active){.r1aeuc1g[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
637
|
+
]
|
|
638
|
+
});
|
|
611
639
|
const useDropdownStyles_unstable = (state)=>{
|
|
612
|
-
const { appearance, open, placeholderVisible, size } = state;
|
|
640
|
+
const { appearance, open, placeholderVisible, showClearButton, size } = state;
|
|
613
641
|
const invalid = `${state.button['aria-invalid']}` === 'true';
|
|
614
642
|
const disabled = state.button.disabled;
|
|
615
643
|
const styles = useStyles();
|
|
616
644
|
const iconStyles = useIconStyles();
|
|
645
|
+
const clearButtonStyle = useBaseClearButtonStyle();
|
|
617
646
|
state.root.className = (0, _react.mergeClasses)(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
|
|
618
647
|
state.button.className = (0, _react.mergeClasses)(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
|
|
619
648
|
if (state.listbox) {
|
|
620
649
|
state.listbox.className = (0, _react.mergeClasses)(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
|
|
621
650
|
}
|
|
622
651
|
if (state.expandIcon) {
|
|
623
|
-
state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
|
|
652
|
+
state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
|
|
653
|
+
}
|
|
654
|
+
if (state.clearButton) {
|
|
655
|
+
state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
|
|
624
656
|
}
|
|
625
657
|
return state;
|
|
626
658
|
}; //# sourceMappingURL=useDropdownStyles.styles.js.map
|