@dmsi/wedgekit-react 0.0.1242 → 1.0.0

package/dist/chunk-PABII472.js

@@ -1,579 +0,0 @@
-import {
-  Label
-} from "./chunk-4UGMSWWA.js";
-import {
-  formatCurrencyDisplay,
-  formatDecimalValue,
-  getDecimalPlaceholder
-} from "./chunk-5UH6QUFB.js";
-import {
-  Paragraph
-} from "./chunk-7MBRCM3M.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinusBorder,
-  componentPaddingMinusBorderDesktop,
-  componentPaddingXUsingComponentGap,
-  typography
-} from "./chunk-SATCWGO7.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Input.tsx
-import {
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var InputBase = (_a) => {
-  var _b = _a, {
-    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
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "before",
-    "after",
-    "rightAdornment",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "selectOnFocus",
-    "removeRoundness",
-    "inputContainerRef",
-    "removeBorder",
-    "wrapperClassName",
-    "focus",
-    "secondaryIconColor",
-    "fullWidth",
-    "width",
-    "wrapperRef",
-    "autocompletePadding"
-  ]);
-  const attributes = {
-    "data-error": error && !focus || null,
-    "data-focus": focus || null
-  };
-  const inputRef = useRef(null);
-  const inputId = id ? `${id}-input` : void 0;
-  useEffect(() => {
-    var _a2;
-    const input = inputRef.current;
-    const focusHandler = () => {
-      input == null ? void 0 : input.select();
-    };
-    if (selectOnFocus) {
-      (_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
-      return () => {
-        input == null ? void 0 : 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 /* @__PURE__ */ jsxs(
-    "label",
-    {
-      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: __spreadValues({}, props.style),
-      children: [
-        label && /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", componentGap), children: [
-          /* @__PURE__ */ jsx(
-            Label,
-            {
-              id: id ? `${id}-label` : void 0,
-              color: error ? "text-primary-error" : void 0,
-              className: clsx(
-                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
-              ),
-              children: label
-            }
-          ),
-          required && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(typography.label, "text-text-critical-normal"),
-              children: "*"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              inputBaseClass,
-              !props.disabled && inputInvalidClass,
-              inputFocusClass,
-              inputDisabledClass,
-              inputReadOnlyClass,
-              wrapperClassName
-            ),
-            ref: (el) => {
-              if (wrapperRef) {
-                wrapperRef.current = el;
-              }
-            },
-            children: [
-              before,
-              /* @__PURE__ */ jsx(
-                "input",
-                __spreadProps(__spreadValues(__spreadValues({
-                  ref: (el) => {
-                    inputRef.current = el;
-                  },
-                  type,
-                  required
-                }, props), attributes), {
-                  id: inputId,
-                  "data-testid": testid ? `${testid}-input` : void 0,
-                  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: __spreadProps(__spreadValues({}, props.style), { width })
-                })
-              ),
-              secondaryIconColor ? /* @__PURE__ */ jsx("span", { className: "contents text-text-secondary-normal", children: after }) : after,
-              rightAdornment
-            ]
-          }
-        ),
-        caption && /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: id ? `${id}-caption` : void 0,
-            "data-testid": testid ? `${testid}-caption` : void 0,
-            children: caption
-          }
-        )
-      ]
-    }
-  );
-};
-var Input = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    decimals,
-    uom,
-    currencyFormat = false,
-    formatOnBlur = false,
-    removeSearchIcon,
-    value: propValue,
-    onChange,
-    onBlur,
-    onClear,
-    id,
-    testid,
-    rightAdornment
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "decimals",
-    "uom",
-    "currencyFormat",
-    "formatOnBlur",
-    "removeSearchIcon",
-    "value",
-    "onChange",
-    "onBlur",
-    "onClear",
-    "id",
-    "testid",
-    "rightAdornment"
-  ]);
-  const [internalValue, setInternalValue] = useState("");
-  const [displayValue, setDisplayValue] = useState("");
-  const [isFocused, setIsFocused] = useState(false);
-  useEffect(() => {
-    var _a2;
-    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    const shouldUseThousandsFormatting = variant === "currency" || variant === "uom" && currencyFormat;
-    if (!stringValue) {
-      setInternalValue("");
-      setDisplayValue("");
-      return;
-    }
-    if (!shouldUseThousandsFormatting) {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-      return;
-    }
-    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
-    if (formatOnBlur && isFocused) {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-      return;
-    }
-    setInternalValue(formatted);
-    setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [propValue, variant, currencyFormat, decimals, formatOnBlur, isFocused]);
-  const getInputProps = () => {
-    var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
-      id
-    }), getDecimalPlaceholder(decimals)), {
-      value: propValue
-    });
-    switch (variant) {
-      case "search":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
-          className: "!mr-6",
-          value: displayValue
-        });
-      case "finder":
-        return baseProps;
-      case "currency":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          align: "right",
-          type: "text",
-          value: displayValue
-        });
-      case "percentage":
-      case "uom":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          type: currencyFormat ? "text" : "number",
-          align: "right",
-          value: currencyFormat ? displayValue : propValue
-        });
-      default:
-        return baseProps;
-    }
-  };
-  const getBeforeElement = () => {
-    if (props.before) return props.before;
-    switch (variant) {
-      case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "search" }) }) : null;
-      case "currency":
-        return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "attach_money" }) });
-      case "uom":
-        return currencyFormat ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "attach_money" }) }) : null;
-      default:
-        return null;
-    }
-  };
-  const getAfterElement = () => {
-    if (props.after) return props.after;
-    switch (variant) {
-      case "search": {
-        const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ jsx(
-          Icon,
-          {
-            id: id ? `${id}-clear-button` : void 0,
-            testid: testid ? `${testid}-clear-button` : void 0,
-            name: "close",
-            onClick: handleSearchReset,
-            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
-          }
-        ) : null;
-      }
-      case "finder":
-        return /* @__PURE__ */ jsx(Icon, { name: "search" });
-      case "uom":
-        return uom ? /* @__PURE__ */ jsx(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
-      case "percentage":
-        return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) });
-      default:
-        return null;
-    }
-  };
-  const handleSearchReset = () => {
-    setInternalValue("");
-    setDisplayValue("");
-    if (onChange) {
-      const syntheticEvent = {
-        target: { value: "" }
-      };
-      if (typeof onChange === "function") {
-        onChange(syntheticEvent);
-      }
-    }
-    onClear == null ? void 0 : onClear();
-  };
-  const handleChange = (e) => {
-    const rawValue = e.target.value;
-    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
-    if (variant === "currency") {
-      const raw = rawValue.replace(/,/g, "");
-      if (raw === "") {
-        setInternalValue("");
-        setDisplayValue("");
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      const regex = /^\d*\.?\d*$/;
-      if (!regex.test(raw)) return;
-      const parts = raw.split(".");
-      const currentDecimals = decimals != null ? decimals : 2;
-      if (parts.length === 2 && parts[1].length > currentDecimals) return;
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(
-          formatOnBlur ? formattedClamped : formatCurrencyDisplay(formattedClamped)
-        );
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(raw);
-      setDisplayValue(formatOnBlur ? raw : formatCurrencyDisplay(raw));
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    if (variant === "uom" && currencyFormat) {
-      const raw = rawValue.replace(/,/g, "");
-      if (raw === "") {
-        setInternalValue("");
-        setDisplayValue("");
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      const regex = /^\d*\.?\d*$/;
-      if (!regex.test(raw)) return;
-      const parts = raw.split(".");
-      const currentDecimals = decimals != null ? decimals : 2;
-      if (parts.length === 2 && parts[1].length > currentDecimals) return;
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formatCurrencyDisplay(formattedClamped));
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(raw);
-      setDisplayValue(formatCurrencyDisplay(raw));
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    if (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 != null ? decimals : 0
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formattedClamped);
-        if (typeof onChange === "function") {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
-    setInternalValue(rawValue);
-    setDisplayValue(rawValue);
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-  };
-  const handleBlur = (e) => {
-    setIsFocused(false);
-    if (!internalValue) {
-      onBlur == null ? void 0 : onBlur(e);
-      return;
-    }
-    if (variant === "currency") {
-      const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
-      setInternalValue(formatted);
-      setDisplayValue(formatCurrencyDisplay(formatted));
-      const asNumber = Number(formatted);
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-    } else if (variant === "uom") {
-      if (currencyFormat) {
-        const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
-        setInternalValue(formatted);
-        setDisplayValue(formatCurrencyDisplay(formatted));
-        const asNumber = Number(formatted);
-        if (!isNaN(asNumber) && onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-      } else {
-        const formattedValue = formatDecimalValue(e.target.value, decimals);
-        e.target.value = formattedValue;
-      }
-    }
-    onBlur == null ? void 0 : onBlur(e);
-  };
-  const handleFocus = (e) => {
-    var _a2;
-    setIsFocused(true);
-    (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
-  };
-  const inputProps = getInputProps();
-  return /* @__PURE__ */ jsx(
-    InputBase,
-    __spreadProps(__spreadValues({}, inputProps), {
-      before: getBeforeElement(),
-      after: getAfterElement(),
-      onFocus: handleFocus,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      testid,
-      rightAdornment
-    })
-  );
-};
-Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
-var Currency = (props) => {
-  var _a;
-  const handleCurrencyChange = (e) => {
-    var _a2;
-    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
-  };
-  return /* @__PURE__ */ jsx(
-    Input,
-    __spreadProps(__spreadValues({}, props), {
-      variant: "currency",
-      decimals: (_a = props.decimals) != null ? _a : 2,
-      onChange: handleCurrencyChange
-    })
-  );
-};
-var Percentage = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
-Finder.displayName = "Finder";
-UOM.displayName = "UOM";
-Currency.displayName = "Currency";
-Percentage.displayName = "Percentage";
-
-export {
-  InputBase,
-  Input,
-  Finder,
-  UOM,
-  Currency,
-  Percentage
-};