@fluentui/react-combobox 9.0.0-beta.7 → 9.0.0-beta.8
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 +70 -5
- package/CHANGELOG.md +20 -6
- package/dist/index.d.ts +1 -1
- package/lib/components/Combobox/useComboboxStyles.js +14 -1
- package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.js +13 -0
- package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib/components/Listbox/useListbox.js +2 -2
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/contexts/ComboboxContext.js +2 -1
- package/lib/contexts/ComboboxContext.js.map +1 -1
- package/lib/contexts/ListboxContext.js +2 -1
- package/lib/contexts/ListboxContext.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/Selection.types.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +1 -1
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useSelection.js +11 -6
- package/lib/utils/useSelection.js.map +1 -1
- package/lib/utils/useTriggerListboxSlots.js +3 -3
- package/lib/utils/useTriggerListboxSlots.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.js +14 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js +13 -0
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +2 -2
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/contexts/ComboboxContext.js +2 -1
- package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
- package/lib-commonjs/contexts/ListboxContext.js +2 -1
- package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/utils/useSelection.js +11 -6
- package/lib-commonjs/utils/useSelection.js.map +1 -1
- package/lib-commonjs/utils/useTriggerListboxSlots.js +3 -3
- package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,72 @@
|
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 03 Aug 2022 16:00:09 GMT",
|
|
6
|
+
"tag": "@fluentui/react-combobox_v9.0.0-beta.8",
|
|
7
|
+
"version": "9.0.0-beta.8",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "sarah.higley@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-combobox",
|
|
13
|
+
"commit": "29769d9e95a0395c36d596e4e186744da2d232d4",
|
|
14
|
+
"comment": "fix: prevent react-combobox keyboard selection of disabled options"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-combobox",
|
|
19
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
20
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "sarah.higley@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-combobox",
|
|
25
|
+
"commit": "c66808887bcd7fd150c22eda462b325075742694",
|
|
26
|
+
"comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-combobox",
|
|
31
|
+
"comment": "Bump @fluentui/react-portal to v9.0.4",
|
|
32
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-combobox",
|
|
37
|
+
"comment": "Bump @fluentui/react-positioning to v9.1.2",
|
|
38
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-combobox",
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
|
44
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
"none": [
|
|
48
|
+
{
|
|
49
|
+
"author": "popatudor@microsoft.com",
|
|
50
|
+
"package": "@fluentui/react-combobox",
|
|
51
|
+
"commit": "20fd0422e9831a560717f39a8d0cbdf57bc721ca",
|
|
52
|
+
"comment": "fix(docs): add combobox usage warning and style best practices"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
56
|
+
"package": "@fluentui/react-combobox",
|
|
57
|
+
"commit": "d966ea3d9169f2e8d69f0d2a4daf86fe4ca328d6",
|
|
58
|
+
"comment": "disables eslint rule @fluentui/no-context-default-value for local component context"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "popatudor@microsoft.com",
|
|
62
|
+
"package": "@fluentui/react-combobox",
|
|
63
|
+
"commit": "0db1b92eb265450c1e73a7fb35cd266b1b97eba1",
|
|
64
|
+
"comment": "fix(docs): add Dropdown usage warning and style best practices"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"date": "Thu, 14 Jul 2022 21:21:10 GMT",
|
|
6
71
|
"tag": "@fluentui/react-combobox_v9.0.0-beta.7",
|
|
7
72
|
"version": "9.0.0-beta.7",
|
|
8
73
|
"comments": {
|
|
@@ -17,25 +82,25 @@
|
|
|
17
82
|
"author": "beachball",
|
|
18
83
|
"package": "@fluentui/react-combobox",
|
|
19
84
|
"comment": "Bump @fluentui/react-context-selector to v9.0.2",
|
|
20
|
-
"commit": "
|
|
85
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
21
86
|
},
|
|
22
87
|
{
|
|
23
88
|
"author": "beachball",
|
|
24
89
|
"package": "@fluentui/react-combobox",
|
|
25
90
|
"comment": "Bump @fluentui/react-portal to v9.0.3",
|
|
26
|
-
"commit": "
|
|
91
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
27
92
|
},
|
|
28
93
|
{
|
|
29
94
|
"author": "beachball",
|
|
30
95
|
"package": "@fluentui/react-combobox",
|
|
31
96
|
"comment": "Bump @fluentui/react-positioning to v9.1.1",
|
|
32
|
-
"commit": "
|
|
97
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
33
98
|
},
|
|
34
99
|
{
|
|
35
100
|
"author": "beachball",
|
|
36
101
|
"package": "@fluentui/react-combobox",
|
|
37
102
|
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
38
|
-
"commit": "
|
|
103
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
39
104
|
}
|
|
40
105
|
]
|
|
41
106
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 03 Aug 2022 16:00:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.8)
|
|
8
|
+
|
|
9
|
+
Wed, 03 Aug 2022 16:00:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.7..@fluentui/react-combobox_v9.0.0-beta.8)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: prevent react-combobox keyboard selection of disabled options ([PR #24073](https://github.com/microsoft/fluentui/pull/24073) by sarah.higley@microsoft.com)
|
|
15
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
16
|
+
- bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
|
|
17
|
+
- Bump @fluentui/react-portal to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
18
|
+
- Bump @fluentui/react-positioning to v9.1.2 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.7)
|
|
8
22
|
|
|
9
|
-
Thu, 14 Jul 2022 21:
|
|
23
|
+
Thu, 14 Jul 2022 21:21:10 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.6..@fluentui/react-combobox_v9.0.0-beta.7)
|
|
11
25
|
|
|
12
26
|
### Changes
|
|
13
27
|
|
|
14
28
|
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v9.0.2 ([PR #
|
|
16
|
-
- Bump @fluentui/react-portal to v9.0.3 ([PR #
|
|
17
|
-
- Bump @fluentui/react-positioning to v9.1.1 ([PR #
|
|
18
|
-
- Bump @fluentui/react-utilities to v9.0.2 ([PR #
|
|
29
|
+
- Bump @fluentui/react-context-selector to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
30
|
+
- Bump @fluentui/react-portal to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
31
|
+
- Bump @fluentui/react-positioning to v9.1.1 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
19
33
|
|
|
20
34
|
## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.6)
|
|
21
35
|
|
package/dist/index.d.ts
CHANGED
|
@@ -86,7 +86,7 @@ declare type ComboboxBaseProps = SelectionProps & {
|
|
|
86
86
|
declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'placeholder' | 'value'> & OptionCollectionState & SelectionState & {
|
|
87
87
|
activeOption?: OptionValue;
|
|
88
88
|
onOptionClick(event: React_2.MouseEvent, option: OptionValue): void;
|
|
89
|
-
selectOption(event: SelectionEvents,
|
|
89
|
+
selectOption(event: SelectionEvents, option: OptionValue): void;
|
|
90
90
|
setActiveOption(option?: OptionValue): void;
|
|
91
91
|
setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
|
|
92
92
|
};
|
|
@@ -57,10 +57,14 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
57
57
|
"Ba2ppi3": "fhwpy7i",
|
|
58
58
|
"F2fol1": "f14ee0xe",
|
|
59
59
|
"lck23g": "f1xhbsuh",
|
|
60
|
+
"df92cz": "fv8e3ye",
|
|
61
|
+
"I188md": "ftb5wc6",
|
|
60
62
|
"umuwi5": "fjw5xc1",
|
|
61
63
|
"Blcqepd": "f1xdyd5c",
|
|
62
64
|
"nplu4u": "fatpbeo",
|
|
63
65
|
"Bioka5o": "fb7uyps",
|
|
66
|
+
"H713fs": "f1cmft4k",
|
|
67
|
+
"B9ooomg": "f1x58t8o",
|
|
64
68
|
"Bercvud": "f1ibeo51"
|
|
65
69
|
},
|
|
66
70
|
"listbox": {},
|
|
@@ -107,7 +111,16 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
107
111
|
}
|
|
108
112
|
}, {
|
|
109
113
|
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f3hsy1e{min-width:160px;}", ".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);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".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);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
|
|
110
|
-
"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);}"]
|
|
114
|
+
"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);}"],
|
|
115
|
+
"m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
116
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
117
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
|
|
118
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
119
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
|
|
120
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
121
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
|
|
122
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
123
|
+
}]]
|
|
111
124
|
});
|
|
112
125
|
|
|
113
126
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,SAAT,QAA0B,4BAA1B;AAGA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,KAAK,EAAE,qBAFwD;EAG/D,UAAU,EAAE,0BAHmD;EAI/D,OAAO,EAAE;AAJsD,CAA1D;AAOP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;;
|
|
1
|
+
{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n listbox: 'fui-Combobox__listbox',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '160px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom('2px', '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 // size variants\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalM,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n});\n\nconst useInputStyles = makeStyles({\n input: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n fontFamily: tokens.fontFamilyBase,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n },\n\n // size variants\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.padding('3px', 0, '3px', tokens.spacingHorizontalSNudge),\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding('5px', 0, '5px', tokens.spacingHorizontalMNudge),\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n ...shorthands.padding('7px', 0, '7px', tokens.spacingHorizontalM),\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n const { appearance, size } = state;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n comboboxClassNames.root,\n styles.root,\n styles[appearance],\n styles[size],\n state.root.className,\n );\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.listbox.className);\n state.input.className = mergeClasses(\n comboboxClassNames.input,\n inputStyles.input,\n inputStyles[size],\n state.input.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n comboboxClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -53,10 +53,14 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
53
53
|
"Ba2ppi3": "fhwpy7i",
|
|
54
54
|
"F2fol1": "f14ee0xe",
|
|
55
55
|
"lck23g": "f1xhbsuh",
|
|
56
|
+
"df92cz": "fv8e3ye",
|
|
57
|
+
"I188md": "ftb5wc6",
|
|
56
58
|
"umuwi5": "fjw5xc1",
|
|
57
59
|
"Blcqepd": "f1xdyd5c",
|
|
58
60
|
"nplu4u": "fatpbeo",
|
|
59
61
|
"Bioka5o": "fb7uyps",
|
|
62
|
+
"H713fs": "f1cmft4k",
|
|
63
|
+
"B9ooomg": "f1x58t8o",
|
|
60
64
|
"Bercvud": "f1ibeo51"
|
|
61
65
|
},
|
|
62
66
|
"listbox": {},
|
|
@@ -139,6 +143,15 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
139
143
|
}, {
|
|
140
144
|
"d": [".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f3hsy1e{min-width:160px;}", ".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);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".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);}", ".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;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fz17x9o{grid-template-columns:1fr auto;}", ".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);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".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;}", ".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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
|
|
141
145
|
"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);}"],
|
|
146
|
+
"m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
147
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
148
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
|
|
149
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
150
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
|
|
151
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
152
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
|
|
153
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
154
|
+
}]],
|
|
142
155
|
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
143
156
|
});
|
|
144
157
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Dropdown/useDropdownStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,SAAT,QAA0B,4BAA1B;AAGA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,MAAM,EAAE,sBAFuD;EAG/D,UAAU,EAAE,0BAHmD;EAI/D,OAAO,EAAE;AAJsD,CAA1D;AAOP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;;
|
|
1
|
+
{"version":3,"sources":["components/Dropdown/useDropdownStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,SAAT,QAA0B,4BAA1B;AAGA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,MAAM,EAAE,sBAFuD;EAG/D,UAAU,EAAE,0BAHmD;EAI/D,OAAO,EAAE;AAJsD,CAA1D;AAOP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAAlB;;AAoHA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,UAAF;IAAc,kBAAd;IAAkC;EAAlC,IAA2C,KAAjD;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,MAAM,CAAC,UAAD,CAA7C,EAA2D,KAAK,CAAC,IAAN,CAAW,SAAtE,CAAnC;EACA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,kBAAkB,CAAC,OAApB,EAA6B,MAAM,CAAC,OAApC,EAA6C,KAAK,CAAC,OAAN,CAAc,SAA3D,CAAtC;EACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,kBAAkB,CAAC,MADgB,EAEnC,MAAM,CAAC,MAF4B,EAGnC,MAAM,CAAC,IAAD,CAH6B,EAInC,kBAAkB,IAAI,MAAM,CAAC,WAJM,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,kBAAkB,CAAC,UADoB,EAEvC,UAAU,CAAC,IAF4B,EAGvC,UAAU,CAAC,IAAD,CAH6B,EAIvC,KAAK,CAAC,UAAN,CAAiB,SAJsB,CAAzC;EAMD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { 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.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '160px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom('2px', '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 button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '1fr auto',\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 fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.padding('3px', tokens.spacingHorizontalSNudge),\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding('5px', tokens.spacingHorizontalMNudge),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n ...shorthands.padding('7px', tokens.spacingHorizontalM),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\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, placeholderVisible, size } = state;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], state.root.className);\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.listbox.className);\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -36,7 +36,7 @@ export const useListbox_unstable = (props, ref) => {
|
|
|
36
36
|
// clicked option should always become active option
|
|
37
37
|
setActiveOption(getOptionById(option.id)); // handle selection change
|
|
38
38
|
|
|
39
|
-
selectOption(event, option
|
|
39
|
+
selectOption(event, option);
|
|
40
40
|
};
|
|
41
41
|
|
|
42
42
|
const onKeyDown = event => {
|
|
@@ -50,7 +50,7 @@ export const useListbox_unstable = (props, ref) => {
|
|
|
50
50
|
switch (action) {
|
|
51
51
|
case 'Select':
|
|
52
52
|
case 'CloseSelect':
|
|
53
|
-
activeOption && selectOption(event, activeOption
|
|
53
|
+
activeOption && selectOption(event, activeOption);
|
|
54
54
|
break;
|
|
55
55
|
|
|
56
56
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Listbox/useListbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AACA,SAAS,YAAT,QAA6B,0BAA7B;AACA,SAAS,wBAAT,EAAmC,kBAAnC,QAA6D,gCAA7D;AACA,SAAS,eAAT,QAAgC,gCAAhC;AAEA,SAAS,mBAAT,QAAoC,iCAApC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE;EAAF,IAAkB,KAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EACA,MAAM;IAAE,QAAF;IAAY,gBAAZ;IAA8B,aAA9B;IAA6C;EAA7C,IAA8D,gBAApE;EAEA,MAAM;IAAE,eAAF;IAAmB;EAAnB,IAAoC,YAAY,CAAC,KAAD,CAAtD;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC;;EAEA,MAAM,aAAa,GAAG,CAAC,KAAD,EAAuC,MAAvC,KAA8D;IAClF;IACA,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,EAAR,CAAd,CAAf,CAFkF,CAIlF;;IACA,YAAY,CAAC,KAAD,EAAQ,
|
|
1
|
+
{"version":3,"sources":["components/Listbox/useListbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AACA,SAAS,YAAT,QAA6B,0BAA7B;AACA,SAAS,wBAAT,EAAmC,kBAAnC,QAA6D,gCAA7D;AACA,SAAS,eAAT,QAAgC,gCAAhC;AAEA,SAAS,mBAAT,QAAoC,iCAApC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE;EAAF,IAAkB,KAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EACA,MAAM;IAAE,QAAF;IAAY,gBAAZ;IAA8B,aAA9B;IAA6C;EAA7C,IAA8D,gBAApE;EAEA,MAAM;IAAE,eAAF;IAAmB;EAAnB,IAAoC,YAAY,CAAC,KAAD,CAAtD;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC;;EAEA,MAAM,aAAa,GAAG,CAAC,KAAD,EAAuC,MAAvC,KAA8D;IAClF;IACA,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,EAAR,CAAd,CAAf,CAFkF,CAIlF;;IACA,YAAY,CAAC,KAAD,EAAQ,MAAR,CAAZ;EACD,CAND;;EAQA,MAAM,SAAS,GAAI,KAAD,IAA4C;IAC5D,MAAM,MAAM,GAAG,wBAAwB,CAAC,KAAD,EAAQ;MAAE,IAAI,EAAE;IAAR,CAAR,CAAvC;IACA,MAAM,QAAQ,GAAG,QAAQ,KAAK,CAA9B;IACA,MAAM,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,EAAd,CAAf,GAAmC,CAAC,CAApE;IACA,IAAI,QAAQ,GAAG,WAAf;;IAEA,QAAQ,MAAR;MACE,KAAK,QAAL;MACA,KAAK,aAAL;QACE,YAAY,IAAI,YAAY,CAAC,KAAD,EAAQ,YAAR,CAA5B;QACA;;MACF;QACE,QAAQ,GAAG,kBAAkB,CAAC,MAAD,EAAS,WAAT,EAAsB,QAAtB,CAA7B;IANJ;;IASA,IAAI,QAAQ,KAAK,WAAjB,EAA8B;MAC5B;MACA,KAAK,CAAC,cAAN;MACA,eAAe,CAAC,gBAAgB,CAAC,QAAD,CAAjB,CAAf;IACD;EACF,CApBD,CAjBoG,CAuCpG;;;EACA,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;EACA,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,eAAD,EAAkB,GAAG,IAAI,GAAG,CAAC,YAA7B,CAA/C;EACA,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,eAAD,EAAkB,GAAG,IAAI,GAAG,CAAC,aAA7B,CAAhD;EACA,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,eAAD,EAAkB,GAAG,IAAI,GAAG,CAAC,eAA7B,CAAlD,CA3CoG,CA6CpG;;EACA,MAAM,mBAAmB,GAAG,kBAAkB,GAC1C;IACE,YAAY,EAAE,oBADhB;IAEE,aAAa,EAAE,qBAFjB;IAGE,eAAe,EAAE;EAHnB,CAD0C,GAM1C;IACE,YADF;IAEE,aAFF;IAGE;EAHF,CANJ;EAYA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,SAF2B;MAGjC,yBAAyB,kBAAkB,GAAG,SAAH,GAAe,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAE,EAHvC;MAIjC,wBAAwB,WAJS;MAKjC,QAAQ,EAAE,CALuB;MAMjC,SANiC;MAOjC,GAAG;IAP8B,CAAR,CAJtB;IAaL,WAbK;IAcL,GAAG,gBAdE;IAeL,GAAG;EAfE,CAAP;AAiBD,CA3EM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { useSelection } from '../../utils/useSelection';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { OptionValue } from '../../utils/OptionCollection.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getOptionById, getIndexOfId } = optionCollection;\n\n const { selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n const onOptionClick = (event: React.MouseEvent<HTMLElement>, option: OptionValue) => {\n // clicked option should always become active option\n setActiveOption(getOptionById(option.id));\n\n // handle selection change\n selectOption(event, option);\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n }\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxOnOptionClick = useContextSelector(ComboboxContext, ctx => ctx.onOptionClick);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n onOptionClick: comboboxOnOptionClick,\n selectedOptions: comboboxSelectedOptions,\n }\n : {\n activeOption,\n onOptionClick,\n selectedOptions,\n };\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n onKeyDown,\n ...props,\n }),\n multiselect,\n ...optionCollection,\n ...optionContextValues,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { createContext } from '@fluentui/react-context-selector';
|
|
1
|
+
import { createContext } from '@fluentui/react-context-selector'; // eslint-disable-next-line @fluentui/no-context-default-value
|
|
2
|
+
|
|
2
3
|
export const ComboboxContext = /*#__PURE__*/createContext({
|
|
3
4
|
activeOption: undefined,
|
|
4
5
|
appearance: 'outline',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B
|
|
1
|
+
{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAWA;;AACA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,YAAY,EAAE,SADmD;EAEjE,UAAU,EAAE,SAFqD;;EAGjE,aAAa,GAAA,CACX;EACD,CALgE;;EAMjE,IAAI,EAAE,KAN2D;EAOjE,eAAe,EAAE,EAPgD;;EAQjE,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAVgE;;EAWjE,IAAI,EAAE;AAX2D,CAAvB,CAArC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n 'activeOption' | 'appearance' | 'onOptionClick' | 'open' | 'registerOption' | 'selectedOptions' | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n onOptionClick() {\n // noop\n },\n open: false,\n selectedOptions: [],\n registerOption() {\n return () => undefined;\n },\n size: 'medium',\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { createContext } from '@fluentui/react-context-selector';
|
|
1
|
+
import { createContext } from '@fluentui/react-context-selector'; // eslint-disable-next-line @fluentui/no-context-default-value
|
|
2
|
+
|
|
2
3
|
export const ListboxContext = /*#__PURE__*/createContext({
|
|
3
4
|
activeOption: undefined,
|
|
4
5
|
multiselect: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/ListboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B
|
|
1
|
+
{"version":3,"sources":["contexts/ListboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAWA;;AACA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAsB;EAC/D,YAAY,EAAE,SADiD;EAE/D,WAAW,EAAE,KAFkD;;EAG/D,aAAa,GAAA,CACX;EACD,CAL8D;;EAM/D,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAR8D;;EAS/D,eAAe,EAAE;AAT8C,CAAtB,CAApC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n 'activeOption' | 'multiselect' | 'onOptionClick' | 'registerOption' | 'selectedOptions'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n multiselect: false,\n onOptionClick() {\n // noop\n },\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxBase.types.js","sourceRoot":"../src/","sources":["utils/ComboboxBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onSelect` to directly control the displayed value string\n */\n value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n Pick<ComboboxBaseProps, 'placeholder' | 'value'> &\n OptionCollectionState &\n SelectionState & {\n /* Option data for the currently highlighted option (not the selected option) */\n activeOption?: OptionValue;\n\n /* Callback when an option is clicked, for internal use */\n onOptionClick(event: React.MouseEvent, option: OptionValue): void;\n\n selectOption(event: SelectionEvents,
|
|
1
|
+
{"version":3,"file":"ComboboxBase.types.js","sourceRoot":"../src/","sources":["utils/ComboboxBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onSelect` to directly control the displayed value string\n */\n value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n Pick<ComboboxBaseProps, 'placeholder' | 'value'> &\n OptionCollectionState &\n SelectionState & {\n /* Option data for the currently highlighted option (not the selected option) */\n activeOption?: OptionValue;\n\n /* Callback when an option is clicked, for internal use */\n onOptionClick(event: React.MouseEvent, option: OptionValue): void;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n setActiveOption(option?: OptionValue): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selection.types.js","sourceRoot":"../src/","sources":["utils/Selection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectionProps = {\n /* For an uncontrolled component, sets the initial selection */\n defaultSelectedOptions?: string[];\n\n /**\n * Sets the selection type to multiselect.\n * Set this to true for multiselect, even if fully controlling selection state.\n * This enables styles and accessibility properties to be set.\n * @default false\n */\n multiselect?: boolean;\n\n /* Callback when an option is selected */\n onSelect?(event: SelectionEvents, data: OnSelectData): void;\n\n /**\n * An array of selected option keys.\n * Use this with `onSelect` to directly control the selected option(s)\n */\n selectedOptions?: string[];\n};\n\nexport type SelectionState = Required<Pick<SelectionProps, 'selectedOptions'>> & Pick<SelectionProps, 'multiselect'>;\n\n/* Values returned by the useSelection hook */\nexport type SelectionValue = {\n selectedOptions: string[];\n selectOption: (event: SelectionEvents,
|
|
1
|
+
{"version":3,"file":"Selection.types.js","sourceRoot":"../src/","sources":["utils/Selection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n /* For an uncontrolled component, sets the initial selection */\n defaultSelectedOptions?: string[];\n\n /**\n * Sets the selection type to multiselect.\n * Set this to true for multiselect, even if fully controlling selection state.\n * This enables styles and accessibility properties to be set.\n * @default false\n */\n multiselect?: boolean;\n\n /* Callback when an option is selected */\n onSelect?(event: SelectionEvents, data: OnSelectData): void;\n\n /**\n * An array of selected option keys.\n * Use this with `onSelect` to directly control the selected option(s)\n */\n selectedOptions?: string[];\n};\n\nexport type SelectionState = Required<Pick<SelectionProps, 'selectedOptions'>> & Pick<SelectionProps, 'multiselect'>;\n\n/* Values returned by the useSelection hook */\nexport type SelectionValue = {\n selectedOptions: string[];\n selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/* Data for the onSelect callback */\nexport type OnSelectData = { optionValue: string; selectedOptions: string[] };\n\n/* Possible event types for onSelect */\nexport type SelectionEvents = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils/useComboboxBaseState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,aAA/B,QAAoD,2BAApD;AACA,SAAS,mBAAT,QAAoC,8BAApC;AAEA,SAAS,YAAT,QAA6B,uBAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA6B;EAC/D,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,WAAW,GAAG,KAAxC;IAA+C,WAA/C;IAA4D,YAA5D;IAA0E,IAAI,GAAG;EAAjF,IAA8F,KAApG;EAEA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EACA,MAAM;IAAE,gBAAF;IAAoB,aAApB;IAAmC;EAAnC,IAA+D,gBAArE;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC;EACA,MAAM;IAAE,eAAF;IAAmB;EAAnB,IAAoC,YAAY,CAAC,KAAD,CAAtD,CAP+D,CAS/D;;EACA,MAAM,YAAY,GAAG,aAAa,EAAlC;EACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC/B;IACA,IAAI,KAAK,CAAC,KAAN,KAAgB,SAApB,EAA+B;MAC7B,OAAO,KAAK,CAAC,KAAb;IACD;;IAED,IAAI,YAAY,IAAI,KAAK,CAAC,YAAN,KAAuB,SAA3C,EAAsD;MACpD,OAAO,KAAK,CAAC,YAAb;IACD;;IAED,IAAI,WAAJ,EAAiB;MACf,OAAO,eAAe,CAAC,IAAhB,CAAqB,IAArB,CAAP;IACD;;IAED,OAAO,eAAe,CAAC,CAAD,CAAtB;EACD,CAfa,EAeX,CAAC,YAAD,EAAe,WAAf,EAA4B,KAAK,CAAC,YAAlC,EAAgD,KAAK,CAAC,KAAtD,EAA6D,eAA7D,CAfW,CAAd,CAX+D,CA4B/D;;EACA,MAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,oBAAoB,CAAC;IAChD,KAAK,EAAE,KAAK,CAAC,IADmC;IAEhD,YAAY,EAAE,KAAK,CAAC,WAF4B;IAGhD,YAAY,EAAE;EAHkC,CAAD,CAAjD;;EAMA,MAAM,OAAO,GAAG,CAAC,KAAD,EAAgC,QAAhC,KAAqD;IACnE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,KAAH,EAAU;MAAE,IAAI,EAAE;IAAR,CAAV,CAAZ;IACA,YAAY,CAAC,QAAD,CAAZ;EACD,CAHD;;EAKA,MAAM,aAAa,GAAG,CAAC,KAAD,EAAuC,MAAvC,KAA8D;IAClF;IACA,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,EAAR,CAAd,CAAf,CAFkF,CAIlF;;IACA,CAAC,WAAD,IAAgB,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAvB,CALkF,CAOlF;;IACA,YAAY,CAAC,KAAD,EAAQ,
|
|
1
|
+
{"version":3,"sources":["utils/useComboboxBaseState.ts"],"names":[],"mappings":"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","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 } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps) => {\n const { appearance = 'outline', inlinePopup = false, multiselect, onOpenChange, size = 'medium' } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionById, getOptionsMatchingValue } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n const { selectedOptions, selectOption } = useSelection(props);\n\n // update value based on selectedOptions\n const isFirstMount = useFirstMount();\n const value = React.useMemo(() => {\n // don't compute value if it is defined through props,\n if (props.value !== undefined) {\n return props.value;\n }\n\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n return selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [isFirstMount, multiselect, props.defaultValue, props.value, 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 = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n };\n\n const onOptionClick = (event: React.MouseEvent<HTMLElement>, option: OptionValue) => {\n // clicked option should always become active option\n setActiveOption(getOptionById(option.id));\n\n // close on option click for single-select\n !multiselect && setOpen(event, false);\n\n // handle selection change\n selectOption(event, option);\n };\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if there is a selection, start at the most recently selected item\n if (selectedOptions.length > 0) {\n const lastSelectedOption = getOptionsMatchingValue(\n v => v === selectedOptions[selectedOptions.length - 1],\n ).pop();\n lastSelectedOption && setActiveOption(lastSelectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else {\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\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return {\n ...optionCollection,\n activeOption,\n appearance,\n inlinePopup,\n onOptionClick,\n open,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n value,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -11,25 +11,30 @@ export const useSelection = props => {
|
|
|
11
11
|
initialState: []
|
|
12
12
|
});
|
|
13
13
|
|
|
14
|
-
const selectOption = (event,
|
|
15
|
-
//
|
|
16
|
-
|
|
14
|
+
const selectOption = (event, option) => {
|
|
15
|
+
// if the option is disabled, do nothing
|
|
16
|
+
if (option.disabled) {
|
|
17
|
+
return;
|
|
18
|
+
} // for single-select, always return the selected option
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
let newSelection = [option.value]; // toggle selected state of the option for multiselect
|
|
17
22
|
|
|
18
23
|
if (multiselect) {
|
|
19
|
-
const selectedIndex = selectedOptions.findIndex(o => o ===
|
|
24
|
+
const selectedIndex = selectedOptions.findIndex(o => o === option.value);
|
|
20
25
|
|
|
21
26
|
if (selectedIndex > -1) {
|
|
22
27
|
// deselect option
|
|
23
28
|
newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
|
|
24
29
|
} else {
|
|
25
30
|
// select option
|
|
26
|
-
newSelection = [...selectedOptions,
|
|
31
|
+
newSelection = [...selectedOptions, option.value];
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
34
|
|
|
30
35
|
setSelectedOptions(newSelection);
|
|
31
36
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
|
|
32
|
-
optionValue,
|
|
37
|
+
optionValue: option.value,
|
|
33
38
|
selectedOptions: newSelection
|
|
34
39
|
});
|
|
35
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils/useSelection.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;
|
|
1
|
+
{"version":3,"sources":["utils/useSelection.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AAIA,OAAO,MAAM,YAAY,GAAI,KAAD,IAA0C;EACpE,MAAM;IAAE,sBAAF;IAA0B,WAA1B;IAAuC;EAAvC,IAAoD,KAA1D;EAEA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,oBAAoB,CAAC;IACjE,KAAK,EAAE,KAAK,CAAC,eADoD;IAEjE,YAAY,EAAE,sBAFmD;IAGjE,YAAY,EAAE;EAHmD,CAAD,CAAlE;;EAMA,MAAM,YAAY,GAAG,CAAC,KAAD,EAAyB,MAAzB,KAAgD;IACnE;IACA,IAAI,MAAM,CAAC,QAAX,EAAqB;MACnB;IACD,CAJkE,CAMnE;;;IACA,IAAI,YAAY,GAAG,CAAC,MAAM,CAAC,KAAR,CAAnB,CAPmE,CASnE;;IACA,IAAI,WAAJ,EAAiB;MACf,MAAM,aAAa,GAAG,eAAe,CAAC,SAAhB,CAA0B,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,KAA5C,CAAtB;;MACA,IAAI,aAAa,GAAG,CAAC,CAArB,EAAwB;QACtB;QACA,YAAY,GAAG,CAAC,GAAG,eAAe,CAAC,KAAhB,CAAsB,CAAtB,EAAyB,aAAzB,CAAJ,EAA6C,GAAG,eAAe,CAAC,KAAhB,CAAsB,aAAa,GAAG,CAAtC,CAAhD,CAAf;MACD,CAHD,MAGO;QACL;QACA,YAAY,GAAG,CAAC,GAAG,eAAJ,EAAqB,MAAM,CAAC,KAA5B,CAAf;MACD;IACF;;IAED,kBAAkB,CAAC,YAAD,CAAlB;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,MAAM,CAAC,KAAtB;MAA6B,eAAe,EAAE;IAA9C,CAAV,CAAR;EACD,CAvBD;;EAyBA,OAAO;IAAE,eAAF;IAAmB;EAAnB,CAAP;AACD,CAnCM","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionValue } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionValue => {\n const { defaultSelectedOptions, multiselect, onSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n };\n\n return { selectedOptions, selectOption };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -109,16 +109,16 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
|
|
|
109
109
|
break;
|
|
110
110
|
|
|
111
111
|
case 'CloseSelect':
|
|
112
|
-
!multiselect && setOpen(event, false);
|
|
112
|
+
!multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
|
|
113
113
|
// fallthrough
|
|
114
114
|
|
|
115
115
|
case 'Select':
|
|
116
|
-
activeOption && selectOption(event, activeOption
|
|
116
|
+
activeOption && selectOption(event, activeOption);
|
|
117
117
|
event.preventDefault();
|
|
118
118
|
break;
|
|
119
119
|
|
|
120
120
|
case 'Tab':
|
|
121
|
-
activeOption && selectOption(event, activeOption
|
|
121
|
+
activeOption && selectOption(event, activeOption);
|
|
122
122
|
break;
|
|
123
123
|
|
|
124
124
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'button'>>, ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'input'>>, ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots 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 */\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>, ExtractSlotProps<Slot<typeof Listbox>>] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n open,\n selectOption,\n setActiveOption,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n const ignoreTriggerBlur = React.useRef(false);\n\n // resolve listbox shorthand props\n const listbox: typeof listboxSlot = {\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n /*\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n const { onClick: onListboxClick, onMouseDown: onListboxMouseDown } = listbox;\n listbox.onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n\n onListboxClick?.(event);\n };\n\n listbox.onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n ignoreTriggerBlur.current = true;\n\n onListboxMouseDown?.(event);\n };\n\n // the trigger should open/close the popup on click or blur\n const { onBlur: onTriggerBlur, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown } = trigger;\n trigger.onBlur = (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreTriggerBlur.current) {\n setOpen(event, false);\n }\n\n ignoreTriggerBlur.current = false;\n\n onTriggerBlur?.(event);\n };\n\n trigger.onClick = (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n\n onTriggerClick?.(event);\n };\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n }\n\n onTriggerKeyDown?.(event);\n };\n\n return [trigger, listbox];\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -67,10 +67,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
67
67
|
"Ba2ppi3": "fhwpy7i",
|
|
68
68
|
"F2fol1": "f14ee0xe",
|
|
69
69
|
"lck23g": "f1xhbsuh",
|
|
70
|
+
"df92cz": "fv8e3ye",
|
|
71
|
+
"I188md": "ftb5wc6",
|
|
70
72
|
"umuwi5": "fjw5xc1",
|
|
71
73
|
"Blcqepd": "f1xdyd5c",
|
|
72
74
|
"nplu4u": "fatpbeo",
|
|
73
75
|
"Bioka5o": "fb7uyps",
|
|
76
|
+
"H713fs": "f1cmft4k",
|
|
77
|
+
"B9ooomg": "f1x58t8o",
|
|
74
78
|
"Bercvud": "f1ibeo51"
|
|
75
79
|
},
|
|
76
80
|
"listbox": {},
|
|
@@ -117,7 +121,16 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
117
121
|
}
|
|
118
122
|
}, {
|
|
119
123
|
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f3hsy1e{min-width:160px;}", ".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);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".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);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
|
|
120
|
-
"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);}"]
|
|
124
|
+
"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);}"],
|
|
125
|
+
"m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
126
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
127
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
|
|
128
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
129
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
|
|
130
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
131
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
|
|
132
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
133
|
+
}]]
|
|
121
134
|
});
|
|
122
135
|
|
|
123
136
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAGa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,KAAK,EAAE,qBAFwD;EAG/D,UAAU,EAAE,0BAHmD;EAI/D,OAAO,EAAE;AAJsD,CAApD;AAOb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;;
|
|
1
|
+
{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n listbox: 'fui-Combobox__listbox',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '160px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom('2px', '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 // size variants\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalM,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n});\n\nconst useInputStyles = makeStyles({\n input: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n fontFamily: tokens.fontFamilyBase,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n },\n\n // size variants\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.padding('3px', 0, '3px', tokens.spacingHorizontalSNudge),\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding('5px', 0, '5px', tokens.spacingHorizontalMNudge),\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n ...shorthands.padding('7px', 0, '7px', tokens.spacingHorizontalM),\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n const { appearance, size } = state;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n comboboxClassNames.root,\n styles.root,\n styles[appearance],\n styles[size],\n state.root.className,\n );\n state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.listbox.className);\n state.input.className = mergeClasses(\n comboboxClassNames.input,\n inputStyles.input,\n inputStyles[size],\n state.input.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n comboboxClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -63,10 +63,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
63
63
|
"Ba2ppi3": "fhwpy7i",
|
|
64
64
|
"F2fol1": "f14ee0xe",
|
|
65
65
|
"lck23g": "f1xhbsuh",
|
|
66
|
+
"df92cz": "fv8e3ye",
|
|
67
|
+
"I188md": "ftb5wc6",
|
|
66
68
|
"umuwi5": "fjw5xc1",
|
|
67
69
|
"Blcqepd": "f1xdyd5c",
|
|
68
70
|
"nplu4u": "fatpbeo",
|
|
69
71
|
"Bioka5o": "fb7uyps",
|
|
72
|
+
"H713fs": "f1cmft4k",
|
|
73
|
+
"B9ooomg": "f1x58t8o",
|
|
70
74
|
"Bercvud": "f1ibeo51"
|
|
71
75
|
},
|
|
72
76
|
"listbox": {},
|
|
@@ -149,6 +153,15 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
149
153
|
}, {
|
|
150
154
|
"d": [".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f3hsy1e{min-width:160px;}", ".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);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".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);}", ".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;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fz17x9o{grid-template-columns:1fr auto;}", ".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);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".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;}", ".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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
|
|
151
155
|
"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);}"],
|
|
156
|
+
"m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
157
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
158
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
|
|
159
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
160
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
|
|
161
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
162
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
|
|
163
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
164
|
+
}]],
|
|
152
165
|
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
153
166
|
});
|
|
154
167
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Dropdown/useDropdownStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAGa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,MAAM,EAAE,sBAFuD;EAG/D,UAAU,EAAE,0BAHmD;EAI/D,OAAO,EAAE;AAJsD,CAApD;AAOb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;;
|
|
1
|
+
{"version":3,"sources":["components/Dropdown/useDropdownStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { 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.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '160px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom('2px', '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 button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '1fr auto',\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 fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.padding('3px', tokens.spacingHorizontalSNudge),\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding('5px', tokens.spacingHorizontalMNudge),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n ...shorthands.padding('7px', tokens.spacingHorizontalM),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\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, placeholderVisible, size } = state;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], state.root.className);\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.listbox.className);\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -50,7 +50,7 @@ const useListbox_unstable = (props, ref) => {
|
|
|
50
50
|
// clicked option should always become active option
|
|
51
51
|
setActiveOption(getOptionById(option.id)); // handle selection change
|
|
52
52
|
|
|
53
|
-
selectOption(event, option
|
|
53
|
+
selectOption(event, option);
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
const onKeyDown = event => {
|
|
@@ -64,7 +64,7 @@ const useListbox_unstable = (props, ref) => {
|
|
|
64
64
|
switch (action) {
|
|
65
65
|
case 'Select':
|
|
66
66
|
case 'CloseSelect':
|
|
67
|
-
activeOption && selectOption(event, activeOption
|
|
67
|
+
activeOption && selectOption(event, activeOption);
|
|
68
68
|
break;
|
|
69
69
|
|
|
70
70
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Listbox/useListbox.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAEA,MAAA,qBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE;EAAF,IAAkB,KAAxB;EACA,MAAM,gBAAgB,GAAG,qBAAA,CAAA,mBAAA,EAAzB;EACA,MAAM;IAAE,QAAF;IAAY,gBAAZ;IAA8B,aAA9B;IAA6C;EAA7C,IAA8D,gBAApE;EAEA,MAAM;IAAE,eAAF;IAAmB;EAAnB,IAAoC,cAAA,CAAA,YAAA,CAAa,KAAb,CAA1C;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC;;EAEA,MAAM,aAAa,GAAG,CAAC,KAAD,EAAuC,MAAvC,KAA8D;IAClF;IACA,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,EAAR,CAAd,CAAf,CAFkF,CAIlF;;IACA,YAAY,CAAC,KAAD,EAAQ,
|
|
1
|
+
{"version":3,"sources":["components/Listbox/useListbox.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { useSelection } from '../../utils/useSelection';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { OptionValue } from '../../utils/OptionCollection.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getOptionById, getIndexOfId } = optionCollection;\n\n const { selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n const onOptionClick = (event: React.MouseEvent<HTMLElement>, option: OptionValue) => {\n // clicked option should always become active option\n setActiveOption(getOptionById(option.id));\n\n // handle selection change\n selectOption(event, option);\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n }\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxOnOptionClick = useContextSelector(ComboboxContext, ctx => ctx.onOptionClick);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n onOptionClick: comboboxOnOptionClick,\n selectedOptions: comboboxSelectedOptions,\n }\n : {\n activeOption,\n onOptionClick,\n selectedOptions,\n };\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n onKeyDown,\n ...props,\n }),\n multiselect,\n ...optionCollection,\n ...optionContextValues,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.ComboboxContext = void 0;
|
|
7
7
|
|
|
8
|
-
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
8
|
+
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector"); // eslint-disable-next-line @fluentui/no-context-default-value
|
|
9
|
+
|
|
9
10
|
|
|
10
11
|
exports.ComboboxContext = /*#__PURE__*/react_context_selector_1.createContext({
|
|
11
12
|
activeOption: undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAWA;;;AACa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAAoC;EACjE,YAAY,EAAE,SADmD;EAEjE,UAAU,EAAE,SAFqD;;EAGjE,aAAa,GAAA,CACX;EACD,CALgE;;EAMjE,IAAI,EAAE,KAN2D;EAOjE,eAAe,EAAE,EAPgD;;EAQjE,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAVgE;;EAWjE,IAAI,EAAE;AAX2D,CAApC,CAAlB","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n 'activeOption' | 'appearance' | 'onOptionClick' | 'open' | 'registerOption' | 'selectedOptions' | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n onOptionClick() {\n // noop\n },\n open: false,\n selectedOptions: [],\n registerOption() {\n return () => undefined;\n },\n size: 'medium',\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.ListboxContext = void 0;
|
|
7
7
|
|
|
8
|
-
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
8
|
+
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector"); // eslint-disable-next-line @fluentui/no-context-default-value
|
|
9
|
+
|
|
9
10
|
|
|
10
11
|
exports.ListboxContext = /*#__PURE__*/react_context_selector_1.createContext({
|
|
11
12
|
activeOption: undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/ListboxContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["contexts/ListboxContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAWA;;;AACa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAAmC;EAC/D,YAAY,EAAE,SADiD;EAE/D,WAAW,EAAE,KAFkD;;EAG/D,aAAa,GAAA,CACX;EACD,CAL8D;;EAM/D,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAR8D;;EAS/D,eAAe,EAAE;AAT8C,CAAnC,CAAjB","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n 'activeOption' | 'multiselect' | 'onOptionClick' | 'registerOption' | 'selectedOptions'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n multiselect: false,\n onOptionClick() {\n // noop\n },\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils/useComboboxBaseState.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAA6B;EAC/D,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,WAAW,GAAG,KAAxC;IAA+C,WAA/C;IAA4D,YAA5D;IAA0E,IAAI,GAAG;EAAjF,IAA8F,KAApG;EAEA,MAAM,gBAAgB,GAAG,qBAAA,CAAA,mBAAA,EAAzB;EACA,MAAM;IAAE,gBAAF;IAAoB,aAApB;IAAmC;EAAnC,IAA+D,gBAArE;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC;EACA,MAAM;IAAE,eAAF;IAAmB;EAAnB,IAAoC,cAAA,CAAA,YAAA,CAAa,KAAb,CAA1C,CAP+D,CAS/D;;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,aAAA,EAArB;EACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC/B;IACA,IAAI,KAAK,CAAC,KAAN,KAAgB,SAApB,EAA+B;MAC7B,OAAO,KAAK,CAAC,KAAb;IACD;;IAED,IAAI,YAAY,IAAI,KAAK,CAAC,YAAN,KAAuB,SAA3C,EAAsD;MACpD,OAAO,KAAK,CAAC,YAAb;IACD;;IAED,IAAI,WAAJ,EAAiB;MACf,OAAO,eAAe,CAAC,IAAhB,CAAqB,IAArB,CAAP;IACD;;IAED,OAAO,eAAe,CAAC,CAAD,CAAtB;EACD,CAfa,EAeX,CAAC,YAAD,EAAe,WAAf,EAA4B,KAAK,CAAC,YAAlC,EAAgD,KAAK,CAAC,KAAtD,EAA6D,eAA7D,CAfW,CAAd,CAX+D,CA4B/D;;EACA,MAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,iBAAA,CAAA,oBAAA,CAAqB;IAChD,KAAK,EAAE,KAAK,CAAC,IADmC;IAEhD,YAAY,EAAE,KAAK,CAAC,WAF4B;IAGhD,YAAY,EAAE;EAHkC,CAArB,CAA7B;;EAMA,MAAM,OAAO,GAAG,CAAC,KAAD,EAAgC,QAAhC,KAAqD;IACnE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,KAAH,EAAU;MAAE,IAAI,EAAE;IAAR,CAAV,CAAZ;IACA,YAAY,CAAC,QAAD,CAAZ;EACD,CAHD;;EAKA,MAAM,aAAa,GAAG,CAAC,KAAD,EAAuC,MAAvC,KAA8D;IAClF;IACA,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,EAAR,CAAd,CAAf,CAFkF,CAIlF;;IACA,CAAC,WAAD,IAAgB,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAvB,CALkF,CAOlF;;IACA,YAAY,CAAC,KAAD,EAAQ,
|
|
1
|
+
{"version":3,"sources":["utils/useComboboxBaseState.ts"],"names":[],"mappings":"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","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 } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps) => {\n const { appearance = 'outline', inlinePopup = false, multiselect, onOpenChange, size = 'medium' } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionById, getOptionsMatchingValue } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n const { selectedOptions, selectOption } = useSelection(props);\n\n // update value based on selectedOptions\n const isFirstMount = useFirstMount();\n const value = React.useMemo(() => {\n // don't compute value if it is defined through props,\n if (props.value !== undefined) {\n return props.value;\n }\n\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n return selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [isFirstMount, multiselect, props.defaultValue, props.value, 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 = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n };\n\n const onOptionClick = (event: React.MouseEvent<HTMLElement>, option: OptionValue) => {\n // clicked option should always become active option\n setActiveOption(getOptionById(option.id));\n\n // close on option click for single-select\n !multiselect && setOpen(event, false);\n\n // handle selection change\n selectOption(event, option);\n };\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if there is a selection, start at the most recently selected item\n if (selectedOptions.length > 0) {\n const lastSelectedOption = getOptionsMatchingValue(\n v => v === selectedOptions[selectedOptions.length - 1],\n ).pop();\n lastSelectedOption && setActiveOption(lastSelectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else {\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\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return {\n ...optionCollection,\n activeOption,\n appearance,\n inlinePopup,\n onOptionClick,\n open,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n value,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -19,25 +19,30 @@ const useSelection = props => {
|
|
|
19
19
|
initialState: []
|
|
20
20
|
});
|
|
21
21
|
|
|
22
|
-
const selectOption = (event,
|
|
23
|
-
//
|
|
24
|
-
|
|
22
|
+
const selectOption = (event, option) => {
|
|
23
|
+
// if the option is disabled, do nothing
|
|
24
|
+
if (option.disabled) {
|
|
25
|
+
return;
|
|
26
|
+
} // for single-select, always return the selected option
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
let newSelection = [option.value]; // toggle selected state of the option for multiselect
|
|
25
30
|
|
|
26
31
|
if (multiselect) {
|
|
27
|
-
const selectedIndex = selectedOptions.findIndex(o => o ===
|
|
32
|
+
const selectedIndex = selectedOptions.findIndex(o => o === option.value);
|
|
28
33
|
|
|
29
34
|
if (selectedIndex > -1) {
|
|
30
35
|
// deselect option
|
|
31
36
|
newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
|
|
32
37
|
} else {
|
|
33
38
|
// select option
|
|
34
|
-
newSelection = [...selectedOptions,
|
|
39
|
+
newSelection = [...selectedOptions, option.value];
|
|
35
40
|
}
|
|
36
41
|
}
|
|
37
42
|
|
|
38
43
|
setSelectedOptions(newSelection);
|
|
39
44
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
|
|
40
|
-
optionValue,
|
|
45
|
+
optionValue: option.value,
|
|
41
46
|
selectedOptions: newSelection
|
|
42
47
|
});
|
|
43
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils/useSelection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["utils/useSelection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,YAAY,GAAI,KAAD,IAA0C;EACpE,MAAM;IAAE,sBAAF;IAA0B,WAA1B;IAAuC;EAAvC,IAAoD,KAA1D;EAEA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,iBAAA,CAAA,oBAAA,CAAqB;IACjE,KAAK,EAAE,KAAK,CAAC,eADoD;IAEjE,YAAY,EAAE,sBAFmD;IAGjE,YAAY,EAAE;EAHmD,CAArB,CAA9C;;EAMA,MAAM,YAAY,GAAG,CAAC,KAAD,EAAyB,MAAzB,KAAgD;IACnE;IACA,IAAI,MAAM,CAAC,QAAX,EAAqB;MACnB;IACD,CAJkE,CAMnE;;;IACA,IAAI,YAAY,GAAG,CAAC,MAAM,CAAC,KAAR,CAAnB,CAPmE,CASnE;;IACA,IAAI,WAAJ,EAAiB;MACf,MAAM,aAAa,GAAG,eAAe,CAAC,SAAhB,CAA0B,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,KAA5C,CAAtB;;MACA,IAAI,aAAa,GAAG,CAAC,CAArB,EAAwB;QACtB;QACA,YAAY,GAAG,CAAC,GAAG,eAAe,CAAC,KAAhB,CAAsB,CAAtB,EAAyB,aAAzB,CAAJ,EAA6C,GAAG,eAAe,CAAC,KAAhB,CAAsB,aAAa,GAAG,CAAtC,CAAhD,CAAf;MACD,CAHD,MAGO;QACL;QACA,YAAY,GAAG,CAAC,GAAG,eAAJ,EAAqB,MAAM,CAAC,KAA5B,CAAf;MACD;IACF;;IAED,kBAAkB,CAAC,YAAD,CAAlB;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,MAAM,CAAC,KAAtB;MAA6B,eAAe,EAAE;IAA9C,CAAV,CAAR;EACD,CAvBD;;EAyBA,OAAO;IAAE,eAAF;IAAmB;EAAnB,CAAP;AACD,CAnCM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionValue } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionValue => {\n const { defaultSelectedOptions, multiselect, onSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n };\n\n return { selectedOptions, selectOption };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -119,16 +119,16 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
|
|
|
119
119
|
break;
|
|
120
120
|
|
|
121
121
|
case 'CloseSelect':
|
|
122
|
-
!multiselect && setOpen(event, false);
|
|
122
|
+
!multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
|
|
123
123
|
// fallthrough
|
|
124
124
|
|
|
125
125
|
case 'Select':
|
|
126
|
-
activeOption && selectOption(event, activeOption
|
|
126
|
+
activeOption && selectOption(event, activeOption);
|
|
127
127
|
event.preventDefault();
|
|
128
128
|
break;
|
|
129
129
|
|
|
130
130
|
case 'Tab':
|
|
131
|
-
activeOption && selectOption(event, activeOption
|
|
131
|
+
activeOption && selectOption(event, activeOption);
|
|
132
132
|
break;
|
|
133
133
|
|
|
134
134
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'button'>>, ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'input'>>, ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots 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 */\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>, ExtractSlotProps<Slot<typeof Listbox>>] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n open,\n selectOption,\n setActiveOption,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n const ignoreTriggerBlur = React.useRef(false);\n\n // resolve listbox shorthand props\n const listbox: typeof listboxSlot = {\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n /*\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n const { onClick: onListboxClick, onMouseDown: onListboxMouseDown } = listbox;\n listbox.onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n\n onListboxClick?.(event);\n };\n\n listbox.onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n ignoreTriggerBlur.current = true;\n\n onListboxMouseDown?.(event);\n };\n\n // the trigger should open/close the popup on click or blur\n const { onBlur: onTriggerBlur, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown } = trigger;\n trigger.onBlur = (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreTriggerBlur.current) {\n setOpen(event, false);\n }\n\n ignoreTriggerBlur.current = false;\n\n onTriggerBlur?.(event);\n };\n\n trigger.onClick = (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n\n onTriggerClick?.(event);\n };\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n }\n\n onTriggerKeyDown?.(event);\n };\n\n return [trigger, listbox];\n}\n"],"sourceRoot":"../src/"}
|
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.8",
|
|
4
4
|
"description": "Fluent UI React Combobox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,18 +28,18 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.12",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/keyboard-keys": "^9.0.0",
|
|
36
36
|
"@fluentui/react-context-selector": "^9.0.2",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.175",
|
|
38
|
-
"@fluentui/react-portal": "^9.0.
|
|
39
|
-
"@fluentui/react-positioning": "^9.1.
|
|
38
|
+
"@fluentui/react-portal": "^9.0.4",
|
|
39
|
+
"@fluentui/react-positioning": "^9.1.2",
|
|
40
40
|
"@fluentui/react-theme": "^9.0.0",
|
|
41
41
|
"@fluentui/react-utilities": "^9.0.2",
|
|
42
|
-
"@griffel/react": "^1.2.
|
|
42
|
+
"@griffel/react": "^1.2.3",
|
|
43
43
|
"tslib": "^2.1.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|