@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/DataGrid/index.js

@@ -0,0 +1,696 @@
+"use client";
+import { jsx as n, jsxs as d, Fragment as Nt } from "react/jsx-runtime";
+import $t, { useImperativeHandle as Pt, useState as f, useCallback as H, useEffect as ie, useRef as ce, useId as kt, useLayoutEffect as Dt } from "react";
+import { useInfiniteScroll as Lt } from "../../hooks/useInfiniteScroll.js";
+import { useTableLayout as Et } from "../../hooks/useTableLayout/useTableLayout.js";
+import { componentGap as Le, componentPadding as Ee } from "../../classNames.js";
+import { Button as Me } from "../Button.js";
+import { Checkbox as Mt } from "../Checkbox.js";
+import { DraggableCellHeader as Tt, DataGridCell as jt } from "../DataGridCell.js";
+import { Icon as Te } from "../Icon.js";
+import { Label as Wt } from "../Label.js";
+import { Menu as _t } from "../Menu.js";
+import { MenuOption as At } from "../MenuOption.js";
+import { Paragraph as w } from "../Paragraph.js";
+import { Select as Ft } from "../Select.js";
+import { Subheader as $ } from "../Subheader.js";
+import { useReactTable as Gt, flexRender as Ot } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useSensors as Ht, useSensor as ae, DndContext as Kt, closestCenter as Vt, KeyboardSensor as Zt, TouchSensor as qt, MouseSensor as Bt } from "../../node_modules/@dnd-kit/core/dist/core.esm.js";
+import { SortableContext as Jt, horizontalListSortingStrategy as Qt, arrayMove as Xt } from "../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { restrictToHorizontalAxis as Yt } from "../../node_modules/@dnd-kit/modifiers/dist/modifiers.esm.js";
+import { Notification as Ut } from "../Notification.js";
+import { useVirtualizer as eo } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { clsx as S } from "../../node_modules/clsx/dist/clsx.js";
+import { PinnedColumns as je } from "./PinnedColumns.js";
+import { getSortIcon as We } from "./utils.js";
+import { TableBody as to } from "./TableBody/index.js";
+import { SummaryRow as oo } from "./SummaryRow/index.js";
+import { Spinner as de } from "../Spinner.js";
+import { Tooltip as _e } from "../Tooltip.js";
+import Ae from "../../static/no-results-image.png.js";
+import { getExpandedRowModel as no, getGroupedRowModel as ro, getFilteredRowModel as lo, getSortedRowModel as so, getCoreRowModel as io } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+const co = [5, 10, 15, 20, 25, 30, 35], Fe = "h-[185px]";
+function Fo({
+  id: s,
+  rowIdAccessor: v,
+  testid: l,
+  data: k,
+  columns: Ge,
+  status: D,
+  isLoadingMore: L = !1,
+  onLoadMore: Oe,
+  pagination: r,
+  showFilterRow: K = !1,
+  hasMore: V = !1,
+  sorting: me,
+  onSortingChange: He,
+  columnFilters: ue,
+  onColumnFiltersChange: Ke,
+  rowSelection: Z,
+  onRowSelectionChange: E,
+  filteredSortedData: fe,
+  totalRowCount: M,
+  hideStatusBar: Ve,
+  centerHeader: Ze,
+  enableColumnSelector: he,
+  predeterminedLeftPins: qe = [],
+  predeterminedRightPins: Be = [],
+  useMenuDefaultMinWidth: Je,
+  rowDisabled: Qe,
+  rowDisabledAccessor: Xe,
+  isLoading: h = !1,
+  loadingMessage: Ye = "Loading Results",
+  loadingDescription: ge,
+  maxHeight: T,
+  fillHeight: y = !1,
+  manualFiltering: q = !1,
+  notifications: B,
+  summaryRow: pe,
+  groupBy: j,
+  groupRowMode: J = "spanning",
+  groupDefaultExpand: Se = "none",
+  allowUserGrouping: Q,
+  groupSelectionMode: X = "row",
+  hideGroupedColumns: Ue,
+  grouping: C,
+  onGroupingChange: et,
+  expanded: W,
+  onExpandedChange: tt,
+  ref: ot
+}) {
+  Pt(ot, () => ({
+    getSavedLayout: () => rt()
+  }));
+  const [ve, be] = f([]), [xe, we] = f([]), [nt, ye] = f({}), [Y, U] = f(null), {
+    columns: b,
+    setColumns: ee,
+    getSavedLayout: rt,
+    resetToDefaults: Ce
+  } = Et(Ge, s ?? l), [Re, te] = f(
+    b.map((e) => e.id)
+  ), [ze, lt] = f(
+    Object.fromEntries(
+      b.filter((e) => !!e.id).map((e) => [e.id, e.meta?.visible ?? !0])
+    )
+  ), Ie = H(
+    (e) => {
+      lt(
+        Object.fromEntries(
+          b.filter((o) => !!o.id).map((o) => [o.id, o.meta?.visible ?? !0])
+        )
+      ), e && te(b.map((o) => o.id));
+    },
+    [b]
+  ), st = H(() => {
+    Ce();
+  }, [Ce]);
+  ie(() => {
+    Ie(!0);
+  }, [Ie]);
+  const it = r ? me ?? ve : ve, ct = r ? (e) => {
+    const o = typeof e == "function" ? e(
+      me ?? []
+    ) : e;
+    (He ?? be)(o);
+  } : be, Ne = r != null || q, at = Ne ? ue ?? xe : xe, dt = Ne ? (e) => {
+    const o = typeof e == "function" ? e(ue ?? []) : e;
+    (Ke ?? we)(o);
+  } : we, R = Z ?? nt, z = ce(R);
+  z.current = R;
+  const $e = H(
+    (e) => {
+      if (r) {
+        const o = typeof e == "function" ? e(z.current) : e;
+        z.current = o, (E ?? ye)(o);
+      } else if (Z && E) {
+        const o = typeof e == "function" ? e(z.current) : e;
+        z.current = o, E(o);
+      } else
+        ye(e);
+    },
+    [Z, E, r]
+  ), [mt, Pe] = f(
+    j ?? []
+  );
+  ie(() => {
+    C === void 0 && j !== void 0 && Pe(j);
+  }, [j, C]);
+  const oe = C ?? mt, ut = C !== void 0 ? (e) => {
+    const o = typeof e == "function" ? e(
+      C
+    ) : e;
+    et?.(o);
+  } : Pe, [ft, ke] = f(
+    () => Se === "all" ? !0 : {}
+  ), ht = W ?? ft, gt = W !== void 0 ? (e) => {
+    const o = typeof e == "function" ? e(
+      W
+    ) : e;
+    tt?.(o);
+  } : ke, pt = Ue ? {
+    ...ze,
+    ...Object.fromEntries(oe.map((e) => [e, !1]))
+  } : ze, St = kt(), u = ce(null), De = ce(!1), vt = H(
+    (e, o) => {
+      ee((t) => t.map((a) => a.id === e ? {
+        ...a,
+        meta: {
+          ...a.meta,
+          visible: o
+        }
+      } : a));
+    },
+    [ee]
+  ), c = Gt({
+    columns: b,
+    data: k,
+    defaultColumn: { minSize: 50 },
+    getCoreRowModel: io(),
+    getSortedRowModel: so(),
+    getFilteredRowModel: q ? void 0 : lo(),
+    getGroupedRowModel: ro(),
+    getExpandedRowModel: no(),
+    // Grouping only ever happens client-side in this grid — there is no
+    // server-side/manual grouping mode, unlike filtering.
+    groupedColumnMode: !1,
+    // This grid never uses TanStack's own pagination feature — pagination
+    // is entirely hand-rolled via the `pagination` prop, with no
+    // getPaginationRowModel registered. TanStack's pagination feature is
+    // still core-bundled and present regardless, and by default it
+    // auto-resets its own (unused) internal page index whenever grouping/
+    // filtering/sorting state changes. Disabling that avoids a pointless
+    // internal state update on every grouping change.
+    autoResetPageIndex: !1,
+    autoResetExpanded: !1,
+    manualFiltering: q,
+    columnResizeMode: "onChange",
+    getRowId: v ? (e) => String(e[v]) : (e, o) => String(e.id ?? o + 1),
+    state: {
+      columnOrder: Re,
+      sorting: it,
+      columnFilters: at,
+      rowSelection: R,
+      columnVisibility: pt,
+      grouping: oe,
+      expanded: ht
+    },
+    initialState: {
+      columnPinning: {
+        left: qe,
+        right: Be
+      }
+    },
+    enableColumnPinning: !0,
+    onColumnOrderChange: te,
+    onSortingChange: P(ct),
+    onColumnFiltersChange: P(dt),
+    onRowSelectionChange: P($e),
+    onGroupingChange: P(ut),
+    onExpandedChange: P(gt),
+    filterFns: {
+      startsWith: (e, o, t) => {
+        const i = e?.getValue(o);
+        return !i || !t ? !0 : String(i).toLowerCase().startsWith(String(t).toLowerCase());
+      },
+      endsWith: (e, o, t) => {
+        const i = e?.getValue(o);
+        return !i || !t ? !0 : String(i).toLowerCase().endsWith(String(t).toLowerCase());
+      }
+    }
+  });
+  ie(() => {
+    if (Se !== "first" || W !== void 0)
+      return;
+    const e = {};
+    let o = c.getGroupedRowModel().rows.find((t) => t.depth === 0 && t.getIsGrouped());
+    for (; o; )
+      e[o.id] = !0, o = o.subRows.find((t) => t.getIsGrouped());
+    Object.keys(e).length > 0 && ke(e);
+  }, [oe]);
+  const _ = r ? fe?.map((e) => String(e.id)) ?? [] : Array.from(
+    { length: M ?? k.length },
+    (e, o) => String(o + 1)
+  ), ne = _.every(
+    (e) => R[e]
+  ), bt = !ne && _.some((e) => R[e]), xt = () => {
+    $e((e) => {
+      if (!ne) {
+        const t = {};
+        for (const i of _)
+          t[i] = !0;
+        return { ...e, ...t };
+      } else {
+        const t = { ...e };
+        for (const i of _)
+          delete t[i];
+        return t;
+      }
+    });
+  };
+  Lt({
+    containerRef: u,
+    onLoadMore: Oe ?? (() => {
+    }),
+    isLoading: L,
+    enabled: !r
+  }), Dt(() => {
+    if (De.current || !u.current) return;
+    const e = u.current.offsetWidth;
+    if (e === 0) return;
+    const o = c.getLeftLeafColumns().reduce((p, O) => p + O.getSize(), 0), t = c.getRightLeafColumns().reduce((p, O) => p + O.getSize(), 0), i = e - o - t, a = c.getCenterLeafColumns();
+    if (a.length === 0) return;
+    const m = Math.floor(i / a.length), N = {};
+    a.forEach((p) => {
+      N[p.id] = Math.max(m, 50);
+    }), c.setColumnSizing(N), De.current = !0;
+  }, []);
+  const wt = (e) => {
+    const { active: o, over: t } = e;
+    o && t && o.id !== t.id && te((i) => {
+      const a = i.indexOf(o.id), m = i.indexOf(t.id), N = Xt(i, a, m);
+      return ee((p) => N.map((zt) => p.find((It) => It.id === zt)).filter(Boolean)), N;
+    });
+  }, yt = Ht(
+    ae(Bt),
+    ae(qt),
+    ae(Zt)
+  ), re = c.getCenterLeafColumns(), Ct = re.map((e) => e.id), Rt = Re.filter(
+    (e) => Ct.includes(e)
+  ), A = eo({
+    count: re.length,
+    estimateSize: (e) => re[e].getSize(),
+    getScrollElement: () => u.current,
+    horizontal: !0,
+    overscan: 8
+  }), g = A.getVirtualItems();
+  let F, I;
+  A && g?.length && (F = g[0]?.start ?? 0, I = A.getTotalSize() - (g[g.length - 1]?.end ?? 0));
+  const G = c.getRowModel().rows.length === 0, x = pe && !G ? pe : void 0, le = x ? c.getFilteredRowModel().rows.map((e) => e.original) : [], se = x ? r ? fe ?? k : k : [];
+  return /* @__PURE__ */ n(
+    Kt,
+    {
+      id: St,
+      collisionDetection: Vt,
+      modifiers: [Yt],
+      onDragEnd: wt,
+      sensors: yt,
+      children: /* @__PURE__ */ n(
+        Jt,
+        {
+          items: Rt,
+          strategy: Qt,
+          children: /* @__PURE__ */ d(
+            "div",
+            {
+              className: S(
+                "flex flex-col gap-2 w-full",
+                y ? "grow min-h-0" : "grow-0 h-fit"
+              ),
+              children: [
+                B && B.length > 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-2 shrink-0 [color:initial]", children: B.map((e, o) => /* @__PURE__ */ n(Ut, { ...e }, e.id ?? o)) }),
+                /* @__PURE__ */ d(
+                  "div",
+                  {
+                    id: s,
+                    "data-testid": l,
+                    className: S(
+                      "flex flex-col rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
+                      y ? "flex-1 min-h-0" : "grow-0 h-fit"
+                    ),
+                    children: [
+                      /* @__PURE__ */ d(
+                        "div",
+                        {
+                          className: S(
+                            "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                            G ? "overflow-y-hidden" : !y && "min-h-[120px]",
+                            y && "flex-1 min-h-0"
+                          ),
+                          style: T !== void 0 ? { maxHeight: typeof T == "number" ? `${T}px` : T } : void 0,
+                          ref: u,
+                          inert: h || void 0,
+                          "aria-busy": h || void 0,
+                          children: [
+                            /* @__PURE__ */ n(
+                              je,
+                              {
+                                testid: l,
+                                pinDirection: "left",
+                                table: c,
+                                tableContainerRef: u,
+                                pagination: r,
+                                isLoadingMore: L,
+                                hasMore: V,
+                                showFilterRow: K,
+                                groupRowMode: J,
+                                groupSelectionMode: X,
+                                allowUserGrouping: Q,
+                                hoveredRowId: Y,
+                                setHoveredRowId: U,
+                                summaryRow: x,
+                                filteredRows: le,
+                                allRows: se,
+                                totalRowCount: M
+                              }
+                            ),
+                            /* @__PURE__ */ d("table", { className: "flex-1 flex flex-col min-h-min", children: [
+                              /* @__PURE__ */ n("thead", { className: "sticky top-0 z-10 grid", children: c.getCenterHeaderGroups().map((e) => /* @__PURE__ */ d(
+                                "tr",
+                                {
+                                  "data-testid": l ? `${l}-header-row-${e.id}` : void 0,
+                                  className: "flex w-full bg-background-primary-normal",
+                                  "data-theme": "brand",
+                                  children: [
+                                    F ? (
+                                      // fake empty column to the left for virtualization scroll padding
+                                      /* @__PURE__ */ n(
+                                        "th",
+                                        {
+                                          style: { display: "flex", width: F }
+                                        }
+                                      )
+                                    ) : null,
+                                    g.map((o) => {
+                                      const t = e.headers[o.index];
+                                      if (t) {
+                                        if (typeof t.column.columnDef.header == "string") {
+                                          const i = c.getRowModel().rows[0]?.getValue(t.column.id), a = t.column.columnDef.meta?.align ?? (typeof i == "number" ? "right" : "left");
+                                          return /* @__PURE__ */ d(
+                                            Tt,
+                                            {
+                                              width: `${t.column.getSize()}px`,
+                                              id: s ? `${s}-header-${t.id}` : void 0,
+                                              testid: l ? `${l}-header-${t.id}` : void 0,
+                                              header: t,
+                                              locked: t.column.columnDef.meta?.locked,
+                                              center: Ze,
+                                              allowUserGrouping: Q,
+                                              isLast: !I && o.index === g[g.length - 1]?.index,
+                                              className: S(
+                                                t.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                                "group",
+                                                {
+                                                  "justify-start": a === "left",
+                                                  "justify-end": a === "right"
+                                                }
+                                              ),
+                                              useMenuDefaultMinWidth: Je,
+                                              children: [
+                                                a === "left" && /* @__PURE__ */ n(
+                                                  _e,
+                                                  {
+                                                    showOnTruncation: !0,
+                                                    message: t.column.columnDef.header,
+                                                    position: "bottom",
+                                                    children: /* @__PURE__ */ n($, { as: "p", addOverflow: !0, tall: !0, children: t.column.columnDef.header })
+                                                  }
+                                                ),
+                                                We(t.column.getIsSorted()),
+                                                !t.column.getIsSorted() && t.column.getCanSort() && !c.getState().columnSizingInfo.isResizingColumn && We(
+                                                  t.column.getNextSortingOrder(),
+                                                  !0
+                                                ),
+                                                t.column.getSortIndex() !== -1 && c.getState().sorting.length > 1 && /* @__PURE__ */ n($, { tall: !0, children: t.column.getSortIndex() + 1 }),
+                                                a === "right" && /* @__PURE__ */ n(
+                                                  _e,
+                                                  {
+                                                    showOnTruncation: !0,
+                                                    message: t.column.columnDef.header,
+                                                    position: "bottom",
+                                                    children: /* @__PURE__ */ n($, { as: "p", addOverflow: !0, tall: !0, children: t.column.columnDef.header })
+                                                  }
+                                                ),
+                                                /* @__PURE__ */ n(
+                                                  "div",
+                                                  {
+                                                    onDoubleClick: (m) => {
+                                                      m.stopPropagation(), t.column.resetSize();
+                                                    },
+                                                    onMouseDown: (m) => {
+                                                      m.stopPropagation(), t.getResizeHandler()(m);
+                                                    },
+                                                    onTouchStart: (m) => {
+                                                      m.stopPropagation(), t.getResizeHandler()(m);
+                                                    },
+                                                    className: "absolute right-0 inset-y-0 w-4 cursor-col-resize",
+                                                    children: /* @__PURE__ */ n("div", { className: "absolute right-0 inset-y-0 w-px bg-black pointer-events-none" })
+                                                  }
+                                                )
+                                              ]
+                                            },
+                                            t.id
+                                          );
+                                        }
+                                        return /* @__PURE__ */ n($t.Fragment, { children: t.column.columnDef.meta?.checkbox ? /* @__PURE__ */ n(
+                                          jt,
+                                          {
+                                            id: s ? `${s}-header-${t.id}` : void 0,
+                                            testid: l ? `${l}-header-${t.id}` : void 0,
+                                            type: "header",
+                                            component: "checkbox",
+                                            children: /* @__PURE__ */ n(
+                                              Mt,
+                                              {
+                                                id: s ? `${s}-select-all-checkbox` : void 0,
+                                                testid: l ? `${l}-select-all-checkbox` : void 0,
+                                                checked: ne,
+                                                indeterminate: bt,
+                                                onChange: xt
+                                              }
+                                            )
+                                          }
+                                        ) : Ot(
+                                          t.column.columnDef.header,
+                                          t.getContext()
+                                        ) }, t.id);
+                                      }
+                                    }),
+                                    I ? (
+                                      //fake empty column to the right for virtualization scroll padding
+                                      /* @__PURE__ */ n(
+                                        "th",
+                                        {
+                                          style: { display: "flex", width: I }
+                                        }
+                                      )
+                                    ) : null
+                                  ]
+                                },
+                                e.id
+                              )) }),
+                              /* @__PURE__ */ n(
+                                to,
+                                {
+                                  id: s,
+                                  testid: l,
+                                  columnVirtualizer: A,
+                                  table: c,
+                                  tableContainerRef: u,
+                                  virtualPaddingLeft: F,
+                                  virtualPaddingRight: I,
+                                  pagination: r,
+                                  isLoadingMore: L,
+                                  hasMore: V,
+                                  showFilterRow: K,
+                                  enableColumnSelector: he,
+                                  groupRowMode: J,
+                                  groupSelectionMode: X,
+                                  rowDisabled: Qe,
+                                  rowDisabledAccessor: Xe,
+                                  hoveredRowId: Y,
+                                  setHoveredRowId: U
+                                }
+                              ),
+                              x && /* @__PURE__ */ n(
+                                oo,
+                                {
+                                  id: s,
+                                  testid: l,
+                                  table: c,
+                                  summaryConfig: x,
+                                  filteredRows: le,
+                                  allRows: se,
+                                  totalRowCount: M,
+                                  locked: !1
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ n(
+                              je,
+                              {
+                                id: s,
+                                enableColumnSelector: he,
+                                toggleColumnVisibility: vt,
+                                resetColumnVisibility: st,
+                                testid: l,
+                                pinDirection: "right",
+                                table: c,
+                                tableContainerRef: u,
+                                pagination: r,
+                                isLoadingMore: L,
+                                hasMore: V,
+                                showFilterRow: K,
+                                groupRowMode: J,
+                                groupSelectionMode: X,
+                                allowUserGrouping: Q,
+                                hoveredRowId: Y,
+                                setHoveredRowId: U,
+                                summaryRow: x,
+                                filteredRows: le,
+                                allRows: se,
+                                totalRowCount: M
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      h && G && /* @__PURE__ */ d(
+                        "div",
+                        {
+                          className: S(
+                            Fe,
+                            "flex flex-col items-center justify-center",
+                            Le,
+                            Ee
+                          ),
+                          children: [
+                            /* @__PURE__ */ n(de, { size: "large" }),
+                            /* @__PURE__ */ n($, { color: "text-secondary-normal", children: Ye }),
+                            ge && /* @__PURE__ */ n(w, { color: "text-secondary-normal", children: ge })
+                          ]
+                        }
+                      ),
+                      !h && G && /* @__PURE__ */ d(
+                        "div",
+                        {
+                          className: S(
+                            Fe,
+                            "flex flex-col items-center justify-center",
+                            Le,
+                            Ee
+                          ),
+                          "data-testid": l ? `${l}-no-results` : void 0,
+                          children: [
+                            /* @__PURE__ */ n(
+                              "img",
+                              {
+                                src: Ae?.src ?? Ae,
+                                alt: "No Results",
+                                className: "h-30 opacity-20",
+                                width: 120,
+                                height: 120
+                              }
+                            ),
+                            /* @__PURE__ */ n($, { color: "text-secondary-normal", children: "No Results" }),
+                            /* @__PURE__ */ n(w, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                          ]
+                        }
+                      ),
+                      !Ve && /* @__PURE__ */ d("div", { className: S("p-2 pt-[7px] border-t border-border-primary-normal min-h-[34px]", !y && "h-full"), children: [
+                        r && /* @__PURE__ */ d("div", { className: "flex justify-between items-center", children: [
+                          /* @__PURE__ */ n("div", { className: "flex items-center gap-1 w-min", children: h ? /* @__PURE__ */ d("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [
+                            /* @__PURE__ */ n(de, { size: "small" }),
+                            /* @__PURE__ */ n(w, { children: D || "Loading..." })
+                          ] }) : /* @__PURE__ */ d(Nt, { children: [
+                            /* @__PURE__ */ n(
+                              Ft,
+                              {
+                                id: s ? `${s}-pagesize-select` : void 0,
+                                testid: l ? `${l}-pagesize-select` : void 0,
+                                wrapperClassName: "!w-20",
+                                value: r.pageSize.toString(),
+                                onChange: (e) => r.onPageSizeChange?.(Number(e.target.value)),
+                                renderMenu: (e) => /* @__PURE__ */ n(
+                                  _t,
+                                  {
+                                    ...e,
+                                    id: s ? `${s}-pagesize-menu` : void 0,
+                                    testid: l ? `${l}-pagesize-menu` : void 0,
+                                    children: co.map((o) => /* @__PURE__ */ n(
+                                      At,
+                                      {
+                                        id: s ? `${s}-pagesize-option-${o}` : void 0,
+                                        selected: r.pageSize === o,
+                                        onClick: () => r.onPageSizeChange?.(o),
+                                        children: o
+                                      },
+                                      o
+                                    ))
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ n(Wt, { children: "Per Page" })
+                          ] }) }),
+                          /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ n(
+                              Me,
+                              {
+                                id: s ? `${s}-prev-page-button` : void 0,
+                                testid: l ? `${l}-prev-page-button` : void 0,
+                                iconOnly: !0,
+                                leftIcon: /* @__PURE__ */ n(Te, { name: "chevron_left" }),
+                                onClick: () => r.onPageChange(r.pageIndex - 1),
+                                variant: "tertiary",
+                                disabled: r.pageIndex === 0
+                              }
+                            ),
+                            /* @__PURE__ */ d(w, { children: [
+                              r.pageIndex * r.pageSize + 1,
+                              " -",
+                              " ",
+                              Math.min(
+                                (r.pageIndex + 1) * r.pageSize,
+                                r.total
+                              ),
+                              " ",
+                              "of ",
+                              r.total
+                            ] }),
+                            /* @__PURE__ */ n(
+                              Me,
+                              {
+                                id: s ? `${s}-next-page-button` : void 0,
+                                testid: l ? `${l}-next-page-button` : void 0,
+                                iconOnly: !0,
+                                leftIcon: /* @__PURE__ */ n(Te, { name: "chevron_right" }),
+                                onClick: () => r.onPageChange(r.pageIndex + 1),
+                                variant: "tertiary",
+                                disabled: (r.pageIndex + 1) * r.pageSize >= r.total
+                              }
+                            )
+                          ] })
+                        ] }),
+                        !r && h && /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ n(de, { size: "small" }),
+                          /* @__PURE__ */ n(w, { testid: l ? `${l}-status-text` : void 0, children: D || "Loading..." })
+                        ] }),
+                        !r && !h && D && /* @__PURE__ */ n(
+                          w,
+                          {
+                            testid: l ? `${l}-status-text` : void 0,
+                            children: D
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function P(s) {
+  return (v) => {
+    s(
+      (l) => typeof v == "function" ? v(l) : v
+    );
+  };
+}
+export {
+  Fo as DataGrid
+};