@dbcdk/react-components 0.0.103 → 0.0.105

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

@@ -0,0 +1,137 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ListChevronsDownUp, Settings } from 'lucide-react';
+import { useMemo } from 'react';
+import { Button } from '../../../button/Button';
+import { Menu } from '../../../menu/Menu';
+import { Popover } from '../../../popover/Popover';
+
+function TableSettings({
+  viewMode,
+  handleChangeViewMode,
+  columns = [],
+  visibleColumnIds = [],
+  onVisibleColumnIdsChange,
+  columnsLabel = "Kolonner",
+  allPresetLabel = "Alle",
+  standardPresetLabel = "Standard",
+  buttonSize = "sm",
+  additionalSettings
+}) {
+  const handleViewModeChange = (mode, close) => {
+    handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
+    close == null ? void 0 : close();
+  };
+  const hideableColumns = useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
+  const allPresetIds = useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
+  const standardPresetIds = useMemo(
+    () => hideableColumns.filter((c) => {
+      var _a;
+      return ((_a = c.meta) == null ? void 0 : _a.hidden) !== true;
+    }).map((c) => c.id),
+    [hideableColumns]
+  );
+  const visibleSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
+  const visibleCount = useMemo(() => {
+    return hideableColumns.reduce((acc, c) => {
+      var _a;
+      return acc + (visibleSet.has((_a = c.id) != null ? _a : "") ? 1 : 0);
+    }, 0);
+  }, [hideableColumns, visibleSet]);
+  const setVisibleIds = (nextIds) => {
+    if (!onVisibleColumnIdsChange) return;
+    const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
+    onVisibleColumnIdsChange(
+      safe.filter((id) => typeof id === "string" && Boolean(id))
+    );
+  };
+  const toggleColumn = (id, nextVisible) => {
+    const next = new Set(visibleColumnIds);
+    if (nextVisible) next.add(id);
+    else next.delete(id);
+    setVisibleIds(Array.from(next));
+  };
+  const isAllActive = useMemo(() => {
+    if (!hideableColumns.length) return false;
+    return hideableColumns.every((c) => c.id && visibleSet.has(c.id));
+  }, [hideableColumns, visibleSet]);
+  const isStandardActive = useMemo(() => {
+    if (!hideableColumns.length) return false;
+    const std = new Set(standardPresetIds);
+    return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
+  }, [hideableColumns, visibleSet, standardPresetIds]);
+  const presetRadioName = "table-columns-preset";
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { size: buttonSize, onClick, type: "button", children: [
+        /* @__PURE__ */ jsx(Settings, {}),
+        icon
+      ] }),
+      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+        additionalSettings == null ? void 0 : additionalSettings(close),
+        /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
+          /* @__PURE__ */ jsx(ListChevronsDownUp, {}),
+          "Ombryd tekst"
+        ] }) }),
+        hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Menu.Separator, {}),
+          /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
+          /* @__PURE__ */ jsx(
+            Menu.RadioItem,
+            {
+              name: presetRadioName,
+              value: "all",
+              checked: isAllActive,
+              label: allPresetLabel,
+              onValueChange: () => {
+                setVisibleIds(
+                  allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
+                );
+                close == null ? void 0 : close();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Menu.RadioItem,
+            {
+              name: presetRadioName,
+              value: "standard",
+              checked: isStandardActive,
+              label: standardPresetLabel,
+              onValueChange: () => {
+                setVisibleIds(
+                  standardPresetIds.filter(
+                    (id) => typeof id === "string" && Boolean(id)
+                  )
+                );
+                close == null ? void 0 : close();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Menu.Separator, {}),
+          hideableColumns.map((col) => {
+            const isVisible = col.id ? visibleSet.has(col.id) : false;
+            const disableUncheckingLast = isVisible && visibleCount <= 1;
+            const label = col.header;
+            return /* @__PURE__ */ jsx(
+              Menu.CheckItem,
+              {
+                checked: isVisible,
+                disabled: disableUncheckingLast,
+                label,
+                onCheckedChange: (nextChecked) => {
+                  if (disableUncheckingLast) return;
+                  toggleColumn(col.id, nextChecked);
+                }
+              },
+              col.id
+            );
+          })
+        ] }) : null
+      ] })
+    }
+  );
+}
+
+export { TableSettings };

package/dist/components/table/hooks/useTableRowInteractions.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var react = require('react');
+var table_utils = require('../table.utils');
+
+function useTableRowInteractions({
+  row,
+  rowId,
+  isSelected,
+  canSelect,
+  onRowClick,
+  onRowSelect
+}) {
+  const handleRowClick = react.useCallback(
+    (e) => {
+      var _a;
+      const target = e.target;
+      if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+        return;
+      }
+      if (table_utils.isModifierClick(e) && canSelect) {
+        e.preventDefault();
+        e.stopPropagation();
+        onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
+        return;
+      }
+      onRowClick == null ? void 0 : onRowClick(row);
+    },
+    [canSelect, isSelected, onRowClick, onRowSelect, row, rowId]
+  );
+  const handleRowKeyDown = react.useCallback(
+    (e) => {
+      if (!onRowClick) return;
+      if (!table_utils.shouldToggleOnKey(e.key)) return;
+      e.preventDefault();
+      onRowClick(row);
+    },
+    [onRowClick, row]
+  );
+  return {
+    handleRowClick,
+    handleRowKeyDown
+  };
+}
+
+exports.useTableRowInteractions = useTableRowInteractions;

package/dist/components/table/hooks/useTableRowInteractions.js

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { isModifierClick, shouldToggleOnKey } from '../table.utils';
+
+function useTableRowInteractions({
+  row,
+  rowId,
+  isSelected,
+  canSelect,
+  onRowClick,
+  onRowSelect
+}) {
+  const handleRowClick = useCallback(
+    (e) => {
+      var _a;
+      const target = e.target;
+      if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+        return;
+      }
+      if (isModifierClick(e) && canSelect) {
+        e.preventDefault();
+        e.stopPropagation();
+        onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
+        return;
+      }
+      onRowClick == null ? void 0 : onRowClick(row);
+    },
+    [canSelect, isSelected, onRowClick, onRowSelect, row, rowId]
+  );
+  const handleRowKeyDown = useCallback(
+    (e) => {
+      if (!onRowClick) return;
+      if (!shouldToggleOnKey(e.key)) return;
+      e.preventDefault();
+      onRowClick(row);
+    },
+    [onRowClick, row]
+  );
+  return {
+    handleRowClick,
+    handleRowKeyDown
+  };
+}
+
+export { useTableRowInteractions };

package/dist/components/table/table.classes.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var styles = require('./Table.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function getDividerClass(column) {
+  if (column.divider === "left") return styles__default.default.dividerLeft;
+  if (column.divider === "right") return styles__default.default.dividerRight;
+  return "";
+}
+function getAlignValue(column) {
+  var _a;
+  return (_a = column.align) != null ? _a : "left";
+}
+function getHeaderAlignClasses(align) {
+  return {
+    inner: cx(
+      styles__default.default.thInner,
+      align === "right" && styles__default.default.thInnerRight,
+      align === "center" && styles__default.default.thInnerCenter
+    ),
+    main: cx(
+      styles__default.default.thMain,
+      align === "right" && styles__default.default.thMainRight,
+      align === "center" && styles__default.default.thMainCenter
+    ),
+    button: cx(
+      styles__default.default.thButton,
+      align === "right" && styles__default.default.thButtonRight,
+      align === "center" && styles__default.default.thButtonCenter
+    ),
+    label: cx(
+      styles__default.default.thLabel,
+      align === "right" && styles__default.default.thLabelRight,
+      align === "center" && styles__default.default.thLabelCenter
+    )
+  };
+}
+
+exports.cx = cx;
+exports.getAlignValue = getAlignValue;
+exports.getDividerClass = getDividerClass;
+exports.getHeaderAlignClasses = getHeaderAlignClasses;

package/dist/components/table/table.classes.js

@@ -0,0 +1,40 @@
+import styles from './Table.module.css';
+
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function getDividerClass(column) {
+  if (column.divider === "left") return styles.dividerLeft;
+  if (column.divider === "right") return styles.dividerRight;
+  return "";
+}
+function getAlignValue(column) {
+  var _a;
+  return (_a = column.align) != null ? _a : "left";
+}
+function getHeaderAlignClasses(align) {
+  return {
+    inner: cx(
+      styles.thInner,
+      align === "right" && styles.thInnerRight,
+      align === "center" && styles.thInnerCenter
+    ),
+    main: cx(
+      styles.thMain,
+      align === "right" && styles.thMainRight,
+      align === "center" && styles.thMainCenter
+    ),
+    button: cx(
+      styles.thButton,
+      align === "right" && styles.thButtonRight,
+      align === "center" && styles.thButtonCenter
+    ),
+    label: cx(
+      styles.thLabel,
+      align === "right" && styles.thLabelRight,
+      align === "center" && styles.thLabelCenter
+    )
+  };
+}
+
+export { cx, getAlignValue, getDividerClass, getHeaderAlignClasses };

package/dist/components/table/table.utils.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+const SELECTION_COLUMN_PX = 40;
+const DEFAULT_COLUMN_PX = 150;
+function getVisibleColumns(columns) {
+  return columns.filter((column) => !column.hidden);
+}
+function getHeaderLabel(header) {
+  return typeof header === "function" ? header() : header;
+}
+function isActiveSort(sortById, columnId) {
+  return sortById === columnId;
+}
+function getAriaSort(sortable, active, direction) {
+  if (!sortable || !active || !direction) return "none";
+  return direction === "asc" ? "ascending" : "descending";
+}
+function getNextSortDirection(sortable, active, currentDirection) {
+  if (!sortable) return null;
+  if (!active) return "asc";
+  if (currentDirection === "asc") return "desc";
+  return null;
+}
+function shouldToggleOnKey(key) {
+  return key === "Enter" || key === " ";
+}
+function isModifierClick(e) {
+  return Boolean(e.metaKey || e.ctrlKey);
+}
+function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
+  return Boolean(columnAllowWrap || isRowSelected || viewMode === "wrapped");
+}
+function getCellDisplayValue(row, column) {
+  var _a;
+  const empty = (_a = column.emptyPlaceholder) != null ? _a : "";
+  if (column.render) {
+    const rendered = column.render(row);
+    return rendered != null ? rendered : empty;
+  }
+  if (column.accessor) {
+    const value = row[column.accessor];
+    return value != null ? value : empty;
+  }
+  return empty;
+}
+
+exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
+exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
+exports.getAriaSort = getAriaSort;
+exports.getCellDisplayValue = getCellDisplayValue;
+exports.getHeaderLabel = getHeaderLabel;
+exports.getNextSortDirection = getNextSortDirection;
+exports.getVisibleColumns = getVisibleColumns;
+exports.isActiveSort = isActiveSort;
+exports.isModifierClick = isModifierClick;
+exports.shouldAllowWrap = shouldAllowWrap;
+exports.shouldToggleOnKey = shouldToggleOnKey;

package/dist/components/table/table.utils.js

@@ -0,0 +1,45 @@
+const SELECTION_COLUMN_PX = 40;
+const DEFAULT_COLUMN_PX = 150;
+function getVisibleColumns(columns) {
+  return columns.filter((column) => !column.hidden);
+}
+function getHeaderLabel(header) {
+  return typeof header === "function" ? header() : header;
+}
+function isActiveSort(sortById, columnId) {
+  return sortById === columnId;
+}
+function getAriaSort(sortable, active, direction) {
+  if (!sortable || !active || !direction) return "none";
+  return direction === "asc" ? "ascending" : "descending";
+}
+function getNextSortDirection(sortable, active, currentDirection) {
+  if (!sortable) return null;
+  if (!active) return "asc";
+  if (currentDirection === "asc") return "desc";
+  return null;
+}
+function shouldToggleOnKey(key) {
+  return key === "Enter" || key === " ";
+}
+function isModifierClick(e) {
+  return Boolean(e.metaKey || e.ctrlKey);
+}
+function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
+  return Boolean(columnAllowWrap || isRowSelected || viewMode === "wrapped");
+}
+function getCellDisplayValue(row, column) {
+  var _a;
+  const empty = (_a = column.emptyPlaceholder) != null ? _a : "";
+  if (column.render) {
+    const rendered = column.render(row);
+    return rendered != null ? rendered : empty;
+  }
+  if (column.accessor) {
+    const value = row[column.accessor];
+    return value != null ? value : empty;
+  }
+  return empty;
+}
+
+export { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };

package/dist/components/table/tanstackTable.utils.cjs

@@ -0,0 +1,166 @@
+'use strict';
+
+var table_utils = require('./table.utils');
+
+function getColumnId(def, index) {
+  const d = def;
+  if (d.id != null && String(d.id).length > 0) return String(d.id);
+  if (d.accessorKey != null && String(d.accessorKey).length > 0) return String(d.accessorKey);
+  return `col_${index}`;
+}
+function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
+  if (!(visibleColumnIds == null ? void 0 : visibleColumnIds.length)) return {};
+  const visible = new Set(visibleColumnIds);
+  const next = {};
+  defs.forEach((def, index) => {
+    const id = getColumnId(def, index);
+    next[id] = visible.has(id);
+  });
+  return next;
+}
+function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
+  return defs.map((def, index) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const id = getColumnId(def, index);
+    const accessorKey = def.accessorKey;
+    const accessorFn = def.accessorFn;
+    const cell = def.cell;
+    const meta = (_a = def.meta) != null ? _a : {};
+    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;
+    }
+    const isVisible = (_b = columnVisibility[id]) != null ? _b : true;
+    return {
+      id,
+      header: def.header,
+      accessor: accessorKey,
+      sortable: (_c = def.enableSorting) != null ? _c : !!accessorKey,
+      render,
+      hidden: !isVisible,
+      width: (_d = resolvedLayout[id]) == null ? void 0 : _d.width,
+      align: meta.align,
+      verticalAlign: meta.verticalAlign,
+      emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
+      allowWrap: (_f = meta.allowWrap) != null ? _f : false,
+      severity: meta.severity,
+      divider: meta.divider,
+      allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
+    };
+  });
+}
+function sortingEqual(a, b) {
+  const A = a == null ? void 0 : a[0];
+  const B = b == null ? void 0 : b[0];
+  if (!A && !B) return true;
+  if (!A || !B) return false;
+  return A.id === B.id && A.desc === B.desc;
+}
+function getSortPropsFromSorting(sorting) {
+  const s = sorting == null ? void 0 : sorting[0];
+  return {
+    sortById: s == null ? void 0 : s.id,
+    sortDirection: s ? s.desc ? "desc" : "asc" : null
+  };
+}
+function clamp(value, min, max) {
+  const lowerBounded = Math.max(min, value);
+  if (max == null || !Number.isFinite(max)) return lowerBounded;
+  return Math.min(lowerBounded, max);
+}
+function toIntegerTrackWidths(tracks, targetWidth) {
+  const floored = tracks.map((track) => ({
+    id: track.id,
+    width: Math.floor(track.width),
+    fraction: track.width - Math.floor(track.width)
+  }));
+  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
+  let remainder = Math.max(0, targetWidth - baseTotal);
+  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
+    if (remainder <= 0) return;
+    track.width += 1;
+    remainder -= 1;
+  });
+  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+}
+function buildDistributedColumnWidths(args) {
+  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const leaf = table.getVisibleLeafColumns();
+  const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
+  const tracks = leaf.map((c) => {
+    var _a, _b, _c, _d;
+    const def = c.columnDef;
+    const meta = (_a = def.meta) != null ? _a : {};
+    const min = Math.max(1, Number((_b = def.minSize) != null ? _b : defaultMinPx));
+    const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : void 0;
+    const resizedPxRaw = columnSizing[c.id];
+    const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : void 0;
+    if (resizedPx != null) {
+      return {
+        id: c.id,
+        width: resizedPx,
+        weight: 0,
+        max: resizedPx,
+        fixed: true
+      };
+    }
+    const rawWeight = Number((_d = (_c = meta.weight) != null ? _c : def.size) != null ? _d : table_utils.DEFAULT_COLUMN_PX);
+    const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : table_utils.DEFAULT_COLUMN_PX;
+    return {
+      id: c.id,
+      width: min,
+      weight,
+      max,
+      fixed: false
+    };
+  });
+  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  let remaining = Math.max(0, availableWidth - fixedWidth);
+  let active = tracks.filter(
+    (track) => !track.fixed && (track.max == null || track.width < track.max)
+  );
+  while (remaining > 0.5 && active.length > 0) {
+    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight <= 0) break;
+    let consumed = 0;
+    const nextActive = [];
+    for (const track of active) {
+      const share = remaining * track.weight / totalWeight;
+      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+      const growth = Math.min(share, maxGrow);
+      track.width += growth;
+      consumed += growth;
+      if (track.max == null || track.width < track.max - 0.5) {
+        nextActive.push(track);
+      }
+    }
+    if (consumed <= 0.5) break;
+    remaining -= consumed;
+    active = nextActive;
+  }
+  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
+  const targetTrackWidth = floatTrackTotal <= availableWidth - selectionWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal);
+  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
+  const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  return {
+    selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
+    widths,
+    totalWidth
+  };
+}
+
+exports.buildColumnVisibilityFromVisibleIds = buildColumnVisibilityFromVisibleIds;
+exports.buildDistributedColumnWidths = buildDistributedColumnWidths;
+exports.getColumnId = getColumnId;
+exports.getSortPropsFromSorting = getSortPropsFromSorting;
+exports.mapDefsToColumnItems = mapDefsToColumnItems;
+exports.sortingEqual = sortingEqual;