@react-spectrum/numberfield 3.9.2 → 3.9.4
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/NumberField.main.js +19 -19
- package/dist/NumberField.main.js.map +1 -1
- package/dist/NumberField.mjs +20 -20
- package/dist/NumberField.module.js +19 -19
- package/dist/NumberField.module.js.map +1 -1
- package/dist/StepButton.main.js +17 -17
- package/dist/StepButton.mjs +18 -18
- package/dist/StepButton.module.js +17 -17
- package/dist/stepper_vars_css.mjs +1 -1
- package/package.json +20 -20
- package/src/NumberField.tsx +3 -3
package/dist/NumberField.main.js
CHANGED
|
@@ -62,21 +62,21 @@ function $9b3df9c012d62e52$var$NumberField(props, ref) {
|
|
|
62
62
|
let inputRef = (0, $3d7oE$react.useRef)(null);
|
|
63
63
|
let domRef = (0, $3d7oE$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
64
64
|
let { groupProps: groupProps, labelProps: labelProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $3d7oE$reactarianumberfield.useNumberField)(props, state, inputRef);
|
|
65
|
-
let isMobile = provider.scale ===
|
|
65
|
+
let isMobile = provider.scale === 'large';
|
|
66
66
|
let showStepper = !hideStepper;
|
|
67
67
|
let { isHovered: isHovered, hoverProps: hoverProps } = (0, $3d7oE$reactariainteractions.useHover)({
|
|
68
68
|
isDisabled: isDisabled
|
|
69
69
|
});
|
|
70
|
-
let validationState = props.validationState || (isInvalid ?
|
|
71
|
-
let className = (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
72
|
-
!props.label && style.className ? style.className :
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
|
|
71
|
+
let className = (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper', // because FocusRing won't pass along the className from Field, we have to handle that ourselves
|
|
72
|
+
!props.label && style.className ? style.className : '', {
|
|
73
|
+
'spectrum-Stepper--isQuiet': isQuiet,
|
|
74
|
+
'is-disabled': isDisabled,
|
|
75
|
+
'spectrum-Stepper--readonly': isReadOnly,
|
|
76
|
+
'is-invalid': validationState === 'invalid' && !isDisabled,
|
|
77
|
+
'spectrum-Stepper--showStepper': showStepper,
|
|
78
|
+
'spectrum-Stepper--isMobile': isMobile,
|
|
79
|
+
'is-hovered': isHovered
|
|
80
80
|
});
|
|
81
81
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $3d7oE$reactspectrumlabel.Field), {
|
|
82
82
|
...props,
|
|
@@ -87,8 +87,8 @@ function $9b3df9c012d62e52$var$NumberField(props, ref) {
|
|
|
87
87
|
validationDetails: validationDetails,
|
|
88
88
|
labelProps: labelProps,
|
|
89
89
|
ref: domRef,
|
|
90
|
-
wrapperClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
91
|
-
|
|
90
|
+
wrapperClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-container', {
|
|
91
|
+
'spectrum-Stepper-container--isMobile': isMobile
|
|
92
92
|
})
|
|
93
93
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement($9b3df9c012d62e52$var$NumberFieldInput, {
|
|
94
94
|
...props,
|
|
@@ -109,8 +109,8 @@ const $9b3df9c012d62e52$var$NumberFieldInput = /*#__PURE__*/ (0, ($parcel$intero
|
|
|
109
109
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $3d7oE$reactariafocus.FocusRing), {
|
|
110
110
|
within: true,
|
|
111
111
|
isTextInput: true,
|
|
112
|
-
focusClass: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
113
|
-
focusRingClass: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
112
|
+
focusClass: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'is-focused'),
|
|
113
|
+
focusRingClass: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'focus-ring'),
|
|
114
114
|
autoFocus: autoFocus
|
|
115
115
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement("div", {
|
|
116
116
|
...groupProps,
|
|
@@ -118,9 +118,9 @@ const $9b3df9c012d62e52$var$NumberFieldInput = /*#__PURE__*/ (0, ($parcel$intero
|
|
|
118
118
|
style: style,
|
|
119
119
|
className: className
|
|
120
120
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $3d7oE$reactspectrumtextfield.TextFieldBase), {
|
|
121
|
-
UNSAFE_className: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
122
|
-
inputClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
123
|
-
validationIconClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
121
|
+
UNSAFE_className: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-field'),
|
|
122
|
+
inputClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-input'),
|
|
123
|
+
validationIconClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-icon'),
|
|
124
124
|
isQuiet: isQuiet,
|
|
125
125
|
inputRef: inputRef,
|
|
126
126
|
validationState: validationState,
|
|
@@ -138,7 +138,7 @@ const $9b3df9c012d62e52$var$NumberFieldInput = /*#__PURE__*/ (0, ($parcel$intero
|
|
|
138
138
|
})), name && /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement("input", {
|
|
139
139
|
type: "hidden",
|
|
140
140
|
name: name,
|
|
141
|
-
value: isNaN(state.numberValue) ?
|
|
141
|
+
value: isNaN(state.numberValue) ? '' : state.numberValue
|
|
142
142
|
})));
|
|
143
143
|
});
|
|
144
144
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/numberfield/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps} from '@react-types/button';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport React, {HTMLAttributes, InputHTMLAttributes, Ref,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/numberfield/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps} from '@react-types/button';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef, RefObject} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport React, {HTMLAttributes, InputHTMLAttributes, Ref, useRef} from 'react';\nimport {SpectrumNumberFieldProps} from '@react-types/numberfield';\nimport {StepButton} from './StepButton';\nimport stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useNumberField} from '@react-aria/numberfield';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\nfunction NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let provider = useProvider();\n let {\n isQuiet,\n isReadOnly,\n isDisabled,\n hideStepper\n } = props;\n\n let {styleProps: style} = useStyleProps(props);\n\n let {locale} = useLocale();\n let state = useNumberFieldState({...props, locale});\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useFocusableRef<HTMLElement>(ref, inputRef);\n let {\n groupProps,\n labelProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useNumberField(props, state, inputRef);\n let isMobile = provider.scale === 'large';\n let showStepper = !hideStepper;\n\n let {isHovered, hoverProps} = useHover({isDisabled});\n\n let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);\n let className =\n classNames(\n stepperStyle,\n 'spectrum-Stepper',\n // because FocusRing won't pass along the className from Field, we have to handle that ourselves\n !props.label && style.className ? style.className : '',\n {\n 'spectrum-Stepper--isQuiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-Stepper--readonly': isReadOnly,\n 'is-invalid': validationState === 'invalid' && !isDisabled,\n 'spectrum-Stepper--showStepper': showStepper,\n 'spectrum-Stepper--isMobile': isMobile,\n 'is-hovered': isHovered\n }\n );\n\n return (\n <Field\n {...props as Omit<SpectrumNumberFieldProps, 'onChange'>}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}\n wrapperClassName={classNames(\n stepperStyle,\n 'spectrum-Stepper-container',\n {\n 'spectrum-Stepper-container--isMobile': isMobile\n }\n )}>\n <NumberFieldInput\n {...props}\n groupProps={mergeProps(groupProps, hoverProps)}\n inputProps={inputProps}\n inputRef={inputRef}\n incrementProps={incrementButtonProps}\n decrementProps={decrementButtonProps}\n className={className}\n style={style}\n state={state}\n validationState={validationState} />\n </Field>\n );\n}\n\n\ninterface NumberFieldInputProps extends SpectrumNumberFieldProps {\n groupProps: HTMLAttributes<HTMLDivElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n incrementProps: AriaButtonProps,\n decrementProps: AriaButtonProps,\n className?: string,\n style?: React.CSSProperties,\n state: NumberFieldState\n}\n\nconst NumberFieldInput = React.forwardRef(function NumberFieldInput(props: NumberFieldInputProps, ref: Ref<HTMLDivElement>) {\n let {\n groupProps,\n inputProps,\n inputRef,\n incrementProps,\n decrementProps,\n className,\n style,\n autoFocus,\n isQuiet,\n isDisabled,\n hideStepper,\n validationState,\n name,\n state\n } = props;\n let showStepper = !hideStepper;\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(stepperStyle, 'is-focused')}\n focusRingClass={classNames(stepperStyle, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...groupProps}\n ref={ref}\n style={style}\n className={className}>\n <TextFieldBase\n UNSAFE_className={\n classNames(\n stepperStyle,\n 'spectrum-Stepper-field'\n )\n }\n inputClassName={\n classNames(\n stepperStyle,\n 'spectrum-Stepper-input'\n )\n }\n validationIconClassName={\n classNames(\n stepperStyle,\n 'spectrum-Stepper-icon'\n )\n }\n isQuiet={isQuiet}\n inputRef={inputRef}\n validationState={validationState}\n inputProps={inputProps}\n isDisabled={isDisabled}\n disableFocusRing />\n {showStepper &&\n <>\n <StepButton direction=\"up\" isQuiet={isQuiet} {...incrementProps} />\n <StepButton direction=\"down\" isQuiet={isQuiet} {...decrementProps} />\n </>\n }\n {name && <input type=\"hidden\" name={name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n </div>\n </FocusRing>\n );\n});\n\n/**\n * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nlet _NumberField = React.forwardRef(NumberField);\nexport {_NumberField as NumberField};\n"],"names":[],"version":3,"file":"NumberField.main.js.map"}
|
package/dist/NumberField.mjs
CHANGED
|
@@ -56,21 +56,21 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
56
56
|
let inputRef = (0, $5I0aR$useRef)(null);
|
|
57
57
|
let domRef = (0, $5I0aR$useFocusableRef)(ref, inputRef);
|
|
58
58
|
let { groupProps: groupProps, labelProps: labelProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $5I0aR$useNumberField)(props, state, inputRef);
|
|
59
|
-
let isMobile = provider.scale ===
|
|
59
|
+
let isMobile = provider.scale === 'large';
|
|
60
60
|
let showStepper = !hideStepper;
|
|
61
61
|
let { isHovered: isHovered, hoverProps: hoverProps } = (0, $5I0aR$useHover)({
|
|
62
62
|
isDisabled: isDisabled
|
|
63
63
|
});
|
|
64
|
-
let validationState = props.validationState || (isInvalid ?
|
|
65
|
-
let className = (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
66
|
-
!props.label && style.className ? style.className :
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
64
|
+
let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
|
|
65
|
+
let className = (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper', // because FocusRing won't pass along the className from Field, we have to handle that ourselves
|
|
66
|
+
!props.label && style.className ? style.className : '', {
|
|
67
|
+
'spectrum-Stepper--isQuiet': isQuiet,
|
|
68
|
+
'is-disabled': isDisabled,
|
|
69
|
+
'spectrum-Stepper--readonly': isReadOnly,
|
|
70
|
+
'is-invalid': validationState === 'invalid' && !isDisabled,
|
|
71
|
+
'spectrum-Stepper--showStepper': showStepper,
|
|
72
|
+
'spectrum-Stepper--isMobile': isMobile,
|
|
73
|
+
'is-hovered': isHovered
|
|
74
74
|
});
|
|
75
75
|
return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$Field), {
|
|
76
76
|
...props,
|
|
@@ -81,8 +81,8 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
81
81
|
validationDetails: validationDetails,
|
|
82
82
|
labelProps: labelProps,
|
|
83
83
|
ref: domRef,
|
|
84
|
-
wrapperClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
85
|
-
|
|
84
|
+
wrapperClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-container', {
|
|
85
|
+
'spectrum-Stepper-container--isMobile': isMobile
|
|
86
86
|
})
|
|
87
87
|
}, /*#__PURE__*/ (0, $5I0aR$react).createElement($48b879bdd771eb85$var$NumberFieldInput, {
|
|
88
88
|
...props,
|
|
@@ -103,8 +103,8 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
103
103
|
return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$FocusRing), {
|
|
104
104
|
within: true,
|
|
105
105
|
isTextInput: true,
|
|
106
|
-
focusClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
107
|
-
focusRingClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
106
|
+
focusClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'is-focused'),
|
|
107
|
+
focusRingClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'focus-ring'),
|
|
108
108
|
autoFocus: autoFocus
|
|
109
109
|
}, /*#__PURE__*/ (0, $5I0aR$react).createElement("div", {
|
|
110
110
|
...groupProps,
|
|
@@ -112,9 +112,9 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
112
112
|
style: style,
|
|
113
113
|
className: className
|
|
114
114
|
}, /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$TextFieldBase), {
|
|
115
|
-
UNSAFE_className: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
116
|
-
inputClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
117
|
-
validationIconClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
115
|
+
UNSAFE_className: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-field'),
|
|
116
|
+
inputClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-input'),
|
|
117
|
+
validationIconClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-icon'),
|
|
118
118
|
isQuiet: isQuiet,
|
|
119
119
|
inputRef: inputRef,
|
|
120
120
|
validationState: validationState,
|
|
@@ -132,7 +132,7 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
132
132
|
})), name && /*#__PURE__*/ (0, $5I0aR$react).createElement("input", {
|
|
133
133
|
type: "hidden",
|
|
134
134
|
name: name,
|
|
135
|
-
value: isNaN(state.numberValue) ?
|
|
135
|
+
value: isNaN(state.numberValue) ? '' : state.numberValue
|
|
136
136
|
})));
|
|
137
137
|
});
|
|
138
138
|
/**
|
|
@@ -141,4 +141,4 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
export {$48b879bdd771eb85$export$63c5fa0b2fdccd2e as NumberField};
|
|
144
|
-
//# sourceMappingURL=NumberField.
|
|
144
|
+
//# sourceMappingURL=NumberField.module.js.map
|
|
@@ -56,21 +56,21 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
56
56
|
let inputRef = (0, $5I0aR$useRef)(null);
|
|
57
57
|
let domRef = (0, $5I0aR$useFocusableRef)(ref, inputRef);
|
|
58
58
|
let { groupProps: groupProps, labelProps: labelProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $5I0aR$useNumberField)(props, state, inputRef);
|
|
59
|
-
let isMobile = provider.scale ===
|
|
59
|
+
let isMobile = provider.scale === 'large';
|
|
60
60
|
let showStepper = !hideStepper;
|
|
61
61
|
let { isHovered: isHovered, hoverProps: hoverProps } = (0, $5I0aR$useHover)({
|
|
62
62
|
isDisabled: isDisabled
|
|
63
63
|
});
|
|
64
|
-
let validationState = props.validationState || (isInvalid ?
|
|
65
|
-
let className = (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
66
|
-
!props.label && style.className ? style.className :
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
64
|
+
let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
|
|
65
|
+
let className = (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper', // because FocusRing won't pass along the className from Field, we have to handle that ourselves
|
|
66
|
+
!props.label && style.className ? style.className : '', {
|
|
67
|
+
'spectrum-Stepper--isQuiet': isQuiet,
|
|
68
|
+
'is-disabled': isDisabled,
|
|
69
|
+
'spectrum-Stepper--readonly': isReadOnly,
|
|
70
|
+
'is-invalid': validationState === 'invalid' && !isDisabled,
|
|
71
|
+
'spectrum-Stepper--showStepper': showStepper,
|
|
72
|
+
'spectrum-Stepper--isMobile': isMobile,
|
|
73
|
+
'is-hovered': isHovered
|
|
74
74
|
});
|
|
75
75
|
return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$Field), {
|
|
76
76
|
...props,
|
|
@@ -81,8 +81,8 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
81
81
|
validationDetails: validationDetails,
|
|
82
82
|
labelProps: labelProps,
|
|
83
83
|
ref: domRef,
|
|
84
|
-
wrapperClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
85
|
-
|
|
84
|
+
wrapperClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-container', {
|
|
85
|
+
'spectrum-Stepper-container--isMobile': isMobile
|
|
86
86
|
})
|
|
87
87
|
}, /*#__PURE__*/ (0, $5I0aR$react).createElement($48b879bdd771eb85$var$NumberFieldInput, {
|
|
88
88
|
...props,
|
|
@@ -103,8 +103,8 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
103
103
|
return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$FocusRing), {
|
|
104
104
|
within: true,
|
|
105
105
|
isTextInput: true,
|
|
106
|
-
focusClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
107
|
-
focusRingClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
106
|
+
focusClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'is-focused'),
|
|
107
|
+
focusRingClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'focus-ring'),
|
|
108
108
|
autoFocus: autoFocus
|
|
109
109
|
}, /*#__PURE__*/ (0, $5I0aR$react).createElement("div", {
|
|
110
110
|
...groupProps,
|
|
@@ -112,9 +112,9 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
112
112
|
style: style,
|
|
113
113
|
className: className
|
|
114
114
|
}, /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$TextFieldBase), {
|
|
115
|
-
UNSAFE_className: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
116
|
-
inputClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
117
|
-
validationIconClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))),
|
|
115
|
+
UNSAFE_className: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-field'),
|
|
116
|
+
inputClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-input'),
|
|
117
|
+
validationIconClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), 'spectrum-Stepper-icon'),
|
|
118
118
|
isQuiet: isQuiet,
|
|
119
119
|
inputRef: inputRef,
|
|
120
120
|
validationState: validationState,
|
|
@@ -132,7 +132,7 @@ const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).f
|
|
|
132
132
|
})), name && /*#__PURE__*/ (0, $5I0aR$react).createElement("input", {
|
|
133
133
|
type: "hidden",
|
|
134
134
|
name: name,
|
|
135
|
-
value: isNaN(state.numberValue) ?
|
|
135
|
+
value: isNaN(state.numberValue) ? '' : state.numberValue
|
|
136
136
|
})));
|
|
137
137
|
});
|
|
138
138
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/numberfield/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps} from '@react-types/button';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport React, {HTMLAttributes, InputHTMLAttributes, Ref,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/numberfield/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps} from '@react-types/button';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef, RefObject} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport React, {HTMLAttributes, InputHTMLAttributes, Ref, useRef} from 'react';\nimport {SpectrumNumberFieldProps} from '@react-types/numberfield';\nimport {StepButton} from './StepButton';\nimport stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useNumberField} from '@react-aria/numberfield';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\nfunction NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let provider = useProvider();\n let {\n isQuiet,\n isReadOnly,\n isDisabled,\n hideStepper\n } = props;\n\n let {styleProps: style} = useStyleProps(props);\n\n let {locale} = useLocale();\n let state = useNumberFieldState({...props, locale});\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useFocusableRef<HTMLElement>(ref, inputRef);\n let {\n groupProps,\n labelProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n } = useNumberField(props, state, inputRef);\n let isMobile = provider.scale === 'large';\n let showStepper = !hideStepper;\n\n let {isHovered, hoverProps} = useHover({isDisabled});\n\n let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);\n let className =\n classNames(\n stepperStyle,\n 'spectrum-Stepper',\n // because FocusRing won't pass along the className from Field, we have to handle that ourselves\n !props.label && style.className ? style.className : '',\n {\n 'spectrum-Stepper--isQuiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-Stepper--readonly': isReadOnly,\n 'is-invalid': validationState === 'invalid' && !isDisabled,\n 'spectrum-Stepper--showStepper': showStepper,\n 'spectrum-Stepper--isMobile': isMobile,\n 'is-hovered': isHovered\n }\n );\n\n return (\n <Field\n {...props as Omit<SpectrumNumberFieldProps, 'onChange'>}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}\n wrapperClassName={classNames(\n stepperStyle,\n 'spectrum-Stepper-container',\n {\n 'spectrum-Stepper-container--isMobile': isMobile\n }\n )}>\n <NumberFieldInput\n {...props}\n groupProps={mergeProps(groupProps, hoverProps)}\n inputProps={inputProps}\n inputRef={inputRef}\n incrementProps={incrementButtonProps}\n decrementProps={decrementButtonProps}\n className={className}\n style={style}\n state={state}\n validationState={validationState} />\n </Field>\n );\n}\n\n\ninterface NumberFieldInputProps extends SpectrumNumberFieldProps {\n groupProps: HTMLAttributes<HTMLDivElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n incrementProps: AriaButtonProps,\n decrementProps: AriaButtonProps,\n className?: string,\n style?: React.CSSProperties,\n state: NumberFieldState\n}\n\nconst NumberFieldInput = React.forwardRef(function NumberFieldInput(props: NumberFieldInputProps, ref: Ref<HTMLDivElement>) {\n let {\n groupProps,\n inputProps,\n inputRef,\n incrementProps,\n decrementProps,\n className,\n style,\n autoFocus,\n isQuiet,\n isDisabled,\n hideStepper,\n validationState,\n name,\n state\n } = props;\n let showStepper = !hideStepper;\n\n return (\n <FocusRing\n within\n isTextInput\n focusClass={classNames(stepperStyle, 'is-focused')}\n focusRingClass={classNames(stepperStyle, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...groupProps}\n ref={ref}\n style={style}\n className={className}>\n <TextFieldBase\n UNSAFE_className={\n classNames(\n stepperStyle,\n 'spectrum-Stepper-field'\n )\n }\n inputClassName={\n classNames(\n stepperStyle,\n 'spectrum-Stepper-input'\n )\n }\n validationIconClassName={\n classNames(\n stepperStyle,\n 'spectrum-Stepper-icon'\n )\n }\n isQuiet={isQuiet}\n inputRef={inputRef}\n validationState={validationState}\n inputProps={inputProps}\n isDisabled={isDisabled}\n disableFocusRing />\n {showStepper &&\n <>\n <StepButton direction=\"up\" isQuiet={isQuiet} {...incrementProps} />\n <StepButton direction=\"down\" isQuiet={isQuiet} {...decrementProps} />\n </>\n }\n {name && <input type=\"hidden\" name={name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n </div>\n </FocusRing>\n );\n});\n\n/**\n * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nlet _NumberField = React.forwardRef(NumberField);\nexport {_NumberField as NumberField};\n"],"names":[],"version":3,"file":"NumberField.module.js.map"}
|
package/dist/StepButton.main.js
CHANGED
|
@@ -54,32 +54,32 @@ function $2f3cded204daae76$var$StepButton(props, ref) {
|
|
|
54
54
|
* Link https://bugs.webkit.org/show_bug.cgi?id=219188.
|
|
55
55
|
*/ let { buttonProps: buttonProps, isPressed: isPressed } = (0, $3rHYV$reactariabutton.useButton)({
|
|
56
56
|
...props,
|
|
57
|
-
elementType:
|
|
57
|
+
elementType: 'div'
|
|
58
58
|
}, domRef);
|
|
59
59
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3rHYV$reactariainteractions.useHover)(props);
|
|
60
60
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, $3rHYV$reactariafocus.FocusRing), {
|
|
61
|
-
focusRingClass: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
61
|
+
focusRingClass: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'focus-ring')
|
|
62
62
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement("div", {
|
|
63
|
-
className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
63
|
+
className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-button', {
|
|
64
|
+
'spectrum-Stepper-button--stepUp': direction === 'up',
|
|
65
|
+
'spectrum-Stepper-button--stepDown': direction === 'down',
|
|
66
|
+
'spectrum-Stepper-button--isQuiet': isQuiet,
|
|
67
|
+
'is-hovered': isHovered,
|
|
68
|
+
'is-active': isPressed,
|
|
69
|
+
'is-disabled': isDisabled
|
|
70
70
|
}),
|
|
71
71
|
...(0, $3rHYV$reactariautils.mergeProps)(hoverProps, buttonProps),
|
|
72
72
|
ref: domRef
|
|
73
|
-
}, direction ===
|
|
74
|
-
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
73
|
+
}, direction === 'up' && scale === 'large' && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsworkflowAdd))), {
|
|
74
|
+
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon'),
|
|
75
75
|
size: "S"
|
|
76
|
-
}), direction ===
|
|
77
|
-
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
78
|
-
}), direction ===
|
|
79
|
-
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
76
|
+
}), direction === 'up' && scale === 'medium' && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsuiChevronUpSmall))), {
|
|
77
|
+
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon')
|
|
78
|
+
}), direction === 'down' && scale === 'large' && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsworkflowRemove))), {
|
|
79
|
+
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon'),
|
|
80
80
|
size: "S"
|
|
81
|
-
}), direction ===
|
|
82
|
-
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))),
|
|
81
|
+
}), direction === 'down' && scale === 'medium' && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsuiChevronDownSmall))), {
|
|
82
|
+
UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon')
|
|
83
83
|
})));
|
|
84
84
|
}
|
|
85
85
|
/**
|
package/dist/StepButton.mjs
CHANGED
|
@@ -48,32 +48,32 @@ function $7f00b388e0d3b2f6$var$StepButton(props, ref) {
|
|
|
48
48
|
* Link https://bugs.webkit.org/show_bug.cgi?id=219188.
|
|
49
49
|
*/ let { buttonProps: buttonProps, isPressed: isPressed } = (0, $3dAkq$useButton)({
|
|
50
50
|
...props,
|
|
51
|
-
elementType:
|
|
51
|
+
elementType: 'div'
|
|
52
52
|
}, domRef);
|
|
53
53
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3dAkq$useHover)(props);
|
|
54
54
|
return /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$FocusRing), {
|
|
55
|
-
focusRingClass: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
55
|
+
focusRingClass: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'focus-ring')
|
|
56
56
|
}, /*#__PURE__*/ (0, $3dAkq$react).createElement("div", {
|
|
57
|
-
className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button', {
|
|
58
|
+
'spectrum-Stepper-button--stepUp': direction === 'up',
|
|
59
|
+
'spectrum-Stepper-button--stepDown': direction === 'down',
|
|
60
|
+
'spectrum-Stepper-button--isQuiet': isQuiet,
|
|
61
|
+
'is-hovered': isHovered,
|
|
62
|
+
'is-active': isPressed,
|
|
63
|
+
'is-disabled': isDisabled
|
|
64
64
|
}),
|
|
65
65
|
...(0, $3dAkq$mergeProps)(hoverProps, buttonProps),
|
|
66
66
|
ref: domRef
|
|
67
|
-
}, direction ===
|
|
68
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
67
|
+
}, direction === 'up' && scale === 'large' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsworkflowAdd), {
|
|
68
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon'),
|
|
69
69
|
size: "S"
|
|
70
|
-
}), direction ===
|
|
71
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
72
|
-
}), direction ===
|
|
73
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
70
|
+
}), direction === 'up' && scale === 'medium' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsuiChevronUpSmall), {
|
|
71
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon')
|
|
72
|
+
}), direction === 'down' && scale === 'large' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsworkflowRemove), {
|
|
73
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon'),
|
|
74
74
|
size: "S"
|
|
75
|
-
}), direction ===
|
|
76
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
75
|
+
}), direction === 'down' && scale === 'medium' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsuiChevronDownSmall), {
|
|
76
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon')
|
|
77
77
|
})));
|
|
78
78
|
}
|
|
79
79
|
/**
|
|
@@ -82,4 +82,4 @@ function $7f00b388e0d3b2f6$var$StepButton(props, ref) {
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
export {$7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa as StepButton};
|
|
85
|
-
//# sourceMappingURL=StepButton.
|
|
85
|
+
//# sourceMappingURL=StepButton.module.js.map
|
|
@@ -48,32 +48,32 @@ function $7f00b388e0d3b2f6$var$StepButton(props, ref) {
|
|
|
48
48
|
* Link https://bugs.webkit.org/show_bug.cgi?id=219188.
|
|
49
49
|
*/ let { buttonProps: buttonProps, isPressed: isPressed } = (0, $3dAkq$useButton)({
|
|
50
50
|
...props,
|
|
51
|
-
elementType:
|
|
51
|
+
elementType: 'div'
|
|
52
52
|
}, domRef);
|
|
53
53
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3dAkq$useHover)(props);
|
|
54
54
|
return /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$FocusRing), {
|
|
55
|
-
focusRingClass: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
55
|
+
focusRingClass: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'focus-ring')
|
|
56
56
|
}, /*#__PURE__*/ (0, $3dAkq$react).createElement("div", {
|
|
57
|
-
className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button', {
|
|
58
|
+
'spectrum-Stepper-button--stepUp': direction === 'up',
|
|
59
|
+
'spectrum-Stepper-button--stepDown': direction === 'down',
|
|
60
|
+
'spectrum-Stepper-button--isQuiet': isQuiet,
|
|
61
|
+
'is-hovered': isHovered,
|
|
62
|
+
'is-active': isPressed,
|
|
63
|
+
'is-disabled': isDisabled
|
|
64
64
|
}),
|
|
65
65
|
...(0, $3dAkq$mergeProps)(hoverProps, buttonProps),
|
|
66
66
|
ref: domRef
|
|
67
|
-
}, direction ===
|
|
68
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
67
|
+
}, direction === 'up' && scale === 'large' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsworkflowAdd), {
|
|
68
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon'),
|
|
69
69
|
size: "S"
|
|
70
|
-
}), direction ===
|
|
71
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
72
|
-
}), direction ===
|
|
73
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
70
|
+
}), direction === 'up' && scale === 'medium' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsuiChevronUpSmall), {
|
|
71
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon')
|
|
72
|
+
}), direction === 'down' && scale === 'large' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsworkflowRemove), {
|
|
73
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon'),
|
|
74
74
|
size: "S"
|
|
75
|
-
}), direction ===
|
|
76
|
-
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))),
|
|
75
|
+
}), direction === 'down' && scale === 'medium' && /*#__PURE__*/ (0, $3dAkq$react).createElement((0, $3dAkq$spectrumiconsuiChevronDownSmall), {
|
|
76
|
+
UNSAFE_className: (0, $3dAkq$classNames)((0, ($parcel$interopDefault($3dAkq$stepper_vars_cssmodulejs))), 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon')
|
|
77
77
|
})));
|
|
78
78
|
}
|
|
79
79
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/numberfield",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.4",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "^3.9.
|
|
40
|
-
"@react-aria/focus": "^3.
|
|
41
|
-
"@react-aria/i18n": "^3.
|
|
42
|
-
"@react-aria/interactions": "^3.
|
|
43
|
-
"@react-aria/numberfield": "^3.11.
|
|
44
|
-
"@react-aria/utils": "^3.
|
|
45
|
-
"@react-spectrum/form": "^3.7.
|
|
46
|
-
"@react-spectrum/label": "^3.16.
|
|
47
|
-
"@react-spectrum/textfield": "^3.12.
|
|
48
|
-
"@react-spectrum/utils": "^3.11.
|
|
49
|
-
"@react-stately/numberfield": "^3.9.
|
|
50
|
-
"@react-types/button": "^3.9.
|
|
51
|
-
"@react-types/numberfield": "^3.8.
|
|
52
|
-
"@react-types/shared": "^3.
|
|
53
|
-
"@spectrum-icons/ui": "^3.6.
|
|
54
|
-
"@spectrum-icons/workflow": "^4.2.
|
|
39
|
+
"@react-aria/button": "^3.9.6",
|
|
40
|
+
"@react-aria/focus": "^3.18.0",
|
|
41
|
+
"@react-aria/i18n": "^3.12.0",
|
|
42
|
+
"@react-aria/interactions": "^3.22.0",
|
|
43
|
+
"@react-aria/numberfield": "^3.11.4",
|
|
44
|
+
"@react-aria/utils": "^3.25.0",
|
|
45
|
+
"@react-spectrum/form": "^3.7.7",
|
|
46
|
+
"@react-spectrum/label": "^3.16.7",
|
|
47
|
+
"@react-spectrum/textfield": "^3.12.2",
|
|
48
|
+
"@react-spectrum/utils": "^3.11.8",
|
|
49
|
+
"@react-stately/numberfield": "^3.9.4",
|
|
50
|
+
"@react-types/button": "^3.9.5",
|
|
51
|
+
"@react-types/numberfield": "^3.8.4",
|
|
52
|
+
"@react-types/shared": "^3.24.0",
|
|
53
|
+
"@spectrum-icons/ui": "^3.6.8",
|
|
54
|
+
"@spectrum-icons/workflow": "^4.2.13",
|
|
55
55
|
"@swc/helpers": "^0.5.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
@@ -60,11 +60,11 @@
|
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"@react-spectrum/provider": "^3.0.0",
|
|
63
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
64
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
63
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
64
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
65
65
|
},
|
|
66
66
|
"publishConfig": {
|
|
67
67
|
"access": "public"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
|
|
70
70
|
}
|
package/src/NumberField.tsx
CHANGED
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
import {AriaButtonProps} from '@react-types/button';
|
|
14
14
|
import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
|
|
15
15
|
import {Field} from '@react-spectrum/label';
|
|
16
|
-
import {FocusableRef} from '@react-types/shared';
|
|
16
|
+
import {FocusableRef, RefObject} from '@react-types/shared';
|
|
17
17
|
import {FocusRing} from '@react-aria/focus';
|
|
18
18
|
import {mergeProps} from '@react-aria/utils';
|
|
19
19
|
import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';
|
|
20
|
-
import React, {HTMLAttributes, InputHTMLAttributes, Ref,
|
|
20
|
+
import React, {HTMLAttributes, InputHTMLAttributes, Ref, useRef} from 'react';
|
|
21
21
|
import {SpectrumNumberFieldProps} from '@react-types/numberfield';
|
|
22
22
|
import {StepButton} from './StepButton';
|
|
23
23
|
import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
|
|
@@ -116,7 +116,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
|
|
|
116
116
|
interface NumberFieldInputProps extends SpectrumNumberFieldProps {
|
|
117
117
|
groupProps: HTMLAttributes<HTMLDivElement>,
|
|
118
118
|
inputProps: InputHTMLAttributes<HTMLInputElement>,
|
|
119
|
-
inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
|
|
119
|
+
inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
|
|
120
120
|
incrementProps: AriaButtonProps,
|
|
121
121
|
decrementProps: AriaButtonProps,
|
|
122
122
|
className?: string,
|