@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/split-pane/provider/SplitPaneContext.cjs

@@ -1,87 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const SplitPaneContext = React__default.default.createContext(null);
-function clamp(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}
-function readStoredSize(key) {
-  try {
-    const raw = localStorage.getItem(key);
-    if (!raw) return null;
-    const num = Number(raw);
-    return Number.isFinite(num) ? num : null;
-  } catch {
-    return null;
-  }
-}
-function writeStoredSize(key, value) {
-  try {
-    localStorage.setItem(key, String(Math.round(value)));
-  } catch {
-  }
-}
-function useSplitPaneContext() {
-  const ctx = React__default.default.useContext(SplitPaneContext);
-  if (!ctx) throw new Error("SplitPane components must be used within <SplitPane />");
-  return ctx;
-}
-function SplitPaneProvider({
-  children,
-  direction,
-  initialPrimarySize,
-  minPrimarySize,
-  minSecondarySize,
-  storageKey
-}) {
-  const containerRef = React.useRef(null);
-  const [primarySize, setPrimarySize] = React.useState(initialPrimarySize);
-  React.useEffect(() => {
-    if (!storageKey) return;
-    const stored = readStoredSize(storageKey);
-    if (stored === null) return;
-    setPrimarySize(stored);
-  }, [storageKey]);
-  React.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const clampToContainer = () => {
-      const rect = el.getBoundingClientRect();
-      const total = direction === "horizontal" ? rect.width : rect.height;
-      if (!Number.isFinite(total) || total <= 0) return;
-      const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
-      setPrimarySize((prev) => clamp(prev, minPrimarySize, maxPrimary));
-    };
-    clampToContainer();
-    const ro = new ResizeObserver(() => clampToContainer());
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [direction, minPrimarySize, minSecondarySize]);
-  React.useEffect(() => {
-    if (!storageKey) return;
-    writeStoredSize(storageKey, primarySize);
-  }, [storageKey, primarySize]);
-  const value = React.useMemo(
-    () => ({
-      direction,
-      primarySize,
-      setPrimarySize,
-      minPrimarySize,
-      minSecondarySize,
-      containerRef,
-      storageKey
-    }),
-    [direction, primarySize, minPrimarySize, minSecondarySize, storageKey]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContext.Provider, { value, children });
-}
-
-exports.SplitPaneContext = SplitPaneContext;
-exports.SplitPaneProvider = SplitPaneProvider;
-exports.useSplitPaneContext = useSplitPaneContext;

package/dist/components/table/Table.cjs

@@ -1,249 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var Checkbox = require('../checkbox/Checkbox');
-var styles = require('./Table.module.css');
-var useViewportFill = require('../../hooks/useViewportFill');
-var Pagination = require('../pagination/Pagination');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-var severity = require('../../constants/severity');
-var EmptyState = require('./components/empty-state/EmptyState');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Table({
-  data,
-  columns,
-  selectedRows,
-  onRowSelect,
-  selectionMode = "single",
-  onSortChange,
-  onRowClick,
-  sortById,
-  sortDirection,
-  dataKey,
-  headerExtras,
-  columnStyles,
-  headerBelowRow,
-  striped,
-  fillViewport = false,
-  viewportBottomOffset = 0,
-  viewportMin = 120,
-  viewportIncludeMarginTop = false,
-  take,
-  skip,
-  paginationPlacement = "bottom",
-  totalItemsCount,
-  onPageChange,
-  loading,
-  variant = "primary",
-  size = "md",
-  getRowSeverity,
-  showFirstLast = false,
-  allRowsSelected,
-  onSelectAllRows,
-  viewMode,
-  emptyConfig
-}) {
-  const filteredColumns = react.useMemo(() => columns.filter((c) => !c.hidden), [columns]);
-  const handlePageChange = react.useCallback(
-    (e) => {
-      onPageChange == null ? void 0 : onPageChange(e);
-    },
-    [onPageChange]
-  );
-  const getColStyle = (columnId, alignment, verticalAlignment) => {
-    const baseStyle = columnStyles == null ? void 0 : columnStyles[columnId];
-    return {
-      ...baseStyle != null ? baseStyle : {},
-      ...alignment === "right" && { fontVariantNumeric: "tabular-nums" },
-      verticalAlign: verticalAlignment != null ? verticalAlignment : "top",
-      textAlign: alignment != null ? alignment : "left"
-    };
-  };
-  const scrollRef = react.useRef(null);
-  const { style: viewportStyle } = useViewportFill.useViewportFill(scrollRef, {
-    bottomOffset: viewportBottomOffset + 60,
-    min: viewportMin,
-    includeMarginTop: viewportIncludeMarginTop
-  });
-  const tableEl = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles__default.default.table} ${styles__default.default[variant]} ${styles__default.default[size]}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-          selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("th", { className: `${styles__default.default.fitContent} ${styles__default.default.th}`, children: selectionMode === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox.Checkbox,
-            {
-              size: "sm",
-              variant: "primary",
-              checked: allRowsSelected,
-              onChange: (checked) => onSelectAllRows == null ? void 0 : onSelectAllRows(checked)
-            }
-          ) : null }),
-          filteredColumns.map((column, index) => {
-            const isActiveSort = sortById === column.id;
-            const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
-            const toggleSort = () => {
-              if (!onSortChange || !column.sortable) return;
-              const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
-              onSortChange(column, nextDir);
-            };
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "th",
-              {
-                style: getColStyle(column.id, column.align, "middle"),
-                "aria-sort": ariaSort,
-                className: `${styles__default.default.th} ${column.sortable ? styles__default.default.sortable : ""} `,
-                onClick: (e) => {
-                  if (!column.sortable) return;
-                  if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
-                  toggleSort();
-                },
-                role: column.sortable ? "button" : void 0,
-                tabIndex: column.sortable ? 0 : void 0,
-                onKeyDown: (e) => {
-                  if (!column.sortable) return;
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    toggleSort();
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thInner, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thLabel, children: typeof column.header === "function" ? column.header() : column.header }),
-                  column.sortable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
-                    isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
-                    isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending }),
-                    !isActiveSort && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: `${styles__default.default.descending} ${styles__default.default.inActiveSort}` })
-                  ] }),
-                  headerExtras == null ? void 0 : headerExtras({ column, index })
-                ] }) })
-              },
-              column.id
-            );
-          })
-        ] }),
-        headerBelowRow ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: styles__default.default.headerBelowRow, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
-      ] }),
-      loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          style: getColStyle(column.id, column.align),
-          className: `${styles__default.default.tableCell} ${column.fitContent ? "fitContent" : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" })
-        },
-        `${column.id}-${colIndex}`
-      )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => {
-        const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "tr",
-          {
-            tabIndex: onRowClick ? 0 : -1,
-            onClick: (e) => {
-              const rowId = row[dataKey];
-              const isModifierClick = e.metaKey || e.ctrlKey;
-              const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
-              if (isModifierClick && canSelect) {
-                e.preventDefault();
-                e.stopPropagation();
-                const isSelected = selectedRows.has(rowId);
-                if (selectionMode === "single") {
-                  onRowSelect(rowId, !isSelected);
-                } else {
-                  onRowSelect(rowId, !isSelected);
-                }
-                return;
-              }
-              onRowClick == null ? void 0 : onRowClick(row);
-            },
-            style: {
-              ["--row-severity-color"]: rowSeverity ? severity.SeverityBgColor[rowSeverity] : void 0
-            },
-            className: `${onRowClick ? styles__default.default.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles__default.default.selectedRow : ""} ${rowSeverity ? styles__default.default.severity : ""}`,
-            children: [
-              selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "fitContent", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
-                Checkbox.Checkbox,
-                {
-                  variant: "primary",
-                  checked: selectedRows.has(row[dataKey]),
-                  size: "sm",
-                  onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
-                }
-              ) }),
-              filteredColumns.map((column) => {
-                var _a, _b;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
-                  {
-                    style: getColStyle(column.id, column.align, column.verticalAlign),
-                    className: `${styles__default.default.tableCell} ${column.fitContent ? "fitContent" : ""} ${column.allowWrap || (selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) || viewMode === "comfortable" ? "" : styles__default.default.nowrap} `,
-                    children: column.render ? column.render(row) || ((_a = column.emptyPlaceholder) != null ? _a : "") : column.accessor ? row[column.accessor] || ((_b = column.emptyPlaceholder) != null ? _b : "") : null
-                  },
-                  column.id
-                );
-              })
-            ]
-          },
-          `tableRow-${String(row[dataKey])}-${rowIndex}`
-        );
-      }) })
-    ] }),
-    !data.length && /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig })
-  ] });
-  if (fillViewport) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "20px",
-          flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
-          position: "relative"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, style: viewportStyle, className: styles__default.default.tableScroll, children: tableEl }),
-          onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
-            Pagination.Pagination,
-            {
-              itemsCount: totalItemsCount,
-              take,
-              skip,
-              onPageChange: handlePageChange,
-              showFirstLast
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "20px",
-        flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
-        position: "relative"
-      },
-      children: [
-        tableEl,
-        onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
-          Pagination.Pagination,
-          {
-            itemsCount: totalItemsCount,
-            take,
-            skip,
-            onPageChange: handlePageChange
-          }
-        )
-      ]
-    }
-  );
-}
-
-exports.Table = Table;

package/dist/components/table/components/column-resizer/ColumnResizer.cjs

@@ -1,22 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./ColumnResizer.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "span",
-  {
-    className: styles__default.default.resizer,
-    onMouseDown: handler,
-    onTouchStart: handler,
-    role: "separator",
-    "aria-label": `Resize ${id}`
-  }
-);
-var ColumnResizer_default = ColumnResizer;
-
-module.exports = ColumnResizer_default;

package/dist/components/table/components/empty-state/EmptyState.cjs

@@ -1,52 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../../../button/Button');
-var Headline = require('../../../headline/Headline');
-var lucideReact = require('lucide-react');
-var styles = require('./EmptyState.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const defaultEmptyConfig = {
-  enabled: true,
-  title: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 3, children: "Hov, der er ingen data" }),
-  description: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pr\xF8v at \xE6ndre dine filtre eller tilf\xF8je data." }),
-  showBack: true,
-  showRefresh: true,
-  backLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}),
-    "Tilbage"
-  ] }),
-  refreshLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
-    "Indl\xE6s igen"
-  ] }),
-  className: "dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow "
-};
-function TableEmptyState({ config }) {
-  const merged = {
-    ...defaultEmptyConfig,
-    ...config != null ? config : {}
-  };
-  if (!merged.enabled) return null;
-  const showBack = merged.showBack && typeof merged.onBack === "function";
-  const showRefresh = merged.showRefresh && typeof merged.onRefresh === "function";
-  const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${merged.className} ${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-flex-column dbc-gap-sm dbc-items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchX, { className: styles__default.default.icon }),
-      merged.title,
-      merged.description
-    ] }),
-    hasAnyActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [
-      merged.actions,
-      showBack && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: merged.onBack, className: "dbc-mr-xxs", children: merged.backLabel }),
-      showRefresh && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: merged.onRefresh, children: merged.refreshLabel })
-    ] })
-  ] });
-}
-
-exports.TableEmptyState = TableEmptyState;

package/dist/components/table/components/table-settings/TableSettings.cjs

@@ -1,32 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../../../button/Button');
-var Popover = require('../../../popover/Popover');
-var Menu = require('../../../menu/Menu');
-var lucideReact = require('lucide-react');
-
-function TableSettings({
-  viewMode,
-  handleChangeViewMode
-}) {
-  const handleViewModeChange = (mode, close) => {
-    handleChangeViewMode("compact" );
-    close == null ? void 0 : close();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
-    {
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
-        icon
-      ] }),
-      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "compact", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => handleViewModeChange("compact", close), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsDownUp, {}),
-        "Kompakt"
-      ] }) }) })
-    }
-  );
-}
-
-exports.TableSettings = TableSettings;

package/dist/components/table/tanstack.cjs

@@ -1,193 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var reactTable = require('@tanstack/react-table');
-var Table = require('./Table');
-var ColumnResizer = require('./components/column-resizer/ColumnResizer');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
-
-function getColumnId(def, index) {
-  const d = def;
-  if (d.id != null && String(d.id).length) return String(d.id);
-  if (d.accessorKey != null && String(d.accessorKey).length) return String(d.accessorKey);
-  return `col_${index}`;
-}
-function mapDefsToColumnItems(defs) {
-  return defs.map((def, index) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-    const id = getColumnId(def, index);
-    const accessorKey = def.accessorKey;
-    const accessorFn = def.accessorFn;
-    const cell = def.cell;
-    let render;
-    if (typeof cell === "function") {
-      render = (row) => cell({
-        row: { original: row },
-        getValue: () => accessorKey != null ? row[accessorKey] : accessorFn ? accessorFn(row) : void 0
-      });
-    } else if (accessorFn) {
-      render = (row) => accessorFn(row);
-    } else if (accessorKey != null) {
-      render = (row) => row[accessorKey];
-    } else {
-      render = () => null;
-    }
-    return {
-      id,
-      header: def.header,
-      accessor: accessorKey,
-      sortable: (_a = def.enableSorting) != null ? _a : !!accessorKey,
-      render,
-      hidden: (_c = (_b = def.meta) == null ? void 0 : _b.hidden) != null ? _c : false,
-      align: (_e = (_d = def.meta) == null ? void 0 : _d.align) != null ? _e : void 0,
-      verticalAlign: (_g = (_f = def.meta) == null ? void 0 : _f.verticalAlign) != null ? _g : void 0,
-      fitContent: (_i = (_h = def.meta) == null ? void 0 : _h.fitContent) != null ? _i : false,
-      emptyPlaceholder: (_k = (_j = def.meta) == null ? void 0 : _j.emptyPlaceholder) != null ? _k : "-",
-      allowWrap: (_m = (_l = def.meta) == null ? void 0 : _l.allowWrap) != null ? _m : false,
-      fillWidth: (_o = (_n = def.meta) == null ? void 0 : _n.fillWidth) != null ? _o : false,
-      severity: (_q = (_p = def.meta) == null ? void 0 : _p.severity) != null ? _q : void 0
-    };
-  });
-}
-function TanstackTable(props) {
-  var _a, _b;
-  const { data, dataKey, columns, filterable = [], onSortingChange, ...tableProps } = props;
-  const [sorting, setSorting] = React__namespace.useState([]);
-  const [columnFilters, setColumnFilters] = React__namespace.useState([]);
-  const [columnSizing, setColumnSizing] = React__namespace.useState({});
-  const table = reactTable.useReactTable({
-    data,
-    columns,
-    state: { sorting, columnFilters, columnSizing },
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnSizingChange: setColumnSizing,
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getSortedRowModel: reactTable.getSortedRowModel(),
-    getFilteredRowModel: reactTable.getFilteredRowModel(),
-    enableColumnResizing: true,
-    columnResizeMode: "onChange",
-    defaultColumn: {
-      enableResizing: true,
-      minSize: 80,
-      size: 180,
-      maxSize: 800
-    }
-  });
-  const columnItems = React__namespace.useMemo(() => mapDefsToColumnItems(columns), [columns]);
-  const visibleData = React__namespace.useMemo(
-    () => table.getRowModel().rows.map((r) => r.original),
-    [table, data]
-  );
-  const s = (_a = table.getState().sorting) == null ? void 0 : _a[0];
-  const sortById = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
-  const sortDirection = s ? s.desc ? "desc" : "asc" : null;
-  const gridTemplateColumns = React__namespace.useMemo(() => {
-    return columnItems.filter((ci) => !ci.hidden).map((ci) => {
-      var _a2;
-      const col = table.getColumn(ci.id);
-      const w = (_a2 = col == null ? void 0 : col.getSize) == null ? void 0 : _a2.call(col);
-      if (ci.fillWidth) return "1fr";
-      if (ci.fitContent) return "1%";
-      return `${w != null ? w : 180}px`;
-    }).join(" ");
-  }, [columnItems, table, table.getState().columnSizing]);
-  const columnStyles = React__namespace.useMemo(() => {
-    const styles = {};
-    for (const c of table.getAllLeafColumns()) {
-      const id = c.id;
-      const ci = columnItems.find((x) => x.id === id);
-      if (ci == null ? void 0 : ci.fillWidth) {
-        styles[id] = { width: "auto", minWidth: 0 };
-      } else if (ci == null ? void 0 : ci.fitContent) {
-        styles[id] = { width: "1%", whiteSpace: "nowrap" };
-      } else {
-        const w = c.getSize();
-        styles[id] = { width: w, minWidth: w, maxWidth: w };
-      }
-    }
-    return styles;
-  }, [table, table.getState().columnSizing, columnItems]);
-  const headerExtras = React__namespace.useCallback(
-    ({ index }) => {
-      var _a2, _b2, _c, _d;
-      const headerGroups = table.getHeaderGroups();
-      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-      const header = leafHeaders[index];
-      if (!header) return null;
-      const canResize = (_c = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
-      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
-      if (!canResize || !handler) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler });
-    },
-    [table]
-  );
-  const headerBelowRow = React__namespace.useMemo(() => {
-    if (!(filterable == null ? void 0 : filterable.length)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns, gap: 8 }, children: columnItems.filter((ci) => !ci.hidden).map((ci) => {
-      var _a2;
-      const id = ci.id;
-      const isFilterable = filterable.includes(id);
-      if (!isFilterable) return /* @__PURE__ */ jsxRuntime.jsx("div", {}, id);
-      const col = table.getColumn(id);
-      const value = (_a2 = col == null ? void 0 : col.getFilterValue()) != null ? _a2 : "";
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          value,
-          placeholder: `Filter ${String(ci.header)}`,
-          onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
-          style: { width: "100%", padding: "4px 6px" }
-        },
-        id
-      );
-    }) });
-  }, [columnItems, filterable, table, table.getState().columnFilters, gridTemplateColumns]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Table.Table,
-    {
-      ...tableProps,
-      dataKey,
-      data: visibleData,
-      columns: columnItems,
-      sortById,
-      sortDirection,
-      onSortChange: (col, dir) => {
-        var _a2, _b2, _c;
-        const id = String(col.id);
-        if (!id) return;
-        if (!dir) table.setSorting([]);
-        else table.setSorting([{ id, desc: dir === "desc" }]);
-        onSortingChange == null ? void 0 : onSortingChange((_c = (_b2 = (_a2 = table.getState().sorting) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) != null ? _c : null, dir);
-      },
-      headerExtras,
-      columnStyles,
-      headerBelowRow
-    }
-  );
-}
-
-exports.TanstackTable = TanstackTable;