@react-spectrum/s2 0.9.0 → 0.9.2
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 +2 -2
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +2 -2
- package/dist/ActionBar.cjs +60 -60
- package/dist/ActionBar.css +59 -59
- package/dist/ActionBar.mjs +60 -60
- package/dist/ActionButton.cjs +187 -187
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +134 -134
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +187 -187
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +15 -15
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +15 -15
- package/dist/Add.cjs +10 -10
- package/dist/Add.css +6 -6
- package/dist/Add.mjs +10 -10
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Asterisk.cjs +6 -6
- package/dist/Asterisk.css +4 -4
- package/dist/Asterisk.mjs +6 -6
- package/dist/Avatar.cjs +14 -14
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +14 -14
- package/dist/AvatarGroup.cjs +120 -120
- package/dist/AvatarGroup.css +37 -37
- package/dist/AvatarGroup.mjs +120 -120
- package/dist/Badge.cjs +196 -196
- package/dist/Badge.css +129 -129
- package/dist/Badge.mjs +196 -196
- package/dist/Breadcrumbs.cjs +231 -231
- package/dist/Breadcrumbs.css +102 -102
- package/dist/Breadcrumbs.mjs +231 -231
- package/dist/Button.cjs +328 -328
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +176 -176
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +328 -328
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +20 -20
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +20 -20
- package/dist/Card.cjs +294 -294
- package/dist/Card.css +205 -205
- package/dist/Card.mjs +294 -294
- package/dist/CardView.cjs +17 -17
- package/dist/CardView.css +17 -17
- package/dist/CardView.mjs +17 -17
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +160 -160
- package/dist/Checkbox.css +94 -94
- package/dist/Checkbox.mjs +160 -160
- package/dist/CheckboxGroup.cjs +43 -43
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +43 -43
- package/dist/Checkmark.cjs +12 -12
- package/dist/Checkmark.css +8 -8
- package/dist/Checkmark.mjs +12 -12
- package/dist/Chevron.cjs +12 -12
- package/dist/Chevron.css +10 -10
- package/dist/Chevron.mjs +12 -12
- package/dist/ClearButton.cjs +29 -29
- package/dist/ClearButton.css +29 -29
- package/dist/ClearButton.mjs +29 -29
- package/dist/CloseButton.cjs +54 -54
- package/dist/CloseButton.css +46 -46
- package/dist/CloseButton.mjs +54 -54
- package/dist/ColorArea.cjs +16 -16
- package/dist/ColorArea.css +16 -16
- package/dist/ColorArea.mjs +16 -16
- package/dist/ColorField.cjs +31 -31
- package/dist/ColorField.css +31 -31
- package/dist/ColorField.mjs +31 -31
- package/dist/ColorHandle.cjs +27 -27
- package/dist/ColorHandle.css +42 -42
- package/dist/ColorHandle.mjs +27 -27
- package/dist/ColorSlider.cjs +108 -108
- package/dist/ColorSlider.css +56 -56
- package/dist/ColorSlider.mjs +108 -108
- package/dist/ColorSwatch.cjs +29 -29
- package/dist/ColorSwatch.css +29 -29
- package/dist/ColorSwatch.mjs +29 -29
- package/dist/ColorSwatchPicker.cjs +27 -27
- package/dist/ColorSwatchPicker.css +46 -46
- package/dist/ColorSwatchPicker.mjs +27 -27
- package/dist/ColorWheel.cjs +26 -26
- package/dist/ColorWheel.css +17 -17
- package/dist/ColorWheel.mjs +26 -26
- package/dist/ComboBox.cjs +378 -376
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +179 -179
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +378 -376
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.cjs.map +1 -1
- package/dist/ContextualHelp.css +49 -49
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/ContextualHelp.mjs.map +1 -1
- package/dist/Cross.cjs +14 -14
- package/dist/Cross.css +10 -10
- package/dist/Cross.mjs +14 -14
- package/dist/CustomDialog.cjs +25 -25
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +25 -25
- package/dist/Dash.cjs +10 -10
- package/dist/Dash.css +6 -6
- package/dist/Dash.mjs +10 -10
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +70 -70
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +129 -129
- package/dist/Disclosure.css +104 -104
- package/dist/Disclosure.mjs +129 -129
- package/dist/Divider.cjs +25 -25
- package/dist/Divider.css +25 -25
- package/dist/Divider.mjs +25 -25
- package/dist/DropZone.cjs +58 -58
- package/dist/DropZone.css +54 -54
- package/dist/DropZone.mjs +58 -58
- package/dist/Field.cjs +340 -340
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +144 -144
- package/dist/Field.mjs +340 -340
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +9 -9
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +9 -9
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +79 -79
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +219 -219
- package/dist/IllustratedMessage.css +74 -74
- package/dist/IllustratedMessage.mjs +219 -219
- package/dist/Image.cjs +14 -14
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css +14 -14
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +14 -14
- package/dist/Image.mjs.map +1 -1
- package/dist/InlineAlert.cjs +108 -108
- package/dist/InlineAlert.css +90 -90
- package/dist/InlineAlert.mjs +108 -108
- package/dist/Link.cjs +49 -49
- package/dist/Link.css +41 -41
- package/dist/Link.mjs +49 -49
- package/dist/LinkOut.cjs +8 -8
- package/dist/LinkOut.css +8 -8
- package/dist/LinkOut.mjs +8 -8
- package/dist/Menu.cjs +422 -422
- package/dist/Menu.css +180 -180
- package/dist/Menu.mjs +422 -422
- package/dist/Meter.cjs +153 -153
- package/dist/Meter.css +95 -95
- package/dist/Meter.mjs +153 -153
- package/dist/Modal.cjs +58 -58
- package/dist/Modal.css +50 -50
- package/dist/Modal.mjs +58 -58
- package/dist/NotificationBadge.cjs +56 -56
- package/dist/NotificationBadge.css +51 -51
- package/dist/NotificationBadge.mjs +56 -56
- package/dist/NumberField.cjs +114 -118
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +103 -103
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +115 -119
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +273 -271
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +169 -169
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +273 -271
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +85 -85
- package/dist/Popover.css +66 -66
- package/dist/Popover.mjs +85 -85
- package/dist/ProgressBar.cjs +163 -163
- package/dist/ProgressBar.css +103 -103
- package/dist/ProgressBar.mjs +163 -163
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +17 -17
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +10 -10
- package/dist/Provider.css +9 -9
- package/dist/Provider.mjs +10 -10
- package/dist/Radio.cjs +144 -144
- package/dist/Radio.css +81 -81
- package/dist/Radio.mjs +144 -144
- package/dist/RadioGroup.cjs +41 -41
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +41 -41
- package/dist/SearchField.cjs +41 -41
- package/dist/SearchField.css +49 -49
- package/dist/SearchField.mjs +41 -41
- package/dist/SegmentedControl.cjs +171 -171
- package/dist/SegmentedControl.css +120 -120
- package/dist/SegmentedControl.mjs +171 -171
- package/dist/Slider.cjs +288 -288
- package/dist/Slider.css +152 -152
- package/dist/Slider.mjs +288 -288
- package/dist/StatusLight.cjs +115 -115
- package/dist/StatusLight.css +63 -63
- package/dist/StatusLight.mjs +115 -115
- package/dist/Switch.cjs +152 -152
- package/dist/Switch.css +76 -76
- package/dist/Switch.mjs +152 -152
- package/dist/TableView.cjs +310 -310
- package/dist/TableView.css +172 -172
- package/dist/TableView.mjs +310 -310
- package/dist/Tabs.cjs +113 -110
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +92 -92
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +113 -110
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +123 -123
- package/dist/TabsPicker.css +112 -112
- package/dist/TabsPicker.mjs +123 -123
- package/dist/TagGroup.cjs +202 -202
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +147 -147
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +202 -202
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +57 -57
- package/dist/TextField.css +57 -57
- package/dist/TextField.mjs +57 -57
- package/dist/Toast.cjs +118 -118
- package/dist/Toast.css +105 -105
- package/dist/Toast.mjs +118 -118
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +81 -81
- package/dist/Tooltip.css +68 -68
- package/dist/Tooltip.mjs +81 -81
- package/dist/TreeView.cjs +143 -149
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +143 -143
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +143 -149
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/icons/Icon.cjs +10 -10
- package/icons/Icon.css +9 -9
- package/icons/Icon.mjs +10 -10
- package/icons/Skeleton.cjs +4 -3
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +4 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +45 -26
- package/src/ActionButton.tsx +1 -1
- package/src/Button.tsx +3 -3
- package/src/ComboBox.tsx +3 -2
- package/src/ContextualHelp.tsx +2 -2
- package/src/Image.tsx +1 -1
- package/src/NumberField.tsx +0 -2
- package/src/Picker.tsx +3 -2
- package/src/Skeleton.tsx +2 -1
- package/src/Tabs.tsx +7 -5
- package/src/TagGroup.tsx +1 -1
- package/src/TreeView.tsx +1 -6
- package/style/__tests__/style-macro.test.js +56 -56
package/dist/NumberField.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import {FormContext as $9b916426527cebe7$export$c24727297075ec6a} from "./Form.m
|
|
|
6
6
|
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
|
|
7
7
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
8
8
|
import {jsx as $5qJVF$jsx, jsxs as $5qJVF$jsxs, Fragment as $5qJVF$Fragment} from "react/jsx-runtime";
|
|
9
|
-
import {NumberField as $5qJVF$NumberField, InputContext as $5qJVF$InputContext,
|
|
9
|
+
import {NumberField as $5qJVF$NumberField, InputContext as $5qJVF$InputContext, useContextProps as $5qJVF$useContextProps, ButtonContext as $5qJVF$ButtonContext} from "react-aria-components";
|
|
10
10
|
import {createContext as $5qJVF$createContext, forwardRef as $5qJVF$forwardRef, useContext as $5qJVF$useContext, useRef as $5qJVF$useRef, useImperativeHandle as $5qJVF$useImperativeHandle, useMemo as $5qJVF$useMemo} from "react";
|
|
11
11
|
import {createFocusableRef as $5qJVF$createFocusableRef} from "@react-spectrum/utils";
|
|
12
12
|
import {mergeRefs as $5qJVF$mergeRefs, filterDOMProps as $5qJVF$filterDOMProps, mergeProps as $5qJVF$mergeProps} from "@react-aria/utils";
|
|
@@ -37,76 +37,76 @@ import {useButton as $5qJVF$useButton, useFocusRing as $5qJVF$useFocusRing, useH
|
|
|
37
37
|
const $675eca1a78ccd399$export$b414a48cf5dcbc11 = /*#__PURE__*/ (0, $5qJVF$createContext)(null);
|
|
38
38
|
const $675eca1a78ccd399$var$inputButton = function anonymous(props) {
|
|
39
39
|
let rules = " ";
|
|
40
|
-
if (props.size === "XL") rules += ' -SFnbic-
|
|
41
|
-
else if (props.size === "L") rules += ' -SFnbic-
|
|
42
|
-
else if (props.size === "S") rules += ' -SFnbic-
|
|
43
|
-
else if (props.size === "XS") rules += ' -SFnbic-
|
|
44
|
-
else rules += ' -SFnbic-
|
|
45
|
-
rules += ' -Bu7z1c-
|
|
46
|
-
rules += '
|
|
47
|
-
rules += '
|
|
48
|
-
rules += '
|
|
49
|
-
rules += '
|
|
50
|
-
rules += '
|
|
51
|
-
rules += '
|
|
52
|
-
rules += '
|
|
53
|
-
rules += '
|
|
54
|
-
rules += '
|
|
55
|
-
rules += '
|
|
56
|
-
if (props.size === "XL") rules += '
|
|
57
|
-
else if (props.size === "L") rules += '
|
|
58
|
-
else if (props.size === "M") rules += '
|
|
59
|
-
else if (props.size === "S") rules += '
|
|
60
|
-
rules += '
|
|
61
|
-
if (props.type === "increment") rules += '
|
|
62
|
-
else rules += '
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
65
|
-
rules += '
|
|
66
|
-
rules += '
|
|
67
|
-
rules += '
|
|
68
|
-
rules += '
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
71
|
-
rules += '
|
|
72
|
-
if (props.isDisabled) rules += '
|
|
40
|
+
if (props.size === "XL") rules += ' -SFnbic-_JaP8ec91';
|
|
41
|
+
else if (props.size === "L") rules += ' -SFnbic-_J0K2hn91';
|
|
42
|
+
else if (props.size === "S") rules += ' -SFnbic-_JJOW22b91';
|
|
43
|
+
else if (props.size === "XS") rules += ' -SFnbic-_JICefdd91';
|
|
44
|
+
else rules += ' -SFnbic-_Jb91';
|
|
45
|
+
rules += ' -Bu7z1c-oa91';
|
|
46
|
+
rules += ' oj91';
|
|
47
|
+
rules += ' nj91';
|
|
48
|
+
rules += ' kj91';
|
|
49
|
+
rules += ' jj91';
|
|
50
|
+
rules += ' sd91';
|
|
51
|
+
rules += ' _Le91';
|
|
52
|
+
rules += ' _Wa91';
|
|
53
|
+
rules += ' _je91';
|
|
54
|
+
rules += ' eb91';
|
|
55
|
+
rules += ' _Ca91';
|
|
56
|
+
if (props.size === "XL") rules += ' ZC91';
|
|
57
|
+
else if (props.size === "L") rules += ' Zo91';
|
|
58
|
+
else if (props.size === "M") rules += ' Zm91';
|
|
59
|
+
else if (props.size === "S") rules += ' Zu91';
|
|
60
|
+
rules += ' Fd91';
|
|
61
|
+
if (props.type === "increment") rules += ' Iy91';
|
|
62
|
+
else rules += ' Iw91';
|
|
63
|
+
rules += ' fa91';
|
|
64
|
+
rules += ' _va91';
|
|
65
|
+
rules += ' Ma91';
|
|
66
|
+
rules += ' Yd91';
|
|
67
|
+
rules += ' Yle91';
|
|
68
|
+
rules += ' Xb91';
|
|
69
|
+
rules += ' Xlb91';
|
|
70
|
+
rules += ' _2b91';
|
|
71
|
+
rules += ' _2lb91';
|
|
72
|
+
if (props.isDisabled) rules += ' gH91';
|
|
73
73
|
else {
|
|
74
|
-
if (props.isPressed) rules += '
|
|
75
|
-
else if (props.isFocusVisible) rules += '
|
|
76
|
-
else if (props.isHovered) rules += '
|
|
77
|
-
else rules += '
|
|
74
|
+
if (props.isPressed) rules += ' gF91';
|
|
75
|
+
else if (props.isFocusVisible) rules += ' gF91';
|
|
76
|
+
else if (props.isHovered) rules += ' gF91';
|
|
77
|
+
else rules += ' gH91';
|
|
78
78
|
}
|
|
79
|
-
if (props.isDisabled) rules += '
|
|
80
|
-
else if (props.isHovered) rules += '
|
|
81
|
-
else rules += '
|
|
82
|
-
if (props.isDisabled) rules += '
|
|
79
|
+
if (props.isDisabled) rules += ' gld91';
|
|
80
|
+
else if (props.isHovered) rules += ' gle91';
|
|
81
|
+
else rules += ' glc91';
|
|
82
|
+
if (props.isDisabled) rules += ' pp91';
|
|
83
83
|
else {
|
|
84
|
-
if (props.isPressed) rules += '
|
|
85
|
-
else if (props.isFocusVisible) rules += '
|
|
86
|
-
else if (props.isHovered) rules += '
|
|
87
|
-
else rules += '
|
|
84
|
+
if (props.isPressed) rules += ' po91';
|
|
85
|
+
else if (props.isFocusVisible) rules += ' po91';
|
|
86
|
+
else if (props.isHovered) rules += ' po91';
|
|
87
|
+
else rules += ' pt91';
|
|
88
88
|
}
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
89
|
+
rules += ' pla91';
|
|
90
|
+
rules += ' ri91';
|
|
91
91
|
return rules;
|
|
92
92
|
};
|
|
93
|
-
const $675eca1a78ccd399$var$iconStyles = "
|
|
93
|
+
const $675eca1a78ccd399$var$iconStyles = " _va91 -_8sjo0b-t5ZbAob91";
|
|
94
94
|
const $675eca1a78ccd399$var$stepperContainerStyles = function anonymous(props) {
|
|
95
95
|
let rules = " ";
|
|
96
|
-
rules += '
|
|
97
|
-
rules += '
|
|
98
|
-
if (props.size === "XL") rules += '
|
|
99
|
-
else if (props.size === "L") rules += '
|
|
100
|
-
else if (props.size === "M") rules += '
|
|
101
|
-
else if (props.size === "S") rules += '
|
|
102
|
-
if (props.size === "XL") rules += '
|
|
103
|
-
else if (props.size === "L") rules += '
|
|
104
|
-
else if (props.size === "M") rules += '
|
|
105
|
-
else if (props.size === "S") rules += '
|
|
106
|
-
if (props.size === "XL") rules += '
|
|
107
|
-
else if (props.size === "L") rules += '
|
|
108
|
-
else if (props.size === "M") rules += '
|
|
109
|
-
else if (props.size === "S") rules += '
|
|
96
|
+
rules += ' sd91';
|
|
97
|
+
rules += ' _tc91';
|
|
98
|
+
if (props.size === "XL") rules += ' Ue91';
|
|
99
|
+
else if (props.size === "L") rules += ' Ue91';
|
|
100
|
+
else if (props.size === "M") rules += ' Ub91';
|
|
101
|
+
else if (props.size === "S") rules += ' Ue91';
|
|
102
|
+
if (props.size === "XL") rules += ' qe91';
|
|
103
|
+
else if (props.size === "L") rules += ' qe91';
|
|
104
|
+
else if (props.size === "M") rules += ' qb91';
|
|
105
|
+
else if (props.size === "S") rules += ' qe91';
|
|
106
|
+
if (props.size === "XL") rules += ' HWJpoB91';
|
|
107
|
+
else if (props.size === "L") rules += ' HWJpoB91';
|
|
108
|
+
else if (props.size === "M") rules += ' Hs91';
|
|
109
|
+
else if (props.size === "S") rules += ' Hr91';
|
|
110
110
|
return rules;
|
|
111
111
|
};
|
|
112
112
|
const $675eca1a78ccd399$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5qJVF$forwardRef)(function NumberField(props1, ref) {
|
|
@@ -141,51 +141,51 @@ const $675eca1a78ccd399$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5qJVF$forwa
|
|
|
141
141
|
if (p[1] === "y") gridColumnEnd = true;
|
|
142
142
|
rules += p[0];
|
|
143
143
|
}
|
|
144
|
-
rules += '
|
|
144
|
+
rules += ' se91';
|
|
145
145
|
if (props.isInForm) {
|
|
146
|
-
if (!gridColumnStart) rules += '
|
|
146
|
+
if (!gridColumnStart) rules += ' z2mU91';
|
|
147
147
|
}
|
|
148
148
|
if (props.isInForm) {
|
|
149
149
|
if (props.labelPosition === "side") {
|
|
150
|
-
if (!gridColumnEnd) rules += '
|
|
150
|
+
if (!gridColumnEnd) rules += ' yvoofG91';
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
|
-
if (props.isInForm) rules += '
|
|
153
|
+
if (props.isInForm) rules += ' DLwlgod91';
|
|
154
154
|
else {
|
|
155
|
-
if (props.labelPosition === "side") rules += '
|
|
156
|
-
else if (props.labelPosition === "top") rules += '
|
|
155
|
+
if (props.labelPosition === "side") rules += ' DPlN5qb91';
|
|
156
|
+
else if (props.labelPosition === "top") rules += ' DM8Mfn91';
|
|
157
157
|
}
|
|
158
|
-
if (props.labelPosition === "side") rules += '
|
|
159
|
-
else if (props.labelPosition === "top") rules += '
|
|
160
|
-
if (props.labelPosition === "side") rules += '
|
|
161
|
-
else if (props.labelPosition === "top") rules += '
|
|
158
|
+
if (props.labelPosition === "side") rules += ' EPlN5qb91';
|
|
159
|
+
else if (props.labelPosition === "top") rules += ' E4w1sLc91';
|
|
160
|
+
if (props.labelPosition === "side") rules += ' CbRM95c91';
|
|
161
|
+
else if (props.labelPosition === "top") rules += ' Cxaocre91';
|
|
162
162
|
if (props.size === "XL") {
|
|
163
|
-
rules += '
|
|
164
|
-
rules += '
|
|
163
|
+
rules += ' vg91';
|
|
164
|
+
rules += ' vsj91';
|
|
165
165
|
} else if (props.size === "L") {
|
|
166
|
-
rules += '
|
|
167
|
-
rules += '
|
|
166
|
+
rules += ' vp91';
|
|
167
|
+
rules += ' vsh91';
|
|
168
168
|
} else if (props.size === "S") {
|
|
169
|
-
rules += '
|
|
170
|
-
rules += '
|
|
169
|
+
rules += ' vb91';
|
|
170
|
+
rules += ' vse91';
|
|
171
171
|
} else if (props.size === "XS") {
|
|
172
|
-
rules += '
|
|
173
|
-
rules += '
|
|
172
|
+
rules += ' va91';
|
|
173
|
+
rules += ' vsc91';
|
|
174
174
|
} else {
|
|
175
|
-
rules += '
|
|
176
|
-
rules += '
|
|
175
|
+
rules += ' vd91';
|
|
176
|
+
rules += ' vsf91';
|
|
177
177
|
}
|
|
178
|
-
rules += '
|
|
179
|
-
rules += '
|
|
180
|
-
rules += '
|
|
181
|
-
if (props.size === "XL") rules += ' -BhX7R-
|
|
182
|
-
else if (props.size === "L") rules += ' -BhX7R-
|
|
183
|
-
else if (props.size === "S") rules += ' -BhX7R-
|
|
184
|
-
else if (props.size === "XS") rules += ' -BhX7R-
|
|
185
|
-
else rules += ' -BhX7R-
|
|
186
|
-
rules += ' -AJjOLd-
|
|
187
|
-
rules += '
|
|
188
|
-
rules += '
|
|
178
|
+
rules += ' ea91';
|
|
179
|
+
rules += ' _Fa91';
|
|
180
|
+
rules += ' _Ffb91';
|
|
181
|
+
if (props.size === "XL") rules += ' -BhX7R-Fz91';
|
|
182
|
+
else if (props.size === "L") rules += ' -BhX7R-Fv91';
|
|
183
|
+
else if (props.size === "S") rules += ' -BhX7R-Fp91';
|
|
184
|
+
else if (props.size === "XS") rules += ' -BhX7R-Fn91';
|
|
185
|
+
else rules += ' -BhX7R-Fx91';
|
|
186
|
+
rules += ' -AJjOLd-UVkF0Db91';
|
|
187
|
+
rules += ' qg91';
|
|
188
|
+
rules += ' __ca91';
|
|
189
189
|
return rules;
|
|
190
190
|
}({
|
|
191
191
|
isInForm: !!formContext,
|
|
@@ -212,27 +212,27 @@ const $675eca1a78ccd399$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5qJVF$forwa
|
|
|
212
212
|
size: size,
|
|
213
213
|
styles: function anonymous(props) {
|
|
214
214
|
let rules = " ";
|
|
215
|
-
rules += '
|
|
216
|
-
rules += '
|
|
217
|
-
rules += '
|
|
218
|
-
rules += '
|
|
219
|
-
if (props.size === "XL") rules += '
|
|
220
|
-
else if (props.size === "L") rules += '
|
|
221
|
-
else if (props.size === "S") rules += '
|
|
222
|
-
else if (props.size === "XS") rules += '
|
|
223
|
-
else rules += '
|
|
224
|
-
if (props.isQuiet) rules += '
|
|
225
|
-
else rules += '
|
|
226
|
-
if (props.size === "XL") rules += ' -Anxdcc-
|
|
227
|
-
else if (props.size === "L") rules += ' -Anxdcc-
|
|
228
|
-
else if (props.size === "S") rules += ' -Anxdcc-
|
|
229
|
-
else rules += ' -Anxdcc-
|
|
230
|
-
rules += '
|
|
231
|
-
rules += '
|
|
232
|
-
rules += '
|
|
233
|
-
rules += ' -S_-
|
|
234
|
-
if (props.isStepperHidden) rules += ' -R_-
|
|
235
|
-
else rules += ' -R_-
|
|
215
|
+
rules += ' zXcEWr91';
|
|
216
|
+
rules += ' yXcEWr91';
|
|
217
|
+
rules += ' BXcEWr91';
|
|
218
|
+
rules += ' AXcEWr91';
|
|
219
|
+
if (props.size === "XL") rules += ' Nl91';
|
|
220
|
+
else if (props.size === "L") rules += ' Nj91';
|
|
221
|
+
else if (props.size === "S") rules += ' Nf91';
|
|
222
|
+
else if (props.size === "XS") rules += ' Ne91';
|
|
223
|
+
else rules += ' Nk91';
|
|
224
|
+
if (props.isQuiet) rules += ' _qd91';
|
|
225
|
+
else rules += ' _qtb91';
|
|
226
|
+
if (props.size === "XL") rules += ' -Anxdcc-Zt91';
|
|
227
|
+
else if (props.size === "L") rules += ' -Anxdcc-ZStdtne91';
|
|
228
|
+
else if (props.size === "S") rules += ' -Anxdcc-Zr91';
|
|
229
|
+
else rules += ' -Anxdcc-Z3fn9H91';
|
|
230
|
+
rules += ' __v6TNLWb91';
|
|
231
|
+
rules += ' SMBFGYc91';
|
|
232
|
+
rules += ' RfBFGYc91';
|
|
233
|
+
rules += ' -S_-Sv91';
|
|
234
|
+
if (props.isStepperHidden) rules += ' -R_-Rv91';
|
|
235
|
+
else rules += ' -R_-Rd91';
|
|
236
236
|
return rules;
|
|
237
237
|
}({
|
|
238
238
|
size: size,
|
|
@@ -288,10 +288,6 @@ const $675eca1a78ccd399$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5qJVF$forwa
|
|
|
288
288
|
})
|
|
289
289
|
]
|
|
290
290
|
}),
|
|
291
|
-
descriptionMessage && /*#__PURE__*/ (0, $5qJVF$jsx)((0, $5qJVF$Text), {
|
|
292
|
-
slot: "description",
|
|
293
|
-
children: descriptionMessage
|
|
294
|
-
}),
|
|
295
291
|
/*#__PURE__*/ (0, $5qJVF$jsx)((0, $9afd80978c252040$export$a67c0bc59081311a), {
|
|
296
292
|
size: size,
|
|
297
293
|
isDisabled: isDisabled,
|
package/dist/NumberField.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.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 Add from '../ui-icons/Add';\nimport {\n ButtonProps as AriaButtonProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n ButtonContext,\n ButtonRenderProps,\n ContextValue,\n InputContext,\n Text,\n useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps {\n /**\n * Whether to hide the increment and decrement buttons.\n * @default false\n */\n hideStepper?: boolean,\n /**\n * The size of the NumberField.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({\n ...controlBorderRadius('sm'),\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: {\n default: 'text-to-control',\n type: {\n increment: 0\n }\n },\n aspectRatio: 'square',\n flexShrink: 0,\n minHeight: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n },\n cursor: 'default'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst stepperContainerStyles = style({\n display: 'flex',\n flexDirection: 'row',\n gap: {\n size: {\n S: 8,\n M: 4,\n L: 8,\n XL: 8\n }\n },\n marginEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n let {\n label,\n contextualHelp,\n description: descriptionMessage,\n errorMessage,\n hideStepper,\n isRequired,\n size = 'M',\n labelPosition = 'top',\n necessityIndicator,\n labelAlign = 'start',\n UNSAFE_className = '',\n UNSAFE_style,\n ...numberFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let domRef = useRef<HTMLDivElement | null>(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n return (\n <AriaNumberField\n isRequired={isRequired}\n {...numberFieldProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {\n ({isDisabled, isInvalid}) => {\n return (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n paddingEnd: {\n default: 0,\n isStepperHidden: 'edge-to-text'\n }\n })({size, isStepperHidden: hideStepper})}>\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 {!hideStepper && <div className={stepperContainerStyles({size})}>\n <StepButton\n ref={decrementButtonRef}\n slot=\"decrement\"\n style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'decrement',\n size\n })}>\n <Dash size={size} className={iconStyles} />\n </StepButton>\n <StepButton\n ref={incrementButtonRef}\n slot=\"increment\"\n style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'increment',\n size\n })}>\n <Add size={size} className={iconStyles} />\n </StepButton>\n </div>}\n </FieldGroup>\n {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }\n }\n </AriaNumberField>\n );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n [props, ref] = useContextProps(props, ref, ButtonContext as any);\n let ctx = props as any;\n /**\n * Must use div for now because Safari pointer event bugs on disabled form elements.\n * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n */\n let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover(props);\n let renderProps = useRenderProps({\n ...props,\n values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n defaultClassName: 'react-aria-Button'\n });\n return (\n <div\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-pressed={ctx.isPressed || isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n let {\n className,\n style,\n children,\n defaultClassName = undefined,\n defaultChildren = undefined,\n defaultStyle,\n values\n } = props;\n\n return useMemo(() => {\n let computedClassName: string | undefined;\n let computedStyle: CSSProperties | undefined;\n let computedChildren: ReactNode | undefined;\n\n if (typeof className === 'function') {\n computedClassName = className({...values, defaultClassName});\n } else {\n computedClassName = className;\n }\n\n if (typeof style === 'function') {\n computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n } else {\n computedStyle = style;\n }\n\n if (typeof children === 'function') {\n computedChildren = children({...values, defaultChildren});\n } else if (children == null) {\n computedChildren = defaultChildren;\n } else {\n computedChildren = children;\n }\n\n return {\n className: computedClassName ?? defaultClassName,\n style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n children: computedChildren ?? defaultChildren,\n 'data-rac': ''\n };\n }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.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 Add from '../ui-icons/Add';\nimport {\n ButtonProps as AriaButtonProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n ButtonContext,\n ButtonRenderProps,\n ContextValue,\n InputContext,\n useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps {\n /**\n * Whether to hide the increment and decrement buttons.\n * @default false\n */\n hideStepper?: boolean,\n /**\n * The size of the NumberField.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({\n ...controlBorderRadius('sm'),\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: {\n default: 'text-to-control',\n type: {\n increment: 0\n }\n },\n aspectRatio: 'square',\n flexShrink: 0,\n minHeight: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n },\n cursor: 'default'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst stepperContainerStyles = style({\n display: 'flex',\n flexDirection: 'row',\n gap: {\n size: {\n S: 8,\n M: 4,\n L: 8,\n XL: 8\n }\n },\n marginEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n let {\n label,\n contextualHelp,\n description: descriptionMessage,\n errorMessage,\n hideStepper,\n isRequired,\n size = 'M',\n labelPosition = 'top',\n necessityIndicator,\n labelAlign = 'start',\n UNSAFE_className = '',\n UNSAFE_style,\n ...numberFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let domRef = useRef<HTMLDivElement | null>(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n return (\n <AriaNumberField\n isRequired={isRequired}\n {...numberFieldProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {\n ({isDisabled, isInvalid}) => {\n return (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n paddingEnd: {\n default: 0,\n isStepperHidden: 'edge-to-text'\n }\n })({size, isStepperHidden: hideStepper})}>\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 {!hideStepper && <div className={stepperContainerStyles({size})}>\n <StepButton\n ref={decrementButtonRef}\n slot=\"decrement\"\n style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'decrement',\n size\n })}>\n <Dash size={size} className={iconStyles} />\n </StepButton>\n <StepButton\n ref={incrementButtonRef}\n slot=\"increment\"\n style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'increment',\n size\n })}>\n <Add size={size} className={iconStyles} />\n </StepButton>\n </div>}\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }\n }\n </AriaNumberField>\n );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n [props, ref] = useContextProps(props, ref, ButtonContext as any);\n let ctx = props as any;\n /**\n * Must use div for now because Safari pointer event bugs on disabled form elements.\n * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n */\n let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover(props);\n let renderProps = useRenderProps({\n ...props,\n values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n defaultClassName: 'react-aria-Button'\n });\n return (\n <div\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-pressed={ctx.isPressed || isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n let {\n className,\n style,\n children,\n defaultClassName = undefined,\n defaultChildren = undefined,\n defaultStyle,\n values\n } = props;\n\n return useMemo(() => {\n let computedClassName: string | undefined;\n let computedStyle: CSSProperties | undefined;\n let computedChildren: ReactNode | undefined;\n\n if (typeof className === 'function') {\n computedClassName = className({...values, defaultClassName});\n } else {\n computedClassName = className;\n }\n\n if (typeof style === 'function') {\n computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n } else {\n computedStyle = style;\n }\n\n if (typeof children === 'function') {\n computedChildren = children({...values, defaultChildren});\n } else if (children == null) {\n computedChildren = defaultChildren;\n } else {\n computedChildren = children;\n }\n\n return {\n className: computedClassName ?? defaultClassName,\n style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n children: computedChildren ?? defaultChildren,\n 'data-rac': ''\n };\n }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}
|