@fluentui/react-select 9.0.0-beta.17 → 9.0.0-beta.19

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 (34) hide show
  1. package/CHANGELOG.json +71 -1
  2. package/CHANGELOG.md +24 -2
  3. package/lib/components/Select/Select.js +0 -1
  4. package/lib/components/Select/Select.js.map +1 -1
  5. package/lib/components/Select/renderSelect.js +6 -4
  6. package/lib/components/Select/renderSelect.js.map +1 -1
  7. package/lib/components/Select/useSelect.js +0 -1
  8. package/lib/components/Select/useSelect.js.map +1 -1
  9. package/lib/components/Select/useSelectStyles.js +187 -196
  10. package/lib/components/Select/useSelectStyles.js.map +1 -1
  11. package/lib/components/SelectField/SelectField.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib-commonjs/Select.js +0 -2
  14. package/lib-commonjs/Select.js.map +1 -1
  15. package/lib-commonjs/SelectField.js +0 -2
  16. package/lib-commonjs/SelectField.js.map +1 -1
  17. package/lib-commonjs/components/Select/Select.js +0 -6
  18. package/lib-commonjs/components/Select/Select.js.map +1 -1
  19. package/lib-commonjs/components/Select/Select.types.js.map +1 -1
  20. package/lib-commonjs/components/Select/index.js +0 -6
  21. package/lib-commonjs/components/Select/index.js.map +1 -1
  22. package/lib-commonjs/components/Select/renderSelect.js +6 -8
  23. package/lib-commonjs/components/Select/renderSelect.js.map +1 -1
  24. package/lib-commonjs/components/Select/useSelect.js +0 -6
  25. package/lib-commonjs/components/Select/useSelect.js.map +1 -1
  26. package/lib-commonjs/components/Select/useSelectStyles.js +187 -200
  27. package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
  28. package/lib-commonjs/components/SelectField/SelectField.js +0 -4
  29. package/lib-commonjs/components/SelectField/SelectField.js.map +1 -1
  30. package/lib-commonjs/components/SelectField/index.js +0 -2
  31. package/lib-commonjs/components/SelectField/index.js.map +1 -1
  32. package/lib-commonjs/index.js +0 -4
  33. package/lib-commonjs/index.js.map +1 -1
  34. package/package.json +6 -6
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useSelectStyles_unstable = exports.selectClassNames = void 0;
7
-
8
7
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
-
10
8
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
-
12
9
  exports.selectClassNames = {
13
10
  root: 'fui-Select',
14
11
  select: 'fui-Select__select',
@@ -18,8 +15,8 @@ const iconSizes = {
18
15
  small: '16px',
19
16
  medium: '20px',
20
17
  large: '24px'
21
- }; //TODO: Should fieldHeights be a set of global design tokens or constants?
22
-
18
+ };
19
+ //TODO: Should fieldHeights be a set of global design tokens or constants?
23
20
  const fieldHeights = {
24
21
  small: '24px',
25
22
  medium: '32px',
@@ -32,7 +29,6 @@ const fieldHeights = {
32
29
  * 3. Content-icon spacing
33
30
  * 4. Content inner padding
34
31
  */
35
-
36
32
  const paddingRight = {
37
33
  small: `calc(${react_theme_1.tokens.spacingHorizontalSNudge}
38
34
  + ${iconSizes.small}
@@ -49,244 +45,238 @@ const paddingRight = {
49
45
  };
50
46
  /* Left padding is calculated from the outer padding + inner content padding values
51
47
  * since <select> can't have additional child content or custom inner layout */
52
-
53
48
  const paddingLeft = {
54
49
  small: `calc(${react_theme_1.tokens.spacingHorizontalSNudge} + ${react_theme_1.tokens.spacingHorizontalXXS})`,
55
50
  medium: `calc(${react_theme_1.tokens.spacingHorizontalMNudge} + ${react_theme_1.tokens.spacingHorizontalXXS})`,
56
51
  large: `calc(${react_theme_1.tokens.spacingHorizontalM} + ${react_theme_1.tokens.spacingHorizontalSNudge})`
57
52
  };
58
53
  /* end of shared values */
59
-
60
54
  const useRootStyles = /*#__PURE__*/react_1.__styles({
61
- "base": {
62
- "Bt984gj": "f122n59",
63
- "B7ck84d": "f1ewtqcl",
64
- "mc9l5x": "f22iagw",
65
- "Eh141a": "flvyvdh",
66
- "Bahqtrf": "fk6fouc",
67
- "qhf8xq": "f10pi13n",
68
- "h62rwi": "f7ll8cq",
69
- "B3778ie": ["f1ibwz09", "f1kp91vd"],
70
- "d9w3h3": ["f1kp91vd", "f1ibwz09"],
71
- "Bl18szs": ["f18vqdqu", "f53nyzz"],
72
- "B4j8arr": ["f53nyzz", "f18vqdqu"],
73
- "li1rpt": "f1gw3sf2",
74
- "Bsft5z2": "f13zj6fq",
75
- "Dlnsje": "fhwjr99",
76
- "E3zdtr": "f1mdlcz9",
77
- "By385i5": "fo72kxq",
78
- "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
79
- "B1piin3": ["f15yvnhg", "f1n6gb5g"],
80
- "b1kco5": "f1yk9hq",
81
- "Ba2ppi3": "fhwpy7i",
82
- "F2fol1": "f14ee0xe",
83
- "lck23g": "f1xhbsuh",
84
- "df92cz": "fv8e3ye",
85
- "I188md": "ftb5wc6",
86
- "umuwi5": "fjw5xc1",
87
- "Blcqepd": "f1xdyd5c",
88
- "nplu4u": "fatpbeo",
89
- "Bioka5o": "fb7uyps",
90
- "H713fs": "f1cmft4k",
91
- "B9ooomg": "f1x58t8o"
55
+ base: {
56
+ Bt984gj: "f122n59",
57
+ B7ck84d: "f1ewtqcl",
58
+ mc9l5x: "f22iagw",
59
+ Eh141a: "flvyvdh",
60
+ Bahqtrf: "fk6fouc",
61
+ qhf8xq: "f10pi13n",
62
+ h62rwi: "f7ll8cq",
63
+ B3778ie: ["f1ibwz09", "f1kp91vd"],
64
+ d9w3h3: ["f1kp91vd", "f1ibwz09"],
65
+ Bl18szs: ["f18vqdqu", "f53nyzz"],
66
+ B4j8arr: ["f53nyzz", "f18vqdqu"],
67
+ li1rpt: "f1gw3sf2",
68
+ Bsft5z2: "f13zj6fq",
69
+ Dlnsje: "fhwjr99",
70
+ E3zdtr: "f1mdlcz9",
71
+ By385i5: "fo72kxq",
72
+ Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
73
+ B1piin3: ["f15yvnhg", "f1n6gb5g"],
74
+ b1kco5: "f1yk9hq",
75
+ Ba2ppi3: "fhwpy7i",
76
+ F2fol1: "f14ee0xe",
77
+ lck23g: "f1xhbsuh",
78
+ df92cz: "fv8e3ye",
79
+ I188md: "ftb5wc6",
80
+ umuwi5: "fjw5xc1",
81
+ Blcqepd: "f1xdyd5c",
82
+ nplu4u: "fatpbeo",
83
+ Bioka5o: "fb7uyps",
84
+ H713fs: "f1cmft4k",
85
+ B9ooomg: "f1x58t8o"
92
86
  }
93
87
  }, {
94
- "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right: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);}"],
95
- "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
96
- "m": "screen and (prefers-reduced-motion: reduce)"
88
+ d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right: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);}"],
89
+ m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
90
+ m: "screen and (prefers-reduced-motion: reduce)"
97
91
  }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
98
- "m": "screen and (prefers-reduced-motion: reduce)"
92
+ m: "screen and (prefers-reduced-motion: reduce)"
99
93
  }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
100
- "m": "screen and (prefers-reduced-motion: reduce)"
94
+ m: "screen and (prefers-reduced-motion: reduce)"
101
95
  }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
102
- "m": "screen and (prefers-reduced-motion: reduce)"
96
+ m: "screen and (prefers-reduced-motion: reduce)"
103
97
  }]],
104
- "w": [".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);}"]
98
+ w: [".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);}"]
105
99
  });
106
-
107
100
  const useSelectStyles = /*#__PURE__*/react_1.__styles({
108
- "base": {
109
- "Bowrso0": "fqrijq1",
110
- "B4j52fo": "f5ogflp",
111
- "Bekrc4i": ["f1hqa2wf", "finvdd3"],
112
- "Bn0qgzm": "f1f09k3d",
113
- "ibv6hh": ["finvdd3", "f1hqa2wf"],
114
- "icvyot": "fzkkow9",
115
- "vrafjx": ["fcdblym", "fjik90z"],
116
- "oivjwe": "fg706s2",
117
- "wvpqe5": ["fjik90z", "fcdblym"],
118
- "g2u3we": "f1p3nwhy",
119
- "h3c5rm": ["f11589ue", "f1pdflbu"],
120
- "B9xav0g": "f1q5o8ev",
121
- "zhjwy3": ["f1pdflbu", "f11589ue"],
122
- "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
123
- "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
124
- "B7oj6ja": ["f1jar5jt", "fyu767a"],
125
- "Btl43ni": ["fyu767a", "f1jar5jt"],
126
- "E5pizo": "f1couhl3",
127
- "B7ck84d": "f1ewtqcl",
128
- "sj55zd": "f19n0e5",
129
- "Bceei9c": "f1k6fduh",
130
- "Bh6795r": "fqerorx",
131
- "B2u0y6b": "f6dzj5z",
132
- "Byoj8tv": "f1qch9an",
133
- "z8tnut": "f1g0x7ka",
134
- "B3aqqti": "fatbyko",
135
- "Brovlpu": "f1grzc83",
136
- "Bxa1mx5": "f19shzzi"
101
+ base: {
102
+ Bowrso0: "fqrijq1",
103
+ B4j52fo: "f5ogflp",
104
+ Bekrc4i: ["f1hqa2wf", "finvdd3"],
105
+ Bn0qgzm: "f1f09k3d",
106
+ ibv6hh: ["finvdd3", "f1hqa2wf"],
107
+ icvyot: "fzkkow9",
108
+ vrafjx: ["fcdblym", "fjik90z"],
109
+ oivjwe: "fg706s2",
110
+ wvpqe5: ["fjik90z", "fcdblym"],
111
+ g2u3we: "f1p3nwhy",
112
+ h3c5rm: ["f11589ue", "f1pdflbu"],
113
+ B9xav0g: "f1q5o8ev",
114
+ zhjwy3: ["f1pdflbu", "f11589ue"],
115
+ Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
116
+ Beyfa6y: ["f16jpd5f", "f1aa9q02"],
117
+ B7oj6ja: ["f1jar5jt", "fyu767a"],
118
+ Btl43ni: ["fyu767a", "f1jar5jt"],
119
+ E5pizo: "f1couhl3",
120
+ B7ck84d: "f1ewtqcl",
121
+ sj55zd: "f19n0e5",
122
+ Bceei9c: "f1k6fduh",
123
+ Bh6795r: "fqerorx",
124
+ B2u0y6b: "f6dzj5z",
125
+ Byoj8tv: "f1qch9an",
126
+ z8tnut: "f1g0x7ka",
127
+ B3aqqti: "fatbyko",
128
+ Brovlpu: "f1grzc83",
129
+ Bxa1mx5: "f19shzzi"
137
130
  },
138
- "disabled": {
139
- "De3pzq": "f1c21dwh",
140
- "g2u3we": "f1jj8ep1",
141
- "h3c5rm": ["f15xbau", "fy0fskl"],
142
- "B9xav0g": "f4ikngz",
143
- "zhjwy3": ["fy0fskl", "f15xbau"],
144
- "sj55zd": "f1s2aq7o",
145
- "Bceei9c": "fdrzuqr",
146
- "Bjwas2f": "fg455y9",
147
- "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
148
- "Bxeuatn": "f1cwzwz",
149
- "n51gp8": ["f14g86mu", "f1rvyvqg"]
131
+ disabled: {
132
+ De3pzq: "f1c21dwh",
133
+ g2u3we: "f1jj8ep1",
134
+ h3c5rm: ["f15xbau", "fy0fskl"],
135
+ B9xav0g: "f4ikngz",
136
+ zhjwy3: ["fy0fskl", "f15xbau"],
137
+ sj55zd: "f1s2aq7o",
138
+ Bceei9c: "fdrzuqr",
139
+ Bjwas2f: "fg455y9",
140
+ Bn1d65q: ["f1rvyvqg", "f14g86mu"],
141
+ Bxeuatn: "f1cwzwz",
142
+ n51gp8: ["f14g86mu", "f1rvyvqg"]
150
143
  },
151
- "disabledUnderline": {
152
- "g2u3we": "fgig46g",
153
- "h3c5rm": ["f1mxt3zg", "fziff3p"],
154
- "B9xav0g": "f4ikngz",
155
- "zhjwy3": ["fziff3p", "f1mxt3zg"]
144
+ disabledUnderline: {
145
+ g2u3we: "fgig46g",
146
+ h3c5rm: ["f1mxt3zg", "fziff3p"],
147
+ B9xav0g: "f4ikngz",
148
+ zhjwy3: ["fziff3p", "f1mxt3zg"]
156
149
  },
157
- "small": {
158
- "Bqenvij": "frvgh55",
159
- "uwmqm3": ["f1xile11", "fqznh8f"],
160
- "z189sj": ["fiqd4sw", "f11fkzut"],
161
- "Bahqtrf": "fk6fouc",
162
- "Be2twd7": "fy9rknc",
163
- "Bhrd7zp": "figsok6",
164
- "Bg96gwp": "fwrc4pm"
150
+ small: {
151
+ Bqenvij: "frvgh55",
152
+ uwmqm3: ["f1xile11", "fqznh8f"],
153
+ z189sj: ["fiqd4sw", "f11fkzut"],
154
+ Bahqtrf: "fk6fouc",
155
+ Be2twd7: "fy9rknc",
156
+ Bhrd7zp: "figsok6",
157
+ Bg96gwp: "fwrc4pm"
165
158
  },
166
- "medium": {
167
- "Bqenvij": "f1d2rq10",
168
- "uwmqm3": ["f1e60jzv", "f135dnwl"],
169
- "z189sj": ["f154vowv", "flqamny"],
170
- "Bahqtrf": "fk6fouc",
171
- "Be2twd7": "fkhj508",
172
- "Bhrd7zp": "figsok6",
173
- "Bg96gwp": "f1i3iumi"
159
+ medium: {
160
+ Bqenvij: "f1d2rq10",
161
+ uwmqm3: ["f1e60jzv", "f135dnwl"],
162
+ z189sj: ["f154vowv", "flqamny"],
163
+ Bahqtrf: "fk6fouc",
164
+ Be2twd7: "fkhj508",
165
+ Bhrd7zp: "figsok6",
166
+ Bg96gwp: "f1i3iumi"
174
167
  },
175
- "large": {
176
- "Bqenvij": "fbhnoac",
177
- "uwmqm3": ["fnphzt9", "flt1dlf"],
178
- "z189sj": ["f1xi5ia2", "f1xi1l47"],
179
- "Bahqtrf": "fk6fouc",
180
- "Be2twd7": "fod5ikn",
181
- "Bhrd7zp": "figsok6",
182
- "Bg96gwp": "faaz57k"
168
+ large: {
169
+ Bqenvij: "fbhnoac",
170
+ uwmqm3: ["fnphzt9", "flt1dlf"],
171
+ z189sj: ["f1xi5ia2", "f1xi1l47"],
172
+ Bahqtrf: "fk6fouc",
173
+ Be2twd7: "fod5ikn",
174
+ Bhrd7zp: "figsok6",
175
+ Bg96gwp: "faaz57k"
183
176
  },
184
- "outline": {
185
- "De3pzq": "fxugw4r",
186
- "B4j52fo": "f5ogflp",
187
- "Bekrc4i": ["f1hqa2wf", "finvdd3"],
188
- "Bn0qgzm": "f1f09k3d",
189
- "ibv6hh": ["finvdd3", "f1hqa2wf"],
190
- "icvyot": "fzkkow9",
191
- "vrafjx": ["fcdblym", "fjik90z"],
192
- "oivjwe": "fg706s2",
193
- "wvpqe5": ["fjik90z", "fcdblym"],
194
- "g2u3we": "fj3muxo",
195
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
196
- "B9xav0g": "f1c1zstj",
197
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
198
- "Bgoe8wy": "fvcxoqz",
199
- "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
200
- "oetu4i": "flmw63s",
201
- "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
202
- "B6oc9vd": "fvs00aa",
203
- "ak43y8": ["f1assf6x", "f4ruux4"],
204
- "wmxk5l": "fqhmt4z",
205
- "B50zh58": ["f4ruux4", "f1assf6x"]
177
+ outline: {
178
+ De3pzq: "fxugw4r",
179
+ B4j52fo: "f5ogflp",
180
+ Bekrc4i: ["f1hqa2wf", "finvdd3"],
181
+ Bn0qgzm: "f1f09k3d",
182
+ ibv6hh: ["finvdd3", "f1hqa2wf"],
183
+ icvyot: "fzkkow9",
184
+ vrafjx: ["fcdblym", "fjik90z"],
185
+ oivjwe: "fg706s2",
186
+ wvpqe5: ["fjik90z", "fcdblym"],
187
+ g2u3we: "fj3muxo",
188
+ h3c5rm: ["f1akhkt", "f1lxtadh"],
189
+ B9xav0g: "f1c1zstj",
190
+ zhjwy3: ["f1lxtadh", "f1akhkt"],
191
+ Bgoe8wy: "fvcxoqz",
192
+ Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
193
+ oetu4i: "flmw63s",
194
+ gg5e9n: ["f1m52nbi", "f1ub3y4t"],
195
+ B6oc9vd: "fvs00aa",
196
+ ak43y8: ["f1assf6x", "f4ruux4"],
197
+ wmxk5l: "fqhmt4z",
198
+ B50zh58: ["f4ruux4", "f1assf6x"]
206
199
  },
207
- "underline": {
208
- "De3pzq": "f1c21dwh",
209
- "Bn0qgzm": "f1f09k3d",
210
- "oivjwe": "fg706s2",
211
- "B9xav0g": "f1c1zstj",
212
- "Bbmb7ep": ["f1krrbdw", "f1deotkl"],
213
- "Beyfa6y": ["f1deotkl", "f1krrbdw"],
214
- "B7oj6ja": ["f10ostut", "f1ozlkrg"],
215
- "Btl43ni": ["f1ozlkrg", "f10ostut"]
200
+ underline: {
201
+ De3pzq: "f1c21dwh",
202
+ Bn0qgzm: "f1f09k3d",
203
+ oivjwe: "fg706s2",
204
+ B9xav0g: "f1c1zstj",
205
+ Bbmb7ep: ["f1krrbdw", "f1deotkl"],
206
+ Beyfa6y: ["f1deotkl", "f1krrbdw"],
207
+ B7oj6ja: ["f10ostut", "f1ozlkrg"],
208
+ Btl43ni: ["f1ozlkrg", "f10ostut"]
216
209
  },
217
210
  "filled-lighter": {
218
- "De3pzq": "fxugw4r"
211
+ De3pzq: "fxugw4r"
219
212
  },
220
213
  "filled-darker": {
221
- "De3pzq": "f16xq7d1"
214
+ De3pzq: "f16xq7d1"
222
215
  },
223
- "invalid": {
224
- "tvckwq": "fs4k3qj",
225
- "gk2u95": ["fcee079", "fmyw78r"],
226
- "hhx65j": "f1fgmyf4",
227
- "Bxowmz0": ["fmyw78r", "fcee079"]
216
+ invalid: {
217
+ tvckwq: "fs4k3qj",
218
+ gk2u95: ["fcee079", "fmyw78r"],
219
+ hhx65j: "f1fgmyf4",
220
+ Bxowmz0: ["fmyw78r", "fcee079"]
228
221
  },
229
- "invalidUnderline": {
230
- "hhx65j": "f1fgmyf4"
222
+ invalidUnderline: {
223
+ hhx65j: "f1fgmyf4"
231
224
  }
232
225
  }, {
233
- "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1k6fduh{cursor:pointer;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f6dzj5z{max-width:100%;}", ".f1qch9an{padding-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".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);}", ".fdrzuqr{cursor:not-allowed;}", ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}", ".frvgh55{height:24px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".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);}", ".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);}"],
234
- "f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
235
- "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
236
- "m": "(forced-colors: active)"
226
+ d: [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1k6fduh{cursor:pointer;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f6dzj5z{max-width:100%;}", ".f1qch9an{padding-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".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);}", ".fdrzuqr{cursor:not-allowed;}", ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}", ".frvgh55{height:24px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".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);}", ".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);}"],
227
+ f: [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
228
+ m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
229
+ m: "(forced-colors: active)"
237
230
  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
238
- "m": "(forced-colors: active)"
231
+ m: "(forced-colors: active)"
239
232
  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
240
- "m": "(forced-colors: active)"
233
+ m: "(forced-colors: active)"
241
234
  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
242
- "m": "(forced-colors: active)"
235
+ m: "(forced-colors: active)"
243
236
  }]],
244
- "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);}"],
245
- "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);}"]
237
+ 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);}"],
238
+ 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);}"]
246
239
  });
247
-
248
240
  const useIconStyles = /*#__PURE__*/react_1.__styles({
249
- "icon": {
250
- "B7ck84d": "f1ewtqcl",
251
- "sj55zd": "fxkbij4",
252
- "mc9l5x": "ftgm304",
253
- "qhf8xq": "f1euv43f",
254
- "Bkecrkj": "f1aehjj5",
255
- "Bo70h7d": "fvc9v3g"
241
+ icon: {
242
+ B7ck84d: "f1ewtqcl",
243
+ sj55zd: "fxkbij4",
244
+ mc9l5x: "ftgm304",
245
+ qhf8xq: "f1euv43f",
246
+ Bkecrkj: "f1aehjj5",
247
+ Bo70h7d: "fvc9v3g"
256
248
  },
257
- "disabled": {
258
- "sj55zd": "f1s2aq7o",
259
- "Bbusuzp": "f1dcs8yz"
249
+ disabled: {
250
+ sj55zd: "f1s2aq7o",
251
+ Bbusuzp: "f1dcs8yz"
260
252
  },
261
- "small": {
262
- "Be2twd7": "f4ybsrx",
263
- "Bqenvij": "fd461yt",
264
- "j35jbq": ["f13lnp83", "f1i5nn0v"],
265
- "a9b677": "fjw5fx7"
253
+ small: {
254
+ Be2twd7: "f4ybsrx",
255
+ Bqenvij: "fd461yt",
256
+ j35jbq: ["f13lnp83", "f1i5nn0v"],
257
+ a9b677: "fjw5fx7"
266
258
  },
267
- "medium": {
268
- "Be2twd7": "fe5j1ua",
269
- "Bqenvij": "fjamq6b",
270
- "j35jbq": ["fnyteob", "f1enpzzf"],
271
- "a9b677": "f64fuq3"
259
+ medium: {
260
+ Be2twd7: "fe5j1ua",
261
+ Bqenvij: "fjamq6b",
262
+ j35jbq: ["fnyteob", "f1enpzzf"],
263
+ a9b677: "f64fuq3"
272
264
  },
273
- "large": {
274
- "Be2twd7": "f1rt2boy",
275
- "Bqenvij": "frvgh55",
276
- "j35jbq": ["f8b87gs", "fedtrts"],
277
- "a9b677": "fq4mcun"
265
+ large: {
266
+ Be2twd7: "f1rt2boy",
267
+ Bqenvij: "frvgh55",
268
+ j35jbq: ["f8b87gs", "fedtrts"],
269
+ a9b677: "fq4mcun"
278
270
  }
279
271
  }, {
280
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
281
- "m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
282
- "m": "(forced-colors: active)"
272
+ d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
273
+ m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
274
+ m: "(forced-colors: active)"
283
275
  }]]
284
276
  });
285
277
  /**
286
278
  * Apply styling to the Select slots based on the state
287
279
  */
288
-
289
-
290
280
  const useSelectStyles_unstable = state => {
291
281
  const {
292
282
  size,
@@ -299,13 +289,10 @@ const useSelectStyles_unstable = state => {
299
289
  const selectStyles = useSelectStyles();
300
290
  state.root.className = react_1.mergeClasses(exports.selectClassNames.root, rootStyles.base, state.root.className);
301
291
  state.select.className = react_1.mergeClasses(exports.selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
302
-
303
292
  if (state.icon) {
304
293
  state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
305
294
  }
306
-
307
295
  return state;
308
296
  };
309
-
310
297
  exports.useSelectStyles_unstable = useSelectStyles_unstable;
311
298
  //# sourceMappingURL=useSelectStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-select/src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '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\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 },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...typographyStyles.body2,\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', '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('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"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","names":["exports","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","react_theme_1","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","react_1","useSelectStyles","useIconStyles","useSelectStyles_unstable","state","size","appearance","disabled","invalid","iconStyles","rootStyles","selectStyles","className","base","invalidUnderline","disabledUnderline"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/useSelectStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '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\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 },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...typographyStyles.body2,\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', '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('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.SelectField = exports.selectFieldClassNames = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
11
-
12
9
  const Select_1 = /*#__PURE__*/require("../../Select");
13
-
14
10
  exports.selectFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('SelectField');
15
11
  exports.SelectField = /*#__PURE__*/React.forwardRef((props, ref) => {
16
12
  const state = react_field_1.useField_unstable(props, ref, {
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,QAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,gBAAwB,aAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,QAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select } from '../../Select';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA;AAIaA,6BAAqB,gBAAGC,gCAAkB,CAAC,aAAa,CAAC;AAEzDD,mBAAW,gBAA0CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGL,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAAEE,SAAS,EAAEC,eAAM;IAAEC,UAAU,EAAET;EAAqB,CAAE,CAAC;EACrGC,qCAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOL,kCAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFN,mBAAW,CAACU,WAAW,GAAG,aAAa","names":["exports","react_field_1","React","forwardRef","props","ref","state","component","Select_1","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select } from '../../Select';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"]}
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./SelectField"), exports);
10
8
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-select/src/components/SelectField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './SelectField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/SelectField/index.ts"],"sourcesContent":["export * from './SelectField';\n"]}