@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/sticky-footer-layout/StickyFooterLayout.d.ts

@@ -0,0 +1,14 @@
+import React, { JSX } from 'react';
+type StickyFooterLayoutProps = {
+    children: React.ReactNode;
+    footer: React.ReactNode;
+    maxWidth?: number | string;
+    chromePaddingVar?: string;
+    contentPadding?: string;
+    background?: string;
+    /** extra space below content so last field doesn't sit too close to footer */
+    contentBottomSpacer?: string | number;
+    className?: string;
+};
+export declare function StickyFooterLayout({ children, footer, maxWidth, chromePaddingVar, contentPadding, background, contentBottomSpacer, className, }: StickyFooterLayoutProps): JSX.Element;
+export {};

package/dist/components/sticky-footer-layout/StickyFooterLayout.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+
+function StickyFooterLayout({
+  children,
+  footer,
+  maxWidth = 550,
+  chromePaddingVar = "--spacing-md",
+  contentPadding = "0",
+  background = "var(--color-bg-surface)",
+  contentBottomSpacer = "16px",
+  className
+}) {
+  const pad = `var(${chromePaddingVar})`;
+  const contentColRef = useRef(null);
+  const footerOverlayRef = useRef(null);
+  const [dock, setDock] = useState({
+    left: 0,
+    width: typeof maxWidth === "number" ? maxWidth : 550
+  });
+  const [overlayHeight, setOverlayHeight] = useState(0);
+  useLayoutEffect(() => {
+    const el = contentColRef.current;
+    if (!el) return;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      setDock({ left: rect.left, width: rect.width });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    window.addEventListener("resize", measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const el = footerOverlayRef.current;
+    if (!el) return;
+    const measure = () => setOverlayHeight(el.getBoundingClientRect().height);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const bottomPad = `calc(${overlayHeight}px + ${String(contentBottomSpacer)})`;
+  return /* @__PURE__ */ jsxs("div", { className, style: { background }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentColRef,
+        style: {
+          maxWidth,
+          boxSizing: "border-box",
+          padding: contentPadding,
+          paddingBottom: bottomPad
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: footerOverlayRef,
+        style: {
+          position: "fixed",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 10,
+          background,
+          paddingBlock: pad,
+          boxSizing: "border-box"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "relative",
+              left: dock.left,
+              width: dock.width,
+              boxSizing: "border-box"
+              /* you said you removed padding-inline to match form edge exactly */
+            },
+            className: "dbc-flex dbc-justify-end",
+            children: footer
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { StickyFooterLayout };

package/dist/components/table/Table.cjs

@@ -0,0 +1,240 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Pagination = require('../../components/pagination/Pagination');
+var SkeletonLoader = require('../../components/skeleton-loader/SkeletonLoader');
+var useViewportFill = require('../../hooks/useViewportFill');
+var EmptyState = require('./components/empty-state/EmptyState');
+var TableBody = require('./components/TableBody');
+var TableHeader = require('./components/TableHeader');
+var table_classes = require('./table.classes');
+var styles = require('./Table.module.css');
+var table_utils = require('./table.utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Table({
+  data,
+  dataKey,
+  columns,
+  selectedRows,
+  selectionMode = "single",
+  allRowsSelected,
+  sortById,
+  sortDirection,
+  loading,
+  emptyConfig,
+  variant = "primary",
+  size = "md",
+  viewMode,
+  fillViewport = false,
+  fillViewportBottomOffset = 16,
+  containScrolling = true,
+  stickyHeader,
+  tableWidth,
+  tableRootRef,
+  measuringLayout = false,
+  toolbar,
+  headerExtras,
+  take,
+  skip,
+  totalItemsCount,
+  paginationPlacement = "bottom",
+  showFirstLast = false,
+  showGoToPage,
+  showPageSize,
+  pageSizeOptions,
+  showHeader = true,
+  getRowSeverity,
+  getContextMenuItems,
+  showContextMenuOnHover = true,
+  expandableRows = false,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect,
+  onSelectAllRows,
+  onSortChange,
+  onPageChange,
+  ...rest
+}) {
+  const visibleColumns = react.useMemo(() => table_utils.getVisibleColumns(columns), [columns]);
+  const selectionInputName = react.useId();
+  const internalTableRootRef = react.useRef(null);
+  const tableRootRefWrapper = react.useRef(tableRootRef);
+  const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const [expandedRows, setExpandedRows] = react.useState(() => /* @__PURE__ */ new Set());
+  const handleToggleRowExpand = react.useCallback((rowId) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
+  const paginationOffset = hasPagination ? 72 : 0;
+  const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
+    bottomOffset: fillViewportBottomOffset + paginationOffset,
+    min: 0
+  });
+  const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
+  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
+  const setTableRootRef = react.useCallback((node) => {
+    internalTableRootRef.current = node;
+    if (typeof tableRootRefWrapper.current === "function") {
+      tableRootRefWrapper.current(node);
+    } else if (tableRootRefWrapper.current) {
+      tableRootRefWrapper.current.current = node;
+    }
+  }, []);
+  const handlePageChange = react.useCallback(
+    (e) => {
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [onPageChange]
+  );
+  const bodyContent = /* @__PURE__ */ jsxRuntime.jsx(
+    TableBody.TableBody,
+    {
+      data,
+      dataKey,
+      columns: visibleColumns,
+      selectedRows,
+      hasSelection,
+      selectionMode,
+      selectionInputName,
+      viewMode,
+      getRowSeverity,
+      getContextMenuItems,
+      showContextMenuOnHover,
+      expandableRows,
+      expandedRows,
+      onRowClick,
+      onRowMouseEnter,
+      onRowSelect,
+      onToggleRowExpand: handleToggleRowExpand
+    }
+  );
+  const paginationEl = hasPagination ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: table_classes.cx(
+        styles__default.default.paginationSlot,
+        paginationPlacement === "top" && styles__default.default.paginationSlotTop
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Pagination.Pagination,
+        {
+          itemsCount: totalItemsCount,
+          take,
+          skip,
+          onPageChange: handlePageChange,
+          showFirstLast,
+          showGoToPage,
+          showPageSize,
+          pageSizeOptions
+        }
+      )
+    }
+  ) : null;
+  const tableClassName = table_classes.cx(
+    styles__default.default.tableRoot,
+    styles__default.default[variant],
+    styles__default.default[size],
+    measuringLayout && styles__default.default.measuringLayout,
+    getRowSeverity && styles__default.default.severityTable
+  );
+  const tableShell = /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setTableRootRef,
+      className: styles__default.default.tableScroll,
+      style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
+      children: loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "table",
+        {
+          className: styles__default.default.tableElement,
+          "aria-rowcount": data.length,
+          "data-show-header": showHeader,
+          style: tableWidth != null ? { width: tableWidth } : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+              hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: table_utils.SELECTION_COLUMN_PX } }) : null,
+              visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+                "col",
+                {
+                  style: column.width != null ? { width: column.width } : void 0
+                },
+                column.id
+              ))
+            ] }),
+            showHeader && /* @__PURE__ */ jsxRuntime.jsx(
+              TableHeader.TableHeader,
+              {
+                columns: visibleColumns,
+                hasSelection,
+                selectionMode,
+                allRowsSelected,
+                onSelectAllRows,
+                sortById,
+                sortDirection,
+                onSortChange,
+                headerExtras,
+                stickyTop
+              }
+            ),
+            bodyContent
+          ]
+        }
+      )
+    }
+  ) });
+  if (fillViewport) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: styles__default.default.fillViewportRoot,
+        style: {
+          flexDirection: paginationPlacement === "top" ? "column-reverse" : "column",
+          ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
+        },
+        children: [
+          toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbar }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: styles__default.default.tableViewport,
+              style: !fillViewportActive ? { overflow: "visible" } : void 0,
+              children: tableShell
+            }
+          ),
+          paginationEl
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "dbc-flex dbc-flex-column dbc-gap-md dbc-flex-grow",
+      style: {
+        flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
+        position: "relative"
+      },
+      children: [
+        toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbar }) : null,
+        tableShell,
+        paginationEl
+      ]
+    }
+  );
+}
+
+exports.Table = Table;

package/dist/components/table/Table.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import type { TableProps } from './Table.types';
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -0,0 +1,234 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useId, useRef, useState, useCallback } from 'react';
+import { Pagination } from '../../components/pagination/Pagination';
+import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
+import { useViewportFill } from '../../hooks/useViewportFill';
+import { TableEmptyState } from './components/empty-state/EmptyState';
+import { TableBody } from './components/TableBody';
+import { TableHeader } from './components/TableHeader';
+import { cx } from './table.classes';
+import styles from './Table.module.css';
+import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+
+function Table({
+  data,
+  dataKey,
+  columns,
+  selectedRows,
+  selectionMode = "single",
+  allRowsSelected,
+  sortById,
+  sortDirection,
+  loading,
+  emptyConfig,
+  variant = "primary",
+  size = "md",
+  viewMode,
+  fillViewport = false,
+  fillViewportBottomOffset = 16,
+  containScrolling = true,
+  stickyHeader,
+  tableWidth,
+  tableRootRef,
+  measuringLayout = false,
+  toolbar,
+  headerExtras,
+  take,
+  skip,
+  totalItemsCount,
+  paginationPlacement = "bottom",
+  showFirstLast = false,
+  showGoToPage,
+  showPageSize,
+  pageSizeOptions,
+  showHeader = true,
+  getRowSeverity,
+  getContextMenuItems,
+  showContextMenuOnHover = true,
+  expandableRows = false,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect,
+  onSelectAllRows,
+  onSortChange,
+  onPageChange,
+  ...rest
+}) {
+  const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+  const selectionInputName = useId();
+  const internalTableRootRef = useRef(null);
+  const tableRootRefWrapper = useRef(tableRootRef);
+  const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const [expandedRows, setExpandedRows] = useState(() => /* @__PURE__ */ new Set());
+  const handleToggleRowExpand = useCallback((rowId) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
+  const paginationOffset = hasPagination ? 72 : 0;
+  const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
+    bottomOffset: fillViewportBottomOffset + paginationOffset,
+    min: 0
+  });
+  const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
+  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
+  const setTableRootRef = useCallback((node) => {
+    internalTableRootRef.current = node;
+    if (typeof tableRootRefWrapper.current === "function") {
+      tableRootRefWrapper.current(node);
+    } else if (tableRootRefWrapper.current) {
+      tableRootRefWrapper.current.current = node;
+    }
+  }, []);
+  const handlePageChange = useCallback(
+    (e) => {
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [onPageChange]
+  );
+  const bodyContent = /* @__PURE__ */ jsx(
+    TableBody,
+    {
+      data,
+      dataKey,
+      columns: visibleColumns,
+      selectedRows,
+      hasSelection,
+      selectionMode,
+      selectionInputName,
+      viewMode,
+      getRowSeverity,
+      getContextMenuItems,
+      showContextMenuOnHover,
+      expandableRows,
+      expandedRows,
+      onRowClick,
+      onRowMouseEnter,
+      onRowSelect,
+      onToggleRowExpand: handleToggleRowExpand
+    }
+  );
+  const paginationEl = hasPagination ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        styles.paginationSlot,
+        paginationPlacement === "top" && styles.paginationSlotTop
+      ),
+      children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          itemsCount: totalItemsCount,
+          take,
+          skip,
+          onPageChange: handlePageChange,
+          showFirstLast,
+          showGoToPage,
+          showPageSize,
+          pageSizeOptions
+        }
+      )
+    }
+  ) : null;
+  const tableClassName = cx(
+    styles.tableRoot,
+    styles[variant],
+    styles[size],
+    measuringLayout && styles.measuringLayout,
+    getRowSeverity && styles.severityTable
+  );
+  const tableShell = /* @__PURE__ */ jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setTableRootRef,
+      className: styles.tableScroll,
+      style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
+      children: loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: styles.tableElement,
+          "aria-rowcount": data.length,
+          "data-show-header": showHeader,
+          style: tableWidth != null ? { width: tableWidth } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("colgroup", { children: [
+              hasSelection ? /* @__PURE__ */ jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null,
+              visibleColumns.map((column) => /* @__PURE__ */ jsx(
+                "col",
+                {
+                  style: column.width != null ? { width: column.width } : void 0
+                },
+                column.id
+              ))
+            ] }),
+            showHeader && /* @__PURE__ */ jsx(
+              TableHeader,
+              {
+                columns: visibleColumns,
+                hasSelection,
+                selectionMode,
+                allRowsSelected,
+                onSelectAllRows,
+                sortById,
+                sortDirection,
+                onSortChange,
+                headerExtras,
+                stickyTop
+              }
+            ),
+            bodyContent
+          ]
+        }
+      )
+    }
+  ) });
+  if (fillViewport) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.fillViewportRoot,
+        style: {
+          flexDirection: paginationPlacement === "top" ? "column-reverse" : "column",
+          ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
+        },
+        children: [
+          toolbar ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.tableViewport,
+              style: !fillViewportActive ? { overflow: "visible" } : void 0,
+              children: tableShell
+            }
+          ),
+          paginationEl
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "dbc-flex dbc-flex-column dbc-gap-md dbc-flex-grow",
+      style: {
+        flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
+        position: "relative"
+      },
+      children: [
+        toolbar ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null,
+        tableShell,
+        paginationEl
+      ]
+    }
+  );
+}
+
+export { Table };