@dbcdk/react-components 0.0.120 → 0.0.121

package/dist/components/card/Card.cjs

@@ -5,7 +5,7 @@ var styles = require('./Card.module.css');
 var CardMeta = require('./components/CardMeta');
 var Headline = require('../headline/Headline');
 var Hyperlink = require('../hyperlink/Hyperlink');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -52,7 +52,7 @@ function CardImpl({
   children,
   link,
   width,
-  headlineSize = 4,
+  headlineSize = 3,
   truncateTitle = false
 }) {
   var _a;
@@ -76,7 +76,7 @@ function CardImpl({
           Headline.Headline,
           {
             severity,
-            marker: headerMarker,
+            marker: Boolean(severity) && headerMarker,
             icon: headerIcon,
             addition: headerAddition,
             subheader,
@@ -89,10 +89,7 @@ function CardImpl({
         ) : null,
         headerMeta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta }) : null
       ] }) : null,
-      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.loadingRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
       showSection ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
         showSectionDivider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }) : null,
         sectionTitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle }) : null

package/dist/components/card/Card.js

@@ -3,7 +3,7 @@ import styles from './Card.module.css';
 import { CardMetaRow, CardMeta } from './components/CardMeta';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
 
 function getInnerPlacementClass(imgPlacement, s) {
   switch (imgPlacement) {
@@ -46,7 +46,7 @@ function CardImpl({
   children,
   link,
   width,
-  headlineSize = 4,
+  headlineSize = 3,
   truncateTitle = false
 }) {
   var _a;
@@ -70,7 +70,7 @@ function CardImpl({
           Headline,
           {
             severity,
-            marker: headerMarker,
+            marker: Boolean(severity) && headerMarker,
             icon: headerIcon,
             addition: headerAddition,
             subheader,
@@ -83,10 +83,7 @@ function CardImpl({
         ) : null,
         headerMeta ? /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta }) : null
       ] }) : null,
-      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: styles.loadingRow, children: [
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
       showSection ? /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         showSectionDivider ? /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }) : null,
         sectionTitle ? /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null

package/dist/components/card/Card.module.css

@@ -159,16 +159,11 @@
 }
 
 /* Loading */
-.loadingList {
+.loadingBody {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.loadingRow {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 180px;
 }
 
 /* Responsive */

package/dist/components/search-box/SearchBox.cjs

@@ -49,6 +49,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   const listboxId = react.useId();
   const popoverRef = react.useRef(null);
   const internalInputRef = react.useRef(null);
+  const onSearchRef = react.useRef(onSearch);
   react.useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -62,18 +63,22 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
     if (next !== draft) setDraft(next);
   }, [value]);
   react.useEffect(() => {
-    if (!onSearch) return;
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  react.useEffect(() => {
+    if (!onSearchRef.current) return;
     if (!debounce) {
       setSearchQuery(draft);
-      onSearch(draft);
+      onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
+      var _a2;
       setSearchQuery(draft);
-      onSearch(draft);
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  }, [draft, debounce, debounceMs]);
   react.useEffect(() => {
     function handleKeyDown(event) {
       var _a2;

package/dist/components/search-box/SearchBox.js

@@ -43,6 +43,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   const listboxId = useId();
   const popoverRef = useRef(null);
   const internalInputRef = useRef(null);
+  const onSearchRef = useRef(onSearch);
   useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -56,18 +57,22 @@ const SearchBox = forwardRef(function SearchBoxInner({
     if (next !== draft) setDraft(next);
   }, [value]);
   useEffect(() => {
-    if (!onSearch) return;
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  useEffect(() => {
+    if (!onSearchRef.current) return;
     if (!debounce) {
       setSearchQuery(draft);
-      onSearch(draft);
+      onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
+      var _a2;
       setSearchQuery(draft);
-      onSearch(draft);
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  }, [draft, debounce, debounceMs]);
   useEffect(() => {
     function handleKeyDown(event) {
       var _a2;

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs

@@ -11,7 +11,7 @@ function SkeletonLoaderItem({
   height = 14,
   width = "100%",
   radius = 6,
-  speedSec = 3,
+  speedSec = 4,
   ariaLabel = "Loading",
   variant = "default"
 }) {

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -5,7 +5,7 @@ function SkeletonLoaderItem({
   height = 14,
   width = "100%",
   radius = 6,
-  speedSec = 3,
+  speedSec = 4,
   ariaLabel = "Loading",
   variant = "default"
 }) {

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -2,8 +2,9 @@
   --h: var(--skeleton-height, 14px);
   --r: var(--border-radius-md, 6px);
   --speed: var(--skeleton-speed, 1.2s);
-  --skeleton-base: var(--opac-bg-dark);
-  --skeleton-sheen: var(--opac-bg-default);
+  --skeleton-base: var(--opac-bg-default);
+  --skeleton-sheen: var(--opac-bg-light);
+  --skeleton-sheen-soft: color-mix(in srgb, var(--skeleton-sheen) 60%, var(--skeleton-base));
   position: relative;
   display: block;
   inline-size: var(--width, 100%);
@@ -14,17 +15,20 @@
   border-radius: var(--r);
   background: linear-gradient(
     90deg,
-    var(--skeleton-sheen) 0%,
-    var(--skeleton-base) 45%,
-    var(--skeleton-sheen) 60%,
+    var(--skeleton-base) 0%,
+    var(--skeleton-base) 34%,
+    var(--skeleton-sheen-soft) 45%,
+    var(--skeleton-sheen) 50%,
+    var(--skeleton-sheen-soft) 55%,
+    var(--skeleton-base) 66%,
     var(--skeleton-base) 100%
   );
-  background-size: 200% 100%;
+  background-size: 240% 100%;
   animation: shimmer var(--speed) linear infinite;
 }
 
 .invert {
-  --skeleton-base: var(--opac-bg-dark-invert);
+  --skeleton-base: var(--opac-bg-default-invert);
   --skeleton-sheen: var(--opac-bg-light-invert);
 }
 

package/dist/components/table/Table.cjs

@@ -4,11 +4,11 @@
 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 TableLoadingBody = require('./components/TableLoadingBody');
 var table_classes = require('./table.classes');
 var styles = require('./Table.module.css');
 var table_utils = require('./table.utils');
@@ -51,6 +51,7 @@ function Table({
   pageSizeOptions,
   showHeader = true,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -64,6 +65,7 @@ function Table({
   const internalTableRootRef = react.useRef(null);
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
@@ -86,7 +88,7 @@ function Table({
     },
     [onPageChange]
   );
-  const bodyContent = loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx(TableLoadingBody.TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsxRuntime.jsx(
+  const bodyContent = /* @__PURE__ */ jsxRuntime.jsx(
     TableBody.TableBody,
     {
       data,
@@ -99,6 +101,7 @@ function Table({
       selectionInputName,
       viewMode,
       getRowSeverity,
+      getContextMenuItems,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -139,7 +142,7 @@ function Table({
       ref: setTableRootRef,
       className: styles__default.default.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: !data.length && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      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,
@@ -155,13 +158,15 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              ))
+              )),
+              hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: table_utils.CONTEXT_MENU_COLUMN_PX } }) : null
             ] }),
             showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
+                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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

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

package/dist/components/table/Table.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useId, useRef, 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 { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { getVisibleColumns, SELECTION_COLUMN_PX, CONTEXT_MENU_COLUMN_PX } from './table.utils';
 
 function Table({
   data,
@@ -45,6 +45,7 @@ function Table({
   pageSizeOptions,
   showHeader = true,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -58,6 +59,7 @@ function Table({
   const internalTableRootRef = useRef(null);
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
@@ -80,7 +82,7 @@ function Table({
     },
     [onPageChange]
   );
-  const bodyContent = loading && !data.length ? /* @__PURE__ */ jsx(TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsx(
+  const bodyContent = /* @__PURE__ */ jsx(
     TableBody,
     {
       data,
@@ -93,6 +95,7 @@ function Table({
       selectionInputName,
       viewMode,
       getRowSeverity,
+      getContextMenuItems,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -133,7 +136,7 @@ function Table({
       ref: setTableRootRef,
       className: styles.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: !data.length && !loading ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
+      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,
@@ -149,13 +152,15 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              ))
+              )),
+              hasContextMenu ? /* @__PURE__ */ jsx("col", { style: { width: CONTEXT_MENU_COLUMN_PX } }) : null
             ] }),
             showHeader && /* @__PURE__ */ jsx(
               TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
+                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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

@@ -241,6 +241,14 @@
   line-height: 0;
 }
 
+.headerCell.contextMenuCell,
+.cell.contextMenuCell {
+  inline-size: 1%;
+  white-space: nowrap;
+  padding-inline: var(--spacing-2xs);
+  overflow: visible;
+}
+
 .headerCell.selectionCell {
   padding-block: var(--spacing-xxs);
   vertical-align: middle;
@@ -251,6 +259,15 @@
   padding-block: var(--spacing-xxs);
 }
 
+.headerCell.contextMenuHeaderCell {
+  padding-block: var(--spacing-xxs);
+}
+
+.cell.contextMenuCell {
+  vertical-align: top;
+  padding-block: var(--spacing-2xs);
+}
+
 .selectionHitArea {
   display: inline-flex;
   align-items: flex-start;
@@ -475,6 +492,10 @@
   text-align: right;
 }
 
+.contextMenuCellContent {
+  justify-content: flex-end;
+}
+
 /* vertical alignment inside content wrapper */
 .cellContent[data-vertical-align='top'] {
   align-items: flex-start;
@@ -535,6 +556,10 @@
   text-overflow: clip;
 }
 
+.contextMenuTrigger {
+  color: var(--color-fg-subtle);
+}
+
 .severityTable {
   --row-rail-width: 2px;
   --row-rail-inset-block: 1px;

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

@@ -24,6 +24,14 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
+export type TableContextMenuItem = {
+    label: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -61,6 +69,11 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     pageSizeOptions?: number[];
     showHeader?: boolean;
     getRowSeverity?: (row: T) => Severity | undefined;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;

package/dist/components/table/TanstackTable.cjs

@@ -116,11 +116,20 @@ function TanstackTable(props) {
     return tanstackTable_utils.buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      hasContextMenu: Boolean(tableProps.getContextMenuItems),
       defaultMinPx: 80,
       columnSizing,
       availableWidth
     });
-  }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+  }, [
+    table,
+    selectedRows,
+    onRowSelect,
+    dataKey,
+    tableProps.getContextMenuItems,
+    columnSizing,
+    availableWidth
+  ]);
   const initialLayoutReady = availableWidth != null;
   const resolvedLayout = React__namespace.useMemo(() => {
     const next = {};

package/dist/components/table/TanstackTable.js

@@ -91,11 +91,20 @@ function TanstackTable(props) {
     return buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      hasContextMenu: Boolean(tableProps.getContextMenuItems),
       defaultMinPx: 80,
       columnSizing,
       availableWidth
     });
-  }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+  }, [
+    table,
+    selectedRows,
+    onRowSelect,
+    dataKey,
+    tableProps.getContextMenuItems,
+    columnSizing,
+    availableWidth
+  ]);
   const initialLayoutReady = availableWidth != null;
   const resolvedLayout = React.useMemo(() => {
     const next = {};

package/dist/components/table/components/TableBody.cjs

@@ -20,6 +20,7 @@ function TableBody({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -38,6 +39,7 @@ function TableBody({
         selectionInputName,
         viewMode,
         getRowSeverity,
+        getContextMenuItems,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ViewMode } from '../../../hooks/useTableSettings';
-import type { ColumnItem } from '../Table.types';
+import type { ColumnItem, TableContextMenuItem } from '../Table.types';
 type Props<T extends Record<string, any>> = {
     data: T[];
     dataKey: keyof T;
@@ -12,9 +12,14 @@ type Props<T extends Record<string, any>> = {
     selectionInputName: string;
     viewMode?: ViewMode;
     getRowSeverity?: (row: T) => any;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -14,6 +14,7 @@ function TableBody({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -32,6 +33,7 @@ function TableBody({
         selectionInputName,
         viewMode,
         getRowSeverity,
+        getContextMenuItems,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

package/dist/components/table/components/TableHeader.cjs

@@ -12,6 +12,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TableHeader({
   columns,
   hasSelection,
+  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -47,7 +48,15 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        ))
+        )),
+        hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            className: [styles__default.default.headerCell, styles__default.default.contextMenuCell, styles__default.default.contextMenuHeaderCell].filter(Boolean).join(" "),
+            scope: "col",
+            "aria-label": "R\xE6kkehandlinger"
+          }
+        ) : null
       ] })
     }
   );

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

@@ -3,6 +3,7 @@ import type { ColumnItem, HeaderExtrasArgs, SortDirection } from '../Table.types
 type Props<T> = {
     columns: ColumnItem<T>[];
     hasSelection: boolean;
+    hasContextMenu: boolean;
     selectionMode: 'single' | 'multiple';
     allRowsSelected?: boolean;
     onSelectAllRows?: (isSelected: boolean) => void;
@@ -12,5 +13,5 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, hasContextMenu, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -6,6 +6,7 @@ import styles from '../Table.module.css';
 function TableHeader({
   columns,
   hasSelection,
+  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -41,7 +42,15 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        ))
+        )),
+        hasContextMenu ? /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: [styles.headerCell, styles.contextMenuCell, styles.contextMenuHeaderCell].filter(Boolean).join(" "),
+            scope: "col",
+            "aria-label": "R\xE6kkehandlinger"
+          }
+        ) : null
       ] })
     }
   );

package/dist/components/table/components/TableRow.cjs

@@ -1,9 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var Checkbox = require('../../../components/forms/checkbox/Checkbox');
 var RadioButton = require('../../../components/forms/radio-buttons/RadioButton');
+var Popover = require('../../../components/popover/Popover');
 var severity = require('../../../constants/severity');
+var Button = require('../../button/Button');
+var Menu = require('../../menu/Menu');
 var useTableRowInteractions = require('../hooks/useTableRowInteractions');
 var table_classes = require('../table.classes');
 var styles = require('../Table.module.css');
@@ -23,6 +27,7 @@ function TableRow({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -31,6 +36,11 @@ function TableRow({
   const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
   const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
   const canSelect = Boolean(selectedRows && onRowSelect);
+  const contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
+    row,
+    rowId,
+    open: () => onRowClick == null ? void 0 : onRowClick(row)
+  });
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions.useTableRowInteractions({
     row,
     rowId,
@@ -149,10 +159,74 @@ function TableRow({
             },
             column.id
           );
-        })
+        }),
+        (contextMenuItems == null ? void 0 : contextMenuItems.length) ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.contextMenuCell), "data-row-context-menu": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: table_classes.cx(styles__default.default.cellContent, styles__default.default.contextMenuCellContent),
+            "data-align": "right",
+            "data-row-context-menu": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { row, rowId, items: contextMenuItems })
+          }
+        ) }) : null
       ]
     }
   );
 }
+function RowContextMenu({
+  row,
+  rowId,
+  items
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          className: styles__default.default.contextMenuTrigger,
+          "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 }),
+          "data-row-context-menu": "true",
+          onClick: (e) => {
+            e.stopPropagation();
+            toggle(e);
+          }
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.Item,
+        {
+          active: item.active,
+          selected: item.selected,
+          disabled: item.disabled,
+          variant: item.variant,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-row-context-menu": "true",
+              onClick: (e) => {
+                e.stopPropagation();
+                item.onClick();
+                close();
+              },
+              children: item.label
+            }
+          )
+        },
+        index
+      )) })
+    }
+  );
+}
 
 exports.TableRow = TableRow;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ViewMode } from '../../../hooks/useTableSettings';
-import type { ColumnItem } from '../Table.types';
+import type { ColumnItem, TableContextMenuItem } from '../Table.types';
 type Props<T extends Record<string, any>> = {
     row: T;
     rowId: string | number;
@@ -11,9 +11,14 @@ type Props<T extends Record<string, any>> = {
     selectionInputName: string;
     viewMode?: ViewMode;
     getRowSeverity?: (row: T) => any;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableRow.js

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { MoreHorizontal } from 'lucide-react';
 import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
 import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
+import { Popover } from '../../../components/popover/Popover';
 import { SeverityBgColor } from '../../../constants/severity';
+import { Button } from '../../button/Button';
+import { Menu } from '../../menu/Menu';
 import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
@@ -17,6 +21,7 @@ function TableRow({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -25,6 +30,11 @@ function TableRow({
   const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
   const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
   const canSelect = Boolean(selectedRows && onRowSelect);
+  const contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
+    row,
+    rowId,
+    open: () => onRowClick == null ? void 0 : onRowClick(row)
+  });
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
     row,
     rowId,
@@ -143,10 +153,74 @@ function TableRow({
             },
             column.id
           );
-        })
+        }),
+        (contextMenuItems == null ? void 0 : contextMenuItems.length) ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.contextMenuCell), "data-row-context-menu": "true", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(styles.cellContent, styles.contextMenuCellContent),
+            "data-align": "right",
+            "data-row-context-menu": "true",
+            children: /* @__PURE__ */ jsx(RowContextMenu, { row, rowId, items: contextMenuItems })
+          }
+        ) }) : null
       ]
     }
   );
 }
+function RowContextMenu({
+  row,
+  rowId,
+  items
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          className: styles.contextMenuTrigger,
+          "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          icon: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16 }),
+          "data-row-context-menu": "true",
+          onClick: (e) => {
+            e.stopPropagation();
+            toggle(e);
+          }
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: items.map((item, index) => /* @__PURE__ */ jsx(
+        Menu.Item,
+        {
+          active: item.active,
+          selected: item.selected,
+          disabled: item.disabled,
+          variant: item.variant,
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-row-context-menu": "true",
+              onClick: (e) => {
+                e.stopPropagation();
+                item.onClick();
+                close();
+              },
+              children: item.label
+            }
+          )
+        },
+        index
+      )) })
+    }
+  );
+}
 
 export { TableRow };

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

@@ -13,9 +13,9 @@ function useTableRowInteractions({
 }) {
   const handleRowClick = react.useCallback(
     (e) => {
-      var _a;
+      var _a, _b;
       const target = e.target;
-      if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+      if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
         return;
       }
       if (table_utils.isModifierClick(e) && canSelect) {

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

@@ -11,9 +11,9 @@ function useTableRowInteractions({
 }) {
   const handleRowClick = useCallback(
     (e) => {
-      var _a;
+      var _a, _b;
       const target = e.target;
-      if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+      if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
         return;
       }
       if (isModifierClick(e) && canSelect) {

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

@@ -1,6 +1,7 @@
 'use strict';
 
 const SELECTION_COLUMN_PX = 40;
+const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -44,6 +45,7 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
+exports.CONTEXT_MENU_COLUMN_PX = CONTEXT_MENU_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
 exports.getAriaSort = getAriaSort;

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 40;
+export declare const CONTEXT_MENU_COLUMN_PX: 44;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;

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

@@ -1,4 +1,5 @@
 const SELECTION_COLUMN_PX = 40;
+const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -42,4 +43,4 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-export { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };
+export { CONTEXT_MENU_COLUMN_PX, DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };

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

@@ -93,9 +93,10 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -123,7 +124,7 @@ function buildDistributedColumnWidths(args) {
       fixed: false
     };
   });
-  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  const fixedWidth = selectionWidth + contextMenuWidth + 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)
@@ -148,18 +149,19 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth;
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
   const targetTrackWidth = Math.min(
     floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
   const totalWidth = Math.min(
-    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
     availableWidth
   );
   return {
     selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
     totalWidth
   };

package/dist/components/table/tanstackTable.utils.d.ts

@@ -14,11 +14,13 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
 export declare function buildDistributedColumnWidths(args: {
     table: any;
     hasSelection: boolean;
+    hasContextMenu: boolean;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
     availableWidth: number;
 }): {
     selectionWidth?: number;
+    contextMenuWidth?: number;
     widths: Record<string, number>;
     totalWidth: number;
 };

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

@@ -1,4 +1,4 @@
-import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_COLUMN_PX, CONTEXT_MENU_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
 
 function getColumnId(def, index) {
   const d = def;
@@ -91,9 +91,10 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? CONTEXT_MENU_COLUMN_PX : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -121,7 +122,7 @@ function buildDistributedColumnWidths(args) {
       fixed: false
     };
   });
-  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  const fixedWidth = selectionWidth + contextMenuWidth + 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)
@@ -146,18 +147,19 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth;
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
   const targetTrackWidth = Math.min(
     floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
   const totalWidth = Math.min(
-    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
     availableWidth
   );
   return {
     selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
     totalWidth
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.120",
+  "version": "0.0.121",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",

package/dist/components/table/components/TableLoadingBody.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SkeletonLoaderItem = require('../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-var table_classes = require('../table.classes');
-var styles = require('../Table.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function TableLoadingBody({ rows, columns, hasSelection }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.row, children: [
-    hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.selectionCell), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
-    columns.map((column) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          className: table_classes.cx(
-            styles__default.default.cell,
-            column.divider === "left" && styles__default.default.dividerLeft,
-            column.divider === "right" && styles__default.default.dividerRight
-          ),
-          "data-align": (_a = column.align) != null ? _a : "left",
-          "data-divider": column.divider,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
-        },
-        column.id
-      );
-    })
-  ] }, `loading-row-${rowIndex}`)) });
-}
-
-exports.TableLoadingBody = TableLoadingBody;

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

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ColumnItem } from '../Table.types';
-type Props<T> = {
-    rows: number;
-    columns: ColumnItem<T>[];
-    hasSelection: boolean;
-};
-export declare function TableLoadingBody<T>({ rows, columns, hasSelection }: Props<T>): ReactNode;
-export {};

package/dist/components/table/components/TableLoadingBody.js

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-import { cx } from '../table.classes';
-import styles from '../Table.module.css';
-
-function TableLoadingBody({ rows, columns, hasSelection }) {
-  return /* @__PURE__ */ jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: styles.row, children: [
-    hasSelection ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.selectionCell), children: /* @__PURE__ */ jsx("div", { className: styles.cellContent, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
-    columns.map((column) => {
-      var _a;
-      return /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: cx(
-            styles.cell,
-            column.divider === "left" && styles.dividerLeft,
-            column.divider === "right" && styles.dividerRight
-          ),
-          "data-align": (_a = column.align) != null ? _a : "left",
-          "data-divider": column.divider,
-          children: /* @__PURE__ */ jsx("div", { className: styles.cellContent, children: /* @__PURE__ */ jsx("div", { className: styles.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
-        },
-        column.id
-      );
-    })
-  ] }, `loading-row-${rowIndex}`)) });
-}
-
-export { TableLoadingBody };