@redsift/design-system 11.6.0 → 11.7.0

package/_internal/NumberField.js

@@ -9,8 +9,9 @@ import { mdiMenuUp, mdiMenuDown } from '@redsift/icons';
 import { S as StyledIconButton } from './styles2.js';
 import { a as useSSRSafeId, u as useLocale } from './context2.js';
 import { N as NumberFormatter, u as useNumberFormatter } from './useNumberFormatter.js';
-import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { u as useLocalizedStringFormatter } from './useLocalizedStringFormatter.js';
 import { b as useLayoutEffect, i as isFirefox, c as isMac, d as isWebKit, e as isIPad, f as useEffectEvent, g as isIOS, h as getOwnerDocument, j as isVirtualPointerEvent, k as isVirtualClick, l as getOwnerWindow, m as getInteractionModality, n as useFocus, s as setInteractionModality, a as useFocusWithin, o as isIPhone, p as isAndroid, u as useFocusRing } from './useFocusRing.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
 import c from 'clsx';
 import { u as useTheme } from './useTheme.js';
 import { a as Icon } from './Icon2.js';
@@ -2260,6 +2261,7 @@ function useNumberFieldState(props) {
     }
   }
   let [numberValue, setNumberValue] = useControlledState(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);
+  let [initialValue] = useState(numberValue);
   let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));
   let numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
   let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);
@@ -2315,6 +2317,7 @@ function useNumberFieldState(props) {
 
     // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
     setInputValue(format(value === undefined ? clampedValue : numberValue));
+    validation.commitValidation();
   };
   let safeNextStep = function (operation) {
     let minMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -2381,6 +2384,7 @@ function useNumberFieldState(props) {
     minValue,
     maxValue,
     numberValue: parsedValue,
+    defaultNumberValue: isNaN(defaultValue) ? initialValue : defaultValue,
     setNumberValue,
     setInputValue,
     inputValue,
@@ -3185,6 +3189,7 @@ const _excluded$1 = ["id", "decrementAriaLabel", "incrementAriaLabel", "isDisabl
  * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
 function useNumberField(props, state, inputRef) {
+  var _intlOptions$maximumF;
   let {
       id,
       decrementAriaLabel,
@@ -3217,7 +3222,7 @@ function useNumberField(props, state, inputRef) {
     commit,
     commitValidation
   } = state;
-  const format = useMessageFormatter(intlMessages$1);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages$1, '@react-aria/numberfield');
   let inputId = useId(id);
   let {
     focusProps
@@ -3285,7 +3290,7 @@ function useNumberField(props, state, inputRef) {
   // Browsers and operating systems are quite inconsistent about what keys are available, however.
   // We choose between numeric and decimal based on whether we allow negative and fractional numbers,
   // and based on testing on various devices to determine what keys are available in each inputMode.
-  let hasDecimals = intlOptions.maximumFractionDigits > 0;
+  let hasDecimals = ((_intlOptions$maximumF = intlOptions.maximumFractionDigits) !== null && _intlOptions$maximumF !== void 0 ? _intlOptions$maximumF : 0) > 0;
   let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
   let inputMode = 'numeric';
   if (isIPhone()) {
@@ -3313,6 +3318,9 @@ function useNumberField(props, state, inputRef) {
   };
   let domProps = filterDOMProps(props);
   let onKeyDownEnter = useCallback(e => {
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
     if (e.key === 'Enter') {
       commit();
       commitValidation();
@@ -3331,7 +3339,9 @@ function useNumberField(props, state, inputRef) {
     descriptionProps,
     errorMessageProps
   } = useFormattedTextField(_objectSpread2(_objectSpread2(_objectSpread2({}, otherProps), domProps), {}, {
+    // These props are added to a hidden input rather than the formatted textfield.
     name: undefined,
+    form: undefined,
     label,
     autoFocus,
     isDisabled,
@@ -3340,8 +3350,8 @@ function useNumberField(props, state, inputRef) {
     validate: undefined,
     [privateValidationStateProp]: state,
     value: inputValue,
-    defaultValue: undefined,
-    // defaultValue already used to populate state.inputValue, unneeded here
+    defaultValue: '!',
+    // an invalid value so that form reset is ignored in onChange above
     autoComplete: 'off',
     'aria-label': props['aria-label'] || undefined,
     'aria-labelledby': props['aria-labelledby'] || undefined,
@@ -3358,12 +3368,12 @@ function useNumberField(props, state, inputRef) {
     description,
     errorMessage
   }), state, inputRef);
-  useFormReset(inputRef, state.numberValue, state.setNumberValue);
+  useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue);
   let inputProps = mergeProps(spinButtonProps, focusProps, textFieldProps, {
     // override the spinbutton role, we can't focus a spin button with VO
     role: null,
     // ignore aria-roledescription on iOS so that required state will announce when it is present
-    'aria-roledescription': !isIOS() ? format('numberField') : null,
+    'aria-roledescription': !isIOS() ? stringFormatter.format('numberField') : null,
     'aria-valuemax': null,
     'aria-valuemin': null,
     'aria-valuenow': null,
@@ -3410,7 +3420,7 @@ function useNumberField(props, state, inputRef) {
   let incrementId = useId();
   let decrementId = useId();
   let incrementButtonProps = mergeProps(incButtonProps, {
-    'aria-label': incrementAriaLabel || format('increase', {
+    'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
       fieldLabel
     }).trim(),
     id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
@@ -3423,7 +3433,7 @@ function useNumberField(props, state, inputRef) {
     onPressStart: onButtonPressStart
   });
   let decrementButtonProps = mergeProps(decButtonProps, {
-    'aria-label': decrementAriaLabel || format('decrease', {
+    'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
       fieldLabel
     }).trim(),
     id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
@@ -3755,6 +3765,16 @@ const StyledNumberField = styled.div`
         border-bottom-right-radius: 4px;
         border-bottom-left-radius: 0;
       }
+
+      .redsift-number-field-input-wrapper-toolbar__increment-button--disabled,
+      .redsift-number-field-input-wrapper-toolbar__decrement-button--disabled {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      .redsift-number-field-input-wrapper-toolbar__increment-button--disabled > .colored,
+      .redsift-number-field-input-wrapper-toolbar__decrement-button--disabled > .colored {
+        color: rgba(0, 0, 0, 0.5);
+      }
     }
 
     ${$variant !== NumberFieldVariant.underline ? css`
@@ -3908,21 +3928,17 @@ const NumberField = /*#__PURE__*/forwardRef((props, ref) => {
     gap: "0",
     width: "100%"
   }), /*#__PURE__*/React__default.createElement("input", _extends({}, propsInputProps, inputProps, {
-    onChange: event => {
-      if (propsOnChange) {
-        propsOnChange(Number(event.target.value));
-      } else {
-        var _inputProps$onChange;
-        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, event);
-      }
-    },
     onBlur: event => {
+      var _inputProps$onBlur;
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
       onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
+      (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 ? void 0 : _inputProps$onBlur.call(inputProps, event);
     },
     onFocus: event => {
+      var _inputProps$onFocus;
       onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
       onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
+      (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 ? void 0 : _inputProps$onFocus.call(inputProps, event);
     },
     placeholder: placeholder ? `${placeholder}` : undefined,
     className: `${NumberField.className}-input-wrapper__input`,
@@ -3935,28 +3951,28 @@ const NumberField = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
     $color: "grey",
     $isActive: false,
-    $isDisabled: isDisabled,
     $isGradient: false,
     $isHovered: false,
     $isLoading: false,
     $variant: variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary',
     $theme: theme
   }, incrementButtonForwardedProps, {
-    className: `${NumberField.className}-input-wrapper-toolbar__increment-button`
+    $isDisabled: isDisabled || incrementButtonForwardedProps.disabled,
+    className: `${NumberField.className}-input-wrapper-toolbar__increment-button ${isDisabled || incrementButtonForwardedProps.disabled ? `${NumberField.className}-input-wrapper-toolbar__increment-button--disabled` : ''}`
   }), /*#__PURE__*/React__default.createElement(Icon, {
     icon: mdiMenuUp,
     color: isDisabled ? undefined : 'grey'
   })), /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
     $color: "grey",
     $isActive: false,
-    $isDisabled: isDisabled,
     $isGradient: false,
     $isHovered: false,
     $isLoading: false,
     $variant: variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary',
     $theme: theme
   }, decrementButtonForwardedProps, {
-    className: `${NumberField.className}-input-wrapper-toolbar__decrement-button`
+    $isDisabled: isDisabled || decrementButtonForwardedProps.disabled,
+    className: `${NumberField.className}-input-wrapper-toolbar__decrement-button ${isDisabled || decrementButtonForwardedProps.disabled ? `${NumberField.className}-input-wrapper-toolbar__decrement-button--disabled` : ''}`
   }), /*#__PURE__*/React__default.createElement(Icon, {
     icon: mdiMenuDown,
     color: isDisabled ? undefined : 'grey'