@dmsi/wedgekit-react 0.0.4

package/dist/chunk-NBV3Y6UB.js

@@ -0,0 +1,315 @@
+import {
+  Label
+} from "./chunk-BENTHNAQ.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.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, useRef } from "react";
+import clsx from "clsx";
+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
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName"
+  ]);
+  const attributes = {
+    "data-error": error || 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",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal"
+  );
+  const inputFocusClass = clsx(
+    "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",
+        !props.disabled && "has-[[data-error]]:text-text-primary-error",
+        componentGap
+      ),
+      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 props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(InputBase, __spreadValues({}, props));
+};
+Input.displayName = "Input";
+var Finder = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(InputBase, __spreadProps(__spreadValues({}, props), { after: /* @__PURE__ */ jsx(Icon, { name: "search" }) }));
+};
+Finder.displayName = "Finder";
+var Search = (_a) => {
+  var _b = _a, {
+    removeSearchIcon
+  } = _b, props = __objRest(_b, [
+    "removeSearchIcon"
+  ]);
+  var _a2;
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues({}, props), {
+      placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+      before: !removeSearchIcon && /* @__PURE__ */ jsx(Icon, { name: "search" }),
+      after: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "close",
+          onClick: handleReset,
+          className: clsx(!props.value ? "text-transparent" : "cursor-pointer")
+        }
+      )
+    })
+  );
+  function handleReset() {
+    if (!props.value || !props.onChange) {
+      return;
+    }
+    const event = __spreadProps(__spreadValues({}, props), {
+      target: { value: "" }
+    });
+    props.onChange(event);
+  }
+};
+Search.displayName = "Search";
+var UOM = (_a) => {
+  var _b = _a, {
+    uom,
+    decimals
+  } = _b, props = __objRest(_b, [
+    "uom",
+    "decimals"
+  ]);
+  const handleBlur = (e) => {
+    var _a2;
+    const formattedValue = formatDecimalValue(e.target.value, decimals);
+    e.target.value = formattedValue;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      type: "number",
+      align: "right",
+      after: /* @__PURE__ */ jsx("span", { className: "text-text-secondary-normal uppercase", children: uom }),
+      onBlur: handleBlur
+    })
+  );
+};
+UOM.displayName = "UOM";
+var Currency = (_a) => {
+  var _b = _a, {
+    decimals
+  } = _b, props = __objRest(_b, [
+    "decimals"
+  ]);
+  const handleBlur = (e) => {
+    var _a2;
+    const formattedValue = formatDecimalValue(e.target.value, decimals);
+    e.target.value = formattedValue;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      align: "right",
+      type: "number",
+      before: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "attach_money" }) }),
+      onBlur: handleBlur
+    })
+  );
+};
+Currency.displayName = "Currency";
+var Percentage = (_a) => {
+  var _b = _a, {
+    decimals
+  } = _b, props = __objRest(_b, [
+    "decimals"
+  ]);
+  const handleBlur = (e) => {
+    var _a2;
+    const formattedValue = formatDecimalValue(e.target.value, decimals);
+    e.target.value = formattedValue;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      align: "right",
+      type: "number",
+      after: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) }),
+      onBlur: handleBlur
+    })
+  );
+};
+Percentage.displayName = "Percentage";
+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);
+}
+
+export {
+  InputBase,
+  Input,
+  Finder,
+  Search,
+  UOM,
+  Currency,
+  Percentage
+};

package/dist/chunk-NEBYCDGE.js

@@ -0,0 +1,284 @@
+import {
+  MenuOption
+} from "./chunk-2GC2SPSS.js";
+import {
+  Menu
+} from "./chunk-JNLDVEK3.js";
+import {
+  useSubMenuSystem
+} from "./chunk-IDAZ53A4.js";
+import {
+  CSS
+} from "./chunk-WVUIIBRR.js";
+import {
+  Search
+} from "./chunk-GPIG2QUB.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.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 { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataGridCell = memo((_a) => {
+  var _b = _a, {
+    type = "default",
+    component = "static",
+    children,
+    className,
+    locked = false,
+    noPadding = false,
+    paddedLeft = false,
+    style,
+    onClick,
+    onRightClick,
+    error,
+    warning,
+    center,
+    width
+  } = _b, props = __objRest(_b, [
+    "type",
+    "component",
+    "children",
+    "className",
+    "locked",
+    "noPadding",
+    "paddedLeft",
+    "style",
+    "onClick",
+    "onRightClick",
+    "error",
+    "warning",
+    "center",
+    "width"
+  ]);
+  const Element = type === "header" ? "th" : "td";
+  const timerRef = useRef(null);
+  const [isGrabbing, setIsGrabbing] = useState(false);
+  const [isPointerPressed, setIsPointerPressed] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  const handlePointerDown = (_event) => {
+    setIsPointerPressed(true);
+    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 && isPointerPressed) {
+      onClick(event);
+    }
+    if (rightClick && onRightClick) {
+      onRightClick();
+    }
+    setIsGrabbing(false);
+    setIsPointerPressed(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 flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+    "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" || center && "justify-center"
+  );
+  return /* @__PURE__ */ jsx(Element, __spreadProps(__spreadValues({ className: clsx("flex", !width && "flex-1"), style: { width } }, props), { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cellClasses,
+      style: __spreadValues({}, style),
+      onMouseDown: handlePointerDown,
+      onMouseUp: handlePointerUp,
+      onMouseLeave: handlePointerLeave,
+      onTouchStart: handlePointerDown,
+      onTouchEnd: handlePointerUp,
+      onTouchCancel: handlePointerLeave,
+      onContextMenu: (e) => e.preventDefault(),
+      children
+    }
+  ) }));
+});
+DataGridCell.displayName = "DataGridCell";
+function DraggableCellHeader(_a) {
+  var _b = _a, {
+    header,
+    children,
+    locked = false
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children",
+    "locked"
+  ]);
+  var _a2;
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
+    id: header.column.id
+  });
+  const [showMenu, setShowMenu] = useState(false);
+  const [filter, setFilter] = useState((_a2 = header.column.getFilterValue()) != null ? _a2 : "");
+  const {
+    menuRootRef,
+    toggleMenu,
+    isMenuActive,
+    registerSubMenu
+  } = useSubMenuSystem();
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      header.column.setFilterValue(filter);
+    }, 500);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [filter]);
+  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,
+    "--color-text-primary-normal": "var(--color-neutral-000)"
+  };
+  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) => /* @__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) => {
+                        setFilter(event.target.value);
+                      },
+                      onKeyDown: (event) => {
+                        if ([" ", "Space"].includes(event.key)) {
+                          event.stopPropagation();
+                        }
+                      },
+                      value: filter != null ? filter : ""
+                    }
+                  ) }),
+                  /* @__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 _a3;
+    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((_a3 = header.column.getFilterValue()) != null ? _a3 : "");
+  }
+}
+DraggableCellHeader.displayName = "DraggableCellHeader";
+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,
+    width: cell.column.getSize(),
+    minWidth: "min-content"
+  };
+  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+}
+DragAlongCell.displayName = "DragAlongCell";
+
+export {
+  DataGridCell,
+  DraggableCellHeader,
+  DragAlongCell
+};