@react-spectrum/s2 3.0.0-nightly-fd7075c5f-250128 → 3.0.0-nightly-e3ed3c7f6-250130
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 +47 -47
- package/dist/ActionBar.css +51 -51
- package/dist/ActionBar.mjs +47 -47
- package/dist/ActionButton.cjs +97 -97
- package/dist/ActionButton.css +96 -96
- package/dist/ActionButton.mjs +97 -97
- package/dist/ActionButtonGroup.cjs +11 -11
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +11 -11
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Avatar.cjs +17 -17
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +17 -17
- package/dist/AvatarGroup.cjs +100 -100
- package/dist/AvatarGroup.css +34 -34
- package/dist/AvatarGroup.mjs +100 -100
- package/dist/Badge.cjs +91 -67
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +163 -91
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +91 -67
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +115 -115
- package/dist/Breadcrumbs.css +89 -89
- package/dist/Breadcrumbs.mjs +115 -115
- package/dist/Button.cjs +236 -152
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +309 -165
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +236 -152
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +19 -19
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +19 -19
- package/dist/Card.cjs +264 -261
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +210 -198
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +264 -261
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +15 -15
- package/dist/CardView.css +18 -18
- package/dist/CardView.mjs +15 -15
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +124 -73
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +201 -81
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +124 -73
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +49 -49
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +49 -49
- package/dist/ClearButton.cjs +15 -15
- package/dist/ClearButton.css +17 -17
- package/dist/ClearButton.mjs +15 -15
- package/dist/CloseButton.cjs +35 -35
- package/dist/CloseButton.css +33 -33
- package/dist/CloseButton.mjs +35 -35
- package/dist/ColorArea.cjs +22 -22
- package/dist/ColorArea.css +15 -15
- package/dist/ColorArea.mjs +22 -22
- package/dist/ColorField.cjs +38 -38
- package/dist/ColorField.css +32 -32
- package/dist/ColorField.mjs +38 -38
- package/dist/ColorHandle.cjs +27 -21
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +93 -45
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +27 -21
- package/dist/ColorHandle.mjs.map +1 -1
- package/dist/ColorSlider.cjs +52 -52
- package/dist/ColorSlider.css +51 -51
- package/dist/ColorSlider.mjs +52 -52
- package/dist/ColorSwatch.cjs +27 -24
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +41 -29
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +27 -24
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +23 -23
- package/dist/ColorSwatchPicker.css +60 -48
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +23 -23
- package/dist/ColorWheel.cjs +22 -22
- package/dist/ColorWheel.css +16 -16
- package/dist/ColorWheel.mjs +22 -22
- package/dist/ComboBox.cjs +80 -80
- package/dist/ComboBox.css +88 -88
- package/dist/ComboBox.mjs +80 -80
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +38 -38
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +31 -31
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +31 -31
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +64 -64
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +111 -108
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +124 -112
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +111 -108
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +26 -26
- package/dist/Divider.css +16 -16
- package/dist/Divider.mjs +26 -26
- package/dist/DropZone.cjs +56 -47
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +80 -56
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +56 -47
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +204 -150
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +246 -150
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +204 -150
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +10 -10
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +10 -10
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +72 -72
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +134 -134
- package/dist/IllustratedMessage.css +69 -69
- package/dist/IllustratedMessage.mjs +134 -134
- package/dist/Image.cjs +12 -12
- package/dist/Image.css +13 -13
- package/dist/Image.mjs +12 -12
- package/dist/InlineAlert.cjs +104 -77
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +149 -77
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +104 -77
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +31 -31
- package/dist/Link.css +30 -30
- package/dist/Link.mjs +31 -31
- package/dist/Menu.cjs +269 -264
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +152 -152
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +270 -265
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +85 -85
- package/dist/Meter.css +81 -81
- package/dist/Meter.mjs +85 -85
- package/dist/Modal.cjs +48 -48
- package/dist/Modal.css +46 -46
- package/dist/Modal.mjs +48 -48
- package/dist/NumberField.cjs +115 -115
- package/dist/NumberField.css +114 -114
- package/dist/NumberField.mjs +115 -115
- package/dist/Picker.cjs +193 -175
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +223 -163
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +193 -175
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +84 -78
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +89 -65
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +84 -78
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +98 -98
- package/dist/ProgressBar.css +92 -92
- package/dist/ProgressBar.mjs +98 -98
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +15 -15
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +4 -4
- package/dist/Provider.css +5 -5
- package/dist/Provider.mjs +4 -4
- package/dist/Radio.cjs +152 -80
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +240 -96
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +152 -80
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +47 -47
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +47 -47
- package/dist/SearchField.cjs +42 -42
- package/dist/SearchField.css +47 -47
- package/dist/SearchField.mjs +42 -42
- package/dist/SegmentedControl.cjs +101 -89
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +140 -92
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +101 -89
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +229 -196
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +221 -149
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +229 -196
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +56 -56
- package/dist/StatusLight.css +59 -59
- package/dist/StatusLight.mjs +56 -56
- package/dist/Switch.cjs +107 -74
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +141 -69
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +107 -74
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +280 -253
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +199 -163
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +280 -253
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +83 -83
- package/dist/Tabs.css +58 -58
- package/dist/Tabs.mjs +83 -83
- package/dist/TagGroup.cjs +148 -148
- package/dist/TagGroup.css +134 -134
- package/dist/TagGroup.mjs +148 -148
- package/dist/TextField.cjs +59 -59
- package/dist/TextField.css +62 -62
- package/dist/TextField.mjs +59 -59
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +60 -57
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +83 -71
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +60 -57
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +465 -0
- package/dist/TreeView.cjs.map +1 -0
- package/dist/TreeView.css +632 -0
- package/dist/TreeView.css.map +1 -0
- package/dist/TreeView.mjs +455 -0
- package/dist/TreeView.mjs.map +1 -0
- package/dist/main.cjs +4 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +21 -1
- 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 +20 -19
- package/src/Menu.tsx +2 -0
- package/src/TreeView.tsx +497 -0
- package/src/index.ts +2 -0
- package/style/__tests__/style-macro.test.js +18 -18
- package/style/dist/spectrum-theme.cjs +20 -10
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +20 -10
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +4 -0
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +18 -11
package/dist/Field.cjs
CHANGED
|
@@ -61,16 +61,16 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
61
61
|
return /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsxs)("div", {
|
|
62
62
|
className: function anonymous(props) {
|
|
63
63
|
let rules = " .";
|
|
64
|
-
rules += ' __b-hr3t0p';
|
|
65
|
-
rules += ' __c-hr3t0p';
|
|
66
|
-
rules += ' __d-hr3t0p';
|
|
67
64
|
rules += ' __e-hr3t0p';
|
|
68
|
-
rules += '
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
if (props.
|
|
73
|
-
else if (props.
|
|
65
|
+
rules += ' __f-hr3t0p';
|
|
66
|
+
rules += ' __g-hr3t0p';
|
|
67
|
+
rules += ' __h-hr3t0p';
|
|
68
|
+
rules += ' _3c';
|
|
69
|
+
if (props.labelAlign === "end") rules += ' _nc';
|
|
70
|
+
else if (props.labelAlign === "start") rules += ' _na';
|
|
71
|
+
if (props.labelPosition === "top") rules += ' I-1inj1bc';
|
|
72
|
+
if (props.isQuiet) rules += ' __qa';
|
|
73
|
+
else if (props.labelPosition === "top") rules += ' __qe';
|
|
74
74
|
return rules;
|
|
75
75
|
}({
|
|
76
76
|
labelAlign: labelAlign,
|
|
@@ -84,33 +84,33 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
84
84
|
style: UNSAFE_style,
|
|
85
85
|
className: UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)(function anonymous(props) {
|
|
86
86
|
let rules = " .";
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
rules += '
|
|
94
|
-
rules += '
|
|
87
|
+
rules += ' _g-bc1l9oh';
|
|
88
|
+
rules += ' _g-1uotwbwg';
|
|
89
|
+
rules += ' _g-eo0c6sf';
|
|
90
|
+
rules += ' _g-enzzrge';
|
|
91
|
+
rules += ' _g-enzykdd';
|
|
92
|
+
rules += ' _g-enzwzjc';
|
|
93
|
+
rules += ' _g-enzrfpb';
|
|
94
|
+
rules += ' _ga';
|
|
95
95
|
if (props.size === "XL") {
|
|
96
|
-
rules += '
|
|
97
|
-
rules += '
|
|
96
|
+
rules += ' _hbj';
|
|
97
|
+
rules += ' _hi';
|
|
98
98
|
} else if (props.size === "L") {
|
|
99
|
-
rules += '
|
|
100
|
-
rules += '
|
|
99
|
+
rules += ' _hbh';
|
|
100
|
+
rules += ' _hg';
|
|
101
101
|
} else if (props.size === "S") {
|
|
102
|
-
rules += '
|
|
103
|
-
rules += '
|
|
102
|
+
rules += ' _hbd';
|
|
103
|
+
rules += ' _hc';
|
|
104
104
|
} else if (props.size === "XS") {
|
|
105
|
-
rules += '
|
|
106
|
-
rules += '
|
|
105
|
+
rules += ' _hbb';
|
|
106
|
+
rules += ' _ha';
|
|
107
107
|
} else {
|
|
108
|
-
rules += '
|
|
109
|
-
rules += '
|
|
108
|
+
rules += ' _hbf';
|
|
109
|
+
rules += ' _he';
|
|
110
110
|
}
|
|
111
|
-
rules += '
|
|
112
|
-
rules += '
|
|
113
|
-
rules += '
|
|
111
|
+
rules += ' _ib';
|
|
112
|
+
rules += ' _j-1x99dlob';
|
|
113
|
+
rules += ' _ja';
|
|
114
114
|
rules += ' aa_____K';
|
|
115
115
|
if (props.isStaticColor) rules += ' a_____G';
|
|
116
116
|
else if (props.isDisabled) rules += ' aj';
|
|
@@ -120,7 +120,7 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
120
120
|
else if (props.isHovered) rules += ' an';
|
|
121
121
|
else rules += ' am';
|
|
122
122
|
}
|
|
123
|
-
rules += '
|
|
123
|
+
rules += ' __Lb';
|
|
124
124
|
return rules;
|
|
125
125
|
}({
|
|
126
126
|
labelPosition: labelPosition,
|
|
@@ -131,12 +131,12 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
131
131
|
children: [
|
|
132
132
|
props.children,
|
|
133
133
|
(isRequired || necessityIndicator === 'label') && /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsxs)("span", {
|
|
134
|
-
className: "
|
|
134
|
+
className: " _tb",
|
|
135
135
|
children: [
|
|
136
136
|
"\xa0",
|
|
137
137
|
necessityIndicator === 'icon' && /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsx)((0, $5d3efbee7071458b$exports.default), {
|
|
138
138
|
size: size === 'S' ? 'M' : size,
|
|
139
|
-
className: " -
|
|
139
|
+
className: " -rwx0fg_d-b",
|
|
140
140
|
"aria-label": includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined
|
|
141
141
|
}),
|
|
142
142
|
necessityIndicator === 'label' && /* The necessity label is hidden to screen readers if the field is required because
|
|
@@ -151,11 +151,11 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
151
151
|
]
|
|
152
152
|
}),
|
|
153
153
|
contextualHelp && /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsxs)("span", {
|
|
154
|
-
className: "
|
|
154
|
+
className: " _tb",
|
|
155
155
|
children: [
|
|
156
156
|
"\xa0",
|
|
157
157
|
/*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsx)((0, $e991cbcdf82ced71$exports.CenterBaseline), {
|
|
158
|
-
styles: "
|
|
158
|
+
styles: " _3e jo",
|
|
159
159
|
children: /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsx)((0, $bab829476f85a155$exports.ContextualHelpContext).Provider, {
|
|
160
160
|
value: {
|
|
161
161
|
id: contextualHelpId,
|
|
@@ -172,61 +172,61 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
172
172
|
});
|
|
173
173
|
const $a0b996a550bb0891$var$fieldGroupStyles = function anonymous(props) {
|
|
174
174
|
let rules = " .";
|
|
175
|
-
if (props.isFocusVisible) rules += '
|
|
176
|
-
else rules += '
|
|
177
|
-
rules += '
|
|
178
|
-
rules += '
|
|
179
|
-
rules += '
|
|
180
|
-
rules += '
|
|
181
|
-
rules += ' __b-g2ozi1';
|
|
182
|
-
rules += ' __c-g2ozi1';
|
|
183
|
-
rules += ' __d-g2ozi1';
|
|
175
|
+
if (props.isFocusVisible) rules += ' _Pb';
|
|
176
|
+
else rules += ' _Pa';
|
|
177
|
+
rules += ' ca_____M';
|
|
178
|
+
rules += ' cx';
|
|
179
|
+
rules += ' _Rc';
|
|
180
|
+
rules += ' _Q-3t1z';
|
|
184
181
|
rules += ' __e-g2ozi1';
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
else rules += '
|
|
190
|
-
if (props.
|
|
191
|
-
else rules += '
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
else
|
|
195
|
-
|
|
196
|
-
rules += '
|
|
197
|
-
rules += '
|
|
198
|
-
rules += '
|
|
199
|
-
rules += '
|
|
200
|
-
rules += '
|
|
201
|
-
rules += '
|
|
202
|
-
rules += '
|
|
203
|
-
rules += '
|
|
204
|
-
rules += '
|
|
205
|
-
rules += '
|
|
206
|
-
rules += '
|
|
207
|
-
rules += '
|
|
208
|
-
rules += '
|
|
209
|
-
rules += '
|
|
210
|
-
rules += '
|
|
182
|
+
rules += ' __f-g2ozi1';
|
|
183
|
+
rules += ' __g-g2ozi1';
|
|
184
|
+
rules += ' __h-g2ozi1';
|
|
185
|
+
if (props.size === "XL") rules += ' pj';
|
|
186
|
+
else if (props.size === "L") rules += ' pi';
|
|
187
|
+
else if (props.size === "S") rules += ' ph';
|
|
188
|
+
else if (props.size === "XS") rules += ' pg';
|
|
189
|
+
else rules += ' pf';
|
|
190
|
+
if (props.isQuiet) rules += ' __qa';
|
|
191
|
+
else rules += ' __q-1s8glxue';
|
|
192
|
+
if (props.size === "XL") rules += ' -usygro_k-____g';
|
|
193
|
+
else if (props.size === "L") rules += ' -usygro_k-___0';
|
|
194
|
+
else if (props.size === "S") rules += ' -usygro_k-___u';
|
|
195
|
+
else rules += ' -usygro_k-___K';
|
|
196
|
+
rules += ' l-rwozxi';
|
|
197
|
+
rules += ' _3d';
|
|
198
|
+
rules += ' _5c';
|
|
199
|
+
rules += ' j-375top';
|
|
200
|
+
rules += ' __ra';
|
|
201
|
+
rules += ' F-375tnp';
|
|
202
|
+
rules += ' G-375tnq';
|
|
203
|
+
rules += ' _g-bc1l9oh';
|
|
204
|
+
rules += ' _g-1uotwbwg';
|
|
205
|
+
rules += ' _g-eo0c6sf';
|
|
206
|
+
rules += ' _g-enzzrge';
|
|
207
|
+
rules += ' _g-enzykdd';
|
|
208
|
+
rules += ' _g-enzwzjc';
|
|
209
|
+
rules += ' _g-enzrfpb';
|
|
210
|
+
rules += ' _ga';
|
|
211
211
|
if (props.size === "XL") {
|
|
212
|
-
rules += '
|
|
213
|
-
rules += '
|
|
212
|
+
rules += ' _hbj';
|
|
213
|
+
rules += ' _hi';
|
|
214
214
|
} else if (props.size === "L") {
|
|
215
|
-
rules += '
|
|
216
|
-
rules += '
|
|
215
|
+
rules += ' _hbh';
|
|
216
|
+
rules += ' _hg';
|
|
217
217
|
} else if (props.size === "S") {
|
|
218
|
-
rules += '
|
|
219
|
-
rules += '
|
|
218
|
+
rules += ' _hbd';
|
|
219
|
+
rules += ' _hc';
|
|
220
220
|
} else if (props.size === "XS") {
|
|
221
|
-
rules += '
|
|
222
|
-
rules += '
|
|
221
|
+
rules += ' _hbb';
|
|
222
|
+
rules += ' _ha';
|
|
223
223
|
} else {
|
|
224
|
-
rules += '
|
|
225
|
-
rules += '
|
|
224
|
+
rules += ' _hbf';
|
|
225
|
+
rules += ' _he';
|
|
226
226
|
}
|
|
227
|
-
rules += '
|
|
228
|
-
rules += '
|
|
229
|
-
rules += '
|
|
227
|
+
rules += ' _ib';
|
|
228
|
+
rules += ' _j-1x99dlob';
|
|
229
|
+
rules += ' _ja';
|
|
230
230
|
if (props.isDisabled) rules += ' aj';
|
|
231
231
|
else {
|
|
232
232
|
if (props.isPressed) rules += ' ao';
|
|
@@ -234,48 +234,102 @@ const $a0b996a550bb0891$var$fieldGroupStyles = function anonymous(props) {
|
|
|
234
234
|
else if (props.isHovered) rules += ' ao';
|
|
235
235
|
else rules += ' an';
|
|
236
236
|
}
|
|
237
|
-
rules += ' _wh';
|
|
238
|
-
rules += ' _xh';
|
|
239
|
-
rules += ' _yh';
|
|
240
237
|
rules += ' _zh';
|
|
238
|
+
rules += ' _Ah';
|
|
239
|
+
rules += ' _Bh';
|
|
240
|
+
rules += ' _Ch';
|
|
241
|
+
rules += ' tc';
|
|
241
242
|
rules += ' uc';
|
|
242
|
-
rules += '
|
|
243
|
+
rules += ' r-375tox';
|
|
243
244
|
rules += ' s-375toy';
|
|
244
|
-
rules += '
|
|
245
|
-
rules += ' wa';
|
|
246
|
-
rules += ' _Pa';
|
|
247
|
-
rules += ' _R-375x7f';
|
|
245
|
+
rules += ' za';
|
|
248
246
|
rules += ' _Sa';
|
|
247
|
+
rules += ' _U-375x7f';
|
|
248
|
+
rules += ' _Va';
|
|
249
249
|
if (props.isDisabled) {
|
|
250
|
-
rules += '
|
|
251
|
-
rules += '
|
|
250
|
+
rules += ' xa_____O';
|
|
251
|
+
rules += ' xi';
|
|
252
252
|
} else if (props.isFocusWithin) {
|
|
253
|
-
rules += '
|
|
254
|
-
if (props.isInvalid) rules += '
|
|
255
|
-
else rules += '
|
|
253
|
+
rules += ' xa_____M';
|
|
254
|
+
if (props.isInvalid) rules += ' xP';
|
|
255
|
+
else rules += ' xo';
|
|
256
256
|
} else if (props.isInvalid) {
|
|
257
|
-
if (props.isPressed) rules += '
|
|
258
|
-
else if (props.isFocusVisible) rules += '
|
|
259
|
-
else if (props.isHovered) rules += '
|
|
260
|
-
else rules += '
|
|
257
|
+
if (props.isPressed) rules += ' xQ';
|
|
258
|
+
else if (props.isFocusVisible) rules += ' xP';
|
|
259
|
+
else if (props.isHovered) rules += ' xP';
|
|
260
|
+
else rules += ' xO';
|
|
261
261
|
} else {
|
|
262
|
-
if (props.isPressed) rules += '
|
|
263
|
-
else if (props.isFocusVisible) rules += '
|
|
264
|
-
else if (props.isHovered) rules += '
|
|
265
|
-
else rules += '
|
|
262
|
+
if (props.isPressed) rules += ' xj';
|
|
263
|
+
else if (props.isFocusVisible) rules += ' xj';
|
|
264
|
+
else if (props.isHovered) rules += ' xj';
|
|
265
|
+
else rules += ' xi';
|
|
266
|
+
}
|
|
267
|
+
if (props.isDisabled) {
|
|
268
|
+
rules += ' ya_____O';
|
|
269
|
+
rules += ' yi';
|
|
270
|
+
} else if (props.isFocusWithin) {
|
|
271
|
+
rules += ' ya_____M';
|
|
272
|
+
if (props.isInvalid) rules += ' yP';
|
|
273
|
+
else rules += ' yo';
|
|
274
|
+
} else if (props.isInvalid) {
|
|
275
|
+
if (props.isPressed) rules += ' yQ';
|
|
276
|
+
else if (props.isFocusVisible) rules += ' yP';
|
|
277
|
+
else if (props.isHovered) rules += ' yP';
|
|
278
|
+
else rules += ' yO';
|
|
279
|
+
} else {
|
|
280
|
+
if (props.isPressed) rules += ' yj';
|
|
281
|
+
else if (props.isFocusVisible) rules += ' yj';
|
|
282
|
+
else if (props.isHovered) rules += ' yj';
|
|
283
|
+
else rules += ' yi';
|
|
284
|
+
}
|
|
285
|
+
if (props.isDisabled) {
|
|
286
|
+
rules += ' va_____O';
|
|
287
|
+
rules += ' vi';
|
|
288
|
+
} else if (props.isFocusWithin) {
|
|
289
|
+
rules += ' va_____M';
|
|
290
|
+
if (props.isInvalid) rules += ' vP';
|
|
291
|
+
else rules += ' vo';
|
|
292
|
+
} else if (props.isInvalid) {
|
|
293
|
+
if (props.isPressed) rules += ' vQ';
|
|
294
|
+
else if (props.isFocusVisible) rules += ' vP';
|
|
295
|
+
else if (props.isHovered) rules += ' vP';
|
|
296
|
+
else rules += ' vO';
|
|
297
|
+
} else {
|
|
298
|
+
if (props.isPressed) rules += ' vj';
|
|
299
|
+
else if (props.isFocusVisible) rules += ' vj';
|
|
300
|
+
else if (props.isHovered) rules += ' vj';
|
|
301
|
+
else rules += ' vi';
|
|
302
|
+
}
|
|
303
|
+
if (props.isDisabled) {
|
|
304
|
+
rules += ' wa_____O';
|
|
305
|
+
rules += ' wi';
|
|
306
|
+
} else if (props.isFocusWithin) {
|
|
307
|
+
rules += ' wa_____M';
|
|
308
|
+
if (props.isInvalid) rules += ' wP';
|
|
309
|
+
else rules += ' wo';
|
|
310
|
+
} else if (props.isInvalid) {
|
|
311
|
+
if (props.isPressed) rules += ' wQ';
|
|
312
|
+
else if (props.isFocusVisible) rules += ' wP';
|
|
313
|
+
else if (props.isHovered) rules += ' wP';
|
|
314
|
+
else rules += ' wO';
|
|
315
|
+
} else {
|
|
316
|
+
if (props.isPressed) rules += ' wj';
|
|
317
|
+
else if (props.isFocusVisible) rules += ' wj';
|
|
318
|
+
else if (props.isHovered) rules += ' wj';
|
|
319
|
+
else rules += ' wi';
|
|
266
320
|
}
|
|
267
321
|
rules += ' bd';
|
|
268
|
-
if (props.isDisabled) rules += '
|
|
269
|
-
else rules += '
|
|
270
|
-
rules += ' -
|
|
271
|
-
rules += ' -
|
|
322
|
+
if (props.isDisabled) rules += ' __Lb';
|
|
323
|
+
else rules += ' __Le';
|
|
324
|
+
rules += ' -_375tnp_F-I';
|
|
325
|
+
rules += ' -_375tnq_G-I';
|
|
326
|
+
rules += ' -_375tox_r-c';
|
|
272
327
|
rules += ' -_375toy_s-c';
|
|
273
|
-
rules += ' -
|
|
274
|
-
if (props.size === "
|
|
275
|
-
else if (props.size === "
|
|
276
|
-
else if (props.size === "
|
|
277
|
-
else
|
|
278
|
-
else rules += ' -_375toq_k-f';
|
|
328
|
+
if (props.size === "XL") rules += ' -_375top_j-j';
|
|
329
|
+
else if (props.size === "L") rules += ' -_375top_j-i';
|
|
330
|
+
else if (props.size === "S") rules += ' -_375top_j-h';
|
|
331
|
+
else if (props.size === "XS") rules += ' -_375top_j-g';
|
|
332
|
+
else rules += ' -_375top_j-f';
|
|
279
333
|
return rules;
|
|
280
334
|
};
|
|
281
335
|
const $a0b996a550bb0891$export$f0fe469072bc6950 = /*#__PURE__*/ (0, $4hgIp$react.forwardRef)(function FieldGroup(props, ref) {
|
|
@@ -308,48 +362,48 @@ const $a0b996a550bb0891$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $4hgIp$react
|
|
|
308
362
|
...otherProps,
|
|
309
363
|
ref: ref,
|
|
310
364
|
style: UNSAFE_style,
|
|
311
|
-
className: UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)("
|
|
365
|
+
className: UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)(" Ha Ia Fa Ga ba a-17zqamw _g-17zqamw _h-17zqamw _i-17zqamw __d-3t1y __c-3t1y po kb _Pa zf __zb __Ab _qa _tb", styles)
|
|
312
366
|
});
|
|
313
367
|
});
|
|
314
368
|
const $a0b996a550bb0891$var$helpTextStyles = function anonymous(props) {
|
|
315
369
|
let rules = " .";
|
|
316
|
-
rules += ' __b-1le9d6f';
|
|
317
|
-
rules += ' __c-1le9d6f';
|
|
318
|
-
rules += ' __d-1le9d6f';
|
|
319
370
|
rules += ' __e-1le9d6f';
|
|
320
|
-
rules += '
|
|
321
|
-
rules += '
|
|
371
|
+
rules += ' __f-1le9d6f';
|
|
372
|
+
rules += ' __g-1le9d6f';
|
|
373
|
+
rules += ' __h-1le9d6f';
|
|
374
|
+
rules += ' _3d';
|
|
375
|
+
rules += ' _5d';
|
|
376
|
+
rules += ' hbH';
|
|
377
|
+
rules += ' hG';
|
|
322
378
|
rules += ' ibH';
|
|
323
379
|
rules += ' iG';
|
|
324
|
-
rules += '
|
|
325
|
-
rules += '
|
|
326
|
-
rules += '
|
|
327
|
-
rules += '
|
|
328
|
-
rules += '
|
|
329
|
-
rules += '
|
|
330
|
-
rules += '
|
|
331
|
-
rules += '
|
|
332
|
-
rules += ' _d-enzrfpb';
|
|
333
|
-
rules += ' _da';
|
|
380
|
+
rules += ' _g-bc1l9oh';
|
|
381
|
+
rules += ' _g-1uotwbwg';
|
|
382
|
+
rules += ' _g-eo0c6sf';
|
|
383
|
+
rules += ' _g-enzzrge';
|
|
384
|
+
rules += ' _g-enzykdd';
|
|
385
|
+
rules += ' _g-enzwzjc';
|
|
386
|
+
rules += ' _g-enzrfpb';
|
|
387
|
+
rules += ' _ga';
|
|
334
388
|
if (props.size === "XL") {
|
|
335
|
-
rules += '
|
|
336
|
-
rules += '
|
|
389
|
+
rules += ' _hbj';
|
|
390
|
+
rules += ' _hi';
|
|
337
391
|
} else if (props.size === "L") {
|
|
338
|
-
rules += '
|
|
339
|
-
rules += '
|
|
392
|
+
rules += ' _hbh';
|
|
393
|
+
rules += ' _hg';
|
|
340
394
|
} else if (props.size === "S") {
|
|
341
|
-
rules += '
|
|
342
|
-
rules += '
|
|
395
|
+
rules += ' _hbd';
|
|
396
|
+
rules += ' _hc';
|
|
343
397
|
} else if (props.size === "XS") {
|
|
344
|
-
rules += '
|
|
345
|
-
rules += '
|
|
398
|
+
rules += ' _hbb';
|
|
399
|
+
rules += ' _ha';
|
|
346
400
|
} else {
|
|
347
|
-
rules += '
|
|
348
|
-
rules += '
|
|
401
|
+
rules += ' _hbf';
|
|
402
|
+
rules += ' _he';
|
|
349
403
|
}
|
|
350
|
-
rules += '
|
|
351
|
-
rules += '
|
|
352
|
-
rules += '
|
|
404
|
+
rules += ' _ib';
|
|
405
|
+
rules += ' _j-1x99dlob';
|
|
406
|
+
rules += ' _ja';
|
|
353
407
|
if (props.isDisabled) rules += ' aj';
|
|
354
408
|
else if (props.isInvalid) {
|
|
355
409
|
if (props.isPressed) rules += ' aP';
|
|
@@ -362,11 +416,11 @@ const $a0b996a550bb0891$var$helpTextStyles = function anonymous(props) {
|
|
|
362
416
|
else if (props.isHovered) rules += ' an';
|
|
363
417
|
else rules += ' am';
|
|
364
418
|
}
|
|
365
|
-
rules += ' -
|
|
366
|
-
rules += '
|
|
367
|
-
rules += '
|
|
368
|
-
if (props.isDisabled) rules += '
|
|
369
|
-
else rules += '
|
|
419
|
+
rules += ' -rwx0fg_d-b';
|
|
420
|
+
rules += ' __qe';
|
|
421
|
+
rules += ' H-1inj1bc';
|
|
422
|
+
if (props.isDisabled) rules += ' __Lb';
|
|
423
|
+
else rules += ' __Le';
|
|
370
424
|
return rules;
|
|
371
425
|
};
|
|
372
426
|
function $a0b996a550bb0891$export$a67c0bc59081311a(props) {
|
|
@@ -409,9 +463,9 @@ function $a0b996a550bb0891$export$bda0d075e0e342c9(props) {
|
|
|
409
463
|
{
|
|
410
464
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
411
465
|
slot: 'icon',
|
|
412
|
-
styles: "
|
|
466
|
+
styles: " __E-3t1x __c-3t1x -rwx0fg_d-e -rwx0fg_d-a_____8"
|
|
413
467
|
}),
|
|
414
|
-
styles: "
|
|
468
|
+
styles: " k-1sthc3k j-1sthc3k BG BbH C-177861o __c-3t1x"
|
|
415
469
|
}
|
|
416
470
|
]
|
|
417
471
|
],
|
package/dist/Field.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n isDisabled?: boolean,\n isRequired?: boolean,\n size?: 'S' | 'M' | 'L' | 'XL',\n necessityIndicator?: NecessityIndicator,\n labelAlign?: Alignment,\n labelPosition?: 'top' | 'side',\n includeNecessityIndicatorInAccessibilityName?: boolean,\n staticColor?: 'white' | 'black' | 'auto',\n contextualHelp?: ReactNode,\n isQuiet?: boolean,\n children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isDisabled,\n isRequired,\n size = 'M',\n necessityIndicator = 'icon',\n includeNecessityIndicatorInAccessibilityName = false,\n labelAlign,\n labelPosition,\n staticColor,\n contextualHelp,\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = '',\n ...labelProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let contextualHelpId = useId();\n let fallbackLabelPropsId = useId();\n if (contextualHelp && !labelProps.id) {\n labelProps.id = fallbackLabelPropsId;\n }\n\n if (!props.children) {\n return null;\n }\n\n return (\n <div\n className={style({\n gridArea: 'label',\n display: 'inline',\n textAlign: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n },\n paddingBottom: {\n labelPosition: {\n top: '--field-gap'\n }\n },\n contain: {\n labelPosition: {\n top: 'inline-size'\n },\n isQuiet: 'none'\n }\n })({labelAlign, labelPosition, isQuiet})}>\n <Label\n {...labelProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n {props.children}\n {(isRequired || necessityIndicator === 'label') && (\n <span className={style({whiteSpace: 'nowrap'})}>\n \n {necessityIndicator === 'icon' &&\n <AsteriskIcon\n size={size === 'S' ? 'M' : size}\n className={style({\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n })}\n aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n }\n {necessityIndicator === 'label' &&\n /* The necessity label is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here.\n */\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n </span>\n }\n </span>\n )}\n </Label>\n {contextualHelp && (\n <span className={style({whiteSpace: 'nowrap'})}>\n \n <CenterBaseline\n styles={style({\n display: 'inline-flex',\n height: 0\n })}>\n <ContextualHelpContext.Provider\n value={{\n id: contextualHelpId,\n 'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n }}>\n {contextualHelp}\n </ContextualHelpContext.Provider>\n </CenterBaseline>\n </span>\n )}\n </div>\n );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n size?: 'S' | 'M' | 'L' | 'XL',\n children?: ReactNode,\n styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n ...focusRing(),\n ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: 'negative',\n isFocusWithin: {\n default: 'gray-900',\n isInvalid: 'negative-1000',\n forcedColors: 'Highlight'\n },\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n backgroundColor: 'gray-25',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n return (\n <Group\n ref={ref}\n {...props}\n onPointerDown={(e) => {\n // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n onPointerUp={e => {\n if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n props.styles\n )} />\n );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n return (\n <RACInput\n {...otherProps}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style({\n padding: 0,\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n flexGrow: 1,\n flexShrink: 1,\n minWidth: 0,\n width: 'full',\n outlineStyle: 'none',\n borderStyle: 'none',\n truncate: true\n }), styles)} />\n );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n size?: 'S' | 'M' | 'L' | 'XL',\n isDisabled?: boolean,\n isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n description?: ReactNode,\n showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isInvalid: 'negative',\n isDisabled: 'disabled'\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n contain: 'inline-size',\n paddingTop: '--field-gap',\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n let domErrorRef = useDOMRef(props.errorRef || null);\n\n if (!props.isInvalid && props.description) {\n return (\n <Text\n slot=\"description\"\n ref={domDescriptionRef}\n className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n {props.description}\n </Text>\n );\n }\n\n return (\n <FieldError\n {...props}\n ref={domErrorRef}\n className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n {props.showErrorIcon &&\n <CenterBaseline>\n <AlertIcon />\n </CenterBaseline>\n }\n <span>{children || validationErrors.join(' ')}</span>\n </>))}\n </FieldError>\n );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n return (\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({\n slot: 'icon',\n styles: style({\n order: 0,\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'negative',\n forcedColors: 'ButtonText'\n }\n }\n })}),\n styles: style({\n size: fontRelative(20),\n marginStart: 'text-to-visual',\n marginEnd: fontRelative(-2),\n flexShrink: 0\n })\n }]\n ]}>\n {!props.isDisabled && <AlertIcon />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n isDisabled?: boolean,\n isRequired?: boolean,\n size?: 'S' | 'M' | 'L' | 'XL',\n necessityIndicator?: NecessityIndicator,\n labelAlign?: Alignment,\n labelPosition?: 'top' | 'side',\n includeNecessityIndicatorInAccessibilityName?: boolean,\n staticColor?: 'white' | 'black' | 'auto',\n contextualHelp?: ReactNode,\n isQuiet?: boolean,\n children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isDisabled,\n isRequired,\n size = 'M',\n necessityIndicator = 'icon',\n includeNecessityIndicatorInAccessibilityName = false,\n labelAlign,\n labelPosition,\n staticColor,\n contextualHelp,\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = '',\n ...labelProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let contextualHelpId = useId();\n let fallbackLabelPropsId = useId();\n if (contextualHelp && !labelProps.id) {\n labelProps.id = fallbackLabelPropsId;\n }\n\n if (!props.children) {\n return null;\n }\n\n return (\n <div\n className={style({\n gridArea: 'label',\n display: 'inline',\n textAlign: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n },\n paddingBottom: {\n labelPosition: {\n top: '--field-gap'\n }\n },\n contain: {\n labelPosition: {\n top: 'inline-size'\n },\n isQuiet: 'none'\n }\n })({labelAlign, labelPosition, isQuiet})}>\n <Label\n {...labelProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n {props.children}\n {(isRequired || necessityIndicator === 'label') && (\n <span className={style({whiteSpace: 'nowrap'})}>\n \n {necessityIndicator === 'icon' &&\n <AsteriskIcon\n size={size === 'S' ? 'M' : size}\n className={style({\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n })}\n aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n }\n {necessityIndicator === 'label' &&\n /* The necessity label is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here.\n */\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n </span>\n }\n </span>\n )}\n </Label>\n {contextualHelp && (\n <span className={style({whiteSpace: 'nowrap'})}>\n \n <CenterBaseline\n styles={style({\n display: 'inline-flex',\n height: 0\n })}>\n <ContextualHelpContext.Provider\n value={{\n id: contextualHelpId,\n 'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n }}>\n {contextualHelp}\n </ContextualHelpContext.Provider>\n </CenterBaseline>\n </span>\n )}\n </div>\n );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n size?: 'S' | 'M' | 'L' | 'XL',\n children?: ReactNode,\n styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n ...focusRing(),\n ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: 'negative',\n isFocusWithin: {\n default: 'gray-900',\n isInvalid: 'negative-1000',\n forcedColors: 'Highlight'\n },\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n backgroundColor: 'gray-25',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n return (\n <Group\n ref={ref}\n {...props}\n onPointerDown={(e) => {\n // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n onPointerUp={e => {\n if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n props.styles\n )} />\n );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n return (\n <RACInput\n {...otherProps}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style({\n padding: 0,\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n flexGrow: 1,\n flexShrink: 1,\n minWidth: 0,\n width: 'full',\n outlineStyle: 'none',\n borderStyle: 'none',\n truncate: true\n }), styles)} />\n );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n size?: 'S' | 'M' | 'L' | 'XL',\n isDisabled?: boolean,\n isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n description?: ReactNode,\n showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isInvalid: 'negative',\n isDisabled: 'disabled'\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n contain: 'inline-size',\n paddingTop: '--field-gap',\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n let domErrorRef = useDOMRef(props.errorRef || null);\n\n if (!props.isInvalid && props.description) {\n return (\n <Text\n slot=\"description\"\n ref={domDescriptionRef}\n className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n {props.description}\n </Text>\n );\n }\n\n return (\n <FieldError\n {...props}\n ref={domErrorRef}\n className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n {props.showErrorIcon &&\n <CenterBaseline>\n <AlertIcon />\n </CenterBaseline>\n }\n <span>{children || validationErrors.join(' ')}</span>\n </>))}\n </FieldError>\n );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n return (\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({\n slot: 'icon',\n styles: style({\n order: 0,\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'negative',\n forcedColors: 'ButtonText'\n }\n }\n })}),\n styles: style({\n size: fontRelative(20),\n marginStart: 'text-to-visual',\n marginEnd: fontRelative(-2),\n flexShrink: 0\n })\n }]\n ]}>\n {!props.isDisabled && <AlertIcon />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}
|