@dynatrace/strato-components 3.11.2 → 3.12.0

package/tables/DataTable/features/Thresholds/Thresholds.css

@@ -1,4 +1,4 @@
-._1jrjqrd1-3-11-2 ._1jrjqrd2-3-11-2::before {
+._1jrjqrd1-3-12-0 ._1jrjqrd2-3-12-0::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -8,5 +8,5 @@
   width: var(--dt-spacings-size-4, 4px);
   left: var(--dt-spacings-size-0, 0);
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
-  background-color: var(--_1jrjqrd0-3-11-2);
+  background-color: var(--_1jrjqrd0-3-12-0);
 }

package/tables/DataTable/features/Thresholds/Thresholds.sty.js

@@ -23,6 +23,6 @@ __export(Thresholds_css_exports, {
 });
 module.exports = __toCommonJS(Thresholds_css_exports);
 var import_Thresholds_css_ts_vanilla = require("./Thresholds.css");
-var hasPillThresholds = "_1jrjqrd1-3-11-2";
-var thresholdPill = "_1jrjqrd2-3-11-2";
-var thresholdPillColor = "var(--_1jrjqrd0-3-11-2)";
+var hasPillThresholds = "_1jrjqrd1-3-12-0";
+var thresholdPill = "_1jrjqrd2-3-12-0";
+var thresholdPillColor = "var(--_1jrjqrd0-3-12-0)";

package/tables/DataTable/features/UserActions/InlineUserActionsMenu.js

@@ -37,6 +37,7 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_useCellActions = require("./useCellActions.js");
 var import_useCloseMenuOnScroll = require("./useCloseMenuOnScroll.js");
 var styles = __toESM(require("./UserActions.sty.js"));
+var import_attempt_focus = require("../../../../core/utils/focus-management/attempt-focus.js");
 var import_Menu = require("../../../../navigation/menu/Menu.js");
 var import_constants = require("../../constants.js");
 var import_DataTableContext = require("../../contexts/DataTableContext.js");
@@ -52,6 +53,8 @@ function InlineUserActionsMenu(props) {
     onClose
   } = props;
   const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
+  const triggerRef = (0, import_react.useRef)(null);
+  const restoreFocusOnCloseRef = (0, import_react.useRef)(false);
   const table = (0, import_DataTableContext.useDataTable)();
   const column = table.getColumn(columnId);
   const actions = (0, import_useCellActions.useCellAndColumnActions)({
@@ -74,6 +77,36 @@ function InlineUserActionsMenu(props) {
     columnId,
     isHeader: type === "header"
   });
+  (0, import_react.useEffect)(() => {
+    if (!menuOpen) {
+      return;
+    }
+    restoreFocusOnCloseRef.current = false;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" || event.key === "Enter" || event.key === " ") {
+        restoreFocusOnCloseRef.current = true;
+      }
+    };
+    const handlePointerDown = () => {
+      restoreFocusOnCloseRef.current = false;
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [menuOpen]);
+  const handleCloseAutoFocus = (0, import_react.useCallback)((event) => {
+    if (!restoreFocusOnCloseRef.current) {
+      return;
+    }
+    restoreFocusOnCloseRef.current = false;
+    const restored = triggerRef.current !== null && (0, import_attempt_focus.attemptFocus)(triggerRef.current, { focusVisible: true });
+    if (restored) {
+      event.preventDefault();
+    }
+  }, []);
   const isFloatingMenuOpenForThis = (0, import_react_store.useSelector)(
     table.atoms.floatingMenuInfo,
     (floatingMenuInfo) => floatingMenuInfo?.columnId === columnId && (type === "cell" && floatingMenuInfo?.rowId === headerGroupOrRowId || type === "header" && floatingMenuInfo?.type === "headerAction")
@@ -99,6 +132,7 @@ function InlineUserActionsMenu(props) {
   }
   const triggerProps = {
     type: "button",
+    ref: triggerRef,
     className: styles.actionButton,
     style: {
       display: menuOpen ? "inline-block" : void 0,
@@ -126,6 +160,7 @@ function InlineUserActionsMenu(props) {
       "button",
       {
         ...triggerProps,
+        "aria-expanded": false,
         onClick: (event) => {
           event.preventDefault();
           event.stopPropagation();
@@ -160,7 +195,14 @@ function InlineUserActionsMenu(props) {
             }
           }
         ) }),
-        menuOpen === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableColumnContextProvider, { value: column, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Content, { alignment, children: import_react.Children.map(actions, (child) => child) }) }) : null
+        menuOpen === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableColumnContextProvider, { value: column, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Menu.Menu.Content,
+          {
+            alignment,
+            onCloseAutoFocus: handleCloseAutoFocus,
+            children: import_react.Children.map(actions, (child) => child)
+          }
+        ) }) : null
       ]
     }
   );

package/tables/DataTable/features/UserActions/RowActions.css

@@ -1,4 +1,4 @@
-._bq8mqs0-3-11-2 {
+._bq8mqs0-3-12-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   overflow: visible;
@@ -7,15 +7,15 @@
   flex-basis: 100%;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._14k72813-3-11-2._bq8mqs0-3-11-2 {
+._14k72813-3-12-0._bq8mqs0-3-12-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._14k72815-3-11-2._bq8mqs0-3-11-2 {
+._14k72815-3-12-0._bq8mqs0-3-12-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._14k72814-3-11-2._bq8mqs0-3-11-2 {
+._14k72814-3-12-0._bq8mqs0-3-12-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
 }

package/tables/DataTable/features/UserActions/RowActions.sty.js

@@ -35,4 +35,4 @@ var import_ColumnOrder_css_ts_vanilla = require("../ColumnOrder/ColumnOrder.css"
 var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTableHeaderCell.css");
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_RowActions_css_ts_vanilla = require("./RowActions.css");
-var rowActions = "_bq8mqs0-3-11-2";
+var rowActions = "_bq8mqs0-3-12-0";

package/tables/DataTable/features/UserActions/RowActionsColumnDef.js

@@ -55,7 +55,16 @@ function getMenuTrigger(menu, size, ariaLabel) {
   return getDefaultMenuTrigger(size, ariaLabel);
 }
 function getDefaultMenuTrigger(size, ariaLabel) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { variant: "default", size, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.DotMenuIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      variant: "default",
+      size,
+      "aria-label": ariaLabel,
+      "aria-expanded": false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.DotMenuIcon, {}) })
+    }
+  );
 }
 function isFragment(child) {
   return child.type === import_react.Fragment;

package/tables/DataTable/features/UserActions/UserActions.css

@@ -1,4 +1,4 @@
-._duopj90-3-11-2 {
+._duopj90-3-12-0 {
   appearance: none;
   border: 0;
   padding: 0;
@@ -9,84 +9,94 @@
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
   margin-left: auto;
   line-height: 0;
-  display: none;
+  opacity: 0;
+  pointer-events: none;
   position: absolute;
   width: 24px;
   z-index: var(--dt-elevations-default, 1);
 }
-._duopj90-3-11-2:hover {
+._duopj90-3-12-0:hover {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._duopj90-3-11-2:focus {
+._duopj90-3-12-0:focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  outline: none;
 }
-._1ons7qub-3-11-2 ._duopj90-3-11-2, ._14k72814-3-11-2 ~ ._duopj90-3-11-2, ._11pvd3zz-3-11-2 ._duopj90-3-11-2 {
+._duopj90-3-12-0:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+._1ons7qub-3-12-0 ._duopj90-3-12-0, ._14k72814-3-12-0 ~ ._duopj90-3-12-0, ._11pvd3zz-3-12-0 ._duopj90-3-12-0 {
   right: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
 }
-._1ons7qua-3-11-2 ._duopj90-3-11-2, ._14k72813-3-11-2 ~ ._duopj90-3-11-2, ._11pvd3zy-3-11-2 ._duopj90-3-11-2 {
+._1ons7qua-3-12-0 ._duopj90-3-12-0, ._14k72813-3-12-0 ~ ._duopj90-3-12-0, ._11pvd3zy-3-12-0 ._duopj90-3-12-0 {
   right: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
 }
-._1ons7quc-3-11-2  ._duopj90-3-11-2, ._14k72815-3-11-2 ~ ._duopj90-3-11-2, ._11pvd3z10-3-11-2 ._duopj90-3-11-2 {
+._1ons7quc-3-12-0  ._duopj90-3-12-0, ._14k72815-3-12-0 ~ ._duopj90-3-12-0, ._11pvd3z10-3-12-0 ._duopj90-3-12-0 {
   right: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zz-3-11-2._yj6voi0-3-11-2 ._duopj90-3-11-2, ._14k72814-3-11-2._yj6voi0-3-11-2 ~ ._duopj90-3-11-2, ._1ons7qub-3-11-2._yj6voi0-3-11-2 ._duopj90-3-11-2 {
+._11pvd3zz-3-12-0._yj6voi0-3-12-0 ._duopj90-3-12-0, ._14k72814-3-12-0._yj6voi0-3-12-0 ~ ._duopj90-3-12-0, ._1ons7qub-3-12-0._yj6voi0-3-12-0 ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._11pvd3zy-3-11-2._yj6voi0-3-11-2 ._duopj90-3-11-2, ._14k72813-3-11-2._yj6voi0-3-11-2 ~ ._duopj90-3-11-2, ._1ons7qua-3-11-2._yj6voi0-3-11-2 ._duopj90-3-11-2 {
+._11pvd3zy-3-12-0._yj6voi0-3-12-0 ._duopj90-3-12-0, ._14k72813-3-12-0._yj6voi0-3-12-0 ~ ._duopj90-3-12-0, ._1ons7qua-3-12-0._yj6voi0-3-12-0 ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._11pvd3z10-3-11-2._yj6voi0-3-11-2 ._duopj90-3-11-2, ._14k72815-3-11-2._yj6voi0-3-11-2 ~ ._duopj90-3-11-2, ._1ons7quc-3-11-2._yj6voi0-3-11-2 ._duopj90-3-11-2 {
+._11pvd3z10-3-12-0._yj6voi0-3-12-0 ._duopj90-3-12-0, ._14k72815-3-12-0._yj6voi0-3-12-0 ~ ._duopj90-3-12-0, ._1ons7quc-3-12-0._yj6voi0-3-12-0 ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._1ons7qub-3-11-2 ._yj6voi0-3-11-2 ._duopj90-3-11-2 {
+._1ons7qub-3-12-0 ._yj6voi0-3-12-0 ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._1ons7qua-3-11-2 ._yj6voi0-3-11-2 ._duopj90-3-11-2 {
+._1ons7qua-3-12-0 ._yj6voi0-3-12-0 ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._1ons7quc-3-11-2 ._yj6voi0-3-11-2 ._duopj90-3-11-2 {
+._1ons7quc-3-12-0 ._yj6voi0-3-12-0 ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._14k72814-3-11-2 ._yj6voi0-3-11-2 ~ ._duopj90-3-11-2 {
+._14k72814-3-12-0 ._yj6voi0-3-12-0 ~ ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._14k72813-3-11-2 ._yj6voi0-3-11-2 ~ ._duopj90-3-11-2 {
+._14k72813-3-12-0 ._yj6voi0-3-12-0 ~ ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._14k72815-3-11-2 ._yj6voi0-3-11-2 ~ ._duopj90-3-11-2 {
+._14k72815-3-12-0 ._yj6voi0-3-12-0 ~ ._duopj90-3-12-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._duopj90-3-11-2[data-state="open"] {
-  display: inline-block;
+._duopj90-3-12-0[data-state="open"] {
+  opacity: 1;
+  pointer-events: auto;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1ons7qu2-3-11-2:hover > ._duopj90-3-11-2, ._11pvd3z0-3-11-2 > ._duopj90-3-11-2 {
-  display: inline-block;
+._1ons7qu2-3-12-0:hover > ._duopj90-3-12-0, ._11pvd3z0-3-12-0 > ._duopj90-3-12-0 {
+  opacity: 1;
+  pointer-events: auto;
+}
+._1ons7qu2-3-12-0:focus-within > ._duopj90-3-12-0, ._11pvd3zt-3-12-0:focus-within > ._duopj90-3-12-0 {
+  opacity: 1;
+  pointer-events: auto;
 }
-._duopj91-3-11-2 {
+._duopj91-3-12-0 {
   appearance: none;
   border: 0;
   position: fixed;

package/tables/DataTable/features/UserActions/UserActions.sty.js

@@ -21,6 +21,7 @@ __export(UserActions_css_exports, {
   floatingMenuButton: () => floatingMenuButton
 });
 module.exports = __toCommonJS(UserActions_css_exports);
+var import_focusRingStatic_css_ts_vanilla = require("../../../../core/styles/focusRingStatic.css");
 var import_Alignment_css_ts_vanilla = require("../../components/Alignment.css");
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
@@ -36,5 +37,5 @@ var import_ColumnOrder_css_ts_vanilla = require("../ColumnOrder/ColumnOrder.css"
 var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTableHeaderCell.css");
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_UserActions_css_ts_vanilla = require("./UserActions.css");
-var actionButton = "_duopj90-3-11-2";
-var floatingMenuButton = "_duopj91-3-11-2";
+var actionButton = "_duopj90-3-12-0 _z0fq9b4-3-12-0 _z0fq9bd-3-12-0 _z0fq9b6-3-12-0 _z0fq9b9-3-12-0";
+var floatingMenuButton = "_duopj91-3-12-0";

package/tables/DataTable/hooks/useHeaderDragAndDrop.d.ts

@@ -7,7 +7,7 @@ interface UseHeaderCellDragAndDropParams<TFeatures extends TableFeatures, TData
      */
     headerId: string;
     /**
-     * Column instanceassociated with the header cell.
+     * Column instance associated with the header cell.
      */
     column: Column<TFeatures, TData>;
     /**
@@ -58,7 +58,7 @@ interface UseHeaderCellDragAndDropResult {
          * Event handler for the touch move event.
          */
         onTouchMove: (event: TouchEvent<HTMLElement>) => void;
-    } & DraggableAttributes) | undefined;
+    } & Omit<DraggableAttributes, 'aria-roledescription'>) | undefined;
 }
 /**
  * Hook that encapsulates drag-and-drop functionality for header cells.

package/tables/DataTable/hooks/useHeaderDragAndDrop.js

@@ -42,6 +42,9 @@ function useHeaderCellDragAndDrop({
   });
   const dragAndDropProps = columnDragAndDropMode === "none" ? void 0 : {
     ...attributes,
+    // Temporary prevent column header from receiving focus, update once full keyboard control is implemented in APPDEV-19270
+    tabIndex: -1,
+    "aria-roledescription": void 0,
     draggable: true,
     onMouseDown: (event) => {
       mouseDownTarget.current = event.target;

package/tables/DataTable/messages.d.ts

@@ -19,6 +19,11 @@ export declare const dataTableMessages: {
         id: string;
         description: string;
     };
+    rowSelectionAnnouncement: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
     noDataAvailable: {
         defaultMessage: string;
         id: string;
@@ -63,6 +68,11 @@ export declare const dataTableMessages: {
         id: string;
         description: string;
     };
+    interactiveRowRoleDescription: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
     paginationRowsPerPage: {
         defaultMessage: string;
         id: string;
@@ -298,6 +308,11 @@ export declare const dataTableMessages: {
         id: string;
         description: string;
     };
+    showingAllColumns: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
     noFilterResultsDescription: {
         defaultMessage: string;
         id: string;

package/tables/DataTable/messages.js

@@ -46,6 +46,11 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     id: "xFQW8ah15nm5hjiI",
     description: "Message to display for the total count of selected rows."
   },
+  rowSelectionAnnouncement: {
+    defaultMessage: "{count, plural, =0 {No rows selected} one {# row selected} other {# rows selected}}",
+    id: "nt9FnUYyS/Otapls",
+    description: "Screen reader announcement for the current number of selected rows after a selection change."
+  },
   // Data state messages
   // -------------------
   noDataAvailable: {
@@ -54,8 +59,8 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     description: "Message to display when no data is available"
   },
   noColumnsAvailable: {
-    defaultMessage: "No table columns configured.",
-    id: "V92OBR9Gk9REQKUu",
+    defaultMessage: "No columns have been added.",
+    id: "W8hOQDfAAXoNw46k",
     description: "Message to display when no table columns are configured."
   },
   noColumnsVisible: {
@@ -94,6 +99,11 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     id: "an4qwOaAQd8t60m5",
     description: "Aria label for the interactive row trigger button."
   },
+  interactiveRowRoleDescription: {
+    defaultMessage: "interactive row",
+    id: "SZrN/y5KM3ow7Jed",
+    description: "Aria role description for the interactive row trigger button."
+  },
   // Pagination messages
   // -------------------
   paginationRowsPerPage: {
@@ -215,8 +225,8 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
   // Cell and column actions
   // ------------
   cellActionLabel: {
-    defaultMessage: "Trigger cell actions",
-    id: "rivnln20bnbWI1vP",
+    defaultMessage: "Show cell actions",
+    id: "GXANZLEVr4dA1bxU",
     description: "Aria label for DataTable cell actions trigger"
   },
   copyValueCellAction: {
@@ -225,8 +235,8 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     description: "Text in the cell action item for copying the content of the table cell to the clipboard."
   },
   columnActionLabel: {
-    defaultMessage: 'Trigger column actions for "{column}"',
-    id: "NPXaEyvX9CLw1ovg",
+    defaultMessage: 'Show column actions for "{column}"',
+    id: "l99kSRjiLY8vJnRN",
     description: "Aria label for DataTable column actions trigger"
   },
   // Download messages
@@ -309,8 +319,8 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     description: "Heading of the empty state shown in the column settings modal when all columns are hidden."
   },
   allColumnsHiddenDescription: {
-    defaultMessage: "All columns are hidden and 'listing hidden columns' is off.",
-    id: "b4mwHdIwzmZ9Dtoj",
+    defaultMessage: "Enable 'List hidden columns' to see them.",
+    id: "Riz3wAzTiv590+pg",
     description: "Body text of the empty state in the column settings modal when all columns are hidden and the 'list hidden columns' switch is off."
   },
   listHiddenColumnsAction: {
@@ -343,6 +353,11 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     id: "qZC6v+YzE6aXQpMY",
     description: "Screen reader announcement of the number of leaf columns matching the column settings search filter."
   },
+  showingAllColumns: {
+    defaultMessage: "{count, plural, one {Showing # column} other {Showing all # columns}}",
+    id: "b+Rx1jqDkljv85d6",
+    description: "Screen reader announcement when the column settings search is cleared, showing the total number of available columns."
+  },
   noFilterResultsDescription: {
     defaultMessage: "Try clearing the search and adding different search words.",
     id: "/cHIv7hlXvB+krTT",
@@ -359,8 +374,8 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     description: "Resets column settings to default"
   },
   resetSuccessful: {
-    defaultMessage: "Successfully reset everything to default.",
-    id: "/cBMcieLHGw0wJxk",
+    defaultMessage: "Column settings are reset to default.",
+    id: "TO+JQQr/hhHRjVL4",
     description: "Status message that resetting column settings to default was successful."
   },
   columnSettingsDragAndDropLabel: {
@@ -414,13 +429,13 @@ const dataTableMessages = (0, import_react_intl.defineMessages)({
     description: "Error message shown in column settings modal when the user tries to apply changes with no visible columns."
   },
   visibleColumnsWarning: {
-    defaultMessage: "Displaying more than {limit} {limit, plural, one {column} other {columns}} may affect this table's performance.",
-    id: "5BpZ1y39lJ+Q6BOs",
+    defaultMessage: "Displaying more than {limit} {limit, plural, one {column} other {columns}} may slow down the table.",
+    id: "XujtZVmxX3xAIEud",
     description: "Warning message shown in column settings modal when the number of visible columns exceeds the warning threshold."
   },
   visibleColumnsError: {
-    defaultMessage: "Displaying more than {limit} {limit, plural, one {column} other {columns}} is not allowed.",
-    id: "uIY0S6+5RUL68Rsd",
+    defaultMessage: "You can show up to {limit} {limit, plural, one {column} other {columns}} at a time.",
+    id: "DJH6Mo6y4LT1rFxc",
     description: "Error message shown in column settings modal when the number of visible columns exceeds the error threshold."
   },
   // Sorting

package/tables/SimpleTable/SimpleTable.css

@@ -1,4 +1,4 @@
-._1ymahou0-3-11-2 {
+._1ymahou0-3-12-0 {
   border-collapse: separate;
   border-spacing: 0;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
@@ -8,13 +8,13 @@
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: var(--dt-typography-text-base-default-text-transform, none);
 }
-._1ymahou0-3-11-2 .strato-table-header {
+._1ymahou0-3-12-0 .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-11-2 .strato-table-header:last-child .strato-table-header-cell {
+._1ymahou0-3-12-0 .strato-table-header:last-child .strato-table-header-cell {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-11-2 .strato-table-header-cell {
+._1ymahou0-3-12-0 .strato-table-header-cell {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -24,67 +24,67 @@
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   position: relative;
 }
-._1ymahou0-3-11-2 .strato-table-cell {
+._1ymahou0-3-12-0 .strato-table-cell {
   position: relative;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-left {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-left {
   text-align: start;
   justify-content: flex-start;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-center {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-center {
   text-align: center;
   justify-content: center;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-right {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-right {
   text-align: end;
   justify-content: flex-end;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-top-left {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-top-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: top;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-top-center {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-top-center {
   text-align: center;
   justify-content: center;
   vertical-align: top;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-top-right {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-top-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: top;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-bottom-left {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-bottom-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: bottom;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-bottom-center {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-bottom-center {
   text-align: center;
   justify-content: center;
   vertical-align: bottom;
 }
-._1ymahou0-3-11-2 .strato-table-cell-alignment-bottom-right {
+._1ymahou0-3-12-0 .strato-table-cell-alignment-bottom-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: bottom;
 }
-._1ymahou0-3-11-2.strato-table-contained {
+._1ymahou0-3-12-0.strato-table-contained {
   border: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-2 ._1ymahou0-3-11-2.strato-table-contained {
+._1jgl8s50-3-12-0 ._1ymahou0-3-12-0.strato-table-contained {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-11-2 ._1ymahou0-3-11-2 .strato-table-header:last-child .strato-table-header-cell {
+._1jgl8s50-3-12-0 ._1ymahou0-3-12-0 .strato-table-header:last-child .strato-table-header-cell {
   border-bottom-width: var(--dt-borders-width-default, 1px);
 }
-._1ymahou0-3-11-2 .strato-table-row:last-child .strato-table-cell {
+._1ymahou0-3-12-0 .strato-table-row:last-child .strato-table-cell {
   border-bottom: none;
 }
-._1ymahou0-3-11-2.strato-table-code-font {
+._1ymahou0-3-12-0.strato-table-code-font {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   font-weight: var(--dt-typography-code-base-default-weight, 400);
@@ -93,16 +93,16 @@
   text-transform: var(--dt-typography-code-base-default-text-transform, none);
   color: var(--strato-table-cell-highlight-color, var(--dt-colors-text-neutral-default, #2f2f4f));
 }
-._1ymahou0-3-11-2.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-11-2.strato-table-cell-density-default .strato-table-header-cell {
+._1ymahou0-3-12-0.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-12-0.strato-table-cell-density-default .strato-table-header-cell {
   padding: var(--dt-spacings-size-8, 8px) var(--dt-spacings-size-12, 12px);
 }
-._1ymahou0-3-11-2.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-11-2.strato-table-cell-density-comfortable .strato-table-header-cell {
+._1ymahou0-3-12-0.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-12-0.strato-table-cell-density-comfortable .strato-table-header-cell {
   padding: var(--dt-spacings-size-12, 12px) var(--dt-spacings-size-16, 16px);
 }
-._1ymahou0-3-11-2.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-11-2.strato-table-cell-density-condensed .strato-table-header-cell {
+._1ymahou0-3-12-0.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-12-0.strato-table-cell-density-condensed .strato-table-header-cell {
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1ymahou0-3-11-2.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-11-2.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
+._1ymahou0-3-12-0.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-12-0.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
   content: "";
   display: block;
   position: absolute;
@@ -112,15 +112,15 @@
   bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-11-2.strato-table-rowsep-divider .strato-table-cell {
+._1ymahou0-3-12-0.strato-table-rowsep-divider .strato-table-cell {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-11-2.strato-table-rowsep-zebra .strato-table-row {
+._1ymahou0-3-12-0.strato-table-rowsep-zebra .strato-table-row {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ymahou0-3-11-2.strato-table-rowsep-zebra .strato-table-header {
+._1ymahou0-3-12-0.strato-table-rowsep-zebra .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-11-2.strato-table-rowsep-zebra .strato-table-row-even {
+._1ymahou0-3-12-0.strato-table-rowsep-zebra .strato-table-row-even {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }

package/tables/SimpleTable/SimpleTable.sty.js

@@ -22,4 +22,4 @@ __export(SimpleTable_css_exports, {
 module.exports = __toCommonJS(SimpleTable_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_SimpleTable_css_ts_vanilla = require("./SimpleTable.css");
-var simpleTable = "_1ymahou0-3-11-2";
+var simpleTable = "_1ymahou0-3-12-0";

package/typography/block-quote/Blockquote.css

@@ -1,11 +1,11 @@
-._1knl9z60-3-11-2 {
+._1knl9z60-3-12-0 {
   position: relative;
   margin: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-40, 40px);
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._1knl9z60-3-11-2:before {
+._1knl9z60-3-12-0:before {
   content: "";
   position: absolute;
   top: 0;

package/typography/block-quote/Blockquote.sty.js

@@ -21,4 +21,4 @@ __export(Blockquote_css_exports, {
 });
 module.exports = __toCommonJS(Blockquote_css_exports);
 var import_Blockquote_css_ts_vanilla = require("./Blockquote.css");
-var blockquoteCSS = "_1knl9z60-3-11-2";
+var blockquoteCSS = "_1knl9z60-3-12-0";