@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/components/table/Table.module.css

@@ -0,0 +1,534 @@
+.fillViewportRoot {
+  display: flex;
+  position: relative;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.inlineRoot {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  position: relative;
+}
+
+.toolbarSlot {
+  margin-bottom: 12px;
+  flex: 0 0 auto;
+}
+
+.tableViewport {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.paginationSlot {
+  flex: 0 0 auto;
+  overflow: visible;
+  margin-top: auto;
+}
+
+.paginationSlot:not(.paginationSlotTop) {
+  padding-top: var(--spacing-sm);
+}
+
+.paginationSlot.paginationSlotTop {
+  padding-bottom: var(--spacing-sm);
+}
+
+.tableRoot {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.measuringLayout {
+  visibility: hidden;
+}
+
+.tableScroll {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  background: var(--table-row-bg);
+  -webkit-overflow-scrolling: touch;
+}
+
+.tableElement {
+  inline-size: 100%;
+  min-inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--table-cell-fg);
+  background: var(--table-row-bg);
+}
+
+.header {
+  position: relative;
+  z-index: 10;
+}
+
+.headerRow,
+.row {
+  position: relative;
+}
+
+.emptyStateSlot {
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+  padding: var(--spacing-lg);
+}
+
+.body {
+  min-block-size: 0;
+}
+
+.body .row:first-child .cell {
+  border-block-start: var(--spacing-xs) solid var(--table-row-bg);
+}
+
+.headerCell,
+.cell {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  vertical-align: top;
+  text-align: start;
+}
+
+.headerCell {
+  vertical-align: middle;
+  background-color: var(--table-header-bg);
+  border-block-end: 1px solid var(--table-border-header);
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--table-header-fg);
+  white-space: nowrap;
+}
+
+[data-sticky-header='true'] .headerCell {
+  position: sticky;
+  top: var(--table-sticky-top);
+  z-index: 6;
+}
+
+.cell {
+  padding-block: 6px;
+  padding-inline: var(--spacing-sm);
+  border-block-end: 1px solid var(--table-border-subtle);
+  background: var(--table-row-bg);
+  overflow: hidden;
+  line-height: 20px;
+}
+
+.md .headerCell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.md .cell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.sm .headerCell {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+}
+
+.sm .cell {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  line-height: 20px;
+}
+
+.cell[data-vertical-align='top'] {
+  vertical-align: top;
+}
+
+.cell[data-vertical-align='middle'] {
+  vertical-align: middle;
+}
+
+.cell[data-vertical-align='bottom'] {
+  vertical-align: bottom;
+}
+
+.headerCell[data-align='right'],
+.cell[data-align='right'] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.headerCell[data-align='center'],
+.cell[data-align='center'] {
+  text-align: center;
+}
+
+.headerCell.selectionCell,
+.cell.selectionCell {
+  padding-inline: calc(var(--spacing-xxs) + 6px) var(--spacing-sm);
+  cursor: pointer;
+  overflow: visible;
+  line-height: 0;
+}
+
+.headerCell.selectionCell {
+  padding-block: var(--spacing-xxs);
+  vertical-align: middle;
+}
+
+.cell.selectionCell {
+  vertical-align: top;
+  padding-block: var(--spacing-xxs);
+}
+
+.selectionHitArea {
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-block-size: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+.selectionControlWrap {
+  display: inline-flex;
+  align-items: flex-start;
+  line-height: 0;
+}
+
+.selectionControlWrap span {
+  gap: 0;
+}
+
+.selectionControlWrap input[type='radio'] + span {
+  width: 18px;
+  height: 18px;
+  border-width: 1px;
+  border-color: color-mix(in srgb, var(--color-fg-default) 28%, transparent);
+}
+
+.selectionControlWrap input[type='radio'] + span > span {
+  width: 8px;
+  height: 8px;
+}
+
+.clickableRow {
+  cursor: pointer;
+}
+
+.row:hover > .cell {
+  background-color: var(--table-row-bg-hover);
+}
+
+.selectedRow > .cell {
+  background-color: var(--table-row-bg-selected);
+}
+
+.selectedRow:hover > .cell {
+  background-color: var(--table-row-bg-selected-hover);
+}
+
+.striped > .row:nth-child(even):not(.selectedRow):not(:hover) > .cell {
+  background-color: var(--table-row-bg-alt);
+}
+
+.row:focus-within > .cell {
+  box-shadow:
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.row:focus-within > .cell:first-child {
+  box-shadow:
+    inset 2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.row:focus-within > .cell:last-child {
+  box-shadow:
+    inset -2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.allowWrap {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.thInner {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-width: 0;
+}
+
+.thInnerRight {
+  justify-content: flex-end;
+}
+
+.thInnerCenter {
+  justify-content: center;
+}
+
+.thMain {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.thMainRight {
+  justify-content: flex-end;
+}
+
+.thMainCenter {
+  justify-content: center;
+}
+
+.thButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-inline-size: 100%;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius-default);
+  padding-block: 2px;
+  padding-inline: 2px;
+  justify-content: flex-start;
+}
+
+.thButtonRight {
+  justify-content: flex-end;
+}
+
+.thButtonCenter {
+  justify-content: center;
+}
+
+.thLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.thLabelRight {
+  text-align: right;
+  width: 100%;
+}
+
+.thLabelCenter {
+  text-align: center;
+  width: 100%;
+}
+
+.thOverlayExtras {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  pointer-events: none;
+  z-index: 7;
+}
+
+.thOverlayExtras > * {
+  pointer-events: auto;
+}
+
+.sortIndicator {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: var(--color-fg-subtle);
+  opacity: 0.9;
+}
+
+.sortIndicator svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.descending {
+  transform: rotate(180deg);
+}
+
+.inActiveSort {
+  opacity: 0.45;
+}
+
+.cellContent {
+  display: flex;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+/* horizontal alignment inside content wrapper */
+.cellContent[data-align='left'] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.cellContent[data-align='center'] {
+  justify-content: center;
+  text-align: center;
+}
+
+.cellContent[data-align='right'] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* vertical alignment inside content wrapper */
+.cellContent[data-vertical-align='top'] {
+  align-items: flex-start;
+}
+
+.cellContent[data-vertical-align='middle'] {
+  align-items: center;
+}
+
+.cellContent[data-vertical-align='bottom'] {
+  align-items: flex-end;
+}
+
+.cellContent > * {
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+/* keep truncation + text alignment working */
+.cellValueEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cellContent[data-align='left'] .cellValueEllipsis {
+  text-align: left;
+}
+
+.cellContent[data-align='center'] .cellValueEllipsis {
+  text-align: center;
+}
+
+.cellContent[data-align='right'] .cellValueEllipsis {
+  text-align: right;
+}
+
+.allowWrap .cellContent,
+.allowWrap .cellValueEllipsis {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.severityTable {
+  --row-rail-width: 2px;
+  --row-rail-inset-block: 1px;
+  --row-rail-radius: 0;
+}
+
+.severityTable .row.severity > .cell:first-child {
+  position: relative;
+}
+
+.severityTable .row.severity > .cell:first-child::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: var(--row-rail-inset-block);
+  inset-block-end: var(--row-rail-inset-block);
+  inline-size: var(--row-rail-width);
+  background-color: var(--row-severity-color);
+  border-radius: var(--row-rail-radius);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.95;
+}
+
+.severityTable .row.severity:hover > .cell:first-child::before,
+.severityTable .row.severity:focus-within > .cell:first-child::before {
+  opacity: 1;
+  z-index: 8;
+}
+
+.severityTable .row.severityFailed > .cell:first-child::before {
+  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
+}
+
+.sm .severityTable {
+  --row-rail-width: 4px;
+  --row-rail-inset-block: 1px;
+}
+
+.dividerLeft,
+.dividerRight {
+  position: relative;
+}
+
+.dividerLeft::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
+}
+
+.dividerRight::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
+}

package/dist/components/table/Table.types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/table/Table.types.js

@@ -0,0 +1 @@
+

package/dist/components/table/TanstackTable.cjs

@@ -0,0 +1,172 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var ColumnResizer = require('./components/column-resizer/ColumnResizer');
+var Table = require('./Table');
+var table_utils = require('./table.utils');
+var tanstackTable_utils = require('./tanstackTable.utils');
+
+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 TanstackTable(props) {
+  const {
+    data,
+    dataKey,
+    columns,
+    sorting: controlledSorting,
+    onSortingChange,
+    optimisticSortingUi = true,
+    visibleColumnIds,
+    manualSorting,
+    selectedRows,
+    onRowSelect,
+    ...tableProps
+  } = props;
+  const isControlledSorting = controlledSorting != null;
+  const [uiSorting, setUiSorting] = React__namespace.useState(controlledSorting != null ? controlledSorting : []);
+  React__namespace.useEffect(() => {
+    if (!isControlledSorting) return;
+    if (tanstackTable_utils.sortingEqual(uiSorting, controlledSorting)) return;
+    setUiSorting(controlledSorting);
+  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const columnVisibility = React__namespace.useMemo(
+    () => tanstackTable_utils.buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
+    [columns, visibleColumnIds]
+  );
+  const [columnSizing, setColumnSizing] = React__namespace.useState({});
+  const containerRef = React__namespace.useRef(null);
+  const [availableWidth, setAvailableWidth] = React__namespace.useState(void 0);
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    state: {
+      sorting: uiSorting,
+      columnSizing,
+      columnVisibility
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(uiSorting) : updater;
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    manualSorting: manualSorting != null ? manualSorting : false,
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    defaultColumn: {
+      enableResizing: true,
+      minSize: 80,
+      size: table_utils.DEFAULT_COLUMN_PX
+    }
+  });
+  React__namespace.useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateWidth = () => {
+      const next = el.clientWidth;
+      setAvailableWidth(next > 0 ? next : void 0);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+    const observer = new ResizeObserver(() => updateWidth());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const distributedLayout = React__namespace.useMemo(() => {
+    if (availableWidth == null) return null;
+    return tanstackTable_utils.buildDistributedColumnWidths({
+      table,
+      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+  const initialLayoutReady = availableWidth != null;
+  const resolvedLayout = React__namespace.useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = React__namespace.useMemo(
+    () => tanstackTable_utils.mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  const visibleData = table.getRowModel().rows.map((r) => r.original);
+  const { sortById, sortDirection } = tanstackTable_utils.getSortPropsFromSorting(uiSorting);
+  const handleSortChange = React__namespace.useCallback(
+    (column, direction) => {
+      const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    [optimisticSortingUi, onSortingChange]
+  );
+  const headerExtras = React__namespace.useCallback(
+    ({ index }) => {
+      var _a, _b, _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 = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != 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]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Table.Table,
+    {
+      ...tableProps,
+      tableRootRef: containerRef,
+      onSortChange: handleSortChange,
+      dataKey,
+      data: visibleData,
+      columns: columnItems,
+      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
+      measuringLayout: !initialLayoutReady,
+      sortById,
+      sortDirection,
+      headerExtras,
+      selectedRows,
+      onRowSelect
+    }
+  );
+}
+
+exports.TanstackTable = TanstackTable;