@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Menu.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsxs as U } from "react/jsx-runtime";
+import { clsx as $ } from "../node_modules/clsx/dist/clsx.js";
+import { useRef as A, useState as j, useEffect as y } from "react";
+import { createPortal as V } from "react-dom";
+import { useMenuPosition as G } from "../hooks/useMenuSystem.js";
+import { findDocumentRoot as J } from "../utils.js";
+import { useMatchesMobile as X } from "../hooks/useMatchesMedia.js";
+function ce({
+  id: L,
+  testid: M,
+  children: P,
+  className: C,
+  ref: f,
+  positionTo: o,
+  mobilePositionTo: g,
+  show: u,
+  setShow: m,
+  position: H = "bottom",
+  maxHeight: x,
+  topOffset: K,
+  mobileBackMenuOption: q,
+  mobileHide: S,
+  useDefaultMinWidth: W,
+  autoFocusOff: E,
+  menuName: B,
+  calculateMinMaxHeight: d,
+  typeAheadQuery: k,
+  ...w
+}) {
+  const c = A(null), i = A(""), l = A(null), p = f || c, [F, b] = j("180px"), D = X(), { menuPosition: I, updatePosition: R } = G(
+    D && g ? g : o,
+    H,
+    {
+      isOpen: u,
+      setIsOpen: m,
+      menuRef: c,
+      topOffset: K,
+      isMobile: !!(D && g)
+    }
+  );
+  return y(() => {
+    if (d)
+      return;
+    const e = requestAnimationFrame(() => {
+      if (!p.current || x)
+        return;
+      const t = Array.from(p.current.children).filter(
+        (s) => s.getAttribute("role") === "menuitem"
+      );
+      if (t.length === 0)
+        return;
+      if (t.length <= 4) {
+        b("none");
+        return;
+      }
+      let n = 0;
+      t.forEach((s, a) => {
+        a >= 5 || (n += s.clientHeight);
+      }), n = n / 5 * 4.5, b(`${n}px`);
+    });
+    return () => {
+      cancelAnimationFrame(e);
+    };
+  }, [u, x, d]), y(() => {
+    if (d && o?.current && p.current) {
+      const e = o.current.getBoundingClientRect(), n = window.innerHeight - e.bottom - 16;
+      b(`${n}px`);
+    }
+  }, [p.current, o?.current, d]), y(() => {
+    if (!u) {
+      i.current = "", l.current && clearTimeout(l.current);
+      return;
+    }
+    i.current = k ?? "", T(), R();
+  }, [u, R]), y(() => {
+    if (!u || !m)
+      return;
+    const e = (t) => {
+      t.key === "Escape" && (m(!1), o?.current?.focus());
+    };
+    return document.addEventListener("keydown", e), () => {
+      document.removeEventListener("keydown", e);
+    };
+  }, [u, m, o]), u && V(
+    /* @__PURE__ */ U(
+      "div",
+      {
+        id: L,
+        "data-testid": M,
+        ref: z,
+        className: $(
+          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
+          "fixed",
+          "z-50",
+          "max-w-screen",
+          S && "opacity-0 pointer-events-none",
+          C
+        ),
+        ...w,
+        style: {
+          ...w.style,
+          maxHeight: x || F,
+          ...I,
+          minWidth: W ? "212px" : I.minWidth
+        },
+        onKeyDown: O,
+        onMouseDown: h,
+        onMouseUp: h,
+        onTouchStart: h,
+        onTouchEnd: h,
+        tabIndex: -1,
+        "data-menu": B ?? "",
+        children: [
+          q?.(),
+          P
+        ]
+      }
+    ),
+    J(c.current)
+  );
+  function O(e) {
+    if (!c.current || (e.key !== "Escape" && e.stopPropagation(), e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement))
+      return;
+    const t = Array.from(
+      c.current.querySelectorAll('[role="menuitem"]')
+    );
+    if (t.length === 0)
+      return;
+    let n = -1;
+    const s = document.activeElement;
+    for (let r = 0; r < t.length; r++)
+      if (t[r] === s) {
+        n = r;
+        break;
+      }
+    const a = e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey, v = e.key === " " && i.current.length > 0;
+    if (a || v) {
+      e.preventDefault(), l.current && clearTimeout(l.current);
+      const r = i.current + e.key.toLowerCase();
+      i.current = r, l.current = setTimeout(() => {
+        i.current = "";
+      }, 1e3), t.find(
+        (N) => N.textContent?.trim().toLowerCase().startsWith(r)
+      )?.focus();
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const r = n < t.length - 1 ? n + 1 : 0;
+        t[r].focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const r = n > 0 ? n - 1 : t.length - 1;
+        t[r].focus();
+        break;
+      }
+      case "Home":
+        e.preventDefault(), t[0].focus();
+        break;
+      case "End":
+        e.preventDefault(), t[t.length - 1].focus();
+        break;
+      case "Enter":
+      case " ":
+      case "ArrowRight":
+        e.preventDefault(), n >= 0 && t[n].click();
+        break;
+      case "ArrowLeft":
+        e.preventDefault(), o?.current?.click(), o?.current?.focus();
+        break;
+    }
+  }
+  function T() {
+    E || c.current?.focus();
+    const e = Array.from(
+      c.current?.querySelectorAll('[role="menuitem"]') ?? []
+    ), t = c.current?.querySelector(
+      "[data-selected]"
+    ), n = e[0] ?? null, a = (k ? e.find(
+      (v) => v.textContent?.trim().toLowerCase().startsWith(k.toLowerCase())
+    ) ?? null : null) || t || n;
+    a && (a.scrollIntoView({
+      block: "nearest",
+      behavior: "instant"
+    }), !E && requestAnimationFrame(() => {
+      a.focus();
+    }));
+  }
+  function z(e) {
+    c.current = e, f && (typeof f == "function" ? f(e) : f.current = e);
+  }
+  function h(e) {
+    e.stopPropagation();
+  }
+}
+export {
+  ce as Menu
+};

package/dist/components/MenuOption.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsxs as N, Fragment as te, jsx as r } from "react/jsx-runtime";
+import { clsx as n } from "../node_modules/clsx/dist/clsx.js";
+import { useId as oe, useRef as $, useState as ne } from "react";
+import { layoutGroupGap as re, componentGap as ae, componentPadding as ce, baseTransition as ie } from "../classNames.js";
+import { Label as se } from "./Label.js";
+import { Paragraph as de } from "./Paragraph.js";
+import { Icon as w } from "./Icon.js";
+import { useMatchesMobile as le } from "../hooks/useMatchesMedia.js";
+import { Caption as ue } from "./Caption.js";
+function me({
+  id: i,
+  testid: c,
+  children: e,
+  disabled: t = !1,
+  variant: o = "normal",
+  value: l,
+  before: g,
+  after: m,
+  subMenu: a,
+  onClick: C,
+  selected: E,
+  ref: R,
+  onSubMenuHover: v,
+  onSubMenuLeave: b,
+  onSubMenuEnter: x,
+  toggleMenu: j,
+  subMenuLevel: d = 1,
+  currentSubMenuLevel: G,
+  closeSubMenuLevel: M,
+  activeMenu: O,
+  mobilePositionTo: P,
+  highlightMatchingText: A = !1,
+  menuValue: B,
+  onMouseMove: y,
+  onMouseEnter: D,
+  onMouseLeave: F,
+  small: u = !1
+}) {
+  const H = oe(), T = $(null), k = R || T, s = $(`menu-${H}`), S = le(), [_, f] = ne(!1), q = () => {
+    a && v && !t && v(s.current, d), D?.();
+  }, I = () => {
+    a && b && !t && b(d), f(!1), F?.();
+  }, z = () => {
+    a && y && !t && y();
+  }, J = () => {
+    x && x(), f(!0);
+  }, K = {
+    "data-selected": E || null,
+    "data-submenu-hovered": _ || null
+  }, L = n(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
+  ), p = n("w-full whitespace-nowrap !leading-6"), Q = o === "normal" && !t && n(
+    "bg-transparent text-text-primary-normal",
+    "hover:bg-background-action-secondary-hover",
+    "focus-visible:bg-background-action-secondary-hover",
+    "data-selected:bg-background-action-secondary-hover",
+    "data-submenu-hovered:bg-background-action-secondary-hover",
+    "active:bg-background-action-secondary-active"
+  ), U = o === "normal" && t && n("text-text-primary-disabled"), W = o === "action" && !t && n(
+    "text-action-400 bg-transparent",
+    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+    "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
+    "data-selected:bg-background-action-secondary-hover data-selected:text-text-action-hover",
+    "data-submenu-hovered:bg-background-action-secondary-hover data-submenu-hovered:text-text-action-hover",
+    "active:bg-background-action-secondary-active active:text-text-action-active"
+  ), X = o === "action" && t && n("text-text-action-disabled"), Y = t && n("bg-transparent cursor-default pointer-events-none"), h = typeof e == "string" && A ? fe(e, B) : e, Z = typeof e == "object" ? e : o === "action" ? /* @__PURE__ */ r(se, { padded: !0, className: p, children: h }) : u ? /* @__PURE__ */ r(ue, { padded: !0, className: p, children: h }) : /* @__PURE__ */ r(de, { padded: !0, className: p, children: h });
+  return /* @__PURE__ */ N(te, { children: [
+    /* @__PURE__ */ N(
+      "div",
+      {
+        id: i,
+        "data-testid": c,
+        ref: k,
+        className: n(
+          "flex cursor-pointer w-full text-left relative outline-none",
+          L,
+          u ? re : ae,
+          ce,
+          ie,
+          Q,
+          U,
+          W,
+          X,
+          Y,
+          { "items-center": !u }
+        ),
+        "data-value": l || e,
+        onClick: () => {
+          C?.(s.current, l || e), a && j(s.current, d);
+        },
+        onMouseEnter: q,
+        onMouseLeave: I,
+        onMouseMove: z,
+        ...K,
+        tabIndex: -1,
+        role: "menuitem",
+        "aria-haspopup": a ? "menu" : void 0,
+        children: [
+          g && /* @__PURE__ */ r("div", { className: n("shrink-0", { "items-center flex": !u }), children: g }),
+          Z,
+          V()
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ r(
+      "div",
+      {
+        onMouseEnter: J,
+        onMouseLeave: () => {
+          I(), f(!1);
+        },
+        "data-submenu-parent": s.current,
+        "data-menu-level": d + 1,
+        children: a({
+          menuId: s.current,
+          positionTo: k,
+          mobilePositionTo: P,
+          position: "right",
+          subMenuLevel: d,
+          mobileBackMenuOption: ee,
+          mobileHide: S && O !== s.current,
+          autoFocusOff: !0
+        })
+      }
+    )
+  ] });
+  function V() {
+    return m || (a && m !== null ? /* @__PURE__ */ r(w, { name: "chevron_right" }) : null);
+  }
+  function ee() {
+    if (S)
+      return /* @__PURE__ */ r(
+        me,
+        {
+          id: i ? `${i}-back` : void 0,
+          testid: c ? `${c}-back` : void 0,
+          onClick: () => {
+            M?.(G ?? 0);
+          },
+          variant: "action",
+          before: /* @__PURE__ */ r(w, { name: "chevron_left" }),
+          children: "Back"
+        }
+      );
+  }
+}
+function fe(i, c) {
+  if (!c || !c.trim())
+    return i;
+  const e = new RegExp(
+    `(${c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi"
+  );
+  return i.split(e).map(
+    (o, l) => e.test(o) ? /* @__PURE__ */ r("span", { className: "font-bold", children: o }, l) : o
+  );
+}
+export {
+  me as MenuOption
+};

package/dist/components/MobileDataGrid/ColumnList.js

@@ -0,0 +1,85 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
+import { useGridContext as y } from "./GridContextProvider/useGridContext.js";
+import { MobileDataGridCard as N } from "./MobileDataGridCard/index.js";
+import { Subheader as R } from "../Subheader.js";
+import { Paragraph as C } from "../Paragraph.js";
+import c from "../../static/no-results-image.png.js";
+import { componentGap as j, componentPadding as G } from "../../classNames.js";
+function F(m) {
+  const {
+    withBorder: f,
+    renderLink: u,
+    renderChevron: h,
+    footer: r,
+    enableRowSelection: p,
+    rowActions: x
+  } = m, d = y(), { id: b, testid: o, data: i, getId: w, selectedRowIds: v } = d, n = i.length === 0;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: l(
+        "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
+        !!r && "mb-20"
+      ),
+      children: /* @__PURE__ */ a(
+        "ul",
+        {
+          id: b,
+          "data-testid": o,
+          className: l(
+            "border-t-0 rounded-b w-full",
+            n && "!rounded-t-none",
+            f && "border border-border-primary-normal"
+          ),
+          children: [
+            n ? /* @__PURE__ */ a(
+              "div",
+              {
+                className: l(
+                  "flex flex-col items-center justify-center",
+                  j,
+                  G
+                ),
+                "data-testid": o ? `${o}-no-results` : void 0,
+                children: [
+                  /* @__PURE__ */ e(
+                    "img",
+                    {
+                      src: c?.src ?? c,
+                      alt: "No Results",
+                      className: "h-30 opacity-20",
+                      width: 120,
+                      height: 120
+                    }
+                  ),
+                  /* @__PURE__ */ e(R, { color: "text-secondary-normal", children: "No Results" }),
+                  /* @__PURE__ */ e(C, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                ]
+              }
+            ) : i.map((s, g) => {
+              const t = w(s);
+              return /* @__PURE__ */ e(
+                N,
+                {
+                  data: s,
+                  index: g,
+                  renderLink: u,
+                  enableRowSelection: p,
+                  selected: !!t && v.includes(t),
+                  renderChevron: h,
+                  rowActions: x
+                },
+                t
+              );
+            }),
+            !!r && /* @__PURE__ */ e("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ e(r, { ...d }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  F as ColumnList
+};

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

@@ -0,0 +1,100 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useRef as g, useState as x, useCallback as y } from "react";
+import { Button as u } from "../../Button.js";
+import { Icon as C } from "../../Icon.js";
+import { Menu as k } from "../../Menu.js";
+import { Checkbox as S } from "../../Checkbox.js";
+import { MenuOption as M } from "../../MenuOption.js";
+import { useGridContext as w } from "../GridContextProvider/useGridContext.js";
+function B() {
+  const b = w(), r = g(null), [p, n] = x(!1), {
+    columns: s,
+    id: i,
+    testid: e,
+    visibleColumns: f,
+    numberOfColumnsToShow: a,
+    primaryKey: l,
+    resetColumnVisibility: h,
+    dispatch: m
+  } = b, v = y(
+    (t, d) => {
+      m({ type: "UPDATE", index: t, payload: { meta: { visible: d } } });
+    },
+    [m]
+  );
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      id: i ? `${i}-column-selector` : void 0,
+      "data-testid": e,
+      className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
+      ref: r,
+      children: [
+        /* @__PURE__ */ o(
+          u,
+          {
+            id: i ? `${i}-button` : void 0,
+            testid: e ? `${e}-button` : void 0,
+            onClick: () => n((t) => !t),
+            variant: "navigation",
+            iconOnly: !0,
+            leftIcon: /* @__PURE__ */ o(C, { name: "tune", size: 24 })
+          }
+        ),
+        /* @__PURE__ */ c(
+          k,
+          {
+            id: i ? `${i}-menu` : void 0,
+            testid: e ? `${e}-menu` : void 0,
+            positionTo: r,
+            position: "bottom-right",
+            show: p,
+            setShow: n,
+            calculateMinMaxHeight: !0,
+            children: [
+              /* @__PURE__ */ o(
+                u,
+                {
+                  id: i ? `${i}-reset-button` : void 0,
+                  testid: e ? `${e}-reset-button` : void 0,
+                  variant: "tertiary",
+                  onClick: () => {
+                    h(), n(!1);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              s.filter((t) => t.meta?.inVisibilityMenu).map((t) => /* @__PURE__ */ o(
+                M,
+                {
+                  testid: e ? `${e}-option-${t.id}` : void 0,
+                  children: /* @__PURE__ */ o(
+                    S,
+                    {
+                      id: i ? `${i}-checkbox-${t.id}` : void 0,
+                      testid: e ? `${e}-checkbox-${t.id}` : void 0,
+                      label: t.header?.toString(),
+                      checked: !!t.meta?.visible || t.id === String(l),
+                      disabled: typeof a < "u" && // account for header+link occupying one slot
+                      f.length >= a - 1 && t.meta?.visible !== !0 || t.id === String(l),
+                      onChange: (d) => {
+                        v(
+                          s.findIndex(({ id: $ }) => $ === t.id),
+                          d.target.checked
+                        );
+                      }
+                    }
+                  )
+                },
+                i ? `${i}-option-${t.id}` : void 0
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  B as ColumnSelector
+};

package/dist/components/MobileDataGrid/GridContextProvider/GridContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MobileDataGrid/GridContextProvider/GridContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,OAAO,IAAI;IACzC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW,0DAA8C,CAAC"}
+{"version":3,"file":"GridContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MobileDataGrid/GridContextProvider/GridContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,OAAO,IAAI;IACzC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW,0DAA8C,CAAC"}

package/dist/components/MobileDataGrid/GridContextProvider/GridContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext as t } from "react";
+const e = t(null);
+export {
+  e as GridContext
+};

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

@@ -0,0 +1,80 @@
+import { jsx as M } from "react/jsx-runtime";
+import { useReducer as O, useState as v, useCallback as d, useMemo as P } from "react";
+import { dataGridReducer as T } from "../dataGridReducer.js";
+import { GridContext as j } from "./GridContext.js";
+function V(S) {
+  const {
+    initialColumns: m,
+    id: b,
+    testid: h,
+    children: x,
+    data: c,
+    numberOfColumnsToShow: u,
+    primaryKey: n,
+    getId: r,
+    onRowSelect: f
+  } = S, [o, p] = O(T, m), [l, C] = v([]), [w, R] = v(null), y = d(() => {
+    const t = o.map((e) => {
+      const i = m.find((a) => a.id === e.id);
+      return {
+        ...e,
+        meta: {
+          ...e.meta,
+          visible: i?.meta?.visible
+        }
+      };
+    });
+    p({ type: "SET", payload: t });
+  }, [o, m]), g = d(
+    (t) => {
+      const e = r(t) ?? "";
+      if (!e) return;
+      const i = l.includes(e) ? l.filter((a) => a !== e) : [...l, e];
+      C(i), f && f(t, i);
+    },
+    [r, f, l]
+  ), I = d(() => {
+    C((t) => t.length === c.length ? [] : c.map(r).filter((e) => e !== void 0));
+  }, [c, r]), D = d((t) => {
+    R(t);
+  }, []), G = d(() => {
+    R(null);
+  }, []), k = P(() => {
+    const t = typeof u == "number" ? Math.max(u - 1, 0) : void 0;
+    if (n) {
+      const e = o.find((s) => s.id === String(n)), i = o.filter(
+        (s) => s.id !== String(n)
+      );
+      return (e ? [e, ...i] : [...i]).filter((s) => s.meta?.visible !== !1).slice(0, t);
+    }
+    return o.filter((e) => e.meta?.visible !== !1).slice(0, t);
+  }, [o, u, n]);
+  return /* @__PURE__ */ M(
+    j.Provider,
+    {
+      value: {
+        columns: o,
+        testid: h,
+        id: b,
+        data: c,
+        selectedRowIds: l,
+        visibleColumns: k,
+        numberOfColumnsToShow: u,
+        primaryKey: n,
+        dispatch: p,
+        getId: r,
+        resetColumnVisibility: y,
+        handleRowSelect: g,
+        handleRowSelectAll: I,
+        isRowDetailOpen: !!w,
+        currentRow: w,
+        openRowDetail: D,
+        closeRowDetail: G
+      },
+      children: x
+    }
+  );
+}
+export {
+  V as GridContextProvider
+};

package/dist/components/MobileDataGrid/GridContextProvider/useGridContext.js

@@ -0,0 +1,11 @@
+import { useContext as r } from "react";
+import { GridContext as o } from "./GridContext.js";
+function n() {
+  const t = r(o);
+  if (!t)
+    throw new Error("useGridContext must be used within GridContextProvider");
+  return t;
+}
+export {
+  n as useGridContext
+};

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

@@ -0,0 +1,18 @@
+import { jsxs as a } from "react/jsx-runtime";
+import { Paragraph as i } from "../../Paragraph.js";
+import { formatDate as l } from "../../../utils/date.js";
+function f(o) {
+  const { column: t, data: e } = o;
+  let r;
+  return t.id && (r = e[t.id], t.meta?.format === "date" && typeof r == "string" && (r = l(r))), /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
+    /* @__PURE__ */ a(i, { color: "text-secondary-normal", className: "text-left", children: [
+      t.header?.toString(),
+      ":"
+    ] }),
+    " ",
+    r || null
+  ] });
+}
+export {
+  f as MobileDataGridColumn
+};