@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/VerificationCode/index.js

@@ -0,0 +1,222 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useId, useState, createRef } from "react";
+const SIZE_HEIGHT = {
+  xlarge: 64,
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const SIZE_WIDTH = {
+  xlarge: 56,
+  large: 40,
+  medium: 32,
+  small: 24
+};
+const StyledInput = styled("input", {
+  shouldForwardProp: (prop) => !["inputSize"].includes(prop)
+})`
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border: solid 1px
+    ${({ "aria-invalid": error, theme }) => error ? theme.colors.danger.border : theme.colors.neutral.border};
+  color: ${({ "aria-invalid": error, theme }) => error ? theme.colors.danger.text : theme.colors.neutral.text};
+  ${({ inputSize, theme }) => {
+  if (inputSize === "small") {
+    return `
+           font-size: ${theme.typography.caption.fontSize};
+           font-weight: ${theme.typography.caption.weight};
+        `;
+  }
+  return `
+           font-size: ${theme.typography.body.fontSize};
+           font-weight: ${theme.typography.body.weight};
+         `;
+}}
+  text-align: center;
+  border-radius: ${({ theme }) => theme.radii.default};
+  margin-right: ${({ theme }) => theme.space["1"]};
+  width: ${({ inputSize }) => SIZE_WIDTH[inputSize]}px;
+  height: ${({ inputSize }) => SIZE_HEIGHT[inputSize]}px;
+  outline-style: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover,
+  &:focus {
+    border-color: ${({ "aria-invalid": error, theme }) => error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover};
+  }
+
+  &:focus {
+    box-shadow: ${({ "aria-invalid": error, theme: { shadows } }) => error ? shadows.focusDanger : shadows.focusPrimary};
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &::placeholder {
+    color: ${({ disabled, theme }) => disabled ? theme.colors.neutral.textWeakDisabled : theme.colors.neutral.textWeak};
+  }
+
+  ${({ disabled, theme: { colors } }) => disabled && `cursor: default;
+    background-color: ${colors.neutral.backgroundDisabled};
+    border-color: ${colors.neutral.borderDisabled};
+    color: ${colors.neutral.textDisabled};
+
+    &:hover {
+      border: ${colors.neutral.borderDisabled}
+    }
+    `}
+`;
+const DEFAULT_ON_FUNCTION = () => {
+};
+const VerificationCode = ({
+  disabled = false,
+  className,
+  error = false,
+  fields = 4,
+  initialValue = "",
+  inputId,
+  inputStyle = "",
+  size = "large",
+  onChange = DEFAULT_ON_FUNCTION,
+  onComplete = DEFAULT_ON_FUNCTION,
+  placeholder = "",
+  required = false,
+  type = "number",
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel = "Verification code"
+}) => {
+  const uniqueId = useId();
+  const valuesArray = Object.assign(
+    new Array(fields).fill(""),
+    initialValue.substring(0, fields).split("")
+  );
+  const [values, setValues] = useState(valuesArray);
+  const inputRefs = Array.from(
+    { length: fields },
+    () => createRef()
+  );
+  const triggerChange = (inputValues) => {
+    const stringValue = inputValues.join("");
+    if (onChange) {
+      onChange(stringValue);
+    }
+    if (onComplete && stringValue.length >= fields) {
+      onComplete(stringValue);
+    }
+  };
+  const inputOnChange = (index) => (event) => {
+    let { value } = event.target;
+    if (type === "number") {
+      value = event.target.value.replace(/[^\d]/gi, "");
+    }
+    const newValues = [...values];
+    if (value === "" || type === "number" && !new RegExp(event.target.pattern).test(value)) {
+      newValues[index] = "";
+      setValues(newValues);
+      return;
+    }
+    const sanitizedValue = value[0];
+    newValues[index] = sanitizedValue;
+    setValues(newValues);
+    const nextIndex = Math.min(index + 1, fields - 1);
+    const next = inputRefs[nextIndex];
+    next?.current?.focus();
+    triggerChange(newValues);
+  };
+  const inputOnKeyDown = (index) => (event) => {
+    const prevIndex = index - 1;
+    const nextIndex = index + 1;
+    const first = inputRefs[0];
+    const last = inputRefs[inputRefs.length - 1];
+    const prev = inputRefs[prevIndex];
+    const next = inputRefs[nextIndex];
+    const vals = [...values];
+    switch (event.key) {
+      case "Backspace":
+        event.preventDefault();
+        if (values[index]) {
+          vals[index] = "";
+          setValues(vals);
+          triggerChange(vals);
+        } else if (prev) {
+          vals[prevIndex] = "";
+          prev?.current?.focus();
+          setValues(vals);
+          triggerChange(vals);
+        }
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        prev?.current?.focus();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        next?.current?.focus();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        first?.current?.focus();
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        last?.current?.focus();
+        break;
+    }
+  };
+  const inputOnFocus = (event) => event.target.select();
+  const inputOnPaste = (currentIndex) => (event) => {
+    event.preventDefault();
+    const pastedValue = [
+      ...event.clipboardData.getData("Text").split("")
+    ].map(
+      (copiedValue) => (
+        // Replace non number char with empty char when type is number
+        type === "number" ? copiedValue.replace(/[^\d]/gi, "") : copiedValue
+      )
+    );
+    pastedValue.splice(
+      fields - currentIndex < pastedValue.length ? fields - currentIndex : pastedValue.length
+    );
+    setValues((vals) => {
+      const newArray = vals.slice();
+      newArray.splice(currentIndex, pastedValue.length, ...pastedValue);
+      return newArray;
+    });
+    const nextIndex = Math.min(
+      currentIndex + pastedValue.filter((item) => item !== "").length,
+      inputRefs.length - 1
+    );
+    const next = inputRefs[nextIndex];
+    next?.current?.focus();
+    triggerChange(pastedValue);
+  };
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, children: values.map((value, index) => /* @__PURE__ */ jsx(
+    StyledInput,
+    {
+      css: [inputStyle],
+      "aria-invalid": error,
+      inputSize: size,
+      type: type === "number" ? "tel" : type,
+      pattern: type === "number" ? "[0-9]*" : void 0,
+      "data-testid": index,
+      value,
+      id: `${inputId || uniqueId}-${index}`,
+      ref: inputRefs[index],
+      onChange: inputOnChange(index),
+      onKeyDown: inputOnKeyDown(index),
+      onPaste: inputOnPaste(index),
+      onFocus: inputOnFocus,
+      disabled,
+      required,
+      placeholder: placeholder?.[index] ?? "",
+      "aria-label": `${ariaLabel} ${index}`
+    },
+    index
+  )) });
+};
+export {
+  VerificationCode
+};

package/dist/components/index.d.ts

@@ -0,0 +1,75 @@
+export { ActionBar } from './ActionBar';
+export { Alert } from './Alert';
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
+export { Banner } from './Banner';
+export { BarChart } from './BarChart';
+export { BarStack } from './BarStack';
+export { Breadcrumbs } from './Breadcrumbs';
+export { Bullet } from './Bullet';
+export { Button } from './Button';
+export { Card } from './Card';
+export { Carousel } from './Carousel';
+export { Checkbox } from './Checkbox';
+export { CopyButton } from './CopyButton';
+export { DateInput } from './DateInput';
+export { Dialog } from './Dialog';
+export { EmptyState } from './EmptyState';
+export { Expandable } from './Expandable';
+export { LineChart } from './LineChart';
+export { Link } from './Link';
+export { List } from './List';
+export { Loader } from './Loader';
+export { Menu } from './Menu';
+export { Meter } from './Meter';
+export { Modal } from './Modal';
+export { Notice } from './Notice';
+export { CheckboxGroup, CheckboxGroupCheckbox } from './CheckboxGroup';
+export { NumberInput } from './NumberInput';
+export { NumberInputV2 } from './NumberInputV2';
+export { Pagination } from './Pagination';
+export { PasswordCheck } from './PasswordCheck';
+export { PasswordStrengthMeter } from './PasswordStrengthMeter';
+export { PieChart } from './PieChart';
+export { Popover } from './Popover';
+export { Popup } from './Popup';
+export { ProgressBar } from './ProgressBar';
+export { Radio } from './Radio';
+export { Row } from './Row';
+export { SelectableCard } from './SelectableCard';
+export { SelectInput, type SelectOption } from './SelectInput';
+export { Separator } from './Separator';
+export { Skeleton } from './Skeleton';
+export { Snippet } from './Snippet';
+export { Stack } from './Stack';
+export { Status } from './Status';
+export { StepList } from './StepList';
+export { Stepper } from './Stepper';
+export { SwitchButton } from './SwitchButton';
+export { Table } from './Table';
+export { Tabs } from './Tabs';
+export { Tag } from './Tag';
+export { TagInput } from './TagInput';
+export { TagList } from './TagList';
+export { Text } from './Text';
+export { TextArea } from './TextArea';
+export { TextInput } from './TextInput';
+export { TextInputV2 } from './TextInputV2';
+export { TimeInput } from './TimeInput';
+export { ToastContainer, toast } from './Toaster';
+export { Toggle } from './Toggle';
+export { ToggleGroup } from './ToggleGroup';
+export { Tooltip } from './Tooltip';
+export { VerificationCode } from './VerificationCode';
+export { RadioGroup } from './RadioGroup';
+export { 
+/**
+ * @deprecated This component is deprecated. Please use `Icon` from `@ultraviolet/icons` instead.
+ * The component is the same but has been moved to another package.
+ */
+Icon, } from '@ultraviolet/icons';
+export { MenuV2 } from './MenuV2';
+export { GlobalAlert } from './GlobalAlert';
+export { NotificationContainer, notification } from './Notification';
+export { SelectableCardGroup } from './SelectableCardGroup';
+export { SelectInputV2 } from './SelectInputV2';

package/dist/helpers/isJSON.d.ts

@@ -0,0 +1,2 @@
+declare const isJSONString: (str: string) => boolean;
+export default isJSONString;

package/dist/{src/helpers → helpers}/isJSON.js

@@ -1,4 +1,4 @@
-const isJSONString = str => {
+const isJSONString = (str) => {
   try {
     JSON.parse(str);
   } catch (e) {
@@ -6,5 +6,6 @@ const isJSONString = str => {
   }
   return true;
 };
-
-export { isJSONString as default };
+export {
+  isJSONString as default
+};

package/dist/helpers/jestMockMatchMedia.d.ts

@@ -0,0 +1,6 @@
+export type MockMatchMedia = {
+    media: string;
+    matches?: boolean;
+};
+declare const _default: ({ media, matches }: MockMatchMedia) => void;
+export default _default;

package/dist/helpers/keycode.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardEventHandler } from 'react';
+declare const onKeyOnlyNumbers: KeyboardEventHandler;
+export default onKeyOnlyNumbers;

package/dist/helpers/legend.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '@emotion/react';
+export declare const getLegendColor: (theme: Theme) => string[];

package/dist/helpers/legend.js

@@ -0,0 +1,14 @@
+const getLegendColor = (theme) => {
+  const { colors } = theme;
+  return Object.keys(colors.other.data.charts).filter((key) => !["success", "danger"].includes(key)).sort((a, b) => {
+    if (Number(a.replace("data", "")) < Number(b.replace("data", ""))) {
+      return -1;
+    }
+    return 1;
+  }).map(
+    (key) => colors.other.data.charts[key]
+  );
+};
+export {
+  getLegendColor
+};

package/dist/helpers/numbers.d.ts

@@ -0,0 +1,2 @@
+declare const parseIntOr: (str: string | undefined, fallback: number) => number;
+export default parseIntOr;

package/dist/helpers/recursivelyGetChildrenString.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+declare const recursivelyGetChildrenString: (children: ReactNode) => string;
+export default recursivelyGetChildrenString;

package/dist/helpers/recursivelyGetChildrenString.js

@@ -0,0 +1,15 @@
+const recursivelyGetChildrenString = (children) => {
+  if (typeof children === "string")
+    return children;
+  if (Array.isArray(children))
+    return "";
+  if (typeof children === "object") {
+    const childProps = children?.["props"]?.["children"];
+    if (childProps)
+      return recursivelyGetChildrenString(childProps);
+  }
+  return "";
+};
+export {
+  recursivelyGetChildrenString as default
+};

package/dist/hooks/useIsOverflowing.d.ts

@@ -0,0 +1,5 @@
+import type { MutableRefObject } from 'react';
+/**
+ * This hook checks if the element has overflow based on the offsetWidth and scrollWidth of the element.
+ */
+export declare const useIsOverflowing: (ref: MutableRefObject<HTMLElement | HTMLDivElement | undefined | null>, callback?: (hasOverflow: boolean) => void) => boolean;

package/dist/hooks/useIsOverflowing.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+const useIsOverflowing = (ref, callback) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      if (!ref.current) {
+        return;
+      }
+      const element = ref.current;
+      const hasOverflow = element.clientWidth < element.scrollWidth;
+      setIsOverflowing(hasOverflow);
+    };
+    setTimeout(() => handleResize(), 0);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref, callback]);
+  return isOverflowing;
+};
+export {
+  useIsOverflowing
+};