@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/MobileDataGrid/MobileDataGridCard/index.js

@@ -0,0 +1,130 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { Icon as C } from "../../Icon.js";
+import { Paragraph as x } from "../../Paragraph.js";
+import { Stack as t } from "../../Stack.js";
+import { useGridContext as $ } from "../GridContextProvider/useGridContext.js";
+import { Checkbox as k } from "../../Checkbox.js";
+import { clsx as z } from "../../../node_modules/clsx/dist/clsx.js";
+import { MobileDataGridColumn as v } from "./MobileDataGridColumn.js";
+import { Subheader as G } from "../../Subheader.js";
+import { layoutGroupGap as N, layoutPaddingX as P, paddingYUsingLayoutGroupGap as S } from "../../../classNames.js";
+function L({
+  renderLink: c,
+  renderChevron: g = !0,
+  data: i,
+  enableRowSelection: h,
+  selected: p,
+  rowActions: l,
+  index: u
+}) {
+  const m = $(), { id: a, testid: d, visibleColumns: f, getId: s, handleRowSelect: b, openRowDetail: y } = m;
+  return /* @__PURE__ */ n(
+    "li",
+    {
+      id: a ? `${a}-card-${s(i)}` : void 0,
+      "data-testid": d ? `${d}-card-${s(i)}` : void 0,
+      className: z(
+        "flex flex-col",
+        "last:rounded-b",
+        "hover:bg-action-100 cursor-pointer list-none",
+        p ? "bg-action-100" : u % 2 === 0 ? "bg-background-grouped-primary-normal" : "bg-background-grouped-secondary-normal",
+        N,
+        P,
+        S
+      ),
+      onClick: (e) => {
+        const r = e.target.tagName;
+        r === "INPUT" || r === "SELECT" || r === "BUTTON" || r === "TEXTAREA" || y(i);
+      },
+      children: [
+        /* @__PURE__ */ n(t, { sizing: "component", children: [
+          /* @__PURE__ */ n(t, { horizontal: !0, horizontalMobile: !0, items: "center", justify: "between", children: [
+            h && /* @__PURE__ */ o(
+              t,
+              {
+                sizing: "component",
+                padding: !0,
+                width: "fit",
+                style: { paddingLeft: 0, paddingRight: 8 },
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ o(
+                  k,
+                  {
+                    id: a ? `${a}-${s(i)}-select-checkbox` : void 0,
+                    testid: d ? `${d}-${s(i)}-select-checkbox` : void 0,
+                    checked: p,
+                    onChange: () => b(i)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ o(
+              t,
+              {
+                sizing: "component",
+                padding: !0,
+                onClick: (e) => e.stopPropagation(),
+                style: { paddingInline: 0 },
+                children: c ? c(i) : /* @__PURE__ */ o(G, { children: String(i[m.primaryKey] ?? "") })
+              }
+            ),
+            /* @__PURE__ */ o(
+              t,
+              {
+                horizontal: !0,
+                horizontalMobile: !0,
+                items: "center",
+                justify: "end",
+                sizing: "component",
+                onClick: (e) => e.stopPropagation(),
+                children: l && (typeof l == "function" ? l(i) : l)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o(t, { sizing: "layout-group", children: f.filter((e) => e.meta?.visible !== !1 && !e.id?.startsWith("__")).map(
+            (e, r) => e.meta?.useCustomRenderer && e.meta.mobileCell && e.id ? /* @__PURE__ */ n(
+              "div",
+              {
+                className: "grid grid-cols-2 gap-2 items-center flex-1",
+                children: [
+                  /* @__PURE__ */ n(
+                    x,
+                    {
+                      color: "text-secondary-normal",
+                      className: "text-left",
+                      children: [
+                        e.header?.toString(),
+                        ":"
+                      ]
+                    }
+                  ),
+                  " ",
+                  /* @__PURE__ */ o(
+                    e.meta.mobileCell,
+                    {
+                      column: e,
+                      row: i,
+                      cellValue: i[e.id]
+                    }
+                  )
+                ]
+              },
+              `${e.id}-${r}`
+            ) : /* @__PURE__ */ o(
+              v,
+              {
+                column: e,
+                data: i
+              },
+              `${e.id}-${r}`
+            )
+          ) })
+        ] }),
+        g && /* @__PURE__ */ o(t, { items: "center", justify: "center", horizontal: !0, horizontalMobile: !0, children: /* @__PURE__ */ o("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ o(C, { name: "keyboard_arrow_down" }) }) })
+      ]
+    }
+  );
+}
+export {
+  L as MobileDataGridCard
+};

package/dist/components/MobileDataGrid/MobileDataGridHeader.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { Checkbox as u } from "../Checkbox.js";
+import { Heading3 as g } from "../Heading.js";
+import { Stack as c } from "../Stack.js";
+import { Theme as b } from "../Theme.js";
+import { ColumnSelector as x } from "./ColumnSelector/index.js";
+import { useGridContext as y } from "./GridContextProvider/useGridContext.js";
+function j({
+  header: t,
+  enableColumnSelector: a,
+  enableRowSelection: m
+}) {
+  const l = y(), {
+    id: r,
+    testid: o,
+    selectedRowIds: i,
+    data: d,
+    primaryKey: n,
+    columns: s,
+    handleRowSelectAll: h
+  } = l;
+  return typeof t > "u" && !n ? null : typeof t == "function" ? /* @__PURE__ */ e(t, { ...l }) : typeof t == "string" || n ? /* @__PURE__ */ e(
+    "div",
+    {
+      id: r ? `${r}-header` : void 0,
+      "data-testid": o ? `${o}-header` : void 0,
+      className: "sticky top-0",
+      children: /* @__PURE__ */ e(b, { theme: "brand", children: /* @__PURE__ */ p(
+        c,
+        {
+          horizontal: !0,
+          horizontalMobile: !0,
+          items: "center",
+          justify: "between",
+          backgroundColor: "background-primary-normal",
+          children: [
+            m && /* @__PURE__ */ e("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit self-stretch flex items-center", children: /* @__PURE__ */ e(
+              u,
+              {
+                id: r ? `${r}-select-all-checkbox` : void 0,
+                testid: o ? `${o}-select-all-checkbox` : void 0,
+                checked: i.length === d.length,
+                indeterminate: !!i.length && i.length !== d.length,
+                onChange: h
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              c,
+              {
+                horizontal: !0,
+                horizontalMobile: !0,
+                items: "center",
+                sizing: "component",
+                padding: !0,
+                children: /* @__PURE__ */ e(g, { as: "span", color: "text-primary-normal", children: typeof t == "string" ? t : s.find((f) => f.id === n)?.header?.toString() })
+              }
+            ),
+            a && /* @__PURE__ */ e(x, {})
+          ]
+        }
+      ) })
+    }
+  ) : null;
+}
+export {
+  j as MobileDataGridHeader
+};

package/dist/components/MobileDataGrid/RowDetailModalProvider/ModalContent.js

@@ -0,0 +1,42 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Paragraph as l } from "../../Paragraph.js";
+import { Stack as d } from "../../Stack.js";
+import { useGridContext as m } from "../GridContextProvider/useGridContext.js";
+import { MobileDataGridColumn as n } from "../MobileDataGridCard/MobileDataGridColumn.js";
+function h() {
+  const a = m(), { columns: s, currentRow: r } = a;
+  return r ? /* @__PURE__ */ e(d, { sizing: "layout-group", children: s.filter((t) => !t.id?.startsWith("__")).map(
+    (t, i) => t.meta?.useCustomRenderer && t.meta.mobileCell && t.id ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: "grid grid-cols-2 gap-2 items-center flex-1",
+        children: [
+          /* @__PURE__ */ o(l, { color: "text-secondary-normal", className: "text-left", children: [
+            t.header?.toString(),
+            ":"
+          ] }),
+          " ",
+          /* @__PURE__ */ e(
+            t.meta.mobileCell,
+            {
+              column: t,
+              row: r,
+              cellValue: r?.[t.id]
+            }
+          )
+        ]
+      },
+      `${t.id}-${i}`
+    ) : /* @__PURE__ */ e(
+      n,
+      {
+        column: t,
+        data: r
+      },
+      `${t.id}-${i}`
+    )
+  ) }) : null;
+}
+export {
+  h as ModalContent
+};

package/dist/components/MobileDataGrid/RowDetailModalProvider/index.js

@@ -0,0 +1,58 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { Button as r } from "../../Button.js";
+import { Heading2 as m } from "../../Heading.js";
+import { Icon as d } from "../../Icon.js";
+import { Modal as u } from "../../Modal.js";
+import { Stack as f } from "../../Stack.js";
+import { useGridContext as p } from "../GridContextProvider/useGridContext.js";
+import { ModalContent as h } from "./ModalContent.js";
+function I() {
+  const n = p(), {
+    id: t,
+    testid: i,
+    isRowDetailOpen: l,
+    currentRow: s,
+    primaryKey: c,
+    closeRowDetail: e
+  } = n;
+  return /* @__PURE__ */ o(
+    u,
+    {
+      open: l,
+      onClose: e,
+      hideCloseIcon: !0,
+      size: "medium",
+      className: "!p-0",
+      headerIcon: /* @__PURE__ */ a(
+        f,
+        {
+          horizontal: !0,
+          horizontalMobile: !0,
+          items: "center",
+          justify: "between",
+          width: "full",
+          children: [
+            /* @__PURE__ */ o(m, { children: s?.[c ?? "id"] ?? "Grid Detail" }),
+            /* @__PURE__ */ o(
+              r,
+              {
+                id: t ? `${t}-close-button` : void 0,
+                testid: i ? `${i}-close-button` : void 0,
+                iconOnly: !0,
+                variant: "tertiary",
+                onClick: e,
+                leftIcon: /* @__PURE__ */ o("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ o(d, { name: "close", size: 24 }) })
+              }
+            )
+          ]
+        }
+      ),
+      customActions: /* @__PURE__ */ o(r, { onClick: e, className: "w-full", children: "Close" }),
+      showButtons: !0,
+      children: /* @__PURE__ */ o("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ o(h, {}) })
+    }
+  );
+}
+export {
+  I as RowDetailModalProvider
+};

package/dist/components/MobileDataGrid/dataGridReducer.js

@@ -0,0 +1,28 @@
+function p(d, r) {
+  const { type: t, payload: i } = r;
+  let e = null;
+  switch (r.type === "INSERT" && r.pos === "INDEX" && (e = r.index), r.type === "UPDATE" && (e = r.index ?? d.filter(({ id: n }) => !!n).findIndex(({ id: n }) => n === r.id)), t) {
+    case "SET":
+      return [...i];
+    case "UPDATE":
+      if (typeof e != "number" || e < 0)
+        throw new Error("action.(id | index) must be provided.");
+      return [
+        ...d.slice(0, e),
+        {
+          ...d[e],
+          ...i,
+          meta: {
+            ...d[e].meta ?? {},
+            ...i.meta ?? {}
+          }
+        },
+        ...d.slice(e + 1)
+      ];
+    default:
+      throw new Error("Action type not implemented.");
+  }
+}
+export {
+  p as dataGridReducer
+};

package/dist/components/MobileDataGrid/index.js

@@ -0,0 +1,78 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { MobileDataGridHeader as x } from "./MobileDataGridHeader.js";
+import { GridContextProvider as y } from "./GridContextProvider/index.js";
+import { RowDetailModalProvider as D } from "./RowDetailModalProvider/index.js";
+import { ColumnList as G } from "./ColumnList.js";
+import { Stack as M } from "../Stack.js";
+function L(i) {
+  const {
+    columns: t,
+    data: d,
+    renderLink: n,
+    renderChevron: l,
+    getId: m,
+    id: a,
+    testid: f,
+    enableColumnSelector: s,
+    enableRowSelection: e,
+    header: h,
+    withBorder: u = !0,
+    footer: c,
+    onRowSelect: p,
+    numberOfColumnsToShow: w,
+    primaryKey: b,
+    hideHeader: v,
+    rowActions: C,
+    rounded: S = !0
+  } = i;
+  return /* @__PURE__ */ o(
+    y,
+    {
+      initialColumns: t,
+      id: a,
+      testid: f,
+      data: d,
+      getId: m,
+      onRowSelect: p,
+      numberOfColumnsToShow: w,
+      primaryKey: b,
+      children: [
+        /* @__PURE__ */ o(
+          M,
+          {
+            height: "full",
+            rounded: S,
+            overflowX: "hidden",
+            overflowY: "hidden",
+            className: u ? "border border-border-primary-normal" : void 0,
+            children: [
+              !v && /* @__PURE__ */ r(
+                x,
+                {
+                  header: h,
+                  enableColumnSelector: s,
+                  enableRowSelection: e
+                }
+              ),
+              /* @__PURE__ */ r(
+                G,
+                {
+                  withBorder: !1,
+                  renderLink: n,
+                  renderChevron: l,
+                  enableRowSelection: e,
+                  footer: c,
+                  rowActions: C
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(D, {})
+      ]
+    }
+  );
+}
+export {
+  L as MobileDataGrid
+};

package/dist/components/MobileNavMenu.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsxs as a, Fragment as N, jsx as n } from "react/jsx-runtime";
+import { useState as g, useRef as $, useLayoutEffect as I, useEffect as w } from "react";
+import { createPortal as j } from "react-dom";
+import { NestedMenu as A } from "./NestedMenu.js";
+import { MenuOption as D } from "./MenuOption.js";
+import { Icon as m } from "./Icon.js";
+import { Stack as k } from "./Stack.js";
+import { Button as H } from "./Button.js";
+import { Heading1 as L } from "./Heading.js";
+import { Theme as R } from "./Theme.js";
+import { useMounted as X } from "../hooks/useMounted.js";
+import { useKeydown as Y } from "../hooks/useKeydown.js";
+import { findDocumentRoot as K } from "../utils.js";
+import { clsx as v } from "../node_modules/clsx/dist/clsx.js";
+function te({
+  id: c,
+  testid: o,
+  currentMenu: i,
+  open: r,
+  onClose: l,
+  onNavigate: h,
+  direction: b = "left",
+  footer: E,
+  hideFooterOnSubMenu: x = !1,
+  theme: C = "brand",
+  pinnedSubMenuEntry: M
+}) {
+  const [s, d] = g(
+    null
+  ), [y, u] = g(0), z = X(), p = $(null), S = {
+    transform: r ? "translateX(0)" : b === "right" ? "translateX(100%)" : "translateX(-100%)"
+  };
+  I(() => {
+    r && (d(null), u(0));
+  }, [r]), Y(
+    {
+      ArrowUp: () => {
+        const e = i.subEntries?.length || 0;
+        e !== 0 && u((t) => t <= 0 ? e - 1 : t - 1);
+      },
+      ArrowDown: () => {
+        const e = i.subEntries?.length || 0;
+        e !== 0 && u((t) => t >= e - 1 ? 0 : t + 1);
+      },
+      "Enter/Space": () => {
+        const e = (i.subEntries || [])[y];
+        e && f(
+          e,
+          e.subEntries?.length ? "subEntry" : e.onClick ? "onClick" : void 0
+        );
+      }
+    },
+    r && !s
+  ), w(() => {
+    if (!r) return;
+    const e = window.scrollY, t = document.body;
+    return t.style.position = "fixed", t.style.top = `-${e}px`, t.style.left = "0", t.style.right = "0", t.style.overflow = "hidden", t.style.width = "100%", () => {
+      t.style.position = "", t.style.top = "", t.style.left = "", t.style.right = "", t.style.overflow = "", t.style.width = "", window.scrollTo(0, e);
+    };
+  }, [r]), w(() => {
+    const e = (t) => {
+      t.key === "Escape" && l();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [l]);
+  function f(e, t) {
+    if (!e) {
+      d(null);
+      return;
+    }
+    if (e.subEntries?.length && t !== "onClick") {
+      d(e);
+      return;
+    }
+    if (e.onClick && t === "onClick") {
+      h?.(e), e.onClick();
+      return;
+    }
+    e.url && (h?.(e), l());
+  }
+  return z ? j(
+    /* @__PURE__ */ a(N, { children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: v(
+            "fixed inset-0 z-40 bg-black/50",
+            "transition-opacity duration-300",
+            r ? "opacity-100" : "opacity-0 pointer-events-none"
+          ),
+          onClick: l,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          id: c,
+          "data-testid": o,
+          ref: p,
+          role: "dialog",
+          "aria-modal": "true",
+          className: v(
+            "fixed top-0 z-50 h-dvh w-full max-w-sm flex flex-col",
+            "bg-background-grouped-primary-normal overflow-hidden",
+            "transition-transform duration-300 ease-in-out",
+            b === "right" ? "right-0" : "left-0"
+          ),
+          style: S,
+          children: [
+            /* @__PURE__ */ n(R, { theme: C, children: /* @__PURE__ */ a(
+              k,
+              {
+                horizontal: !0,
+                horizontalMobile: !0,
+                padding: !0,
+                sizing: "layout",
+                items: "center",
+                justify: "between",
+                backgroundColor: "background-primary-normal",
+                children: [
+                  /* @__PURE__ */ n(L, { color: "text-primary-normal", children: s?.label ?? i.label }),
+                  /* @__PURE__ */ n(
+                    H,
+                    {
+                      id: c ? `${c}-close-button` : void 0,
+                      testid: o ? `${o}-close-button` : void 0,
+                      iconOnly: !0,
+                      leftIcon: /* @__PURE__ */ n(m, { className: "icon", name: "close", size: 24 }),
+                      variant: "tertiary",
+                      onClick: l
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ a(k, { justify: "between", overflowY: "auto", grow: !0, children: [
+              /* @__PURE__ */ n("div", { className: "my-4", children: s ? /* @__PURE__ */ n(
+                A,
+                {
+                  testid: o ? `${o}-nested-menu` : void 0,
+                  currentMenu: s,
+                  onMenuClick: f,
+                  pinnedEntry: M
+                }
+              ) : (i.subEntries ?? []).map((e, t) => /* @__PURE__ */ n(
+                D,
+                {
+                  testid: o ? `${o}-${e.id}` : void 0,
+                  selected: y === t,
+                  onClick: () => f(
+                    e,
+                    e.subEntries?.length ? "subEntry" : e.onClick ? "onClick" : void 0
+                  ),
+                  before: e.icon ? /* @__PURE__ */ n(m, { name: e.icon }) : void 0,
+                  after: e.subEntries?.length ? /* @__PURE__ */ n(m, { name: "chevron_right", className: "icon", size: 24 }) : void 0,
+                  children: e.label
+                },
+                e.id
+              )) }),
+              (!x || !s) && E
+            ] })
+          ]
+        }
+      )
+    ] }),
+    K(p.current)
+  ) : null;
+}
+export {
+  te as MobileNavMenu
+};