@geomak/ui 1.7.2 → 1.7.4

package/dist/index.cjs

@@ -1723,9 +1723,7 @@ var DEFAULT_PAGINATION = {
   pickerOptions: DEFAULT_PICKER
 };
 var DEFAULT_EXPAND = {
-  enabled: false,
-  expandIcon: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-  expandComponent: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+  enabled: false
 };
 function createDatasets(rows, perPage) {
   if (!perPage) return [rows.slice()];
@@ -1735,78 +1733,95 @@ function createDatasets(rows, perPage) {
   }
   return all;
 }
-function TableHeader({ columns }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-surface-raised min-h-[50px] border-b border-b-border flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "flex w-full items-center justify-center", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
-    {
-      className: "text-center w-full text-[13px] text-foreground",
-      children: col.label
-    },
-    col.key
-  )) }) });
+var defaultGetRowKey = (_row, index) => index;
+var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
+function TableHeader({
+  columns,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+    hasExpand && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", className: "w-9" }),
+    columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        scope: "col",
+        className: `${cellAlign(col.align)} text-sm font-semibold text-foreground py-3 px-3`,
+        style: col.width != null ? { width: col.width } : void 0,
+        children: col.label
+      },
+      col.key
+    ))
+  ] }) });
 }
+var DefaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: "w-5 h-5 text-foreground-muted",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
 function TableBody({
   columns,
   rows,
-  expandRow
+  expandRow,
+  getRowKey
 }) {
-  const [visibleRows, setVisibleRows] = React9.useState({});
+  const [expanded, setExpanded] = React9.useState(() => /* @__PURE__ */ new Set());
   const toggleRow = (rowKey) => {
-    setVisibleRows((prev) => ({
-      ...prev,
-      [rowKey]: { visible: !prev[rowKey]?.visible }
-    }));
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowKey)) next.delete(rowKey);
+      else next.add(rowKey);
+      return next;
+    });
   };
-  React9.useEffect(() => {
-    if (rows.length && Object.keys(visibleRows).length === 0) {
-      const initial = {};
-      rows.forEach((row) => {
-        initial[row.key] = { visible: false };
-      });
-      setVisibleRows(initial);
-    }
-  }, [rows]);
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "tr",
-      {
-        className: `border-b border-b-border flex min-w-max hover:bg-surface-raised transition-all duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
-        children: [
-          expandRow.enabled && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              onClick: () => toggleRow(row.key),
-              className: `p-2 cursor-pointer origin-center transition-all duration-200 ${visibleRows[row.key]?.visible ? "rotate-180" : "rotate-0"}`,
-              children: expandRow.expandIcon ?? /* PlusCircle */
-              /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z", clipRule: "evenodd" }) })
-            }
-          ) }),
-          columns.map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "td",
-            {
-              className: `text-center min-h-[40px] w-full flex items-center justify-center p-1 border-border ${index !== columns.length - 1 ? "border-r-2" : ""}`,
-              children: "component" in col && col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
-            },
-            index
-          ))
-        ]
-      }
-    ),
-    expandRow.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-      "tr",
-      {
-        className: `overflow-hidden w-full transition-all duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "p-0 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `overflow-hidden w-full transition-[max-height] duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-            children: expandRow.expandComponent?.(row)
-          }
-        ) })
-      },
-      `extra-${i}`
-    )
-  ] }, row.key)) });
+  const hasExpand = !!expandRow.enabled;
+  const expandColCount = columns.length + (hasExpand ? 1 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
+    const rowKey = getRowKey(row, i);
+    const isExpanded = expanded.has(rowKey);
+    return /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          className: `border-b border-border hover:bg-surface-raised transition-colors duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
+          children: [
+            hasExpand && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-0 align-middle w-9", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleRow(rowKey),
+                "aria-expanded": isExpanded,
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                className: `w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-surface/80 transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded ? "rotate-180" : ""}`,
+                children: expandRow.expandIcon ?? DefaultExpandIcon
+              }
+            ) }),
+            columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: `${cellAlign(col.align)} text-sm text-foreground py-2 px-3 align-middle`,
+                children: col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
+              },
+              col.key
+            ))
+          ]
+        }
+      ),
+      hasExpand && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: expandColCount, className: "p-0 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: expandRow.expandComponent?.(row) }) }) })
+    ] }, rowKey);
+  }) });
 }
 function Pagination({
   activePage,
@@ -1829,29 +1844,27 @@ function Pagination({
     }
   }, [serverSide, options.perPage, picker]);
   const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick, icon });
-  const chevronRight = (color) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = (color) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
-  const disabledColor = "var(--color-foreground-muted)";
-  const enabledColor = "var(--color-foreground)";
+  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end pt-2", children: [
     navBtn(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight }),
       activePage === 0,
       () => onPageChange(0)
     ),
     navBtn(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: chevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: chevronRight }),
       activePage === 0,
       () => activePage > 0 && onPageChange(activePage - 1)
     ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-surface-raised rounded-lg ml-2 mr-2 shadow-sm p-2 w-10 text-center select-none text-foreground", children: activePage + 1 }),
     navBtn(
-      chevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      chevronRight,
       activePage === maxPage,
       () => activePage < maxPage && onPageChange(activePage + 1)
     ),
     navBtn(
-      doubleChevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      doubleChevronRight,
       activePage === maxPage,
       () => onPageChange(maxPage)
     ),
@@ -1876,6 +1889,7 @@ function Pagination({
 function Table({
   columns = [],
   rows = [],
+  getRowKey = defaultGetRowKey,
   pagination = DEFAULT_PAGINATION,
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
@@ -1888,8 +1902,20 @@ function Table({
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
   const [activePage, setActivePage] = React9.useState(0);
-  const [datasets, setDatasets] = React9.useState([]);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
+  const filteredRows = React9.useMemo(() => {
+    if (isServerSide || !searchTerm) return rows;
+    const term = searchTerm.toLowerCase();
+    return rows.filter(
+      (row) => Object.values(row).some(
+        (v) => v != null && String(v).toLowerCase().includes(term)
+      )
+    );
+  }, [rows, searchTerm, isServerSide]);
+  const datasets = React9.useMemo(() => {
+    if (isServerSide) return [rows];
+    return createDatasets(filteredRows, pagination.enabled ? perPage : null);
+  }, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
   const MAX_PAGE = React9.useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
@@ -1898,32 +1924,22 @@ function Table({
   }, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
   const currentPageRows = React9.useMemo(() => {
     if (isServerSide) return rows;
-    return datasets.length ? datasets[activePage] ?? [] : [];
+    return datasets[activePage] ?? [];
   }, [isServerSide, rows, datasets, activePage]);
   React9.useEffect(() => {
-    if (pagination.enabled && !isServerSide) setPerPage(pagination.perPage ?? 15);
-  }, [pagination, isServerSide]);
+    if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
+      setPerPage(pagination.perPage);
+    }
+  }, [pagination.enabled, pagination.perPage, isServerSide]);
   React9.useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  React9.useEffect(() => {
-    if (isServerSide) return;
-    setDatasets(createDatasets(rows, pagination.enabled ? perPage : null));
-  }, [rows, perPage, pagination, isServerSide]);
   React9.useEffect(() => {
     if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
       setActivePage(pagination.page - 1);
   }, [isServerSide, pagination.page]);
   const onSearchChange = (e) => {
-    const term = e.target.value;
-    setSearchTerm(term);
-    if (isServerSide) return;
-    const filtered = rows.filter(
-      (row) => Object.values(row).some(
-        (v) => !!v && String(v).toLowerCase().includes(term.toLowerCase())
-      )
-    );
-    setDatasets(createDatasets(filtered, pagination.enabled ? perPage : null));
+    setSearchTerm(e.target.value);
     setActivePage(0);
   };
   const onPaginationChange = (perPageValue) => {
@@ -1962,9 +1978,17 @@ function Table({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { columns, rows: currentPageRows, expandRow })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TableBody,
+        {
+          columns,
+          rows: currentPageRows,
+          expandRow,
+          getRowKey
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
   ] });
@@ -2336,8 +2360,24 @@ function toCssVars(theme) {
   }
   return out;
 }
+var CSS_VALUE_REJECT_RE = /[;{}<>\\]|\*\/|\/\*/;
+function isSafeCssValue(v) {
+  if (typeof v !== "string") return false;
+  if (v.length > 500) return false;
+  return !CSS_VALUE_REJECT_RE.test(v);
+}
 function varsToStyleString(vars2) {
-  return Object.entries(vars2).map(([k, v]) => `${k}: ${v};`).join(" ");
+  const out = [];
+  for (const [k, v] of Object.entries(vars2)) {
+    if (!isSafeCssValue(v)) {
+      console.warn(
+        `[ThemeProvider] Dropping unsafe value for "${k}". Theme values may contain letters, digits, and CSS punctuation but must not include: ; { } < > \\ /* */`
+      );
+      continue;
+    }
+    out.push(`${k}: ${v};`);
+  }
+  return out.join(" ");
 }
 function ThemeProvider({
   theme,