@dynatrace/strato-components 3.5.2 → 3.6.0

package/esm/tables/DataTable/hooks/useHeaderCellInteractions.js

@@ -1,4 +1,8 @@
-import { useCallback } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
 import * as headerCellStyles from "../components/DataTableHeaderCell.sty.js";
 import { DATA_TABLE_NARROW_HEADER_THRESHOLDS } from "../constants.js";
 function isInteractiveElement(element) {
@@ -9,11 +13,20 @@ function useHeaderCellInteractions({
   headerCell,
   canSort,
   canColumnActions,
+  isActiveFloatingMenu,
   rowDensity,
   getToggleSortingHandler
 }) {
+  const isHoveredRef = useRef(false);
+  useEffect(() => {
+    if (!isActiveFloatingMenu || !isHoveredRef.current || !headerCell) {
+      return;
+    }
+    headerCell.classList.add(headerCellStyles.hovered);
+  }, [isActiveFloatingMenu, headerCell]);
   const handleCellActionsClose = useCallback(() => {
     if (headerCell) {
+      isHoveredRef.current = false;
       headerCell.classList.remove(
         headerCellStyles.hovered,
         headerCellStyles.narrow
@@ -24,6 +37,7 @@ function useHeaderCellInteractions({
     if (!headerCell || !canColumnActions && !canSort) {
       return;
     }
+    isHoveredRef.current = true;
     headerCell.classList.add(headerCellStyles.hovered);
     const widthThreshold = DATA_TABLE_NARROW_HEADER_THRESHOLDS[rowDensity];
     if (!widthThreshold) {
@@ -34,20 +48,29 @@ function useHeaderCellInteractions({
       headerCell.classList.add(headerCellStyles.narrow);
     }
   }, [canSort, canColumnActions, headerCell, rowDensity]);
-  const handleCellMouseLeave = useCallback(() => {
-    if (!headerCell) {
-      return;
-    }
-    const cellAction = headerCell.querySelector('[data-trigger="useraction"]');
-    const isOpen = cellAction?.getAttribute("data-state") === "open";
-    if (isOpen) {
-      return;
-    }
-    headerCell.classList.remove(
-      headerCellStyles.hovered,
-      headerCellStyles.narrow
-    );
-  }, [headerCell]);
+  const handleCellMouseLeave = useCallback(
+    (event) => {
+      if (!headerCell) {
+        return;
+      }
+      if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute("data-trigger") === "context-action") {
+        return;
+      }
+      const columnActionsMenu = headerCell.querySelector(
+        '[data-trigger="useraction"]'
+      );
+      const isOpen = columnActionsMenu?.getAttribute("data-state") === "open";
+      if (isOpen) {
+        return;
+      }
+      isHoveredRef.current = false;
+      headerCell.classList.remove(
+        headerCellStyles.hovered,
+        headerCellStyles.narrow
+      );
+    },
+    [headerCell]
+  );
   const handleCellClick = useCallback(
     (event) => {
       const { target } = event;

package/esm/tables/DataTable/hooks/useHeaderCellInteractions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useHeaderCellInteractions.ts"],
-  "sourcesContent": ["import { useCallback, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport * as headerCellStyles from '../components/DataTableHeaderCell.sty.js';\nimport { DATA_TABLE_NARROW_HEADER_THRESHOLDS } from '../constants.js';\n\ninterface UseHeaderCellInteractionsParams {\n  headerCell: HTMLDivElement | null;\n  canSort: boolean;\n  canColumnActions: boolean;\n  rowDensity: 'default' | 'condensed' | 'comfortable';\n  getToggleSortingHandler: () => undefined | ((event: unknown) => void);\n}\n\ninterface UseHeaderCellInteractionsResult {\n  handleCellActionsClose: () => void;\n  handleCellMouseEnter: () => void;\n  handleCellMouseLeave: () => void;\n  handleCellClick: (event: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\n/**\n * Checks whether an element is interactive.\n */\nfunction isInteractiveElement(element: HTMLElement | SVGElement): boolean {\n  const interactiveTags = ['BUTTON', 'A', 'LABEL', 'INPUT', 'SELECT'];\n\n  return !!(\n    interactiveTags.includes(element.tagName) ||\n    element.getAttribute('tabindex')\n  );\n}\n\nexport function useHeaderCellInteractions({\n  headerCell,\n  canSort,\n  canColumnActions,\n  rowDensity,\n  getToggleSortingHandler,\n}: UseHeaderCellInteractionsParams): UseHeaderCellInteractionsResult {\n  const handleCellActionsClose = useCallback((): void => {\n    if (headerCell) {\n      // remove the hovered and narrow state\n      headerCell.classList.remove(\n        headerCellStyles.hovered,\n        headerCellStyles.narrow,\n      );\n    }\n  }, [headerCell]);\n\n  const handleCellMouseEnter = useCallback((): void => {\n    if (!headerCell || (!canColumnActions && !canSort)) {\n      return;\n    }\n\n    headerCell.classList.add(headerCellStyles.hovered);\n\n    const widthThreshold = DATA_TABLE_NARROW_HEADER_THRESHOLDS[rowDensity];\n    if (!widthThreshold) {\n      return;\n    }\n\n    const headerWidth = headerCell.getBoundingClientRect().width;\n    if (headerWidth <= widthThreshold) {\n      headerCell.classList.add(headerCellStyles.narrow);\n    }\n  }, [canSort, canColumnActions, headerCell, rowDensity]);\n\n  const handleCellMouseLeave = useCallback((): void => {\n    if (!headerCell) {\n      return;\n    }\n    const cellAction = headerCell.querySelector('[data-trigger=\"useraction\"]');\n    const isOpen = cellAction?.getAttribute('data-state') === 'open';\n    if (isOpen) {\n      // keep the hovered state while the cell actions menu is open\n      return;\n    }\n    // remove the hovered and narrow state\n    headerCell.classList.remove(\n      headerCellStyles.hovered,\n      headerCellStyles.narrow,\n    );\n  }, [headerCell]);\n\n  const handleCellClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {\n      const { target } = event;\n\n      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n        return;\n      }\n\n      if ('headerRow' in target.dataset) {\n        getToggleSortingHandler?.()?.(event);\n        return;\n      }\n\n      const columnHeader = target.closest('[role=\"columnheader\"]');\n      if (!columnHeader) {\n        return;\n      }\n\n      let currentElement: typeof target | null = target;\n      while (currentElement && currentElement !== columnHeader) {\n        if (isInteractiveElement(currentElement)) {\n          return;\n        }\n        currentElement = currentElement.parentElement;\n      }\n\n      getToggleSortingHandler?.()?.(event);\n    },\n    [getToggleSortingHandler],\n  );\n\n  return {\n    handleCellActionsClose,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    handleCellClick,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAuD;AAEhE,YAAY,sBAAsB;AAClC,SAAS,2CAA2C;AAoBpD,SAAS,qBAAqB,SAA4C;AACxE,QAAM,kBAAkB,CAAC,UAAU,KAAK,SAAS,SAAS,QAAQ;AAElE,SAAO,CAAC,EACN,gBAAgB,SAAS,QAAQ,OAAO,KACxC,QAAQ,aAAa,UAAU;AAEnC;AAEO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqE;AACnE,QAAM,yBAAyB,YAAY,MAAY;AACrD,QAAI,YAAY;AAEd,iBAAW,UAAU;AAAA,QACnB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAAuB,YAAY,MAAY;AACnD,QAAI,CAAC,cAAe,CAAC,oBAAoB,CAAC,SAAU;AAClD;AAAA,IACF;AAEA,eAAW,UAAU,IAAI,iBAAiB,OAAO;AAEjD,UAAM,iBAAiB,oCAAoC,UAAU;AACrE,QAAI,CAAC,gBAAgB;AACnB;AAAA,IACF;AAEA,UAAM,cAAc,WAAW,sBAAsB,EAAE;AACvD,QAAI,eAAe,gBAAgB;AACjC,iBAAW,UAAU,IAAI,iBAAiB,MAAM;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,SAAS,kBAAkB,YAAY,UAAU,CAAC;AAEtD,QAAM,uBAAuB,YAAY,MAAY;AACnD,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AACA,UAAM,aAAa,WAAW,cAAc,6BAA6B;AACzE,UAAM,SAAS,YAAY,aAAa,YAAY,MAAM;AAC1D,QAAI,QAAQ;AAEV;AAAA,IACF;AAEA,eAAW,UAAU;AAAA,MACnB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA6D;AAC5D,YAAM,EAAE,OAAO,IAAI;AAEnB,UAAI,EAAE,kBAAkB,gBAAgB,EAAE,kBAAkB,aAAa;AACvE;AAAA,MACF;AAEA,UAAI,eAAe,OAAO,SAAS;AACjC,kCAA0B,IAAI,KAAK;AACnC;AAAA,MACF;AAEA,YAAM,eAAe,OAAO,QAAQ,uBAAuB;AAC3D,UAAI,CAAC,cAAc;AACjB;AAAA,MACF;AAEA,UAAI,iBAAuC;AAC3C,aAAO,kBAAkB,mBAAmB,cAAc;AACxD,YAAI,qBAAqB,cAAc,GAAG;AACxC;AAAA,QACF;AACA,yBAAiB,eAAe;AAAA,MAClC;AAEA,gCAA0B,IAAI,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport * as headerCellStyles from '../components/DataTableHeaderCell.sty.js';\nimport { DATA_TABLE_NARROW_HEADER_THRESHOLDS } from '../constants.js';\n\ninterface UseHeaderCellInteractionsParams {\n  headerCell: HTMLDivElement | null;\n  canSort: boolean;\n  canColumnActions: boolean;\n  isActiveFloatingMenu: boolean;\n  rowDensity: 'default' | 'condensed' | 'comfortable';\n  getToggleSortingHandler: () => undefined | ((event: unknown) => void);\n}\n\ninterface UseHeaderCellInteractionsResult {\n  handleCellActionsClose: () => void;\n  handleCellMouseEnter: () => void;\n  handleCellMouseLeave: (\n    event: ReactMouseEvent<HTMLDivElement, MouseEvent>,\n  ) => void;\n  handleCellClick: (event: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\n/**\n * Checks whether an element is interactive.\n */\nfunction isInteractiveElement(element: HTMLElement | SVGElement): boolean {\n  const interactiveTags = ['BUTTON', 'A', 'LABEL', 'INPUT', 'SELECT'];\n\n  return !!(\n    interactiveTags.includes(element.tagName) ||\n    element.getAttribute('tabindex')\n  );\n}\n\nexport function useHeaderCellInteractions({\n  headerCell,\n  canSort,\n  canColumnActions,\n  isActiveFloatingMenu,\n  rowDensity,\n  getToggleSortingHandler,\n}: UseHeaderCellInteractionsParams): UseHeaderCellInteractionsResult {\n  const isHoveredRef = useRef(false);\n\n  // When the floating menu opens for this header, React's re-render overwrites\n  // element.className and drops the imperatively-managed `hovered` class. Restore it\n  // so the sorting arrow stays visible while the cursor is still over the column.\n  useEffect(() => {\n    if (!isActiveFloatingMenu || !isHoveredRef.current || !headerCell) {\n      return;\n    }\n    headerCell.classList.add(headerCellStyles.hovered);\n  }, [isActiveFloatingMenu, headerCell]);\n\n  const handleCellActionsClose = useCallback((): void => {\n    if (headerCell) {\n      isHoveredRef.current = false;\n      // remove the hovered and narrow state\n      headerCell.classList.remove(\n        headerCellStyles.hovered,\n        headerCellStyles.narrow,\n      );\n    }\n  }, [headerCell]);\n\n  const handleCellMouseEnter = useCallback((): void => {\n    if (!headerCell || (!canColumnActions && !canSort)) {\n      return;\n    }\n\n    isHoveredRef.current = true;\n    headerCell.classList.add(headerCellStyles.hovered);\n\n    const widthThreshold = DATA_TABLE_NARROW_HEADER_THRESHOLDS[rowDensity];\n    if (!widthThreshold) {\n      return;\n    }\n\n    const headerWidth = headerCell.getBoundingClientRect().width;\n    if (headerWidth <= widthThreshold) {\n      headerCell.classList.add(headerCellStyles.narrow);\n    }\n  }, [canSort, canColumnActions, headerCell, rowDensity]);\n\n  const handleCellMouseLeave = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {\n      if (!headerCell) {\n        return;\n      }\n\n      // When the column actions menu is opened on right-click, its trigger button is portalled\n      // into the document.body which fires mouseleave on the header cell with relatedTarget pointing\n      // at that button. Since the floating menu lives outside the header cell's subtree, we need\n      // to detect it via relatedTarget and keep the hovered state.\n      if (\n        event.relatedTarget instanceof HTMLElement &&\n        event.relatedTarget.getAttribute('data-trigger') === 'context-action'\n      ) {\n        return;\n      }\n\n      const columnActionsMenu = headerCell.querySelector(\n        '[data-trigger=\"useraction\"]',\n      );\n      const isOpen = columnActionsMenu?.getAttribute('data-state') === 'open';\n      if (isOpen) {\n        // keep the hovered state while the column actions menu is open\n        return;\n      }\n\n      isHoveredRef.current = false;\n      // remove the hovered and narrow state\n      headerCell.classList.remove(\n        headerCellStyles.hovered,\n        headerCellStyles.narrow,\n      );\n    },\n    [headerCell],\n  );\n\n  const handleCellClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {\n      const { target } = event;\n\n      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n        return;\n      }\n\n      if ('headerRow' in target.dataset) {\n        getToggleSortingHandler?.()?.(event);\n        return;\n      }\n\n      const columnHeader = target.closest('[role=\"columnheader\"]');\n      if (!columnHeader) {\n        return;\n      }\n\n      let currentElement: typeof target | null = target;\n      while (currentElement && currentElement !== columnHeader) {\n        if (isInteractiveElement(currentElement)) {\n          return;\n        }\n        currentElement = currentElement.parentElement;\n      }\n\n      getToggleSortingHandler?.()?.(event);\n    },\n    [getToggleSortingHandler],\n  );\n\n  return {\n    handleCellActionsClose,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    handleCellClick,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,YAAY,sBAAsB;AAClC,SAAS,2CAA2C;AAuBpD,SAAS,qBAAqB,SAA4C;AACxE,QAAM,kBAAkB,CAAC,UAAU,KAAK,SAAS,SAAS,QAAQ;AAElE,SAAO,CAAC,EACN,gBAAgB,SAAS,QAAQ,OAAO,KACxC,QAAQ,aAAa,UAAU;AAEnC;AAEO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqE;AACnE,QAAM,eAAe,OAAO,KAAK;AAKjC,YAAU,MAAM;AACd,QAAI,CAAC,wBAAwB,CAAC,aAAa,WAAW,CAAC,YAAY;AACjE;AAAA,IACF;AACA,eAAW,UAAU,IAAI,iBAAiB,OAAO;AAAA,EACnD,GAAG,CAAC,sBAAsB,UAAU,CAAC;AAErC,QAAM,yBAAyB,YAAY,MAAY;AACrD,QAAI,YAAY;AACd,mBAAa,UAAU;AAEvB,iBAAW,UAAU;AAAA,QACnB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAAuB,YAAY,MAAY;AACnD,QAAI,CAAC,cAAe,CAAC,oBAAoB,CAAC,SAAU;AAClD;AAAA,IACF;AAEA,iBAAa,UAAU;AACvB,eAAW,UAAU,IAAI,iBAAiB,OAAO;AAEjD,UAAM,iBAAiB,oCAAoC,UAAU;AACrE,QAAI,CAAC,gBAAgB;AACnB;AAAA,IACF;AAEA,UAAM,cAAc,WAAW,sBAAsB,EAAE;AACvD,QAAI,eAAe,gBAAgB;AACjC,iBAAW,UAAU,IAAI,iBAAiB,MAAM;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,SAAS,kBAAkB,YAAY,UAAU,CAAC;AAEtD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAA6D;AAC5D,UAAI,CAAC,YAAY;AACf;AAAA,MACF;AAMA,UACE,MAAM,yBAAyB,eAC/B,MAAM,cAAc,aAAa,cAAc,MAAM,kBACrD;AACA;AAAA,MACF;AAEA,YAAM,oBAAoB,WAAW;AAAA,QACnC;AAAA,MACF;AACA,YAAM,SAAS,mBAAmB,aAAa,YAAY,MAAM;AACjE,UAAI,QAAQ;AAEV;AAAA,MACF;AAEA,mBAAa,UAAU;AAEvB,iBAAW,UAAU;AAAA,QACnB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA6D;AAC5D,YAAM,EAAE,OAAO,IAAI;AAEnB,UAAI,EAAE,kBAAkB,gBAAgB,EAAE,kBAAkB,aAAa;AACvE;AAAA,MACF;AAEA,UAAI,eAAe,OAAO,SAAS;AACjC,kCAA0B,IAAI,KAAK;AACnC;AAAA,MACF;AAEA,YAAM,eAAe,OAAO,QAAQ,uBAAuB;AAC3D,UAAI,CAAC,cAAc;AACjB;AAAA,MACF;AAEA,UAAI,iBAAuC;AAC3C,aAAO,kBAAkB,mBAAmB,cAAc;AACxD,YAAI,qBAAqB,cAAc,GAAG;AACxC;AAAA,QACF;AACA,yBAAiB,eAAe;AAAA,MAClC;AAEA,gCAA0B,IAAI,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/tables/SimpleTable/SimpleTable.css

@@ -1,4 +1,4 @@
-._1ymahou0-3-5-2 {
+._1ymahou0-3-6-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-5-2 .strato-table-header {
+._1ymahou0-3-6-0 .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-5-2 .strato-table-header:last-child .strato-table-header-cell {
+._1ymahou0-3-6-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-5-2 .strato-table-header-cell {
+._1ymahou0-3-6-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-5-2 .strato-table-cell {
+._1ymahou0-3-6-0 .strato-table-cell {
   position: relative;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-left {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-left {
   text-align: start;
   justify-content: flex-start;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-center {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-center {
   text-align: center;
   justify-content: center;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-right {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-right {
   text-align: end;
   justify-content: flex-end;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-top-left {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-top-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: top;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-top-center {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-top-center {
   text-align: center;
   justify-content: center;
   vertical-align: top;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-top-right {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-top-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: top;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-bottom-left {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-bottom-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: bottom;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-bottom-center {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-bottom-center {
   text-align: center;
   justify-content: center;
   vertical-align: bottom;
 }
-._1ymahou0-3-5-2 .strato-table-cell-alignment-bottom-right {
+._1ymahou0-3-6-0 .strato-table-cell-alignment-bottom-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: bottom;
 }
-._1ymahou0-3-5-2.strato-table-contained {
+._1ymahou0-3-6-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-5-2 ._1ymahou0-3-5-2.strato-table-contained {
+._1jgl8s50-3-6-0 ._1ymahou0-3-6-0.strato-table-contained {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-5-2 ._1ymahou0-3-5-2 .strato-table-header:last-child .strato-table-header-cell {
+._1jgl8s50-3-6-0 ._1ymahou0-3-6-0 .strato-table-header:last-child .strato-table-header-cell {
   border-bottom-width: var(--dt-borders-width-default, 1px);
 }
-._1ymahou0-3-5-2 .strato-table-row:last-child .strato-table-cell {
+._1ymahou0-3-6-0 .strato-table-row:last-child .strato-table-cell {
   border-bottom: none;
 }
-._1ymahou0-3-5-2.strato-table-code-font {
+._1ymahou0-3-6-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-5-2.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-5-2.strato-table-cell-density-default .strato-table-header-cell {
+._1ymahou0-3-6-0.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-6-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-5-2.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-5-2.strato-table-cell-density-comfortable .strato-table-header-cell {
+._1ymahou0-3-6-0.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-6-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-5-2.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-5-2.strato-table-cell-density-condensed .strato-table-header-cell {
+._1ymahou0-3-6-0.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-6-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-5-2.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-5-2.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
+._1ymahou0-3-6-0.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-6-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-5-2.strato-table-rowsep-divider .strato-table-cell {
+._1ymahou0-3-6-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-5-2.strato-table-rowsep-zebra .strato-table-row {
+._1ymahou0-3-6-0.strato-table-rowsep-zebra .strato-table-row {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ymahou0-3-5-2.strato-table-rowsep-zebra .strato-table-header {
+._1ymahou0-3-6-0.strato-table-rowsep-zebra .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-5-2.strato-table-rowsep-zebra .strato-table-row-even {
+._1ymahou0-3-6-0.strato-table-rowsep-zebra .strato-table-row-even {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }

package/esm/tables/SimpleTable/SimpleTable.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./SimpleTable.css";
-var simpleTable = "_1ymahou0-3-5-2";
+var simpleTable = "_1ymahou0-3-6-0";
 export {
   simpleTable
 };

package/esm/tables/SimpleTable/SimpleTable.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/tables/SimpleTable/SimpleTable.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SimpleTable.css';\nexport var simpleTable = '_1ymahou0-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SimpleTable.css';\nexport var simpleTable = '_1ymahou0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/tables/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tables/index.ts"],
-  "sourcesContent": ["export { useFilteredData } from './hooks/useFilteredData.js';\nexport { useLockedRowOrder } from './hooks/useLockedRowOrder.js';\n\n//#region SimpleTable\nexport { SimpleTable } from './SimpleTable/SimpleTable.js';\nexport type {\n  SimpleTableRowData,\n  SimpleTableCustomCell,\n  SimpleTableColumnDefBase,\n  SimpleTableDisplayColumnDef,\n  SimpleTableGroupColumnDef,\n  SimpleTableColumnDef,\n  SimpleTableBaseProps,\n  SimpleTableProps,\n} from './SimpleTable/public.api.js';\n//#endregion\n\n//#region convertToColumns\nexport { convertToColumns } from './convert-to-columns/convert-to-columns.js';\n//#endregion\n\n//#region DataTable\nexport { DataTable } from './DataTable/DataTable.js';\nexport {\n  DataTableActionsMenu as TableActionsMenu,\n  type DataTableActionsMenuActionProps as TableActionsMenuActionProps,\n  type DataTableActionsMenuCopyItemProps as TableActionsMenuCopyItemProps,\n  HideColumnAction as _HideColumnAction,\n  ColumnOrderAction as _ColumnOrderAction,\n} from './DataTable/features/UserActions/UserActionsMenu.js';\nexport type { DataTableCustomCell } from './DataTable/public.api.js';\nexport { DataTableDefaultCell } from './DataTable/components/DataTableDefaultCell.js';\nexport type { DataTableTableActionsProps } from './DataTable/components/TableActions/DataTableTableActions.js';\nexport type { DataTableSelectedRowsActionsProps } from './DataTable/components/TableActions/DataTableSelectedRowsActions.js';\nexport type { DataTableSelectionChipProps } from './DataTable/components/TableActions/DataTableSelectionChip.js';\nexport type {\n  DataTableProps,\n  DataTableBaseProps,\n  DataTableColumnSettingsConfig,\n  DataTableRef,\n  DataTableConfig,\n  DataTableColumnDef,\n  DataTableRowData,\n  DataTableColumnDefBase,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableCustomHeader,\n  DataTableDefaultHeader,\n} from './DataTable/public.api.js';\nexport type { DataTableAlignmentColumnDef } from './DataTable/features/ColumnAlignment.js';\nexport type {\n  DataTableSortingColumnDef,\n  DataTableSortingBaseProps,\n  DataTableSortingControlledProps,\n  DataTableSortingUncontrolledProps,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type {\n  DataTableSortingProps,\n  DataTableCustomSortingFn,\n  DataTableColumnSort,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type { DataTableThresholdColumnDef } from './DataTable/features/Thresholds/threshold-types.js';\nexport type {\n  DataTableColumnTypesColumnDef,\n  DataTableColumnType,\n  DataTableMeterbarColumnConfig,\n  DataTableSparklineColumnConfig,\n  DataTableGanttColumnConfig,\n  DataTableMarkdownColumnConfig,\n  DataTableLogContentColumnConfig,\n  DataTableTextColumnConfig,\n  DataTableSparklineXAxisProps,\n  DataTableSparklineYAxisProps,\n} from './DataTable/features/ColumnTypes/column-types-types.js';\nexport type {\n  DataTableCellFormatterColumnDef,\n  DataTableCellFormatter,\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions as DataTableCellFormatterCurrencyOptions,\n} from './DataTable/features/CellFormatter/cell-formatter-types.js';\nexport type {\n  DataTableLineWrapProps,\n  DataTableLineWrapState,\n  DataTableLineWrapControlledProps,\n  DataTableLineWrapUncontrolledProps,\n  DataTableLineWrapBaseProps,\n} from './DataTable/features/LineWrap/line-wrap-types.js';\nexport { DataTableGlobalLineWrapAction } from './DataTable/features/LineWrap/LineWrap.js';\nexport type {\n  DataTableColumnFontStyleProps,\n  DataTableColumnFontStyleState,\n  DataTableColumnFontStyleBaseProps,\n  DataTableColumnFontStyleControlledProps,\n  DataTableColumnFontStyleUncontrolledProps,\n} from './DataTable/features/ColumnFontStyle/column-font-style-types.js';\nexport type { DataTableVisualVariantProps } from './DataTable/features/VisualVariants/visual-variants-types.js';\nexport type { DataTableThresholdProps } from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableLoadingStateProps } from './DataTable/features/LoadingState/loading-state-types.js';\nexport type { DataTableDefaultCellProps } from './DataTable/components/DataTableDefaultCell.js';\nexport type {\n  DataTableColumnActions,\n  DataTableColumnActionsProps,\n  DataTableColumnActionsContent,\n} from './DataTable/features/UserActions/ColumnActions.js';\nexport { DataTableCellActions } from './DataTable/features/UserActions/CellActions.js';\nexport type {\n  DataTableCellActionsProps,\n  DataTableCellActionsContent,\n} from './DataTable/features/UserActions/CellActions.js';\nexport type {\n  DataTableRowActions,\n  DataTableRowActionsProps,\n} from './DataTable/features/UserActions/RowActions.js';\nexport type {\n  DataTablePaginationProps,\n  DataTablePaginationBaseProps,\n  DataTablePaginationPageIndexUncontrolledProps,\n  DataTablePaginationPageIndexControlledProps,\n  DataTablePaginationPageSizeUncontrolledProps,\n  DataTablePaginationPageSizeControlledProps,\n  DataTablePaginationClientSideProps,\n  DataTablePaginationServerSideProps,\n} from './DataTable/features/Pagination/pagination-types.js';\n\nexport { DataTablePagination } from './DataTable/features/Pagination/Pagination.js';\nexport type {\n  DataTableColumnSizingProps,\n  DataTableColumnSizingState,\n  DataTableColumnSizingBaseProps,\n  DataTableColumnSizingControlledProps,\n  DataTableColumnSizingUncontrolledProps,\n} from './DataTable/features/ColumnSizing/column-sizing-types.js';\nexport type {\n  DataTableThresholdRule,\n  DataTableRowThreshold,\n  DataTableColumnThreshold,\n  DataTableSingleColumnThreshold,\n  DataTableCombinedColumnThresholds,\n  DataTableSingleRowThreshold,\n  DataTableCombinedRowThresholds,\n} from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableDevTools } from './DataTable/features/DevTools.js';\nexport type {\n  DataTableColumnVisibilityProps,\n  DataTableColumnVisibilityState,\n  DataTableVisibilityColumnDef,\n  DataTableColumnVisibilityControlledProps,\n  DataTableColumnVisibilityUncontrolledProps,\n  DataTableColumnVisibilityBaseProps,\n} from './DataTable/features/ColumnVisibility/column-visibility-types.js';\nexport type {\n  DataTableColumnOrderProps,\n  DataTableColumnOrderBaseProps,\n  DataTableColumnOrderControlledProps,\n  DataTableColumnOrderUncontrolledProps,\n} from './DataTable/features/ColumnOrder/column-order-types.js';\nexport type {\n  DataTableRowSelectionProps,\n  DataTableRowSelectionBaseProps,\n  DataTableRowSelectionControlledProps,\n  DataTableRowSelectionUncontrolledProps,\n} from './DataTable/features/RowSelection/row-selection-types.js';\nexport type {\n  DataTableSubRowsProps,\n  DataTableSubRowsUncontrolledProps,\n  DataTableSubRowsControlledProps,\n  DataTableSubRowsBaseProps,\n} from './DataTable/features/SubRows/sub-rows-types.js';\nexport type {\n  DataTableRowInteractivityProps,\n  DataTableRowInteractivityBaseProps,\n  DataTableRowInteractivityUncontrolledProps,\n  DataTableRowInteractivityControlledProps,\n  DataTableRowActivationEvent,\n} from './DataTable/features/RowInteractivity/row-interactivity-types.js';\nexport type {\n  DataTableColumnOrderSettings,\n  DataTableColumnOrderSettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnOrderSettings.js';\nexport { DataTableColumnPinningSettings } from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnPinningSettings.js';\nexport type {\n  DataTableColumnSettingsTriggerProps,\n  DataTableColumnPinningSettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\nexport type {\n  DataTableRowOrderProps,\n  DataTableRowOrderBaseProps,\n  DataTableRowOrderControlledProps,\n  DataTableRowOrderUncontrolledProps,\n} from './DataTable/features/RowOrder/row-order-types.js';\nexport type {\n  DataTableColumnPinningProps,\n  DataTableColumnPinningBaseProps,\n  DataTableColumnPinningControlledProps,\n  DataTableColumnPinningUncontrolledProps,\n  DataTablePinnedColumnState,\n} from './DataTable/features/ColumnPinning/column-pinning-types.js';\nexport type { DataTableColumnVisibilitySettingsProps } from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\n// DEPRECATION: [APPDEV-16236] BREAKING-CHANGE: Remove deprecated onDownloadData and DataTableDownloadProps.\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DataTableDownloadProps,\n  DataTableDownloadSlotProps,\n} from './DataTable/features/Download/download-types.js';\nexport { DataTableDownload } from './DataTable/features/Download/Download.js';\nexport { DataTableConfigProvider } from './hooks/useDataTableConfig.js';\nexport { DATA_TABLE_ROW_ID_SEPARATOR } from './DataTable/features/RowIdentification/RowIdentification.js';\nexport type { DataTableRowIdentification } from './DataTable/features/RowIdentification/row-identification-types.js';\nexport type {\n  DataTableExpandableRowWrapperProps,\n  DataTableExpandableRowProps,\n  DataTableExpandableRowBaseProps,\n  DataTableExpandableRowControlledProps,\n  DataTableExpandableRowUncontrolledProps,\n} from './DataTable/features/RowDetails/row-details-types.js';\nexport {\n  DataTableExpandableRowTemplate,\n  DataTableExpandableRowWrapper,\n} from '../tables/DataTable/features/RowDetails/RowDetails.js';\nexport {\n  DataTableToolbar,\n  type DataTableToolbarProps,\n} from './DataTable/components/Toolbar/DataTableToolbar.js';\nexport {\n  isDataTableGroupColumnDef,\n  isDataTableDisplayColumnDef,\n} from './DataTable/hooks/useColumns.js';\n//#endregion\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAGlC,SAAS,mBAAmB;AAc5B,SAAS,wBAAwB;AAIjC,SAAS,iBAAiB;AAC1B;AAAA,EAC0B;AAAA,EAGJ;AAAA,EACC;AAAA,OAChB;AAEP,SAAS,4BAA4B;AAwDrC,SAAS,qCAAqC;AAiB9C,SAAS,4BAA4B;AAoBrC,SAAS,2BAA2B;AAuDpC,SAAS,sCAAsC;AAyB/C,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAS5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["export { useFilteredData } from './hooks/useFilteredData.js';\nexport { useLockedRowOrder } from './hooks/useLockedRowOrder.js';\n\n//#region SimpleTable\nexport { SimpleTable } from './SimpleTable/SimpleTable.js';\nexport type {\n  SimpleTableRowData,\n  SimpleTableCustomCell,\n  SimpleTableColumnDefBase,\n  SimpleTableDisplayColumnDef,\n  SimpleTableGroupColumnDef,\n  SimpleTableColumnDef,\n  SimpleTableBaseProps,\n  SimpleTableProps,\n} from './SimpleTable/public.api.js';\n//#endregion\n\n//#region convertToColumns\nexport { convertToColumns } from './convert-to-columns/convert-to-columns.js';\n//#endregion\n\n//#region DataTable\nexport { DataTable } from './DataTable/DataTable.js';\nexport {\n  DataTableActionsMenu as TableActionsMenu,\n  type DataTableActionsMenuActionProps as TableActionsMenuActionProps,\n  type DataTableActionsMenuCopyItemProps as TableActionsMenuCopyItemProps,\n  HideColumnAction as _HideColumnAction,\n  ColumnOrderAction as _ColumnOrderAction,\n} from './DataTable/features/UserActions/UserActionsMenu.js';\nexport type { DataTableCustomCell } from './DataTable/public.api.js';\nexport { DataTableDefaultCell } from './DataTable/components/DataTableDefaultCell.js';\nexport type { DataTableTableActionsProps } from './DataTable/components/TableActions/DataTableTableActions.js';\nexport type { DataTableSelectedRowsActionsProps } from './DataTable/components/TableActions/DataTableSelectedRowsActions.js';\nexport type { DataTableSelectionChipProps } from './DataTable/components/TableActions/DataTableSelectionChip.js';\nexport type {\n  DataTableProps,\n  DataTableBaseProps,\n  DataTableColumnSettingsConfig,\n  DataTableRef,\n  DataTableConfig,\n  DataTableColumnDef,\n  DataTableRowData,\n  DataTableColumnDefBase,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableCustomHeader,\n  DataTableDefaultHeader,\n} from './DataTable/public.api.js';\nexport type { DataTableAlignmentColumnDef } from './DataTable/features/ColumnAlignment.js';\nexport type {\n  DataTableSortingColumnDef,\n  DataTableSortingBaseProps,\n  DataTableSortingControlledProps,\n  DataTableSortingUncontrolledProps,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type {\n  DataTableSortingProps,\n  DataTableCustomSortingFn,\n  DataTableColumnSort,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type { DataTableThresholdColumnDef } from './DataTable/features/Thresholds/threshold-types.js';\nexport type {\n  DataTableColumnTypesColumnDef,\n  DataTableColumnType,\n  DataTableMeterbarColumnConfig,\n  DataTableSparklineColumnConfig,\n  DataTableGanttColumnConfig,\n  DataTableMarkdownColumnConfig,\n  DataTableLogContentColumnConfig,\n  DataTableTextColumnConfig,\n  DataTableSparklineXAxisProps,\n  DataTableSparklineYAxisProps,\n} from './DataTable/features/ColumnTypes/column-types-types.js';\nexport type {\n  DataTableCellFormatterColumnDef,\n  DataTableCellFormatter,\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions as DataTableCellFormatterCurrencyOptions,\n} from './DataTable/features/CellFormatter/cell-formatter-types.js';\nexport type {\n  DataTableLineWrapProps,\n  DataTableLineWrapState,\n  DataTableLineWrapControlledProps,\n  DataTableLineWrapUncontrolledProps,\n  DataTableLineWrapBaseProps,\n} from './DataTable/features/LineWrap/line-wrap-types.js';\nexport { DataTableGlobalLineWrapAction } from './DataTable/features/LineWrap/LineWrap.js';\nexport type {\n  DataTableColumnFontStyleProps,\n  DataTableColumnFontStyleState,\n  DataTableColumnFontStyleBaseProps,\n  DataTableColumnFontStyleControlledProps,\n  DataTableColumnFontStyleUncontrolledProps,\n} from './DataTable/features/ColumnFontStyle/column-font-style-types.js';\nexport type { DataTableVisualVariantProps } from './DataTable/features/VisualVariants/visual-variants-types.js';\nexport type { DataTableThresholdProps } from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableLoadingStateProps } from './DataTable/features/LoadingState/loading-state-types.js';\nexport type { DataTableDefaultCellProps } from './DataTable/components/DataTableDefaultCell.js';\nexport type {\n  DataTableColumnActions,\n  DataTableColumnActionsProps,\n  DataTableColumnActionsContent,\n} from './DataTable/features/UserActions/ColumnActions.js';\nexport { DataTableCellActions } from './DataTable/features/UserActions/CellActions.js';\nexport type {\n  DataTableCellActionsProps,\n  DataTableCellActionsContent,\n} from './DataTable/features/UserActions/CellActions.js';\nexport type {\n  DataTableRowActions,\n  DataTableRowActionsProps,\n} from './DataTable/features/UserActions/RowActions.js';\nexport type {\n  DataTablePaginationProps,\n  DataTablePaginationBaseProps,\n  DataTablePaginationPageIndexUncontrolledProps,\n  DataTablePaginationPageIndexControlledProps,\n  DataTablePaginationPageSizeUncontrolledProps,\n  DataTablePaginationPageSizeControlledProps,\n  DataTablePaginationClientSideProps,\n  DataTablePaginationServerSideProps,\n} from './DataTable/features/Pagination/pagination-types.js';\n\nexport { DataTablePagination } from './DataTable/features/Pagination/Pagination.js';\nexport type {\n  DataTableColumnSizingProps,\n  DataTableColumnSizingState,\n  DataTableColumnSizingBaseProps,\n  DataTableColumnSizingControlledProps,\n  DataTableColumnSizingUncontrolledProps,\n} from './DataTable/features/ColumnSizing/column-sizing-types.js';\nexport type {\n  DataTableThresholdRule,\n  DataTableRowThreshold,\n  DataTableColumnThreshold,\n  DataTableSingleColumnThreshold,\n  DataTableCombinedColumnThresholds,\n  DataTableSingleRowThreshold,\n  DataTableCombinedRowThresholds,\n} from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableDevTools } from './DataTable/features/DevTools.js';\nexport type {\n  DataTableColumnVisibilityProps,\n  DataTableColumnVisibilityState,\n  DataTableVisibilityColumnDef,\n  DataTableColumnVisibilityControlledProps,\n  DataTableColumnVisibilityUncontrolledProps,\n  DataTableColumnVisibilityBaseProps,\n} from './DataTable/features/ColumnVisibility/column-visibility-types.js';\nexport type {\n  DataTableColumnOrderProps,\n  DataTableColumnOrderBaseProps,\n  DataTableColumnOrderControlledProps,\n  DataTableColumnOrderUncontrolledProps,\n} from './DataTable/features/ColumnOrder/column-order-types.js';\nexport type {\n  DataTableRowSelectionProps,\n  DataTableRowSelectionBaseProps,\n  DataTableRowSelectionControlledProps,\n  DataTableRowSelectionUncontrolledProps,\n} from './DataTable/features/RowSelection/row-selection-types.js';\nexport type {\n  DataTableSubRowsProps,\n  DataTableSubRowsUncontrolledProps,\n  DataTableSubRowsControlledProps,\n  DataTableSubRowsBaseProps,\n} from './DataTable/features/SubRows/sub-rows-types.js';\nexport type {\n  DataTableRowInteractivityProps,\n  DataTableRowInteractivityBaseProps,\n  DataTableRowInteractivityUncontrolledProps,\n  DataTableRowInteractivityControlledProps,\n  DataTableRowActivationEvent,\n} from './DataTable/features/RowInteractivity/row-interactivity-types.js';\nexport type { DataTableColumnOrderSettings } from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnOrderSettings.js';\nexport { DataTableColumnPinningSettings } from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnPinningSettings.js';\nexport type {\n  DataTableColumnSettingsTriggerProps,\n  DataTableColumnOrderSettingsProps,\n  DataTableColumnPinningSettingsProps,\n  DataTableColumnVisibilitySettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\nexport type {\n  DataTableRowOrderProps,\n  DataTableRowOrderBaseProps,\n  DataTableRowOrderControlledProps,\n  DataTableRowOrderUncontrolledProps,\n} from './DataTable/features/RowOrder/row-order-types.js';\nexport type {\n  DataTableColumnPinningProps,\n  DataTableColumnPinningBaseProps,\n  DataTableColumnPinningControlledProps,\n  DataTableColumnPinningUncontrolledProps,\n  DataTablePinnedColumnState,\n} from './DataTable/features/ColumnPinning/column-pinning-types.js';\n// DEPRECATION: [APPDEV-16236] BREAKING-CHANGE: Remove deprecated onDownloadData and DataTableDownloadProps.\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DataTableDownloadProps,\n  DataTableDownloadSlotProps,\n} from './DataTable/features/Download/download-types.js';\nexport { DataTableDownload } from './DataTable/features/Download/Download.js';\nexport { DataTableConfigProvider } from './hooks/useDataTableConfig.js';\nexport { DATA_TABLE_ROW_ID_SEPARATOR } from './DataTable/features/RowIdentification/RowIdentification.js';\nexport type { DataTableRowIdentification } from './DataTable/features/RowIdentification/row-identification-types.js';\nexport type {\n  DataTableExpandableRowWrapperProps,\n  DataTableExpandableRowProps,\n  DataTableExpandableRowBaseProps,\n  DataTableExpandableRowControlledProps,\n  DataTableExpandableRowUncontrolledProps,\n} from './DataTable/features/RowDetails/row-details-types.js';\nexport {\n  DataTableExpandableRowTemplate,\n  DataTableExpandableRowWrapper,\n} from '../tables/DataTable/features/RowDetails/RowDetails.js';\nexport {\n  DataTableToolbar,\n  type DataTableToolbarProps,\n} from './DataTable/components/Toolbar/DataTableToolbar.js';\nexport {\n  isDataTableGroupColumnDef,\n  isDataTableDisplayColumnDef,\n} from './DataTable/hooks/useColumns.js';\n//#endregion\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAGlC,SAAS,mBAAmB;AAc5B,SAAS,wBAAwB;AAIjC,SAAS,iBAAiB;AAC1B;AAAA,EAC0B;AAAA,EAGJ;AAAA,EACC;AAAA,OAChB;AAEP,SAAS,4BAA4B;AAwDrC,SAAS,qCAAqC;AAiB9C,SAAS,4BAA4B;AAoBrC,SAAS,2BAA2B;AAoDpC,SAAS,sCAAsC;AA0B/C,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAS5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/esm/typography/block-quote/Blockquote.css

@@ -1,11 +1,11 @@
-._1knl9z60-3-5-2 {
+._1knl9z60-3-6-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-5-2:before {
+._1knl9z60-3-6-0:before {
   content: "";
   position: absolute;
   top: 0;

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

@@ -1,5 +1,5 @@
 import "./Blockquote.css";
-var blockquoteCSS = "_1knl9z60-3-5-2";
+var blockquoteCSS = "_1knl9z60-3-6-0";
 export {
   blockquoteCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/block-quote/Blockquote.css.ts"],
-  "sourcesContent": ["import './Blockquote.css';\nexport var blockquoteCSS = '_1knl9z60-3-5-2';"],
+  "sourcesContent": ["import './Blockquote.css';\nexport var blockquoteCSS = '_1knl9z60-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/typography/code/Code.css

@@ -1,4 +1,4 @@
-._1v51izp0-3-5-2 {
+._1v51izp0-3-6-0 {
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);

package/esm/typography/code/Code.sty.js

@@ -1,5 +1,5 @@
 import "./Code.css";
-var codeCSS = "_1v51izp0-3-5-2";
+var codeCSS = "_1v51izp0-3-6-0";
 export {
   codeCSS
 };

package/esm/typography/code/Code.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/code/Code.css.ts"],
-  "sourcesContent": ["import './Code.css';\nexport var codeCSS = '_1v51izp0-3-5-2';"],
+  "sourcesContent": ["import './Code.css';\nexport var codeCSS = '_1v51izp0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/typography/emphasis/Emphasis.css

@@ -1,4 +1,4 @@
-._1r35rtu0-3-5-2 {
+._1r35rtu0-3-6-0 {
   font-style: italic;
   overflow-wrap: break-word;
 }

package/esm/typography/emphasis/Emphasis.sty.js

@@ -1,5 +1,5 @@
 import "./Emphasis.css";
-var emphasisCSS = "_1r35rtu0-3-5-2";
+var emphasisCSS = "_1r35rtu0-3-6-0";
 export {
   emphasisCSS
 };

package/esm/typography/emphasis/Emphasis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/emphasis/Emphasis.css.ts"],
-  "sourcesContent": ["import './Emphasis.css';\nexport var emphasisCSS = '_1r35rtu0-3-5-2';"],
+  "sourcesContent": ["import './Emphasis.css';\nexport var emphasisCSS = '_1r35rtu0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/typography/external-link/ExternalLink.css

@@ -1,22 +1,22 @@
-._1v1skpy0-3-5-2 {
+._1v1skpy0-3-6-0 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1v1skpy0-3-5-2:hover {
+._1v1skpy0-3-6-0:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1v1skpy0-3-5-2:active {
+._1v1skpy0-3-6-0:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }
-._1v1skpy0-3-5-2:focus-visible {
+._1v1skpy0-3-6-0:focus-visible {
   text-decoration: none;
 }
-._1v1skpy0-3-5-2 > span:last-child {
+._1v1skpy0-3-6-0 > span:last-child {
   white-space: nowrap;
 }
-._1v1skpy0-3-5-2 > span:last-child > svg {
+._1v1skpy0-3-6-0 > span:last-child > svg {
   margin-left: var(--dt-spacings-size-2, 2px);
   width: 1lh;
   height: 1lh;

package/esm/typography/external-link/ExternalLink.sty.js

@@ -1,6 +1,6 @@
 import "../../core/styles/focusRingStatic.css";
 import "./ExternalLink.css";
-var externalLink = "_1v1skpy0-3-5-2 _z0fq9b4-3-5-2 _z0fq9be-3-5-2 _z0fq9b5-3-5-2 _z0fq9b9-3-5-2";
+var externalLink = "_1v1skpy0-3-6-0 _z0fq9b4-3-6-0 _z0fq9be-3-6-0 _z0fq9b5-3-6-0 _z0fq9b9-3-6-0";
 export {
   externalLink
 };

package/esm/typography/external-link/ExternalLink.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/external-link/ExternalLink.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './ExternalLink.css';\nexport var externalLink = '_1v1skpy0-3-5-2 _z0fq9b4-3-5-2 _z0fq9be-3-5-2 _z0fq9b5-3-5-2 _z0fq9b9-3-5-2';"],
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './ExternalLink.css';\nexport var externalLink = '_1v1skpy0-3-6-0 _z0fq9b4-3-6-0 _z0fq9be-3-6-0 _z0fq9b5-3-6-0 _z0fq9b9-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/typography/heading/Heading.css

@@ -1,10 +1,10 @@
-._5ei34w0-3-5-2 {
+._5ei34w0-3-6-0 {
   margin: 0;
   overflow-wrap: break-word;
   font-style: normal;
   color: inherit;
 }
-._5ei34w1-3-5-2 {
+._5ei34w1-3-6-0 {
   font-family: var(--dt-typography-heading-level-1-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-1-size, 32px);
   font-weight: var(--dt-typography-heading-level-1-weight, 600);
@@ -12,7 +12,7 @@
   text-transform: var(--dt-typography-heading-level-1-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-1-text-decoration, none);
 }
-._5ei34w2-3-5-2 {
+._5ei34w2-3-6-0 {
   font-family: var(--dt-typography-heading-level-2-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-2-size, 28px);
   font-weight: var(--dt-typography-heading-level-2-weight, 600);
@@ -20,7 +20,7 @@
   text-transform: var(--dt-typography-heading-level-2-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-2-text-decoration, none);
 }
-._5ei34w3-3-5-2 {
+._5ei34w3-3-6-0 {
   font-family: var(--dt-typography-heading-level-3-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-3-size, 24px);
   font-weight: var(--dt-typography-heading-level-3-weight, 600);
@@ -28,7 +28,7 @@
   text-transform: var(--dt-typography-heading-level-3-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-3-text-decoration, none);
 }
-._5ei34w4-3-5-2 {
+._5ei34w4-3-6-0 {
   font-family: var(--dt-typography-heading-level-4-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-4-size, 20px);
   font-weight: var(--dt-typography-heading-level-4-weight, 600);
@@ -36,7 +36,7 @@
   text-transform: var(--dt-typography-heading-level-4-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-4-text-decoration, none);
 }
-._5ei34w5-3-5-2 {
+._5ei34w5-3-6-0 {
   font-family: var(--dt-typography-heading-level-5-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-5-size, 16px);
   font-weight: var(--dt-typography-heading-level-5-weight, 600);
@@ -44,7 +44,7 @@
   text-transform: var(--dt-typography-heading-level-5-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-5-text-decoration, none);
 }
-._5ei34w6-3-5-2 {
+._5ei34w6-3-6-0 {
   font-family: var(--dt-typography-heading-level-6-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-6-size, 14px);
   font-weight: var(--dt-typography-heading-level-6-weight, 600);

package/esm/typography/heading/Heading.sty.js

@@ -1,6 +1,6 @@
 import "./Heading.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var headingCSS = _7a468({ defaultClassName: "_5ei34w0-3-5-2", variantClassNames: { visualLevel: { "1": "_5ei34w1-3-5-2", "2": "_5ei34w2-3-5-2", "3": "_5ei34w3-3-5-2", "4": "_5ei34w4-3-5-2", "5": "_5ei34w5-3-5-2", "6": "_5ei34w6-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var headingCSS = _7a468({ defaultClassName: "_5ei34w0-3-6-0", variantClassNames: { visualLevel: { "1": "_5ei34w1-3-6-0", "2": "_5ei34w2-3-6-0", "3": "_5ei34w3-3-6-0", "4": "_5ei34w4-3-6-0", "5": "_5ei34w5-3-6-0", "6": "_5ei34w6-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   headingCSS
 };

package/esm/typography/heading/Heading.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/heading/Heading.css.ts"],
-  "sourcesContent": ["import './Heading.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var headingCSS = _7a468({defaultClassName:'_5ei34w0-3-5-2',variantClassNames:{visualLevel:{'1':'_5ei34w1-3-5-2','2':'_5ei34w2-3-5-2','3':'_5ei34w3-3-5-2','4':'_5ei34w4-3-5-2','5':'_5ei34w5-3-5-2','6':'_5ei34w6-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Heading.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var headingCSS = _7a468({defaultClassName:'_5ei34w0-3-6-0',variantClassNames:{visualLevel:{'1':'_5ei34w1-3-6-0','2':'_5ei34w2-3-6-0','3':'_5ei34w3-3-6-0','4':'_5ei34w4-3-6-0','5':'_5ei34w5-3-6-0','6':'_5ei34w6-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,KAAI,kBAAiB,KAAI,kBAAiB,KAAI,kBAAiB,KAAI,kBAAiB,KAAI,kBAAiB,KAAI,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/highlight/Highlight.css

@@ -1,8 +1,8 @@
-._lajjl30-3-5-2 {
+._lajjl30-3-6-0 {
   white-space: pre-wrap;
   flex: none;
 }
-._lajjl30-3-5-2::highlight(strato-typography-highlight), ._lajjl30-3-5-2 *::highlight(strato-typography-highlight) {
+._lajjl30-3-6-0::highlight(strato-typography-highlight), ._lajjl30-3-6-0 *::highlight(strato-typography-highlight) {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background: var(--dt-colors-background-container-neutral-accent, #5b5c81);
 }

package/esm/typography/highlight/Highlight.sty.js

@@ -1,5 +1,5 @@
 import "./Highlight.css";
-var wrapper = "_lajjl30-3-5-2";
+var wrapper = "_lajjl30-3-6-0";
 export {
   wrapper
 };

package/esm/typography/highlight/Highlight.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/highlight/Highlight.css.ts"],
-  "sourcesContent": ["import './Highlight.css';\nexport var wrapper = '_lajjl30-3-5-2';"],
+  "sourcesContent": ["import './Highlight.css';\nexport var wrapper = '_lajjl30-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/typography/link/Link.css

@@ -1,15 +1,15 @@
-._1iksxp40-3-5-2 {
+._1iksxp40-3-6-0 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1iksxp40-3-5-2:hover {
+._1iksxp40-3-6-0:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1iksxp40-3-5-2:active {
+._1iksxp40-3-6-0:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }
-._1iksxp40-3-5-2:focus-visible {
+._1iksxp40-3-6-0:focus-visible {
   text-decoration: none;
 }

package/esm/typography/link/Link.sty.js

@@ -1,6 +1,6 @@
 import "../../core/styles/focusRingStatic.css";
 import "./Link.css";
-var link = "_1iksxp40-3-5-2 _z0fq9b4-3-5-2 _z0fq9be-3-5-2 _z0fq9b5-3-5-2 _z0fq9b9-3-5-2";
+var link = "_1iksxp40-3-6-0 _z0fq9b4-3-6-0 _z0fq9be-3-6-0 _z0fq9b5-3-6-0 _z0fq9b9-3-6-0";
 export {
   link
 };