@renderlesskit/react/dist/esm/number-input/NumberInput.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

var _excluded = ["allowMouseWheel", "clampValueOnBlur"],
    _excluded2 = ["ref", "onChange", "onKeyDown", "onFocus", "onBlur", "onWheel", "required", "readOnly"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import * as React from "react";
import { useInput } from "reakit";
import { mergeRefs } from "@chakra-ui/react-utils";
import { callAllHandlers, normalizeEventKey } from "@chakra-ui/utils";
import { createComponent, createHook } from "../system";
import { ariaAttr } from "../utils";
import { NUMBER_INPUT_KEYS } from "./__keys";
import { getStepFactor, isValidNumericKeyboardEvent, sanitize } from "./helpers";
export var useNumberInput = createHook({
  name: "NumberInput",
  compose: useInput,
  keys: NUMBER_INPUT_KEYS,

  useOptions(_ref) {
    var {
      allowMouseWheel = true,
      clampValueOnBlur = true
    } = _ref,
        options = _objectWithoutProperties(_ref, _excluded);

    var disabled = options.disabled || options.isDisabled;
    return _objectSpread(_objectSpread({
      allowMouseWheel,
      clampValueOnBlur
    }, options), {}, {
      disabled
    });
  },

  useProps(options, _ref2) {
    var {
      ref: htmlRef,
      onChange: htmlOnChange,
      onKeyDown: htmlOnKeyDown,
      onFocus: htmlOnFocus,
      onBlur: htmlOnBlur,
      onWheel: htmlOnWheel,
      required: htmlRequired,
      readOnly: htmlReadOnly
    } = _ref2,
        htmlProps = _objectWithoutProperties(_ref2, _excluded2);

    var {
      min,
      max,
      step,
      updateValue,
      increment,
      decrement,
      value,
      valueAsNumber,
      clampValueOnBlur,
      setCastedValue,
      inputRef,
      disabled,
      isInvalid,
      isReadOnly,
      isRequired,
      isOutOfRange
    } = options;
    var readOnly = htmlReadOnly || isReadOnly;
    var required = htmlRequired || isRequired;
    /**
     * The `onChange` handler filters out any character typed
     * that isn't floating point compatible.
     */

    var onChange = React.useCallback(event => {
      updateValue(sanitize(event.target.value));
    }, [updateValue]);
    var onKeyDown = React.useCallback(event => {
      /**
       * only allow valid numeric keys
       */
      if (!isValidNumericKeyboardEvent(event)) {
        event.preventDefault();
      }
      /**
       * Keyboard Accessibility
       *
       * We want to increase or decrease the input's value
       * based on if the user the arrow keys.
       *
       * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17
       */


      var stepFactor = getStepFactor(event) * step;
      var eventKey = normalizeEventKey(event);
      var keyMap = {
        ArrowUp: () => increment(stepFactor),
        ArrowDown: () => decrement(stepFactor),
        Home: () => updateValue(min),
        End: () => updateValue(max)
      };
      var action = keyMap[eventKey];

      if (action) {
        event.preventDefault();
        action(event);
      }
    }, [decrement, increment, max, min, step, updateValue]);
    var onBlur = React.useCallback(() => {
      if (!clampValueOnBlur) return;
      var next = value;
      if (next === "") return;

      if (valueAsNumber < min) {
        next = min;
      }

      if (valueAsNumber > max) {
        next = max;
      }
      /**
       * `setCastedValue` does 2 things:
       *
       * - sanitize the value by using parseFloat and some Regex
       * - used to round value to computed precision or decimal points
       */


      setCastedValue(next);
    }, [setCastedValue, clampValueOnBlur, max, min, value, valueAsNumber]);
    React.useEffect(() => {
      var input = inputRef.current;
      if (!input) return undefined;

      function onWheel(event) {
        var isInputFocused = document.activeElement === inputRef.current;
        if (!options.allowMouseWheel || !isInputFocused) return;
        event.preventDefault();
        var stepFactor = getStepFactor(event) * step;
        var direction = Math.sign(event.deltaY);

        if (direction === -1) {
          increment(stepFactor);
        } else if (direction === 1) {
          decrement(stepFactor);
        }
      }

      input.addEventListener("wheel", onWheel);
      return () => {
        input.removeEventListener("wheel", onWheel);
      };
    }, [decrement, increment, inputRef, options.allowMouseWheel, step]);
    var onWheel = React.useCallback(event => {
      if (!options.allowMouseWheel) return;
      event.preventDefault();
      var stepFactor = getStepFactor(event) * step;
      var direction = Math.sign(event.deltaY);

      if (direction === -1) {
        increment(stepFactor);
      } else if (direction === 1) {
        decrement(stepFactor);
      }
    }, [decrement, increment, options.allowMouseWheel, step]);
    return _objectSpread({
      ref: mergeRefs(htmlRef, inputRef),
      value,
      type: "text",
      role: "spinbutton",
      inputMode: "decimal",
      pattern: "[0-9]*(.[0-9]+)?",
      autoComplete: "off",
      autoCorrect: "off",
      spellCheck: false,
      disabled,
      readOnly,
      required,
      onChange: callAllHandlers(htmlOnChange, onChange),
      onKeyDown: callAllHandlers(htmlOnKeyDown, onKeyDown),
      onBlur: callAllHandlers(htmlOnBlur, onBlur),
      onWheel: callAllHandlers(htmlOnWheel, onWheel),
      "aria-readonly": readOnly,
      "aria-required": required,
      "aria-invalid": ariaAttr(isInvalid !== null && isInvalid !== void 0 ? isInvalid : isOutOfRange),
      "aria-valuemin": min,
      "aria-valuemax": max,
      "aria-valuenow": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,
      "aria-valuetext": !value.toString() ? undefined : value.toString()
    }, htmlProps);
  }

});
export var NumberInput = createComponent({
  as: "input",
  memo: true,
  useHook: useNumberInput
});
//# sourceMappingURL=NumberInput.js.map