@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/chunk-X65IBJJM.js

@@ -1,436 +0,0 @@
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinusBorder,
-  componentPaddingXUsingComponentGap,
-  typography
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Input.tsx
-import {
-  useEffect,
-  useState
-} from "react";
-import clsx from "clsx";
-
-// src/utils/formatting.tsx
-function getDecimalPlaceholder(decimals) {
-  if (!decimals || decimals <= 0) {
-    return {};
-  }
-  return {
-    placeholder: `0.${"0".repeat(decimals)}`
-  };
-}
-function formatDecimalValue(value, decimals) {
-  if (!value || value === "") {
-    return "";
-  }
-  const numValue = typeof value === "string" ? parseFloat(value) : value;
-  if (isNaN(numValue)) {
-    return "";
-  }
-  if (!decimals || decimals <= 0) {
-    return String(Math.round(numValue));
-  }
-  return numValue.toFixed(decimals);
-}
-function formatCurrencyDisplay(value) {
-  if (!value || value === "") {
-    return "";
-  }
-  const parts = value.split(".");
-  const integerPart = parts[0];
-  const decimalPart = parts[1];
-  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
-}
-
-// src/components/Input.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var InputBase = (_a) => {
-  var _b = _a, {
-    before,
-    after,
-    type,
-    label,
-    error,
-    className,
-    align = "left",
-    caption,
-    required,
-    selectOnFocus,
-    removeRoundness,
-    inputContainerRef,
-    removeBorder,
-    wrapperClassName,
-    focus
-  } = _b, props = __objRest(_b, [
-    "before",
-    "after",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "selectOnFocus",
-    "removeRoundness",
-    "inputContainerRef",
-    "removeBorder",
-    "wrapperClassName",
-    "focus"
-  ]);
-  const attributes = {
-    "data-error": error && !focus || null,
-    "data-focus": focus || null
-  };
-  const inputRef = useRef(null);
-  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(
-    "w-full",
-    "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",
-    componentPaddingMinusBorder,
-    !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",
-    {
-      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,
-            {
-              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
-            ),
-            children: [
-              before,
-              /* @__PURE__ */ jsx(
-                "input",
-                __spreadProps(__spreadValues(__spreadValues({
-                  ref: (el) => {
-                    inputRef.current = el;
-                  },
-                  type,
-                  required
-                }, props), attributes), {
-                  id: props.id,
-                  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"
-                  )
-                })
-              ),
-              after
-            ]
-          }
-        ),
-        caption
-      ]
-    }
-  );
-};
-var Input = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    decimals,
-    uom,
-    removeSearchIcon,
-    value: propValue,
-    onChange,
-    onBlur
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "decimals",
-    "uom",
-    "removeSearchIcon",
-    "value",
-    "onChange",
-    "onBlur"
-  ]);
-  const [internalValue, setInternalValue] = useState("");
-  const [displayValue, setDisplayValue] = useState("");
-  useEffect(() => {
-    var _a2;
-    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (variant === "currency") {
-      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
-        setInternalValue("");
-        setDisplayValue("");
-      } else {
-        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
-        if (!isNaN(numValue)) {
-          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
-          setInternalValue(formatted);
-          setDisplayValue(formatCurrencyDisplay(formatted));
-        }
-      }
-    } else {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-    }
-  }, [propValue, decimals, variant]);
-  const getInputProps = () => {
-    var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
-    switch (variant) {
-      case "search":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
-          className: "!pr-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: "number",
-          align: "right"
-        });
-      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" }) });
-      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,
-          {
-            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("span", { className: "text-text-secondary-normal uppercase", children: uom }) : 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);
-      }
-    }
-  };
-  const handleChange = (e) => {
-    const rawValue = e.target.value;
-    if (variant === "search") {
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
-    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;
-      setInternalValue(raw);
-      setDisplayValue(formatCurrencyDisplay(raw));
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    setInternalValue(rawValue);
-    setDisplayValue(rawValue);
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-  };
-  const handleBlur = (e) => {
-    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" || variant === "percentage") {
-      const formattedValue = formatDecimalValue(e.target.value, decimals);
-      e.target.value = formattedValue;
-    }
-    onBlur == null ? void 0 : onBlur(e);
-  };
-  const inputProps = getInputProps();
-  return /* @__PURE__ */ jsx(
-    InputBase,
-    __spreadProps(__spreadValues({}, inputProps), {
-      before: getBeforeElement(),
-      after: getAfterElement(),
-      onChange: handleChange,
-      onBlur: handleBlur
-    })
-  );
-};
-Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var Search = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "search" }));
-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";
-Search.displayName = "Search";
-UOM.displayName = "UOM";
-Currency.displayName = "Currency";
-Percentage.displayName = "Percentage";
-
-export {
-  InputBase,
-  Input,
-  Finder,
-  Search,
-  UOM,
-  Currency,
-  Percentage
-};

package/dist/chunk-XATMLZOP.js

@@ -1,263 +0,0 @@
-import {
-  Menu
-} from "./chunk-YN7MUHAZ.js";
-import {
-  useSubMenuSystem
-} from "./chunk-MUQHKNFV.js";
-import {
-  MenuOption
-} from "./chunk-42X2EOOI.js";
-import {
-  CSS
-} from "./chunk-WVUIIBRR.js";
-import {
-  Search
-} from "./chunk-ZCFOYW2U.js";
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  paddingUsingComponentGap
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/DataGridCell.tsx
-import { useSortable } from "@dnd-kit/sortable";
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DataGridCell = (_a) => {
-  var _b = _a, {
-    type = "default",
-    component = "static",
-    children,
-    className,
-    locked = false,
-    noPadding = false,
-    paddedLeft = false,
-    style,
-    onClick,
-    onRightClick,
-    error,
-    warning
-  } = _b, props = __objRest(_b, [
-    "type",
-    "component",
-    "children",
-    "className",
-    "locked",
-    "noPadding",
-    "paddedLeft",
-    "style",
-    "onClick",
-    "onRightClick",
-    "error",
-    "warning"
-  ]);
-  const Element = type === "header" ? "th" : "td";
-  const timerRef = useRef(null);
-  const [isGrabbing, setIsGrabbing] = useState(false);
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, []);
-  const handlePointerDown = (_event) => {
-    timerRef.current = window.setTimeout(() => {
-      setIsGrabbing(true);
-    }, 500);
-  };
-  const handlePointerUp = (event) => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    const rightClick = event.nativeEvent instanceof MouseEvent && event.nativeEvent.button === 2;
-    if (!isGrabbing && onClick && !rightClick) {
-      onClick(event);
-    }
-    if (rightClick && onRightClick) {
-      onRightClick();
-    }
-    setIsGrabbing(false);
-  };
-  const handlePointerLeave = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-  const headerBgStyles = type === "header" && !locked && !["button"].includes(component) && "bg-brand-400 border-brand-200";
-  const lockedHeaderBgStyles = locked && !["button"].includes(component) && "bg-neutral-400 border-neutral-300";
-  const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && clsx("border-r");
-  const buttonComponentStyles = component === "button" && clsx("border-r border-b border-border-primary-normal");
-  const iconComponentStyles = component === "icon" && clsx("border-l");
-  const cellClasses = clsx(
-    headerTypeStyles,
-    buttonComponentStyles,
-    headerBgStyles,
-    lockedHeaderBgStyles,
-    iconComponentStyles,
-    className,
-    "flex items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative",
-    "focus-within:!z-10",
-    component === "input" && "border",
-    component === "input" && !error && !warning && "border-border-primary-normal",
-    component === "input" && error && "border-border-primary-error",
-    component === "input" && warning && "border-background-warning-normal",
-    !["button", "icon"].includes(component) && !noPadding && "p-2",
-    paddedLeft && "pl-2",
-    component === "icon" && "border-l",
-    isGrabbing && "!cursor-grabbing",
-    component === "checkbox" && "justify-center"
-  );
-  return /* @__PURE__ */ jsx(Element, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cellClasses,
-      style,
-      onMouseDown: handlePointerDown,
-      onMouseUp: handlePointerUp,
-      onMouseLeave: handlePointerLeave,
-      onTouchStart: handlePointerDown,
-      onTouchEnd: handlePointerUp,
-      onTouchCancel: handlePointerLeave,
-      onContextMenu: (e) => e.preventDefault(),
-      children
-    }
-  ) }));
-};
-DataGridCell.displayName = "DataGridCell";
-function DraggableTableHeader(_a) {
-  var _b = _a, {
-    header,
-    children,
-    locked = false
-  } = _b, props = __objRest(_b, [
-    "header",
-    "children",
-    "locked"
-  ]);
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
-    id: header.column.id
-  });
-  const [showMenu, setShowMenu] = useState(false);
-  const {
-    menuRootRef,
-    toggleMenu,
-    isMenuActive,
-    registerSubMenu
-  } = useSubMenuSystem();
-  const style = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    whiteSpace: "nowrap",
-    width: header.column.getSize(),
-    zIndex: isDragging ? 1 : 0
-  };
-  return /* @__PURE__ */ jsxs(
-    DataGridCell,
-    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
-      locked,
-      type: "header",
-      component: "header",
-      ref: setNodeRef,
-      colSpan: header.colSpan,
-      style
-    }, props), {
-      onClick: header.column.getToggleSortingHandler(),
-      onRightClick: () => setShowMenu(!showMenu)
-    }), locked ? {} : attributes), locked ? {} : listeners), {
-      children: [
-        children,
-        header.column.getCanFilter() && /* @__PURE__ */ jsx(Menu, { ref: menuRootRef, positionTo: node, show: showMenu, setShow: setShowMenu, children: /* @__PURE__ */ jsx(
-          MenuOption,
-          {
-            after: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
-            onClick: (menuId) => toggleMenu(menuId, 0),
-            subMenu: (menuId, menuOptionRef) => {
-              var _a2;
-              return /* @__PURE__ */ jsxs(
-                Menu,
-                {
-                  positionTo: menuOptionRef,
-                  position: "right",
-                  show: isMenuActive(menuId, 0),
-                  ref: (el) => {
-                    registerSubMenu(menuId, el);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
-                      Search,
-                      {
-                        onChange: (event) => {
-                          header.column.setFilterValue(event.target.value);
-                        },
-                        value: (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("includesString"), children: "Contains" }),
-                    /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("startsWith"), children: "Starts with" }),
-                    /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("endsWith"), children: "Ends with" })
-                  ]
-                }
-              );
-            },
-            children: "Filter"
-          }
-        ) })
-      ]
-    })
-  );
-  function menuOptionIcon(value) {
-    return /* @__PURE__ */ jsx(Icon, { name: "check", className: clsx(header.column.columnDef.filterFn !== value && "text-transparent") });
-  }
-  function handleFilterFnChange(_id, value) {
-    var _a2;
-    let filterFn = "includesString";
-    const currentFilterFn = header.column.columnDef.filterFn;
-    if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
-      filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
-    }
-    if ((value == null ? void 0 : value.toLowerCase()) === "ends with") {
-      filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
-    }
-    if ((value == null ? void 0 : value.toLowerCase()) === "contains") {
-      filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
-    }
-    header.column.columnDef.filterFn = filterFn;
-    header.column.setFilterValue((_a2 = header.column.getFilterValue()) != null ? _a2 : "");
-  }
-}
-DraggableTableHeader.displayName = "DraggableTableHeader";
-function DragAlongCell(_a) {
-  var _b = _a, { cell, children } = _b, props = __objRest(_b, ["cell", "children"]);
-  const { isDragging, setNodeRef, transform } = useSortable({
-    id: cell.column.id
-  });
-  const style = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    zIndex: isDragging ? 1 : 0,
-    minWidth: "min-content"
-  };
-  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
-}
-DragAlongCell.displayName = "DragAlongCell";
-
-export {
-  DataGridCell,
-  DraggableTableHeader,
-  DragAlongCell
-};