@react-spectrum/numberfield 3.9.1 → 3.9.2

package/dist/NumberField.main.js

@@ -0,0 +1,149 @@
+var $2f3cded204daae76$exports = require("./StepButton.main.js");
+require("./vars.07bdf9be.css");
+var $3649bcbba015c4d7$exports = require("./stepper_vars_css.main.js");
+var $3d7oE$reactspectrumutils = require("@react-spectrum/utils");
+var $3d7oE$reactspectrumlabel = require("@react-spectrum/label");
+var $3d7oE$reactariafocus = require("@react-aria/focus");
+var $3d7oE$reactariautils = require("@react-aria/utils");
+var $3d7oE$reactstatelynumberfield = require("@react-stately/numberfield");
+var $3d7oE$react = require("react");
+var $3d7oE$reactspectrumtextfield = require("@react-spectrum/textfield");
+var $3d7oE$reactspectrumform = require("@react-spectrum/form");
+var $3d7oE$reactariainteractions = require("@react-aria/interactions");
+var $3d7oE$reactariai18n = require("@react-aria/i18n");
+var $3d7oE$reactarianumberfield = require("@react-aria/numberfield");
+var $3d7oE$reactspectrumprovider = require("@react-spectrum/provider");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "NumberField", () => $9b3df9c012d62e52$export$63c5fa0b2fdccd2e);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $9b3df9c012d62e52$var$NumberField(props, ref) {
+    props = (0, $3d7oE$reactspectrumprovider.useProviderProps)(props);
+    props = (0, $3d7oE$reactspectrumform.useFormProps)(props);
+    let provider = (0, $3d7oE$reactspectrumprovider.useProvider)();
+    let { isQuiet: isQuiet, isReadOnly: isReadOnly, isDisabled: isDisabled, hideStepper: hideStepper } = props;
+    let { styleProps: style } = (0, $3d7oE$reactspectrumutils.useStyleProps)(props);
+    let { locale: locale } = (0, $3d7oE$reactariai18n.useLocale)();
+    let state = (0, $3d7oE$reactstatelynumberfield.useNumberFieldState)({
+        ...props,
+        locale: locale
+    });
+    let inputRef = (0, $3d7oE$react.useRef)(null);
+    let domRef = (0, $3d7oE$reactspectrumutils.useFocusableRef)(ref, inputRef);
+    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);
+    let isMobile = provider.scale === "large";
+    let showStepper = !hideStepper;
+    let { isHovered: isHovered, hoverProps: hoverProps } = (0, $3d7oE$reactariainteractions.useHover)({
+        isDisabled: isDisabled
+    });
+    let validationState = props.validationState || (isInvalid ? "invalid" : undefined);
+    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
+    !props.label && style.className ? style.className : "", {
+        "spectrum-Stepper--isQuiet": isQuiet,
+        "is-disabled": isDisabled,
+        "spectrum-Stepper--readonly": isReadOnly,
+        "is-invalid": validationState === "invalid" && !isDisabled,
+        "spectrum-Stepper--showStepper": showStepper,
+        "spectrum-Stepper--isMobile": isMobile,
+        "is-hovered": isHovered
+    });
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $3d7oE$reactspectrumlabel.Field), {
+        ...props,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        labelProps: labelProps,
+        ref: domRef,
+        wrapperClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-container", {
+            "spectrum-Stepper-container--isMobile": isMobile
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement($9b3df9c012d62e52$var$NumberFieldInput, {
+        ...props,
+        groupProps: (0, $3d7oE$reactariautils.mergeProps)(groupProps, hoverProps),
+        inputProps: inputProps,
+        inputRef: inputRef,
+        incrementProps: incrementButtonProps,
+        decrementProps: decrementButtonProps,
+        className: className,
+        style: style,
+        state: state,
+        validationState: validationState
+    }));
+}
+const $9b3df9c012d62e52$var$NumberFieldInput = /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).forwardRef(function NumberFieldInput(props, ref) {
+    let { groupProps: groupProps, inputProps: inputProps, inputRef: inputRef, incrementProps: incrementProps, decrementProps: decrementProps, className: className, style: style, autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, hideStepper: hideStepper, validationState: validationState, name: name, state: state } = props;
+    let showStepper = !hideStepper;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $3d7oE$reactariafocus.FocusRing), {
+        within: true,
+        isTextInput: true,
+        focusClass: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "is-focused"),
+        focusRingClass: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "focus-ring"),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement("div", {
+        ...groupProps,
+        ref: ref,
+        style: style,
+        className: className
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $3d7oE$reactspectrumtextfield.TextFieldBase), {
+        UNSAFE_className: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-field"),
+        inputClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-input"),
+        validationIconClassName: (0, $3d7oE$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-icon"),
+        isQuiet: isQuiet,
+        inputRef: inputRef,
+        validationState: validationState,
+        inputProps: inputProps,
+        isDisabled: isDisabled,
+        disableFocusRing: true
+    }), showStepper && /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, ($parcel$interopDefault($3d7oE$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $2f3cded204daae76$exports.StepButton), {
+        direction: "up",
+        isQuiet: isQuiet,
+        ...incrementProps
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement((0, $2f3cded204daae76$exports.StepButton), {
+        direction: "down",
+        isQuiet: isQuiet,
+        ...decrementProps
+    })), name && /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).createElement("input", {
+        type: "hidden",
+        name: name,
+        value: isNaN(state.numberValue) ? "" : state.numberValue
+    })));
+});
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */ let $9b3df9c012d62e52$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, ($parcel$interopDefault($3d7oE$react))).forwardRef($9b3df9c012d62e52$var$NumberField);
+
+
+//# sourceMappingURL=NumberField.main.js.map

package/dist/NumberField.main.js.map

@@ -0,0 +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, RefObject, 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>,\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

@@ -0,0 +1,144 @@
+import {StepButton as $7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa} from "./StepButton.mjs";
+import "./vars.07bdf9be.css";
+import $5I0aR$stepper_vars_cssmodulejs from "./stepper_vars_css.mjs";
+import {useStyleProps as $5I0aR$useStyleProps, useFocusableRef as $5I0aR$useFocusableRef, classNames as $5I0aR$classNames} from "@react-spectrum/utils";
+import {Field as $5I0aR$Field} from "@react-spectrum/label";
+import {FocusRing as $5I0aR$FocusRing} from "@react-aria/focus";
+import {mergeProps as $5I0aR$mergeProps} from "@react-aria/utils";
+import {useNumberFieldState as $5I0aR$useNumberFieldState} from "@react-stately/numberfield";
+import $5I0aR$react, {useRef as $5I0aR$useRef} from "react";
+import {TextFieldBase as $5I0aR$TextFieldBase} from "@react-spectrum/textfield";
+import {useFormProps as $5I0aR$useFormProps} from "@react-spectrum/form";
+import {useHover as $5I0aR$useHover} from "@react-aria/interactions";
+import {useLocale as $5I0aR$useLocale} from "@react-aria/i18n";
+import {useNumberField as $5I0aR$useNumberField} from "@react-aria/numberfield";
+import {useProviderProps as $5I0aR$useProviderProps, useProvider as $5I0aR$useProvider} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $48b879bdd771eb85$var$NumberField(props, ref) {
+    props = (0, $5I0aR$useProviderProps)(props);
+    props = (0, $5I0aR$useFormProps)(props);
+    let provider = (0, $5I0aR$useProvider)();
+    let { isQuiet: isQuiet, isReadOnly: isReadOnly, isDisabled: isDisabled, hideStepper: hideStepper } = props;
+    let { styleProps: style } = (0, $5I0aR$useStyleProps)(props);
+    let { locale: locale } = (0, $5I0aR$useLocale)();
+    let state = (0, $5I0aR$useNumberFieldState)({
+        ...props,
+        locale: locale
+    });
+    let inputRef = (0, $5I0aR$useRef)(null);
+    let domRef = (0, $5I0aR$useFocusableRef)(ref, inputRef);
+    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);
+    let isMobile = provider.scale === "large";
+    let showStepper = !hideStepper;
+    let { isHovered: isHovered, hoverProps: hoverProps } = (0, $5I0aR$useHover)({
+        isDisabled: isDisabled
+    });
+    let validationState = props.validationState || (isInvalid ? "invalid" : undefined);
+    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
+    !props.label && style.className ? style.className : "", {
+        "spectrum-Stepper--isQuiet": isQuiet,
+        "is-disabled": isDisabled,
+        "spectrum-Stepper--readonly": isReadOnly,
+        "is-invalid": validationState === "invalid" && !isDisabled,
+        "spectrum-Stepper--showStepper": showStepper,
+        "spectrum-Stepper--isMobile": isMobile,
+        "is-hovered": isHovered
+    });
+    return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$Field), {
+        ...props,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        labelProps: labelProps,
+        ref: domRef,
+        wrapperClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-container", {
+            "spectrum-Stepper-container--isMobile": isMobile
+        })
+    }, /*#__PURE__*/ (0, $5I0aR$react).createElement($48b879bdd771eb85$var$NumberFieldInput, {
+        ...props,
+        groupProps: (0, $5I0aR$mergeProps)(groupProps, hoverProps),
+        inputProps: inputProps,
+        inputRef: inputRef,
+        incrementProps: incrementButtonProps,
+        decrementProps: decrementButtonProps,
+        className: className,
+        style: style,
+        state: state,
+        validationState: validationState
+    }));
+}
+const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).forwardRef(function NumberFieldInput(props, ref) {
+    let { groupProps: groupProps, inputProps: inputProps, inputRef: inputRef, incrementProps: incrementProps, decrementProps: decrementProps, className: className, style: style, autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, hideStepper: hideStepper, validationState: validationState, name: name, state: state } = props;
+    let showStepper = !hideStepper;
+    return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$FocusRing), {
+        within: true,
+        isTextInput: true,
+        focusClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "is-focused"),
+        focusRingClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "focus-ring"),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, $5I0aR$react).createElement("div", {
+        ...groupProps,
+        ref: ref,
+        style: style,
+        className: className
+    }, /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$TextFieldBase), {
+        UNSAFE_className: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-field"),
+        inputClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-input"),
+        validationIconClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-icon"),
+        isQuiet: isQuiet,
+        inputRef: inputRef,
+        validationState: validationState,
+        inputProps: inputProps,
+        isDisabled: isDisabled,
+        disableFocusRing: true
+    }), showStepper && /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$react).Fragment, null, /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa), {
+        direction: "up",
+        isQuiet: isQuiet,
+        ...incrementProps
+    }), /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa), {
+        direction: "down",
+        isQuiet: isQuiet,
+        ...decrementProps
+    })), name && /*#__PURE__*/ (0, $5I0aR$react).createElement("input", {
+        type: "hidden",
+        name: name,
+        value: isNaN(state.numberValue) ? "" : state.numberValue
+    })));
+});
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */ let $48b879bdd771eb85$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5I0aR$react).forwardRef($48b879bdd771eb85$var$NumberField);
+
+
+export {$48b879bdd771eb85$export$63c5fa0b2fdccd2e as NumberField};
+//# sourceMappingURL=NumberField.mjs.map

package/dist/NumberField.module.js

@@ -0,0 +1,144 @@
+import {StepButton as $7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa} from "./StepButton.module.js";
+import "./vars.07bdf9be.css";
+import $5I0aR$stepper_vars_cssmodulejs from "./stepper_vars_css.module.js";
+import {useStyleProps as $5I0aR$useStyleProps, useFocusableRef as $5I0aR$useFocusableRef, classNames as $5I0aR$classNames} from "@react-spectrum/utils";
+import {Field as $5I0aR$Field} from "@react-spectrum/label";
+import {FocusRing as $5I0aR$FocusRing} from "@react-aria/focus";
+import {mergeProps as $5I0aR$mergeProps} from "@react-aria/utils";
+import {useNumberFieldState as $5I0aR$useNumberFieldState} from "@react-stately/numberfield";
+import $5I0aR$react, {useRef as $5I0aR$useRef} from "react";
+import {TextFieldBase as $5I0aR$TextFieldBase} from "@react-spectrum/textfield";
+import {useFormProps as $5I0aR$useFormProps} from "@react-spectrum/form";
+import {useHover as $5I0aR$useHover} from "@react-aria/interactions";
+import {useLocale as $5I0aR$useLocale} from "@react-aria/i18n";
+import {useNumberField as $5I0aR$useNumberField} from "@react-aria/numberfield";
+import {useProviderProps as $5I0aR$useProviderProps, useProvider as $5I0aR$useProvider} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $48b879bdd771eb85$var$NumberField(props, ref) {
+    props = (0, $5I0aR$useProviderProps)(props);
+    props = (0, $5I0aR$useFormProps)(props);
+    let provider = (0, $5I0aR$useProvider)();
+    let { isQuiet: isQuiet, isReadOnly: isReadOnly, isDisabled: isDisabled, hideStepper: hideStepper } = props;
+    let { styleProps: style } = (0, $5I0aR$useStyleProps)(props);
+    let { locale: locale } = (0, $5I0aR$useLocale)();
+    let state = (0, $5I0aR$useNumberFieldState)({
+        ...props,
+        locale: locale
+    });
+    let inputRef = (0, $5I0aR$useRef)(null);
+    let domRef = (0, $5I0aR$useFocusableRef)(ref, inputRef);
+    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);
+    let isMobile = provider.scale === "large";
+    let showStepper = !hideStepper;
+    let { isHovered: isHovered, hoverProps: hoverProps } = (0, $5I0aR$useHover)({
+        isDisabled: isDisabled
+    });
+    let validationState = props.validationState || (isInvalid ? "invalid" : undefined);
+    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
+    !props.label && style.className ? style.className : "", {
+        "spectrum-Stepper--isQuiet": isQuiet,
+        "is-disabled": isDisabled,
+        "spectrum-Stepper--readonly": isReadOnly,
+        "is-invalid": validationState === "invalid" && !isDisabled,
+        "spectrum-Stepper--showStepper": showStepper,
+        "spectrum-Stepper--isMobile": isMobile,
+        "is-hovered": isHovered
+    });
+    return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$Field), {
+        ...props,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        labelProps: labelProps,
+        ref: domRef,
+        wrapperClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-container", {
+            "spectrum-Stepper-container--isMobile": isMobile
+        })
+    }, /*#__PURE__*/ (0, $5I0aR$react).createElement($48b879bdd771eb85$var$NumberFieldInput, {
+        ...props,
+        groupProps: (0, $5I0aR$mergeProps)(groupProps, hoverProps),
+        inputProps: inputProps,
+        inputRef: inputRef,
+        incrementProps: incrementButtonProps,
+        decrementProps: decrementButtonProps,
+        className: className,
+        style: style,
+        state: state,
+        validationState: validationState
+    }));
+}
+const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $5I0aR$react).forwardRef(function NumberFieldInput(props, ref) {
+    let { groupProps: groupProps, inputProps: inputProps, inputRef: inputRef, incrementProps: incrementProps, decrementProps: decrementProps, className: className, style: style, autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, hideStepper: hideStepper, validationState: validationState, name: name, state: state } = props;
+    let showStepper = !hideStepper;
+    return /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$FocusRing), {
+        within: true,
+        isTextInput: true,
+        focusClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "is-focused"),
+        focusRingClass: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "focus-ring"),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, $5I0aR$react).createElement("div", {
+        ...groupProps,
+        ref: ref,
+        style: style,
+        className: className
+    }, /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$TextFieldBase), {
+        UNSAFE_className: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-field"),
+        inputClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-input"),
+        validationIconClassName: (0, $5I0aR$classNames)((0, ($parcel$interopDefault($5I0aR$stepper_vars_cssmodulejs))), "spectrum-Stepper-icon"),
+        isQuiet: isQuiet,
+        inputRef: inputRef,
+        validationState: validationState,
+        inputProps: inputProps,
+        isDisabled: isDisabled,
+        disableFocusRing: true
+    }), showStepper && /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $5I0aR$react).Fragment, null, /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa), {
+        direction: "up",
+        isQuiet: isQuiet,
+        ...incrementProps
+    }), /*#__PURE__*/ (0, $5I0aR$react).createElement((0, $7f00b388e0d3b2f6$export$b2f6b60c1d32d6aa), {
+        direction: "down",
+        isQuiet: isQuiet,
+        ...decrementProps
+    })), name && /*#__PURE__*/ (0, $5I0aR$react).createElement("input", {
+        type: "hidden",
+        name: name,
+        value: isNaN(state.numberValue) ? "" : state.numberValue
+    })));
+});
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */ let $48b879bdd771eb85$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5I0aR$react).forwardRef($48b879bdd771eb85$var$NumberField);
+
+
+export {$48b879bdd771eb85$export$63c5fa0b2fdccd2e as NumberField};
+//# sourceMappingURL=NumberField.module.js.map

package/dist/NumberField.module.js.map

@@ -0,0 +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, RefObject, 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>,\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

@@ -0,0 +1,90 @@
+require("./vars.07bdf9be.css");
+var $3649bcbba015c4d7$exports = require("./stepper_vars_css.main.js");
+var $3rHYV$spectrumiconsworkflowAdd = require("@spectrum-icons/workflow/Add");
+var $3rHYV$spectrumiconsuiChevronDownSmall = require("@spectrum-icons/ui/ChevronDownSmall");
+var $3rHYV$spectrumiconsuiChevronUpSmall = require("@spectrum-icons/ui/ChevronUpSmall");
+var $3rHYV$reactspectrumutils = require("@react-spectrum/utils");
+var $3rHYV$reactariafocus = require("@react-aria/focus");
+var $3rHYV$reactariautils = require("@react-aria/utils");
+var $3rHYV$react = require("react");
+var $3rHYV$spectrumiconsworkflowRemove = require("@spectrum-icons/workflow/Remove");
+var $3rHYV$reactariabutton = require("@react-aria/button");
+var $3rHYV$reactariainteractions = require("@react-aria/interactions");
+var $3rHYV$reactspectrumprovider = require("@react-spectrum/provider");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "StepButton", () => $2f3cded204daae76$export$b2f6b60c1d32d6aa);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+function $2f3cded204daae76$var$StepButton(props, ref) {
+    props = (0, $3rHYV$reactspectrumprovider.useProviderProps)(props);
+    let { scale: scale } = (0, $3rHYV$reactspectrumprovider.useProvider)();
+    let { direction: direction, isDisabled: isDisabled, isQuiet: isQuiet } = props;
+    let domRef = (0, $3rHYV$reactspectrumutils.useFocusableRef)(ref);
+    /**
+   * Must use div for now because Safari pointer event bugs on disabled form elements.
+   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.
+   */ let { buttonProps: buttonProps, isPressed: isPressed } = (0, $3rHYV$reactariabutton.useButton)({
+        ...props,
+        elementType: "div"
+    }, domRef);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3rHYV$reactariainteractions.useHover)(props);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, $3rHYV$reactariafocus.FocusRing), {
+        focusRingClass: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "focus-ring")
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement("div", {
+        className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-button", {
+            "spectrum-Stepper-button--stepUp": direction === "up",
+            "spectrum-Stepper-button--stepDown": direction === "down",
+            "spectrum-Stepper-button--isQuiet": isQuiet,
+            "is-hovered": isHovered,
+            "is-active": isPressed,
+            "is-disabled": isDisabled
+        }),
+        ...(0, $3rHYV$reactariautils.mergeProps)(hoverProps, buttonProps),
+        ref: domRef
+    }, direction === "up" && scale === "large" && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsworkflowAdd))), {
+        UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-button-icon", "spectrum-Stepper-stepUpIcon"),
+        size: "S"
+    }), direction === "up" && scale === "medium" && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsuiChevronUpSmall))), {
+        UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-button-icon", "spectrum-Stepper-stepUpIcon")
+    }), direction === "down" && scale === "large" && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsworkflowRemove))), {
+        UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-button-icon", "spectrum-Stepper-stepDownIcon"),
+        size: "S"
+    }), direction === "down" && scale === "medium" && /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).createElement((0, ($parcel$interopDefault($3rHYV$spectrumiconsuiChevronDownSmall))), {
+        UNSAFE_className: (0, $3rHYV$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3649bcbba015c4d7$exports))), "spectrum-Stepper-button-icon", "spectrum-Stepper-stepDownIcon")
+    })));
+}
+/**
+ * Buttons for NumberField.
+ */ let $2f3cded204daae76$export$b2f6b60c1d32d6aa = /*#__PURE__*/ (0, ($parcel$interopDefault($3rHYV$react))).forwardRef($2f3cded204daae76$var$StepButton);
+
+
+//# sourceMappingURL=StepButton.main.js.map

package/dist/StepButton.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAsBD,SAAS,iCAAW,KAAsB,EAAE,GAAiC;IAC3E,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,wCAAU;IACxB,IAAI,aAAC,SAAS,cAAE,UAAU,WAAE,OAAO,EAAC,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B;;;GAGC,GACD,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gCAAQ,EAAE;QAAC,GAAG,KAAK;QAAE,aAAa;IAAK,GAAG;IACzE,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;IACvC,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG;qBAClD,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAW,GACX,2BACA;YACE,mCAAmC,cAAc;YACjD,qCAAqC,cAAc;YACnD,oCAAoC;YACpC,cAAc;YACd,aAAa;YACb,eAAe;QACjB;QAGH,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY,YAAY;QACvC,KAAK;OACJ,cAAc,QAAQ,UAAU,yBAC/B,0DAAC,CAAA,GAAA,yDAAE;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,gCAAgC;QAAgC,MAAK;QAEtH,cAAc,QAAQ,UAAU,0BAC/B,0DAAC,CAAA,GAAA,8DAAa;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,gCAAgC;QAE5F,cAAc,UAAU,UAAU,yBACjC,0DAAC,CAAA,GAAA,4DAAK;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,gCAAgC;QAAkC,MAAK;QAE3H,cAAc,UAAU,UAAU,0BACjC,0DAAC,CAAA,GAAA,gEAAe;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,gCAAgC;;AAKvG;AAEA;;CAEC,GACD,IAAI,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/numberfield/src/StepButton.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 Add from '@spectrum-icons/workflow/Add';\nimport {AriaButtonProps} from '@react-types/button';\nimport ChevronDownSmall from '@spectrum-icons/ui/ChevronDownSmall';\nimport ChevronUpSmall from '@spectrum-icons/ui/ChevronUpSmall';\nimport {classNames, useFocusableRef} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement} from 'react';\nimport Remove from '@spectrum-icons/workflow/Remove';\nimport stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';\nimport {useButton} from '@react-aria/button';\nimport {useHover} from '@react-aria/interactions';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\ninterface StepButtonProps extends AriaButtonProps {\n  isQuiet?: boolean,\n  direction: 'up' | 'down'\n}\n\nfunction StepButton(props: StepButtonProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let {scale} = useProvider();\n  let {direction, isDisabled, isQuiet} = props;\n  let domRef = useFocusableRef(ref);\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'}, domRef);\n  let {hoverProps, isHovered} = useHover(props);\n  return (\n    <FocusRing focusRingClass={classNames(stepperStyle, 'focus-ring')}>\n      <div\n        className={\n          classNames(\n            stepperStyle,\n            'spectrum-Stepper-button',\n            {\n              'spectrum-Stepper-button--stepUp': direction === 'up',\n              'spectrum-Stepper-button--stepDown': direction === 'down',\n              'spectrum-Stepper-button--isQuiet': isQuiet,\n              'is-hovered': isHovered,\n              'is-active': isPressed,\n              'is-disabled': isDisabled\n            }\n          )\n        }\n        {...mergeProps(hoverProps, buttonProps)}\n        ref={domRef}>\n        {direction === 'up' && scale === 'large' &&\n          <Add UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon')} size=\"S\" />\n        }\n        {direction === 'up' && scale === 'medium' &&\n          <ChevronUpSmall UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon')} />\n        }\n        {direction === 'down' && scale === 'large' &&\n          <Remove UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon')} size=\"S\" />\n        }\n        {direction === 'down' && scale === 'medium' &&\n          <ChevronDownSmall UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepDownIcon')} />\n        }\n      </div>\n    </FocusRing>\n  );\n}\n\n/**\n * Buttons for NumberField.\n */\nlet _StepButton = React.forwardRef(StepButton) as (props: StepButtonProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_StepButton as StepButton};\n"],"names":[],"version":3,"file":"StepButton.main.js.map"}