@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/Input.tsx

@@ -1,609 +0,0 @@
-"use client";
-import {
-  ComponentProps,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-import clsx from "clsx";
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinusBorder,
-  componentPaddingXUsingComponentGap,
-  componentPaddingMinusBorderDesktop,
-  typography,
-} from "../classNames";
-import { Label } from "./Label";
-import { Icon } from "./Icon";
-import {
-  getDecimalPlaceholder,
-  formatDecimalValue,
-  formatCurrencyDisplay,
-} from "../utils/formatting";
-import { TextAlign } from "../types";
-import { Paragraph } from "./Paragraph";
-
-export type InputVariant =
-  | "default"
-  | "search"
-  | "finder"
-  | "currency"
-  | "percentage"
-  | "uom";
-
-export type InputFormatting = {
-  variant?: InputVariant;
-  decimals?: number;
-  uom?: string;
-  removeSearchIcon?: boolean;
-};
-
-export type InputBaseProps = {
-  id?: string;
-  testid?: string;
-  after?: ReactNode;
-  before?: ReactNode;
-  rightAdornment?: ReactNode;
-  label?: string;
-  error?: boolean;
-  align?: TextAlign;
-  caption?: ReactNode;
-  required?: boolean;
-  selectOnFocus?: boolean;
-  inputContainerRef?: RefObject<HTMLLabelElement | null>;
-  removeRoundness?: boolean;
-  removeBorder?: boolean;
-  wrapperClassName?: string;
-  focus?: boolean;
-  secondaryIconColor?: boolean;
-  fullWidth?: boolean; // If true, input takes full width of the container
-  autocompletePadding?: boolean; // If true, applies padding suitable for autocomplete dropdowns
-  wrapperRef?: RefObject<HTMLDivElement | null>;
-} & InputFormatting &
-  Omit<ComponentProps<"input">, "align" | "id">;
-
-export const InputBase = ({
-  id,
-  testid,
-  before,
-  after,
-  rightAdornment,
-  type,
-  label,
-  error,
-  className,
-  align = "left",
-  caption,
-  required,
-  selectOnFocus,
-  removeRoundness,
-  inputContainerRef,
-  removeBorder,
-  wrapperClassName,
-  focus,
-  secondaryIconColor,
-  fullWidth = true,
-  width,
-  wrapperRef,
-  autocompletePadding = false,
-  ...props
-}: InputBaseProps) => {
-  const attributes = {
-    "data-error": (error && !focus) || null,
-    "data-focus": focus || null,
-  };
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const inputId = id ? `${id}-input` : undefined;
-
-  useEffect(() => {
-    const input = inputRef.current;
-    const focusHandler = () => {
-      input?.select();
-    };
-    if (selectOnFocus) {
-      inputRef.current?.addEventListener("focus", focusHandler);
-
-      return () => {
-        input?.removeEventListener("focus", focusHandler);
-      };
-    }
-  }, [selectOnFocus]);
-
-  const inputBaseClass = clsx(
-    fullWidth ? "w-full" : "w-fit",
-    "flex flex-row items-center",
-    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
-    componentGap,
-    baseTransition,
-    "outline-transparent outline-2 -outline-offset-2",
-    !autocompletePadding && componentPaddingMinusBorder,
-    autocompletePadding && componentPaddingMinusBorderDesktop,
-    !removeRoundness && "rounded-base",
-    !removeBorder && "border border-border-primary-normal",
-    "relative",
-  );
-
-  const inputFocusClass = clsx(
-    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus",
-  );
-
-  const inputDisabledClass = clsx(
-    "has-disabled:bg-background-action-secondary-disabled",
-  );
-
-  const inputReadOnlyClass = clsx(
-    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0",
-  );
-
-  const inputInvalidClass = clsx(
-    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1",
-  );
-
-  return (
-    <label
-      id={id}
-      data-testid={testid}
-      htmlFor={inputId}
-      ref={inputContainerRef}
-      className={clsx(
-        "w-full flex flex-col",
-        "block",
-        "text-text-primary-normal has-disabled:text-text-primary-disabled",
-        componentGap,
-      )}
-      style={{
-        ...props.style,
-      }}
-    >
-      {label && (
-        <div className={clsx("flex items-center", componentGap)}>
-          <Label
-            id={id ? `${id}-label` : undefined}
-            color={error ? "text-primary-error" : undefined}
-            className={clsx(
-              props.disabled || props.readOnly
-                ? "cursor-default"
-                : "cursor-pointer",
-            )}
-          >
-            {label}
-          </Label>
-
-          {required && (
-            <span
-              className={clsx(typography.label, "text-text-critical-normal")}
-            >
-              *
-            </span>
-          )}
-        </div>
-      )}
-
-      <div
-        className={clsx(
-          inputBaseClass,
-          !props.disabled && inputInvalidClass,
-          inputFocusClass,
-          inputDisabledClass,
-          inputReadOnlyClass,
-          wrapperClassName,
-        )}
-        ref={(el) => {
-          if (wrapperRef) {
-            wrapperRef.current = el;
-          }
-        }}
-      >
-        {before}
-
-        <input
-          ref={(el) => {
-            inputRef.current = el;
-          }}
-          type={type}
-          required={required}
-          {...props}
-          {...attributes}
-          id={inputId}
-          data-testid={testid ? `${testid}-input` : undefined}
-          className={clsx(
-            "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
-            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-            "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
-            align === "right" && "text-right",
-            align === "center" && "text-center",
-            componentPaddingXUsingComponentGap,
-            typography.paragraph,
-            className,
-            props.readOnly && !props.disabled && "!px-0",
-          )}
-          style={{ ...props.style, width }}
-        />
-
-        {secondaryIconColor ? (
-          <span className="contents text-text-secondary-normal">{after}</span>
-        ) : (
-          after
-        )}
-        {rightAdornment}
-      </div>
-
-      {caption && (
-        <div
-          id={id ? `${id}-caption` : undefined}
-          data-testid={testid ? `${testid}-caption` : undefined}
-        >
-          {caption}
-        </div>
-      )}
-    </label>
-  );
-};
-
-export const Input = ({
-  variant = "default",
-  decimals,
-  uom,
-  removeSearchIcon,
-  value: propValue,
-  onChange,
-  onBlur,
-  onClear,
-  id,
-  testid,
-  rightAdornment,
-  ...props
-}: Omit<ComponentProps<"input">, "onChange" | "align" | "children"> &
-  InputBaseProps & {
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onClear?: () => void;
-  }) => {
-  const [internalValue, setInternalValue] = useState("");
-  const [displayValue, setDisplayValue] = useState("");
-  useEffect(() => {
-    const stringValue = propValue?.toString() ?? "";
-    setInternalValue(stringValue);
-    setDisplayValue(stringValue);
-  }, [propValue]);
-
-  useEffect(() => {
-    if (variant !== "currency") {
-      return;
-    }
-
-    const stringValue = propValue?.toString() ?? "";
-
-    if (!stringValue) {
-      return;
-    }
-
-    const formatted = formatDecimalValue(stringValue, decimals ?? 2);
-
-    setInternalValue(formatted);
-    setDisplayValue(formatCurrencyDisplay(formatted));
-    // Intentionally not adding dependencies to avoid formatting on every change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const getInputProps = () => {
-    const baseProps = {
-      ...props,
-      id,
-      ...getDecimalPlaceholder(decimals),
-      value: propValue,
-    };
-
-    switch (variant) {
-      case "search":
-        return {
-          ...baseProps,
-          placeholder: props.placeholder ?? "Search",
-          className: "!mr-6",
-          value: displayValue,
-        };
-
-      case "finder":
-        return baseProps;
-
-      case "currency":
-        return {
-          ...baseProps,
-          align: "right" as const,
-          type: "text" as const,
-          value: displayValue,
-        };
-
-      case "percentage":
-      case "uom":
-        return {
-          ...baseProps,
-          type: "number" as const,
-          align: "right" as const,
-        };
-
-      default:
-        return baseProps;
-    }
-  };
-
-  const getBeforeElement = () => {
-    if (props.before) return props.before;
-
-    switch (variant) {
-      case "search":
-        return !removeSearchIcon ? (
-          <span className="text-icon-primary-normal contents">
-            <Icon name="search" />
-          </span>
-        ) : null;
-
-      case "currency":
-        return (
-          <span className="text-icon-primary-normal contents">
-            <Icon name="attach_money" />
-          </span>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  const getAfterElement = () => {
-    if (props.after) return props.after;
-
-    switch (variant) {
-      case "search": {
-        const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? (
-          <Icon
-            id={id ? `${id}-clear-button` : undefined}
-            testid={testid ? `${testid}-clear-button` : undefined}
-            name="close"
-            onClick={handleSearchReset}
-            className="cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
-          />
-        ) : null;
-      }
-
-      case "finder":
-        return <Icon name="search" />;
-
-      case "uom":
-        return uom ? (
-          <Paragraph color="text-secondary-normal">
-            {uom.toUpperCase()}
-          </Paragraph>
-        ) : null;
-
-      case "percentage":
-        return (
-          <span className="text-icon-primary-normal contents">
-            <Icon name="percent" />
-          </span>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  const handleSearchReset = () => {
-    setInternalValue("");
-    setDisplayValue("");
-
-    if (onChange) {
-      const syntheticEvent = {
-        target: { value: "" },
-      } as React.ChangeEvent<HTMLInputElement>;
-
-      if (typeof onChange === "function") {
-        onChange(syntheticEvent);
-      }
-    }
-
-    onClear?.();
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const rawValue = e.target.value;
-    const maxNumber =
-      props.max != null
-        ? Number(String(props.max).replace(/,/g, ""))
-        : undefined;
-
-    if (variant === "currency") {
-      const raw = rawValue.replace(/,/g, ""); // Remove commas for processing
-
-      if (raw === "") {
-        setInternalValue("");
-        setDisplayValue("");
-        if (onChange) {
-          const syntheticEvent = {
-            ...e,
-            target: { ...e.target, value: "" },
-          } as React.ChangeEvent<HTMLInputElement>;
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-
-      const regex = /^\d*\.?\d*$/;
-      if (!regex.test(raw)) return;
-
-      const parts = raw.split(".");
-      const currentDecimals = decimals ?? 2;
-      if (parts.length === 2 && parts[1].length > currentDecimals) return;
-
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        // Clamp to max
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals,
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formatCurrencyDisplay(formattedClamped));
-        if (onChange) {
-          const syntheticEvent = {
-            ...e,
-            target: { ...e.target, value: clamped.toString() },
-          } as React.ChangeEvent<HTMLInputElement>;
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-
-      setInternalValue(raw);
-      setDisplayValue(formatCurrencyDisplay(raw));
-
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = {
-          ...e,
-          target: { ...e.target, value: asNumber.toString() },
-        } as React.ChangeEvent<HTMLInputElement>;
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-
-    // Handle numeric variants (percentage / uom) wrt max prop
-    if (
-      (variant === "percentage" || variant === "uom") &&
-      e.target.type === "number"
-    ) {
-      const numeric = Number(rawValue);
-      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          decimals ?? 0,
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formattedClamped);
-
-        if (typeof onChange === "function") {
-          const syntheticEvent = {
-            ...e,
-            target: { ...e.target, value: clamped.toString() },
-          } as React.ChangeEvent<HTMLInputElement>;
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
-
-    // Default behavior for other variants
-    setInternalValue(rawValue);
-    setDisplayValue(rawValue);
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (!internalValue) {
-      onBlur?.(e);
-      return;
-    }
-
-    if (variant === "currency") {
-      const formatted = formatDecimalValue(internalValue, decimals ?? 2);
-      setInternalValue(formatted);
-      setDisplayValue(formatCurrencyDisplay(formatted));
-
-      const asNumber = Number(formatted);
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = {
-          ...e,
-          target: { ...e.target, value: asNumber.toString() },
-        } as React.ChangeEvent<HTMLInputElement>;
-        onChange(syntheticEvent);
-      }
-    } else if (variant === "uom" || variant === "percentage") {
-      const formattedValue = formatDecimalValue(e.target.value, decimals);
-      e.target.value = formattedValue;
-    }
-
-    onBlur?.(e);
-  };
-
-  const inputProps = getInputProps();
-
-  return (
-    <InputBase
-      {...inputProps}
-      before={getBeforeElement()}
-      after={getAfterElement()}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      testid={testid}
-      rightAdornment={rightAdornment}
-    />
-  );
-};
-
-Input.displayName = "Input";
-
-// Legacy component exports for backward compatibility
-export const Finder = (
-  props: Omit<ComponentProps<"input">, "value" | "align" | "children" | "id"> &
-    InputBaseProps & { value?: string | number },
-) => <Input {...props} variant="finder" />;
-
-export const UOM = (
-  props: Omit<ComponentProps<"input">, "value" | "align" | "children" | "id"> &
-    InputBaseProps & {
-      uom: string;
-      value?: string | number;
-    },
-) => <Input {...props} variant="uom" />;
-
-export const Currency = (
-  props: Omit<
-    ComponentProps<"input">,
-    "onChange" | "align" | "children" | "id"
-  > &
-    InputBaseProps & {
-      onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    },
-) => {
-  const handleCurrencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // For currency, we want to pass the numeric value but maintain the string interface
-    props.onChange?.(e);
-  };
-
-  return (
-    <Input
-      {...props}
-      variant="currency"
-      decimals={props.decimals ?? 2}
-      onChange={handleCurrencyChange}
-    />
-  );
-};
-
-export const Percentage = (
-  props: Omit<ComponentProps<"input">, "value" | "align" | "children" | "id"> &
-    InputBaseProps & {
-      value?: string | number;
-    },
-) => <Input {...props} variant="percentage" />;
-
-// Set display names for legacy components
-Finder.displayName = "Finder";
-UOM.displayName = "UOM";
-Currency.displayName = "Currency";
-Percentage.displayName = "Percentage";

package/src/components/InputGroup.tsx

@@ -1,59 +0,0 @@
-"use client";
-import { ComponentProps, ReactNode } from "react";
-import { Label } from "./Label";
-import clsx from "clsx";
-import { useId } from "react";
-import { componentGap, layoutGap } from "../classNames";
-
-type InputGroupProps = {
-  id?: string;
-  testid?: string;
-  label: string;
-  orientation?: "vertical" | "horizontal";
-  error?: boolean;
-  caption?: ReactNode;
-};
-
-export const InputGroup = ({
-  id,
-  testid,
-  label,
-  orientation = "horizontal",
-  error = false,
-  children,
-  caption,
-  ...props
-}: ComponentProps<"div"> & InputGroupProps) => {
-  const internalId = useId();
-  const labelId = id ? `${id}-label` : undefined;
-  const labelTestId = testid ? `${testid}-label` : undefined;
-
-  return (
-    <div id={id} data-testid={testid} {...props} className={clsx("flex flex-col", componentGap)}>
-      <Label
-        id={labelId}
-        testid={labelTestId}
-        as="label"
-        className={clsx({ "!text-text-primary-error": error })}
-        htmlFor={internalId}
-      >
-        {label}
-      </Label>
-
-      <div
-        className={clsx(
-          "flex *:py-mobile-component-padding desktop:*:py-desktop-component-padding compact:*:py-desktop-compact-component-padding",
-          orientation === "vertical"
-            ? "flex-col"
-            : clsx("items-center", layoutGap),
-        )}
-      >
-        {children}
-      </div>
-
-      {caption && <div id={id ? `${id}-caption` : undefined} data-testid={testid ? `${testid}-caption` : undefined}>{caption}</div>}
-    </div>
-  );
-};
-
-InputGroup.displayName = "InputGroup";

package/src/components/Label.tsx

@@ -1,46 +0,0 @@
-import clsx from "clsx";
-import { AsProps, TextAttributes, TypographyProps } from "../types";
-import { componentPaddingXUsingComponentGap, typography } from "../classNames";
-export type Tags = "span" | "label" | "p" | "a";
-
-type LabelProps = {
-  as?: Tags;
-  id?: string;
-  testid?: string;
-} & AsProps<Tags> &
-  TextAttributes &
-  TypographyProps;
-
-export const Label = ({
-  as = "span",
-  padded,
-  className,
-  color,
-  align,
-  id,
-  testid,
-  ...props
-}: LabelProps) => {
-  const Element = as;
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        typography.label,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        className,
-        padded && componentPaddingXUsingComponentGap,
-      )}
-      {...props}
-      style={{
-        ...props.style,
-        color: color ? `var(--color-${color})` : undefined,
-      }}
-    />
-  );
-};
-
-Label.displayName = "Label";