@react-spectrum/s2 3.0.0-nightly-e7053dd8f-250108 → 3.0.0-nightly-e4497fdb6-250110
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion.cjs +3 -3
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +3 -3
- package/dist/ActionBar.cjs +32 -32
- package/dist/ActionBar.css +34 -34
- package/dist/ActionBar.mjs +32 -32
- package/dist/ActionButton.cjs +61 -61
- package/dist/ActionButton.css +57 -57
- package/dist/ActionButton.mjs +61 -61
- package/dist/ActionButtonGroup.cjs +4 -4
- package/dist/ActionButtonGroup.css +3 -3
- package/dist/ActionButtonGroup.mjs +4 -4
- package/dist/Avatar.cjs +10 -10
- package/dist/Avatar.css +11 -11
- package/dist/Avatar.mjs +10 -10
- package/dist/AvatarGroup.cjs +97 -97
- package/dist/AvatarGroup.css +31 -31
- package/dist/AvatarGroup.mjs +97 -97
- package/dist/Badge.cjs +31 -31
- package/dist/Badge.css +33 -33
- package/dist/Badge.mjs +31 -31
- package/dist/Breadcrumbs.cjs +83 -82
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +66 -60
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +83 -82
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +179 -144
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +167 -86
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +180 -145
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +15 -15
- package/dist/ButtonGroup.css +11 -11
- package/dist/ButtonGroup.mjs +15 -15
- package/dist/Card.cjs +163 -163
- package/dist/Card.css +118 -118
- package/dist/Card.mjs +163 -163
- package/dist/CardView.cjs +13 -13
- package/dist/CardView.css +14 -14
- package/dist/CardView.mjs +13 -13
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +46 -46
- package/dist/Checkbox.css +44 -44
- package/dist/Checkbox.mjs +46 -46
- package/dist/CheckboxGroup.cjs +39 -39
- package/dist/CheckboxGroup.css +32 -32
- package/dist/CheckboxGroup.mjs +39 -39
- package/dist/ClearButton.cjs +5 -5
- package/dist/ClearButton.css +5 -5
- package/dist/ClearButton.mjs +5 -5
- package/dist/CloseButton.cjs +17 -15
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +24 -16
- package/dist/CloseButton.css.map +1 -1
- package/dist/CloseButton.mjs +17 -15
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +9 -9
- package/dist/ColorArea.css +9 -9
- package/dist/ColorArea.mjs +9 -9
- package/dist/ColorField.cjs +29 -29
- package/dist/ColorField.css +24 -24
- package/dist/ColorField.mjs +29 -29
- package/dist/ColorHandle.cjs +9 -9
- package/dist/ColorHandle.css +16 -16
- package/dist/ColorHandle.mjs +9 -9
- package/dist/ColorSlider.cjs +40 -40
- package/dist/ColorSlider.css +42 -42
- package/dist/ColorSlider.mjs +40 -40
- package/dist/ColorSwatch.cjs +6 -6
- package/dist/ColorSwatch.css +14 -14
- package/dist/ColorSwatch.mjs +6 -6
- package/dist/ColorSwatchPicker.cjs +12 -12
- package/dist/ColorSwatchPicker.css +32 -32
- package/dist/ColorSwatchPicker.mjs +12 -12
- package/dist/ColorWheel.cjs +14 -14
- package/dist/ColorWheel.css +14 -14
- package/dist/ColorWheel.mjs +14 -14
- package/dist/ComboBox.cjs +54 -51
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +48 -48
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +54 -51
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +23 -23
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +8 -8
- package/dist/CustomDialog.css +9 -9
- package/dist/CustomDialog.mjs +8 -8
- package/dist/Dialog.cjs +10 -10
- package/dist/Dialog.css +39 -39
- package/dist/Dialog.mjs +10 -10
- package/dist/Disclosure.cjs +53 -53
- package/dist/Disclosure.css +48 -48
- package/dist/Disclosure.mjs +53 -53
- package/dist/Divider.cjs +5 -5
- package/dist/Divider.css +5 -5
- package/dist/Divider.mjs +5 -5
- package/dist/DropZone.cjs +24 -24
- package/dist/DropZone.css +24 -24
- package/dist/DropZone.mjs +24 -24
- package/dist/Field.cjs +107 -107
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +69 -69
- package/dist/Field.mjs +107 -107
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +4 -4
- package/dist/Form.css +3 -3
- package/dist/Form.mjs +4 -4
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +54 -54
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +126 -126
- package/dist/IllustratedMessage.css +58 -58
- package/dist/IllustratedMessage.mjs +126 -126
- package/dist/Image.cjs +10 -10
- package/dist/Image.css +11 -11
- package/dist/Image.mjs +10 -10
- package/dist/InlineAlert.cjs +50 -50
- package/dist/InlineAlert.css +44 -44
- package/dist/InlineAlert.mjs +50 -50
- package/dist/Link.cjs +27 -27
- package/dist/Link.css +28 -28
- package/dist/Link.mjs +27 -27
- package/dist/Menu.cjs +292 -221
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +115 -113
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +292 -221
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +51 -51
- package/dist/Meter.css +51 -51
- package/dist/Meter.mjs +51 -51
- package/dist/Modal.cjs +37 -37
- package/dist/Modal.css +35 -35
- package/dist/Modal.mjs +37 -37
- package/dist/NumberField.cjs +60 -60
- package/dist/NumberField.css +66 -66
- package/dist/NumberField.mjs +60 -60
- package/dist/Picker.cjs +117 -114
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +80 -80
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +117 -114
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +40 -40
- package/dist/Popover.css +37 -37
- package/dist/Popover.mjs +40 -40
- package/dist/ProgressBar.cjs +63 -63
- package/dist/ProgressBar.css +61 -61
- package/dist/ProgressBar.mjs +63 -63
- package/dist/ProgressCircle.cjs +3 -3
- package/dist/ProgressCircle.css +2 -2
- package/dist/ProgressCircle.mjs +3 -3
- package/dist/Provider.cjs +4 -4
- package/dist/Provider.css +5 -5
- package/dist/Provider.mjs +4 -4
- package/dist/Radio.cjs +46 -46
- package/dist/Radio.css +44 -44
- package/dist/Radio.mjs +46 -46
- package/dist/RadioGroup.cjs +37 -37
- package/dist/RadioGroup.css +32 -32
- package/dist/RadioGroup.mjs +37 -37
- package/dist/SearchField.cjs +31 -31
- package/dist/SearchField.css +29 -29
- package/dist/SearchField.mjs +31 -31
- package/dist/SegmentedControl.cjs +54 -54
- package/dist/SegmentedControl.css +55 -55
- package/dist/SegmentedControl.mjs +54 -54
- package/dist/Slider.cjs +101 -101
- package/dist/Slider.css +82 -82
- package/dist/Slider.mjs +101 -101
- package/dist/StatusLight.cjs +26 -26
- package/dist/StatusLight.css +26 -26
- package/dist/StatusLight.mjs +26 -26
- package/dist/Switch.cjs +47 -47
- package/dist/Switch.css +42 -42
- package/dist/Switch.mjs +47 -47
- package/dist/TableView.cjs +137 -137
- package/dist/TableView.css +76 -76
- package/dist/TableView.mjs +137 -137
- package/dist/Tabs.cjs +60 -60
- package/dist/Tabs.css +53 -53
- package/dist/Tabs.mjs +60 -60
- package/dist/TabsPicker.cjs +69 -69
- package/dist/TabsPicker.css +62 -62
- package/dist/TabsPicker.mjs +69 -69
- package/dist/TagGroup.cjs +108 -108
- package/dist/TagGroup.css +85 -85
- package/dist/TagGroup.mjs +108 -108
- package/dist/TextField.cjs +36 -36
- package/dist/TextField.css +33 -33
- package/dist/TextField.mjs +36 -36
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +7 -7
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +32 -32
- package/dist/Tooltip.css +34 -34
- package/dist/Tooltip.mjs +32 -32
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.css +5 -5
- package/icons/Skeleton.mjs +2 -2
- package/package.json +19 -19
- package/src/Button.tsx +107 -75
- package/src/CloseButton.tsx +4 -0
- package/src/ComboBox.tsx +2 -1
- package/src/Menu.tsx +40 -17
- package/src/Picker.tsx +2 -1
- package/style/dist/spectrum-theme.cjs +54 -5
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +54 -5
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/style-macro.cjs +1 -1
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +1 -1
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/dist/types.d.ts +10 -3
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +66 -7
- package/style/style-macro.ts +3 -3
- package/style/types.ts +1 -1
package/dist/Picker.mjs
CHANGED
|
@@ -51,57 +51,57 @@ function $parcel$interopDefault(a) {
|
|
|
51
51
|
const $b41c15d27fbaff7d$export$b72b8dade9393cd5 = /*#__PURE__*/ (0, $c77I5$createContext)(null);
|
|
52
52
|
const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
|
|
53
53
|
let rules = " .";
|
|
54
|
-
if (props.isQuiet) rules += '
|
|
55
|
-
else if (props.isFocusVisible) rules += '
|
|
56
|
-
else rules += '
|
|
54
|
+
if (props.isQuiet) rules += ' _Ma';
|
|
55
|
+
else if (props.isFocusVisible) rules += ' _Mb';
|
|
56
|
+
else rules += ' _Ma';
|
|
57
57
|
rules += ' da_____M';
|
|
58
58
|
rules += ' dx';
|
|
59
|
-
rules += '
|
|
60
|
-
rules += '
|
|
61
|
-
rules += '
|
|
62
|
-
rules += '
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
59
|
+
rules += ' _Oc';
|
|
60
|
+
rules += ' _N-3t1z';
|
|
61
|
+
rules += ' __b-g2ozi1';
|
|
62
|
+
rules += ' __c-g2ozi1';
|
|
63
|
+
rules += ' __d-g2ozi1';
|
|
64
|
+
rules += ' __e-g2ozi1';
|
|
65
65
|
if (props.size === "XL") rules += ' qj';
|
|
66
66
|
else if (props.size === "L") rules += ' qi';
|
|
67
67
|
else if (props.size === "S") rules += ' qh';
|
|
68
68
|
else if (props.size === "XS") rules += ' qg';
|
|
69
69
|
else rules += ' qf';
|
|
70
|
-
if (props.isQuiet) rules += '
|
|
71
|
-
else rules += '
|
|
70
|
+
if (props.isQuiet) rules += ' __na';
|
|
71
|
+
else rules += ' __n-1s8glxue';
|
|
72
72
|
if (props.size === "XL") rules += ' -usygro_l-____g';
|
|
73
73
|
else if (props.size === "L") rules += ' -usygro_l-___0';
|
|
74
74
|
else if (props.size === "S") rules += ' -usygro_l-___u';
|
|
75
75
|
else rules += ' -usygro_l-___K';
|
|
76
76
|
rules += ' m-rwozxi';
|
|
77
|
-
rules += '
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
83
|
-
rules += '
|
|
84
|
-
rules += '
|
|
85
|
-
rules += '
|
|
77
|
+
rules += ' Vc';
|
|
78
|
+
rules += ' _d-bc1l9oh';
|
|
79
|
+
rules += ' _d-1uotwbwg';
|
|
80
|
+
rules += ' _d-eo0c6sf';
|
|
81
|
+
rules += ' _d-enzzrge';
|
|
82
|
+
rules += ' _d-enzykdd';
|
|
83
|
+
rules += ' _d-enzwzjc';
|
|
84
|
+
rules += ' _d-enzrfpb';
|
|
85
|
+
rules += ' _da';
|
|
86
86
|
if (props.size === "XL") {
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
87
|
+
rules += ' _ebj';
|
|
88
|
+
rules += ' _ei';
|
|
89
89
|
} else if (props.size === "L") {
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
90
|
+
rules += ' _ebh';
|
|
91
|
+
rules += ' _eg';
|
|
92
92
|
} else if (props.size === "S") {
|
|
93
|
-
rules += '
|
|
94
|
-
rules += '
|
|
93
|
+
rules += ' _ebd';
|
|
94
|
+
rules += ' _ec';
|
|
95
95
|
} else if (props.size === "XS") {
|
|
96
|
-
rules += '
|
|
97
|
-
rules += '
|
|
96
|
+
rules += ' _ebb';
|
|
97
|
+
rules += ' _ea';
|
|
98
98
|
} else {
|
|
99
|
-
rules += '
|
|
100
|
-
rules += '
|
|
99
|
+
rules += ' _ebf';
|
|
100
|
+
rules += ' _ee';
|
|
101
101
|
}
|
|
102
|
-
rules += '
|
|
103
|
-
rules += '
|
|
104
|
-
rules += '
|
|
102
|
+
rules += ' _fb';
|
|
103
|
+
rules += ' _g-1x99dlob';
|
|
104
|
+
rules += ' _ga';
|
|
105
105
|
if (props.isDisabled) rules += ' aj';
|
|
106
106
|
else {
|
|
107
107
|
if (props.isPressed) rules += ' ao';
|
|
@@ -109,21 +109,21 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
|
|
|
109
109
|
else if (props.isHovered) rules += ' ao';
|
|
110
110
|
else rules += ' an';
|
|
111
111
|
}
|
|
112
|
-
rules += '
|
|
113
|
-
rules += '
|
|
112
|
+
rules += ' _0d';
|
|
113
|
+
rules += ' _ka';
|
|
114
114
|
rules += ' waa';
|
|
115
115
|
rules += ' wf';
|
|
116
116
|
if (props.isDisabled) rules += ' ca_____O';
|
|
117
117
|
else rules += ' ca_____K';
|
|
118
|
-
rules += ' _vh';
|
|
119
118
|
rules += ' _wh';
|
|
120
119
|
rules += ' _xh';
|
|
121
120
|
rules += ' _yh';
|
|
122
|
-
rules += '
|
|
121
|
+
rules += ' _zh';
|
|
122
|
+
rules += ' _2c';
|
|
123
123
|
rules += ' k-375toq';
|
|
124
|
-
rules += '
|
|
125
|
-
rules += '
|
|
126
|
-
rules += '
|
|
124
|
+
rules += ' _Pa';
|
|
125
|
+
rules += ' _R-375x7f';
|
|
126
|
+
rules += ' _Sa';
|
|
127
127
|
if (props.isQuiet) {
|
|
128
128
|
rules += ' jbH';
|
|
129
129
|
rules += ' jG';
|
|
@@ -140,7 +140,7 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
|
|
|
140
140
|
else rules += ' bg';
|
|
141
141
|
}
|
|
142
142
|
if (props.isQuiet) rules += ' rd';
|
|
143
|
-
rules += '
|
|
143
|
+
rules += ' __S-yksgrp';
|
|
144
144
|
if (props.isQuiet) rules += ' -_375tnm_C-a';
|
|
145
145
|
else rules += ' -_375tnm_C-I';
|
|
146
146
|
if (props.isQuiet) rules += ' -_375tnn_D-a';
|
|
@@ -152,61 +152,61 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
|
|
|
152
152
|
else rules += ' -_375toq_k-f';
|
|
153
153
|
return rules;
|
|
154
154
|
};
|
|
155
|
-
const $b41c15d27fbaff7d$var$quietFocusLine = " . lb k-375zlr
|
|
155
|
+
const $b41c15d27fbaff7d$var$quietFocusLine = " . lb k-375zlr Va _aa _wf _xf _yf _zf bx ba_____M";
|
|
156
156
|
let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
|
|
157
157
|
let rules = " .";
|
|
158
|
-
rules += '
|
|
159
|
-
rules += '
|
|
160
|
-
if (props.size === "XL") rules += '
|
|
161
|
-
else if (props.size === "L") rules += '
|
|
162
|
-
else if (props.size === "M") rules += '
|
|
163
|
-
else if (props.size === "S") rules += '
|
|
164
|
-
rules += '
|
|
158
|
+
rules += ' _Ma';
|
|
159
|
+
rules += ' _0f';
|
|
160
|
+
if (props.size === "XL") rules += ' __i-14g31og';
|
|
161
|
+
else if (props.size === "L") rules += ' __i-1pqbi84';
|
|
162
|
+
else if (props.size === "M") rules += ' __i-n6rb9a';
|
|
163
|
+
else if (props.size === "S") rules += ' __i-iov3cy';
|
|
164
|
+
rules += ' __oa';
|
|
165
165
|
rules += ' p-17zqamw';
|
|
166
|
-
rules += ' __va';
|
|
167
166
|
rules += ' __wa';
|
|
167
|
+
rules += ' __xa';
|
|
168
168
|
rules += ' Ed';
|
|
169
169
|
rules += ' Fd';
|
|
170
170
|
rules += ' Cd';
|
|
171
171
|
rules += ' Dd';
|
|
172
|
-
rules += '
|
|
173
|
-
rules += '
|
|
174
|
-
rules += '
|
|
175
|
-
rules += '
|
|
176
|
-
rules += '
|
|
177
|
-
rules += '
|
|
178
|
-
rules += '
|
|
179
|
-
rules += '
|
|
172
|
+
rules += ' _d-bc1l9oh';
|
|
173
|
+
rules += ' _d-1uotwbwg';
|
|
174
|
+
rules += ' _d-eo0c6sf';
|
|
175
|
+
rules += ' _d-enzzrge';
|
|
176
|
+
rules += ' _d-enzykdd';
|
|
177
|
+
rules += ' _d-enzwzjc';
|
|
178
|
+
rules += ' _d-enzrfpb';
|
|
179
|
+
rules += ' _da';
|
|
180
180
|
if (props.size === "XL") {
|
|
181
|
-
rules += '
|
|
182
|
-
rules += '
|
|
181
|
+
rules += ' _ebj';
|
|
182
|
+
rules += ' _ei';
|
|
183
183
|
} else if (props.size === "L") {
|
|
184
|
-
rules += '
|
|
185
|
-
rules += '
|
|
184
|
+
rules += ' _ebh';
|
|
185
|
+
rules += ' _eg';
|
|
186
186
|
} else if (props.size === "S") {
|
|
187
|
-
rules += '
|
|
188
|
-
rules += '
|
|
187
|
+
rules += ' _ebd';
|
|
188
|
+
rules += ' _ec';
|
|
189
189
|
} else if (props.size === "XS") {
|
|
190
|
-
rules += '
|
|
191
|
-
rules += '
|
|
190
|
+
rules += ' _ebb';
|
|
191
|
+
rules += ' _ea';
|
|
192
192
|
} else {
|
|
193
|
-
rules += '
|
|
194
|
-
rules += '
|
|
193
|
+
rules += ' _ebf';
|
|
194
|
+
rules += ' _ee';
|
|
195
195
|
}
|
|
196
196
|
return rules;
|
|
197
197
|
};
|
|
198
198
|
const $b41c15d27fbaff7d$var$invalidBorder = function anonymous(props) {
|
|
199
199
|
let rules = " .";
|
|
200
|
-
rules += '
|
|
201
|
-
rules += ' Xa';
|
|
200
|
+
rules += ' Va';
|
|
202
201
|
rules += ' Ya';
|
|
203
202
|
rules += ' Za';
|
|
204
203
|
rules += ' _aa';
|
|
205
|
-
rules += '
|
|
206
|
-
rules += '
|
|
204
|
+
rules += ' _ba';
|
|
205
|
+
rules += ' __Ca';
|
|
207
206
|
rules += ' _wh';
|
|
208
207
|
rules += ' _xh';
|
|
209
208
|
rules += ' _yh';
|
|
209
|
+
rules += ' _zh';
|
|
210
210
|
rules += ' wa';
|
|
211
211
|
rules += ' uc';
|
|
212
212
|
rules += ' vc';
|
|
@@ -216,24 +216,24 @@ const $b41c15d27fbaff7d$var$invalidBorder = function anonymous(props) {
|
|
|
216
216
|
else if (props.isFocusVisible) rules += ' cP';
|
|
217
217
|
else if (props.isHovered) rules += ' cP';
|
|
218
218
|
else rules += ' cO';
|
|
219
|
-
rules += '
|
|
220
|
-
rules += '
|
|
221
|
-
rules += '
|
|
219
|
+
rules += ' _Pa';
|
|
220
|
+
rules += ' _R-375x7f';
|
|
221
|
+
rules += ' _Sa';
|
|
222
222
|
return rules;
|
|
223
223
|
};
|
|
224
224
|
const $b41c15d27fbaff7d$var$valueStyles = function anonymous(props) {
|
|
225
225
|
let rules = " .";
|
|
226
|
-
if (props.isQuiet) rules += '
|
|
227
|
-
else rules += '
|
|
228
|
-
rules += ' __vb';
|
|
226
|
+
if (props.isQuiet) rules += ' __a-3t1x';
|
|
227
|
+
else rules += ' __a-3t1y';
|
|
229
228
|
rules += ' __wb';
|
|
230
|
-
rules += '
|
|
231
|
-
rules += '
|
|
232
|
-
rules += '
|
|
233
|
-
rules += '
|
|
229
|
+
rules += ' __xb';
|
|
230
|
+
rules += ' _na';
|
|
231
|
+
rules += ' _qb';
|
|
232
|
+
rules += ' _0d';
|
|
233
|
+
rules += ' _2c';
|
|
234
234
|
return rules;
|
|
235
235
|
};
|
|
236
|
-
const $b41c15d27fbaff7d$var$iconStyles = " .
|
|
236
|
+
const $b41c15d27fbaff7d$var$iconStyles = " . _9-3t1x R-3hn0u -rwx0fg_e-b";
|
|
237
237
|
let $b41c15d27fbaff7d$var$InternalPickerContext = /*#__PURE__*/ (0, $c77I5$createContext)({
|
|
238
238
|
size: 'M'
|
|
239
239
|
});
|
|
@@ -257,51 +257,51 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
|
|
|
257
257
|
style: UNSAFE_style,
|
|
258
258
|
className: UNSAFE_className + function anonymous(props, overrides) {
|
|
259
259
|
let rules = " .";
|
|
260
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|
|
|
260
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
|
|
261
261
|
rules += matches.join('');
|
|
262
|
-
let $__a = false;
|
|
263
262
|
let $__b = false;
|
|
263
|
+
let $__c = false;
|
|
264
264
|
for (let p of matches){
|
|
265
|
-
if (/^\s*__a/.test(p)) $__a = true;
|
|
266
265
|
if (/^\s*__b/.test(p)) $__b = true;
|
|
266
|
+
if (/^\s*__c/.test(p)) $__c = true;
|
|
267
267
|
}
|
|
268
|
-
rules += '
|
|
269
|
-
if (!$__a) {
|
|
270
|
-
if (props.isInForm) rules += ' __a-3t1y';
|
|
271
|
-
}
|
|
268
|
+
rules += ' _0f';
|
|
272
269
|
if (!$__b) {
|
|
270
|
+
if (props.isInForm) rules += ' __b-3t1y';
|
|
271
|
+
}
|
|
272
|
+
if (!$__c) {
|
|
273
273
|
if (props.isInForm) {
|
|
274
|
-
if (props.labelPosition === "side") rules += '
|
|
274
|
+
if (props.labelPosition === "side") rules += ' __c-yqnebx';
|
|
275
275
|
}
|
|
276
276
|
}
|
|
277
|
-
if (props.isInForm) rules += '
|
|
277
|
+
if (props.isInForm) rules += ' __i-1a97rzt';
|
|
278
278
|
else {
|
|
279
|
-
if (props.labelPosition === "side") rules += '
|
|
280
|
-
else if (props.labelPosition === "top") rules += '
|
|
279
|
+
if (props.labelPosition === "side") rules += ' __i-ar5vcf';
|
|
280
|
+
else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
|
|
281
281
|
}
|
|
282
|
-
if (props.labelPosition === "side") rules += '
|
|
283
|
-
else if (props.labelPosition === "top") rules += '
|
|
284
|
-
if (props.labelPosition === "side") rules += '
|
|
285
|
-
else if (props.labelPosition === "top") rules += '
|
|
282
|
+
if (props.labelPosition === "side") rules += ' __j-ar5vcf';
|
|
283
|
+
else if (props.labelPosition === "top") rules += ' __j-1a6w430';
|
|
284
|
+
if (props.labelPosition === "side") rules += ' __k-18h2yqz';
|
|
285
|
+
else if (props.labelPosition === "top") rules += ' __k-1srn173';
|
|
286
286
|
if (props.size === "XL") {
|
|
287
|
-
rules += '
|
|
288
|
-
rules += '
|
|
287
|
+
rules += ' _ebj';
|
|
288
|
+
rules += ' _ei';
|
|
289
289
|
} else if (props.size === "L") {
|
|
290
|
-
rules += '
|
|
291
|
-
rules += '
|
|
290
|
+
rules += ' _ebh';
|
|
291
|
+
rules += ' _eg';
|
|
292
292
|
} else if (props.size === "S") {
|
|
293
|
-
rules += '
|
|
294
|
-
rules += '
|
|
293
|
+
rules += ' _ebd';
|
|
294
|
+
rules += ' _ec';
|
|
295
295
|
} else if (props.size === "XS") {
|
|
296
|
-
rules += '
|
|
297
|
-
rules += '
|
|
296
|
+
rules += ' _ebb';
|
|
297
|
+
rules += ' _ea';
|
|
298
298
|
} else {
|
|
299
|
-
rules += '
|
|
300
|
-
rules += '
|
|
299
|
+
rules += ' _ebf';
|
|
300
|
+
rules += ' _ee';
|
|
301
301
|
}
|
|
302
|
-
rules += '
|
|
303
|
-
rules += '
|
|
304
|
-
rules += '
|
|
302
|
+
rules += ' _2d';
|
|
303
|
+
rules += ' _g-1x99dlob';
|
|
304
|
+
rules += ' _ga';
|
|
305
305
|
if (props.size === "XL") rules += ' -aqrvqh_k-j';
|
|
306
306
|
else if (props.size === "L") rules += ' -aqrvqh_k-i';
|
|
307
307
|
else if (props.size === "S") rules += ' -aqrvqh_k-h';
|
|
@@ -309,7 +309,7 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
|
|
|
309
309
|
else rules += ' -aqrvqh_k-f';
|
|
310
310
|
rules += ' -_1inj1bc_i--prjw07';
|
|
311
311
|
rules += ' je';
|
|
312
|
-
rules += '
|
|
312
|
+
rules += ' __S-yksgrp';
|
|
313
313
|
return rules;
|
|
314
314
|
}({
|
|
315
315
|
isInForm: !!formContext,
|
|
@@ -374,7 +374,7 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
|
|
|
374
374
|
slots: {
|
|
375
375
|
description: {},
|
|
376
376
|
label: {
|
|
377
|
-
styles: " .
|
|
377
|
+
styles: " . _0a __a-3t1y __wb __xb _na _qb"
|
|
378
378
|
}
|
|
379
379
|
}
|
|
380
380
|
}
|
|
@@ -556,11 +556,14 @@ function $b41c15d27fbaff7d$var$DefaultProvider({ context: context, value: value,
|
|
|
556
556
|
});
|
|
557
557
|
}
|
|
558
558
|
function $b41c15d27fbaff7d$export$a340772aca6155cd(props) {
|
|
559
|
+
let { size: size } = (0, $c77I5$useContext)($b41c15d27fbaff7d$var$InternalPickerContext);
|
|
559
560
|
return /*#__PURE__*/ (0, $c77I5$jsxs)((0, $c77I5$Fragment), {
|
|
560
561
|
children: [
|
|
561
562
|
/*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$ListBoxSection), {
|
|
562
563
|
...props,
|
|
563
|
-
className: (0, $13afb0ea5f0ed767$export$fe2e36411d703b3d)
|
|
564
|
+
className: (0, $13afb0ea5f0ed767$export$fe2e36411d703b3d)({
|
|
565
|
+
size: size
|
|
566
|
+
}),
|
|
564
567
|
children: props.children
|
|
565
568
|
}),
|
|
566
569
|
/*#__PURE__*/ (0, $c77I5$jsx)((0, $13afb0ea5f0ed767$export$2e0a83ec2e27ecbb), {})
|
package/dist/Picker.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the picker should be displayed with a quiet style.\n * @private\n */\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the picker should be displayed with a quiet style.\n * @private\n */\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
package/dist/Popover.cjs
CHANGED
|
@@ -36,7 +36,7 @@ const $493371ef39bf7a55$var$slideRightKeyframes = "-_1s1guk8";
|
|
|
36
36
|
const $493371ef39bf7a55$var$slideLeftKeyframes = "-_1dp80kl";
|
|
37
37
|
let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
|
|
38
38
|
let rules = " .";
|
|
39
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|
|
|
39
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
|
|
40
40
|
rules += matches.join('');
|
|
41
41
|
let $l = false;
|
|
42
42
|
let $r = false;
|
|
@@ -44,19 +44,19 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
|
|
|
44
44
|
if (/^\s*l/.test(p)) $l = true;
|
|
45
45
|
if (/^\s*r/.test(p)) $r = true;
|
|
46
46
|
}
|
|
47
|
-
if (props.colorScheme === "dark") rules += '
|
|
48
|
-
else if (props.colorScheme === "light") rules += '
|
|
49
|
-
else if (props.colorScheme === "light dark") rules += '
|
|
50
|
-
else rules += '
|
|
47
|
+
if (props.colorScheme === "dark") rules += ' _Bb';
|
|
48
|
+
else if (props.colorScheme === "light") rules += ' _Ba';
|
|
49
|
+
else if (props.colorScheme === "light dark") rules += ' _Bc';
|
|
50
|
+
else rules += ' _B-10jn6wd';
|
|
51
51
|
rules += ' -_1de2x0q_b-______x';
|
|
52
52
|
rules += ' b-1de2x0q';
|
|
53
|
-
rules += ' _vd';
|
|
54
53
|
rules += ' _wd';
|
|
55
54
|
rules += ' _xd';
|
|
56
55
|
rules += ' _yd';
|
|
57
|
-
|
|
58
|
-
if (props.isArrowShown) rules += '
|
|
59
|
-
|
|
56
|
+
rules += ' _zd';
|
|
57
|
+
if (props.isArrowShown) rules += ' _vb';
|
|
58
|
+
if (props.isArrowShown) rules += ' _ud';
|
|
59
|
+
else rules += ' _ub';
|
|
60
60
|
rules += ' wa';
|
|
61
61
|
rules += ' ub';
|
|
62
62
|
rules += ' vb';
|
|
@@ -70,7 +70,7 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
|
|
|
70
70
|
else if (props.size === "S") rules += ' l_____O';
|
|
71
71
|
}
|
|
72
72
|
if (!$r) rules += ' r-rtptky';
|
|
73
|
-
rules += '
|
|
73
|
+
rules += ' __oa';
|
|
74
74
|
if (props.placement === "top") {
|
|
75
75
|
if (props.isArrowShown) rules += ' QG';
|
|
76
76
|
} else if (props.placement === "bottom") {
|
|
@@ -82,38 +82,38 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
|
|
|
82
82
|
if (props.isArrowShown) rules += ' PG';
|
|
83
83
|
}
|
|
84
84
|
if (props.isSubmenu) {
|
|
85
|
-
if (props.isExiting) rules += '
|
|
86
|
-
else if (props.isEntering) rules += '
|
|
85
|
+
if (props.isExiting) rules += ' _T-jzzex7';
|
|
86
|
+
else if (props.isEntering) rules += ' _T-jzzex7';
|
|
87
87
|
} else if (props.placement === "right") {
|
|
88
|
-
if (props.isExiting) rules += '
|
|
89
|
-
else if (props.isEntering) rules += '
|
|
88
|
+
if (props.isExiting) rules += ' _T-1t03fbb';
|
|
89
|
+
else if (props.isEntering) rules += ' _T-1t03fbb';
|
|
90
90
|
} else if (props.placement === "left") {
|
|
91
|
-
if (props.isExiting) rules += '
|
|
92
|
-
else if (props.isEntering) rules += '
|
|
91
|
+
if (props.isExiting) rules += ' _T-1oo3k7r';
|
|
92
|
+
else if (props.isEntering) rules += ' _T-1oo3k7r';
|
|
93
93
|
} else if (props.placement === "bottom") {
|
|
94
|
-
if (props.isExiting) rules += '
|
|
95
|
-
else if (props.isEntering) rules += '
|
|
94
|
+
if (props.isExiting) rules += ' _T-z116jo';
|
|
95
|
+
else if (props.isEntering) rules += ' _T-z116jo';
|
|
96
96
|
} else if (props.placement === "top") {
|
|
97
|
-
if (props.isExiting) rules += '
|
|
98
|
-
else if (props.isEntering) rules += '
|
|
97
|
+
if (props.isExiting) rules += ' _T-1x9thj4';
|
|
98
|
+
else if (props.isEntering) rules += ' _T-1x9thj4';
|
|
99
99
|
}
|
|
100
|
-
if (props.isExiting) rules += '
|
|
101
|
-
else if (props.isEntering) rules += '
|
|
102
|
-
if (props.isExiting) rules += '
|
|
103
|
-
if (props.isExiting) rules += '
|
|
104
|
-
else if (props.isEntering) rules += '
|
|
105
|
-
rules += '
|
|
106
|
-
rules += '
|
|
107
|
-
rules += '
|
|
108
|
-
rules += '
|
|
109
|
-
rules += '
|
|
110
|
-
if (props.isExiting) rules += '
|
|
100
|
+
if (props.isExiting) rules += ' _U-375xx3';
|
|
101
|
+
else if (props.isEntering) rules += ' _U-375xx3';
|
|
102
|
+
if (props.isExiting) rules += ' _Zc';
|
|
103
|
+
if (props.isExiting) rules += ' _Wb';
|
|
104
|
+
else if (props.isEntering) rules += ' _Wa';
|
|
105
|
+
rules += ' _P-19n1ox2';
|
|
106
|
+
rules += ' _R-375x7f';
|
|
107
|
+
rules += ' _Sa';
|
|
108
|
+
rules += ' __Q-19n1ox2';
|
|
109
|
+
rules += ' __Ga';
|
|
110
|
+
if (props.isExiting) rules += ' __Ca';
|
|
111
111
|
return rules;
|
|
112
112
|
};
|
|
113
113
|
// TODO: animations and real Popover Arrow
|
|
114
114
|
let $493371ef39bf7a55$var$arrow = function anonymous(props) {
|
|
115
115
|
let rules = " .";
|
|
116
|
-
rules += '
|
|
116
|
+
rules += ' _0a';
|
|
117
117
|
rules += ' e-1de2x0q';
|
|
118
118
|
if (props.placement === "right") rules += ' R-3hn0u';
|
|
119
119
|
else if (props.placement === "left") rules += ' R-375ty3';
|
|
@@ -201,15 +201,15 @@ const $493371ef39bf7a55$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $16fRD$react
|
|
|
201
201
|
});
|
|
202
202
|
const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
|
|
203
203
|
let rules = " .";
|
|
204
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|
|
|
204
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
|
|
205
205
|
rules += matches.join('');
|
|
206
|
-
let $
|
|
206
|
+
let $V = false;
|
|
207
207
|
let $l = false;
|
|
208
208
|
let $k = false;
|
|
209
209
|
let $r = false;
|
|
210
210
|
let $p = false;
|
|
211
211
|
for (let p of matches){
|
|
212
|
-
if (/^\s*
|
|
212
|
+
if (/^\s*V/.test(p)) $V = true;
|
|
213
213
|
if (/^\s*l/.test(p)) $l = true;
|
|
214
214
|
if (/^\s*k/.test(p)) $k = true;
|
|
215
215
|
if (/^\s*r/.test(p)) $r = true;
|
|
@@ -219,15 +219,15 @@ const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
|
|
|
219
219
|
rules += ' Fd';
|
|
220
220
|
rules += ' Cd';
|
|
221
221
|
rules += ' Dd';
|
|
222
|
-
rules += '
|
|
223
|
-
rules += '
|
|
224
|
-
rules += ' _v-17zqamw';
|
|
222
|
+
rules += ' __oa';
|
|
223
|
+
rules += ' _Ma';
|
|
225
224
|
rules += ' _w-17zqamw';
|
|
226
225
|
rules += ' _x-17zqamw';
|
|
227
226
|
rules += ' _y-17zqamw';
|
|
228
|
-
rules += '
|
|
227
|
+
rules += ' _z-17zqamw';
|
|
229
228
|
rules += ' __wa';
|
|
230
|
-
|
|
229
|
+
rules += ' __xa';
|
|
230
|
+
if (!$V) rules += ' Vc';
|
|
231
231
|
if (!$l) rules += ' lb';
|
|
232
232
|
if (!$k) rules += ' kb';
|
|
233
233
|
if (!$r) rules += ' r-17zqamw';
|