@dynatrace/strato-components 3.10.4 → 3.11.0

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

@@ -34,6 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_column_settings_utils = require("./column-settings-utils.js");
 var import_column_order_settings_dnd_utils = require("./ColumnOrderSettings/column-order-settings-dnd-utils.js");
 var import_ColumnOrderSettingsDragAndDrop = require("./ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.js");
@@ -43,8 +44,19 @@ var import_DataTableColumnsListItem = require("./DataTableColumnsListItem.js");
 var import_DataTableColumnsSectionHeader = require("./DataTableColumnsSectionHeader.js");
 var import_DataTableNoFilterResultsEmptyState = require("./DataTableNoFilterResultsEmptyState.js");
 var import_Grid = require("../../../../../layouts/grid/Grid.js");
+var import_screen_reader_only_css = require("../../../../../styles/screen-reader-only.sty.js");
 var import_DataTableContext = require("../../../contexts/DataTableContext.js");
 var import_ColumnVisibility = require("../../../features/ColumnVisibility/ColumnVisibility.js");
+var import_messages = require("../../../messages.js");
+function getFilterResultAnnouncement(listItems, filterValueLength, intl) {
+  if (filterValueLength === 0) {
+    return "";
+  }
+  const count = listItems.filter(
+    (item) => item.itemType === "column" && item.columns.length === 0
+  ).length;
+  return count === 0 ? intl.formatMessage(import_messages.dataTableMessages.noFilterResultsTitle) : intl.formatMessage(import_messages.dataTableMessages.filterResultsCount, { count });
+}
 function DataTableColumnsList(props) {
   const {
     visibilitySettings: showVisibilityToggle,
@@ -63,6 +75,7 @@ function DataTableColumnsList(props) {
     hasMessage,
     onClearFilter
   } = props;
+  const intl = (0, import_react_intl.useIntl)();
   const table = (0, import_DataTableContext.useDataTable)();
   const parentRef = (0, import_react.useRef)(null);
   const allLeafColumnsWithoutBuiltin = table.getAllLeafColumnsWithoutBuiltin();
@@ -236,8 +249,26 @@ function DataTableColumnsList(props) {
     }
   });
   const virtualItems = columnVirtualizer.getVirtualItems();
+  const filterResultAnnouncement = getFilterResultAnnouncement(
+    listItems,
+    activeFilterValue.length,
+    intl
+  );
+  const liveRegion = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: import_screen_reader_only_css.screenReaderOnly,
+      children: filterResultAnnouncement
+    }
+  );
   if (listItems.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableNoFilterResultsEmptyState.DataTableNoFilterResultsEmptyState, { onClearSearch: onClearFilter });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      liveRegion,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableNoFilterResultsEmptyState.DataTableNoFilterResultsEmptyState, { onClearSearch: onClearFilter })
+    ] });
   }
   const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
@@ -307,21 +338,27 @@ function DataTableColumnsList(props) {
           padding: 0,
           gap: 0,
           className: (0, import_clsx.default)(styles.virtualizationInnerContainer),
-          gridTemplateRows: columnVirtualizer.measurementsCache.map((el) => `${el.size}px`).join(" "),
+          gridTemplateRows: Array.from(
+            columnVirtualizer.measurementsCache,
+            (el) => `${el?.size ?? import_column_order_settings_dnd_utils.DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT}px`
+          ).join(" "),
           height: columnVirtualizer.getTotalSize() + 1,
           children: columnListItems
         }
       )
     }
   );
-  return canOrder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ColumnOrderSettingsDragAndDrop.ColumnOrderSettingsDragAndDropContext,
-    {
-      localColumnOrder,
-      updateLocalColumnOrder,
-      localColumnPinning,
-      itemVirtualizer: columnVirtualizer,
-      children: columnList
-    }
-  ) : columnList;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    liveRegion,
+    canOrder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ColumnOrderSettingsDragAndDrop.ColumnOrderSettingsDragAndDropContext,
+      {
+        localColumnOrder,
+        updateLocalColumnOrder,
+        localColumnPinning,
+        itemVirtualizer: columnVirtualizer,
+        children: columnList
+      }
+    ) : columnList
+  ] });
 }

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

@@ -23,5 +23,5 @@ __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 virtualizationInnerContainer = "_14dz1uig-3-10-4";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-10-4", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-10-4", false: "_14dz1ui3-3-10-4" }, hasVisibilityControl: { true: "_14dz1ui4-3-10-4", false: "_14dz1ui5-3-10-4" }, hasMessage: { true: "_14dz1ui6-3-10-4", false: "_14dz1ui7-3-10-4" }, hasPinnedColumns: { true: "_14dz1ui8-3-10-4", false: "_14dz1ui9-3-10-4" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-10-4"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-10-4"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-10-4"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-10-4"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-10-4"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-10-4"]] });
+var virtualizationInnerContainer = "_14dz1uig-3-11-0";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-11-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-11-0", false: "_14dz1ui3-3-11-0" }, hasVisibilityControl: { true: "_14dz1ui4-3-11-0", false: "_14dz1ui5-3-11-0" }, hasMessage: { true: "_14dz1ui6-3-11-0", false: "_14dz1ui7-3-11-0" }, hasPinnedColumns: { true: "_14dz1ui8-3-11-0", false: "_14dz1ui9-3-11-0" } }, defaultVariants: { hasFilter: false, hasVisibilityControl: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1uia-3-11-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: false }, "_14dz1uib-3-11-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: false }, "_14dz1uic-3-11-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1uid-3-11-0"], [{ hasFilter: true, hasVisibilityControl: false, hasMessage: true }, "_14dz1uie-3-11-0"], [{ hasFilter: true, hasVisibilityControl: true, hasMessage: true }, "_14dz1uif-3-11-0"]] });

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

@@ -1,4 +1,4 @@
-._13ypmcy0-3-10-4 {
+._13ypmcy0-3-11-0 {
   position: relative;
   flex: 0 1 auto;
   word-break: break-all;
@@ -6,10 +6,10 @@
   padding-bottom: var(--dt-spacings-size-4, 4px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) transparent;
 }
-._13ypmcy0-3-10-4[data-parentcolumnid] {
+._13ypmcy0-3-11-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-10-4::after {
+._13ypmcy0-3-11-0::after {
   content: "";
   position: absolute;
   left: 0;
@@ -18,28 +18,28 @@
   height: var(--dt-borders-width-default, 1px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-10-4:has(+ [data-parentcolumnid])::after {
+._13ypmcy0-3-11-0:has(+ [data-parentcolumnid])::after {
   left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy1-3-10-4::after {
+._13ypmcy1-3-11-0::after {
   display: none;
 }
-._13ypmcy2-3-10-4 {
+._13ypmcy2-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy3-3-10-4 {
+._13ypmcy3-3-11-0 {
   visibility: hidden;
 }
-._13ypmcy4-3-10-4 {
+._13ypmcy4-3-11-0 {
   flex: 1 1 auto;
   min-width: 0;
 }
-._13ypmcy5-3-10-4 {
+._13ypmcy5-3-11-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }
-._13ypmcy6-3-10-4 {
+._13ypmcy6-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy7-3-10-4 {
+._13ypmcy7-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

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

@@ -108,10 +108,7 @@ function InternalDataTableColumnsListItem(props) {
             "div",
             {
               className: (0, import_clsx.default)(styles.columnName, {
-                [styles.columnNameSubdued]: (
-                  // subdue the label when the column is hidden or its visibility toggle is disabled
-                  isHidden || showVisibilityToggle && !enableVisibilityToggle
-                ),
+                [styles.columnNameSubdued]: isHidden,
                 [styles.columnNameIndented]: !showColumnOrderDragHandle && props.column.parent !== void 0
               }),
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Highlight.Highlight, { term: filterWords, children: columnName })

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

@@ -28,11 +28,11 @@ __export(DataTableColumnsListItem_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsListItem_css_exports);
 var import_DataTableColumnsListItem_css_ts_vanilla = require("./DataTableColumnsListItem.css");
-var columnName = "_13ypmcy5-3-10-4";
-var columnNameContainer = "_13ypmcy4-3-10-4";
-var columnNameIndented = "_13ypmcy6-3-10-4";
-var columnNameSubdued = "_13ypmcy7-3-10-4";
-var columnsListItem = "_13ypmcy0-3-10-4";
-var dragging = "_13ypmcy3-3-10-4";
-var lastInSection = "_13ypmcy1-3-10-4";
-var noDragHandle = "_13ypmcy2-3-10-4";
+var columnName = "_13ypmcy5-3-11-0";
+var columnNameContainer = "_13ypmcy4-3-11-0";
+var columnNameIndented = "_13ypmcy6-3-11-0";
+var columnNameSubdued = "_13ypmcy7-3-11-0";
+var columnsListItem = "_13ypmcy0-3-11-0";
+var dragging = "_13ypmcy3-3-11-0";
+var lastInSection = "_13ypmcy1-3-11-0";
+var noDragHandle = "_13ypmcy2-3-11-0";

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

@@ -1,4 +1,4 @@
-._1o0bw490-3-10-4 {
+._1o0bw490-3-11-0 {
   display: flex;
   align-items: center;
   margin: 0;
@@ -7,6 +7,6 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1o0bw491-3-10-4 {
+._1o0bw491-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

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

@@ -22,5 +22,5 @@ __export(DataTableColumnsSectionHeader_css_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnsSectionHeader_css_exports);
 var import_DataTableColumnsSectionHeader_css_ts_vanilla = require("./DataTableColumnsSectionHeader.css");
-var sectionHeader = "_1o0bw490-3-10-4";
-var sectionHeaderLabel = "_1o0bw491-3-10-4";
+var sectionHeader = "_1o0bw490-3-11-0";
+var sectionHeaderLabel = "_1o0bw491-3-11-0";

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

@@ -1,3 +1,3 @@
-._cuj2fe0-3-10-4 {
+._cuj2fe0-3-11-0 {
   text-align: center;
 }

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

@@ -21,4 +21,4 @@ __export(DataTableNoFilterResultsEmptyState_css_exports, {
 });
 module.exports = __toCommonJS(DataTableNoFilterResultsEmptyState_css_exports);
 var import_DataTableNoFilterResultsEmptyState_css_ts_vanilla = require("./DataTableNoFilterResultsEmptyState.css");
-var container = "_cuj2fe0-3-10-4";
+var container = "_cuj2fe0-3-11-0";

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

@@ -1,14 +1,14 @@
-._1rh6hs00-3-10-4 {
+._1rh6hs00-3-11-0 {
   flex: 1 1 0;
 }
-._1rh6hs00-3-10-4._1rh6hs00-3-10-4 {
+._1rh6hs00-3-11-0._1rh6hs00-3-11-0 {
   min-width: unset;
 }
-._1rh6hs01-3-10-4 {
+._1rh6hs01-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   flex-shrink: 0;
   white-space: nowrap;
 }
-._dmotjm0-3-10-4 div:has(> ._1rh6hs02-3-10-4) {
+._dmotjm0-3-11-0 div:has(> ._1rh6hs02-3-11-0) {
   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 columnCount = "_1rh6hs01-3-10-4";
-var filterControls = "_1rh6hs02-3-10-4";
-var searchInput = "_1rh6hs00-3-10-4";
+var columnCount = "_1rh6hs01-3-11-0";
+var filterControls = "_1rh6hs02-3-11-0";
+var searchInput = "_1rh6hs00-3-11-0";

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

@@ -55,6 +55,8 @@ const DataTableToolbarMenu = (props) => {
         ref: simpleButtonRef,
         variant: "default",
         "aria-label": toolbarMenuLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": false,
         onClick: () => setMenuOpen(true),
         loading: isDownloading,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: triggerIcon })

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

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

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

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(DataTableDownloadData_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_intl = require("react-intl");
 var styles = __toESM(require("./DataTableDownloadData.sty.js"));
+var import_useId = require("../../../../../core/hooks/useId.js");
 var import_Menu = require("../../../../../navigation/menu/Menu.js");
 var import_DataTableContext = require("../../../contexts/DataTableContext.js");
 var import_messages = require("../../../messages.js");
@@ -49,10 +50,16 @@ const DataTableDownloadData = ({
   const selectionCount = table.getSelectionCount();
   const menuGroupLabel = intl.formatMessage(import_messages.dataTableMessages.downloadTable);
   const isServerSidePaginated = table.options.enablePagination === true && table.options.manualPagination === true;
+  const labelId = (0, import_useId.useId)();
+  const allItemId = (0, import_useId.useId)();
+  const pageItemId = (0, import_useId.useId)();
+  const selectedItemId = (0, import_useId.useId)();
   const downloadMenuItems = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     !isServerSidePaginated && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_Menu.Menu.Item,
       {
+        id: allItemId,
+        "aria-labelledby": hasIntents ? void 0 : `${labelId} ${allItemId}`,
         onSelect: () => {
           if (isDownloading) {
             return;
@@ -78,6 +85,8 @@ const DataTableDownloadData = ({
     table.options.enablePagination && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_Menu.Menu.Item,
       {
+        id: pageItemId,
+        "aria-labelledby": hasIntents ? void 0 : `${labelId} ${pageItemId}`,
         onSelect: () => {
           if (isDownloading) {
             return;
@@ -103,6 +112,8 @@ const DataTableDownloadData = ({
     table.options.enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_Menu.Menu.Item,
       {
+        id: selectedItemId,
+        "aria-labelledby": hasIntents ? void 0 : `${labelId} ${selectedItemId}`,
         disabled: selectionCount === 0,
         onSelect: () => {
           if (isDownloading) {
@@ -131,7 +142,7 @@ const DataTableDownloadData = ({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.SubTrigger, { children: menuGroupLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.SubContent, { children: downloadMenuItems })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Label, { children: menuGroupLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Label, { id: labelId, children: menuGroupLabel }),
     downloadMenuItems
   ] });
 };

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js

@@ -23,5 +23,5 @@ __export(DataTableDownloadData_css_exports, {
 module.exports = __toCommonJS(DataTableDownloadData_css_exports);
 var import_Menu_css_ts_vanilla = require("../../../../../navigation/menu/Menu.css");
 var import_DataTableDownloadData_css_ts_vanilla = require("./DataTableDownloadData.css");
-var downloadMenuItem = "_1gjma320-3-10-4";
-var downloadMenuSuffix = "_1gjma321-3-10-4";
+var downloadMenuItem = "_1gjma320-3-11-0";
+var downloadMenuSuffix = "_1gjma321-3-11-0";

package/tables/DataTable/features/ColumnOrder/ColumnOrder.css

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-10-4 {
+._1ku1w3z0-3-11-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-10-4::after {
+._1ku1w3z1-3-11-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-10-4::after {
+._1ku1w3z2-3-11-0::after {
   left: 0;
 }
-._1ku1w3z3-3-10-4::after {
+._1ku1w3z3-3-11-0::after {
   right: 0;
 }
-._1ku1w3z4-3-10-4::before {
+._1ku1w3z4-3-11-0::before {
   content: "";
   display: block;
   position: absolute;
@@ -29,12 +29,12 @@
   bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z5-3-10-4 {
+._1ku1w3z5-3-11-0 {
   display: none;
 }
-._1ku1w3z6-3-10-4 {
+._1ku1w3z6-3-11-0 {
   cursor: grab;
 }
-._1ku1w3z7-3-10-4 {
+._1ku1w3z7-3-11-0 {
   pointer-events: none;
 }

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

@@ -25,7 +25,7 @@ __export(ColumnOrder_css_exports, {
 module.exports = __toCommonJS(ColumnOrder_css_exports);
 var import_ColumnOrder_css_ts_vanilla = require("./ColumnOrder.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var columnDndOverlay = "_1ku1w3z0-3-10-4";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-10-4", enabled: "_1ku1w3z6-3-10-4", inactive: "_1ku1w3z7-3-10-4" };
-var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-10-4", variantClassNames: { left: { true: "_1ku1w3z2-3-10-4", false: "_1ku1w3z3-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-10-4";
+var columnDndOverlay = "_1ku1w3z0-3-11-0";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-11-0", enabled: "_1ku1w3z6-3-11-0", inactive: "_1ku1w3z7-3-11-0" };
+var insertPositionIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ku1w3z1-3-11-0", variantClassNames: { left: { true: "_1ku1w3z2-3-11-0", false: "_1ku1w3z3-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-11-0";

package/tables/DataTable/features/ColumnOrder/ColumnOrderDragAndDropContext.js

@@ -231,7 +231,7 @@ function ColumnOrderDragAndDropContext({
       collisionDetection: import_column_order_dnd_utils.customCollisionDetection,
       modifiers: [restrictColumnDragAndDrop],
       autoScroll: false,
-      accessibility: { container: table.getRowVirtualizationContainer() },
+      accessibility: { container: virtualizationContainer },
       onDragStart: handleDragStart,
       onDragOver: handleDragOver,
       onDragEnd: handleDragEnd,

package/tables/DataTable/features/ColumnSizing/ColumnSizing.css

@@ -1,9 +1,9 @@
-._17437gx0-3-10-4 {
+._17437gx0-3-11-0 {
   cursor: col-resize;
 }
-._17437gx0-3-10-4 > * {
+._17437gx0-3-11-0 > * {
   pointer-events: none;
 }
-._17437gx0-3-10-4 ._14sp6az0-3-10-4 * {
+._17437gx0-3-11-0 ._14sp6az0-3-11-0 * {
   pointer-events: none;
 }

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

@@ -22,4 +22,4 @@ __export(ColumnSizing_css_exports, {
 module.exports = __toCommonJS(ColumnSizing_css_exports);
 var import_DataTable_css_ts_vanilla = require("../../DataTable.css");
 var import_ColumnSizing_css_ts_vanilla = require("./ColumnSizing.css");
-var tableColumnResizing = "_17437gx0-3-10-4";
+var tableColumnResizing = "_17437gx0-3-11-0";

package/tables/DataTable/features/ColumnTypes/ColumnTypes.css

@@ -1,4 +1,4 @@
-._19nyr521-3-10-4 {
+._19nyr521-3-11-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }

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

@@ -22,4 +22,4 @@ __export(ColumnTypes_css_exports, {
 module.exports = __toCommonJS(ColumnTypes_css_exports);
 var import_ColumnTypes_css_ts_vanilla = require("./ColumnTypes.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var logContentWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19nyr520-3-10-4", variantClassNames: { linewrap: { false: "_19nyr521-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var logContentWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19nyr520-3-11-0", variantClassNames: { linewrap: { false: "_19nyr521-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });

package/tables/DataTable/features/ColumnTypes/column-types-types.d.ts

@@ -133,6 +133,11 @@ export type DataTableMeterbarColumnConfig = {
      * @defaultValue false
      */
     showValue?: 'left' | 'right' | false;
+    /**
+     * Set to `true` to show all threshold indicators and `false` to hide them all.
+     * @defaultValue true
+     */
+    showThresholdIndicators?: boolean;
     /**
      * Array of threshold configurations to display on the meter bar.
      */
@@ -153,7 +158,11 @@ export type DataTableMeterbarColumnConfig = {
         name?: string;
         /**
          * When set to true, the threshold indicator is shown.
-         * @defaultValue false
+         * @deprecated Use the column-level `showThresholdIndicators` config option
+         * to toggle all threshold indicators at once. As a temporary fallback, when
+         * `showThresholdIndicators` is not set these per-threshold flags are
+         * collapsed into the global one (all `true` shows them, all `false` hides
+         * them; mixed values log a warning). This property will be removed.
          */
         showIndicator?: boolean;
     }[];

package/tables/DataTable/features/GanttChart/DataTableGanttAnnotationsIndicators.css

@@ -1,4 +1,4 @@
-._1x1hmrh0-3-10-4 {
+._1x1hmrh0-3-11-0 {
   position: absolute;
   top: 0;
   left: 0;

package/tables/DataTable/features/GanttChart/DataTableGanttAnnotationsIndicators.js

@@ -31,6 +31,7 @@ __export(DataTableGanttAnnotationsIndicators_exports, {
 });
 module.exports = __toCommonJS(DataTableGanttAnnotationsIndicators_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_store = require("@tanstack/react-store");
 var styles = __toESM(require("./DataTableGanttAnnotationsIndicators.sty.js"));
 var import_constants = require("../../constants.js");
 var import_useScaleAndFormatter = require("./hooks/useScaleAndFormatter.js");
@@ -58,10 +59,14 @@ function getBrightnessFilterId(indicator, trackIndex) {
 function useGanttIndicators(config, columnId, range) {
   const table = (0, import_DataTableContext.useDataTable)();
   const { tracks: configuredTracks } = config.annotationsHeader ?? {};
+  const selection = (0, import_react_store.useSelector)(
+    table.atoms.ganttAnnotationsSelection,
+    (annotationsSelection) => annotationsSelection?.[columnId] ?? {},
+    { compare: import_react_store.shallow }
+  );
   if (!configuredTracks?.length) {
     return null;
   }
-  const selection = table.store.state.ganttAnnotationsSelection?.[columnId] ?? {};
   const tracks = (0, import_to_integration_tracks.toIntegrationTracks)(configuredTracks);
   const shownIndicators = (0, import_get_shown_indicators.getShownIndicators)(tracks, selection);
   const uniqueIndicators = (0, import_get_unique_indicators_by_priority.getUniqueIndicatorsByPriority)(

package/tables/DataTable/features/GanttChart/DataTableGanttAnnotationsIndicators.sty.js

@@ -21,4 +21,4 @@ __export(DataTableGanttAnnotationsIndicators_css_exports, {
 });
 module.exports = __toCommonJS(DataTableGanttAnnotationsIndicators_css_exports);
 var import_DataTableGanttAnnotationsIndicators_css_ts_vanilla = require("./DataTableGanttAnnotationsIndicators.css");
-var annotationIndicators = "_1x1hmrh0-3-10-4";
+var annotationIndicators = "_1x1hmrh0-3-11-0";

package/tables/DataTable/features/GanttChart/DataTableGanttChartCell.css

@@ -1,11 +1,11 @@
-._5jn5tp0-3-10-4 {
+._5jn5tp0-3-11-0 {
   height: 100%;
   width: 100%;
 }
-._5jn5tp1-3-10-4 {
+._5jn5tp1-3-11-0 {
   padding-right: 0;
   pointer-events: auto;
 }
-._5jn5tp1-3-10-4:not(:has(._1udh2jz2-3-10-4)) {
+._5jn5tp1-3-11-0:not(:has(._1udh2jz2-3-11-0)) {
   padding-left: 0;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartCell.sty.js

@@ -38,5 +38,5 @@ var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTa
 var import_DataTableDefaultCell_css_ts_vanilla = require("../../components/DataTableDefaultCell.css");
 var import_SubRows_css_ts_vanilla = require("../SubRows/SubRows.css");
 var import_DataTableGanttChartCell_css_ts_vanilla = require("./DataTableGanttChartCell.css");
-var ganttChartCell = "_5jn5tp0-3-10-4";
-var ganttChartDefaultCell = "_5jn5tp1-3-10-4";
+var ganttChartCell = "_5jn5tp0-3-11-0";
+var ganttChartDefaultCell = "_5jn5tp1-3-11-0";

package/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.css

@@ -1,4 +1,4 @@
-._evozey0-3-10-4 {
+._evozey0-3-11-0 {
   position: absolute;
   inset: 0;
   margin-left: auto;

package/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.sty.js

@@ -21,4 +21,4 @@ __export(DataTableGanttChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(DataTableGanttChartGrid_css_exports);
 var import_DataTableGanttChartGrid_css_ts_vanilla = require("./DataTableGanttChartGrid.css");
-var ganttChartGrid = "_evozey0-3-10-4";
+var ganttChartGrid = "_evozey0-3-11-0";

package/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.css

@@ -1,14 +1,14 @@
-._10y95u40-3-10-4 {
+._10y95u40-3-11-0 {
   padding-right: 0;
   align-items: center;
 }
-._11pvd3zt-3-10-4:not(._11pvd3z5-3-10-4) ._10y95u40-3-10-4 {
+._11pvd3zt-3-11-0:not(._11pvd3z5-3-11-0) ._10y95u40-3-11-0 {
   width: 100%;
   padding-left: 0;
 }
-._11pvd3z5-3-10-4 ._10y95u40-3-10-4 {
+._11pvd3z5-3-11-0 ._10y95u40-3-11-0 {
   width: 100%;
 }
-._10y95u40-3-10-4 span {
+._10y95u40-3-11-0 span {
   margin-top: 0 !important;
 }

package/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.sty.js

@@ -27,4 +27,4 @@ var import_ColumnOrder_css_ts_vanilla = require("../ColumnOrder/ColumnOrder.css"
 var import_Thresholds_css_ts_vanilla = require("../Thresholds/Thresholds.css");
 var import_DataTableHeaderCell_css_ts_vanilla = require("../../components/DataTableHeaderCell.css");
 var import_DataTableGanttChartHeader_css_ts_vanilla = require("./DataTableGanttChartHeader.css");
-var ganttChartHeader = "_10y95u40-3-10-4";
+var ganttChartHeader = "_10y95u40-3-11-0";

package/tables/DataTable/features/Layout/layout-types.d.ts

@@ -163,5 +163,6 @@ export interface TableLayoutFeatureConstructors {
     Column: DataTableLayoutColumn;
     Table: DataTableLayoutInstance;
     Options: DataTableLayoutOptions;
+    TableState: DataTableLayoutTableState;
 }
 //# sourceMappingURL=layout-types.d.ts.map

package/tables/DataTable/features/LoadingState/LoadingState.css

@@ -1,7 +1,7 @@
-._14flfjk2-3-10-4 {
+._14flfjk2-3-11-0 {
   z-index: 1;
   position: absolute;
   inset: 0;
-  top: calc(var(--_14flfjk0-3-10-4) + var(--_14flfjk1-3-10-4));
-  bottom: calc(var(--_14flfjk1-3-10-4) * -1);
+  top: calc(var(--_14flfjk0-3-11-0) + var(--_14flfjk1-3-11-0));
+  bottom: calc(var(--_14flfjk1-3-11-0) * -1);
 }

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

@@ -23,6 +23,6 @@ __export(LoadingState_css_exports, {
 });
 module.exports = __toCommonJS(LoadingState_css_exports);
 var import_LoadingState_css_ts_vanilla = require("./LoadingState.css");
-var dataTableHeaderHeight = "var(--_14flfjk0-3-10-4)";
-var dataTableScrollOffset = "var(--_14flfjk1-3-10-4)";
-var loadingState = "_14flfjk2-3-10-4";
+var dataTableHeaderHeight = "var(--_14flfjk0-3-11-0)";
+var dataTableScrollOffset = "var(--_14flfjk1-3-11-0)";
+var loadingState = "_14flfjk2-3-11-0";