@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/dist/chunk-QW4AJ5FK.js

@@ -1,483 +0,0 @@
-import {
-  MenuOption
-} from "./chunk-3JUIYULW.js";
-import {
-  Menu
-} from "./chunk-OM7QLLI2.js";
-import {
-  useSubMenuSystem
-} from "./chunk-PE3EZP56.js";
-import {
-  Search
-} from "./chunk-3DJWSTPS.js";
-import {
-  CSS
-} from "./chunk-WVUIIBRR.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  componentPadding,
-  paddingUsingComponentGap
-} from "./chunk-SATCWGO7.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,
-  memo
-} from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DataGridCell = memo(
-  (_a) => {
-    var _b = _a, {
-      id,
-      type = "default",
-      component = "static",
-      children,
-      className,
-      locked = false,
-      noPadding = false,
-      paddedLeft = false,
-      style,
-      onClick,
-      onRightClick,
-      error,
-      warning,
-      center,
-      width,
-      minWidth,
-      disabled,
-      testid
-    } = _b, props = __objRest(_b, [
-      "id",
-      "type",
-      "component",
-      "children",
-      "className",
-      "locked",
-      "noPadding",
-      "paddedLeft",
-      "style",
-      "onClick",
-      "onRightClick",
-      "error",
-      "warning",
-      "center",
-      "width",
-      "minWidth",
-      "disabled",
-      "testid"
-    ]);
-    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 h-10 relative text-text-primary-normal",
-      "focus-within:!z-10",
-      "overflow-x-hidden",
-      "overflow-y-hidden",
-      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 && componentPadding,
-      paddedLeft && "pl-2",
-      component === "icon" && "border-l",
-      isGrabbing && "!cursor-grabbing",
-      component === "checkbox" || center && "justify-center",
-      disabled && "!text-text-primary-disabled"
-    );
-    return /* @__PURE__ */ jsx(
-      Element,
-      __spreadProps(__spreadValues({
-        id,
-        "data-testid": testid,
-        className: clsx("flex h-10", !width && "flex-1"),
-        style: { width, minWidth }
-      }, props), {
-        "data-theme": type === "header" && !locked ? "brand" : void 0,
-        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 DataCellHeader(_a) {
-  var _b = _a, {
-    header,
-    children,
-    setNodeRef,
-    node,
-    id,
-    testid,
-    useMenuDefaultMinWidth
-  } = _b, props = __objRest(_b, [
-    "header",
-    "children",
-    "setNodeRef",
-    "node",
-    "id",
-    "testid",
-    "useMenuDefaultMinWidth"
-  ]);
-  var _a2;
-  const [showMenu, setShowMenu] = useState(false);
-  const [filter, setFilter] = useState(
-    (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
-  );
-  const ref = useRef(null);
-  const predeterminedPinned = useRef(false);
-  const { column, getContext } = header;
-  const { id: columnId, setFilterValue } = column;
-  const {
-    menuRootRef,
-    isMenuActive,
-    registerSubMenu,
-    listeners: subMenuListeners,
-    mobileHide
-  } = useSubMenuSystem(node ? node : ref);
-  useEffect(() => {
-    var _a3, _b2, _c;
-    const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
-    const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
-    const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
-    predeterminedPinned.current = [...left, ...right].includes(columnId);
-  }, [columnId, getContext]);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setFilterValue(filter);
-    }, 500);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [filter, setFilterValue]);
-  const style = __spreadValues({
-    position: "relative",
-    whiteSpace: "nowrap",
-    minWidth: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
-    "--color-icon-on-action-primary-normal": "var(--color-text-brand-primary-normal)",
-    "--background-action-secondary-normal": "var(--color-text-brand-primary-normal)"
-  }, props.style);
-  return /* @__PURE__ */ jsxs(
-    DataGridCell,
-    __spreadProps(__spreadValues({
-      id,
-      testid,
-      ref: setNodeRef ? setNodeRef : ref,
-      type: "header",
-      component: "header",
-      style,
-      minWidth: `${header.column.getSize()}px`,
-      onClick: header.column.getToggleSortingHandler(),
-      onRightClick: () => setShowMenu(!showMenu)
-    }, props), {
-      children: [
-        children,
-        header.column.getCanFilter() && /* @__PURE__ */ jsxs(
-          Menu,
-          {
-            id: id ? `${id}-menu` : void 0,
-            testid: testid ? `${testid}-menu` : void 0,
-            ref: menuRootRef,
-            positionTo: node ? node : ref,
-            show: showMenu,
-            setShow: setShowMenu,
-            mobileHide,
-            useDefaultMinWidth: useMenuDefaultMinWidth,
-            children: [
-              /* @__PURE__ */ jsx(
-                MenuOption,
-                __spreadProps(__spreadValues({
-                  id: id ? `${id}-filter-option` : void 0,
-                  testid: testid ? `${testid}-filter-option` : void 0
-                }, subMenuListeners), {
-                  subMenu: (_b2) => {
-                    var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ jsxs(
-                      Menu,
-                      __spreadProps(__spreadValues({
-                        id: id ? `${id}-filter-submenu` : void 0,
-                        testid: testid ? `${testid}-filter-submenu` : void 0
-                      }, props2), {
-                        show: isMenuActive(menuId, subMenuLevel),
-                        ref: (el) => {
-                          registerSubMenu(menuId, el);
-                        },
-                        useDefaultMinWidth: useMenuDefaultMinWidth,
-                        children: [
-                          /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
-                            Search,
-                            {
-                              id: id ? `${id}-filter-search` : void 0,
-                              testid: testid ? `${testid}-filter-search` : void 0,
-                              onChange: (event) => {
-                                setFilter(event.target.value);
-                              },
-                              onKeyDown: (event) => {
-                                if ([" ", "Space"].includes(event.key)) {
-                                  event.stopPropagation();
-                                }
-                              },
-                              value: filter != null ? filter : ""
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx(
-                            MenuOption,
-                            {
-                              id: id ? `${id}-filter-contains` : void 0,
-                              testid: testid ? `${testid}-filter-contains` : void 0,
-                              onClick: handleFilterFnChange,
-                              before: menuOptionIcon("includesString"),
-                              children: "Contains"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            MenuOption,
-                            {
-                              id: id ? `${id}-filter-startswith` : void 0,
-                              testid: testid ? `${testid}-filter-startswith` : void 0,
-                              onClick: handleFilterFnChange,
-                              before: menuOptionIcon("startsWith"),
-                              children: "Starts with"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            MenuOption,
-                            {
-                              id: id ? `${id}-filter-endswith` : void 0,
-                              testid: testid ? `${testid}-filter-endswith` : void 0,
-                              onClick: handleFilterFnChange,
-                              before: menuOptionIcon("endsWith"),
-                              children: "Ends with"
-                            }
-                          )
-                        ]
-                      })
-                    );
-                  },
-                  children: "Filter"
-                })
-              ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ jsx(
-                MenuOption,
-                __spreadProps(__spreadValues({
-                  onClick: () => {
-                    setShowMenu(!showMenu);
-                  }
-                }, subMenuListeners), {
-                  subMenu: (_d) => {
-                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ jsxs(
-                      Menu,
-                      __spreadProps(__spreadValues({}, props2), {
-                        show: isMenuActive(menuId, subMenuLevel),
-                        ref: (el) => {
-                          registerSubMenu(menuId, el);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            MenuOption,
-                            {
-                              selected: header.column.getIsPinned() === "left",
-                              onClick: () => {
-                                if (header.column.getIsPinned() === "left") {
-                                  header.column.pin(false);
-                                } else {
-                                  header.column.pin("left");
-                                }
-                              },
-                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ jsx(Icon, { name: "check" }),
-                              children: "Left"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            MenuOption,
-                            {
-                              selected: header.column.getIsPinned() === "right",
-                              onClick: () => {
-                                if (header.column.getIsPinned() === "right") {
-                                  header.column.pin(false);
-                                } else {
-                                  header.column.pin("right");
-                                }
-                              },
-                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ jsx(Icon, { name: "check" }),
-                              children: "Right"
-                            }
-                          )
-                        ]
-                      })
-                    );
-                  },
-                  children: `Freeze [${header.column.columnDef.header}]`
-                })
-              )
-            ]
-          }
-        )
-      ]
-    })
-  );
-  function menuOptionIcon(value) {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        name: "check",
-        className: clsx(
-          header.column.columnDef.filterFn !== value && "text-transparent"
-        )
-      }
-    );
-  }
-  function handleFilterFnChange(_id, value) {
-    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(filter);
-  }
-}
-DataCellHeader.displayName = "DataCellHeader";
-function DraggableCellHeader(_a) {
-  var _b = _a, {
-    header,
-    children
-  } = _b, props = __objRest(_b, [
-    "header",
-    "children"
-  ]);
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
-    id: header.column.id
-  });
-  const style = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    whiteSpace: "nowrap",
-    zIndex: isDragging ? 1 : 0,
-    "--color-text-primary-normal": "var(--color-action-000)",
-    "--color-icon-on-action-primary-normal": "var(--color-action-000)",
-    userSelect: "none"
-  };
-  return /* @__PURE__ */ jsx(
-    DataCellHeader,
-    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-      header,
-      setNodeRef,
-      node,
-      style
-    }, props), attributes), listeners), {
-      children
-    })
-  );
-}
-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",
-    minWidth: cell.column.getSize(),
-    zIndex: isDragging ? 1 : 0
-  };
-  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
-}
-DragAlongCell.displayName = "DragAlongCell";
-
-export {
-  DataGridCell,
-  DataCellHeader,
-  DraggableCellHeader,
-  DragAlongCell
-};

package/dist/chunk-RN465M4S.js

@@ -1,142 +0,0 @@
-import {
-  Paragraph
-} from "./chunk-7MBRCM3M.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  baseTransition,
-  componentGap
-} from "./chunk-SATCWGO7.js";
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Checkbox.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Checkbox = (_a) => {
-  var _b = _a, {
-    label,
-    error,
-    disabled,
-    readOnly,
-    checked,
-    onChange,
-    indeterminate,
-    paragraphClassName,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "label",
-    "error",
-    "disabled",
-    "readOnly",
-    "checked",
-    "onChange",
-    "indeterminate",
-    "paragraphClassName",
-    "id",
-    "testid"
-  ]);
-  const selected = indeterminate || checked;
-  const normalClassName = clsx(
-    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
-  );
-  const normalSelectedClassName = clsx(
-    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
-  );
-  const errorClassName = clsx(
-    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
-  );
-  const errorSelectedClassName = clsx(
-    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
-  );
-  const disabledClassName = clsx(
-    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
-  );
-  const readOnlyClassName = clsx(
-    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
-  );
-  const checkColor = clsx(
-    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
-    selected && disabled && "color-background-action-primary-disabled"
-  );
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      id,
-      "data-testid": testid,
-      htmlFor: id ? `${id}-input` : void 0,
-      className: clsx(
-        "flex items-center",
-        componentGap,
-        (disabled || readOnly && error || readOnly) && "cursor-default",
-        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            __spreadValues({
-              id: id ? `${id}-input` : void 0,
-              "data-testid": testid ? `${testid}-input` : void 0,
-              type: "checkbox",
-              className: "sr-only peer",
-              disabled,
-              checked: selected,
-              onChange: handleOnChange,
-              "data-indeterminate": indeterminate
-            }, props)
-          ),
-          error && (readOnly || disabled) ? /* @__PURE__ */ jsx("div", { className: clsx("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                "size-6 border rounded-base",
-                "flex items-center justify-center",
-                baseTransition,
-                normalClassName,
-                normalSelectedClassName,
-                errorClassName,
-                errorSelectedClassName,
-                disabledClassName,
-                readOnlyClassName,
-                checkColor
-              ),
-              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) })
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx(
-          Paragraph,
-          {
-            id: id ? `${id}-label` : void 0,
-            testid: testid ? `${testid}-label` : void 0,
-            as: "span",
-            padded: true,
-            className: clsx(
-              !(paragraphClassName == null ? void 0 : paragraphClassName.includes("text-wrap")) && "text-nowrap",
-              disabled && !error && "!text-text-primary-disabled",
-              error && !disabled && !readOnly && "!text-text-primary-error",
-              paragraphClassName
-            ),
-            children: label
-          }
-        )
-      ]
-    }
-  );
-  function handleOnChange(e) {
-    if (disabled || readOnly || readOnly && error || !onChange) {
-      return;
-    }
-    onChange(e);
-  }
-};
-Checkbox.displayName = "Checkbox";
-
-export {
-  Checkbox
-};