@dynatrace/strato-components 3.7.1 → 3.8.0

package/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-7-1 {
+._ytdpsw0-3-8-0 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,80 +6,80 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-7-1 {
+._ytdpsw1-3-8-0 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-7-1 {
+._ytdpsw2-3-8-0 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-7-1 {
+._ytdpsw3-3-8-0 {
   overflow: hidden;
 }
-._ytdpsw4-3-7-1 {
+._ytdpsw4-3-8-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._ytdpsw4-3-7-1::-webkit-scrollbar-track {
+._ytdpsw4-3-8-0::-webkit-scrollbar-track {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-7-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw4-3-8-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpsw4-3-7-1::-webkit-scrollbar-track:vertical {
+._ytdpsw4-3-8-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1 {
+._1jgl8s50-3-8-0 ._ytdpsw4-3-8-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1::-webkit-scrollbar-track {
+._1jgl8s50-3-8-0 ._ytdpsw4-3-8-0::-webkit-scrollbar-track {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-8-0 ._ytdpsw4-3-8-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._1jgl8s50-3-7-1 ._ytdpsw4-3-7-1::-webkit-scrollbar-track:vertical {
+._1jgl8s50-3-8-0 ._ytdpsw4-3-8-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-top-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }
-._ytdpsw5-3-7-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw5-3-8-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._ytdpsw5-3-7-1::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-8-0 ._ytdpsw5-3-8-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpswh-3-7-1 {
+._ytdpswh-3-8-0 {
   display: flex;
   flex-direction: inherit;
 }
-._ytdpswi-3-7-1::-webkit-scrollbar-track:horizontal {
+._ytdpswi-3-8-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswi-3-7-1::-webkit-scrollbar-track:vertical {
+._ytdpswi-3-8-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-bottom-right-radius: 0;
 }
-._ytdpswi-3-7-1::-webkit-scrollbar-corner {
+._ytdpswi-3-8-0::-webkit-scrollbar-corner {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-7-1 ._ytdpswi-3-7-1::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-8-0 ._ytdpswi-3-8-0::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._ytdpswi-3-7-1::-webkit-scrollbar-track:vertical {
+._1jgl8s50-3-8-0 ._ytdpswi-3-8-0::-webkit-scrollbar-track:vertical {
   border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._ytdpswi-3-7-1::-webkit-scrollbar-corner {
+._1jgl8s50-3-8-0 ._ytdpswi-3-8-0::-webkit-scrollbar-corner {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
 }

package/tables/DataTable/components/DataTableVirtualizationContainer.sty.js

@@ -23,4 +23,4 @@ module.exports = __toCommonJS(DataTableVirtualizationContainer_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_DataTableVirtualizationContainer_css_ts_vanilla = require("./DataTableVirtualizationContainer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-7-1", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-7-1", false: "_ytdpsw2-3-7-1" }, loading: { true: "_ytdpsw3-3-7-1" }, contained: { true: "_ytdpsw4-3-7-1", false: "_ytdpsw5-3-7-1" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-7-1", zebraStripes: "_ytdpsw7-3-7-1", none: "_ytdpsw8-3-7-1" }, headers: { hidden: "_ytdpsw9-3-7-1", "default": "_ytdpswa-3-7-1" }, scrollDirection: { false: "_ytdpswb-3-7-1", x: "_ytdpswc-3-7-1", y: "_ytdpswd-3-7-1", xy: "_ytdpswe-3-7-1" }, isDataEmpty: { true: "_ytdpswf-3-7-1", false: "_ytdpswg-3-7-1" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ hasVisibleColumns: true, isDataEmpty: true }, "_ytdpswh-3-7-1"], [{ contained: true, scrollDirection: "xy" }, "_ytdpswi-3-7-1"]] });
+var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-8-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-8-0", false: "_ytdpsw2-3-8-0" }, loading: { true: "_ytdpsw3-3-8-0" }, contained: { true: "_ytdpsw4-3-8-0", false: "_ytdpsw5-3-8-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-8-0", zebraStripes: "_ytdpsw7-3-8-0", none: "_ytdpsw8-3-8-0" }, headers: { hidden: "_ytdpsw9-3-8-0", "default": "_ytdpswa-3-8-0" }, scrollDirection: { false: "_ytdpswb-3-8-0", x: "_ytdpswc-3-8-0", y: "_ytdpswd-3-8-0", xy: "_ytdpswe-3-8-0" }, isDataEmpty: { true: "_ytdpswf-3-8-0", false: "_ytdpswg-3-8-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ hasVisibleColumns: true, isDataEmpty: true }, "_ytdpswh-3-8-0"], [{ contained: true, scrollDirection: "xy" }, "_ytdpswi-3-8-0"]] });

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.css

@@ -0,0 +1,6 @@
+._115i8c20-3-8-0 {
+  padding-top: var(--dt-spacings-size-12, 12px);
+}
+._dmotjm0-3-8-0 div:has(> .strato-table-settings-virtualization-container) {
+  padding-bottom: var(--dt-spacings-size-0, 0);
+}

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import { type ModalProps } from '../../../../overlays/modal/Modal.js';
 /**
  * @internal
@@ -23,6 +23,8 @@ export interface DataTableSettingsModalProps extends Omit<ModalProps, 'footer' |
     };
     /** Whether a status message for the screen reader should be displayed on successful reset. */
     showResetStatus?: boolean;
+    /** Optional footerMessage rendered above the footer action buttons (e.g. a warning or error). */
+    footerMessage?: ReactNode;
 }
 /**
  * Modal that allows to apply, reset or cancel changes on the given settings.

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DataTableSettingsModal_exports = {};
 __export(DataTableSettingsModal_exports, {
@@ -23,6 +33,7 @@ module.exports = __toCommonJS(DataTableSettingsModal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
+var styles = __toESM(require("./DataTableSettingsModal.sty.js"));
 var import_Button = require("../../../../buttons/button/Button.js");
 var import_useId = require("../../../../core/hooks/useId.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
@@ -41,6 +52,7 @@ const DataTableSettingsModal = (0, import_react.forwardRef)((props, forwardedRef
     onApply,
     controlLabels,
     disableButtons,
+    footerMessage,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
@@ -64,43 +76,55 @@ const DataTableSettingsModal = (0, import_react.forwardRef)((props, forwardedRef
       show,
       dismissible,
       onDismiss,
-      footer: showFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { justifyContent: "space-between", width: "100%", children: [
-        onReset && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Button.Button,
-            {
-              onClick: onReset,
-              variant: "emphasized",
-              disabled: disableButtons?.reset === true,
-              children: controlLabels?.reset
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              id: statusId,
-              role: "status",
-              "aria-live": "polite",
-              "aria-relevant": "all",
-              className: import_screen_reader_only_css.screenReaderOnly,
-              children: showResetStatus && intl.formatMessage(import_messages.dataTableMessages.resetSuccessful)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { justifyContent: "flex-end", gap: 8, children: [
-          onDismiss && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { onClick: onDismiss, variant: "default", children: controlLabels?.cancel }),
-          onApply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Button.Button,
-            {
-              onClick: onApply,
-              variant: "accent",
-              color: "primary",
-              disabled: disableButtons?.apply === true,
-              children: controlLabels?.apply
-            }
-          )
-        ] })
-      ] }),
+      footer: showFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_Flex.Flex,
+        {
+          flexDirection: "column",
+          gap: 12,
+          width: "100%",
+          className: styles.footer[footerMessage ? "withMessage" : "default"],
+          children: [
+            footerMessage,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { justifyContent: "space-between", width: "100%", children: [
+              onReset && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_Button.Button,
+                  {
+                    onClick: onReset,
+                    variant: "emphasized",
+                    disabled: disableButtons?.reset === true,
+                    children: controlLabels?.reset
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    id: statusId,
+                    role: "status",
+                    "aria-live": "polite",
+                    "aria-relevant": "all",
+                    className: import_screen_reader_only_css.screenReaderOnly,
+                    children: showResetStatus && intl.formatMessage(import_messages.dataTableMessages.resetSuccessful)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { justifyContent: "flex-end", gap: 8, children: [
+                onDismiss && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { onClick: onDismiss, variant: "default", children: controlLabels?.cancel }),
+                onApply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_Button.Button,
+                  {
+                    onClick: onApply,
+                    variant: "accent",
+                    color: "primary",
+                    disabled: disableButtons?.apply === true,
+                    children: controlLabels?.apply
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      ),
       children
     }
   );

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.sty.d.ts

@@ -0,0 +1 @@
+export declare const footer: Record<"default" | "withMessage", string>;

package/tables/DataTable/components/SettingsModal/DataTableSettingsModal.sty.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DataTableSettingsModal_css_exports = {};
+__export(DataTableSettingsModal_css_exports, {
+  footer: () => footer
+});
+module.exports = __toCommonJS(DataTableSettingsModal_css_exports);
+var import_Modal_css_ts_vanilla = require("../../../../overlays/modal/Modal.css");
+var import_DataTableSettingsModal_css_ts_vanilla = require("./DataTableSettingsModal.css");
+var footer = { "default": "_115i8c20-3-8-0", withMessage: "_115i8c21-3-8-0" };

package/tables/DataTable/components/TableActions/DataTableSelectionChip.css

@@ -1,17 +1,17 @@
-._1rlvxpp0-3-7-1 {
+._1rlvxpp0-3-8-0 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-7-1 {
+._1rlvxpp1-3-8-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp2-3-7-1 {
+._1rlvxpp2-3-8-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
 }
-._1rlvxpp3-3-7-1 {
+._1rlvxpp3-3-8-0 {
   padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-7-1 {
+._1rlvxpp4-3-8-0 {
   height: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-12, 12px);
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-4, 4px);

package/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -22,5 +22,5 @@ __export(DataTableSelectionChip_css_exports, {
 });
 module.exports = __toCommonJS(DataTableSelectionChip_css_exports);
 var import_DataTableSelectionChip_css_ts_vanilla = require("./DataTableSelectionChip.css");
-var selectionChip = "_1rlvxpp4-3-7-1";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-7-1 _1rlvxpp0-3-7-1", "default": "_1rlvxpp2-3-7-1 _1rlvxpp0-3-7-1", comfortable: "_1rlvxpp3-3-7-1 _1rlvxpp0-3-7-1" };
+var selectionChip = "_1rlvxpp4-3-8-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-8-0 _1rlvxpp0-3-8-0", "default": "_1rlvxpp2-3-8-0 _1rlvxpp0-3-8-0", comfortable: "_1rlvxpp3-3-8-0 _1rlvxpp0-3-8-0" };

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css

@@ -1,29 +1,29 @@
-._11d1m5j0-3-7-1 {
+._11d1m5j0-3-8-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._11d1m5j0-3-7-1:last-child {
+._11d1m5j0-3-8-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-7-1 {
+._11d1m5j1-3-8-0 {
   align-self: center;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
   transition: none;
 }
-._11d1m5j1-3-7-1:active {
+._11d1m5j1-3-8-0:active {
   background: transparent;
 }
-._11d1m5j1-3-7-1:hover {
+._11d1m5j1-3-8-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-7-1 ._11d1m5j1-3-7-1 {
+._11d1m5j0-3-8-0 ._11d1m5j1-3-8-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-7-1 {
+._11d1m5j2-3-8-0 {
   opacity: 0.2;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js

@@ -23,6 +23,6 @@ __export(ColumnOrderSettingsDragAndDrop_css_exports, {
 });
 module.exports = __toCommonJS(ColumnOrderSettingsDragAndDrop_css_exports);
 var import_ColumnOrderSettingsDragAndDrop_css_ts_vanilla = require("./ColumnOrderSettingsDragAndDrop.css");
-var columnDndHandle = "_11d1m5j1-3-7-1";
-var columnDndOverlay = "_11d1m5j0-3-7-1";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-7-1";
+var columnDndHandle = "_11d1m5j1-3-8-0";
+var columnDndOverlay = "_11d1m5j0-3-8-0";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-8-0";

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.d.ts

@@ -1,6 +1,6 @@
 import type { DataTableColumnSettingsModalRef } from './column-settings-types.js';
 import type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';
-import type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';
+import type { DataTableColumnVisibilityState, DataTableVisibleColumnLimits } from '../../../features/ColumnVisibility/column-visibility-types.js';
 interface DataTableColumnSettingsModalProps {
     /**
      * Whether column visibility settings are available in the modal.
@@ -26,6 +26,10 @@ interface DataTableColumnSettingsModalProps {
      * Default column pinning state when settings are reset.
      */
     resetColumnPinning?: DataTablePinnedColumnState;
+    /**
+     * Optional upper limits for the number of visible columns from the toolbar slot.
+     */
+    visibleColumnLimits?: DataTableVisibleColumnLimits;
 }
 /**
  * @internal

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.js

@@ -37,6 +37,7 @@ function ColumnSettingsModal(props) {
     resetColumnOrder,
     resetColumnVisibility,
     resetColumnPinning,
+    visibleColumnLimits: slotVisibleColumnLimits,
     onModalClose,
     columnSettingsOverride
   } = props;
@@ -46,6 +47,20 @@ function ColumnSettingsModal(props) {
   const visibilityOverride = columnSettingsOverride?.columnVisibility;
   const columnOrderOverride = columnSettingsOverride?.columnOrder;
   const columnPinningOverride = columnSettingsOverride?.columnPinning;
+  const rawVisibleColumnLimits = (0, import_column_settings_utils.getOverrideValue)(visibilityOverride, "visibleColumnLimits") ?? slotVisibleColumnLimits;
+  const mandatoryVisibleColumnsCount = (0, import_react.useMemo)(
+    () => leafColumnsWithoutBuiltin.filter(
+      (col) => col.columnDef.enableHiding === false
+    ).length,
+    [leafColumnsWithoutBuiltin]
+  );
+  const { warningLimit, errorLimit } = (0, import_react.useMemo)(
+    () => (0, import_column_settings_utils.resolveEffectiveLimit)(
+      rawVisibleColumnLimits,
+      mandatoryVisibleColumnsCount
+    ),
+    [rawVisibleColumnLimits, mandatoryVisibleColumnsCount]
+  );
   const visibilitySettingsEnabled = (0, import_column_settings_utils.getIsSettingEnabled)(
     visibilityOverride,
     toolbarVisibilitySettings
@@ -77,9 +92,10 @@ function ColumnSettingsModal(props) {
     () => table.store.state.columnPinning
   );
   const [showResetStatus, setShowResetStatus] = (0, import_react.useState)(false);
-  const columnOrderToReset = (0, import_column_settings_utils.getResetOverride)(columnOrderOverride, "resetColumnOrder") ?? resetColumnOrder ?? table.options.originalColumnOrder;
-  const columnVisibilityToReset = (0, import_column_settings_utils.getResetOverride)(visibilityOverride, "resetColumnVisibility") ?? resetColumnVisibility ?? table.options.originalColumnVisibility;
-  const columnPinningToReset = (0, import_column_settings_utils.getResetOverride)(columnPinningOverride, "resetColumnPinning") ?? resetColumnPinning ?? table.options.originalColumnPinning;
+  const [showMinError, setShowMinError] = (0, import_react.useState)(false);
+  const columnOrderToReset = (0, import_column_settings_utils.getOverrideValue)(columnOrderOverride, "resetColumnOrder") ?? resetColumnOrder ?? table.options.originalColumnOrder;
+  const columnVisibilityToReset = (0, import_column_settings_utils.getOverrideValue)(visibilityOverride, "resetColumnVisibility") ?? resetColumnVisibility ?? table.options.originalColumnVisibility;
+  const columnPinningToReset = (0, import_column_settings_utils.getOverrideValue)(columnPinningOverride, "resetColumnPinning") ?? resetColumnPinning ?? table.options.originalColumnPinning;
   const filteredLocalColumnOrder = (0, import_react.useMemo)(
     () => localColumnOrder.filter(
       (colId) => !allLocalColumnsParentIds.includes(colId)
@@ -102,6 +118,17 @@ function ColumnSettingsModal(props) {
     localColumnVisibility,
     leafColumnsWithoutBuiltin
   );
+  const visibleColumnCount = Object.values(localColumnVisibility).filter(
+    Boolean
+  ).length;
+  const exceedsError = errorLimit !== void 0 && visibleColumnCount > errorLimit;
+  const limitMessage = (0, import_column_settings_utils.getVisibilityLimitMessage)(
+    showMinError,
+    errorLimit,
+    warningLimit,
+    visibleColumnCount,
+    intl
+  );
   const updateLocalColumnVisibility = (column, currentVisibilityState) => {
     const childColumns = column.columns;
     if (childColumns.length === 0) {
@@ -119,6 +146,7 @@ function ColumnSettingsModal(props) {
       );
     }
     showResetStatus && setShowResetStatus(false);
+    showMinError && setShowMinError(false);
   };
   const updateLocalColumnOrder = (newColumnOrder) => {
     setLocalColumnOrder(newColumnOrder);
@@ -137,6 +165,7 @@ function ColumnSettingsModal(props) {
       )
     );
     showResetStatus && setShowResetStatus(false);
+    showMinError && setShowMinError(false);
   };
   const showVisibilityControl = visibilitySettingsEnabled && activeFilterValue.length === 0;
   const showFilterControl = visibilitySettingsEnabled || columnPinningSettingsEnabled;
@@ -167,8 +196,13 @@ function ColumnSettingsModal(props) {
       didReset = true;
     }
     didReset && setShowResetStatus(true);
+    showMinError && setShowMinError(false);
   };
   const onApply = () => {
+    if (visibilitySettingsEnabled && visibleColumnCount < 1) {
+      setShowMinError(true);
+      return;
+    }
     table.setColumnVisibility(localColumnVisibility);
     table.setColumnOrder(filteredLocalColumnOrder);
     table.setColumnPinning(localColumnPinning);
@@ -184,8 +218,10 @@ function ColumnSettingsModal(props) {
       onReset,
       onApply,
       disableButtons: {
-        reset: !hasColumnOrderChanged && !hasVisibilityChanged && !hasColumnPinningChanged
+        reset: !hasColumnOrderChanged && !hasVisibilityChanged && !hasColumnPinningChanged,
+        apply: exceedsError
       },
+      footerMessage: limitMessage,
       controlLabels: {
         reset: intl.formatMessage(
           import_messages.dataTableMessages.resetColumnSettingsButtonText
@@ -217,7 +253,8 @@ function ColumnSettingsModal(props) {
             updateLocalColumnOrder,
             localColumnPinning,
             updateLocalColumnPinning,
-            hasFilterBar: showFilterControl || showVisibilityControl
+            hasFilterBar: showFilterControl || showVisibilityControl,
+            hasMessage: limitMessage !== void 0
           }
         )
       ]

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnVisibilitySettings.d.ts

@@ -5,6 +5,6 @@ import type { DataTableColumnVisibilitySettingsProps } from './column-settings-t
  * @public
  */
 export declare const DataTableColumnVisibilitySettings: {
-    ({ resetColumnVisibility, }: DataTableColumnVisibilitySettingsProps): null;
+    ({ resetColumnVisibility, visibleColumnLimits, }: DataTableColumnVisibilitySettingsProps): null;
     displayName: string;
 };

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnVisibilitySettings.js

@@ -21,6 +21,7 @@ __export(DataTableColumnVisibilitySettings_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnVisibilitySettings_exports);
 const DataTableColumnVisibilitySettings = ({
-  resetColumnVisibility
+  resetColumnVisibility,
+  visibleColumnLimits
 }) => null;
 DataTableColumnVisibilitySettings.displayName = "DataTable.VisibilitySettings";

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css

@@ -1,19 +1,31 @@
-._14dz1ui0-3-7-1 {
+._14dz1ui0-3-8-0 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-7-1 {
+._14dz1ui2-3-8-0 {
+  --_14dz1ui1-3-8-0: 96dvh;
   overflow: auto;
   position: relative;
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-7-1 {
-  max-height: calc(96vh - 200px - 56px);
+._14dz1ui7-3-8-0 {
+  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px);
 }
-._14dz1ui3-3-7-1 {
-  max-height: calc(96vh - 200px);
+._14dz1ui8-3-8-0 {
+  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px - 56px);
 }
-._14dz1ui4-3-7-1 {
+._14dz1ui9-3-8-0 {
+  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px - 34px);
+}
+._14dz1uia-3-8-0 {
+  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px - 56px - 34px);
+}
+._14dz1uib-3-8-0 {
   width: 100%;
   position: relative;
+}
+@supports not (height: 1dvh) {
+  ._14dz1ui2-3-8-0 {
+    --_14dz1ui1-3-8-0: 96vh;
+  }
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.d.ts

@@ -50,6 +50,10 @@ interface DataTableColumnsListProps<TFeatures extends TableFeatures, TData exten
      * Whether the filter bar is present in the modal above the list.
      */
     hasFilterBar: boolean;
+    /**
+     * Whether a warning or error message is shown in the modal footer.
+     */
+    hasMessage: boolean;
 }
 /**
  * Renders the ordered, filtered list of columns for the column settings modal.

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.js

@@ -58,7 +58,8 @@ function DataTableColumnsList(props) {
     updateLocalColumnOrder,
     localColumnPinning,
     updateLocalColumnPinning,
-    hasFilterBar
+    hasFilterBar,
+    hasMessage
   } = props;
   const table = (0, import_DataTableContext.useDataTable)();
   const intl = (0, import_react_intl.useIntl)();
@@ -100,9 +101,12 @@ function DataTableColumnsList(props) {
         const columnLabel = columnLabelsById.get(columnId) ?? "";
         return activeFilterWords.every((word) => columnLabel.includes(word));
       };
+      if (matchesFilter(column.id)) {
+        return true;
+      }
       const childColumns = column.columns;
       if (childColumns.length === 0) {
-        return matchesFilter(column.id);
+        return column.parent !== void 0 && matchesFilter(column.parent.id);
       }
       return childColumns.filter((child) => columnSection.find((col) => col.id === child.id)).some((childColumn) => matchesFilter(childColumn.id));
     },
@@ -228,7 +232,8 @@ function DataTableColumnsList(props) {
       className: (0, import_clsx.default)(
         "strato-table-settings-virtualization-container",
         styles.virtualizationScrollContainer({
-          hasFilter: hasFilterBar
+          hasFilter: hasFilterBar,
+          hasMessage
         })
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.d.ts

@@ -1,12 +1,12 @@
 export declare const noItemsFound: string;
 export declare const virtualizationScrollContainer: import("@vanilla-extract/recipes").RuntimeFn<{
     hasFilter: {
-        true: {
-            maxHeight: "calc(96vh - 200px - 56px)";
-        };
-        false: {
-            maxHeight: "calc(96vh - 200px)";
-        };
+        true: {};
+        false: {};
+    };
+    hasMessage: {
+        true: {};
+        false: {};
     };
 }>;
 export declare const virtualizationInnerContainer: string;