@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/NumberInput/index.js

@@ -0,0 +1,349 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useRef, useId, useState, useMemo } from "react";
+import { Button } from "../Button/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { getMinusRoundedValue, getPlusRoundedValue, roundStep, bounded } from "./helpers.js";
+const containerSizes = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const iconSizes = {
+  large: 26,
+  medium: 24,
+  small: 22
+};
+const BASE_INPUT_WIDTH = 34;
+const StyledSelectButton = styled(Button)`
+  margin: 0 ${({ theme }) => theme.space["1"]};
+  width: 32px;
+  height: 32px;
+`;
+const StyledCenterBox = styled("div", {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  height: ${({ size }) => size === "small" ? "24px" : "32px"};
+  align-items: center;
+  outline: none;
+  justify-content: center;
+  border-radius: ${({ theme }) => theme.radii.default};
+  border: 1px solid transparent;
+  max-width: 100%;
+`;
+const StyledInput = styled.input`
+  color: ${({ theme }) => theme.colors.neutral.text};
+  background-color: transparent;
+  font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize};
+  border: none;
+  outline: none;
+  position: relative;
+  margin-right: ${({ theme }) => theme.space["0.5"]};
+  max-width: 100%;
+  font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
+  text-align: center;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.neutral.textWeak};
+  }
+
+  -moz-appearance: textfield;
+
+  &[disabled] {
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+    cursor: not-allowed;
+  }
+`;
+const StyledText = styled("span", {
+  shouldForwardProp: (prop) => !["disabled"].includes(prop)
+})`
+  color: ${({ theme, disabled }) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text};
+  user-select: none;
+  margin-right: ${({ theme }) => theme.space["1"]};
+`;
+const StyledContainer = styled("div", {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  font-weight: 500;
+  height: ${({ size }) => containerSizes[size]}px;
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  &[data-error='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.danger.border};
+  }
+
+  &[aria-disabled='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    cursor: not-allowed;
+  }
+
+  &:not([aria-disabled='true']) {
+    ${StyledCenterBox}:hover,
+    ${StyledCenterBox}:focus {
+      border: 1px solid ${({ theme }) => theme.colors.primary.borderHover};
+    }
+
+    ${StyledCenterBox}:focus-within {
+      box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+      border: 1px solid ${({ theme }) => theme.colors.primary.borderHover};
+    }
+  }
+`;
+const NumberInput = ({
+  disabled = false,
+  maxValue,
+  minValue = 0,
+  name = "numberinput",
+  onChange,
+  onFocus,
+  onBlur,
+  onMaxCrossed,
+  onMinCrossed,
+  size = "large",
+  step = 1,
+  text,
+  defaultValue,
+  value,
+  disabledTooltip,
+  className,
+  label,
+  id,
+  placeholder,
+  error,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": dataTestId
+}) => {
+  const inputRef = useRef();
+  const uniqueId = useId();
+  const [inputValue, setInputValue] = useState(() => {
+    if (defaultValue && minValue && defaultValue < minValue) {
+      return minValue;
+    }
+    if (defaultValue && maxValue && defaultValue > maxValue) {
+      return maxValue;
+    }
+    return defaultValue;
+  });
+  const currentValue = value !== void 0 && value !== null ? value : inputValue;
+  const setValue = (newValue, hasMinMaxVerification = true) => {
+    let nextValue = newValue;
+    if (value === void 0 && hasMinMaxVerification) {
+      if (newValue !== void 0 && newValue < minValue) {
+        nextValue = minValue;
+      }
+      if (newValue !== void 0 && maxValue !== void 0 && newValue > maxValue) {
+        nextValue = maxValue;
+      }
+    }
+    setInputValue(nextValue);
+    onChange?.(nextValue);
+  };
+  const offsetFn = (direction) => () => {
+    const localValue = currentValue ?? 0;
+    const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
+    const roundedValue = roundStep(newValue, step, direction);
+    setValue(roundedValue);
+  };
+  const handleChange = (event) => {
+    setValue(
+      event.currentTarget.value ? Number(event.currentTarget.value) : void 0,
+      false
+    );
+  };
+  const handleOnBlur = (event) => {
+    if (currentValue) {
+      const boundedValue = bounded(
+        currentValue,
+        minValue ?? currentValue,
+        maxValue ?? currentValue
+      );
+      if (maxValue && currentValue > maxValue)
+        onMaxCrossed?.();
+      if (minValue && currentValue < minValue)
+        onMinCrossed?.();
+      setValue(boundedValue);
+      onBlur?.(event);
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowUp") {
+      event.stopPropagation();
+      event.preventDefault();
+      const direction = 1;
+      const localValue = currentValue ?? 0;
+      const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
+      const roundedValue = roundStep(newValue, step, direction);
+      if (maxValue === void 0) {
+        setValue(roundedValue);
+        return;
+      }
+      setValue(Math.min(roundedValue, maxValue));
+    }
+    if (event.key === "ArrowDown") {
+      event.stopPropagation();
+      event.preventDefault();
+      const direction = -1;
+      const localValue = currentValue ?? 0;
+      const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
+      const roundedValue = roundStep(newValue, step, direction);
+      setValue(Math.max(roundedValue, minValue));
+    }
+  };
+  const isMinusDisabled = useMemo(() => {
+    if (disabled)
+      return true;
+    if (currentValue === void 0)
+      return false;
+    if (getMinusRoundedValue(currentValue, step) < minValue) {
+      return true;
+    }
+    return disabled;
+  }, [currentValue, disabled, minValue, step]);
+  const isPlusDisabled = useMemo(() => {
+    if (disabled)
+      return true;
+    if (currentValue === void 0)
+      return false;
+    if (maxValue && getPlusRoundedValue(currentValue, step) > maxValue) {
+      return true;
+    }
+    return disabled;
+  }, [currentValue, disabled, maxValue, step]);
+  const inputWidth = useMemo(() => {
+    if (placeholder && currentValue === void 0) {
+      return placeholder.length * 12;
+    }
+    if (currentValue !== void 0) {
+      return currentValue.toString().length * 16;
+    }
+    return BASE_INPUT_WIDTH;
+  }, [currentValue, placeholder]);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+    label ? /* @__PURE__ */ jsx(Text, { variant: "bodyStrong", as: "label", htmlFor: id || uniqueId, children: label }) : null,
+    /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+      /* @__PURE__ */ jsxs(
+        StyledContainer,
+        {
+          "aria-disabled": disabled,
+          "data-error": !!error,
+          size,
+          className,
+          "data-testid": dataTestId,
+          children: [
+            /* @__PURE__ */ jsx(Tooltip, { text: isMinusDisabled && disabledTooltip, children: /* @__PURE__ */ jsx(
+              StyledSelectButton,
+              {
+                onClick: offsetFn(-1),
+                disabled: isMinusDisabled,
+                "aria-label": "Minus",
+                type: "button",
+                variant: "ghost",
+                sentiment: "primary",
+                size: "small",
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "minus",
+                    size: iconSizes[size],
+                    color: "primary",
+                    disabled: isMinusDisabled
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              StyledCenterBox,
+              {
+                size,
+                onClick: () => {
+                  if (inputRef?.current) {
+                    inputRef.current.focus();
+                  }
+                },
+                "aria-live": "assertive",
+                role: "status",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    StyledInput,
+                    {
+                      disabled,
+                      name,
+                      onBlur: handleOnBlur,
+                      onChange: handleChange,
+                      onFocus,
+                      onKeyDown,
+                      ref: inputRef,
+                      style: {
+                        width: inputWidth
+                      },
+                      value: currentValue !== void 0 ? currentValue.toString() : "",
+                      type: "number",
+                      id: id || uniqueId,
+                      "aria-label": !label && !ariaLabel ? "Number Input" : ariaLabel,
+                      "aria-describedby": ariaDescribedBy,
+                      placeholder
+                    }
+                  ),
+                  currentValue !== void 0 ? /* @__PURE__ */ jsx(StyledText, { disabled, children: text }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { text: isPlusDisabled && disabledTooltip, children: /* @__PURE__ */ jsx(
+              StyledSelectButton,
+              {
+                onClick: offsetFn(1),
+                disabled: isPlusDisabled,
+                "aria-label": "Plus",
+                type: "button",
+                variant: "ghost",
+                sentiment: "primary",
+                size: "small",
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "plus",
+                    size: iconSizes[size],
+                    color: "primary",
+                    disabled: isPlusDisabled
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      ),
+      typeof error === "string" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          variant: "bodySmall",
+          sentiment: "danger",
+          prominence: "weak",
+          children: error
+        }
+      ) : null
+    ] })
+  ] });
+};
+export {
+  NumberInput
+};

package/dist/components/NumberInputV2/index.d.ts

@@ -0,0 +1,27 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * NumberInputV2 component is used to increment / decrement a number value by clicking on + / - buttons or
+ * by typing into input. If the value is out of the min / max range, the input will automatically be the min / max value on blur.
+ */
+export declare const NumberInputV2: import("react").ForwardRefExoticComponent<{
+    size?: "large" | "small" | "medium" | undefined;
+    /**
+     * Text displayed into component at the right of number value.
+     */
+    unit?: string | undefined;
+    tooltip?: string | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+    label?: string | undefined;
+    /**
+     * Label description displayed right next to the label. It allows you to customize the label content.
+     */
+    labelDescription?: ReactNode;
+    error?: string | undefined;
+    success?: string | boolean | undefined;
+    helper?: ReactNode;
+    value?: number | null | undefined;
+    onChange?: ((newValue: number | null) => void) | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "aria-label" | "onFocus" | "onBlur" | "name" | "disabled" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;