@dmsi/wedgekit-react 0.0.4

package/dist/chunk-3TPGMRVY.js

@@ -0,0 +1,123 @@
+import {
+  typography
+} from "./chunk-JDHZQIFC.js";
+
+// src/components/Tooltip.tsx
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = ({
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8
+}) => {
+  const ref = useRef(null);
+  const tooltipRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = useState(false);
+  const [removeOpacity, setRemoveOpacity] = useState(false);
+  const updatePosition = () => {
+    if (!ref.current || !tooltipRef.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "top":
+        top = rect.top - tooltipRect.height - offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = rect.bottom + offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.left - tooltipRect.width - offset;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.right + offset;
+        break;
+    }
+    setTooltipPosition({ top, left });
+    requestAnimationFrame(() => {
+      setRemoveOpacity(true);
+    });
+  };
+  const handleMouseEnter = () => {
+    if (!showOnTruncation || checkForTextTruncation()) {
+      setIsVisible(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+    setRemoveOpacity(false);
+  };
+  useEffect(() => {
+    if (isVisible && tooltipRef.current) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isVisible]);
+  useEffect(() => {
+    if (isVisible) {
+      window.addEventListener("resize", updatePosition);
+      return () => window.removeEventListener("resize", updatePosition);
+    }
+  }, [isVisible]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        isVisible && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: tooltipRef,
+              style: {
+                position: "fixed",
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                zIndex: 9999
+              },
+              className: clsx(
+                typography.caption,
+                "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                !removeOpacity && "opacity-0"
+              ),
+              children: message
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+  function checkForTextTruncation() {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector("p");
+      if (paragraph) {
+        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
+        setIsTruncated(isTruncated2);
+        return isTruncated2;
+      }
+    }
+    return false;
+  }
+};
+Tooltip.displayName = "Tooltip";
+
+export {
+  Tooltip
+};

package/dist/chunk-42X2EOOI.js

@@ -0,0 +1,129 @@
+import {
+  Paragraph
+} from "./chunk-IJ6AAL4W.js";
+import {
+  Label
+} from "./chunk-BENTHNAQ.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/MenuOption.tsx
+import clsx from "clsx";
+import { useId, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MenuOption = ({
+  children,
+  disabled = false,
+  variant = "normal",
+  value,
+  before,
+  after,
+  subMenu,
+  onClick,
+  selected,
+  ref,
+  subMenuSystem,
+  menuLevel = 0
+}) => {
+  const uniqueId = useId();
+  const internalRef = useRef(null);
+  const actualRef = ref || internalRef;
+  const menuId = useRef(`menu-${uniqueId}`);
+  const hoverTimeout = useRef(null);
+  const hasSubMenu = typeof subMenu === "function";
+  const isSubMenuOpen = !!subMenuSystem && subMenuSystem.isMenuActive(menuId.current, menuLevel + 1);
+  const handleMouseEnter = () => {
+    if (disabled || !subMenuSystem || !hasSubMenu) return;
+    if (hoverTimeout.current) {
+      clearTimeout(hoverTimeout.current);
+      hoverTimeout.current = null;
+    }
+    subMenuSystem.toggleMenu(menuId.current, menuLevel + 1);
+  };
+  const handleMouseLeave = () => {
+    if (disabled || !subMenuSystem || !hasSubMenu) return;
+    if (hoverTimeout.current) {
+      clearTimeout(hoverTimeout.current);
+    }
+    hoverTimeout.current = setTimeout(() => {
+      subMenuSystem.closeSubMenuLevel(menuLevel + 1);
+    }, 200);
+  };
+  const additionalAttributes = {
+    "data-selected": selected || null
+  };
+  const svgStyles = clsx(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
+  );
+  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && clsx(
+    "bg-transparent text-text-primary-normal",
+    "hover:bg-background-action-secondary-hover",
+    "focus:bg-background-action-secondary-hover",
+    "data-selected:bg-background-action-secondary-hover",
+    "active:bg-background-action-secondary-active"
+  );
+  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && clsx(
+    "text-action-400 bg-transparent",
+    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+    "active:bg-background-action-secondary-active active:text-text-action-active"
+  );
+  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
+  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: actualRef,
+        className: clsx(
+          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          svgStyles,
+          componentGap,
+          componentPadding,
+          baseTransition,
+          normalStyles,
+          normalDisabledStyles,
+          actionStyles,
+          actionDisabledStyles,
+          disabledStyles
+        ),
+        "data-value": value || children,
+        onClick: () => {
+          onClick == null ? void 0 : onClick(menuId.current, value || children);
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }, additionalAttributes), {
+        tabIndex: -1,
+        children: [
+          before,
+          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
+          after
+        ]
+      })
+    ),
+    hasSubMenu && subMenuSystem ? subMenu(
+      menuId.current,
+      actualRef,
+      {
+        subMenuSystem,
+        menuLevel: menuLevel + 1
+      }
+    ) : subMenu == null ? void 0 : subMenu(menuId.current, actualRef)
+  ] });
+};
+MenuOption.displayName = "MenuOption";
+
+export {
+  MenuOption
+};

package/dist/chunk-47GJZWOH.js

@@ -0,0 +1,103 @@
+import {
+  InputBase
+} from "./chunk-II6HWGH6.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Select.tsx
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Select = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness"
+  ]);
+  const inputRef = useRef(null);
+  const inputContainerRef = useRef(null);
+  const preventFocusOnInitialRender = useRef(true);
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    var _a2;
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, [props.value]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputBase,
+      __spreadValues({
+        inputContainerRef,
+        ref: inputRef,
+        label,
+        after: !readOnly && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              props.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
+              "contents"
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { name: "keyboard_arrow_down" })
+          }
+        ),
+        maxLength: 0,
+        className: clsx("!caret-transparent !cursor-default", className),
+        wrapperClassName,
+        onKeyDown: (e) => {
+          const openKeys = ["Enter", "Space", " "];
+          if (openKeys.includes(e.key)) {
+            e.target.click();
+          }
+        },
+        onClick: (e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+          setShow(!show);
+          onClick == null ? void 0 : onClick(e);
+        },
+        error,
+        readOnly,
+        removeRoundness
+      }, props)
+    ),
+    renderMenu ? renderMenu({
+      positionTo: inputContainerRef,
+      show,
+      setShow
+    }) : children
+  ] });
+};
+Select.displayName = "Select";
+
+export {
+  Select
+};

package/dist/chunk-4BUU5MTT.js

@@ -0,0 +1,263 @@
+import {
+  Menu
+} from "./chunk-IWUZ6NSN.js";
+import {
+  MenuOption
+} from "./chunk-6VAZR5GK.js";
+import {
+  useSubMenuSystem
+} from "./chunk-PMNRGAPH.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
+};

package/dist/chunk-4C66DLIJ.js

@@ -0,0 +1,51 @@
+import {
+  componentPaddingXUsingComponentGap,
+  typography
+} from "./chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Label.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Label = (_a) => {
+  var _b = _a, {
+    as = "span",
+    padded,
+    className,
+    color,
+    align
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    })
+  );
+};
+Label.displayName = "Label";
+
+export {
+  Label
+};

package/dist/chunk-4IZG2UCW.js

@@ -0,0 +1,31 @@
+// src/components/ModalScrim.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var ModalScrim = ({
+  className,
+  showModal = false,
+  children,
+  onClick,
+  ref
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed",
+        className,
+        {
+          "inset-0 z-50": !showModal
+        }
+      ),
+      onClick,
+      ref,
+      children
+    }
+  );
+};
+ModalScrim.displayName = "ModalScrim";
+
+export {
+  ModalScrim
+};