@dbcdk/react-components 0.0.195 → 0.0.196

package/dist/components/menu/Menu.js

@@ -167,13 +167,7 @@ const MenuCheckItem = React.forwardRef(
     className,
     ...liProps
   }, ref) => {
-    const isSelected = checked;
-    const interactiveClass = [
-      styles.interactiveChild,
-      styles.item,
-      active ? styles.active : "",
-      isSelected ? styles.selected : ""
-    ].filter(Boolean).join(" ");
+    const interactiveClass = [styles.interactiveChild, styles.item, active ? styles.active : ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -187,7 +181,6 @@ const MenuCheckItem = React.forwardRef(
             ref: interactiveRef,
             role: interactiveProps == null ? void 0 : interactiveProps.role,
             tabIndex: -1,
-            "aria-selected": isSelected || void 0,
             "aria-disabled": disabled || void 0,
             className: interactiveClass,
             ...interactiveProps,
@@ -240,12 +233,7 @@ const MenuRadioItem = React.forwardRef(
     ...liProps
   }, ref) => {
     var _a, _b;
-    const interactiveClass = [
-      styles.interactiveChild,
-      styles.item,
-      active ? styles.active : "",
-      checked ? styles.selected : ""
-    ].filter(Boolean).join(" ");
+    const interactiveClass = [styles.interactiveChild, styles.item, active ? styles.active : ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -260,7 +248,6 @@ const MenuRadioItem = React.forwardRef(
             role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
             tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
             "aria-checked": checked || void 0,
-            "aria-selected": checked || void 0,
             "aria-disabled": disabled || void 0,
             className: interactiveClass,
             ...interactiveProps,
@@ -318,13 +305,7 @@ const MenuSwitchItem = React.forwardRef(
     className,
     ...liProps
   }, ref) => {
-    const isSelected = checked;
-    const interactiveClass = [
-      styles.interactiveChild,
-      styles.item,
-      active ? styles.active : "",
-      isSelected ? styles.selected : ""
-    ].filter(Boolean).join(" ");
+    const interactiveClass = [styles.interactiveChild, styles.item, active ? styles.active : ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -338,7 +319,6 @@ const MenuSwitchItem = React.forwardRef(
             ref: interactiveRef,
             role: interactiveProps == null ? void 0 : interactiveProps.role,
             tabIndex: -1,
-            "aria-selected": isSelected || void 0,
             "aria-disabled": disabled || void 0,
             className: interactiveClass,
             ...interactiveProps,

package/dist/components/menu/Menu.module.css

@@ -184,9 +184,10 @@
   background-color: var(--color-bg-selected-hover);
 }
 
-/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
-.interactive[aria-checked='true'],
-.row > .interactiveChild[aria-checked='true'] {
+/* Checked (legacy support; kept in case any interactive element still uses aria-checked).
+   Menu.CheckItem/RadioItem/SwitchItem wrappers (.interactiveChild) are excluded on purpose:
+   their control already shows the checked state. */
+.interactive[aria-checked='true'] {
   background-color: var(--color-bg-selected);
   color: var(--color-fg-default);
 }

package/dist/components/metric-tile/MetricTile.cjs

@@ -1,8 +1,9 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var client = require('../../client');
+var Tooltip = require('../../components/overlay/tooltip/Tooltip');
 var styles = require('./MetricTile.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -88,7 +89,7 @@ const MetricTileBase = ({
       onClick == null ? void 0 : onClick();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: styles__default.default.tile,

package/dist/components/metric-tile/MetricTile.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Children, isValidElement } from 'react';
-import { Tooltip } from '../../client';
+import { Tooltip } from '../../components/overlay/tooltip/Tooltip';
 import styles from './MetricTile.module.css';
 
 function toSize(v) {

package/dist/components/overlay/tooltip/Tooltip.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -26,7 +27,9 @@ function Tooltip({
   open,
   offset = 8,
   delayOpenMs,
-  delayCloseMs
+  delayCloseMs,
+  focusOpenMode,
+  closeOnPointerDown
 }) {
   var _a;
   const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
@@ -35,7 +38,9 @@ function Tooltip({
     offset,
     open,
     delayOpenMs,
-    delayCloseMs
+    delayCloseMs,
+    focusOpenMode,
+    closeOnPointerDown
   });
   if (!content) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   const child = children;

package/dist/components/overlay/tooltip/Tooltip.d.ts

@@ -8,5 +8,11 @@ export interface TooltipProps {
     offset?: number;
     delayOpenMs?: number;
     delayCloseMs?: number;
+    /**
+     * When the tooltip should open on focus: only for keyboard focus (default),
+     * for any focus (e.g. clicking into an input), or never.
+     */
+    focusOpenMode?: 'focus-visible' | 'any' | 'off';
+    closeOnPointerDown?: boolean;
 }
-export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, }: TooltipProps): ReactElement;
+export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, focusOpenMode, closeOnPointerDown, }: TooltipProps): ReactElement;

package/dist/components/overlay/tooltip/Tooltip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cloneElement } from 'react';
 import { useTooltipTrigger } from './useTooltipTrigger';
@@ -24,7 +25,9 @@ function Tooltip({
   open,
   offset = 8,
   delayOpenMs,
-  delayCloseMs
+  delayCloseMs,
+  focusOpenMode,
+  closeOnPointerDown
 }) {
   var _a;
   const { triggerProps } = useTooltipTrigger({
@@ -33,7 +36,9 @@ function Tooltip({
     offset,
     open,
     delayOpenMs,
-    delayCloseMs
+    delayCloseMs,
+    focusOpenMode,
+    closeOnPointerDown
   });
   if (!content) return /* @__PURE__ */ jsx(Fragment, { children });
   const child = children;

package/dist/components/overlay/tooltip/useTooltipTrigger.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');
@@ -24,6 +25,7 @@ function useTooltipTrigger(options) {
   const isOpen = isControlled ? !!open : uncontrolledOpen;
   const openTimer = react.useRef(null);
   const closeTimer = react.useRef(null);
+  const openedByFocusRef = react.useRef(false);
   const clearTimers = () => {
     if (openTimer.current) window.clearTimeout(openTimer.current);
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
@@ -79,6 +81,7 @@ function useTooltipTrigger(options) {
   const onPointerLeave = () => {
     clearTimers();
     if (isControlled) return;
+    if (openedByFocusRef.current) return;
     closeTimer.current = window.setTimeout(() => setOpen(false), delayCloseMs);
   };
   const onPointerDown = () => {
@@ -89,12 +92,15 @@ function useTooltipTrigger(options) {
     clearTimers();
     if (focusOpenMode === "off") return;
     const shouldOpen = focusOpenMode === "any" || e.currentTarget.matches(":focus-visible");
-    if (!isControlled && shouldOpen) {
+    if (!shouldOpen) return;
+    openedByFocusRef.current = true;
+    if (!isControlled) {
       openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
     }
   };
   const onBlur = () => {
     clearTimers();
+    openedByFocusRef.current = false;
     if (!isControlled) setOpen(false);
   };
   return {

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -1,3 +1,4 @@
+'use client';
 import { useContext, useId, useRef, useState, useCallback, useEffect } from 'react';
 import { TooltipContext } from './TooltipProvider';
 
@@ -22,6 +23,7 @@ function useTooltipTrigger(options) {
   const isOpen = isControlled ? !!open : uncontrolledOpen;
   const openTimer = useRef(null);
   const closeTimer = useRef(null);
+  const openedByFocusRef = useRef(false);
   const clearTimers = () => {
     if (openTimer.current) window.clearTimeout(openTimer.current);
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
@@ -77,6 +79,7 @@ function useTooltipTrigger(options) {
   const onPointerLeave = () => {
     clearTimers();
     if (isControlled) return;
+    if (openedByFocusRef.current) return;
     closeTimer.current = window.setTimeout(() => setOpen(false), delayCloseMs);
   };
   const onPointerDown = () => {
@@ -87,12 +90,15 @@ function useTooltipTrigger(options) {
     clearTimers();
     if (focusOpenMode === "off") return;
     const shouldOpen = focusOpenMode === "any" || e.currentTarget.matches(":focus-visible");
-    if (!isControlled && shouldOpen) {
+    if (!shouldOpen) return;
+    openedByFocusRef.current = true;
+    if (!isControlled) {
       openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
     }
   };
   const onBlur = () => {
     clearTimers();
+    openedByFocusRef.current = false;
     if (!isControlled) setOpen(false);
   };
   return {

package/dist/components/page-layout/PageLayout.module.css

@@ -1,6 +1,6 @@
 /* When PageLayout owns scrolling, the body shouldn't reserve scrollbar gutter space.
    This prevents the right-side gap that body { overflow-y: scroll } would otherwise create. */
-:global(body):has([data-contain-scrolling]) {
+:global(body):has(.root[data-contain-scrolling]) {
   overflow: hidden;
 }
 

package/dist/components/table/Table.cjs

@@ -4,19 +4,23 @@
 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 TableHeaderSettings = require('./components/table-settings/TableHeaderSettings');
 var TableBody = require('./components/TableBody');
 var TableHeader = require('./components/TableHeader');
+var TableSkeletonBody = require('./components/TableSkeletonBody');
 var table_classes = require('./table.classes');
 var styles = require('./Table.module.css');
 var table_utils = require('./table.utils');
+var tableSettings_utils = require('./tableSettings.utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+const DEFAULT_SKELETON_ROWS = 10;
+const MAX_SKELETON_ROWS = 20;
 function Table({
   data,
   dataKey,
@@ -30,7 +34,8 @@ function Table({
   emptyConfig,
   variant = "primary",
   size = "md",
-  viewMode,
+  viewMode: viewModeProp,
+  striped: stripedProp,
   fillViewport = false,
   fillViewportBottomOffset = 0,
   containScrolling = true,
@@ -40,6 +45,9 @@ function Table({
   measuringLayout = false,
   toolbar,
   headerExtras,
+  headerActions: headerActionsProp,
+  settings,
+  settingsOptions,
   take,
   skip,
   totalItemsCount,
@@ -61,7 +69,22 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  const visibleColumns = react.useMemo(() => table_utils.getVisibleColumns(columns), [columns]);
+  var _a;
+  const viewMode = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode;
+  const striped = (_a = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _a : false;
+  const settingsVisibleIds = settings == null ? void 0 : settings.visibleColumnIds;
+  const visibleColumns = react.useMemo(
+    () => (settingsVisibleIds == null ? void 0 : settingsVisibleIds.length) ? tableSettings_utils.filterColumnsBySettings(columns, settingsVisibleIds) : table_utils.getVisibleColumns(columns),
+    [columns, settingsVisibleIds]
+  );
+  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerActions, children: [
+    headerActionsProp,
+    settings ? /* @__PURE__ */ jsxRuntime.jsx(TableHeaderSettings.TableHeaderSettings, { settings, options: settingsOptions, columns }) : null
+  ] }) : null;
+  const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarWithHeaderActions, children: [
+    toolbar,
+    headerActions
+  ] }) : toolbar;
   const selectionInputName = react.useId();
   const internalTableRootRef = react.useRef(null);
   const tableRootRefWrapper = react.useRef(tableRootRef);
@@ -69,17 +92,14 @@ function Table({
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = react.useRef(null);
   const [paginationHeight, setPaginationHeight] = react.useState(0);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     const element = paginationRef.current;
     if (!element) return;
     const measure = () => setPaginationHeight(element.getBoundingClientRect().height);
-    const frame = requestAnimationFrame(measure);
+    measure();
     const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
     observer == null ? void 0 : observer.observe(element);
-    return () => {
-      cancelAnimationFrame(frame);
-      observer == null ? void 0 : observer.disconnect();
-    };
+    return () => observer == null ? void 0 : observer.disconnect();
   }, [hasPagination]);
   const [expandedRows, setExpandedRows] = react.useState(() => /* @__PURE__ */ new Set());
   const handleToggleRowExpand = react.useCallback((rowId) => {
@@ -99,7 +119,7 @@ function Table({
     min: 0
   });
   const fillViewportActive = fillViewport && containScrolling;
-  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
+  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : stickyHeader === void 0 && containScrolling ? "0px" : void 0;
   const setTableRootRef = react.useCallback((node) => {
     internalTableRootRef.current = node;
     if (typeof tableRootRefWrapper.current === "function") {
@@ -167,16 +187,17 @@ function Table({
     measuringLayout && styles__default.default.measuringLayout,
     getRowSeverity && styles__default.default.severityTable
   );
+  const tableElementClassName = table_classes.cx(styles__default.default.tableElement, striped && "dbc-table--striped");
   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(
+      children: !loading && !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,
+          className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
@@ -197,17 +218,25 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems),
+                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
                 sortDirection,
                 onSortChange,
                 headerExtras,
+                headerActions,
                 stickyTop
               }
             ),
-            bodyContent
+            loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx(
+              TableSkeletonBody.TableSkeletonBody,
+              {
+                columns: visibleColumns,
+                rows: Math.min(take != null ? take : DEFAULT_SKELETON_ROWS, MAX_SKELETON_ROWS),
+                hasSelection
+              }
+            ) : bodyContent
           ]
         }
       )
@@ -223,7 +252,7 @@ function Table({
           ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
         },
         children: [
-          toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbar }) : null,
+          toolbarContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbarContent }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -246,7 +275,7 @@ function Table({
         position: "relative"
       },
       children: [
-        toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbar }) : null,
+        toolbarContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbarContent }) : null,
         tableShell,
         paginationEl
       ]

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, 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 declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode: viewModeProp, striped: stripedProp, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, headerActions: headerActionsProp, settings, settingsOptions, 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,16 +1,20 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useId, useRef, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useId, useRef, useState, useLayoutEffect, 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 { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
+import { TableSkeletonBody } from './components/TableSkeletonBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
 import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { filterColumnsBySettings } from './tableSettings.utils';
 
+const DEFAULT_SKELETON_ROWS = 10;
+const MAX_SKELETON_ROWS = 20;
 function Table({
   data,
   dataKey,
@@ -24,7 +28,8 @@ function Table({
   emptyConfig,
   variant = "primary",
   size = "md",
-  viewMode,
+  viewMode: viewModeProp,
+  striped: stripedProp,
   fillViewport = false,
   fillViewportBottomOffset = 0,
   containScrolling = true,
@@ -34,6 +39,9 @@ function Table({
   measuringLayout = false,
   toolbar,
   headerExtras,
+  headerActions: headerActionsProp,
+  settings,
+  settingsOptions,
   take,
   skip,
   totalItemsCount,
@@ -55,7 +63,22 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+  var _a;
+  const viewMode = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode;
+  const striped = (_a = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _a : false;
+  const settingsVisibleIds = settings == null ? void 0 : settings.visibleColumnIds;
+  const visibleColumns = useMemo(
+    () => (settingsVisibleIds == null ? void 0 : settingsVisibleIds.length) ? filterColumnsBySettings(columns, settingsVisibleIds) : getVisibleColumns(columns),
+    [columns, settingsVisibleIds]
+  );
+  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+    headerActionsProp,
+    settings ? /* @__PURE__ */ jsx(TableHeaderSettings, { settings, options: settingsOptions, columns }) : null
+  ] }) : null;
+  const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxs("div", { className: styles.toolbarWithHeaderActions, children: [
+    toolbar,
+    headerActions
+  ] }) : toolbar;
   const selectionInputName = useId();
   const internalTableRootRef = useRef(null);
   const tableRootRefWrapper = useRef(tableRootRef);
@@ -63,17 +86,14 @@ function Table({
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = useRef(null);
   const [paginationHeight, setPaginationHeight] = useState(0);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const element = paginationRef.current;
     if (!element) return;
     const measure = () => setPaginationHeight(element.getBoundingClientRect().height);
-    const frame = requestAnimationFrame(measure);
+    measure();
     const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
     observer == null ? void 0 : observer.observe(element);
-    return () => {
-      cancelAnimationFrame(frame);
-      observer == null ? void 0 : observer.disconnect();
-    };
+    return () => observer == null ? void 0 : observer.disconnect();
   }, [hasPagination]);
   const [expandedRows, setExpandedRows] = useState(() => /* @__PURE__ */ new Set());
   const handleToggleRowExpand = useCallback((rowId) => {
@@ -93,7 +113,7 @@ function Table({
     min: 0
   });
   const fillViewportActive = fillViewport && containScrolling;
-  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
+  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : stickyHeader === void 0 && containScrolling ? "0px" : void 0;
   const setTableRootRef = useCallback((node) => {
     internalTableRootRef.current = node;
     if (typeof tableRootRefWrapper.current === "function") {
@@ -161,16 +181,17 @@ function Table({
     measuringLayout && styles.measuringLayout,
     getRowSeverity && styles.severityTable
   );
+  const tableElementClassName = cx(styles.tableElement, striped && "dbc-table--striped");
   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(
+      children: !loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
         "table",
         {
-          className: styles.tableElement,
+          className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
@@ -191,17 +212,25 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems),
+                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
                 sortDirection,
                 onSortChange,
                 headerExtras,
+                headerActions,
                 stickyTop
               }
             ),
-            bodyContent
+            loading && !data.length ? /* @__PURE__ */ jsx(
+              TableSkeletonBody,
+              {
+                columns: visibleColumns,
+                rows: Math.min(take != null ? take : DEFAULT_SKELETON_ROWS, MAX_SKELETON_ROWS),
+                hasSelection
+              }
+            ) : bodyContent
           ]
         }
       )
@@ -217,7 +246,7 @@ function Table({
           ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
         },
         children: [
-          toolbar ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null,
+          toolbarContent ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbarContent }) : null,
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -240,7 +269,7 @@ function Table({
         position: "relative"
       },
       children: [
-        toolbar ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null,
+        toolbarContent ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbarContent }) : null,
         tableShell,
         paginationEl
       ]