asma-ui-core 3.45.1 → 3.46.0

package/dist/table/components/columns/expandColumn.js

@@ -1,10 +1,10 @@
-import { EXPAND_COLUMN_ID as r } from "../../types.js";
+import { EXPAND_COLUMN_ID as i } from "../../types.js";
 import { ChevronDownIcon as a } from "../../shared-components/ChevronDownIcon.js";
 import { jsx as t } from "react/jsx-runtime";
 import "@tanstack/react-table";
-function p(o, i) {
+function f(r, o) {
   return {
-    id: r,
+    id: i,
     minSize: 50,
     maxSize: 50,
     size: 50,
@@ -17,23 +17,27 @@ function p(o, i) {
         type: "button",
         "aria-label": n ? "Collapse row" : "Expand row",
         "aria-expanded": n,
-        className: "flex w-full items-center justify-center border-0 bg-transparent outline-none focus:outline-none",
+        className: "flex w-full items-center justify-center border-0 bg-transparent p-0 outline-none focus:outline-none",
         onClick: () => e.row.getToggleExpandedHandler()(),
-        style: { height: i ?? "auto" },
+        style: { height: o ?? "auto" },
         children: /* @__PURE__ */ t(a, {
+          className: "block size-6 shrink-0",
           width: 24,
           height: 24,
           style: {
-            rotate: n ? "180deg" : "0deg",
-            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-            transitionDuration: "500ms"
+            transform: n ? "rotate(180deg)" : "rotate(0deg)",
+            transformBox: "fill-box",
+            transformOrigin: "center",
+            transitionProperty: "transform",
+            transitionDuration: "500ms",
+            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
           }
         })
       }) : null;
     },
-    fixedLeft: o
+    fixedLeft: r
   };
 }
 export {
-  p as generateExpandColumn
+  f as generateExpandColumn
 };

package/dist/table/components/columns/showTextColumn.js

@@ -1,8 +1,8 @@
 import { SHOW_FULL_TEXT_ID as i } from "../../types.js";
-import { ChevronDownIcon as a } from "../../shared-components/ChevronDownIcon.js";
+import { ChevronDownIcon as s } from "../../shared-components/ChevronDownIcon.js";
 import { StyledButton as l } from "../../shared-components/button/StyledButton.js";
-import { jsx as n } from "react/jsx-runtime";
-function g(e, o) {
+import { jsx as o } from "react/jsx-runtime";
+function f(e, n) {
   return {
     id: i,
     minSize: 38,
@@ -11,24 +11,24 @@ function g(e, o) {
     enableHiding: !1,
     enableSorting: !1,
     header: () => null,
-    cell: (r) => /* @__PURE__ */ n(s, {
+    cell: (r) => /* @__PURE__ */ o(u, {
       info: r,
-      rowHeight: o
+      rowHeight: n
     }),
     fixedLeft: e
   };
 }
-function s({ info: e, rowHeight: o }) {
-  const r = e.row.getCanExpand();
-  return /* @__PURE__ */ n("div", {
+function u({ info: e, rowHeight: n }) {
+  const r = e.row.getCanExpand(), a = e.row.isExpanded();
+  return /* @__PURE__ */ o("div", {
     className: "flex w-full items-center justify-center",
-    style: { height: o ?? "auto" },
-    children: /* @__PURE__ */ n(l, {
+    style: { height: n ?? "auto" },
+    children: /* @__PURE__ */ o(l, {
       dataTest: "expand-text-button",
       size: "small",
       variant: "textGray",
-      onClick: () => {
-        r && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
+      onClick: (t) => {
+        t.stopPropagation(), r && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
       },
       onMouseDown: (t) => {
         t.preventDefault(), t.stopPropagation();
@@ -36,13 +36,17 @@ function s({ info: e, rowHeight: o }) {
       onMouseUp: (t) => {
         t.preventDefault(), t.stopPropagation();
       },
-      startIcon: /* @__PURE__ */ n(a, {
+      startIcon: /* @__PURE__ */ o(s, {
+        className: "block size-5 shrink-0",
         width: 20,
         height: 20,
         style: {
-          rotate: e.row.isExpanded() ? "180deg" : "0deg",
-          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+          transform: a ? "rotate(180deg)" : "rotate(0deg)",
+          transformBox: "fill-box",
+          transformOrigin: "center",
+          transitionProperty: "transform",
           transitionDuration: "500ms",
+          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
           cursor: "pointer"
         }
       })
@@ -50,5 +54,5 @@ function s({ info: e, rowHeight: o }) {
   });
 }
 export {
-  g as generateShowFullTextColumn
+  f as generateShowFullTextColumn
 };

package/dist/table/components/table-header/TableHeaderCell.js

@@ -1,61 +1,55 @@
-import { ACTIONS_COLUMN_ID as b, INTERNAL_COLUMN_IDS as A } from "../../types.js";
+import { ACTIONS_COLUMN_ID as S, INTERNAL_COLUMN_IDS as y } from "../../types.js";
 import { useRootContext as G } from "../../context/RootContext.js";
 import n from "../StyledTable.module.js";
-import { DropUpIcon as O } from "../../shared-components/DropUpIcon.js";
-import { DropDownIcon as j } from "../../shared-components/DropDownIcon.js";
-import { getTableHeaderStyle as F } from "../../helpers/getTableHeaderStyle.js";
-import y from "clsx";
-import { useMemo as g } from "react";
-import { jsx as u, jsxs as L } from "react/jsx-runtime";
-import { flexRender as k } from "@tanstack/react-table";
-function V({ styledTableProps: t, header: o, tableCanResize: r = !1, left: a, right: i, tableWidth: s }) {
-  const { hideHeader: m = !1, enableResizing: f = !1, actions: I, customActionsNode: w } = t, { isResizing: p, enableResizingFlag: S, disableResizingFlag: x } = G(), D = o.column.columnDef.fixedLeft, R = !!o.column.columnDef.fixedRight, d = o.column.id === b, _ = !!I || !!w, C = g(() => o.headerGroup.headers.some((e) => e.id === b), [o.headerGroup.headers]), v = g(() => o.headerGroup.headers.some((e) => !!e.column.columnDef.fixedRight), [o.headerGroup.headers]), H = g(() => o.headerGroup.headers[o.headerGroup.headers.length - (C ? 2 : 1)], [o.headerGroup.headers, C]), l = o.column.getCanSort(), N = o.column.getIsSorted(), h = l ? N === "asc" ? "ascending" : N === "desc" ? "descending" : "none" : void 0;
-  return /* @__PURE__ */ u("th", {
+import { DropUpIcon as A } from "../../shared-components/DropUpIcon.js";
+import { DropDownIcon as k } from "../../shared-components/DropDownIcon.js";
+import { getTableHeaderStyle as w } from "../../helpers/getTableHeaderStyle.js";
+import _ from "clsx";
+import { useMemo as c } from "react";
+import { jsx as i, jsxs as F } from "react/jsx-runtime";
+import { flexRender as B } from "@tanstack/react-table";
+function J({ styledTableProps: C, header: o, tableCanResize: D = !1, left: b, right: N, tableWidth: z }) {
+  const { hideHeader: r = !1, enableResizing: a = !1, actions: I, customActionsNode: h } = C, { isResizing: m, enableResizingFlag: u, disableResizingFlag: d } = G(), g = o.column.columnDef.fixedLeft, f = !!o.column.columnDef.fixedRight, l = o.column.id === S, p = !!I || !!h, x = c(() => o.headerGroup.headers.some((e) => e.id === S), [o.headerGroup.headers]), H = c(() => o.headerGroup.headers.some((e) => !!e.column.columnDef.fixedRight), [o.headerGroup.headers]), T = c(() => o.headerGroup.headers[o.headerGroup.headers.length - (x ? 2 : 1)], [o.headerGroup.headers, x]), t = o.column.getCanSort(), R = o.column.getIsSorted(), v = t ? R === "asc" ? "ascending" : R === "desc" ? "descending" : "none" : void 0;
+  return /* @__PURE__ */ i("th", {
     colSpan: o.colSpan,
-    "aria-sort": h,
-    className: y(n["t-cell"], m && n["hide-header"], d && n["t-cell__actions"], d && !_ && n["t-cell__actions--not-fixed"], d && _ && v && n["t-cell__actions--no-shadow"], D && n["t-cell__fixed"], R && n["t-cell__fixed-right"]),
+    "aria-sort": v,
+    className: _(n["t-cell"], r && n["hide-header"], l && n["t-cell__actions"], l && !p && n["t-cell__actions--not-fixed"], l && p && H && n["t-cell__actions--no-shadow"], g && n["t-cell__fixed"], f && n["t-cell__fixed-right"]),
     style: {
-      ...F({
-        enableResizing: f,
+      ...w({
+        enableResizing: a,
         header: o,
-        tableWidth: s
+        tableWidth: z
       }),
-      ...D && { left: a },
-      ...R && { right: i }
+      ...g && { left: b },
+      ...f && { right: N }
     },
-    children: /* @__PURE__ */ L("div", {
-      className: y("flex items-center justify-start", m ? n["hide-table-header"] : n["show-table-header"], l && n["sortable-column"], o.column.columnDef.className),
-      role: l ? "button" : void 0,
-      tabIndex: l ? 0 : void 0,
+    children: /* @__PURE__ */ F("div", {
+      className: _("flex items-center justify-start", r ? n["hide-table-header"] : n["show-table-header"], t && n["sortable-column"], o.column.columnDef.className),
+      role: t ? "button" : void 0,
+      tabIndex: t ? 0 : void 0,
       onClick: (e) => {
-        const c = o.column.getToggleSortingHandler();
-        !p && c && c(e), x();
+        const s = o.column.getToggleSortingHandler();
+        !m && s && s(e), d();
       },
-      onKeyDown: l ? (e) => {
+      onKeyDown: t ? (e) => {
         if (e.key !== "Enter" && e.key !== " ") return;
         e.preventDefault();
-        const c = o.column.getToggleSortingHandler();
-        !p && c && c(e), x();
+        const s = o.column.getToggleSortingHandler();
+        !m && s && s(e), d();
       } : void 0,
       children: [
-        k(o.column.columnDef.header, o.getContext()),
+        B(o.column.columnDef.header, o.getContext()),
         {
-          asc: /* @__PURE__ */ u(O, { className: n["sort-icon"] }),
-          desc: /* @__PURE__ */ u(j, { className: n["sort-icon"] })
+          asc: /* @__PURE__ */ i(A, { className: n["sort-icon"] }),
+          desc: /* @__PURE__ */ i(k, { className: n["sort-icon"] })
         }[o.column.getIsSorted()] ?? null,
-        r && (f ? !0 : o.id !== H?.id) && o.column.getCanResize() && !A.includes(o.column.id) && /* @__PURE__ */ u("div", {
+        D && (a ? !0 : o.id !== T?.id) && o.column.getCanResize() && !y.includes(o.column.id) && /* @__PURE__ */ i("div", {
           onDoubleClick: () => o.column.resetSize(),
           onMouseDown: (e) => {
-            e.stopPropagation(), S(), o.getResizeHandler()(e), window.addEventListener("mouseup", () => z({
-              styledTableProps: t,
-              header: o
-            }));
+            e.stopPropagation(), u(), o.getResizeHandler()(e);
           },
           onTouchStart: (e) => {
-            e.stopPropagation(), S(), o.getResizeHandler()(e), window.addEventListener("mouseup", () => z({
-              styledTableProps: t,
-              header: o
-            }));
+            e.stopPropagation(), u(), o.getResizeHandler()(e);
           },
           className: `${n.resizer} ${o.column.getIsResizing() ? n.isResizing : ""}`
         })
@@ -63,19 +57,6 @@ function V({ styledTableProps: t, header: o, tableCanResize: r = !1, left: a, ri
     })
   }, o.id);
 }
-function z({ styledTableProps: t, header: o }) {
-  if (t.uniqueKey) {
-    const r = t.uniqueKey, a = localStorage.getItem(r);
-    let i = {};
-    if (a) try {
-      const s = JSON.parse(a);
-      s && typeof s == "object" && !Array.isArray(s) && (i = Object.fromEntries(Object.entries(s).filter((m) => typeof m[1] == "number")));
-    } catch {
-      console.warn("Failed to parse stored dimensions. Resetting."), i = {};
-    }
-    i[o.column.id] = o.column.getSize(), localStorage.setItem(r, JSON.stringify(i));
-  }
-}
 export {
-  V as TableHeaderCell
+  J as TableHeaderCell
 };

package/dist/table/helpers/injectColumns.js

@@ -4,17 +4,17 @@ import { generateExpandColumn as h } from "../components/columns/expandColumn.js
 import { generateActionsColumn as x } from "../components/columns/action-column/actionColumn.js";
 import { generateDndHandleColumn as _ } from "../components/columns/dndHandleColumn.js";
 import { generateShowFullTextColumn as A } from "../components/columns/showTextColumn.js";
-var T = (f) => {
-  const { columns: o, actions: i, customActionsNode: r, headerPin: d = !0, enableRowSelection: l, expandArrow: u, enableDnd: a, customDndColumnProps: c, rowHeight: e, textExpandArrow: m, customActionsColumnProps: p, rowActionsState: C, locale: s } = f, t = o.some((n) => n.fixedLeft === !0);
-  !o.find((n) => n.id === "actions") && (i || r || d) && o.push(x({
+var T = (i) => {
+  const { actions: r, customActionsNode: m, headerPin: d = !0, enableRowSelection: u, expandArrow: f, enableDnd: c, customDndColumnProps: a, rowHeight: e, textExpandArrow: s, customActionsColumnProps: p, rowActionsState: C, locale: l } = i, n = [...i.columns], t = n.some((o) => o.fixedLeft === !0);
+  return !n.find((o) => o.id === "actions") && (r || m || d) && n.push(x({
     headerPin: d,
-    actions: i,
-    customActionsNode: r,
+    actions: r,
+    customActionsNode: m,
     rowHeight: e,
     customActionsColumnProps: p,
     rowActionsState: C,
-    locale: s
-  })), m && !o.find((n) => n.id === "show-full-text") && o.unshift(A(t, e)), u && !m && !o.find((n) => n.id === "expand-column-id") && o.unshift(h(t, e)), a && !o.find((n) => n.id === "dnd-handle") && o.unshift(_(c, e)), l && !o.find((n) => n.id === "select") && o.unshift(D(t, e, s));
+    locale: l
+  })), s && !n.find((o) => o.id === "show-full-text") && n.unshift(A(t, e)), f && !s && !n.find((o) => o.id === "expand-column-id") && n.unshift(h(t, e)), c && !n.find((o) => o.id === "dnd-handle") && n.unshift(_(a, e)), u && !n.find((o) => o.id === "select") && n.unshift(D(t, e, l)), n;
 };
 export {
   T as injectColumns

package/dist/table/hooks/useColumnSizingPersistence.js

@@ -0,0 +1,36 @@
+import { useEffect as a, useMemo as c } from "react";
+var g = ":column-sizing", n = (t) => {
+  if (t)
+    try {
+      const r = JSON.parse(t);
+      return !r || typeof r != "object" || Array.isArray(r) ? void 0 : Object.fromEntries(Object.entries(r).filter((e) => typeof e[1] == "number" && Number.isFinite(e[1]) && e[1] > 0));
+    } catch {
+      return;
+    }
+}, s = (t) => t ? `${t}${g}` : void 0, l = (t) => c(() => {
+  const r = s(t);
+  if (!(!r || !t))
+    try {
+      return n(localStorage.getItem(r)) ?? n(localStorage.getItem(t));
+    } catch {
+      return;
+    }
+}, [t]), u = (t, r) => {
+  const e = s(r), i = t.getState().columnSizing, o = !!t.getState().columnSizingInfo.isResizingColumn;
+  a(() => {
+    if (!(!e || o))
+      try {
+        localStorage.setItem(e, JSON.stringify(i));
+      } catch {
+        return;
+      }
+  }, [
+    i,
+    o,
+    e
+  ]);
+};
+export {
+  u as usePersistColumnSizing,
+  l as usePersistedColumnSizing
+};

package/dist/table/hooks/useColumnVirtualizer.js

@@ -1,6 +1,7 @@
 import "../types.js";
 import { useVirtualizer as d } from "@tanstack/react-virtual";
-function c({ table: o, scrollRef: r, isMobileView: l }) {
+var m = 20;
+function f({ table: o, scrollRef: r, isMobileView: l }) {
   const i = o.getVisibleLeafColumns().filter((e) => !e.columnDef.fixedLeft && !e.columnDef.fixedRight && e.id !== "actions"), n = d({
     count: i.length,
     getScrollElement: () => r?.current ?? null,
@@ -8,7 +9,7 @@ function c({ table: o, scrollRef: r, isMobileView: l }) {
     horizontal: !0,
     overscan: 2
   });
-  if (l) return { columnWindow: {
+  if (l || i.length <= m) return { columnWindow: {
     indexes: i.map((e, u) => u),
     paddingLeft: 0,
     paddingRight: 0
@@ -21,5 +22,5 @@ function c({ table: o, scrollRef: r, isMobileView: l }) {
   } };
 }
 export {
-  c as useColumnVirtualizer
+  f as useColumnVirtualizer
 };

package/dist/table/hooks/useStyledTable.js

@@ -1,59 +1,67 @@
-import { SELECT_COLUMN_ID as z } from "../types.js";
-import { ExpandedRowsFeature as M } from "../custom-features/expand-rows/ExpandRowsFeature.js";
-import { FocusedRowsFeature as P } from "../custom-features/focus-rows/FocusRowsFeature.js";
-import { OrderColumnsFeature as C } from "../custom-features/order-columns/OrderColumnsFeature.js";
-import { usePersistColumnOrder as b } from "../custom-features/order-columns/usePersistColumnOrder.js";
-import { usePersistedColumnOrder as x } from "../custom-features/order-columns/usePersistedColumnOrder.js";
-import { getPersistedPageSizeKey as F, usePersistedPageSize as I } from "./usePersistedPageSize.js";
-import { RowSelectionTooltipFeature as O } from "../custom-features/row-selection-tooltip/RowSelectionTooltipFeature.js";
-import { useEffect as c, useRef as v } from "react";
-import { getCoreRowModel as E, getExpandedRowModel as K, getFilteredRowModel as T, getPaginationRowModel as _, getSortedRowModel as h, useReactTable as L } from "@tanstack/react-table";
-var H = (n) => {
-  const { columns: f, data: S, initialState: d, pageSize: p, enableRowSelection: R, tableInstanceRef: l, locale: w, persistColumnOrderKey: s, uniqueKey: g, ...u } = n, y = x(s), t = I(g) ?? p ?? 50, e = L({
+import { SELECT_COLUMN_ID as y } from "../types.js";
+import { ExpandedRowsFeature as E } from "../custom-features/expand-rows/ExpandRowsFeature.js";
+import { FocusedRowsFeature as I } from "../custom-features/focus-rows/FocusRowsFeature.js";
+import { OrderColumnsFeature as b } from "../custom-features/order-columns/OrderColumnsFeature.js";
+import { usePersistColumnOrder as F } from "../custom-features/order-columns/usePersistColumnOrder.js";
+import { usePersistedColumnOrder as O } from "../custom-features/order-columns/usePersistedColumnOrder.js";
+import { getPersistedPageSizeKey as _, usePersistedPageSize as x } from "./usePersistedPageSize.js";
+import { usePersistColumnSizing as v, usePersistedColumnSizing as K } from "./useColumnSizingPersistence.js";
+import { RowSelectionTooltipFeature as L } from "../custom-features/row-selection-tooltip/RowSelectionTooltipFeature.js";
+import { useEffect as R, useRef as T } from "react";
+import { getCoreRowModel as N, getExpandedRowModel as U, getFilteredRowModel as h, getPaginationRowModel as A, getSortedRowModel as D, useReactTable as V } from "@tanstack/react-table";
+var Z = 100, ee = (n) => {
+  const { columns: p, data: z, initialState: a, pageSize: C, enableRowSelection: w, tableInstanceRef: d, locale: M, persistColumnOrderKey: u, uniqueKey: l, defaultColumn: g, ...m } = n, P = O(u), S = n.enableColumnResizing ? l : void 0, c = K(S), t = x(l) ?? C ?? 50, e = V({
     _features: [
-      M,
-      P,
-      C,
-      O
+      E,
+      I,
+      b,
+      L
     ],
-    columns: f,
-    data: S,
-    meta: { locale: w ?? "en" },
+    columns: p,
+    data: z,
+    meta: { locale: M ?? "en" },
     initialState: {
       pagination: {
         pageIndex: 0,
         pageSize: t
       },
       columnVisibility: {
-        ...d?.columnVisibility,
-        [z]: !1
+        ...a?.columnVisibility,
+        [y]: !1
       },
-      columnOrder: y,
-      ...d
+      columnOrder: P,
+      ...a,
+      ...c && { columnSizing: {
+        ...a?.columnSizing,
+        ...c
+      } }
     },
-    enableRowSelection: R,
-    getCoreRowModel: E(),
-    getExpandedRowModel: K(),
-    getFilteredRowModel: T(),
-    getSortedRowModel: h(),
-    getPaginationRowModel: _(),
-    getRowId: u.getRowId ?? ((r, N, m) => m ? [m.id, r.id].join(".") : r.id.toString()),
-    defaultColumn: n.enableResizing ? { size: void 0 } : void 0,
-    ...u
+    enableRowSelection: w,
+    getCoreRowModel: N(),
+    getExpandedRowModel: U(),
+    getFilteredRowModel: h(),
+    getSortedRowModel: D(),
+    getPaginationRowModel: A(),
+    getRowId: m.getRowId ?? ((r, j, f) => f ? [f.id, r.id].join(".") : r.id.toString()),
+    defaultColumn: n.enableColumnResizing ? {
+      minSize: Z,
+      ...g
+    } : g,
+    ...m
   });
-  l && (l.current = e), b(e, s);
-  const o = F(g), i = e.getState().pagination?.pageSize, a = v(void 0);
-  return c(() => {
-    a.current = void 0, e.getState().pagination?.pageSize !== t && (e.setPageIndex(0), e.setPageSize(t));
+  d && (d.current = e), F(e, u), v(e, S);
+  const o = _(l), i = e.getState().pagination?.pageSize, s = T(void 0);
+  return R(() => {
+    s.current = void 0, e.getState().pagination?.pageSize !== t && (e.setPageIndex(0), e.setPageSize(t));
   }, [
     t,
     o,
     e
-  ]), c(() => {
+  ]), R(() => {
     if (!(!o || i == null)) {
-      if (a.current !== o) {
+      if (s.current !== o) {
         if (i !== t) return;
-        a.current = o;
+        s.current = o;
       }
       try {
         localStorage.setItem(o, JSON.stringify(i));
@@ -68,5 +76,5 @@ var H = (n) => {
   ]), { table: e };
 };
 export {
-  H as useStyledTable
+  ee as useStyledTable
 };

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.45.1",
+    "version": "3.46.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",