@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/chunk-6XDXJ3Z3.js

@@ -1,131 +0,0 @@
-// src/classNames.ts
-import clsx from "clsx";
-var typography = {
-  display1: clsx(
-    "font-sans font-semibold",
-    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
-    "leading-display-1-mobile desktop:leading-display-1-desktop"
-  ),
-  display2: clsx(
-    "font-sans font-bold",
-    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
-    "leading-display-2-mobile desktop:leading-display-2-desktop"
-  ),
-  heading1: clsx(
-    "font-sans font-semibold",
-    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
-    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
-  ),
-  heading2: clsx(
-    "font-sans font-normal",
-    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
-    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
-  ),
-  heading3: clsx(
-    "font-sans font-semibold",
-    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
-    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
-  ),
-  subheader: clsx(
-    "font-sans font-semibold",
-    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
-    "leading-subheader-mobile desktop:leading-subheader-desktop"
-  ),
-  link: clsx(
-    "font-sans font-normal",
-    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
-    "leading-link-mobile desktop:leading-link-desktop"
-  ),
-  buttonLabel: clsx(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  label: clsx(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  paragraph: clsx(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
-  ),
-  caption: clsx(
-    "font-sans font-normal",
-    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
-    "leading-caption-mobile desktop:leading-caption-desktop"
-  )
-};
-var baseTransition = clsx(
-  "transition-colors duration-100 ease-in-out"
-);
-var componentGap = clsx(
-  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
-);
-var paddingUsingComponentGap = clsx(
-  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
-);
-var paddingYUsingLayoutGroupGap = clsx(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var componentPadding = clsx(
-  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-);
-var componentPaddingBottom = clsx(
-  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
-);
-var componentPaddingY = clsx(
-  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
-);
-var componentPaddingXUsingComponentGap = clsx(
-  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
-);
-var componentPaddingYUsingComponentGap = clsx(
-  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
-);
-var componentPaddingMinusBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
-);
-var componentPaddingMinus2pxBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
-);
-var layoutPaddingBottom = clsx(
-  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
-);
-var containerPaddingX = clsx(
-  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
-);
-var layoutGroupGapPaddingY = clsx(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var layoutGroupGap = clsx(
-  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
-);
-var layoutGap = clsx(
-  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
-);
-var gapUsingContainerPadding = clsx(
-  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
-);
-
-export {
-  typography,
-  baseTransition,
-  componentGap,
-  paddingUsingComponentGap,
-  paddingYUsingLayoutGroupGap,
-  componentPadding,
-  componentPaddingBottom,
-  componentPaddingY,
-  componentPaddingXUsingComponentGap,
-  componentPaddingYUsingComponentGap,
-  componentPaddingMinusBorder,
-  componentPaddingMinus2pxBorder,
-  layoutPaddingBottom,
-  containerPaddingX,
-  layoutGroupGapPaddingY,
-  layoutGroupGap,
-  layoutGap,
-  gapUsingContainerPadding
-};

package/dist/chunk-6XIXUFSA.js

@@ -1,114 +0,0 @@
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  Button
-} from "./chunk-O2KOOPL4.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding,
-  componentPaddingMinusBorder,
-  componentPaddingYUsingComponentGap
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/OptionPill.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var OptionPill = (_a) => {
-  var _b = _a, {
-    selected = false,
-    onClick,
-    onRemove,
-    removable = false,
-    disabled = false,
-    children,
-    className
-  } = _b, props = __objRest(_b, [
-    "selected",
-    "onClick",
-    "onRemove",
-    "removable",
-    "disabled",
-    "children",
-    "className"
-  ]);
-  const additionalAttributes = {
-    "data-disabled": disabled || null,
-    "data-selected": selected || null
-  };
-  const classNames = clsx(
-    {
-      "hover:border-border-action-hover active:border-border-action-active": !disabled,
-      "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
-      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
-      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
-    },
-    !removable && componentPadding,
-    removable && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding"
-  );
-  const textColor = clsx(
-    !disabled && "text-text-primary-normal",
-    disabled && !selected && "text-text-primary-disabled",
-    disabled && selected && "text-text-on-action-primary-disabled"
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues(__spreadValues({
-      onClick: handleOnClick
-    }, props), additionalAttributes), {
-      className: clsx(
-        "flex items-center justify-between cursor-pointer w-max",
-        "border border-border-primary-normal rounded-base",
-        "outline-2 outline-transparent -outline-offset-2",
-        componentGap,
-        baseTransition,
-        classNames,
-        className,
-        textColor
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
-        removable && /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: handleOnRemove,
-            disabled,
-            className: clsx(
-              "mx-0 h-full w-10 !border-0",
-              componentPaddingMinusBorder
-            ),
-            iconOnly: true,
-            variant: "tertiary",
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close" })
-          }
-        )
-      ]
-    })
-  );
-  function handleOnClick() {
-    if (disabled) {
-      return;
-    }
-    onClick == null ? void 0 : onClick();
-  }
-  function handleOnRemove() {
-    if (!removable || !onRemove) {
-      return;
-    }
-    onRemove();
-  }
-};
-OptionPill.displayName = "OptionPill";
-
-export {
-  OptionPill
-};

package/dist/chunk-7CG4GVU7.js

@@ -1,21 +0,0 @@
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (!element || !(element instanceof Node)) {
-    return window.document.body;
-  }
-  var currentElement = element;
-  while (currentElement && currentElement.parentNode) {
-    if (currentElement.parentNode === document) {
-      return document.body;
-    } else if (currentElement.parentNode instanceof DocumentFragment) {
-      return currentElement.parentNode;
-    } else {
-      currentElement = currentElement.parentNode;
-    }
-  }
-  return window.document.body;
-}
-
-export {
-  findDocumentRoot
-};

package/dist/chunk-7DNCGSXK.js

@@ -1,284 +0,0 @@
-import {
-  MenuOption
-} from "./chunk-L5OMTPWT.js";
-import {
-  Menu
-} from "./chunk-JNLDVEK3.js";
-import {
-  useSubMenuSystem
-} from "./chunk-IDAZ53A4.js";
-import {
-  CSS
-} from "./chunk-WVUIIBRR.js";
-import {
-  Search
-} from "./chunk-RBXILAST.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
-import {
-  paddingUsingComponentGap
-} from "./chunk-LJ2W2FEG.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
-};