@fluentui/react-combobox 9.11.5 → 9.11.6

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.
Files changed (31) hide show
  1. package/CHANGELOG.md +15 -2
  2. package/dist/index.d.ts +38 -0
  3. package/lib/components/Combobox/Combobox.types.js.map +1 -1
  4. package/lib/components/Combobox/useComboboxStyles.styles.js +157 -82
  5. package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
  6. package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
  7. package/lib/components/Dropdown/useDropdownStyles.styles.js +139 -73
  8. package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
  9. package/lib/components/Listbox/Listbox.types.js.map +1 -1
  10. package/lib/components/Listbox/useListboxStyles.styles.js +15 -9
  11. package/lib/components/Listbox/useListboxStyles.styles.js.map +1 -1
  12. package/lib/components/Option/Option.types.js.map +1 -1
  13. package/lib/components/Option/useOptionStyles.styles.js +67 -41
  14. package/lib/components/Option/useOptionStyles.styles.js.map +1 -1
  15. package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
  16. package/lib/components/OptionGroup/useOptionGroupStyles.styles.js +29 -17
  17. package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
  18. package/lib/utils/ComboboxBase.types.js.map +1 -1
  19. package/lib/utils/OptionCollection.types.js.map +1 -1
  20. package/lib/utils/Selection.types.js.map +1 -1
  21. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +232 -252
  22. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
  23. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +214 -241
  24. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
  25. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +21 -20
  26. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map +1 -1
  27. package/lib-commonjs/components/Option/useOptionStyles.styles.js +90 -158
  28. package/lib-commonjs/components/Option/useOptionStyles.styles.js.map +1 -1
  29. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +43 -54
  30. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
  31. package/package.json +5 -5
package/lib/components/Dropdown/Dropdown.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /* The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /* The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /* The dropdown clear icon */\n clearButton?: Slot<'button'>;\n\n /* The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /* The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n Omit<ComboboxBaseState, 'freeform'> & {\n /* Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n\n showClearButton?: boolean;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AAAA,WAmDwE"}
1
+ {"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /** The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /** The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /** The dropdown clear icon */\n clearButton?: Slot<'button'>;\n\n /** The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /** The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n Omit<ComboboxBaseState, 'freeform'> & {\n /** Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n\n showClearButton?: boolean;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AAAA,WAmDwE"}
package/lib/components/Dropdown/useDropdownStyles.styles.js CHANGED
@@ -14,10 +14,11 @@ export const dropdownClassNames = {
14
14
  */
15
15
  const useStyles = /*#__PURE__*/__styles({
16
16
  root: {
17
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
18
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
19
- B7oj6ja: ["f1jar5jt", "fyu767a"],
20
- Btl43ni: ["fyu767a", "f1jar5jt"],
17
+ Beyfa6y: 0,
18
+ Bbmb7ep: 0,
19
+ Btl43ni: 0,
20
+ B7oj6ja: 0,
21
+ Dimara: "ft85np5",
21
22
  B7ck84d: "f1ewtqcl",
22
23
  mc9l5x: "ftuwxu6",
23
24
  Bf4jedk: "f1exfvgq",
@@ -34,9 +35,10 @@ const useStyles = /*#__PURE__*/__styles({
34
35
  Dlnsje: "ffyw7fx",
35
36
  d9w3h3: ["f1kp91vd", "f1ibwz09"],
36
37
  B3778ie: ["f1ibwz09", "f1kp91vd"],
37
- Bcgy8vk: "f14pi962",
38
- Bw17bha: "f1lh990p",
39
- B1q35kw: "f1jc6hxc",
38
+ B1q35kw: 0,
39
+ Bw17bha: 0,
40
+ Bcgy8vk: 0,
41
+ Bjuhk93: "f1mnjydx",
40
42
  Gjdm7m: "f13evtba",
41
43
  b1kco5: "f1yk9hq",
42
44
  Ba2ppi3: "fhwpy7i",
@@ -57,10 +59,11 @@ const useStyles = /*#__PURE__*/__styles({
57
59
  listbox: {
58
60
  B7ck84d: "f1ewtqcl",
59
61
  E5pizo: "f1hg901r",
60
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
61
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
62
- B7oj6ja: ["f1jar5jt", "fyu767a"],
63
- Btl43ni: ["fyu767a", "f1jar5jt"],
62
+ Beyfa6y: 0,
63
+ Bbmb7ep: 0,
64
+ Btl43ni: 0,
65
+ B7oj6ja: 0,
66
+ Dimara: "ft85np5",
64
67
  Bxyxcbc: "fmmk62d"
65
68
  },
66
69
  listboxCollapsed: {
@@ -72,10 +75,23 @@ const useStyles = /*#__PURE__*/__styles({
72
75
  button: {
73
76
  Bt984gj: "f122n59",
74
77
  De3pzq: "f1c21dwh",
75
- B4j52fo: "fre7gi1",
76
- Bekrc4i: ["f1358rze", "f1rvrf73"],
77
- Bn0qgzm: "fqdk4by",
78
- ibv6hh: ["f1rvrf73", "f1358rze"],
78
+ Bgfg5da: 0,
79
+ B9xav0g: 0,
80
+ oivjwe: 0,
81
+ Bn0qgzm: 0,
82
+ B4g9neb: 0,
83
+ zhjwy3: 0,
84
+ wvpqe5: 0,
85
+ ibv6hh: 0,
86
+ u1mtju: 0,
87
+ h3c5rm: 0,
88
+ vrafjx: 0,
89
+ Bekrc4i: 0,
90
+ i8vvqc: 0,
91
+ g2u3we: 0,
92
+ icvyot: 0,
93
+ B4j52fo: 0,
94
+ irswps: "f3bhgqh",
79
95
  B7ck84d: "f1ewtqcl",
80
96
  sj55zd: "f19n0e5",
81
97
  i8kkvl: "f14mj54c",
@@ -96,20 +112,22 @@ const useStyles = /*#__PURE__*/__styles({
96
112
  Be2twd7: "fy9rknc",
97
113
  Bhrd7zp: "figsok6",
98
114
  Bg96gwp: "fwrc4pm",
99
- z8tnut: "f1khb0e9",
100
- z189sj: ["fdw0yi8", "fk8j09s"],
101
- Byoj8tv: "f1jnq6q7",
102
- uwmqm3: ["f1xile11", "fqznh8f"]
115
+ Byoj8tv: 0,
116
+ uwmqm3: 0,
117
+ z189sj: 0,
118
+ z8tnut: 0,
119
+ B0ocmuz: ["fye6m5k", "f3cq2dl"]
103
120
  },
104
121
  medium: {
105
122
  Bahqtrf: "fk6fouc",
106
123
  Be2twd7: "fkhj508",
107
124
  Bhrd7zp: "figsok6",
108
125
  Bg96gwp: "f1i3iumi",
109
- z8tnut: "f1sbtcvk",
110
- z189sj: ["f11gcy0p", "f1ng84yb"],
111
- Byoj8tv: "fdghr9",
112
- uwmqm3: ["f1e60jzv", "f135dnwl"]
126
+ Byoj8tv: 0,
127
+ uwmqm3: 0,
128
+ z189sj: 0,
129
+ z8tnut: 0,
130
+ B0ocmuz: ["f14ev680", "f58uxzw"]
113
131
  },
114
132
  large: {
115
133
  i8kkvl: "f1rjii52",
@@ -117,25 +135,31 @@ const useStyles = /*#__PURE__*/__styles({
117
135
  Be2twd7: "fod5ikn",
118
136
  Bhrd7zp: "figsok6",
119
137
  Bg96gwp: "faaz57k",
120
- z8tnut: "f1a1bwwz",
121
- z189sj: ["fw5db7e", "f1uw59to"],
122
- Byoj8tv: "fy7v416",
123
- uwmqm3: ["fnphzt9", "flt1dlf"]
138
+ Byoj8tv: 0,
139
+ uwmqm3: 0,
140
+ z189sj: 0,
141
+ z8tnut: 0,
142
+ B0ocmuz: ["f139mn7i", "f1v3q0m"]
124
143
  },
125
144
  outline: {
126
145
  De3pzq: "fxugw4r",
127
- B4j52fo: "f192inf7",
128
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
129
- Bn0qgzm: "f1vxd6vx",
130
- ibv6hh: ["f1ojsxk5", "f5tn483"],
131
- icvyot: "fzkkow9",
132
- vrafjx: ["fcdblym", "fjik90z"],
133
- oivjwe: "fg706s2",
134
- wvpqe5: ["fjik90z", "fcdblym"],
135
- g2u3we: "fj3muxo",
136
- h3c5rm: ["f1akhkt", "f1lxtadh"],
146
+ Bgfg5da: 0,
137
147
  B9xav0g: "f1c1zstj",
138
- zhjwy3: ["f1lxtadh", "f1akhkt"]
148
+ oivjwe: 0,
149
+ Bn0qgzm: 0,
150
+ B4g9neb: 0,
151
+ zhjwy3: 0,
152
+ wvpqe5: 0,
153
+ ibv6hh: 0,
154
+ u1mtju: 0,
155
+ h3c5rm: 0,
156
+ vrafjx: 0,
157
+ Bekrc4i: 0,
158
+ i8vvqc: 0,
159
+ g2u3we: 0,
160
+ icvyot: 0,
161
+ B4j52fo: 0,
162
+ irswps: "fhz96rm"
139
163
  },
140
164
  outlineInteractive: {
141
165
  Bgoe8wy: "fvcxoqz",
@@ -149,43 +173,55 @@ const useStyles = /*#__PURE__*/__styles({
149
173
  },
150
174
  underline: {
151
175
  De3pzq: "f1c21dwh",
152
- Bn0qgzm: "f1vxd6vx",
153
- oivjwe: "fg706s2",
154
- B9xav0g: "f1c1zstj",
155
- Bbmb7ep: ["f1krrbdw", "f1deotkl"],
156
- Beyfa6y: ["f1deotkl", "f1krrbdw"],
157
- B7oj6ja: ["f10ostut", "f1ozlkrg"],
158
- Btl43ni: ["f1ozlkrg", "f10ostut"]
176
+ B9xav0g: 0,
177
+ oivjwe: 0,
178
+ Bn0qgzm: 0,
179
+ Bgfg5da: "f9ez7ne",
180
+ Beyfa6y: 0,
181
+ Bbmb7ep: 0,
182
+ Btl43ni: 0,
183
+ B7oj6ja: 0,
184
+ Dimara: "fokr779"
159
185
  },
160
186
  "filled-lighter": {
161
187
  De3pzq: "fxugw4r",
162
- B4j52fo: "f192inf7",
163
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
164
- Bn0qgzm: "f1vxd6vx",
165
- ibv6hh: ["f1ojsxk5", "f5tn483"],
166
- icvyot: "fzkkow9",
167
- vrafjx: ["fcdblym", "fjik90z"],
168
- oivjwe: "fg706s2",
169
- wvpqe5: ["fjik90z", "fcdblym"],
170
- g2u3we: "f1p3nwhy",
171
- h3c5rm: ["f11589ue", "f1pdflbu"],
172
- B9xav0g: "f1q5o8ev",
173
- zhjwy3: ["f1pdflbu", "f11589ue"]
188
+ Bgfg5da: 0,
189
+ B9xav0g: 0,
190
+ oivjwe: 0,
191
+ Bn0qgzm: 0,
192
+ B4g9neb: 0,
193
+ zhjwy3: 0,
194
+ wvpqe5: 0,
195
+ ibv6hh: 0,
196
+ u1mtju: 0,
197
+ h3c5rm: 0,
198
+ vrafjx: 0,
199
+ Bekrc4i: 0,
200
+ i8vvqc: 0,
201
+ g2u3we: 0,
202
+ icvyot: 0,
203
+ B4j52fo: 0,
204
+ irswps: "fs2rfia"
174
205
  },
175
206
  "filled-darker": {
176
207
  De3pzq: "f16xq7d1",
177
- B4j52fo: "f192inf7",
178
- Bekrc4i: ["f5tn483", "f1ojsxk5"],
179
- Bn0qgzm: "f1vxd6vx",
180
- ibv6hh: ["f1ojsxk5", "f5tn483"],
181
- icvyot: "fzkkow9",
182
- vrafjx: ["fcdblym", "fjik90z"],
183
- oivjwe: "fg706s2",
184
- wvpqe5: ["fjik90z", "fcdblym"],
185
- g2u3we: "f1p3nwhy",
186
- h3c5rm: ["f11589ue", "f1pdflbu"],
187
- B9xav0g: "f1q5o8ev",
188
- zhjwy3: ["f1pdflbu", "f11589ue"]
208
+ Bgfg5da: 0,
209
+ B9xav0g: 0,
210
+ oivjwe: 0,
211
+ Bn0qgzm: 0,
212
+ B4g9neb: 0,
213
+ zhjwy3: 0,
214
+ wvpqe5: 0,
215
+ ibv6hh: 0,
216
+ u1mtju: 0,
217
+ h3c5rm: 0,
218
+ vrafjx: 0,
219
+ Bekrc4i: 0,
220
+ i8vvqc: 0,
221
+ g2u3we: 0,
222
+ icvyot: 0,
223
+ B4j52fo: 0,
224
+ irswps: "fs2rfia"
189
225
  },
190
226
  invalid: {
191
227
  tvckwq: "fs4k3qj",
@@ -216,7 +252,37 @@ const useStyles = /*#__PURE__*/__styles({
216
252
  mc9l5x: "fjseox"
217
253
  }
218
254
  }, {
219
- d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".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{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".f122n59{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{column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
255
+ d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
256
+ p: -1
257
+ }], ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".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);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
258
+ p: -1
259
+ }], ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
260
+ p: -1
261
+ }], ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".f122n59{align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f3bhgqh{border:none;}", {
262
+ p: -2
263
+ }], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
264
+ p: -1
265
+ }], [".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}", {
266
+ p: -1
267
+ }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
268
+ p: -1
269
+ }], [".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}", {
270
+ p: -1
271
+ }], ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", {
272
+ p: -1
273
+ }], [".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}", {
274
+ p: -1
275
+ }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
276
+ p: -2
277
+ }], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", [".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
278
+ p: -1
279
+ }], [".fokr779{border-radius:0;}", {
280
+ p: -1
281
+ }], [".fs2rfia{border:var(--strokeWidthThin) solid transparent;}", {
282
+ p: -2
283
+ }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", [".fs2rfia{border:var(--strokeWidthThin) solid transparent;}", {
284
+ p: -2
285
+ }], ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
220
286
  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
221
287
  m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
222
288
  m: "screen and (prefers-reduced-motion: reduce)"
@@ -266,9 +332,9 @@ const useIconStyles = /*#__PURE__*/__styles({
266
332
  }, {
267
333
  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
268
334
  });
269
- const useBaseClearButtonStyle = /*#__PURE__*/__resetStyles("r1ekmruf", "r1aeuc1g", {
270
- r: [".r1ekmruf{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1ekmruf:focus{outline-style:none;}", ".r1ekmruf:focus-visible{outline-style:none;}", ".r1ekmruf[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1ekmruf[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1aeuc1g{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1aeuc1g:focus{outline-style:none;}", ".r1aeuc1g:focus-visible{outline-style:none;}", ".r1aeuc1g[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1aeuc1g[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
271
- s: ["@media (forced-colors: active){.r1ekmruf[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1aeuc1g[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
335
+ const useBaseClearButtonStyle = /*#__PURE__*/__resetStyles("rticfuj", "r1vp6jef", {
336
+ r: [".rticfuj{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".rticfuj:focus{outline-style:none;}", ".rticfuj:focus-visible{outline-style:none;}", ".rticfuj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rticfuj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1vp6jef{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1vp6jef:focus{outline-style:none;}", ".r1vp6jef:focus-visible{outline-style:none;}", ".r1vp6jef[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1vp6jef[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
337
+ s: ["@media (forced-colors: active){.rticfuj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1vp6jef[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
272
338
  });
273
339
  /**
274
340
  * Apply styling to the Dropdown slots based on the state
package/lib/components/Dropdown/useDropdownStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n clearButton: 'fui-Dropdown__clearButton',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-flex',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\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 '@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 '@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 '@supports selector(:has(*))': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)'\n }\n }\n },\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding('3px', tokens.spacingHorizontalSNudge, '3px', `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding('5px', tokens.spacingHorizontalMNudge, '5px', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding('7px', tokens.spacingHorizontalM, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0)\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n // 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 // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n alignSelf: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n cursor: 'pointer',\n height: 'fit-content',\n margin: 0,\n marginRight: tokens.spacingHorizontalMNudge,\n padding: 0,\n position: 'relative',\n ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n const { appearance, open, placeholderVisible, showClearButton, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const clearButtonStyle = useBaseClearButtonStyle();\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n }\n if (state.clearButton) {\n state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n clearButton: 'fui-Dropdown__clearButton',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n display: 'inline-flex',\n minWidth: '250px',\n position: 'relative',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\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 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 '@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 '@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 '@supports selector(:has(*))': {\n [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n borderBottomColor: 'initial',\n transform: 'scaleX(0)'\n }\n }\n },\n listbox: {\n boxSizing: 'border-box',\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1\n },\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n small: {\n ...typographyStyles.caption1,\n padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n medium: {\n ...typographyStyles.body1,\n padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\n }\n});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n // 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 // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n alignSelf: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n cursor: 'pointer',\n height: 'fit-content',\n margin: 0,\n marginRight: tokens.spacingHorizontalMNudge,\n padding: 0,\n position: 'relative',\n ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n const { appearance, open, placeholderVisible, showClearButton, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const clearButtonStyle = useBaseClearButtonStyle();\n state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n if (state.listbox) {\n state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n }\n if (state.clearButton) {\n state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/Listbox/Listbox.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\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 Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.active()\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsDE"}
1
+ {"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\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 Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.active()\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsDE"}
package/lib/components/Listbox/useListboxStyles.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { tokens } from '@fluentui/react-theme';
2
- import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
+ import { __styles, mergeClasses } from '@griffel/react';
3
3
  export const listboxClassNames = {
4
4
  root: 'fui-Listbox'
5
5
  };
@@ -14,17 +14,23 @@ const useStyles = /*#__PURE__*/__styles({
14
14
  Beiy3e4: "f1vx9l62",
15
15
  Bf4jedk: "f3hsy1e",
16
16
  Bmxbyg5: "f5zp4f",
17
- Bpd4iqm: "fpvhumw",
18
- oeaueh: "f1yog68k",
19
- Bw0xxkn: "f13sgyd8",
20
- z8tnut: "f1x4af0m",
21
- z189sj: ["f7x41pl", "fruq291"],
22
- Byoj8tv: "fd55psn",
23
- uwmqm3: ["fruq291", "f7x41pl"],
17
+ Bw0xxkn: 0,
18
+ oeaueh: 0,
19
+ Bpd4iqm: 0,
20
+ Befb4lg: "f1iepc6i",
21
+ Byoj8tv: 0,
22
+ uwmqm3: 0,
23
+ z189sj: 0,
24
+ z8tnut: 0,
25
+ B0ocmuz: "f1t35pdg",
24
26
  Belr9w4: "fiut8dr"
25
27
  }
26
28
  }, {
27
- d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
29
+ d: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", [".f1iepc6i{outline:1px solid var(--colorTransparentStroke);}", {
30
+ p: -1
31
+ }], [".f1t35pdg{padding:var(--spacingHorizontalXS);}", {
32
+ p: -1
33
+ }], ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
28
34
  });
29
35
  /**
30
36
  * Apply styling to the Listbox slots based on the state
package/lib/components/Listbox/useListboxStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bpd4iqm","oeaueh","Bw0xxkn","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","d","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding(tokens.spacingHorizontalXS),\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/Option/Option.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n */\n value?: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /**\n * @deprecated - no longer used internally\n */\n active: boolean;\n\n /**\n * @deprecated - no longer used internally\n */\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"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n */\n value?: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /**\n * @deprecated - no longer used internally\n */\n active: boolean;\n\n /**\n * @deprecated - no longer used internally\n */\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"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}