@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/data/DataTable.cjs

@@ -7,6 +7,7 @@ const densityProvider = require("../hooks/density-provider.cjs");
 const useTheme = require("../hooks/use-theme.cjs");
 const utils = require("../lib/utils.cjs");
 const Modal = require("../overlay/Modal.cjs");
+const modalStack = require("../overlay/modalStack.cjs");
 const FilterBar = require("../components/FilterBar.cjs");
 const filterBarUtils = require("../components/filter-bar-utils.cjs");
 const dataTableUtils = require("./data-table-utils.cjs");
@@ -72,6 +73,9 @@ function DataTableInner({
   onGlobalFilterChange,
   globalFilterPlaceholder = "Search all columns…",
   defaultSort,
+  sort: controlledSort,
+  onSortChange,
+  manualSort = false,
   filterBarProps,
   externalSearch,
   externalTimeRange,
@@ -204,22 +208,18 @@ function DataTableInner({
     persistDensity,
     resolvedDensityStorageKey
   ]);
+  const closeFloatingMenus = react.useCallback(() => {
+    setColumnMenu(null);
+    setHeaderFilterMenu(null);
+  }, []);
+  modalStack.useEscapeLayer(Boolean(columnMenu || headerFilterMenu), closeFloatingMenus);
   react.useEffect(() => {
     if (!columnMenu && !headerFilterMenu) return;
-    const close = () => {
-      setColumnMenu(null);
-      setHeaderFilterMenu(null);
-    };
-    const closeOnEscape = (event) => {
-      if (event.key === "Escape") close();
-    };
-    document.addEventListener("click", close);
-    document.addEventListener("keydown", closeOnEscape);
+    document.addEventListener("click", closeFloatingMenus);
     return () => {
-      document.removeEventListener("click", close);
-      document.removeEventListener("keydown", closeOnEscape);
+      document.removeEventListener("click", closeFloatingMenus);
     };
-  }, [columnMenu, headerFilterMenu]);
+  }, [closeFloatingMenus, columnMenu, headerFilterMenu]);
   const rows = react.useMemo(
     () => data.map((row, index) => ({
       id: (getRowId == null ? void 0 : getRowId(row, index)) ?? String(index),
@@ -274,20 +274,20 @@ function DataTableInner({
   const densityOverride = densityControlled ? density : localDensityOverride;
   const timeRangeColumn = react.useMemo(() => {
     if (filterBarProps == null ? void 0 : filterBarProps.timeRange) return null;
-    return visibleColumns.find(
+    return effectiveColumns.find(
       (column) => {
         var _a;
         return column.kind === "timestamp" && column.filterable !== false && ((_a = column.timestamp) == null ? void 0 : _a.autoRangeFilter) !== false;
       }
     ) ?? null;
-  }, [filterBarProps == null ? void 0 : filterBarProps.timeRange, visibleColumns]);
+  }, [effectiveColumns, filterBarProps == null ? void 0 : filterBarProps.timeRange]);
   const filterableColumns = react.useMemo(
-    () => visibleColumns.filter((column) => {
+    () => effectiveColumns.filter((column) => {
       if (column.filterable === false) return false;
       if (column.kind === "timestamp") return false;
       return true;
     }),
-    [visibleColumns]
+    [effectiveColumns]
   );
   const generatedFilters = react.useMemo(() => {
     if (!autoFilter || loading) return [];
@@ -544,7 +544,10 @@ function DataTableInner({
   );
   const { sorted, sort, toggle } = useSort.useSort(filteredRows, {
     defaultDir: (defaultSort == null ? void 0 : defaultSort.dir) ?? "asc",
+    manual: manualSort,
     resolvers: sortResolvers,
+    ...controlledSort !== void 0 ? { sort: controlledSort } : {},
+    ...onSortChange ? { onSortChange } : {},
     ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
   });
   const revealEnabled = !!clientReveal && !pagination;
@@ -800,7 +803,10 @@ function DataTableInner({
                           }
                         },
                         children: visibleColumns.map((column, index) => {
-                          const rawValue = dataTableUtils.resolveColumnValue(record.row, column);
+                          const rawValue = dataTableUtils.resolveColumnValue(
+                            record.row,
+                            column
+                          );
                           let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
                           if (column.kind === "tags" && filterActionsByColumn[column.key]) {
                             content = /* @__PURE__ */ jsxRuntime.jsx(