impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/data/data-table/data-table-column-list.js

@@ -0,0 +1,85 @@
+import { jsxs as A, jsx as n } from "react/jsx-runtime";
+import { useRef as T, useState as z, useCallback as o } from "react";
+import { useDataTable as D } from "./data-table-context.js";
+import { NestedList as F } from "../nested-list/nested-list.js";
+import { SelectionMode as P } from "../nested-list/nested-list.types.js";
+import { useImpactNovaI18n as R } from "../../../i18n/use-impact-nova-i18n.js";
+import { PinSwitch as k } from "./pin-switch.js";
+import { ColumnIndicator as c } from "./column-indicator.js";
+import { IndicatorLegend as j } from "./indicator-legend.js";
+import { useDataTableColumnListSync as E } from "./use-data-table-column-list-sync.js";
+const Q = ({
+  enableApplyDiscard: a = !1,
+  showSearch: u = !0,
+  showSelectAll: d = !0,
+  showCollapse: m = !0
+}) => {
+  const { gridApi: p } = D(), { t } = R(), f = T({}), [h, C] = z({}), {
+    items: b,
+    isReady: g,
+    externalSyncKey: S,
+    listWrapperRef: x,
+    handleChange: s,
+    handleSubmit: I,
+    handlePinChange: i
+  } = E({
+    gridApi: p,
+    frozenColumnsLabel: t("dataTable.frozenColumns"),
+    scrollableColumnsLabel: t("dataTable.scrollableColumns")
+  }), L = o(
+    (e) => {
+      s(e, a);
+    },
+    [a, s]
+  ), N = o(
+    (e, r) => {
+      if (!r.isLeaf) return null;
+      const l = e.data;
+      return !l?.hasSortApplied && !l?.hasFilterApplied ? null : /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1 shrink-0", children: [
+        l?.hasSortApplied && /* @__PURE__ */ n(c, { type: "sort" }),
+        l?.hasFilterApplied && /* @__PURE__ */ n(c, { type: "filter" })
+      ] });
+    },
+    []
+  ), v = o(
+    (e, r) => {
+      const l = e.data;
+      return e.category === "structure" ? e.id !== "root-frozen" ? null : /* @__PURE__ */ n(j, {}) : !r.isLeaf || !(l?.pinned === "left" || l?.pinned === "right") ? null : /* @__PURE__ */ n(
+        k,
+        {
+          value: l?.pinned ?? null,
+          onChange: (y) => i(e.id, y),
+          className: "shrink-0"
+        }
+      );
+    },
+    [i]
+  );
+  return g ? /* @__PURE__ */ n("div", { ref: x, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ n(
+    F,
+    {
+      items: b,
+      onChange: L,
+      onSubmit: I,
+      renderLabelExtras: N,
+      renderActions: v,
+      enableApplyDiscard: a,
+      enableSearch: u,
+      enableSelectAll: d,
+      enableDragDrop: !0,
+      enableCollapse: !0,
+      enableGlobalCollapse: m,
+      selectionMode: P.CASCADE_DOWN,
+      searchPlaceholder: t("dataTable.searchColumnsPlaceholder"),
+      className: "h-full",
+      initialCollapsedItems: h,
+      onCollapseChange: (e) => {
+        f.current = e, C(e);
+      }
+    },
+    S ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ n("div", { className: "p-4 text-[13px] text-content-placeholder", children: t("dataTable.loadingColumns") });
+};
+export {
+  Q as DataTableColumnList
+};

package/dist/components/data/data-table/data-table-constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Minimum height (px) for the scoped settings sheet host while open.
+ * Applied on `DataTableContent`'s layout frame (not the absolute portal layer)
+ * so short grids grow enough for a usable column list without re-rendering AG Grid.
+ */
+export declare const DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX = 400;
+/** DOM class toggled imperatively for viewport-fill table shell (styles in `src/index.scss`). */
+export declare const TABLE_VIEWPORT_SHELL_EXPANDED_CLASS: "table-viewport-shell--expanded";

package/dist/components/data/data-table/data-table-context.d.ts

@@ -0,0 +1,27 @@
+import { GridApi } from 'ag-grid-community';
+import { DataTableSheetPortalStore } from './data-table-sheet-portal-store';
+export type DataTableFontSize = "small" | "medium" | "large";
+export type DataTableNumericFormat = "full" | "k" | "m" | "b" | "full_precision";
+export type DataTableRowHeight = "default" | "compact" | "comfort";
+export interface DataTableContextValue {
+    gridApi: GridApi | null;
+    registerApi: (api: GridApi) => void;
+    /** Call `+1` when a sheet opens, `-1` when it closes or unmounts (supports multiple sheets). */
+    registerScopedSheetDepth: (delta: 1 | -1) => void;
+    fontSize: DataTableFontSize;
+    setFontSize: (size: DataTableFontSize) => void;
+    numericFormat: DataTableNumericFormat;
+    setNumericFormat: (format: DataTableNumericFormat) => void;
+    rowHeight: DataTableRowHeight;
+    setRowHeight: (height: DataTableRowHeight) => void;
+}
+export declare const DataTableContext: import('react').Context<DataTableContextValue | null>;
+export declare const DataTableSheetPortalStoreContext: import('react').Context<DataTableSheetPortalStore | null>;
+export declare const useDataTable: () => DataTableContextValue;
+export declare const useDataTableSheetPortalStore: () => DataTableSheetPortalStore;
+export interface DataTableSheetPortalContextValue {
+    sheetTarget: HTMLDivElement | null;
+    setSheetTarget: (node: HTMLDivElement | null) => void;
+    scopedSheetOpen: boolean;
+}
+export declare const useDataTableSheetPortal: () => DataTableSheetPortalContextValue;

package/dist/components/data/data-table/data-table-context.js

@@ -0,0 +1,31 @@
+import { createContext as e, useContext as a } from "react";
+import { useDataTableSheetPortalSnapshot as s } from "./data-table-sheet-portal-store.js";
+const n = e(
+  null
+), l = e(null), b = () => {
+  const t = a(n);
+  if (!t)
+    throw new Error("useDataTable must be used within a DataTable");
+  return t;
+}, u = () => {
+  const t = a(l);
+  if (!t)
+    throw new Error(
+      "useDataTableSheetPortalStore must be used within a DataTable"
+    );
+  return t;
+}, c = () => {
+  const t = u(), { sheetTarget: o, scopedSheetOpen: r } = s(t);
+  return {
+    sheetTarget: o,
+    scopedSheetOpen: r,
+    setSheetTarget: t.setSheetTarget
+  };
+};
+export {
+  n as DataTableContext,
+  l as DataTableSheetPortalStoreContext,
+  b as useDataTable,
+  c as useDataTableSheetPortal,
+  u as useDataTableSheetPortalStore
+};

package/dist/components/data/data-table/data-table-format-options.js

@@ -0,0 +1,78 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useDataTable as d } from "./data-table-context.js";
+import { RadioGroup as o, RadioGroupItem as l } from "../../forms/radio-group/radio-group.js";
+import { Label as n } from "../../forms/label/label.js";
+import { useImpactNovaI18n as u } from "../../../i18n/use-impact-nova-i18n.js";
+const v = () => {
+  const { t: a } = u(), {
+    fontSize: i,
+    setFontSize: c,
+    numericFormat: m,
+    setNumericFormat: s
+  } = d();
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-6 px-1 py-1", "data-component": "data-table-format-options", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-content-icon", children: a("dataTable.fontSize") }),
+      /* @__PURE__ */ t(
+        o,
+        {
+          value: i,
+          orientation: "vertical",
+          onValueChange: (r) => c(r),
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "small", id: "font-small" }),
+              /* @__PURE__ */ e(n, { htmlFor: "font-small", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.fontSmall") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "medium", id: "font-medium" }),
+              /* @__PURE__ */ e(n, { htmlFor: "font-medium", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.fontMediumDefault") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "large", id: "font-large" }),
+              /* @__PURE__ */ e(n, { htmlFor: "font-large", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.fontLarge") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e("h3", { className: "text-[12px] font-semibold text-content-icon", children: a("dataTable.numericValues") }),
+      /* @__PURE__ */ t(
+        o,
+        {
+          value: m,
+          orientation: "vertical",
+          onValueChange: (r) => s(r),
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "full", id: "num-full" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-full", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericFull") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "k", id: "num-k" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-k", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericK") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "m", id: "num-m" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-m", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericM") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "b", id: "num-b" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-b", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericB") })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ e(l, { value: "full_precision", id: "num-full-precision" }),
+              /* @__PURE__ */ e(n, { htmlFor: "num-full-precision", className: "font-normal text-[13px] text-content-tertiary cursor-pointer", children: a("dataTable.numericFullPrecision") })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  v as DataTableFormatOptions
+};

package/dist/components/data/data-table/data-table-saved-views.d.ts

@@ -0,0 +1,2 @@
+import { DataTableSavedViewsProps } from './data-table-saved-views.types';
+export declare const DataTableSavedViews: ({ isSaveViewEnabled, views, activeViewSummary, viewTypeOptions, menuOpen: menuOpenControlled, defaultMenuOpen, onMenuOpenChange, onSearch, isLoadingViews, customListContent, disableApply, className, onSaveViewClick, onApply, onCancel, onEditView, onDeleteView, onSetDefaultView, }: DataTableSavedViewsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data/data-table/data-table-saved-views.js

@@ -0,0 +1,402 @@
+import { jsxs as i, Fragment as W, jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { ChevronRight as xe, Star as I, Search as ye, Bookmark as we, Pencil as Ne, Bin as Te } from "impact-nova-icons";
+import { cn as k } from "../../../lib/utils.js";
+import { useImpactNovaI18n as ke } from "../../../i18n/use-impact-nova-i18n.js";
+import { Popover as Ve, PopoverTrigger as Ce, PopoverContent as Se } from "../../feedback/popover/popover.js";
+import { Tooltip as X, TooltipTrigger as Z, TooltipContent as q } from "../../feedback/tooltip/tooltip.js";
+import { Button as m } from "../../primitives/button/button.js";
+import { Badge as j } from "../../data-display/badge/badge.js";
+import { Input as ze } from "../../forms/input/input.js";
+import { Separator as ee } from "../../data-display/separator/separator.js";
+import { Skeleton as B } from "../../data-display/skeleton/skeleton.js";
+import { Prompt as De } from "../../forms/prompt/prompt.js";
+function Me(b) {
+  return b.isSystemView ? "system" : b.isDefaultView ? "default" : b.isActive ? "active" : "other";
+}
+const Ae = ["default", "active", "system"], _e = ({
+  isSaveViewEnabled: b = !0,
+  views: o,
+  activeViewSummary: te,
+  viewTypeOptions: ae,
+  menuOpen: R,
+  defaultMenuOpen: ne = !1,
+  onMenuOpenChange: E,
+  onSearch: V,
+  isLoadingViews: L = !1,
+  customListContent: U,
+  disableApply: ie = !1,
+  className: re,
+  onSaveViewClick: le,
+  onApply: se,
+  onCancel: oe,
+  onEditView: de,
+  onDeleteView: ce,
+  onSetDefaultView: Q
+}) => {
+  const { t: a } = ke(), C = R !== void 0, [me, y] = n.useState(null), [ue, pe] = n.useState(
+    ne
+  ), u = C ? !!R : ue, p = n.useCallback(
+    (e) => {
+      C || pe(e), E?.(e);
+    },
+    [C, E]
+  ), [v, S] = n.useState("All"), [w, z] = n.useState(""), [F, D] = n.useState("");
+  n.useEffect(() => {
+    const e = window.setTimeout(() => D(w), 300);
+    return () => window.clearTimeout(e);
+  }, [w]), n.useEffect(() => {
+    V && V(F);
+  }, [F, V]);
+  const Y = n.useMemo(
+    () => o.find((e) => e.isActive),
+    [o]
+  ), d = Y ?? null, _ = te ?? Y?.viewName ?? a("dataTable.savedViewsNotApplicable"), [N, M] = n.useState(null), [g, $] = n.useState(null), K = n.useRef(!1);
+  n.useEffect(() => {
+    const e = u && !K.current;
+    if (K.current = u, e) {
+      const r = o.find((c) => c.isActive);
+      M(r?.id ?? null), S("All"), z(""), D("");
+    }
+  }, [u, o]);
+  const x = n.useMemo(() => v === "All" ? o : o.filter((e) => e.viewType === v), [o, v]), f = w.trim().toLowerCase(), T = n.useCallback(
+    (e, r) => r ? (e.viewName ?? "").trim().toLowerCase().includes(r) : !0,
+    []
+  ), A = n.useMemo(() => {
+    let e = x;
+    return f && (e = e.filter((r) => T(r, f))), e;
+  }, [x, f, T]), h = n.useMemo(() => {
+    if (x.length === 0) return [];
+    const e = Object.groupBy(x, Me);
+    return Ae.flatMap((r) => {
+      const c = e[r]?.[0];
+      return c ? f && !T(c, f) ? [] : [c] : [];
+    });
+  }, [x, f, T]), P = n.useMemo(() => {
+    const e = new Set(h.map((r) => r.id));
+    return A.filter((r) => !e.has(r.id));
+  }, [A, h]), G = N === null ? null : o.find((e) => e.id === N) ?? null, fe = () => {
+    se?.(G, { activeView: d }), p(!1);
+  }, he = () => {
+    oe?.({ activeView: d, pendingView: G }), p(!1);
+  }, be = (e) => {
+    p(e), e || (z(""), D(""));
+  };
+  if (!b)
+    return null;
+  const ve = o.length > 0, H = (e, r, c) => {
+    const O = N === e.id, s = me === e.id, J = r === "priority" && !!e.isActive, ge = r === "list" && !!e.isActive;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        tabIndex: 0,
+        className: k(
+          "mb-1 flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-medium font-['Manrope'] transition-all duration-300 relative overflow-hidden",
+          !s && "hover:bg-canvas-muted",
+          !s && J && !O && "bg-primary/10 dark:bg-primary/15",
+          !s && O && "bg-badge-info-muted text-badge-info-foreground",
+          !s && !O && !J && "text-foreground",
+          s && "pointer-events-none"
+        ),
+        onClick: () => !s && M(e.id),
+        onKeyDown: (l) => {
+          (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s || M(e.id));
+        },
+        children: [
+          s && /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute inset-0 bg-gradient-to-r from-muted/80 via-primary/20 to-muted/80 opacity-80 rounded-lg",
+              style: {
+                animation: "shimmer 1.5s ease-in-out infinite",
+                backgroundSize: "200% 100%"
+              }
+            }
+          ),
+          /* @__PURE__ */ i(X, { children: [
+            /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ t(
+              "span",
+              {
+                className: k(
+                  "min-w-0 flex-1 truncate relative z-10",
+                  ge && "underline decoration-primary decoration-2 underline-offset-2"
+                ),
+                children: e.viewName
+              }
+            ) }),
+            /* @__PURE__ */ t(q, { variant: "tertiary", side: "right", children: e.viewName })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-0.5 relative z-10", children: [
+            e.isEditable ? /* @__PURE__ */ t(
+              m,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "iconSm",
+                className: "text-foreground hover:text-content-charcoal",
+                "aria-label": a("dataTable.savedViewsEdit"),
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), p(!1), de?.(e, { activeView: d });
+                },
+                children: /* @__PURE__ */ t(Ne, { className: "size-3.5" })
+              }
+            ) : null,
+            e.isDeletable ? /* @__PURE__ */ t(
+              m,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "iconSm",
+                className: "text-foreground hover:text-destructive",
+                "aria-label": a("dataTable.savedViewsDelete"),
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), p(!1), $(e);
+                },
+                children: /* @__PURE__ */ t(Te, { className: "size-3.5" })
+              }
+            ) : null,
+            e.hideDefaultStar ? null : e.isDefaultView ? /* @__PURE__ */ t(
+              m,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "iconSm",
+                className: "text-warning hover:text-badge-warning-ink disabled:opacity-50",
+                "aria-label": a("dataTable.savedViewsDefaultAction"),
+                disabled: s,
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), Q?.(e, { activeView: d }));
+                },
+                children: s ? /* @__PURE__ */ t("div", { className: "size-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-warning border-t-transparent" }) : /* @__PURE__ */ t(I, { className: "size-3.5 fill-current text-warning" })
+              }
+            ) : /* @__PURE__ */ t(
+              m,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "iconSm",
+                className: "text-warning hover:text-badge-warning-ink disabled:opacity-50",
+                "aria-label": a("dataTable.savedViewsSetDefault"),
+                disabled: s,
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), Q?.(e, { activeView: d }));
+                },
+                children: s ? /* @__PURE__ */ t("div", { className: "size-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-warning border-t-transparent" }) : /* @__PURE__ */ t(I, { className: "size-3.5 text-warning" })
+              }
+            )
+          ] })
+        ]
+      },
+      c
+    );
+  };
+  return /* @__PURE__ */ i(W, { children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        "data-component": "data-table-saved-views",
+        className: k(
+          "saved-view-bar-gradient mb-2 mx-4 flex min-w-0 flex-nowrap items-center justify-between gap-2 rounded-lg px-2 py-3",
+          re
+        ),
+        children: [
+          L ? /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: [
+            /* @__PURE__ */ t(B, { className: "h-6 w-24 rounded-full bg-scrim-skeleton" }),
+            /* @__PURE__ */ t(B, { className: "h-6 w-6 shrink-0 rounded-md bg-scrim-skeleton" })
+          ] }) : ve ? /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 items-center justify-start gap-1 overflow-hidden", children: /* @__PURE__ */ i(Ve, { open: u, onOpenChange: be, children: [
+            /* @__PURE__ */ t(Ce, { asChild: !0, children: /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1 overflow-hidden rounded-md border-none bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+                "aria-expanded": u,
+                "aria-haspopup": "dialog",
+                "aria-label": a("dataTable.savedViewsOpenMenu"),
+                children: [
+                  /* @__PURE__ */ i(X, { children: [
+                    /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ t(
+                      j,
+                      {
+                        color: "success",
+                        variant: "outline",
+                        className: "w-fit max-w-full min-w-0 shrink font-['Manrope']",
+                        children: _
+                      }
+                    ) }),
+                    /* @__PURE__ */ t(q, { variant: "tertiary", side: "top", children: _ })
+                  ] }),
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: k(
+                        "flex size-6 shrink-0 items-center justify-center rounded-md bg-canvas-elevated transition-transform duration-200",
+                        u && "rotate-180"
+                      ),
+                      "aria-hidden": !0,
+                      children: /* @__PURE__ */ t(xe, { className: "size-3.5 rotate-90 text-content-charcoal" })
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              Se,
+              {
+                align: "start",
+                className: "z-[50] w-[min(100vw-24px,280px)] p-0 shadow-elevation-floating overflow-visible",
+                sideOffset: 8,
+                children: /* @__PURE__ */ i("div", { className: "flex flex-col py-2", children: [
+                  /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-2 px-3 pb-2", children: [
+                    /* @__PURE__ */ t("span", { className: "text-sm font-medium text-content-charcoal font-['Manrope']", children: a("dataTable.savedViewsTitle") }),
+                    /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-1 text-xs font-medium text-content-tertiary font-['Manrope']", children: [
+                      /* @__PURE__ */ t(I, { className: "size-3.5 fill-current text-warning" }),
+                      a("dataTable.savedViewsDefault")
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5 px-3 pb-2", children: [
+                    /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        className: "border-none bg-transparent p-0",
+                        onClick: () => S("All"),
+                        children: /* @__PURE__ */ t(
+                          j,
+                          {
+                            color: v === "All" ? "primary" : "neutral",
+                            variant: "outline",
+                            size: "sm",
+                            className: "cursor-pointer font-['Manrope']",
+                            children: a("dataTable.savedViewsAll")
+                          }
+                        )
+                      }
+                    ),
+                    ae?.map((e) => /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        className: "border-none bg-transparent p-0",
+                        onClick: () => S(e.value),
+                        children: /* @__PURE__ */ t(
+                          j,
+                          {
+                            color: v === e.value ? "primary" : "neutral",
+                            variant: "outline",
+                            size: "sm",
+                            className: "cursor-pointer font-['Manrope']",
+                            children: e.label
+                          }
+                        )
+                      },
+                      e.value
+                    ))
+                  ] }),
+                  /* @__PURE__ */ t("div", { className: "px-3 pb-2", children: /* @__PURE__ */ t(
+                    ze,
+                    {
+                      size: "sm",
+                      placeholder: a("dataTable.savedViewsSearchPlaceholder"),
+                      value: w,
+                      onChange: (e) => z(e.target.value),
+                      prefix: /* @__PURE__ */ t(
+                        ye,
+                        {
+                          className: "size-4 shrink-0 text-secondary-foreground",
+                          "aria-hidden": !0
+                        }
+                      ),
+                      className: "border-none shadow-none my-2 rounded-none",
+                      "aria-label": a("dataTable.savedViewsSearchPlaceholder")
+                    }
+                  ) }),
+                  /* @__PURE__ */ t("div", { className: "min-h-[72px] px-1", children: U || (L ? /* @__PURE__ */ t("div", { className: "flex max-h-[160px] flex-col gap-2 overflow-y-auto px-2 py-1", children: [1, 2, 3, 4, 5].map((e) => /* @__PURE__ */ t(B, { className: "h-9 w-full rounded-lg" }, e)) }) : A.length === 0 && h.length === 0 ? /* @__PURE__ */ t("div", { className: "flex min-h-[100px] flex-col items-center justify-center px-4 py-6 text-center", children: /* @__PURE__ */ t("span", { className: "text-sm leading-relaxed text-content-tertiary font-['Manrope']", children: a("dataTable.savedViewsEmptyList") }) }) : /* @__PURE__ */ i("div", { className: "flex max-h-[220px] flex-col gap-0 overflow-y-auto", children: [
+                    h.length > 0 ? /* @__PURE__ */ t("div", { className: "flex flex-col px-1 pb-1 ", children: h.map(
+                      (e) => H(
+                        e,
+                        "priority",
+                        `priority-${e.id}`
+                      )
+                    ) }) : null,
+                    h.length > 0 && P.length > 0 ? /* @__PURE__ */ t(ee, { className: "mb-2 bg-stroke-hairline" }) : null,
+                    P.length > 0 ? /* @__PURE__ */ i(W, { children: [
+                      /* @__PURE__ */ t("div", { className: "px-3 pb-1.5 pt-0.5 text-xs font-medium tracking-wide text-content-placeholder font-['Manrope']", children: a("dataTable.savedViewsAllSavedViews") }),
+                      /* @__PURE__ */ t("div", { className: "flex flex-col px-1 pb-1", children: P.map(
+                        (e) => H(
+                          e,
+                          "list",
+                          `list-${e.id}`
+                        )
+                      ) })
+                    ] }) : null
+                  ] })) }),
+                  /* @__PURE__ */ t(ee, { className: "my-1 bg-[var(--color-border-hairline)]" }),
+                  /* @__PURE__ */ i("div", { className: "flex justify-end gap-2 px-3 pt-1", children: [
+                    /* @__PURE__ */ t(
+                      m,
+                      {
+                        type: "button",
+                        variant: "tertiary",
+                        size: "md",
+                        onClick: he,
+                        children: a("dataTable.savedViewsCancel")
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      m,
+                      {
+                        type: "button",
+                        variant: "default",
+                        size: "md",
+                        disabled: ie || N === d?.id,
+                        onClick: fe,
+                        children: a("dataTable.savedViewsApply")
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            )
+          ] }) }) : /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-content-tertiary", children: [
+            /* @__PURE__ */ t(we, { className: "size-4 shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ t("span", { className: "text-sm font-medium font-['Manrope']", children: a("dataTable.savedViewsNoneYet") })
+          ] }),
+          /* @__PURE__ */ t(
+            m,
+            {
+              type: "button",
+              variant: "tertiary",
+              size: "sm",
+              className: "shrink-0 font-['Manrope']",
+              onClick: () => {
+                p(!1), le?.({ activeView: d });
+              },
+              children: a("dataTable.savedViewsSave")
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      De,
+      {
+        variant: "destructive",
+        open: g !== null,
+        onOpenChange: (e) => {
+          e || $(null);
+        },
+        title: a("dataTable.savedViewsDeleteConfirmTitle"),
+        description: g ? a("dataTable.savedViewsDeleteConfirmDescription", {
+          viewName: g.viewName
+        }) : void 0,
+        confirmLabel: a("dataTable.savedViewsDeleteConfirmButton"),
+        onConfirm: () => {
+          g && ce?.(g, { activeView: d });
+        }
+      }
+    )
+  ] });
+};
+export {
+  _e as DataTableSavedViews
+};

package/dist/components/data/data-table/data-table-sheet-context.d.ts

@@ -0,0 +1,18 @@
+export declare const DataTableSheetStateContext: import('react').Context<boolean>;
+export declare const DataTableSheetApiContext: import('react').Context<((open: boolean) => void) | null>;
+/**
+ * Returns both `open` and `setOpen`.
+ * Subscribes to BOTH contexts — use only in components that genuinely
+ * need to read the `open` flag (DataTableSheetContent, Trigger, etc.).
+ */
+export declare const useDataTableSheet: () => {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+/**
+ * Returns ONLY `setOpen`. Does NOT subscribe to `open` changes, so the
+ * consuming component will NOT re-render when the sheet opens/closes.
+ */
+export declare const useDataTableSheetApi: () => {
+    setOpen: (open: boolean) => void;
+};