@dynatrace/strato-components 3.4.1 → 3.5.2

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

@@ -20,6 +20,7 @@ __export(DataTableRow_css_exports, {
   row: () => row
 });
 module.exports = __toCommonJS(DataTableRow_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_DataTable_css_ts_vanilla = require("../DataTable.css");
 var import_RowOrder_css_ts_vanilla = require("../features/RowOrder/RowOrder.css");
@@ -27,4 +28,4 @@ var import_RowDetails_css_ts_vanilla = require("../features/RowDetails/RowDetail
 var import_RowInteractivity_css_ts_vanilla = require("../features/RowInteractivity/RowInteractivity.css");
 var import_DataTableRow_css_ts_vanilla = require("./DataTableRow.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var row = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1y5fzv0-3-4-1", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-4-1", horizontalDividers: "_1y5fzv2-3-4-1", zebraStripes: "_1y5fzv3-3-4-1" }, rowParity: { even: "_1y5fzv4-3-4-1", odd: "_1y5fzv5-3-4-1" }, isDraggedRow: { true: "_1y5fzv6-3-4-1", false: "_1y5fzv7-3-4-1" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-4-1"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-4-1"]] });
+var row = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1y5fzv0-3-5-2", variantClassNames: { rowSeparation: { none: "_1y5fzv1-3-5-2", horizontalDividers: "_1y5fzv2-3-5-2", zebraStripes: "_1y5fzv3-3-5-2" }, rowParity: { even: "_1y5fzv4-3-5-2", odd: "_1y5fzv5-3-5-2" }, isDraggedRow: { true: "_1y5fzv6-3-5-2", false: "_1y5fzv7-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_1y5fzv8-3-5-2"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_1y5fzv9-3-5-2"]] });

package/tables/DataTable/components/DataTableScrollShadow.css

@@ -1,8 +1,8 @@
-._1al677r0-3-4-1 {
+._1al677r0-3-5-2 {
   position: sticky;
   pointer-events: none;
 }
-._1al677r0-3-4-1::after {
+._1al677r0-3-5-2::after {
   content: "";
   position: absolute;
   top: 0;
@@ -10,19 +10,19 @@
   width: 50px;
   pointer-events: none;
 }
-[data-theme="light"] ._1al677r1-3-4-1::after {
+[data-theme="light"] ._1al677r1-3-5-2::after {
   box-shadow: inset 12px 0px 12px -32px var(--dt-colors-theme-foreground-10, #2d2e4e), inset 18px 0px 18px -32px var(--dt-colors-theme-foreground-10, #2d2e4e);
 }
-[data-theme="dark"] ._1al677r1-3-4-1::after {
+[data-theme="dark"] ._1al677r1-3-5-2::after {
   box-shadow: inset 12px 0px 12px -16px var(--dt-colors-theme-foreground-20, #fff), inset 16px 0px 16px -16px var(--dt-colors-theme-foreground-20, #fff);
 }
-[data-theme="light"] ._1al677r2-3-4-1::after {
+[data-theme="light"] ._1al677r2-3-5-2::after {
   box-shadow: inset -12px 0px 12px -32px var(--dt-colors-theme-foreground-10, #2d2e4e), inset -18px 0px 18px -32px var(--dt-colors-theme-foreground-10, #2d2e4e);
 }
-[data-theme="dark"] ._1al677r2-3-4-1::after {
+[data-theme="dark"] ._1al677r2-3-5-2::after {
   box-shadow: inset -12px 0px 12px -16px var(--dt-colors-theme-foreground-20, #fff), inset -16px 0px 16px -16px var(--dt-colors-theme-foreground-20, #fff);
 }
-._1al677r3-3-4-1 {
+._1al677r3-3-5-2 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -33,10 +33,10 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r3-3-4-1::after {
+._1al677r3-3-5-2::after {
   left: 0;
 }
-._1al677r4-3-4-1 {
+._1al677r4-3-5-2 {
   top: 0;
   bottom: 0;
   height: 100%;
@@ -46,6 +46,6 @@
   grid-row-end: body-end;
   z-index: 6;
 }
-._1al677r4-3-4-1::after {
+._1al677r4-3-5-2::after {
   right: 0;
 }

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

@@ -22,5 +22,5 @@ __export(DataTableScrollShadow_css_exports, {
 });
 module.exports = __toCommonJS(DataTableScrollShadow_css_exports);
 var import_DataTableScrollShadow_css_ts_vanilla = require("./DataTableScrollShadow.css");
-var scrollShadow = { left: "_1al677r1-3-4-1 _1al677r0-3-4-1", right: "_1al677r2-3-4-1 _1al677r0-3-4-1" };
-var tableEdgeShadow = { left: "_1al677r3-3-4-1 _1al677r1-3-4-1 _1al677r0-3-4-1", right: "_1al677r4-3-4-1 _1al677r2-3-4-1 _1al677r0-3-4-1" };
+var scrollShadow = { left: "_1al677r1-3-5-2 _1al677r0-3-5-2", right: "_1al677r2-3-5-2 _1al677r0-3-5-2" };
+var tableEdgeShadow = { left: "_1al677r3-3-5-2 _1al677r1-3-5-2 _1al677r0-3-5-2", right: "_1al677r4-3-5-2 _1al677r2-3-5-2 _1al677r0-3-5-2" };

package/tables/DataTable/components/DataTableVirtualizationContainer.css

@@ -1,4 +1,4 @@
-._ytdpsw0-3-4-1 {
+._ytdpsw0-3-5-2 {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -6,50 +6,76 @@
   overflow: auto;
   box-sizing: border-box;
 }
-._ytdpsw1-3-4-1 {
+._ytdpsw1-3-5-2 {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header' 'body';
 }
-._ytdpsw2-3-4-1 {
+._ytdpsw2-3-5-2 {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-._ytdpsw3-3-4-1 {
+._ytdpsw3-3-5-2 {
   overflow: hidden;
 }
-._ytdpsw4-3-4-1 {
+._ytdpsw4-3-5-2 {
   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-4-1::-webkit-scrollbar-track {
+._ytdpsw4-3-5-2::-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-4-1::-webkit-scrollbar-track:horizontal {
+._ytdpsw4-3-5-2::-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-4-1::-webkit-scrollbar-track:vertical {
+._ytdpsw4-3-5-2::-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));
 }
-._ytdpsw5-3-4-1::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-5-2 ._ytdpsw4-3-5-2 {
+  border-width: var(--dt-borders-width-default, 1px);
+}
+._1jgl8s50-3-5-2 ._ytdpsw4-3-5-2::-webkit-scrollbar-track {
+  border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-default, 1px));
+}
+._1jgl8s50-3-5-2 ._ytdpsw4-3-5-2::-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-5-2 ._ytdpsw4-3-5-2::-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-5-2::-webkit-scrollbar-track:horizontal {
   border-top: solid var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpswf-3-4-1::-webkit-scrollbar-track:horizontal {
+._1jgl8s50-3-5-2 ._ytdpsw5-3-5-2::-webkit-scrollbar-track:horizontal {
+  border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._ytdpswf-3-5-2::-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;
 }
-._ytdpswf-3-4-1::-webkit-scrollbar-track:vertical {
+._ytdpswf-3-5-2::-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;
 }
-._ytdpswf-3-4-1::-webkit-scrollbar-corner {
+._ytdpswf-3-5-2::-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-5-2 ._ytdpswf-3-5-2::-webkit-scrollbar-track:horizontal {
+  border-top: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._1jgl8s50-3-5-2 ._ytdpswf-3-5-2::-webkit-scrollbar-track:vertical {
+  border-left: solid var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._1jgl8s50-3-5-2 ._ytdpswf-3-5-2::-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.js

@@ -40,6 +40,7 @@ var import_DataTableStatePlaceholder = require("./DataTableStatePlaceholder.js")
 var styles = __toESM(require("./DataTableVirtualizationContainer.sty.js"));
 var import_useFontsUpdated = require("../../../core/hooks/useFontsUpdated.js");
 var import_logging = require("../../../core/utils/logging.js");
+var import_data_table_border_width = require("../../utils/data-table-border-width.js");
 var import_constants = require("../constants.js");
 var import_column_pinning_utils = require("../features/ColumnPinning/column-pinning-utils.js");
 var import_width_utils = require("../features/Layout/width-utils.js");
@@ -178,12 +179,12 @@ function DataTableVirtualizationContainer(props) {
   const containerStyle = (0, import_react.useMemo)(() => {
     let minHeight = void 0;
     if (totalHeaderHeight === 0) {
-      minHeight = headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + import_constants.DATA_TABLE_BORDER_WIDTH;
+      minHeight = headers === "hidden" ? estimatedRowHeight : estimatedRowHeight * 2 + (0, import_data_table_border_width.getDataTableBorderWidth)();
     } else {
       minHeight = totalHeaderHeight + estimatedRowHeight;
     }
     if (contained) {
-      minHeight += 2 * import_constants.DATA_TABLE_BORDER_WIDTH;
+      minHeight += 2 * (0, import_data_table_border_width.getDataTableBorderWidth)();
     }
     const baseStyle = {
       minHeight

package/tables/DataTable/components/DataTableVirtualizationContainer.sty.d.ts

@@ -24,6 +24,47 @@ export declare const virtualizationContainer: import("@vanilla-extract/recipes")
             borderWidth: string;
             borderRadius: string;
             selectors: {
+                [x: string]: {
+                    backgroundColor: string;
+                    borderBottomRightRadius: string;
+                    borderTop?: undefined;
+                    borderBottomLeftRadius?: undefined;
+                    borderLeft?: undefined;
+                    borderTopRightRadius?: undefined;
+                    borderWidth?: undefined;
+                } | {
+                    borderTop: string;
+                    borderBottomLeftRadius: string;
+                    backgroundColor?: undefined;
+                    borderBottomRightRadius?: undefined;
+                    borderLeft?: undefined;
+                    borderTopRightRadius?: undefined;
+                    borderWidth?: undefined;
+                } | {
+                    borderLeft: string;
+                    borderTopRightRadius: string;
+                    backgroundColor?: undefined;
+                    borderBottomRightRadius?: undefined;
+                    borderTop?: undefined;
+                    borderBottomLeftRadius?: undefined;
+                    borderWidth?: undefined;
+                } | {
+                    borderWidth: string;
+                    backgroundColor?: undefined;
+                    borderBottomRightRadius?: undefined;
+                    borderTop?: undefined;
+                    borderBottomLeftRadius?: undefined;
+                    borderLeft?: undefined;
+                    borderTopRightRadius?: undefined;
+                } | {
+                    borderBottomRightRadius: string;
+                    backgroundColor?: undefined;
+                    borderTop?: undefined;
+                    borderBottomLeftRadius?: undefined;
+                    borderLeft?: undefined;
+                    borderTopRightRadius?: undefined;
+                    borderWidth?: undefined;
+                };
                 '&::-webkit-scrollbar-track': {
                     backgroundColor: string;
                     borderBottomRightRadius: string;
@@ -40,6 +81,9 @@ export declare const virtualizationContainer: import("@vanilla-extract/recipes")
         };
         false: {
             selectors: {
+                [x: string]: {
+                    borderTop: string;
+                };
                 '&::-webkit-scrollbar-track:horizontal': {
                     borderTop: string;
                 };

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

@@ -20,6 +20,7 @@ __export(DataTableVirtualizationContainer_css_exports, {
   virtualizationContainer: () => virtualizationContainer
 });
 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-4-1", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-4-1", false: "_ytdpsw2-3-4-1" }, loading: { true: "_ytdpsw3-3-4-1" }, contained: { true: "_ytdpsw4-3-4-1", false: "_ytdpsw5-3-4-1" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-4-1", zebraStripes: "_ytdpsw7-3-4-1", none: "_ytdpsw8-3-4-1" }, headers: { hidden: "_ytdpsw9-3-4-1", "default": "_ytdpswa-3-4-1" }, scrollDirection: { false: "_ytdpswb-3-4-1", x: "_ytdpswc-3-4-1", y: "_ytdpswd-3-4-1", xy: "_ytdpswe-3-4-1" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-4-1"]] });
+var virtualizationContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ytdpsw0-3-5-2", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-5-2", false: "_ytdpsw2-3-5-2" }, loading: { true: "_ytdpsw3-3-5-2" }, contained: { true: "_ytdpsw4-3-5-2", false: "_ytdpsw5-3-5-2" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-5-2", zebraStripes: "_ytdpsw7-3-5-2", none: "_ytdpsw8-3-5-2" }, headers: { hidden: "_ytdpsw9-3-5-2", "default": "_ytdpswa-3-5-2" }, scrollDirection: { false: "_ytdpswb-3-5-2", x: "_ytdpswc-3-5-2", y: "_ytdpswd-3-5-2", xy: "_ytdpswe-3-5-2" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-5-2"]] });

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

@@ -1,22 +1,24 @@
-._1rlvxpp0-3-4-1 {
-  padding: 0 var(--dt-spacings-size-8, 8px);
+._1rlvxpp0-3-5-2 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-4-1 {
+._1rlvxpp1-3-5-2 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp3-3-4-1 {
-  margin-left: var(--dt-spacings-size-6, 6px);
+._1rlvxpp2-3-5-2 {
+  padding: 0 var(--dt-spacings-size-8, 8px);
+}
+._1rlvxpp3-3-5-2 {
+  padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-4-1 {
+._1rlvxpp4-3-5-2 {
   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);
   justify-content: center;
   align-items: center;
   background: var(--dt-colors-background-field-primary-accent, #474fcf);
-  color: var(--dt-colors-background-base-default, #f9f9fa);
+  color: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
   border-radius: var(--dt-spacings-size-4, 4px);
   font-size: var(--dt-typography-text-base-default-size, 14px);
 }

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

@@ -38,7 +38,7 @@ var styles = __toESM(require("./DataTableSelectionChip.sty.js"));
 var import_can_receive_default_text_format = require("../../../../core/utils/can-receive-default-text-format.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_Text = require("../../../../typography/text/Text.js");
-var import_constants = require("../../constants.js");
+var import_data_table_border_width = require("../../../utils/data-table-border-width.js");
 var import_DataTableContext = require("../../contexts/DataTableContext.js");
 var import_messages = require("../../messages.js");
 const DataTableSelectionChip = (0, import_react.forwardRef)(
@@ -58,7 +58,7 @@ const DataTableSelectionChip = (0, import_react.forwardRef)(
       {
         ref: forwardedRef,
         className: styles.selectionChipWrapper[rowDensity],
-        marginLeft: contained ? import_constants.DATA_TABLE_BORDER_WIDTH : 0,
+        style: { marginLeft: contained ? (0, import_data_table_border_width.getDataTableBorderWidth)() : 0 },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Flex.Flex,

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-4-1";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-4-1 _1rlvxpp0-3-4-1", "default": "_1rlvxpp0-3-4-1", comfortable: "_1rlvxpp3-3-4-1 _1rlvxpp0-3-4-1" };
+var selectionChip = "_1rlvxpp4-3-5-2";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-5-2 _1rlvxpp0-3-5-2", "default": "_1rlvxpp2-3-5-2 _1rlvxpp0-3-5-2", comfortable: "_1rlvxpp3-3-5-2 _1rlvxpp0-3-5-2" };

package/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.js

@@ -37,7 +37,7 @@ var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var styles = __toESM(require("./ColumnOrderSettingsDragAndDrop.sty.js"));
 var import_Button = require("../../../../../../buttons/button/Button.js");
-var import_useFocusContext = require("../../../../../../core/hooks/useFocusContext.js");
+var import_useModality = require("../../../../../../core/hooks/useModality.js");
 var import_focusRing_css = require("../../../../../../core/styles/focusRing.sty.js");
 var import_messages = require("../../../../messages.js");
 const ColumnOrderDragHandle = ({
@@ -46,7 +46,7 @@ const ColumnOrderDragHandle = ({
   isDraggingActive
 }) => {
   const intl = (0, import_react_intl.useIntl)();
-  const { modality } = (0, import_useFocusContext.useFocusContext)();
+  const modality = (0, import_useModality.useModality)();
   const { attributes, listeners } = (0, import_sortable.useSortable)({ id: columnKey });
   const isKeyboardDragging = isDraggingActive && modality === "keyboard";
   const localColumnDragHandleLabel = intl.formatMessage(
@@ -63,7 +63,7 @@ const ColumnOrderDragHandle = ({
       "aria-label": localColumnDragHandleLabel,
       className: (0, import_clsx.default)(
         styles.columnDndHandle,
-        isKeyboardDragging && (0, import_focusRing_css.focusRingCSS)({ minimal: false, color: "neutral" })
+        isKeyboardDragging && (0, import_focusRing_css.focusRing)({ minimal: false, color: "neutral" })
       ),
       "data-dt-name": "ColumnSettingsDragAndDrop",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.DragAllDirectionIcon, {}) })

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

@@ -1,29 +1,29 @@
-._11d1m5j0-3-4-1 {
+._11d1m5j0-3-5-2 {
   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-4-1:last-child {
+._11d1m5j0-3-5-2:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-4-1 {
+._11d1m5j1-3-5-2 {
   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-4-1:active {
+._11d1m5j1-3-5-2:active {
   background: transparent;
 }
-._11d1m5j1-3-4-1:hover {
+._11d1m5j1-3-5-2:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-4-1 ._11d1m5j1-3-4-1 {
+._11d1m5j0-3-5-2 ._11d1m5j1-3-5-2 {
   cursor: grabbing;
 }
-._11d1m5j2-3-4-1 {
+._11d1m5j2-3-5-2 {
   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-4-1";
-var columnDndOverlay = "_11d1m5j0-3-4-1";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-4-1";
+var columnDndHandle = "_11d1m5j1-3-5-2";
+var columnDndOverlay = "_11d1m5j0-3-5-2";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-5-2";

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

@@ -1,19 +1,19 @@
-._14dz1ui0-3-4-1 {
+._14dz1ui0-3-5-2 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-4-1 {
+._14dz1ui1-3-5-2 {
   overflow: auto;
   position: relative;
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-4-1 {
+._14dz1ui2-3-5-2 {
   max-height: calc(96vh - 200px - 56px);
 }
-._14dz1ui3-3-4-1 {
+._14dz1ui3-3-5-2 {
   max-height: calc(96vh - 200px);
 }
-._14dz1ui4-3-4-1 {
+._14dz1ui4-3-5-2 {
   width: 100%;
   position: relative;
 }

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

@@ -24,6 +24,6 @@ __export(DataTableColumnsList_css_exports, {
 module.exports = __toCommonJS(DataTableColumnsList_css_exports);
 var import_DataTableColumnsList_css_ts_vanilla = require("./DataTableColumnsList.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var noItemsFound = "_14dz1ui0-3-4-1";
-var virtualizationInnerContainer = "_14dz1ui4-3-4-1";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-4-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-4-1", false: "_14dz1ui3-3-4-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-5-2";
+var virtualizationInnerContainer = "_14dz1ui4-3-5-2";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-5-2", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-5-2", false: "_14dz1ui3-3-5-2" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });

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

@@ -1,4 +1,4 @@
-._13ypmcy0-3-4-1 {
+._13ypmcy0-3-5-2 {
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
@@ -7,21 +7,21 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-4-1[data-parentcolumnid] {
+._13ypmcy0-3-5-2[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._13ypmcy0-3-4-1:last-child, ._13ypmcy0-3-4-1:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
+._13ypmcy0-3-5-2:last-child, ._13ypmcy0-3-5-2:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
   border-bottom: none;
 }
-._13ypmcy0-3-4-1[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
+._13ypmcy0-3-5-2[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-4-1[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-4-1, [data-pinned-position="left"] + ._13ypmcy0-3-4-1) {
+._13ypmcy0-3-5-2[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-5-2, [data-pinned-position="left"] + ._13ypmcy0-3-5-2) {
   border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy1-3-4-1 {
+._13ypmcy1-3-5-2 {
   visibility: hidden;
 }
-._13ypmcy2-3-4-1 {
+._13ypmcy2-3-5-2 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -23,6 +23,6 @@ __export(DataTableColumnsListItem_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsListItem_css_exports);
 var import_DataTableColumnsListItem_css_ts_vanilla = require("./DataTableColumnsListItem.css");
-var columnName = "_13ypmcy2-3-4-1";
-var columnsListItem = "_13ypmcy0-3-4-1";
-var dragging = "_13ypmcy1-3-4-1";
+var columnName = "_13ypmcy2-3-5-2";
+var columnsListItem = "_13ypmcy0-3-5-2";
+var dragging = "_13ypmcy1-3-5-2";

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

@@ -1,18 +1,18 @@
-._1rh6hs00-3-4-1 {
+._1rh6hs00-3-5-2 {
   flex: 0 1 auto;
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._1rh6hs01-3-4-1 {
+._1rh6hs01-3-5-2 {
   flex: 0 1 calc(50% - var(--dt-spacings-size-4, 4px));
   margin-left: auto;
 }
-._1rh6hs01-3-4-1._1rh6hs01-3-4-1 {
+._1rh6hs01-3-5-2._1rh6hs01-3-5-2 {
   min-width: unset;
 }
-._1rh6hs02-3-4-1 {
+._1rh6hs02-3-5-2 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm0-3-4-1 div:has(> ._1rh6hs02-3-4-1) {
+._dmotjm0-3-5-2 div:has(> ._1rh6hs02-3-5-2) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js

@@ -24,6 +24,6 @@ __export(DataTableVisibilityFilterControls_css_exports, {
 module.exports = __toCommonJS(DataTableVisibilityFilterControls_css_exports);
 var import_Modal_css_ts_vanilla = require("../../../../../overlays/modal/Modal.css");
 var import_DataTableVisibilityFilterControls_css_ts_vanilla = require("./DataTableVisibilityFilterControls.css");
-var filterControls = "_1rh6hs02-3-4-1";
-var searchInput = "_1rh6hs01-3-4-1";
-var showHideAll = "_1rh6hs00-3-4-1";
+var filterControls = "_1rh6hs02-3-5-2";
+var searchInput = "_1rh6hs01-3-5-2";
+var showHideAll = "_1rh6hs00-3-5-2";

package/tables/DataTable/components/Toolbar/DataTableToolbarMenu.js

@@ -65,12 +65,12 @@ const DataTableToolbarMenu = (props) => {
     intentsWithAppOrIntentId: intentsWithAppId,
     intentsWithoutAppOrIntentId: intentsWithoutAppId
   } = intents.reduce(
-    (acc, intentProps) => {
+    (acc, intentProps, idx) => {
       const hasAppOrIntentId = intentProps.options.recommendedAppId !== void 0 || intentProps.options.recommendedIntentId !== void 0;
       const intent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Intent, { ...intentProps, children: [
         intentProps.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: intentProps.icon }),
         intentProps.children
-      ] });
+      ] }, `intent-${idx}`);
       hasAppOrIntentId ? acc.intentsWithAppOrIntentId.push(intent) : acc.intentsWithoutAppOrIntentId.push(intent);
       return acc;
     },
@@ -88,6 +88,7 @@ const DataTableToolbarMenu = (props) => {
         }
         setMenuOpen(open);
       },
+      modal: false,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: toolbarMenuLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { variant: "default", "aria-label": toolbarMenuLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: triggerIcon }) }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { alignment: "end", children: [
@@ -95,6 +96,7 @@ const DataTableToolbarMenu = (props) => {
             import_DataTableDownloadData.DataTableDownloadData,
             {
               excludeColumns: downloadExcludedColumns,
+              hasIntents,
               isDownloading,
               onDownloadStart: () => setIsDownloading(true),
               onDownloadEnd: () => setIsDownloading(false)

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css

@@ -0,0 +1,9 @@
+._1gjma320-3-5-2 {
+  gap: var(--dt-spacings-size-24, 24px);
+}
+._1gjma321-3-5-2 {
+  white-space: nowrap;
+}
+._1m01arl7-3-5-2 ._1gjma321-3-5-2 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.d.ts

@@ -1,10 +1,11 @@
 import type { JSX } from 'react';
 /**
- * A component providing the sub menu with the functionalities to download data.
+ * A component providing the menu with the functionalities to download data.
  * @internal
  */
-export declare const DataTableDownloadData: ({ excludeColumns, isDownloading, onDownloadStart, onDownloadEnd, }: {
+export declare const DataTableDownloadData: ({ excludeColumns, hasIntents, isDownloading, onDownloadStart, onDownloadEnd, }: {
     excludeColumns?: string[];
+    hasIntents: boolean;
     isDownloading: boolean;
     onDownloadStart: () => void;
     onDownloadEnd: () => void;