@dbcdk/react-components 0.0.196 → 0.0.198

package/dist/components/scroll-fade/ScrollFade.module.css

@@ -0,0 +1,71 @@
+/* Positions the fades over the scroll container without scrolling along with it. */
+.frame {
+  --scroll-fade-color-resolved: var(--scroll-fade-color, var(--color-bg-surface));
+  --scroll-fade-size-resolved: var(--scroll-fade-size, var(--spacing-lg));
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  /* Clips the fades to the parent's rounded corners. */
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+/* The scroll container fills the frame and shrinks with it. */
+.frame > :first-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.fadeTop,
+.fadeBottom,
+.fadeLeft,
+.fadeRight {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-fast) ease;
+}
+
+.fadeTop[data-visible='true'],
+.fadeBottom[data-visible='true'],
+.fadeLeft[data-visible='true'],
+.fadeRight[data-visible='true'] {
+  opacity: 1;
+}
+
+/* Kept clear of classic scrollbars, whose sizes are 0 when overlaid. */
+.fadeTop,
+.fadeBottom {
+  inset-inline: 0 var(--scroll-fade-scrollbar-width);
+  height: var(--scroll-fade-size-resolved);
+}
+
+.fadeLeft,
+.fadeRight {
+  inset-block: 0 var(--scroll-fade-scrollbar-height);
+  width: var(--scroll-fade-size-resolved);
+}
+
+.fadeTop {
+  top: 0;
+  background: linear-gradient(to bottom, var(--scroll-fade-color-resolved), transparent);
+}
+
+.fadeBottom {
+  bottom: var(--scroll-fade-scrollbar-height);
+  background: linear-gradient(to top, var(--scroll-fade-color-resolved), transparent);
+}
+
+.fadeLeft {
+  left: 0;
+  background: linear-gradient(to right, var(--scroll-fade-color-resolved), transparent);
+}
+
+.fadeRight {
+  right: var(--scroll-fade-scrollbar-width);
+  background: linear-gradient(to left, var(--scroll-fade-color-resolved), transparent);
+}

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

@@ -22,6 +22,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   debounce = true,
   debounceMs = 800,
   onSearch,
+  onClear,
   onSelect,
   displayPopover,
   resultKeys,
@@ -33,6 +34,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   loading,
   enableHotkey = true,
   onButtonClick,
+  submitOnEnter = false,
   buttonLabel,
   buttonIcon,
   buttonAriaLabel,
@@ -86,7 +88,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
     return () => clearTimeout(handler);
   }, [draft, debounce, debounceMs]);
   react.useEffect(() => {
-    function handleKeyDown(event) {
+    function handleKeyDown2(event) {
       var _a2;
       if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -94,8 +96,8 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
       }
     }
     if (enableHotkey) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
+      window.addEventListener("keydown", handleKeyDown2);
+      return () => window.removeEventListener("keydown", handleKeyDown2);
     }
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
@@ -134,9 +136,10 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   const handleClear = react.useCallback(() => {
     var _a2;
     reset();
+    onClear == null ? void 0 : onClear();
     onSearch == null ? void 0 : onSearch("");
     (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
-  }, [onSearch]);
+  }, [onClear, onSearch]);
   react.useEffect(() => {
     setActiveIndex(null);
   }, [result]);
@@ -154,6 +157,36 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
     value: draft,
     onChange: handleChange
   };
+  const handleKeyDown = (e) => {
+    var _a2;
+    if (result == null ? void 0 : result.length) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(result.length - 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (activeIndex !== null) {
+          handleSelect(result[activeIndex]);
+        } else if (onButtonClick) {
+          onButtonClick();
+        }
+      }
+    } else if (e.key === "Enter" && submitOnEnter && onButtonClick) {
+      e.preventDefault();
+      onButtonClick();
+    }
+    if (e.key === "Escape") reset();
+    (_a2 = inputProps.onKeyDown) == null ? void 0 : _a2.call(inputProps, e);
+  };
   if (!displayPopover) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -177,6 +210,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
             buttonIcon: trailingButtonIcon,
             buttonAriaLabel: trailingButtonAriaLabel,
             ...inputProps,
+            onKeyDown: handleKeyDown,
             placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
           }
         )
@@ -263,37 +297,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
                 buttonIcon: trailingButtonIcon,
                 buttonAriaLabel: trailingButtonAriaLabel,
                 ...inputProps,
-                onKeyDown: (e) => {
-                  var _a3;
-                  if (result == null ? void 0 : result.length) {
-                    if (e.key === "ArrowDown") {
-                      e.preventDefault();
-                      setActiveIndex(
-                        (prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1
-                      );
-                    } else if (e.key === "ArrowUp") {
-                      e.preventDefault();
-                      setActiveIndex(
-                        (prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1
-                      );
-                    } else if (e.key === "Home") {
-                      e.preventDefault();
-                      setActiveIndex(0);
-                    } else if (e.key === "End") {
-                      e.preventDefault();
-                      setActiveIndex(result.length - 1);
-                    } else if (e.key === "Enter") {
-                      e.preventDefault();
-                      if (activeIndex !== null) {
-                        handleSelect(result[activeIndex]);
-                      } else if (onButtonClick) {
-                        onButtonClick();
-                      }
-                    }
-                  }
-                  if (e.key === "Escape") reset();
-                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
-                },
+                onKeyDown: handleKeyDown,
                 placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
               }
             );

package/dist/components/search-box/SearchBox.d.ts

@@ -12,6 +12,7 @@ export type SearchBoxProps<T extends Record<string, unknown>> = Omit<InputProps,
     debounce?: boolean;
     debounceMs?: number;
     onSearch?: (query: string) => void;
+    onClear?: () => void;
     onSelect?: (item: T) => void;
     displayPopover?: boolean;
     initialTemplate?: React.ReactNode;
@@ -28,6 +29,7 @@ export type SearchBoxProps<T extends Record<string, unknown>> = Omit<InputProps,
     enableHotkey?: boolean;
     fullWidth?: boolean;
     onButtonClick?: () => void;
+    submitOnEnter?: boolean;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
     buttonAriaLabel?: string;

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

@@ -16,6 +16,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   debounce = true,
   debounceMs = 800,
   onSearch,
+  onClear,
   onSelect,
   displayPopover,
   resultKeys,
@@ -27,6 +28,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   loading,
   enableHotkey = true,
   onButtonClick,
+  submitOnEnter = false,
   buttonLabel,
   buttonIcon,
   buttonAriaLabel,
@@ -80,7 +82,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
     return () => clearTimeout(handler);
   }, [draft, debounce, debounceMs]);
   useEffect(() => {
-    function handleKeyDown(event) {
+    function handleKeyDown2(event) {
       var _a2;
       if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -88,8 +90,8 @@ const SearchBox = forwardRef(function SearchBoxInner({
       }
     }
     if (enableHotkey) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
+      window.addEventListener("keydown", handleKeyDown2);
+      return () => window.removeEventListener("keydown", handleKeyDown2);
     }
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
@@ -128,9 +130,10 @@ const SearchBox = forwardRef(function SearchBoxInner({
   const handleClear = useCallback(() => {
     var _a2;
     reset();
+    onClear == null ? void 0 : onClear();
     onSearch == null ? void 0 : onSearch("");
     (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
-  }, [onSearch]);
+  }, [onClear, onSearch]);
   useEffect(() => {
     setActiveIndex(null);
   }, [result]);
@@ -148,6 +151,36 @@ const SearchBox = forwardRef(function SearchBoxInner({
     value: draft,
     onChange: handleChange
   };
+  const handleKeyDown = (e) => {
+    var _a2;
+    if (result == null ? void 0 : result.length) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(result.length - 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (activeIndex !== null) {
+          handleSelect(result[activeIndex]);
+        } else if (onButtonClick) {
+          onButtonClick();
+        }
+      }
+    } else if (e.key === "Enter" && submitOnEnter && onButtonClick) {
+      e.preventDefault();
+      onButtonClick();
+    }
+    if (e.key === "Escape") reset();
+    (_a2 = inputProps.onKeyDown) == null ? void 0 : _a2.call(inputProps, e);
+  };
   if (!displayPopover) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -171,6 +204,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
             buttonIcon: trailingButtonIcon,
             buttonAriaLabel: trailingButtonAriaLabel,
             ...inputProps,
+            onKeyDown: handleKeyDown,
             placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
           }
         )
@@ -257,37 +291,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
                 buttonIcon: trailingButtonIcon,
                 buttonAriaLabel: trailingButtonAriaLabel,
                 ...inputProps,
-                onKeyDown: (e) => {
-                  var _a3;
-                  if (result == null ? void 0 : result.length) {
-                    if (e.key === "ArrowDown") {
-                      e.preventDefault();
-                      setActiveIndex(
-                        (prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1
-                      );
-                    } else if (e.key === "ArrowUp") {
-                      e.preventDefault();
-                      setActiveIndex(
-                        (prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1
-                      );
-                    } else if (e.key === "Home") {
-                      e.preventDefault();
-                      setActiveIndex(0);
-                    } else if (e.key === "End") {
-                      e.preventDefault();
-                      setActiveIndex(result.length - 1);
-                    } else if (e.key === "Enter") {
-                      e.preventDefault();
-                      if (activeIndex !== null) {
-                        handleSelect(result[activeIndex]);
-                      } else if (onButtonClick) {
-                        onButtonClick();
-                      }
-                    }
-                  }
-                  if (e.key === "Escape") reset();
-                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
-                },
+                onKeyDown: handleKeyDown,
                 placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
               }
             );

package/dist/components/table/Table.cjs

@@ -5,11 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Pagination = require('../../components/pagination/Pagination');
 var useViewportFill = require('../../hooks/useViewportFill');
+var refs_utils = require('../../utils/refs.utils');
+var columnLayout_utils = require('./columnLayout.utils');
 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 useElementWidth = require('./hooks/useElementWidth');
 var table_classes = require('./table.classes');
 var styles = require('./Table.module.css');
 var table_utils = require('./table.utils');
@@ -48,6 +51,7 @@ function Table({
   headerActions: headerActionsProp,
   settings,
   settingsOptions,
+  settingsColumns,
   take,
   skip,
   totalItemsCount,
@@ -69,9 +73,9 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  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;
+  var _a, _b;
+  const viewMode = (_a = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode) != null ? _a : table_utils.DEFAULT_VIEW_MODE;
+  const striped = (_b = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _b : 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),
@@ -79,7 +83,14 @@ function Table({
   );
   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
+    settings ? /* @__PURE__ */ jsxRuntime.jsx(
+      TableHeaderSettings.TableHeaderSettings,
+      {
+        settings,
+        options: settingsOptions,
+        columns: settingsColumns != null ? settingsColumns : columns
+      }
+    ) : null
   ] }) : null;
   const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarWithHeaderActions, children: [
     toolbar,
@@ -87,8 +98,30 @@ function Table({
   ] }) : toolbar;
   const selectionInputName = react.useId();
   const internalTableRootRef = react.useRef(null);
-  const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasRowActions = Boolean(getContextMenuItems) || table_utils.showsExpandToggle(expandableRows, viewMode);
+  const hasHeaderActions = headerActionsProp != null || Boolean(settings);
+  const { px: actionReservePx, compactHeader: compactHeaderActionReserve } = table_utils.getActionsReserve({
+    hasRowActions,
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader
+  });
+  const distributeWidths = react.useMemo(
+    () => tableWidth == null && (columnLayout_utils.usesDistributedWidths(visibleColumns) || showHeader && hasHeaderActions),
+    [tableWidth, visibleColumns, showHeader, hasHeaderActions]
+  );
+  const availableWidth = useElementWidth.useElementWidth(internalTableRootRef, distributeWidths);
+  const distributedLayout = react.useMemo(
+    () => distributeWidths && availableWidth != null ? columnLayout_utils.distributeColumnWidths({
+      tracks: columnLayout_utils.buildColumnTracks(visibleColumns),
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      availableWidth
+    }) : null,
+    [distributeWidths, availableWidth, visibleColumns, hasSelection, actionReservePx]
+  );
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = react.useRef(null);
   const [paginationHeight, setPaginationHeight] = react.useState(0);
@@ -120,14 +153,10 @@ function Table({
   });
   const fillViewportActive = fillViewport && containScrolling;
   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") {
-      tableRootRefWrapper.current(node);
-    } else if (tableRootRefWrapper.current) {
-      tableRootRefWrapper.current.current = node;
-    }
-  }, []);
+  const setTableRootRef = react.useMemo(
+    () => refs_utils.mergeRefs(internalTableRootRef, tableRootRef),
+    [tableRootRef]
+  );
   const handlePageChange = react.useCallback(
     (e) => {
       onPageChange == null ? void 0 : onPageChange(e);
@@ -184,9 +213,10 @@ function Table({
     styles__default.default.tableRoot,
     styles__default.default[variant],
     styles__default.default[size],
-    measuringLayout && styles__default.default.measuringLayout,
+    (measuringLayout || distributeWidths && !distributedLayout) && styles__default.default.measuringLayout,
     getRowSeverity && styles__default.default.severityTable
   );
+  const resolvedTableWidth = tableWidth != null ? tableWidth : distributedLayout == null ? void 0 : distributedLayout.totalWidth;
   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",
@@ -200,17 +230,15 @@ function Table({
           className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
-          style: tableWidth != null ? { width: tableWidth } : void 0,
+          style: resolvedTableWidth != null ? { width: resolvedTableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
               hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: table_utils.SELECTION_COLUMN_PX } }) : null,
-              visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-                "col",
-                {
-                  style: column.width != null ? { width: column.width } : void 0
-                },
-                column.id
-              ))
+              visibleColumns.map((column) => {
+                var _a2;
+                const width = (_a2 = distributedLayout == null ? void 0 : distributedLayout.widths[column.id]) != null ? _a2 : column.width;
+                return /* @__PURE__ */ jsxRuntime.jsx("col", { style: width != null ? { width } : void 0 }, column.id);
+              })
             ] }),
             showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
@@ -218,7 +246,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
+                hasRowContextMenu: hasRowActions,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
@@ -226,6 +254,7 @@ function Table({
                 onSortChange,
                 headerExtras,
                 headerActions,
+                compactHeaderActionReserve,
                 stickyTop
               }
             ),

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: 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 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, settingsColumns, 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

@@ -3,14 +3,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useId, useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
 import { useViewportFill } from '../../hooks/useViewportFill';
+import { mergeRefs } from '../../utils/refs.utils';
+import { usesDistributedWidths, distributeColumnWidths, buildColumnTracks } from './columnLayout.utils';
 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 { useElementWidth } from './hooks/useElementWidth';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_VIEW_MODE, getVisibleColumns, showsExpandToggle, getActionsReserve, SELECTION_COLUMN_PX } from './table.utils';
 import { filterColumnsBySettings } from './tableSettings.utils';
 
 const DEFAULT_SKELETON_ROWS = 10;
@@ -42,6 +45,7 @@ function Table({
   headerActions: headerActionsProp,
   settings,
   settingsOptions,
+  settingsColumns,
   take,
   skip,
   totalItemsCount,
@@ -63,9 +67,9 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  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;
+  var _a, _b;
+  const viewMode = (_a = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode) != null ? _a : DEFAULT_VIEW_MODE;
+  const striped = (_b = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _b : false;
   const settingsVisibleIds = settings == null ? void 0 : settings.visibleColumnIds;
   const visibleColumns = useMemo(
     () => (settingsVisibleIds == null ? void 0 : settingsVisibleIds.length) ? filterColumnsBySettings(columns, settingsVisibleIds) : getVisibleColumns(columns),
@@ -73,7 +77,14 @@ function Table({
   );
   const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
     headerActionsProp,
-    settings ? /* @__PURE__ */ jsx(TableHeaderSettings, { settings, options: settingsOptions, columns }) : null
+    settings ? /* @__PURE__ */ jsx(
+      TableHeaderSettings,
+      {
+        settings,
+        options: settingsOptions,
+        columns: settingsColumns != null ? settingsColumns : columns
+      }
+    ) : null
   ] }) : null;
   const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxs("div", { className: styles.toolbarWithHeaderActions, children: [
     toolbar,
@@ -81,8 +92,30 @@ function Table({
   ] }) : toolbar;
   const selectionInputName = useId();
   const internalTableRootRef = useRef(null);
-  const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasRowActions = Boolean(getContextMenuItems) || showsExpandToggle(expandableRows, viewMode);
+  const hasHeaderActions = headerActionsProp != null || Boolean(settings);
+  const { px: actionReservePx, compactHeader: compactHeaderActionReserve } = getActionsReserve({
+    hasRowActions,
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader
+  });
+  const distributeWidths = useMemo(
+    () => tableWidth == null && (usesDistributedWidths(visibleColumns) || showHeader && hasHeaderActions),
+    [tableWidth, visibleColumns, showHeader, hasHeaderActions]
+  );
+  const availableWidth = useElementWidth(internalTableRootRef, distributeWidths);
+  const distributedLayout = useMemo(
+    () => distributeWidths && availableWidth != null ? distributeColumnWidths({
+      tracks: buildColumnTracks(visibleColumns),
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      availableWidth
+    }) : null,
+    [distributeWidths, availableWidth, visibleColumns, hasSelection, actionReservePx]
+  );
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = useRef(null);
   const [paginationHeight, setPaginationHeight] = useState(0);
@@ -114,14 +147,10 @@ function Table({
   });
   const fillViewportActive = fillViewport && containScrolling;
   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") {
-      tableRootRefWrapper.current(node);
-    } else if (tableRootRefWrapper.current) {
-      tableRootRefWrapper.current.current = node;
-    }
-  }, []);
+  const setTableRootRef = useMemo(
+    () => mergeRefs(internalTableRootRef, tableRootRef),
+    [tableRootRef]
+  );
   const handlePageChange = useCallback(
     (e) => {
       onPageChange == null ? void 0 : onPageChange(e);
@@ -178,9 +207,10 @@ function Table({
     styles.tableRoot,
     styles[variant],
     styles[size],
-    measuringLayout && styles.measuringLayout,
+    (measuringLayout || distributeWidths && !distributedLayout) && styles.measuringLayout,
     getRowSeverity && styles.severityTable
   );
+  const resolvedTableWidth = tableWidth != null ? tableWidth : distributedLayout == null ? void 0 : distributedLayout.totalWidth;
   const tableElementClassName = cx(styles.tableElement, striped && "dbc-table--striped");
   const tableShell = /* @__PURE__ */ jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsx(
     "div",
@@ -194,17 +224,15 @@ function Table({
           className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
-          style: tableWidth != null ? { width: tableWidth } : void 0,
+          style: resolvedTableWidth != null ? { width: resolvedTableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxs("colgroup", { children: [
               hasSelection ? /* @__PURE__ */ jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null,
-              visibleColumns.map((column) => /* @__PURE__ */ jsx(
-                "col",
-                {
-                  style: column.width != null ? { width: column.width } : void 0
-                },
-                column.id
-              ))
+              visibleColumns.map((column) => {
+                var _a2;
+                const width = (_a2 = distributedLayout == null ? void 0 : distributedLayout.widths[column.id]) != null ? _a2 : column.width;
+                return /* @__PURE__ */ jsx("col", { style: width != null ? { width } : void 0 }, column.id);
+              })
             ] }),
             showHeader && /* @__PURE__ */ jsx(
               TableHeader,
@@ -212,7 +240,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
+                hasRowContextMenu: hasRowActions,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
@@ -220,6 +248,7 @@ function Table({
                 onSortChange,
                 headerExtras,
                 headerActions,
+                compactHeaderActionReserve,
                 stickyTop
               }
             ),