@dbcdk/react-components 0.0.96 → 0.0.98

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

@@ -1,64 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
-export 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);
-    // Measure the LEFT + WIDTH of the content column (for aligning footer inner)
-    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);
-        };
-    }, []);
-    // Measure the ACTUAL fixed footer overlay height (includes paddingBlock, borders, etc.)
-    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 (_jsxs("div", { className: className, style: { background }, children: [_jsx("div", { ref: contentColRef, style: {
-                    maxWidth,
-                    boxSizing: 'border-box',
-                    padding: contentPadding,
-                    paddingBottom: bottomPad,
-                }, children: children }), _jsx("div", { ref: footerOverlayRef, style: {
-                    position: 'fixed',
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 10,
-                    background,
-                    paddingBlock: pad,
-                    boxSizing: 'border-box',
-                }, children: _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 }) })] }));
-}

package/dist/components/table/Table.js

@@ -1,50 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo, useRef } from 'react';
-import { Pagination } from '../../components/pagination/Pagination';
-import { useViewportFill } from '../../hooks/useViewportFill';
-import { TableEmptyState } from './components/empty-state/EmptyState';
-import { TableBody } from './components/TableBody';
-import { TableHeader } from './components/TableHeader';
-import { TableLoadingBody } from './components/TableLoadingBody';
-import { cx } from './table.classes';
-import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
-export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, fillViewportBottomOffset = 16, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, 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 paginationOffset = hasPagination ? 72 : 0;
-    const { style: viewportFillStyle } = useViewportFill(internalTableRootRef, {
-        bottomOffset: fillViewportBottomOffset + paginationOffset,
-        min: 120,
-    });
-    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 || onPageChange === void 0 ? void 0 : onPageChange(e);
-    }, [onPageChange]);
-    const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
-    const paginationEl = hasPagination ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
-    const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
-    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: setTableRootRef, className: styles.tableScroll, style: fillViewport ? viewportFillStyle : undefined, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
-    if (fillViewport) {
-        return (_jsxs("div", { className: styles.fillViewportRoot, style: {
-                flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',
-            }, children: [toolbar ? _jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null, _jsx("div", { className: styles.tableViewport, children: tableShell }), paginationEl] }));
-    }
-    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", style: {
-            flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
-            position: 'relative',
-        }, children: [toolbar ? _jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null, tableShell, paginationEl] }));
-}

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

@@ -1,536 +0,0 @@
-.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 {
-  position: sticky;
-  top: 0;
-  z-index: 6;
-  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;
-}
-
-.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;
-}
-
-.headerCell.dividerLeft,
-.headerCell.dividerRight {
-  position: sticky;
-}
-
-.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.js

@@ -1 +0,0 @@
-export {};