@fluentui/react-combobox 9.0.0-beta.24 → 9.0.0-beta.26
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.json +91 -1
- package/CHANGELOG.md +30 -2
- package/dist/index.d.ts +13 -5
- package/lib/components/Combobox/useCombobox.js +14 -0
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.js +9 -2
- package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib/components/ComboboxField/ComboboxField.js +7 -13
- package/lib/components/ComboboxField/ComboboxField.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.js +9 -2
- package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.js +5 -7
- package/lib/components/Listbox/useListboxStyles.js.map +1 -1
- package/lib/components/Option/useOption.js +2 -2
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.js +33 -6
- package/lib/components/Option/useOptionStyles.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +4 -3
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js +14 -0
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.js +9 -2
- package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib-commonjs/components/ComboboxField/ComboboxField.js +5 -11
- package/lib-commonjs/components/ComboboxField/ComboboxField.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js +9 -2
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.js +5 -7
- package/lib-commonjs/components/Listbox/useListboxStyles.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js +1 -1
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.js +33 -6
- package/lib-commonjs/components/Option/useOptionStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +4 -3
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/package.json +6 -6
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ComboboxField = exports.comboboxFieldClassNames = void 0;
|
|
7
|
-
|
|
7
|
+
/* eslint-disable deprecation/deprecation */
|
|
8
8
|
const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
|
|
9
9
|
const Combobox_1 = /*#__PURE__*/require("../../Combobox");
|
|
10
|
-
|
|
11
|
-
exports.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
classNames: exports.comboboxFieldClassNames
|
|
15
|
-
});
|
|
16
|
-
react_field_1.useFieldStyles_unstable(state);
|
|
17
|
-
return react_field_1.renderField_unstable(state);
|
|
18
|
-
});
|
|
19
|
-
exports.ComboboxField.displayName = 'ComboboxField';
|
|
10
|
+
/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
|
|
11
|
+
exports.comboboxFieldClassNames = /*#__PURE__*/react_field_1.getDeprecatedFieldClassNames(Combobox_1.comboboxClassNames.root);
|
|
12
|
+
/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
|
|
13
|
+
exports.ComboboxField = /*#__PURE__*/react_field_1.makeDeprecatedField(Combobox_1.Combobox);
|
|
20
14
|
//# sourceMappingURL=ComboboxField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;
|
|
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"]}
|
|
@@ -56,7 +56,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
56
56
|
B9ooomg: "f1x58t8o",
|
|
57
57
|
Bercvud: "f1ibeo51"
|
|
58
58
|
},
|
|
59
|
-
listbox: {
|
|
59
|
+
listbox: {
|
|
60
|
+
E5pizo: "f1hg901r",
|
|
61
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
62
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
63
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
64
|
+
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
65
|
+
Bxyxcbc: "fmmk62d"
|
|
66
|
+
},
|
|
60
67
|
listboxCollapsed: {
|
|
61
68
|
mc9l5x: "fjseox"
|
|
62
69
|
},
|
|
@@ -204,7 +211,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
204
211
|
Bceei9c: "fdrzuqr"
|
|
205
212
|
}
|
|
206
213
|
}, {
|
|
207
|
-
d: [".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;}", ".f14t3ns0{display:inline-block;}", ".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;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), 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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".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);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".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);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
|
|
214
|
+
d: [".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;}", ".f14t3ns0{display:inline-block;}", ".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;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), 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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".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);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".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);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
|
|
208
215
|
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);}"],
|
|
209
216
|
m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
210
217
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","button","expandIcon","listbox","useStyles","react_1","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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 button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\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 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', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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 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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\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.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n disabled && styles.disabledText,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.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 dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","button","expandIcon","listbox","useStyles","react_1","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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 button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\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 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', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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 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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\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.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n disabled && styles.disabledText,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.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 dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
@@ -14,17 +14,15 @@ exports.listboxClassNames = {
|
|
|
14
14
|
*/
|
|
15
15
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
16
16
|
root: {
|
|
17
|
-
E5pizo: "f1hg901r",
|
|
18
|
-
B7ck84d: "f1ewtqcl",
|
|
19
|
-
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
20
|
-
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
21
|
-
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
22
|
-
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
23
17
|
De3pzq: "fxugw4r",
|
|
18
|
+
B7ck84d: "f1ewtqcl",
|
|
24
19
|
mc9l5x: "f22iagw",
|
|
25
20
|
Beiy3e4: "f1vx9l62",
|
|
26
21
|
Bf4jedk: "f3hsy1e",
|
|
27
22
|
Bmxbyg5: "f5zp4f",
|
|
23
|
+
Bpd4iqm: "fpvhumw",
|
|
24
|
+
oeaueh: "f1yog68k",
|
|
25
|
+
Bw0xxkn: "f13sgyd8",
|
|
28
26
|
z8tnut: "f1x4af0m",
|
|
29
27
|
z189sj: ["f7x41pl", "fruq291"],
|
|
30
28
|
Byoj8tv: "fd55psn",
|
|
@@ -32,7 +30,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
32
30
|
Belr9w4: "fiut8dr"
|
|
33
31
|
}
|
|
34
32
|
}, {
|
|
35
|
-
d: [".
|
|
33
|
+
d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
|
|
36
34
|
});
|
|
37
35
|
/**
|
|
38
36
|
* Apply styling to the Listbox slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAY1B;AAEF;;;AAGO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACH,yBAAiB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC;AALYL,iCAAyB","names":["exports","root","useStyles","react_1","useListboxStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding(tokens.spacingHorizontalXS),\n rowGap: tokens.spacingHorizontalXXS,\n },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"]}
|
|
@@ -77,7 +77,7 @@ const useOption_unstable = (props, ref) => {
|
|
|
77
77
|
// check icon
|
|
78
78
|
let CheckIcon = React.createElement(react_icons_1.CheckmarkFilled, null);
|
|
79
79
|
if (multiselect) {
|
|
80
|
-
CheckIcon = selected ? React.createElement(react_icons_1.
|
|
80
|
+
CheckIcon = selected ? React.createElement(react_icons_1.Checkmark12Filled, null) : '';
|
|
81
81
|
}
|
|
82
82
|
const onClick = event => {
|
|
83
83
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,aAAa,CAACC,IAAwB,EAAEC,QAAyB;EACxE,IAAID,IAAI,KAAKE,SAAS,EAAE;IACtB,OAAOF,IAAI;;EAGb,IAAIG,UAAU,GAAG,EAAE;EACnB,IAAIC,iBAAiB,GAAG,KAAK;EAC7BC,KAAK,CAACC,QAAQ,CAACC,OAAO,CAACN,QAAQ,EAAEO,KAAK,IAAG;IACvC,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7BL,UAAU,IAAIK,KAAK;KACpB,MAAM;MACLJ,iBAAiB,GAAG,IAAI;;EAE5B,CAAC,CAAC;EAEF;EACA,IAAIA,iBAAiB,EAAE;IACrB;IACAK,OAAO,CAACC,IAAI,CAAC,mFAAmF,CAAC;;EAGnG,OAAOP,UAAU;AACnB;AAEA;;;;;;;;;AASO,MAAMQ,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAA2B,KAAiB;EACjG,MAAM;IAAEZ,QAAQ;IAAEa,QAAQ;IAAEd,IAAI;IAAEe;EAAK,CAAE,GAAGH,KAAK;EACjD,MAAMI,SAAS,GAAGX,KAAK,CAACY,MAAM,CAAc,IAAI,CAAC;EACjD,MAAMC,UAAU,GAAGnB,aAAa,CAACC,IAAI,EAAEC,QAAQ,CAAC;EAChD,MAAMkB,WAAW,GAAGJ,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIG,UAAU;EAEvC;EACA,MAAME,EAAE,GAAGC,uBAAK,CAAC,eAAe,EAAET,KAAK,CAACQ,EAAE,CAAC;EAE3C;EACA,MAAME,UAAU,GAAGjB,KAAK,CAACkB,OAAO,CAAc,OAAO;IAAEH,EAAE;IAAEN,QAAQ;IAAEd,IAAI,EAAEkB,UAAU;IAAEH,KAAK,EAAEI;EAAW,CAAE,CAAC,EAAE,CAC5GC,EAAE,EACFN,QAAQ,EACRI,UAAU,EACVC,WAAW,CACZ,CAAC;EAEF;EACA,MAAMK,YAAY,GAAGC,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAIA,GAAG,CAACH,YAAY,CAAC;EAChF,MAAMI,WAAW,GAAGH,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAIA,GAAG,CAACC,WAAW,CAAC;EAC9E,MAAMC,cAAc,GAAGJ,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAC;EACpF,MAAMC,QAAQ,GAAGL,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAG;IACxD,MAAMI,eAAe,GAAGJ,GAAG,CAACI,eAAe;IAE3C,OAAO,CAAC,CAACZ,WAAW,IAAI,CAAC,CAACY,eAAe,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,KAAKd,WAAW,CAAC;EACxE,CAAC,CAAC;EACF,MAAMe,YAAY,GAAGT,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAIA,GAAG,CAACO,YAAY,CAAC;EAChF,MAAMC,eAAe,GAAGV,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAIA,GAAG,CAACQ,eAAe,CAAC;EACtF,MAAMC,OAAO,GAAGX,2CAAkB,CAACY,iCAAe,EAAEV,GAAG,IAAIA,GAAG,CAACS,OAAO,CAAC;EAEvE;EACA,MAAME,MAAM,GAAGb,2CAAkB,CAACC,+BAAc,EAAEC,GAAG,IAAG;;IACtD,OAAO,UAAG,CAACY,YAAY,0CAAEnB,EAAE,MAAKlB,SAAS,IAAI,UAAG,CAACqC,YAAY,0CAAEnB,EAAE,MAAKA,EAAE;EAC1E,CAAC,CAAC;EAEF;EACA,IAAIoB,SAAS,
|
|
1
|
+
{"version":3,"mappings":"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","names":["getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","react_utilities_1","optionData","useMemo","focusVisible","react_context_selector_1","ListboxContext_1","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","ComboboxContext_1","active","activeOption","CheckIcon","react_icons_1","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n id,\n disabled,\n optionText,\n optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"]}
|
|
@@ -75,23 +75,50 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
75
75
|
Bcdw1i0: "fd7fpy0",
|
|
76
76
|
Bo70h7d: "fvc9v3g"
|
|
77
77
|
},
|
|
78
|
-
|
|
79
|
-
sj55zd: "f11d4kpn",
|
|
80
|
-
Be2twd7: "f1pp30po",
|
|
78
|
+
selectedCheck: {
|
|
81
79
|
Bcdw1i0: "f1022m68"
|
|
82
80
|
},
|
|
83
|
-
|
|
81
|
+
multiselectCheck: {
|
|
82
|
+
B4j52fo: "f192inf7",
|
|
83
|
+
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
84
|
+
Bn0qgzm: "f1vxd6vx",
|
|
85
|
+
ibv6hh: ["f1ojsxk5", "f5tn483"],
|
|
86
|
+
icvyot: "fzkkow9",
|
|
87
|
+
vrafjx: ["fcdblym", "fjik90z"],
|
|
88
|
+
oivjwe: "fg706s2",
|
|
89
|
+
wvpqe5: ["fjik90z", "fcdblym"],
|
|
90
|
+
g2u3we: "fq0vr37",
|
|
91
|
+
h3c5rm: ["f1byw159", "f11cr0be"],
|
|
92
|
+
B9xav0g: "f1c1zstj",
|
|
93
|
+
zhjwy3: ["f11cr0be", "f1byw159"],
|
|
94
|
+
Bbmb7ep: ["f1g3puop", "fi2rrw2"],
|
|
95
|
+
Beyfa6y: ["fi2rrw2", "f1g3puop"],
|
|
96
|
+
B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
|
|
97
|
+
Btl43ni: ["f1s4nn1u", "f1rstyi9"],
|
|
98
|
+
B7ck84d: "f1ewtqcl",
|
|
99
|
+
mc9l5x: "f22iagw",
|
|
100
|
+
Bt984gj: "f122n59",
|
|
101
|
+
Brf1p80: "f4d9j23",
|
|
102
|
+
Bkfmm31: "f1w9h62z",
|
|
103
|
+
Be2twd7: "f1ugzwwg",
|
|
104
|
+
Bqenvij: "fd461yt",
|
|
105
|
+
a9b677: "fjw5fx7",
|
|
84
106
|
Bcdw1i0: "f1022m68"
|
|
85
107
|
},
|
|
86
108
|
selectedMultiselectCheck: {
|
|
87
|
-
|
|
109
|
+
De3pzq: "ftywsgz",
|
|
110
|
+
sj55zd: "fqpbvvt",
|
|
111
|
+
g2u3we: "f3xi7mh",
|
|
112
|
+
h3c5rm: ["ftovhe4", "f1wczvin"],
|
|
113
|
+
B9xav0g: "f68vbr6",
|
|
114
|
+
zhjwy3: ["f1wczvin", "ftovhe4"]
|
|
88
115
|
},
|
|
89
116
|
checkDisabled: {
|
|
90
117
|
sj55zd: "f1s2aq7o",
|
|
91
118
|
Bbusuzp: "f1dcs8yz"
|
|
92
119
|
}
|
|
93
120
|
}, {
|
|
94
|
-
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1nwj1ja::after{pointer-events:none;}", ".ffmd2fr::after{z-index:1;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fc9v8v1::after{border-top-width:2px;}", ".f1mwfetb::after{border-right-width:2px;}", ".f18mat8f::after{border-left-width:2px;}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}", ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}", ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}", ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1a97anr::after{top:-2px;}", ".f5226zp::after{bottom:-2px;}", ".fa2bdqt::after{left:-2px;}", ".fei6g0k::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".
|
|
121
|
+
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f10pi13n{position:relative;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1nwj1ja::after{pointer-events:none;}", ".ffmd2fr::after{z-index:1;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fc9v8v1::after{border-top-width:2px;}", ".f1mwfetb::after{border-right-width:2px;}", ".f18mat8f::after{border-left-width:2px;}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}", ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}", ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}", ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1a97anr::after{top:-2px;}", ".f5226zp::after{bottom:-2px;}", ".fa2bdqt::after{left:-2px;}", ".fei6g0k::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1ewtqcl{box-sizing:border-box;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1w9h62z{fill:currentColor;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}", ".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}", ".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}", ".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}"],
|
|
95
122
|
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}"],
|
|
96
123
|
a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}"],
|
|
97
124
|
m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;CACZ;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;CACZ;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA4G1B;AAEF;;;AAGO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,WAAW;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EACvE,MAAMM,MAAM,GAAGT,SAAS,EAAE;EAC1BG,KAAK,CAACL,IAAI,CAACY,SAAS,GAAGT,oBAAY,CACjCJ,wBAAgB,CAACC,IAAI,EACrBW,MAAM,CAACX,IAAI,EACXM,MAAM,IAAIE,YAAY,IAAIG,MAAM,CAACL,MAAM,EACvCC,QAAQ,IAAII,MAAM,CAACJ,QAAQ,EAC3BG,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACL,IAAI,CAACY,SAAS,CACrB;EAED,IAAIP,KAAK,CAACJ,SAAS,EAAE;IACnBI,KAAK,CAACJ,SAAS,CAACW,SAAS,GAAGT,oBAAY,CACtCJ,wBAAgB,CAACE,SAAS,EAC1BU,MAAM,CAACV,SAAS,EAChBI,KAAK,CAACJ,SAAS,CAACW,SAAS,EACzBH,WAAW,IAAIE,MAAM,CAACE,gBAAgB,EACtCH,QAAQ,IAAIC,MAAM,CAACG,aAAa,EAChCJ,QAAQ,IAAID,WAAW,IAAIE,MAAM,CAACI,wBAAwB,EAC1DR,QAAQ,IAAII,MAAM,CAACK,aAAa,CACjC;;EAGH,OAAOX,KAAK;AACd,CAAC;AAzBYN,gCAAwB","names":["exports","root","checkIcon","useStyles","react_1","useOptionStyles_unstable","state","active","disabled","focusVisible","multiselect","selected","styles","className","multiselectCheck","selectedCheck","selectedMultiselectCheck","checkDisabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n multiselectCheck: {\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n boxSizing: 'border-box',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n active && focusVisible && styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n state.checkIcon.className,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n );\n }\n\n return state;\n};\n"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -187,6 +187,7 @@ Object.defineProperty(exports, "useOptionGroup_unstable", {
|
|
|
187
187
|
return OptionGroup_1.useOptionGroup_unstable;
|
|
188
188
|
}
|
|
189
189
|
});
|
|
190
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
190
191
|
var ComboboxField_1 = /*#__PURE__*/require("./ComboboxField");
|
|
191
192
|
Object.defineProperty(exports, "ComboboxField_unstable", {
|
|
192
193
|
enumerable: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,yCAAgB;EAAA;AAAA;AAEzB;AAASF;EAAAC;EAAAC;IAAA,uCAAe;EAAA;AAAA;AAExB;AAASF;EAAAC;EAAAC;IAAA,0DAAwB;EAAA;AAAA;AACjC;AAASF;EAAAC;EAAAC;IAAA,wDAAuB;EAAA;AAAA;AAChC;AACEF;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA;AAGrB;AACEF;EAAAC;EAAAC;IAAA,sBAAM;EAAA;AAAA;AACNF;EAAAC;EAAAC;IAAA,gCAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,qCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,kCAAkB;EAAA;AAAA;AAGpB;AACEF;EAAAC;EAAAC;IAAA,0BAAQ;EAAA;AAAA;AACRF;EAAAC;EAAAC;IAAA,oCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,yCAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,4CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,sCAAoB;EAAA;AAAA;AAUtB;AACEF;EAAAC;EAAAC;IAAA,0BAAQ;EAAA;AAAA;AACRF;EAAAC;EAAAC;IAAA,oCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,yCAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,4CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,sCAAoB;EAAA;AAAA;AAUtB;AACEF;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AAIzB;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAA4BF;EAAAC;EAAAC;IAAA,8CAAuB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,yCAAgB;EAAA;AAAA;AAEzB;AAASF;EAAAC;EAAAC;IAAA,uCAAe;EAAA;AAAA;AAExB;AAASF;EAAAC;EAAAC;IAAA,0DAAwB;EAAA;AAAA;AACjC;AAASF;EAAAC;EAAAC;IAAA,wDAAuB;EAAA;AAAA;AAChC;AACEF;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA;AAGrB;AACEF;EAAAC;EAAAC;IAAA,sBAAM;EAAA;AAAA;AACNF;EAAAC;EAAAC;IAAA,gCAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,qCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,kCAAkB;EAAA;AAAA;AAGpB;AACEF;EAAAC;EAAAC;IAAA,0BAAQ;EAAA;AAAA;AACRF;EAAAC;EAAAC;IAAA,oCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,yCAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,4CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,sCAAoB;EAAA;AAAA;AAUtB;AACEF;EAAAC;EAAAC;IAAA,0BAAQ;EAAA;AAAA;AACRF;EAAAC;EAAAC;IAAA,oCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,yCAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,4CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,sCAAoB;EAAA;AAAA;AAUtB;AACEF;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AAIzB;AACA;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAA4BF;EAAAC;EAAAC;IAAA,8CAAuB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}
|
|
@@ -14,6 +14,7 @@ const useSelection_1 = /*#__PURE__*/require("../utils/useSelection");
|
|
|
14
14
|
const useComboboxBaseState = props => {
|
|
15
15
|
const {
|
|
16
16
|
appearance = 'outline',
|
|
17
|
+
children,
|
|
17
18
|
editable = false,
|
|
18
19
|
inlinePopup = false,
|
|
19
20
|
multiselect,
|
|
@@ -69,7 +70,7 @@ const useComboboxBaseState = props => {
|
|
|
69
70
|
});
|
|
70
71
|
setOpenState(newState);
|
|
71
72
|
}, [onOpenChange, setOpenState]);
|
|
72
|
-
// update active option based on change in open state
|
|
73
|
+
// update active option based on change in open state or children
|
|
73
74
|
React.useEffect(() => {
|
|
74
75
|
if (open && !activeOption) {
|
|
75
76
|
// if it is single-select and there is a selected option, start at the selected option
|
|
@@ -85,9 +86,9 @@ const useComboboxBaseState = props => {
|
|
|
85
86
|
// reset the active option when closing
|
|
86
87
|
setActiveOption(undefined);
|
|
87
88
|
}
|
|
88
|
-
// this should only be run in response to changes in the open state
|
|
89
|
+
// this should only be run in response to changes in the open state or children
|
|
89
90
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
90
|
-
}, [open]);
|
|
91
|
+
}, [open, children]);
|
|
91
92
|
return {
|
|
92
93
|
...optionCollection,
|
|
93
94
|
...selectionState,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAGA;;;AAGO,MAAMA,oBAAoB,
|
|
1
|
+
{"version":3,"mappings":"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","names":["useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","useOptionCollection_1","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection_1","selectedOptions","isFirstMount","react_utilities_1","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n children,\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state or children\n React.useEffect(() => {\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, children]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.26",
|
|
4
4
|
"description": "Fluent UI React Combobox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/keyboard-keys": "^9.0.1",
|
|
36
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
37
|
-
"@fluentui/react-field": "9.0.0-alpha.
|
|
36
|
+
"@fluentui/react-context-selector": "^9.1.6",
|
|
37
|
+
"@fluentui/react-field": "9.0.0-alpha.17",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.175",
|
|
39
|
-
"@fluentui/react-portal": "^9.1.
|
|
40
|
-
"@fluentui/react-positioning": "^9.3.
|
|
39
|
+
"@fluentui/react-portal": "^9.1.4",
|
|
40
|
+
"@fluentui/react-positioning": "^9.3.9",
|
|
41
41
|
"@fluentui/react-theme": "^9.1.5",
|
|
42
|
-
"@fluentui/react-utilities": "^9.
|
|
42
|
+
"@fluentui/react-utilities": "^9.5.0",
|
|
43
43
|
"@griffel/react": "^1.5.2",
|
|
44
44
|
"tslib": "^2.1.0"
|
|
45
45
|
},
|