@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/DataGrid/utils.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as i } from "../../node_modules/clsx/dist/clsx.js";
+import { Icon as t } from "../Icon.js";
+function c(r) {
+  if (r.key !== "ArrowDown" && r.key !== "ArrowUp") return;
+  r.preventDefault();
+  const e = r.key === "ArrowDown" ? r.currentTarget.nextElementSibling : r.currentTarget.previousElementSibling;
+  e instanceof HTMLTableRowElement && e.getAttribute("role") === "row" && e.focus();
+}
+function m(r, e = !1) {
+  const n = i(
+    "text-icon-on-action-primary-normal",
+    e && "invisible group-hover:visible"
+  );
+  return r === "asc" ? /* @__PURE__ */ o(t, { size: 16, className: n, name: "arrow_upward" }) : r === "desc" ? /* @__PURE__ */ o(t, { size: 16, className: n, name: "arrow_downward" }) : null;
+}
+export {
+  m as getSortIcon,
+  c as handleRowArrowKeyDown
+};

package/dist/components/DataGridCell.js

@@ -0,0 +1,412 @@
+"use client";
+import { jsx as r, jsxs as W, Fragment as X } from "react/jsx-runtime";
+import { useSortable as q } from "../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS as J } from "../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { clsx as v } from "../node_modules/clsx/dist/clsx.js";
+import { memo as Y, useRef as V, useState as A, useEffect as B } from "react";
+import { componentPadding as Z, paddingUsingComponentGap as ee } from "../classNames.js";
+import { MenuOption as f } from "./MenuOption.js";
+import { Menu as U } from "./Menu.js";
+import { Icon as j } from "./Icon.js";
+import { Search as ne } from "./Search.js";
+import { useSubMenuSystem as te } from "../hooks/useMenuSystem.js";
+const _ = Y(
+  ({
+    id: e,
+    type: d = "default",
+    component: o = "static",
+    children: m,
+    className: t,
+    locked: n = !1,
+    noPadding: g = !1,
+    paddedLeft: $ = !1,
+    style: w,
+    onClick: p,
+    onRightClick: C,
+    error: h,
+    warning: D,
+    pending: P,
+    center: k,
+    width: b,
+    minWidth: y,
+    disabled: F,
+    isLast: z,
+    testid: O,
+    ...H
+  }) => {
+    const L = d === "header" ? "th" : "td", c = V(null), [E, S] = A(!1), [M, x] = A(!1);
+    B(() => () => {
+      c.current && (clearTimeout(c.current), c.current = null);
+    }, []);
+    const G = (u) => {
+      x(!0), c.current = window.setTimeout(() => {
+        S(!0);
+      }, 500);
+    }, I = (u) => {
+      c.current && (clearTimeout(c.current), c.current = null);
+      const K = u.nativeEvent instanceof MouseEvent && u.nativeEvent.button === 2;
+      !E && p && !K && M && p(u), K && C && C(), S(!1), x(!1);
+    }, R = () => {
+      c.current && (clearTimeout(c.current), c.current = null);
+    }, T = d === "header" && !n && !["button"].includes(o) && "bg-brand-400 border-brand-200", N = n && !["button"].includes(o) && "bg-neutral-400 border-neutral-300", l = d === "header" && o !== "button" && o !== "icon" && !z && v("border-r"), a = o === "button" && v("border-r border-b border-border-primary-normal"), s = o === "icon" && v("border-l"), i = v(
+      l,
+      a,
+      T,
+      N,
+      s,
+      t,
+      "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",
+      o === "input" && "border",
+      o === "input" && !h && !D && "border-border-primary-normal",
+      o === "input" && !h && !D && P && "[&:not(:focus-within)]:border-background-warning-normal",
+      o === "input" && h && "border-border-primary-error",
+      o === "input" && D && "border-background-warning-normal",
+      !["button", "icon"].includes(o) && !g && Z,
+      $ && "pl-2",
+      o === "icon" && "border-l",
+      E && "!cursor-grabbing",
+      o === "checkbox" || k && "justify-center",
+      F && "!text-text-primary-disabled"
+    );
+    return /* @__PURE__ */ r(
+      L,
+      {
+        id: e,
+        "data-testid": O,
+        className: v("flex h-10", !b && "flex-1"),
+        style: { width: b, minWidth: y },
+        ...H,
+        "data-theme": d === "header" && !n ? "brand" : void 0,
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: i,
+            style: {
+              ...w
+            },
+            onMouseDown: G,
+            onMouseUp: I,
+            onMouseLeave: R,
+            onTouchStart: G,
+            onTouchEnd: I,
+            onTouchCancel: R,
+            onContextMenu: (u) => u.preventDefault(),
+            children: m
+          }
+        )
+      }
+    );
+  }
+);
+_.displayName = "DataGridCell";
+function Q({
+  header: e,
+  children: d,
+  setNodeRef: o,
+  node: m,
+  id: t,
+  testid: n,
+  useMenuDefaultMinWidth: g,
+  allowUserGrouping: $,
+  ...w
+}) {
+  const [p, C] = A(!1), [h, D] = A(
+    e.column.getFilterValue() ?? ""
+  ), P = V(null), k = V(!1), { column: b, getContext: y } = e, { id: F, setFilterValue: z } = b, {
+    menuRootRef: O,
+    isMenuActive: H,
+    registerSubMenu: L,
+    listeners: c,
+    mobileHide: E
+  } = te(m || P);
+  B(() => {
+    const l = y().table.options.initialState?.columnPinning, a = l?.left ?? [], s = l?.right ?? [];
+    k.current = [...a, ...s].includes(F);
+  }, [F, y]), B(() => {
+    const l = setTimeout(() => {
+      z(h);
+    }, 500);
+    return () => {
+      clearTimeout(l);
+    };
+  }, [h, z]);
+  const S = !!$ && b.getCanGroup(), M = b.getIsGrouped(), x = b.getGroupedIndex(), G = y().table.getState().grouping.length, I = (l) => {
+    y().table.setGrouping((a) => {
+      const s = a.indexOf(F), i = s + l;
+      if (s === -1 || i < 0 || i >= a.length)
+        return a;
+      const u = [...a];
+      return [u[s], u[i]] = [u[i], u[s]], u;
+    });
+  }, R = {
+    position: "relative",
+    whiteSpace: "nowrap",
+    minWidth: e.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)",
+    ...w.style
+  };
+  return /* @__PURE__ */ W(
+    _,
+    {
+      id: t,
+      testid: n,
+      ref: o || P,
+      type: "header",
+      component: "header",
+      style: R,
+      minWidth: `${e.column.getSize()}px`,
+      onClick: e.column.getToggleSortingHandler(),
+      onRightClick: () => C(!p),
+      ...w,
+      children: [
+        d,
+        M && /* @__PURE__ */ r(
+          j,
+          {
+            name: "workspaces",
+            size: 16,
+            className: "shrink-0",
+            title: `Grouped (level ${x + 1})`,
+            "data-testid": n ? `${n}-grouped-indicator` : void 0
+          }
+        ),
+        (e.column.getCanFilter() || !k.current && e.column.getCanPin() || S) && /* @__PURE__ */ W(
+          U,
+          {
+            id: t ? `${t}-menu` : void 0,
+            testid: n ? `${n}-menu` : void 0,
+            ref: O,
+            positionTo: m || P,
+            show: p,
+            setShow: C,
+            mobileHide: E,
+            useDefaultMinWidth: g,
+            children: [
+              e.column.getCanFilter() && /* @__PURE__ */ r(
+                f,
+                {
+                  id: t ? `${t}-filter-option` : void 0,
+                  testid: n ? `${n}-filter-option` : void 0,
+                  ...c,
+                  subMenu: ({ menuId: l, subMenuLevel: a, ...s }) => /* @__PURE__ */ W(
+                    U,
+                    {
+                      id: t ? `${t}-filter-submenu` : void 0,
+                      testid: n ? `${n}-filter-submenu` : void 0,
+                      ...s,
+                      show: H(l, a),
+                      ref: (i) => {
+                        L(l, i);
+                      },
+                      useDefaultMinWidth: g,
+                      children: [
+                        /* @__PURE__ */ r("div", { className: v(ee), children: /* @__PURE__ */ r(
+                          ne,
+                          {
+                            id: t ? `${t}-filter-search` : void 0,
+                            testid: n ? `${n}-filter-search` : void 0,
+                            onChange: (i) => {
+                              D(i.target.value);
+                            },
+                            onKeyDown: (i) => {
+                              [" ", "Space"].includes(i.key) && i.stopPropagation();
+                            },
+                            value: h ?? ""
+                          }
+                        ) }),
+                        /* @__PURE__ */ r(
+                          f,
+                          {
+                            id: t ? `${t}-filter-contains` : void 0,
+                            testid: n ? `${n}-filter-contains` : void 0,
+                            onClick: N,
+                            before: T("includesString"),
+                            children: "Contains"
+                          }
+                        ),
+                        /* @__PURE__ */ r(
+                          f,
+                          {
+                            id: t ? `${t}-filter-startswith` : void 0,
+                            testid: n ? `${n}-filter-startswith` : void 0,
+                            onClick: N,
+                            before: T("startsWith"),
+                            children: "Starts with"
+                          }
+                        ),
+                        /* @__PURE__ */ r(
+                          f,
+                          {
+                            id: t ? `${t}-filter-endswith` : void 0,
+                            testid: n ? `${n}-filter-endswith` : void 0,
+                            onClick: N,
+                            before: T("endsWith"),
+                            children: "Ends with"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  children: "Filter"
+                }
+              ),
+              !k.current && e.column.getCanPin() && /* @__PURE__ */ r(
+                f,
+                {
+                  onClick: () => {
+                    C(!p);
+                  },
+                  ...c,
+                  subMenu: ({ menuId: l, subMenuLevel: a, ...s }) => /* @__PURE__ */ W(
+                    U,
+                    {
+                      ...s,
+                      show: H(l, a),
+                      ref: (i) => {
+                        L(l, i);
+                      },
+                      children: [
+                        /* @__PURE__ */ r(
+                          f,
+                          {
+                            selected: e.column.getIsPinned() === "left",
+                            onClick: () => {
+                              e.column.getIsPinned() === "left" ? e.column.pin(!1) : e.column.pin("left");
+                            },
+                            after: e.column.getIsPinned() === "left" && /* @__PURE__ */ r(j, { name: "check" }),
+                            children: "Left"
+                          }
+                        ),
+                        /* @__PURE__ */ r(
+                          f,
+                          {
+                            selected: e.column.getIsPinned() === "right",
+                            onClick: () => {
+                              e.column.getIsPinned() === "right" ? e.column.pin(!1) : e.column.pin("right");
+                            },
+                            after: e.column.getIsPinned() === "right" && /* @__PURE__ */ r(j, { name: "check" }),
+                            children: "Right"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  children: `Freeze [${e.column.columnDef.header}]`
+                }
+              ),
+              S && /* @__PURE__ */ r(
+                f,
+                {
+                  id: t ? `${t}-group-option` : void 0,
+                  testid: n ? `${n}-group-option` : void 0,
+                  onClick: e.column.getToggleGroupingHandler(),
+                  children: M ? "Remove group" : `Group by [${e.column.columnDef.header}]`
+                }
+              ),
+              S && M && G > 1 && /* @__PURE__ */ W(X, { children: [
+                /* @__PURE__ */ r(
+                  f,
+                  {
+                    id: t ? `${t}-group-move-up` : void 0,
+                    testid: n ? `${n}-group-move-up` : void 0,
+                    disabled: x === 0,
+                    onClick: () => I(-1),
+                    children: "Move up"
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  f,
+                  {
+                    id: t ? `${t}-group-move-down` : void 0,
+                    testid: n ? `${n}-group-move-down` : void 0,
+                    disabled: x === G - 1,
+                    onClick: () => I(1),
+                    children: "Move down"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  function T(l) {
+    return /* @__PURE__ */ r(
+      j,
+      {
+        name: "check",
+        className: v(
+          e.column.columnDef.filterFn !== l && "text-transparent"
+        )
+      }
+    );
+  }
+  function N(l, a) {
+    let s = "includesString";
+    const i = e.column.columnDef.filterFn;
+    a?.toLowerCase() === "starts with" && (s = i === "startsWith" ? "auto" : "startsWith"), a?.toLowerCase() === "ends with" && (s = i === "endsWith" ? "auto" : "endsWith"), a?.toLowerCase() === "contains" && (s = i === "includesString" ? "auto" : "includesString"), e.column.columnDef.filterFn = s, e.column.setFilterValue(h);
+  }
+}
+Q.displayName = "DataCellHeader";
+function oe({
+  header: e,
+  children: d,
+  ...o
+}) {
+  const { attributes: m, isDragging: t, listeners: n, setNodeRef: g, transform: $, node: w } = q({
+    id: e.column.id
+  }), p = {
+    opacity: t ? 0.8 : 1,
+    position: "relative",
+    transform: J.Translate.toString($),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    zIndex: t ? 1 : 0,
+    "--color-text-primary-normal": "var(--color-action-000)",
+    "--color-icon-on-action-primary-normal": "var(--color-action-000)",
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ r(
+    Q,
+    {
+      header: e,
+      setNodeRef: g,
+      node: w,
+      style: p,
+      ...o,
+      ...m,
+      ...n,
+      children: d
+    }
+  );
+}
+oe.displayName = "DraggableCellHeader";
+function re({
+  cell: e,
+  children: d,
+  ...o
+}) {
+  const { isDragging: m, setNodeRef: t, transform: n } = q({
+    id: e.column.id
+  }), g = {
+    opacity: m ? 0.8 : 1,
+    position: "relative",
+    transform: J.Translate.toString(n),
+    transition: "width transform 0.2s ease-in-out",
+    zIndex: m ? 1 : 0
+  };
+  return /* @__PURE__ */ r(_, { style: g, ref: t, width: `${e.column.getSize()}px`, ...o, children: d });
+}
+re.displayName = "DragAlongCell";
+export {
+  Q as DataCellHeader,
+  _ as DataGridCell,
+  re as DragAlongCell,
+  oe as DraggableCellHeader
+};