@kiwicom/orbit-components/lib/Stepper/StepperStateless/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Minus = _interopRequireDefault(require("../../icons/Minus"));
var _Plus = _interopRequireDefault(require("../../icons/Plus"));
var _ButtonPrimitive = _interopRequireDefault(require("../../primitives/ButtonPrimitive"));
var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
var _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));
const getMaxWidth = ({
  maxWidth
}) => {
  if (typeof maxWidth === "string") return maxWidth;
  return `${parseInt(maxWidth.toString(), 10)}px`;
};
const stepperButtonMixin = ({
  disabled,
  active
}) => (0, _clsx.default)("[&_svg]:p-50", "de:[&_svg]:size-icon-medium [&_svg]:size-icon-large", "[&_svg]:rounded-full", "focus:outline-0", "[&_svg]:focus:outline-blue-normal [&_svg]:focus:outline [&_svg]:focus:outline-2", active ? "[&_svg]:bg-blue-normal" : "[&_svg]:bg-cloud-normal", !disabled && [active ? "hover:[&_svg]:bg-blue-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-blue-light-active)]" : "hover:[&_svg]:bg-cloud-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-cloud-normal-active)]"]);
const StepperStateless = ({
  maxWidth = "120px",
  disabled,
  dataTest,
  id,
  value,
  active,
  name,
  minValue = -Infinity,
  maxValue = Infinity,
  onKeyDown,
  onBlur,
  onFocus,
  onIncrement,
  onDecrement,
  titleIncrement,
  titleDecrement,
  disabledIncrement,
  disabledDecrement,
  ariaLabelValue,
  ariaLabelledby,
  ariaDescribedby,
  descriptionIncrement,
  descriptionDecrement
}) => {
  const theme = (0, _useTheme.default)();
  const iconStyles = {
    foreground: active ? theme.orbit.paletteWhite : theme.orbit.paletteInkDark
  };
  const isMinusDisabled = disabled || disabledDecrement || typeof value === "number" && value <= +minValue;
  const isPlusDisabled = disabled || disabledIncrement || typeof value === "number" && value >= +maxValue;
  const inputId = (0, _useRandomId.default)();
  return /*#__PURE__*/React.createElement("div", {
    "data-test": dataTest,
    id: id,
    className: "flex w-full flex-auto",
    style: {
      maxWidth: getMaxWidth({
        maxWidth
      })
    }
  }, /*#__PURE__*/React.createElement(_ButtonPrimitive.default, {
    width: "44px",
    className: stepperButtonMixin({
      disabled: isMinusDisabled,
      active
    }),
    disabled: isMinusDisabled,
    iconLeft: /*#__PURE__*/React.createElement(_Minus.default, {
      size: "small",
      ariaHidden: true
    }),
    onClick: ev => {
      if (onDecrement && !disabled) {
        onDecrement(ev);
      }
    },
    icons: iconStyles,
    title: titleDecrement,
    "aria-controls": inputId,
    "aria-describedby": descriptionDecrement
  }), /*#__PURE__*/React.createElement("input", {
    className: (0, _clsx.default)("h-form-box-normal w-full min-w-0 border-0", "p-0 text-center", "text-large text-form-element-filled-foreground font-medium", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", "[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0", disabled ? "bg-transparent opacity-50" : "opacity-100", "focus:outline-0"),
    name: name,
    disabled: disabled,
    type: "text",
    value: Number(value) || 0,
    min: minValue,
    max: maxValue,
    onKeyDown: ev => {
      if (onKeyDown) {
        onKeyDown(ev);
      }
    },
    onBlur: onBlur,
    onFocus: onFocus,
    "aria-label": ariaLabelValue,
    "aria-labelledby": ariaLabelledby,
    "aria-describedby": ariaDescribedby,
    id: inputId,
    readOnly: true
  }), /*#__PURE__*/React.createElement(_ButtonPrimitive.default, {
    width: "44px",
    className: stepperButtonMixin({
      disabled: isPlusDisabled,
      active
    }),
    disabled: isPlusDisabled,
    iconLeft: /*#__PURE__*/React.createElement(_Plus.default, {
      size: "small",
      ariaHidden: true
    }),
    onClick: ev => {
      if (onIncrement && !disabled) {
        onIncrement(ev);
      }
    },
    icons: iconStyles,
    title: titleIncrement,
    "aria-controls": inputId,
    "aria-describedby": descriptionIncrement
  }));
};
var _default = exports.default = StepperStateless;