@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/ColorWheel.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
._N-3hmpv {
|
|
3
3
|
outline-offset: -1px;
|
|
4
4
|
}
|
|
5
5
|
|
|
@@ -7,43 +7,43 @@
|
|
|
7
7
|
background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.Va {
|
|
11
11
|
position: absolute;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.Yh {
|
|
15
15
|
top: 1.5rem;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
._ah {
|
|
19
19
|
bottom: 1.5rem;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.Wh {
|
|
23
23
|
inset-inline-start: 1.5rem;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.Xh {
|
|
27
27
|
inset-inline-end: 1.5rem;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.
|
|
30
|
+
.__Ca {
|
|
31
31
|
pointer-events: none;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
._wf {
|
|
35
35
|
border-start-start-radius: 9999px;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
._xf {
|
|
39
39
|
border-start-end-radius: 9999px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.
|
|
42
|
+
._yf {
|
|
43
43
|
border-end-start-radius: 9999px;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.
|
|
46
|
+
._zf {
|
|
47
47
|
border-end-end-radius: 9999px;
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -51,15 +51,15 @@
|
|
|
51
51
|
outline-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff1a);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
.
|
|
54
|
+
._Ob {
|
|
55
55
|
outline-width: 1px;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.
|
|
58
|
+
._Mb {
|
|
59
59
|
outline-style: solid;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
.
|
|
62
|
+
._Ma {
|
|
63
63
|
outline-style: none;
|
|
64
64
|
}
|
|
65
65
|
}
|
package/dist/ColorWheel.mjs
CHANGED
|
@@ -47,16 +47,16 @@ const $4a6afc95235907f0$export$f80663f808113381 = /*#__PURE__*/ (0, $j8ecy$forwa
|
|
|
47
47
|
}),
|
|
48
48
|
className: function anonymous(props) {
|
|
49
49
|
let rules = " .";
|
|
50
|
-
rules += ' _vf';
|
|
51
50
|
rules += ' _wf';
|
|
52
51
|
rules += ' _xf';
|
|
53
52
|
rules += ' _yf';
|
|
53
|
+
rules += ' _zf';
|
|
54
54
|
rules += ' da_____I';
|
|
55
55
|
rules += ' dp10';
|
|
56
|
-
rules += '
|
|
57
|
-
rules += '
|
|
58
|
-
if (props.isDisabled) rules += '
|
|
59
|
-
else rules += '
|
|
56
|
+
rules += ' _Ob';
|
|
57
|
+
rules += ' _N-3hmpv';
|
|
58
|
+
if (props.isDisabled) rules += ' _Ma';
|
|
59
|
+
else rules += ' _Mb';
|
|
60
60
|
if (props.isDisabled) rules += ' bg';
|
|
61
61
|
return rules;
|
|
62
62
|
}
|
|
@@ -64,21 +64,21 @@ const $4a6afc95235907f0$export$f80663f808113381 = /*#__PURE__*/ (0, $j8ecy$forwa
|
|
|
64
64
|
/*#__PURE__*/ (0, $j8ecy$jsx)("div", {
|
|
65
65
|
className: function anonymous(props) {
|
|
66
66
|
let rules = " .";
|
|
67
|
-
rules += '
|
|
68
|
-
rules += '
|
|
69
|
-
rules += '
|
|
70
|
-
rules += ' Vh';
|
|
67
|
+
rules += ' Va';
|
|
68
|
+
rules += ' Yh';
|
|
69
|
+
rules += ' _ah';
|
|
71
70
|
rules += ' Wh';
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
71
|
+
rules += ' Xh';
|
|
72
|
+
rules += ' __Ca';
|
|
74
73
|
rules += ' _wf';
|
|
75
74
|
rules += ' _xf';
|
|
76
75
|
rules += ' _yf';
|
|
76
|
+
rules += ' _zf';
|
|
77
77
|
rules += ' da_____I';
|
|
78
78
|
rules += ' dp10';
|
|
79
|
-
rules += '
|
|
80
|
-
if (props.isDisabled) rules += '
|
|
81
|
-
else rules += '
|
|
79
|
+
rules += ' _Ob';
|
|
80
|
+
if (props.isDisabled) rules += ' _Ma';
|
|
81
|
+
else rules += ' _Mb';
|
|
82
82
|
return rules;
|
|
83
83
|
}({
|
|
84
84
|
isDisabled: isDisabled
|
package/dist/ComboBox.cjs
CHANGED
|
@@ -56,16 +56,16 @@ $parcel$export(module.exports, "ComboBoxSection", () => $a2d5b35c01bebcd6$export
|
|
|
56
56
|
const $a2d5b35c01bebcd6$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $1KUtr$react.createContext)(null);
|
|
57
57
|
const $a2d5b35c01bebcd6$var$inputButton = function anonymous(props) {
|
|
58
58
|
let rules = " .";
|
|
59
|
-
rules += '
|
|
60
|
-
rules += '
|
|
61
|
-
rules += '
|
|
59
|
+
rules += ' _0d';
|
|
60
|
+
rules += ' _Ma';
|
|
61
|
+
rules += ' _kb';
|
|
62
62
|
rules += ' wf';
|
|
63
|
-
rules += ' _vi';
|
|
64
63
|
rules += ' _wi';
|
|
65
64
|
rules += ' _xi';
|
|
66
65
|
rules += ' _yi';
|
|
67
|
-
rules += '
|
|
68
|
-
rules += '
|
|
66
|
+
rules += ' _zi';
|
|
67
|
+
rules += ' _2c';
|
|
68
|
+
rules += ' _3d';
|
|
69
69
|
if (props.size === "XL") rules += ' lU';
|
|
70
70
|
else if (props.size === "L") rules += ' lM';
|
|
71
71
|
else if (props.size === "M") rules += ' lI';
|
|
@@ -75,14 +75,14 @@ const $a2d5b35c01bebcd6$var$inputButton = function anonymous(props) {
|
|
|
75
75
|
else if (props.size === "M") rules += ' kI';
|
|
76
76
|
else if (props.size === "S") rules += ' kE';
|
|
77
77
|
rules += ' yF';
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
83
|
-
rules += '
|
|
84
|
-
rules += '
|
|
85
|
-
rules += '
|
|
78
|
+
rules += ' _cb';
|
|
79
|
+
rules += ' _9-3t1x';
|
|
80
|
+
rules += ' _Pag';
|
|
81
|
+
rules += ' _Pa';
|
|
82
|
+
rules += ' _Ra-375x7f';
|
|
83
|
+
rules += ' _R-375x7f';
|
|
84
|
+
rules += ' _Saa';
|
|
85
|
+
rules += ' _Sa';
|
|
86
86
|
if (props.isDisabled) rules += ' ba_____O';
|
|
87
87
|
else if (props.isOpen) rules += ' ba_____M';
|
|
88
88
|
else if (props.isHovered) rules += ' ba_____M';
|
|
@@ -105,7 +105,7 @@ const $a2d5b35c01bebcd6$var$inputButton = function anonymous(props) {
|
|
|
105
105
|
}
|
|
106
106
|
return rules;
|
|
107
107
|
};
|
|
108
|
-
const $a2d5b35c01bebcd6$var$iconStyles = " .
|
|
108
|
+
const $a2d5b35c01bebcd6$var$iconStyles = " . _9-3t1x R-3hn0u -rwx0fg_e-b";
|
|
109
109
|
let $a2d5b35c01bebcd6$var$InternalComboboxContext = /*#__PURE__*/ (0, $1KUtr$react.createContext)({
|
|
110
110
|
size: 'M'
|
|
111
111
|
});
|
|
@@ -156,51 +156,51 @@ const $a2d5b35c01bebcd6$export$72b9695b8216309a = /*#__PURE__*/ (0, $1KUtr$react
|
|
|
156
156
|
style: UNSAFE_style,
|
|
157
157
|
className: UNSAFE_className + function anonymous(props, overrides) {
|
|
158
158
|
let rules = " .";
|
|
159
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|
|
|
159
|
+
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) || [];
|
|
160
160
|
rules += matches.join('');
|
|
161
|
-
let $__a = false;
|
|
162
161
|
let $__b = false;
|
|
162
|
+
let $__c = false;
|
|
163
163
|
for (let p of matches){
|
|
164
|
-
if (/^\s*__a/.test(p)) $__a = true;
|
|
165
164
|
if (/^\s*__b/.test(p)) $__b = true;
|
|
165
|
+
if (/^\s*__c/.test(p)) $__c = true;
|
|
166
166
|
}
|
|
167
|
-
rules += '
|
|
168
|
-
if (!$__a) {
|
|
169
|
-
if (props.isInForm) rules += ' __a-3t1y';
|
|
170
|
-
}
|
|
167
|
+
rules += ' _0f';
|
|
171
168
|
if (!$__b) {
|
|
169
|
+
if (props.isInForm) rules += ' __b-3t1y';
|
|
170
|
+
}
|
|
171
|
+
if (!$__c) {
|
|
172
172
|
if (props.isInForm) {
|
|
173
|
-
if (props.labelPosition === "side") rules += '
|
|
173
|
+
if (props.labelPosition === "side") rules += ' __c-yqnebx';
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
|
-
if (props.isInForm) rules += '
|
|
176
|
+
if (props.isInForm) rules += ' __i-1a97rzt';
|
|
177
177
|
else {
|
|
178
|
-
if (props.labelPosition === "side") rules += '
|
|
179
|
-
else if (props.labelPosition === "top") rules += '
|
|
178
|
+
if (props.labelPosition === "side") rules += ' __i-ar5vcf';
|
|
179
|
+
else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
|
|
180
180
|
}
|
|
181
|
-
if (props.labelPosition === "side") rules += '
|
|
182
|
-
else if (props.labelPosition === "top") rules += '
|
|
183
|
-
if (props.labelPosition === "side") rules += '
|
|
184
|
-
else if (props.labelPosition === "top") rules += '
|
|
181
|
+
if (props.labelPosition === "side") rules += ' __j-ar5vcf';
|
|
182
|
+
else if (props.labelPosition === "top") rules += ' __j-1a6w430';
|
|
183
|
+
if (props.labelPosition === "side") rules += ' __k-18h2yqz';
|
|
184
|
+
else if (props.labelPosition === "top") rules += ' __k-1srn173';
|
|
185
185
|
if (props.size === "XL") {
|
|
186
|
-
rules += '
|
|
187
|
-
rules += '
|
|
186
|
+
rules += ' _ebj';
|
|
187
|
+
rules += ' _ei';
|
|
188
188
|
} else if (props.size === "L") {
|
|
189
|
-
rules += '
|
|
190
|
-
rules += '
|
|
189
|
+
rules += ' _ebh';
|
|
190
|
+
rules += ' _eg';
|
|
191
191
|
} else if (props.size === "S") {
|
|
192
|
-
rules += '
|
|
193
|
-
rules += '
|
|
192
|
+
rules += ' _ebd';
|
|
193
|
+
rules += ' _ec';
|
|
194
194
|
} else if (props.size === "XS") {
|
|
195
|
-
rules += '
|
|
196
|
-
rules += '
|
|
195
|
+
rules += ' _ebb';
|
|
196
|
+
rules += ' _ea';
|
|
197
197
|
} else {
|
|
198
|
-
rules += '
|
|
199
|
-
rules += '
|
|
198
|
+
rules += ' _ebf';
|
|
199
|
+
rules += ' _ee';
|
|
200
200
|
}
|
|
201
|
-
rules += '
|
|
202
|
-
rules += '
|
|
203
|
-
rules += '
|
|
201
|
+
rules += ' _2d';
|
|
202
|
+
rules += ' _g-1x99dlob';
|
|
203
|
+
rules += ' _ga';
|
|
204
204
|
if (props.size === "XL") rules += ' -aqrvqh_k-j';
|
|
205
205
|
else if (props.size === "L") rules += ' -aqrvqh_k-i';
|
|
206
206
|
else if (props.size === "S") rules += ' -aqrvqh_k-h';
|
|
@@ -208,7 +208,7 @@ const $a2d5b35c01bebcd6$export$72b9695b8216309a = /*#__PURE__*/ (0, $1KUtr$react
|
|
|
208
208
|
else rules += ' -aqrvqh_k-f';
|
|
209
209
|
rules += ' -_1inj1bc_i--prjw07';
|
|
210
210
|
rules += ' je';
|
|
211
|
-
rules += '
|
|
211
|
+
rules += ' __S-yksgrp';
|
|
212
212
|
return rules;
|
|
213
213
|
}({
|
|
214
214
|
isInForm: !!formContext,
|
|
@@ -239,17 +239,17 @@ const $a2d5b35c01bebcd6$export$72b9695b8216309a = /*#__PURE__*/ (0, $1KUtr$react
|
|
|
239
239
|
size: size,
|
|
240
240
|
styles: function anonymous(props) {
|
|
241
241
|
let rules = " .";
|
|
242
|
-
rules += '
|
|
243
|
-
rules += '
|
|
244
|
-
rules += '
|
|
245
|
-
rules += '
|
|
242
|
+
rules += ' __b-g2ozi1';
|
|
243
|
+
rules += ' __c-g2ozi1';
|
|
244
|
+
rules += ' __d-g2ozi1';
|
|
245
|
+
rules += ' __e-g2ozi1';
|
|
246
246
|
if (props.size === "XL") rules += ' qj';
|
|
247
247
|
else if (props.size === "L") rules += ' qi';
|
|
248
248
|
else if (props.size === "S") rules += ' qh';
|
|
249
249
|
else if (props.size === "XS") rules += ' qg';
|
|
250
250
|
else rules += ' qf';
|
|
251
|
-
if (props.isQuiet) rules += '
|
|
252
|
-
else rules += '
|
|
251
|
+
if (props.isQuiet) rules += ' __na';
|
|
252
|
+
else rules += ' __n-1s8glxue';
|
|
253
253
|
if (props.size === "XL") rules += ' -usygro_l-____g';
|
|
254
254
|
else if (props.size === "L") rules += ' -usygro_l-___0';
|
|
255
255
|
else if (props.size === "S") rules += ' -usygro_l-___u';
|
|
@@ -433,11 +433,14 @@ function $a2d5b35c01bebcd6$export$b674b8ff01584ab1(props) {
|
|
|
433
433
|
});
|
|
434
434
|
}
|
|
435
435
|
function $a2d5b35c01bebcd6$export$5510125537491b61(props) {
|
|
436
|
+
let { size: size } = (0, $1KUtr$react.useContext)($a2d5b35c01bebcd6$var$InternalComboboxContext);
|
|
436
437
|
return /*#__PURE__*/ (0, $1KUtr$reactjsxruntime.jsxs)((0, $1KUtr$reactjsxruntime.Fragment), {
|
|
437
438
|
children: [
|
|
438
439
|
/*#__PURE__*/ (0, $1KUtr$reactjsxruntime.jsx)((0, $1KUtr$reactariacomponents.ListBoxSection), {
|
|
439
440
|
...props,
|
|
440
|
-
className: (0, $e741ea6b88ce4866$exports.section)
|
|
441
|
+
className: (0, $e741ea6b88ce4866$exports.section)({
|
|
442
|
+
size: size
|
|
443
|
+
}),
|
|
441
444
|
children: props.children
|
|
442
445
|
}),
|
|
443
446
|
/*#__PURE__*/ (0, $1KUtr$reactjsxruntime.jsx)((0, $e741ea6b88ce4866$exports.Divider), {})
|
package/dist/ComboBox.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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 ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, 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 {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\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\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\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 ...pickerProps\n } = props;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\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 let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\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 </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps 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 ComboBoxItem(props: ComboBoxItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\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 <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<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":"ComboBox.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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 ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, 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 {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\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\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\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 ...pickerProps\n } = props;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\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 let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\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 </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps 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 ComboBoxItem(props: ComboBoxItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\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 <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n let {size} = useContext(InternalComboboxContext);\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":"ComboBox.cjs.map"}
|