@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,14 +0,0 @@
-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

@@ -1,96 +0,0 @@
-'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

@@ -1,240 +0,0 @@
-'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

@@ -1,4 +0,0 @@
-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

@@ -1,234 +0,0 @@
-'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 };