@fluentui/react-combobox 9.0.0-beta.8 → 9.0.0-beta.9
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 +117 -4
- package/CHANGELOG.md +28 -5
- package/Spec.md +4 -4
- package/dist/index.d.ts +25 -16
- package/lib/components/Combobox/Combobox.types.js.map +1 -1
- package/lib/components/Combobox/renderCombobox.js +3 -4
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Combobox/useCombobox.js +153 -15
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.js +56 -25
- package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js +3 -4
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +100 -8
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.js +41 -19
- package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib/components/Listbox/Listbox.types.js.map +1 -1
- package/lib/components/Listbox/useListbox.js +25 -17
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Option/Option.types.js.map +1 -1
- package/lib/components/Option/useOption.js +29 -21
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.js +2 -1
- package/lib/components/Option/useOptionStyles.js.map +1 -1
- package/lib/contexts/ComboboxContext.js +11 -4
- package/lib/contexts/ComboboxContext.js.map +1 -1
- package/lib/contexts/ListboxContext.js +9 -4
- package/lib/contexts/ListboxContext.js.map +1 -1
- package/lib/contexts/useComboboxContextValues.js +8 -2
- package/lib/contexts/useComboboxContextValues.js.map +1 -1
- package/lib/contexts/useListboxContextValues.js +8 -4
- package/lib/contexts/useListboxContextValues.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/dropdownKeyActions.js +2 -9
- package/lib/utils/dropdownKeyActions.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +29 -24
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useComboboxPopup.js +5 -3
- package/lib/utils/useComboboxPopup.js.map +1 -1
- package/lib/utils/useSelection.js +13 -4
- package/lib/utils/useSelection.js.map +1 -1
- package/lib/utils/useTriggerListboxSlots.js +45 -50
- package/lib/utils/useTriggerListboxSlots.js.map +1 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js +3 -4
- package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js +152 -14
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.js +56 -25
- package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js +3 -4
- package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +101 -7
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js +41 -19
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +24 -16
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js +29 -21
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.js +2 -1
- package/lib-commonjs/components/Option/useOptionStyles.js.map +1 -1
- package/lib-commonjs/contexts/ComboboxContext.js +11 -4
- package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
- package/lib-commonjs/contexts/ListboxContext.js +9 -4
- package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
- package/lib-commonjs/contexts/useComboboxContextValues.js +8 -2
- package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
- package/lib-commonjs/contexts/useListboxContextValues.js +8 -4
- package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
- package/lib-commonjs/utils/dropdownKeyActions.js +2 -9
- package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +29 -24
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/utils/useComboboxPopup.js +5 -3
- package/lib-commonjs/utils/useComboboxPopup.js.map +1 -1
- package/lib-commonjs/utils/useSelection.js +13 -4
- package/lib-commonjs/utils/useSelection.js.map +1 -1
- package/lib-commonjs/utils/useTriggerListboxSlots.js +44 -49
- package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
- package/package.json +9 -9
- package/dist/tsdoc-metadata.json +0 -11
|
@@ -31,7 +31,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
31
31
|
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
|
32
32
|
"B7ck84d": "f1ewtqcl",
|
|
33
33
|
"mc9l5x": "f14t3ns0",
|
|
34
|
-
"Bf4jedk": "
|
|
34
|
+
"Bf4jedk": "f1exfvgq",
|
|
35
35
|
"qhf8xq": "f10pi13n",
|
|
36
36
|
"Bbr2w1p": "f14a1fxs",
|
|
37
37
|
"Bduesf4": "f3e99gv",
|
|
@@ -42,10 +42,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
42
42
|
"Eqx8gd": ["f1a7op3", "f1cjjd47"],
|
|
43
43
|
"By385i5": "f1gboi2j",
|
|
44
44
|
"B1piin3": ["f1cjjd47", "f1a7op3"],
|
|
45
|
-
"Dlnsje": "
|
|
45
|
+
"Dlnsje": "ffyw7fx",
|
|
46
46
|
"d9w3h3": ["f1kp91vd", "f1ibwz09"],
|
|
47
47
|
"B3778ie": ["f1ibwz09", "f1kp91vd"],
|
|
48
|
-
"Bcgy8vk": "
|
|
48
|
+
"Bcgy8vk": "f14pi962",
|
|
49
49
|
"Bw17bha": "f1lh990p",
|
|
50
50
|
"B1q35kw": "f1jc6hxc",
|
|
51
51
|
"Gjdm7m": "f13evtba",
|
|
@@ -64,6 +64,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
64
64
|
"Bercvud": "f1ibeo51"
|
|
65
65
|
},
|
|
66
66
|
"listbox": {},
|
|
67
|
+
"listboxCollapsed": {
|
|
68
|
+
"mc9l5x": "fjseox"
|
|
69
|
+
},
|
|
67
70
|
"button": {
|
|
68
71
|
"Bt984gj": "f122n59",
|
|
69
72
|
"De3pzq": "f1c21dwh",
|
|
@@ -72,7 +75,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
72
75
|
"Bn0qgzm": "fqdk4by",
|
|
73
76
|
"ibv6hh": ["f1rvrf73", "f1358rze"],
|
|
74
77
|
"B7ck84d": "f1ewtqcl",
|
|
78
|
+
"sj55zd": "f19n0e5",
|
|
75
79
|
"i8kkvl": "f14mj54c",
|
|
80
|
+
"Bceei9c": "f1k6fduh",
|
|
76
81
|
"mc9l5x": "f13qh94s",
|
|
77
82
|
"Bahqtrf": "fk6fouc",
|
|
78
83
|
"Budl1dq": "fz17x9o",
|
|
@@ -90,7 +95,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
90
95
|
"z8tnut": "f1khb0e9",
|
|
91
96
|
"z189sj": ["fdw0yi8", "fk8j09s"],
|
|
92
97
|
"Byoj8tv": "f1jnq6q7",
|
|
93
|
-
"uwmqm3": ["
|
|
98
|
+
"uwmqm3": ["f1xile11", "fqznh8f"]
|
|
94
99
|
},
|
|
95
100
|
"medium": {
|
|
96
101
|
"Be2twd7": "fkhj508",
|
|
@@ -98,7 +103,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
98
103
|
"z8tnut": "f1sbtcvk",
|
|
99
104
|
"z189sj": ["f11gcy0p", "f1ng84yb"],
|
|
100
105
|
"Byoj8tv": "fdghr9",
|
|
101
|
-
"uwmqm3": ["
|
|
106
|
+
"uwmqm3": ["f1e60jzv", "f135dnwl"]
|
|
102
107
|
},
|
|
103
108
|
"large": {
|
|
104
109
|
"i8kkvl": "f1rjii52",
|
|
@@ -107,14 +112,14 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
107
112
|
"z8tnut": "f1a1bwwz",
|
|
108
113
|
"z189sj": ["fw5db7e", "f1uw59to"],
|
|
109
114
|
"Byoj8tv": "fy7v416",
|
|
110
|
-
"uwmqm3": ["
|
|
115
|
+
"uwmqm3": ["fnphzt9", "flt1dlf"]
|
|
111
116
|
},
|
|
112
117
|
"outline": {
|
|
113
118
|
"De3pzq": "fxugw4r",
|
|
114
|
-
"B4j52fo": "
|
|
115
|
-
"Bekrc4i": ["
|
|
116
|
-
"Bn0qgzm": "
|
|
117
|
-
"ibv6hh": ["
|
|
119
|
+
"B4j52fo": "f192inf7",
|
|
120
|
+
"Bekrc4i": ["f5tn483", "f1ojsxk5"],
|
|
121
|
+
"Bn0qgzm": "f1vxd6vx",
|
|
122
|
+
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
118
123
|
"icvyot": "fzkkow9",
|
|
119
124
|
"vrafjx": ["fcdblym", "fjik90z"],
|
|
120
125
|
"oivjwe": "fg706s2",
|
|
@@ -122,11 +127,19 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
122
127
|
"g2u3we": "fj3muxo",
|
|
123
128
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
124
129
|
"B9xav0g": "f1c1zstj",
|
|
125
|
-
"zhjwy3": ["f1lxtadh", "f1akhkt"]
|
|
130
|
+
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
131
|
+
"Bgoe8wy": "fvcxoqz",
|
|
132
|
+
"Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
|
|
133
|
+
"oetu4i": "flmw63s",
|
|
134
|
+
"gg5e9n": ["f1m52nbi", "f1ub3y4t"],
|
|
135
|
+
"B6oc9vd": "fvs00aa",
|
|
136
|
+
"ak43y8": ["f1assf6x", "f4ruux4"],
|
|
137
|
+
"wmxk5l": "fqhmt4z",
|
|
138
|
+
"B50zh58": ["f4ruux4", "f1assf6x"]
|
|
126
139
|
},
|
|
127
140
|
"underline": {
|
|
128
141
|
"De3pzq": "f1c21dwh",
|
|
129
|
-
"Bn0qgzm": "
|
|
142
|
+
"Bn0qgzm": "f1vxd6vx",
|
|
130
143
|
"oivjwe": "fg706s2",
|
|
131
144
|
"B9xav0g": "f1c1zstj",
|
|
132
145
|
"Bbmb7ep": ["f1krrbdw", "f1deotkl"],
|
|
@@ -141,7 +154,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
141
154
|
"De3pzq": "f16xq7d1"
|
|
142
155
|
}
|
|
143
156
|
}, {
|
|
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;}", ".
|
|
157
|
+
"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;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".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;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".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);}"],
|
|
145
158
|
"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
159
|
"m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
|
|
147
160
|
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
@@ -152,7 +165,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
152
165
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
|
|
153
166
|
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
154
167
|
}]],
|
|
155
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
168
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
169
|
+
"h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
|
|
170
|
+
"a": [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
|
|
156
171
|
});
|
|
157
172
|
|
|
158
173
|
const useIconStyles = /*#__PURE__*/__styles({
|
|
@@ -164,16 +179,19 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
164
179
|
"Bo70h7d": "fvc9v3g"
|
|
165
180
|
},
|
|
166
181
|
"small": {
|
|
167
|
-
"Be2twd7": "f4ybsrx"
|
|
182
|
+
"Be2twd7": "f4ybsrx",
|
|
183
|
+
"Frg6f3": ["f1h9en5y", "f1xk557c"]
|
|
168
184
|
},
|
|
169
185
|
"medium": {
|
|
170
|
-
"Be2twd7": "fe5j1ua"
|
|
186
|
+
"Be2twd7": "fe5j1ua",
|
|
187
|
+
"Frg6f3": ["f1h9en5y", "f1xk557c"]
|
|
171
188
|
},
|
|
172
189
|
"large": {
|
|
173
|
-
"Be2twd7": "f1rt2boy"
|
|
190
|
+
"Be2twd7": "f1rt2boy",
|
|
191
|
+
"Frg6f3": ["f1t5qyk5", "f1ikr372"]
|
|
174
192
|
}
|
|
175
193
|
}, {
|
|
176
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}"]
|
|
194
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}"]
|
|
177
195
|
});
|
|
178
196
|
/**
|
|
179
197
|
* Apply styling to the Dropdown slots based on the state
|
|
@@ -183,15 +201,19 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
183
201
|
export const useDropdownStyles_unstable = state => {
|
|
184
202
|
const {
|
|
185
203
|
appearance,
|
|
204
|
+
open,
|
|
186
205
|
placeholderVisible,
|
|
187
206
|
size
|
|
188
207
|
} = state;
|
|
189
208
|
const styles = useStyles();
|
|
190
209
|
const iconStyles = useIconStyles();
|
|
191
210
|
state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], state.root.className);
|
|
192
|
-
state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.listbox.className);
|
|
193
211
|
state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, state.button.className);
|
|
194
212
|
|
|
213
|
+
if (state.listbox) {
|
|
214
|
+
state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
|
|
215
|
+
}
|
|
216
|
+
|
|
195
217
|
if (state.expandIcon) {
|
|
196
218
|
state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], state.expandIcon.className);
|
|
197
219
|
}
|
|
@@ -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;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;;
|
|
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: '250px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {},\n\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '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(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, 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\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.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Listbox.types.js","sourceRoot":"../src/","sources":["components/Listbox/Listbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Listbox.types.js","sourceRoot":"../src/","sources":["components/Listbox/Listbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /* The root slot, a `<div>` with `role=\"listbox\"` */\n root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n SelectionState & {\n /* Option data for the currently highlighted option (not the selected option) */\n activeOption?: OptionValue;\n\n // Whether the keyboard focus outline style should be visible\n focusVisible: boolean;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n setActiveOption(option?: OptionValue): void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
2
|
+
import { getNativeElementProps, mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';
|
|
3
3
|
import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
|
|
4
4
|
import { useSelection } from '../../utils/useSelection';
|
|
5
5
|
import { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';
|
|
@@ -23,21 +23,16 @@ export const useListbox_unstable = (props, ref) => {
|
|
|
23
23
|
const {
|
|
24
24
|
getCount,
|
|
25
25
|
getOptionAtIndex,
|
|
26
|
-
getOptionById,
|
|
27
26
|
getIndexOfId
|
|
28
27
|
} = optionCollection;
|
|
29
28
|
const {
|
|
30
29
|
selectedOptions,
|
|
31
30
|
selectOption
|
|
32
31
|
} = useSelection(props);
|
|
33
|
-
const [activeOption, setActiveOption] = React.useState();
|
|
32
|
+
const [activeOption, setActiveOption] = React.useState(); // track whether keyboard focus outline should be shown
|
|
33
|
+
// tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
|
|
34
34
|
|
|
35
|
-
const
|
|
36
|
-
// clicked option should always become active option
|
|
37
|
-
setActiveOption(getOptionById(option.id)); // handle selection change
|
|
38
|
-
|
|
39
|
-
selectOption(event, option);
|
|
40
|
-
};
|
|
35
|
+
const [focusVisible, setFocusVisible] = React.useState(false);
|
|
41
36
|
|
|
42
37
|
const onKeyDown = event => {
|
|
43
38
|
const action = getDropdownActionFromKey(event, {
|
|
@@ -61,25 +56,36 @@ export const useListbox_unstable = (props, ref) => {
|
|
|
61
56
|
// prevent default page scroll/keyboard action if the index changed
|
|
62
57
|
event.preventDefault();
|
|
63
58
|
setActiveOption(getOptionAtIndex(newIndex));
|
|
59
|
+
setFocusVisible(true);
|
|
64
60
|
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const onMouseOver = event => {
|
|
64
|
+
setFocusVisible(false);
|
|
65
65
|
}; // get state from parent combobox, if it exists
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
const hasComboboxContext = useHasParentContext(ComboboxContext);
|
|
69
69
|
const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);
|
|
70
|
-
const
|
|
71
|
-
const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);
|
|
70
|
+
const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);
|
|
71
|
+
const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);
|
|
72
|
+
const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);
|
|
73
|
+
const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption); // without a parent combobox context, provide values directly from Listbox
|
|
72
74
|
|
|
73
75
|
const optionContextValues = hasComboboxContext ? {
|
|
74
76
|
activeOption: comboboxActiveOption,
|
|
75
|
-
|
|
76
|
-
selectedOptions: comboboxSelectedOptions
|
|
77
|
+
focusVisible: comboboxFocusVisible,
|
|
78
|
+
selectedOptions: comboboxSelectedOptions,
|
|
79
|
+
selectOption: comboboxSelectOption,
|
|
80
|
+
setActiveOption: comboboxSetActiveOption
|
|
77
81
|
} : {
|
|
78
82
|
activeOption,
|
|
79
|
-
|
|
80
|
-
selectedOptions
|
|
83
|
+
focusVisible,
|
|
84
|
+
selectedOptions,
|
|
85
|
+
selectOption,
|
|
86
|
+
setActiveOption
|
|
81
87
|
};
|
|
82
|
-
|
|
88
|
+
const state = {
|
|
83
89
|
components: {
|
|
84
90
|
root: 'div'
|
|
85
91
|
},
|
|
@@ -89,12 +95,14 @@ export const useListbox_unstable = (props, ref) => {
|
|
|
89
95
|
'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
|
|
90
96
|
'aria-multiselectable': multiselect,
|
|
91
97
|
tabIndex: 0,
|
|
92
|
-
onKeyDown,
|
|
93
98
|
...props
|
|
94
99
|
}),
|
|
95
100
|
multiselect,
|
|
96
101
|
...optionCollection,
|
|
97
102
|
...optionContextValues
|
|
98
103
|
};
|
|
104
|
+
state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
|
|
105
|
+
state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));
|
|
106
|
+
return state;
|
|
99
107
|
};
|
|
100
108
|
//# sourceMappingURL=useListbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Listbox/useListbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,
|
|
1
|
+
{"version":3,"sources":["components/Listbox/useListbox.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback } 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, getIndexOfId } = optionCollection;\n\n const { selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n 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 setFocusVisible(true);\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\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 comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\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 ...props,\n }),\n multiselect,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.types.js","sourceRoot":"../src/","sources":["components/Option/Option.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionSlots = {\n /* The root option slot, with role=\"option\" */\n root: NonNullable<Slot<'div'>>;\n\n /* The check icon that is visible for selected options */\n checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /**\n * Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n */\n disabled?: boolean;\n\n /*\n * Defines a string value for the option, used for the parent Combobox's value.\n * Use this if the children are not a string, or you wish the value to differ from the displayed text.\n */\n value?: string;\n};\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /* If true, this is the currently highlighted option */\n active: boolean;\n\n /* If true, the option is part of a multiselect combobox or listbox */\n multiselect?: boolean;\n\n /* If true, the option is selected */\n selected: boolean;\n };\n"]}
|
|
1
|
+
{"version":3,"file":"Option.types.js","sourceRoot":"../src/","sources":["components/Option/Option.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionSlots = {\n /* The root option slot, with role=\"option\" */\n root: NonNullable<Slot<'div'>>;\n\n /* The check icon that is visible for selected options */\n checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /**\n * Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n */\n disabled?: boolean;\n\n /*\n * Defines a string value for the option, used for the parent Combobox's value.\n * Use this if the children are not a string, or you wish the value to differ from the displayed text.\n */\n value?: string;\n};\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /* If true, this is the currently highlighted option */\n active: boolean;\n\n // Whether the keyboard focus outline style should be visible\n focusVisible: boolean;\n\n /* If true, the option is part of a multiselect combobox or listbox */\n multiselect?: boolean;\n\n /* If true, the option is selected */\n selected: boolean;\n };\n"]}
|
|
@@ -2,7 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
4
4
|
import { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';
|
|
5
|
-
import {
|
|
5
|
+
import { ComboboxContext } from '../../contexts/ComboboxContext';
|
|
6
|
+
import { ListboxContext } from '../../contexts/ListboxContext';
|
|
6
7
|
|
|
7
8
|
function getValueString(value, children) {
|
|
8
9
|
if (value) {
|
|
@@ -34,20 +35,26 @@ export const useOption_unstable = (props, ref) => {
|
|
|
34
35
|
value
|
|
35
36
|
} = props;
|
|
36
37
|
const optionRef = React.useRef(null);
|
|
37
|
-
const optionValue = getValueString(value, props.children); //
|
|
38
|
+
const optionValue = getValueString(value, props.children); // use the id if provided, otherwise use a generated id
|
|
38
39
|
|
|
40
|
+
const id = useId('fluent-option', props.id); // data used for context registration & events
|
|
41
|
+
|
|
42
|
+
const optionData = React.useMemo(() => ({
|
|
43
|
+
id,
|
|
44
|
+
disabled,
|
|
45
|
+
value: optionValue
|
|
46
|
+
}), [id, disabled, optionValue]); // context values
|
|
47
|
+
|
|
48
|
+
const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);
|
|
39
49
|
const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);
|
|
40
|
-
const onOptionClick = useContextSelector(ListboxContext, ctx => ctx.onOptionClick);
|
|
41
50
|
const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);
|
|
42
51
|
const selected = useContextSelector(ListboxContext, ctx => {
|
|
43
52
|
const selectedOptions = ctx.selectedOptions;
|
|
44
53
|
return !!optionValue && !!selectedOptions.find(o => o === optionValue);
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
return props.id || defaultId;
|
|
50
|
-
}, [props.id, defaultId]); // current active option?
|
|
54
|
+
});
|
|
55
|
+
const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);
|
|
56
|
+
const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);
|
|
57
|
+
const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen); // current active option?
|
|
51
58
|
|
|
52
59
|
const active = useContextSelector(ListboxContext, ctx => {
|
|
53
60
|
var _a, _b;
|
|
@@ -67,26 +74,26 @@ export const useOption_unstable = (props, ref) => {
|
|
|
67
74
|
if (disabled) {
|
|
68
75
|
event.preventDefault();
|
|
69
76
|
return;
|
|
70
|
-
}
|
|
77
|
+
} // clicked option should always become active option
|
|
71
78
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
|
|
80
|
+
setActiveOption(optionData); // close on option click for single-select options in a combobox
|
|
81
|
+
|
|
82
|
+
if (!multiselect) {
|
|
83
|
+
setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
|
|
84
|
+
} // handle selection change
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
selectOption(event, optionData);
|
|
77
88
|
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
78
89
|
}; // register option data with context
|
|
79
90
|
|
|
80
91
|
|
|
81
92
|
React.useEffect(() => {
|
|
82
93
|
if (id && optionRef.current) {
|
|
83
|
-
return registerOption(
|
|
84
|
-
id,
|
|
85
|
-
disabled,
|
|
86
|
-
value: optionValue
|
|
87
|
-
}, optionRef.current);
|
|
94
|
+
return registerOption(optionData, optionRef.current);
|
|
88
95
|
}
|
|
89
|
-
}, [
|
|
96
|
+
}, [id, optionData, registerOption]);
|
|
90
97
|
return {
|
|
91
98
|
components: {
|
|
92
99
|
root: 'div',
|
|
@@ -110,6 +117,7 @@ export const useOption_unstable = (props, ref) => {
|
|
|
110
117
|
}),
|
|
111
118
|
active,
|
|
112
119
|
disabled,
|
|
120
|
+
focusVisible,
|
|
113
121
|
multiselect,
|
|
114
122
|
selected
|
|
115
123
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Option/useOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,EAAyD,aAAzD,QAA8E,2BAA9E;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,eAAT,EAA0B,uBAA1B,EAAmD,qBAAnD,QAAgF,uBAAhF;AACA,SAAS,cAAT,QAA+B,+BAA/B
|
|
1
|
+
{"version":3,"sources":["components/Option/useOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getValueString(value: string | undefined, children: React.ReactNode) {\n if (value) {\n return value;\n }\n\n let valueString = '';\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n valueString += child;\n }\n });\n return valueString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { disabled, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionValue = getValueString(value, props.children);\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, value: optionValue }), [\n id,\n disabled,\n optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n role: 'option',\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-selected': `${selected}`,\n id,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -104,11 +104,12 @@ export const useOptionStyles_unstable = state => {
|
|
|
104
104
|
const {
|
|
105
105
|
active,
|
|
106
106
|
disabled,
|
|
107
|
+
focusVisible,
|
|
107
108
|
multiselect,
|
|
108
109
|
selected
|
|
109
110
|
} = state;
|
|
110
111
|
const styles = useStyles();
|
|
111
|
-
state.root.className = mergeClasses(optionClassNames.root, styles.root, active && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
|
|
112
|
+
state.root.className = mergeClasses(optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
|
|
112
113
|
|
|
113
114
|
if (state.checkIcon) {
|
|
114
115
|
state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, state.checkIcon.className, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Option/useOptionStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE;AAFgD,CAAtD;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAkGA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,MAAF;IAAU,QAAV;IAAoB,
|
|
1
|
+
{"version":3,"sources":["components/Option/useOptionStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE;AAFgD,CAAtD;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAkGA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,MAAF;IAAU,QAAV;IAAoB,YAApB;IAAkC,WAAlC;IAA+C;EAA/C,IAA4D,KAAlE;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,IAAI,YAAV,IAA0B,MAAM,CAAC,MAHA,EAIjC,QAAQ,IAAI,MAAM,CAAC,QAJc,EAKjC,QAAQ,IAAI,MAAM,CAAC,QALc,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,gBAAgB,CAAC,SADqB,EAEtC,MAAM,CAAC,SAF+B,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,EAItC,WAAW,IAAI,MAAM,CAAC,gBAJgB,EAKtC,QAAQ,IAAI,MAAM,CAAC,aALmB,EAMtC,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,wBANI,EAOtC,QAAQ,IAAI,MAAM,CAAC,aAPmB,CAAxC;EASD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n multiselectCheck: {\n color: tokens.colorNeutralForeground3,\n fontSize: tokens.fontSizeBase500,\n visibility: 'visible',\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n color: tokens.colorBrandBackground,\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n active && focusVisible && styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n state.checkIcon.className,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,15 +3,22 @@ import { createContext } from '@fluentui/react-context-selector'; // eslint-disa
|
|
|
3
3
|
export const ComboboxContext = /*#__PURE__*/createContext({
|
|
4
4
|
activeOption: undefined,
|
|
5
5
|
appearance: 'outline',
|
|
6
|
+
focusVisible: false,
|
|
7
|
+
open: false,
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
registerOption() {
|
|
10
|
+
return () => undefined;
|
|
8
11
|
},
|
|
9
12
|
|
|
10
|
-
open: false,
|
|
11
13
|
selectedOptions: [],
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
selectOption() {// noop
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
setActiveOption() {// noop
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
setOpen() {// noop
|
|
15
22
|
},
|
|
16
23
|
|
|
17
24
|
size: 'medium'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,
|
|
1
|
+
{"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAoBA;;AACA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,YAAY,EAAE,SADmD;EAEjE,UAAU,EAAE,SAFqD;EAGjE,YAAY,EAAE,KAHmD;EAIjE,IAAI,EAAE,KAJ2D;;EAKjE,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAPgE;;EAQjE,eAAe,EAAE,EARgD;;EASjE,YAAY,GAAA,CACV;EACD,CAXgE;;EAYjE,eAAe,GAAA,CACb;EACD,CAdgE;;EAejE,OAAO,GAAA,CACL;EACD,CAjBgE;;EAkBjE,IAAI,EAAE;AAlB2D,CAAvB,CAArC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n | 'activeOption'\n | 'appearance'\n | 'focusVisible'\n | 'open'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n | 'setOpen'\n | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n"],"sourceRoot":"../src/"}
|