@procore/data-table 14.16.0 → 14.18.0

package/dist/modern/index.js

@@ -1,6 +1,6 @@
 import React76, { useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, useEffect, Component as Component$1, createElement } from 'react';
 import { uniqBy, prop, startsWith, mergeDeepRight, equals, omit, intersection, isNil, mergeDeepLeft, isEmpty, groupBy } from 'ramda';
-import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Link, AvatarStack, Pill, Typeahead, Pagination, UNSAFE_FilterToken, UNSAFE_SuperSelect, Avatar, H3, Checkbox, useI18n, I18nContext, UNSAFE_useSuperSelectContext, DropdownFlyout, useVisibility, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
+import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, SelectButton, StyledSelectButton, typographyWeights, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, UNSAFE_StyledFilterTokenLabel, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Link, AvatarStack, Pill, Typeahead, Pagination, UNSAFE_SuperSelect, UNSAFE_FilterToken, Avatar, H3, Checkbox, useI18n, I18nContext, UNSAFE_useSuperSelectContext, DropdownFlyout, useVisibility, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
 import debounce5 from 'lodash.debounce';
 import { Error as Error$1, Grip, ExternalLink, Pencil, Building, Clear, Calendar as Calendar$1, ArrowDown, ArrowUp, CaretDown, CaretRight, CaretsInVertical, CaretsOutVerticalWithLine, CaretsOutVertical, CaretsIn, CaretsOut } from '@procore/core-icons';
@@ -17,9 +17,9 @@ import _isEqual from 'lodash.isequal';
 import ReactResizeDetector from 'react-resize-detector';
 import { DateTimeSelectField } from '@procore/labs-datetime-select';
 import Decimal from 'decimal.js';
-import styled4, { css as css$1 } from 'styled-components';
-import { GroupBySelect } from '@procore/labs-group-by-select';
+import styled3, { css as css$1 } from 'styled-components';
 import { getDatePlaceholder } from '@procore/globalization-toolkit';
+import { GroupBySelect } from '@procore/labs-group-by-select';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1408,7 +1408,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1t4e8_369 {
+@keyframes _ag-shake-left-to-right_18odb_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5409,7 +5409,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1t4e8_1 {
+@keyframes _spin_18odb_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7715,7 +7715,7 @@ input[class^=ag-][type=range]:disabled {
 .ag-theme-alpine.ag-theme-alpine .ag-details-row-auto-height .ag-center-cols-viewport, .ag-theme-alpine.ag-theme-alpine .ag-layout-auto-height .ag-center-cols-viewport {
   min-height: 0px;
 }
-.ag-theme-alpine.ag-theme-alpine .ag-overlay button {
+.ag-theme-alpine.ag-theme-alpine .ag-overlay .ag-react-container {
   pointer-events: initial;
 }
 .ag-theme-alpine.ag-theme-alpine .ag-menu, .ag-theme-alpine.ag-theme-alpine .ag-menu-header {
@@ -7914,7 +7914,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1t4e8_7153 {
+div._contextPanel_18odb_7153 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7923,7 +7923,7 @@ div._contextPanel_1t4e8_7153 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1t4e8_7162 {
+div._contextPanel--hidden_18odb_7162 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7931,50 +7931,50 @@ div._contextPanel--hidden_1t4e8_7162 {
   width: 0px;
 }
 
-._contextPanelWrapper_1t4e8_7170 {
+._contextPanelWrapper_18odb_7170 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1t4e8_7175 {
+._contextPanelBody_18odb_7175 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1t4e8_7179 {
+._contextPanel-stickyHeader_18odb_7179 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1t4e8_7186 {
+._filters-list_18odb_7186 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1t4e8_7186 ol {
+._filters-list_18odb_7186 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1t4e8_7195 {
+._col-drag-column-icon_18odb_7195 {
   color: #6a767c;
 }
 
-._tabular-nums_1t4e8_7199 {
+._tabular-nums_18odb_7199 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1t4e8_7153",
-  "contextPanel--hidden": "_contextPanel--hidden_1t4e8_7162",
-  "contextPanelWrapper": "_contextPanelWrapper_1t4e8_7170",
-  "contextPanelBody": "_contextPanelBody_1t4e8_7175",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1t4e8_7179",
-  "filters-list": "_filters-list_1t4e8_7186",
-  "col-drag-column-icon": "_col-drag-column-icon_1t4e8_7195",
-  "tabular-nums": "_tabular-nums_1t4e8_7199",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1t4e8_369",
-  "spin": "_spin_1t4e8_1"
+  "contextPanel": "_contextPanel_18odb_7153",
+  "contextPanel--hidden": "_contextPanel--hidden_18odb_7162",
+  "contextPanelWrapper": "_contextPanelWrapper_18odb_7170",
+  "contextPanelBody": "_contextPanelBody_18odb_7175",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_18odb_7179",
+  "filters-list": "_filters-list_18odb_7186",
+  "col-drag-column-icon": "_col-drag-column-icon_18odb_7195",
+  "tabular-nums": "_tabular-nums_18odb_7199",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_18odb_369",
+  "spin": "_spin_18odb_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -8061,7 +8061,7 @@ var Renderer = ({
 var ButtonsCellRenderer = withDataTableRenderer(Renderer, "select");
 
 // src/utils/truncation.scss
-var css2 = `._truncatingText_114ye_1 {
+var css2 = `._truncatingText_c077g_1 {
   white-space: normal;
   overflow: hidden;
   word-wrap: break-word;
@@ -8070,17 +8070,43 @@ var css2 = `._truncatingText_114ye_1 {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
-._truncatingText--md_114ye_10 {
+._truncatingText--md_c077g_10 {
   -webkit-line-clamp: 2;
 }
-._truncatingText--lg_114ye_13 {
+._truncatingText--lg_c077g_13 {
   -webkit-line-clamp: 3;
+}
+._truncatingText--overflowVisible_c077g_16 {
+  overflow: visible;
+}
+
+._extendClickableArea_c077g_20 {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+._extendClickableArea_c077g_20::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 48px;
+  height: 48px;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  background: transparent;
+}
+._extendClickableArea--rowHeightSm_c077g_36::before {
+  height: 32px;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css2));
 var truncation_default = {
-  "truncatingText": "_truncatingText_114ye_1",
-  "truncatingText--md": "_truncatingText--md_114ye_10",
-  "truncatingText--lg": "_truncatingText--lg_114ye_13"
+  "truncatingText": "_truncatingText_c077g_1",
+  "truncatingText--md": "_truncatingText--md_c077g_10",
+  "truncatingText--lg": "_truncatingText--lg_c077g_13",
+  "truncatingText--overflowVisible": "_truncatingText--overflowVisible_c077g_16",
+  "extendClickableArea": "_extendClickableArea_c077g_20",
+  "extendClickableArea--rowHeightSm": "_extendClickableArea--rowHeightSm_c077g_36"
 };
 
 // src/utils/ContactItem.tsx
@@ -52944,7 +52970,10 @@ globalObj.MouseEvent = typeof MouseEvent === "undefined" ? {} : MouseEvent;
 // src/CellRenderers/GroupCell.tsx
 var GroupCellRenderer2 = GroupCellRenderer;
 var cx6 = classnames.bind(truncation_default);
+var MIN_LINK_WIDTH = 48;
 var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, value }) => {
+  const [isLinkWidthBelowMin, setIsLinkWidthBelowMin] = useState(false);
+  const linkRef = useRef(null);
   const internalValue = value ? columnDefinition.getStringFormattedValue?.(value) : "";
   const typographyProps = getCellValueTypographyProps(
     columnDefinition.cellRendererParams?.typographyProps
@@ -52955,14 +52984,24 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
     "truncatingText",
     {
       "truncatingText--md": rowHeight === rowSize.md,
-      "truncatingText--lg": rowHeight === rowSize.lg
+      "truncatingText--lg": rowHeight === rowSize.lg,
+      "truncatingText--overflowVisible": isLinkWidthBelowMin
     }
   );
   if (isGroup) {
     return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className, weight: "semibold" }, value);
   }
+  useEffect(() => {
+    if (linkRef.current) {
+      const { width } = linkRef.current.getBoundingClientRect();
+      setIsLinkWidthBelowMin(width < MIN_LINK_WIDTH);
+    }
+  }, [internalValue]);
   const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
   const URL = columnDefinition.cellRendererParams.getURL(value, data);
+  const extendClickableAreaClassNames = isLinkWidthBelowMin ? cx6("extendClickableArea", {
+    "extendClickableArea--rowHeightSm": rowHeight === rowSize.sm
+  }) : "";
   if (isExternalLink && value && URL) {
     return /* @__PURE__ */ React76.createElement(
       Typography,
@@ -52982,7 +53021,7 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
       )
     );
   }
-  return URL ? /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className }, /* @__PURE__ */ React76.createElement(Link, { href: URL }, internalValue)) : /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps }, internalValue);
+  return URL ? /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className }, /* @__PURE__ */ React76.createElement(Link, { href: URL, className: extendClickableAreaClassNames, ref: linkRef }, internalValue)) : /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps }, internalValue);
 };
 var LinkCellRenderer = withDataTableRenderer(
   InternalLinkCellRenderer,
@@ -53061,7 +53100,7 @@ var NumberCellEditor2 = withDataTableEditor(
 );
 
 // src/CellRenderers/peopleCellStyles.scss
-var css3 = `._truncatingText_3wkw2_1 {
+var css3 = `._truncatingText_14qzu_1 {
   white-space: normal;
   overflow: hidden;
   word-wrap: break-word;
@@ -53070,33 +53109,59 @@ var css3 = `._truncatingText_3wkw2_1 {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
-._truncatingText--md_3wkw2_10 {
+._truncatingText--md_14qzu_10 {
   -webkit-line-clamp: 2;
 }
-._truncatingText--lg_3wkw2_13 {
+._truncatingText--lg_14qzu_13 {
   -webkit-line-clamp: 3;
 }
+._truncatingText--overflowVisible_14qzu_16 {
+  overflow: visible;
+}
+
+._extendClickableArea_14qzu_20 {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+._extendClickableArea_14qzu_20::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 48px;
+  height: 48px;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  background: transparent;
+}
+._extendClickableArea--rowHeightSm_14qzu_36::before {
+  height: 32px;
+}
 
-._inlineListItems_3wkw2_17 {
+._inlineListItems_14qzu_40 {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-._inlineListItems_3wkw2_17 > li {
+._inlineListItems_14qzu_40 > li {
   display: inline;
 }
 
-._dynamicRowHeightSpacing_3wkw2_26 {
+._dynamicRowHeightSpacing_14qzu_49 {
   margin-top: 8px;
   margin-bottom: 8px;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css3));
 var peopleCellStyles_default = {
-  "truncatingText": "_truncatingText_3wkw2_1",
-  "truncatingText--md": "_truncatingText--md_3wkw2_10",
-  "truncatingText--lg": "_truncatingText--lg_3wkw2_13",
-  "inlineListItems": "_inlineListItems_3wkw2_17",
-  "dynamicRowHeightSpacing": "_dynamicRowHeightSpacing_3wkw2_26"
+  "truncatingText": "_truncatingText_14qzu_1",
+  "truncatingText--md": "_truncatingText--md_14qzu_10",
+  "truncatingText--lg": "_truncatingText--lg_14qzu_13",
+  "truncatingText--overflowVisible": "_truncatingText--overflowVisible_14qzu_16",
+  "extendClickableArea": "_extendClickableArea_14qzu_20",
+  "extendClickableArea--rowHeightSm": "_extendClickableArea--rowHeightSm_14qzu_36",
+  "inlineListItems": "_inlineListItems_14qzu_40",
+  "dynamicRowHeightSpacing": "_dynamicRowHeightSpacing_14qzu_49"
 };
 
 // src/CellRenderers/PeopleCell.tsx
@@ -54142,6 +54207,37 @@ function sortColumnDefinitionsByFilterIndex(colDef1, colDef2) {
   }
   return filterIndex1 > filterIndex2 ? 1 : -1;
 }
+function assignAlphabeticalFilterIndices(columnDefinitions) {
+  const newColumns = columnDefinitions.map((col) => ({
+    ...col,
+    filterProps: col.filterProps ? { ...col.filterProps } : void 0
+  }));
+  const filterColumns = newColumns.filter(
+    (col) => col.filterRenderer || col.filterProps
+  );
+  const groups = {};
+  filterColumns.forEach((col) => {
+    const groupName = col.filterProps?.groupName || "default";
+    if (!groups[groupName]) {
+      groups[groupName] = [];
+    }
+    groups[groupName].push(col);
+  });
+  Object.values(groups).forEach((groupCols) => {
+    groupCols.sort((a, b) => {
+      const headerA = a.headerName || "";
+      const headerB = b.headerName || "";
+      return headerA.localeCompare(headerB);
+    });
+    groupCols.forEach((col, idx) => {
+      if (!col.filterProps) {
+        col.filterProps = {};
+      }
+      col.filterProps.index = idx;
+    });
+  });
+  return newColumns;
+}
 
 // src/state/useFilterState.ts
 function isNumberFilterModel(value) {
@@ -55880,7 +55976,10 @@ var DataTableCellRenderer = ({
     value
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
-  const isSelectCellComponent = columnDefinition.cellEditor?.render?.displayName === "SelectCellEditor";
+  const isSelectCellComponent = columnDefinition.cellRendererSelector?.({
+    ...columnDefinition.cellRendererParams,
+    node
+  }).component?.displayName === "SelectCellRenderer";
   const URL = isSelectCellComponent && columnDefinition?.cellRendererParams?.getURL ? columnDefinition.cellRendererParams.getURL(value) : null;
   const startEditing = useCallback(
     () => api.startEditingCell({
@@ -78074,12 +78173,15 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
 };
 
 // src/utils/expandRows.ts
+function getStringifiedRoute(node) {
+  return node.getRoute()?.map((r) => typeof r === "object" ? JSON.stringify(r) : r);
+}
 var getGroupRowState = (gridApi, groupDefaultExpanded = 0) => {
   const expandedRoutes = [];
   const collapsedRoutes = [];
   if (gridApi) {
     gridApi.forEachNode((node) => {
-      const route = node.getRoute();
+      const route = getStringifiedRoute(node);
       if (route) {
         const routePath = route.join(",");
         const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
@@ -78099,7 +78201,7 @@ var setExpandCollapseRow = (gridApi, tableConfig, groupDefaultExpanded = 0) => {
   const expandedRoutes = tableConfig.groupRowState?.expandedRoutes ?? [];
   const collapsedRoutes = tableConfig.groupRowState?.collapsedRoutes ?? [];
   gridApi.forEachNode((node) => {
-    const route = node.getRoute();
+    const route = getStringifiedRoute(node);
     if (route) {
       const routePath = route.join(",");
       const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
@@ -78116,7 +78218,7 @@ var setExpandCollapseRow = (gridApi, tableConfig, groupDefaultExpanded = 0) => {
 var isRowOpenedByDefault = (node, tableConfig, groupDefaultExpanded = 0) => {
   const expandedRoutes = tableConfig?.groupRowState?.expandedRoutes ?? [];
   const collapsedRoutes = tableConfig?.groupRowState?.collapsedRoutes ?? [];
-  const route = node.getRoute();
+  const route = getStringifiedRoute(node);
   if (!route) {
     return false;
   }
@@ -82684,7 +82786,7 @@ var FILTERS_GROUP_EXPANDABLE_AREA_VERTICAL_MARGIN = spacing.md;
 var FILTERS_GROUP_ITEM_HEIGHT = 60;
 var ITEMS_IN_FILTERS_GROUP = 5;
 var FILTERS_GROUP_EXPANDABLE_AREA_HEIGHT = (FILTERS_GROUP_ITEM_HEIGHT + spacing.xl) * ITEMS_IN_FILTERS_GROUP + BORDER_WIDTH;
-var StyledPanelSection = styled4(Panel.Section)`
+var StyledPanelSection = styled3(Panel.Section)`
   // Filters Group container styles
   &.filters-list-group-section {
     padding-bottom: ${FILTERS_GROUP_VERTICAL_MARGIN}px;
@@ -82974,899 +83076,807 @@ var ConfigPanelButton = () => {
     )
   );
 };
-function getFilterTokenText(columnDefinition, filterValue) {
-  if (columnDefinition?.filterProps?.getFilterTokenText) {
-    return columnDefinition?.filterProps?.getFilterTokenText?.({
-      headerName: columnDefinition?.headerName || "",
-      value: filterValue
-    });
+var QuickFilterLabel = React76.forwardRef(({ enabled, ...props }, ref) => {
+  return /* @__PURE__ */ React76.createElement(StyledQuickFilterLabel, { $enabled: enabled }, /* @__PURE__ */ React76.createElement(SelectButton, { ref, ...props }));
+});
+var StyledQuickFilterLabel = styled3.div`
+  ${StyledSelectButton} {
+    width: auto;
+    max-width: 380px;
+    ${({ $enabled }) => $enabled && css$1`
+        background: ${colors.blue96};
+        border-color: ${colors.blue96};
+        font-weight: ${typographyWeights.semibold};
+        &:hover {
+          background: ${colors.blue90};
+          border-color: ${colors.blue90};
+        }
+        ${StyledSelectButtonLabel} {
+          color: ${colors.blue45};
+        }
+        ${StyledButton} {
+          color: ${colors.blue45};
+          &:hover {
+            background: white;
+          }
+        }
+        ${StyledSelectArrow} {
+          svg {
+            fill: ${colors.blue45};
+          }
+        }
+      `}
   }
-  if (columnDefinition.filterRenderer === DateFilterRenderer_default) {
+`;
+
+// src/QuickFilterRenderers/DateQuickFilterRenderer.tsx
+function getPlacement2(currentSelectionType, position) {
+  if (currentSelectionType === "single") {
+    return "bottom-left";
+  }
+  if (position === "start") {
+    return "bottom-left";
+  }
+  return "bottom-right";
+}
+var OptionalDateTimeProvider2 = ({ timeZone, children }) => {
+  return timeZone ? /* @__PURE__ */ React76.createElement(DateTimeProvider, { timeZone }, children) : /* @__PURE__ */ React76.createElement(React76.Fragment, null, children);
+};
+var DateFilterSelect2 = React76.forwardRef(
+  ({
+    afterHide,
+    selectionType = "either",
+    headerName,
+    disabled,
+    onChange,
+    position,
+    selectedValue,
+    setSelectionType = () => {
+    }
+  }, ref) => {
+    const dateTime = useDateTime();
+    const { start, end } = selectedValue;
+    const selectedDate = (position === "start" ? start : end) ?? void 0;
+    const [displayed, setDisplayed2] = React76.useState(
+      // @ts-ignore
+      selectedDate || dateTime.newDate()
+    );
+    React76.useEffect(() => {
+      if (isDate(start) && !isDate(end) && position === "end") {
+        setDisplayed2(start);
+      }
+      if (!isDate(start) && isDate(end) && position === "start") {
+        setDisplayed2(end);
+      }
+    }, [position, selectedValue]);
+    function onClear() {
+      onChange(null, position);
+    }
+    const clearRef = React76.useRef(null);
+    const monthRef = React76.useRef(null);
+    const yearRef = React76.useRef(null);
+    const overlay = /* @__PURE__ */ React76.createElement(
+      DateFilterOverlay,
+      {
+        displayDate: displayed,
+        selectionType,
+        monthRef,
+        onSelect: (date) => {
+          onChange(date, position);
+        },
+        position,
+        selectedValue,
+        setDisplayDate: setDisplayed2,
+        setSelectionType,
+        yearRef
+      }
+    );
     return /* @__PURE__ */ React76.createElement(
-      OptionalDateTimeProvider,
+      OverlayTrigger,
       {
-        timeZone: columnDefinition.timeZone
+        afterHide,
+        autoFocus: true,
+        beforeShow: (e) => {
+          if (isEventSource(clearRef, e)) {
+            return false;
+          }
+          return true;
+        },
+        clickOutsideIgnoreRefs: [monthRef, yearRef],
+        overlay,
+        placement: getPlacement2(selectionType, position),
+        ref,
+        restoreFocusOnHide: true,
+        role: "dialog"
       },
       /* @__PURE__ */ React76.createElement(
-        DateFilterTokenText,
+        DateQuickFilterLabel,
         {
-          headerName: columnDefinition.headerName,
-          value: filterValue
+          headerName,
+          onClear,
+          value: selectedDate,
+          disabled
         }
       )
     );
   }
-  if (columnDefinition.filterRenderer === NumberFilterRenderer) {
-    return columnDefinition?.headerName;
-  }
-  if (Array.isArray(filterValue)) {
-    if (filterValue.length === 0) {
-      return columnDefinition?.headerName;
-    }
-    if (filterValue.length === 1) {
-      return `${columnDefinition?.headerName}: ${getLabel(
-        columnDefinition.filterProps?.getLabel,
-        filterValue[0]
-      )}`;
+);
+function DateFilter3({
+  // TODO: talk to design about potential loading UX for this.
+  // core DateSelect doesn't have it
+  // loading,
+  headerName,
+  onChange,
+  selectionType = "either",
+  value,
+  disabled,
+  ...props
+}) {
+  const [selectedValue, setSelectedValue] = React76.useState({
+    type: selectionType === "either" ? "range" : selectionType
+  });
+  React76.useEffect(() => {
+    const parsedValue = value.map((date) => {
+      if (isDate(date)) {
+        return date;
+      }
+      return parseISO(String(date));
+    });
+    const type = isSameDay(parsedValue[0], parsedValue[1]) ? "single" : "range";
+    setSelectedValue({ type, start: parsedValue[0], end: parsedValue[1] });
+  }, [value]);
+  const dateRangeEndDateRef = React76.useRef(null);
+  function dateFilterOnChange(date, position) {
+    const newValue = getValueFromSelection(selectedValue, date, position);
+    setSelectedValue(newValue);
+    if (isValidDateSelection(newValue)) {
+      onChange(
+        newValue.start || newValue.end ? [
+          newValue.start,
+          newValue.type === "single" ? newValue.start : newValue.end
+        ] : []
+      );
     }
-    return `${columnDefinition?.headerName}: (${filterValue.length})`;
-  }
-  return columnDefinition?.headerName;
-}
-var ensureArray = (input) => {
-  if (input === null) {
-    return [];
-  }
-  return Array.isArray(input) ? input : [input];
-};
-var FiltersPanelToggleButton = ({ hasSelectedFilters, hasDefinedFilters }) => {
-  const I18n = useI18nContext();
-  const { contextPanel } = useInternalTableContext();
-  const hasNoContent = useTableHasNoContent();
-  if (!hasDefinedFilters) {
-    return null;
   }
-  return /* @__PURE__ */ React76.createElement(
-    EmptyResultsControlTooltip,
-    {
-      featureI18nKey: "featureFilter",
-      enabled: hasNoContent
+  const onSelectionTypeChange = React76.useCallback(
+    (newSelectionType) => {
+      setSelectedValue({ type: newSelectionType });
     },
-    /* @__PURE__ */ React76.createElement(
-      ToggleButton,
-      {
-        "data-qa": "data-table-show-filters-button",
-        disabled: hasNoContent,
-        icon: /* @__PURE__ */ React76.createElement(FilterIcon, null),
-        onClick: () => {
-          if (contextPanel.content === "filters") {
-            contextPanel.hide();
-          } else {
-            contextPanel.show("filters");
-          }
-        },
-        selected: contextPanel.content === "filters"
-      },
-      hasSelectedFilters ? I18n.t("dataTable.filters.moreFilters") : I18n.t("dataTable.filters.filters")
-    )
+    [setSelectedValue]
   );
-};
-var ServerSideFiltersPanelToggleButton = () => {
-  const {
-    filterStorage: { hasDefinedFilters, hasSelectedFilters }
-  } = useInternalTableContext();
-  return /* @__PURE__ */ React76.createElement(
-    FiltersPanelToggleButton,
+  function dateRangeAfterHide() {
+    if (selectedValue.type === "range" && isDate(selectedValue.start) && !isDate(selectedValue.end)) {
+      dateRangeEndDateRef.current?.click();
+    }
+    return true;
+  }
+  return /* @__PURE__ */ React76.createElement(FlexList, { space: "xs", "data-qa": props["data-qa"] }, /* @__PURE__ */ React76.createElement(
+    DateFilterSelect2,
     {
-      hasDefinedFilters,
-      hasSelectedFilters
+      afterHide: dateRangeAfterHide,
+      headerName,
+      onChange: dateFilterOnChange,
+      position: "start",
+      selectedValue,
+      selectionType,
+      setSelectionType: onSelectionTypeChange,
+      disabled
     }
-  );
-};
-var ClientSideFiltersPanelToggleButton = () => {
-  const { filterState } = useInternalTableContext();
-  const activeFilters = React76.useMemo(() => {
-    return filterState.allAvailableFilters.filter(({ instance }) => {
-      return instance.isFilterActive();
-    });
-  }, [filterState.allAvailableFilters]);
-  return /* @__PURE__ */ React76.createElement(
-    FiltersPanelToggleButton,
+  ), selectedValue.type === "range" && /* @__PURE__ */ React76.createElement(
+    DateFilterSelect2,
     {
-      hasDefinedFilters: filterState.allAvailableFilters.length > 0,
-      hasSelectedFilters: activeFilters.length > 0
+      headerName,
+      onChange: dateFilterOnChange,
+      position: "end",
+      ref: dateRangeEndDateRef,
+      selectedValue,
+      selectionType,
+      setSelectionType: onSelectionTypeChange,
+      disabled
     }
-  );
-};
-
-// src/QuickControls/QuickFilters.tsx
-var FilterIcon = () => {
-  return /* @__PURE__ */ React76.createElement(
-    "svg",
+  ));
+}
+function ServerSideQuickDateFilterRenderer({
+  columnDefinition,
+  disabled
+}) {
+  const { onChange, value = [] } = useServerSideFilter({
+    columnDefinition
+  });
+  const colDef = columnDefinition;
+  return /* @__PURE__ */ React76.createElement(OptionalDateTimeProvider2, { timeZone: colDef.timeZone }, /* @__PURE__ */ React76.createElement(
+    DateFilter3,
     {
-      focusable: false,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React76.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3 5V7H17V5H3ZM8 15H12V13H8V15ZM15 11H5V9H15V11Z",
-        fill: "currentColor"
-      }
-    )
+      selectionType: colDef.filterProps?.selectionType ?? "either",
+      headerName: colDef.headerName,
+      disabled,
+      onChange: (selected) => {
+        onChange(
+          selected.map((date) => {
+            return date ? {
+              // future extensions can go here (month, day, year keys etc)
+              date
+            } : (
+              // TODO: refactor out date-specific getId stuff from useServerSideFilterStorage
+              date
+            );
+          })
+        );
+      },
+      value: value.map((option) => option ? option.date : option)
+    }
+  ));
+}
+var QuickDateFilterRenderer = (props) => {
+  const { onServerSideDataRequest } = useInternalTableContext();
+  if (onServerSideDataRequest) {
+    return /* @__PURE__ */ React76.createElement(ServerSideQuickDateFilterRenderer, { ...props });
+  }
+  logger.error(
+    "Warning: Date Filters are currently only implemented for the serverside row model"
   );
+  return null;
 };
-var StyledFilterTokenWrapper = styled4.div`
-  ${UNSAFE_StyledFilterTokenLabel} {
-    font-weight: ${typographyWeights.semibold};
+var dateInputLocales = {
+  "fr-CA": {
+    placeholders: { day: "jj", month: "mm", year: "aaaa" }
+  },
+  "fr-FR": {
+    placeholders: { day: "jj", month: "mm", year: "aaaa" }
+  },
+  es: {
+    placeholders: { day: "dd", month: "mm", year: "aaaa" }
+  },
+  "es-ES": {
+    placeholders: { day: "dd", month: "mm", year: "aaaa" }
+  },
+  pt: {
+    placeholders: { day: "dd", month: "mm", year: "aaaa" }
+  },
+  "is-IS": {
+    placeholders: { day: "dd", month: "mm", year: "\xE1\xE1\xE1\xE1" }
+  },
+  "de-DE": {
+    placeholders: { day: "tt", month: "MM", year: "jjjj" }
   }
-`;
-var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
-  const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
-  const hasNoContent = useTableHasNoContent();
-  const { quickFilters, tokens } = React76.useMemo(() => {
-    return filterState.allAvailableFilters.reduce(
-      (acc, filter) => {
-        const colDef = getColumnDefinition(filter.field);
-        if (!colDef) {
-          return acc;
-        }
-        if (colDef?.quickFilterRenderer) {
-          return { ...acc, quickFilters: [...acc.quickFilters, filter] };
-        } else if (filter.instance.isFilterActive()) {
-          return { ...acc, tokens: [...acc.tokens, filter] };
-        }
-        return acc;
-      },
+};
+var DateQuickFilterLabel = React76.forwardRef(({ headerName, onClear, value, disabled }, ref) => {
+  const dateTime = useDateTime();
+  const i18n = useI18nContext();
+  const placeholders = dateInputLocales[i18n.locale]?.placeholders || {
+    day: "dd",
+    month: "mm",
+    year: "yyyy"
+  };
+  if (value !== void 0 && isDate(value)) {
+    return /* @__PURE__ */ React76.createElement(
+      QuickFilterLabel,
       {
-        quickFilters: [],
-        tokens: []
+        enabled: true,
+        disabled,
+        label: `${headerName}: ${dateTime.format(value, "numeric-date")}`,
+        onClear,
+        ref
       }
     );
-  }, [filterState.allAvailableFilters, getColumnDefinition]);
-  const isEmpty2 = quickFilters.length === 0 && tokens.length === 0;
-  return isEmpty2 ? null : /* @__PURE__ */ React76.createElement(
-    FlexList,
+  }
+  return /* @__PURE__ */ React76.createElement(
+    QuickFilterLabel,
     {
-      padding: "xs none",
-      size: "none",
-      alignItems: "center",
-      wrap: "wrap",
-      gap: "sm"
-    },
-    quickFilters.map((filter) => {
-      const colDef = getColumnDefinition(filter.field);
-      const QuickFilter = colDef?.quickFilterRenderer;
-      if (!colDef || !QuickFilter) {
-        return null;
-      }
-      return /* @__PURE__ */ React76.createElement(
-        EmptyResultsControlTooltip,
-        {
-          featureI18nKey: "featureQuickFilter",
-          enabled: hasNoContent
-        },
-        /* @__PURE__ */ React76.createElement(
-          QuickFilter,
-          {
-            key: filter.field,
-            filter,
-            columnDefinition: colDef,
-            disabled: hasNoContent,
-            onChange: (value) => tableRef?.current?.applyListFilter(filter.field, value),
-            onRemove: () => tableRef?.current?.removeFilter(filter.field),
-            overlayMatchesTriggerWidth
-          }
-        )
-      );
-    }),
-    tokens.map((filter) => {
-      const colDef = getColumnDefinition(filter.field);
-      if (!colDef) {
-        return null;
-      }
-      return /* @__PURE__ */ React76.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken.Label, null, getFilterTokenText(colDef, filter.filterValues)), /* @__PURE__ */ React76.createElement(
-        UNSAFE_FilterToken.Remove,
-        {
-          onClick: () => tableRef?.current?.removeFilter(filter.field)
-        }
-      )));
-    })
+      enabled: false,
+      disabled,
+      label: `${headerName}: ${getDatePlaceholder(i18n.locale, placeholders)}`,
+      ref
+    }
   );
+});
+var DateQuickFilterRenderer_default = QuickDateFilterRenderer;
+var defaultGetId2 = (option) => option?.id;
+var defaultGetLabel2 = (option) => {
+  return option?.label ?? option?.name ?? option;
 };
-var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
-  const {
-    filterStorage: {
-      hasDefinedFilters,
-      onClearFilter,
-      possibleFilters,
-      selectedFilters,
-      getListFilter
-    },
-    getColumnDefinition
-  } = useInternalTableContext();
-  const hasNoContent = useTableHasNoContent();
-  const { quickFilterNames, tokenNames } = React76.useMemo(() => {
-    const appliedFilterNames = Object.keys(selectedFilters);
-    const isActiveFilter = (filterName) => appliedFilterNames.includes(filterName);
-    return possibleFilters.reduce(
-      (acc, filterName) => {
-        const colDef = getColumnDefinition(filterName);
-        if (!colDef) {
-          return acc;
-        }
-        if (colDef?.quickFilterRenderer) {
-          return {
-            ...acc,
-            quickFilterNames: [...acc.quickFilterNames, filterName]
-          };
-        } else if (isActiveFilter(filterName)) {
-          return { ...acc, tokenNames: [...acc.tokenNames, filterName] };
-        }
-        return acc;
-      },
-      {
-        quickFilterNames: [],
-        tokenNames: []
+var useSuperSelectOptionAsValueWorkaround = ({
+  originValue,
+  originOptions,
+  getId: getId3 = defaultGetId2,
+  loading
+}) => {
+  const isValueFromOptions = React76.useRef(false);
+  const getValueFromOptions = () => {
+    const valueIds = originValue.map(getId3);
+    isValueFromOptions.current = true;
+    return originOptions.filter((option) => valueIds.includes(getId3(option)));
+  };
+  const hasOptions = originOptions.length > 0 && !loading;
+  const hasValue = originValue?.length > 0;
+  const options = !hasOptions && hasValue ? originValue : originOptions;
+  const value = !hasOptions ? originValue : isValueFromOptions.current ? originValue : getValueFromOptions();
+  return {
+    options,
+    value,
+    getOptionValue: (option) => option
+  };
+};
+var LocationQuickFilterOverlay = React76.forwardRef(
+  ({
+    getId: getId3,
+    getLabel: getLabel3,
+    loading,
+    onSelect: _onSelect,
+    onSelectAll,
+    onSelectSublocations,
+    enableSublocations,
+    selectState,
+    options,
+    disabledOptions,
+    columnDefinition,
+    value
+  }, ref) => {
+    if (value && !Array.isArray(value)) {
+      logger.warn(
+        "a value was set that is not compatible with this LocationQuickFilterRenderer"
+      );
+      return null;
+    }
+    const [items, setItems] = React76.useState(options);
+    const [searching, setSearching] = React76.useState(false);
+    const menuRef = React76.useRef(null);
+    const { menuProps, menuNavigationTriggerProps } = UNSAFE_useMenuImperativeControlNavigation(menuRef);
+    const I18n = useI18nContext();
+    const selectAllOption = {
+      label: I18n.t("dataTable.filters.locationFilter.selectAll"),
+      id: "select_all"
+    };
+    const includeSublocationOption = {
+      label: I18n.t("dataTable.filters.locationFilter.includeSublocations"),
+      id: "include_sublocations"
+    };
+    const onSelect = (selection) => {
+      if (selection.item.id === selectAllOption.id) {
+        return onSelectAll();
       }
-    );
-  }, [possibleFilters, selectedFilters, getColumnDefinition]);
-  if (!hasDefinedFilters) {
-    return null;
-  }
-  const isEmpty2 = quickFilterNames.length === 0 && tokenNames.length === 0;
-  return isEmpty2 ? null : /* @__PURE__ */ React76.createElement(
-    FlexList,
-    {
-      padding: "xs none",
-      size: "none",
-      alignItems: "center",
-      wrap: "wrap",
-      gap: "sm",
-      "data-qa": "data-table-quick-filters"
-    },
-    quickFilterNames.map((fieldName) => {
-      const colDef = getColumnDefinition(fieldName);
-      const QuickFilter = colDef?.quickFilterRenderer;
-      if (!colDef || !QuickFilter) {
-        return null;
+      if (selection.item.id === includeSublocationOption.id) {
+        _onSelect(selection);
+        return onSelectSublocations();
       }
-      return /* @__PURE__ */ React76.createElement(
-        EmptyResultsControlTooltip,
+      return _onSelect(selection);
+    };
+    function defaultOnSearch(e) {
+      if (e.target.value === "") {
+        setSearching(false);
+        setItems(options);
+      } else {
+        setSearching(true);
+        setItems(
+          options.filter(
+            (item) => getLabel3(item).toLowerCase().includes(e.target.value.toLowerCase())
+          )
+        );
+      }
+    }
+    const _onSearch = columnDefinition.filterProps.onSearch || defaultOnSearch;
+    React76.useEffect(() => {
+      menuRef.current?.highlightSuggested();
+    }, []);
+    return /* @__PURE__ */ React76.createElement(Card, { ref }, /* @__PURE__ */ React76.createElement(
+      UNSAFE_Menu,
+      {
+        ...menuProps,
+        multiple: true,
+        role: "listbox",
+        ref: menuRef,
+        onSelect,
+        className: locationFilterStyles_default.locationFilterMenu
+      },
+      /* @__PURE__ */ React76.createElement(
+        UNSAFE_Menu.Search,
         {
-          featureI18nKey: "featureQuickFilter",
-          enabled: hasNoContent
+          ...menuNavigationTriggerProps,
+          onChange: _onSearch
+        }
+      ),
+      /* @__PURE__ */ React76.createElement(UNSAFE_Menu.Options, null, !searching && /* @__PURE__ */ React76.createElement(
+        Box,
+        {
+          className: locationFilterStyles_default.controlsContainer,
+          ...UNSAFE_menuItemsWrapperAttribute
         },
         /* @__PURE__ */ React76.createElement(
-          QuickFilter,
+          UNSAFE_Menu.CheckboxItem,
           {
-            key: fieldName,
-            columnDefinition: colDef,
-            disabled: hasNoContent,
-            overlayMatchesTriggerWidth
-          }
+            key: getId3(includeSublocationOption),
+            item: includeSublocationOption,
+            selected: enableSublocations
+          },
+          getLabel3(includeSublocationOption)
+        ),
+        /* @__PURE__ */ React76.createElement(
+          UNSAFE_Menu.CheckboxItem,
+          {
+            key: getId3(selectAllOption),
+            item: selectAllOption,
+            selected: selectState === "all",
+            indeterminate: selectState === "partial"
+          },
+          getLabel3(selectAllOption)
         )
-      );
-    }),
-    tokenNames.map((fieldName) => {
-      const colDef = getColumnDefinition(fieldName);
-      if (!colDef) {
-        return null;
-      }
-      const filter = getListFilter(fieldName);
-      return /* @__PURE__ */ React76.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken.Label, null, getFilterTokenText(
-        colDef,
-        colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
-      )), /* @__PURE__ */ React76.createElement(
-        UNSAFE_FilterToken.Remove,
-        {
-          "data-qa": "data-table-quick-filter-remove-token",
-          onClick: () => onClearFilter(fieldName)
-        }
-      )));
-    })
-  );
-};
-var QuickFilters = ({ overlayMatchesTriggerWidth }) => {
-  const { onServerSideDataRequest } = useInternalTableContext();
-  if (onServerSideDataRequest) {
-    return /* @__PURE__ */ React76.createElement(
-      ServerSideQuickFilters,
-      {
-        overlayMatchesTriggerWidth
-      }
-    );
-  }
-  return /* @__PURE__ */ React76.createElement(
-    ClientSideQuickFilters,
-    {
-      overlayMatchesTriggerWidth
-    }
-  );
-};
-var FiltersPanelButton = () => {
-  const { onServerSideDataRequest } = useInternalTableContext();
-  if (onServerSideDataRequest) {
-    return /* @__PURE__ */ React76.createElement(ServerSideFiltersPanelToggleButton, null);
+      ), !loading && items.map((item, i) => {
+        return /* @__PURE__ */ React76.createElement(
+          UNSAFE_Menu.CheckboxItem,
+          {
+            key: getId3(item),
+            item,
+            selected: value.map(({ id }) => id).includes(getId3(item)) || disabledOptions.map(({ id }) => id).includes(getId3(item)),
+            suggested: i === 0,
+            disabled: disabledOptions.map(({ id }) => id).includes(getId3(item))
+          },
+          getLabel3(item)
+        );
+      })),
+      loading && /* @__PURE__ */ React76.createElement(UNSAFE_Menu.Footer, null, /* @__PURE__ */ React76.createElement(Flex, { justifyContent: "center" }, /* @__PURE__ */ React76.createElement(Spinner$1, { size: "sm" })))
+    ));
   }
-  return /* @__PURE__ */ React76.createElement(ClientSideFiltersPanelToggleButton, null);
-};
-var RowGroupSelector = ({ localeText }) => {
+);
+var LocationQuickFilterRenderer = ({
+  columnDefinition,
+  disabled
+}) => {
   const {
-    columnDefinitions: _columnDefinitions,
-    columnApi,
-    gridApi,
-    tableRef
-  } = useInternalTableContext();
-  const hasNoContent = useTableHasNoContent();
-  const [columnDefinitions, setColumnDefinitions] = React76.useState(_columnDefinitions);
-  const groupableColumns = React76.useMemo(
-    () => mapColumnsToOptions(
-      columnDefinitions.filter((column2) => column2.enableRowGroup)
-    ),
-    [columnDefinitions]
-  );
-  const groupedColumns = React76.useMemo(() => {
-    const rowGrouping = columnApi?.getRowGroupColumns() ?? [];
-    return rowGrouping.map((column2) => {
-      const colDef = column2.getColDef();
-      return transformToColumnDefinition(colDef);
-    });
-  }, [columnDefinitions]);
-  const selectedColumns = React76.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
-    [groupedColumns]
+    options: originOptions,
+    value: originValue = [],
+    onChange,
+    getOptions,
+    loading
+  } = useServerSideFilter({ columnDefinition });
+  const { options, value } = useSuperSelectOptionAsValueWorkaround({
+    originOptions,
+    originValue,
+    loading,
+    getId: columnDefinition.filterProps?.getId
+  });
+  const I18n = useI18nContext();
+  const getId3 = columnDefinition.filterProps?.getId || defaultGetId2;
+  const getLabel3 = columnDefinition.filterProps?.getLabel || defaultGetLabel2;
+  const determineSelectedState = (selection) => {
+    if (options.length === selection.length) {
+      return "all";
+    }
+    if (selection.length && (options.length > selection.length || options.length < selection.length)) {
+      return "partial";
+    }
+    if (selection.length === 0) {
+      return "none";
+    }
+    return "none";
+  };
+  const ids = React76.useMemo(() => value.map(({ id }) => id), [value]);
+  const [selectedValueIds, setSelectedValueIds] = React76.useState(ids);
+  const [selectState, setSelectState] = React76.useState(
+    determineSelectedState(value)
   );
-  const onGroupedClear = React76.useCallback(() => {
-    tableRef?.current?.setRowGrouping([]);
-  }, [tableRef]);
-  const onGroupedRowChange = React76.useCallback(
-    (newValue) => {
-      const fields = newValue.map((val) => {
-        return val.id;
+  const [disabledValues, setDisabledValues] = React76.useState([]);
+  const [enableSublocations, setEnableSublocations] = React76.useState(false);
+  const onSelectSublocations = React76.useCallback(() => {
+    if (enableSublocations) {
+      setDisabledValues([]);
+    } else {
+      const newDisabledValues = [];
+      value.forEach((location) => {
+        newDisabledValues.push(...findSublocations(location));
       });
-      if (!equals(selectedColumns, newValue)) {
-        tableRef?.current?.setRowGrouping(fields);
-      }
+      const uniqDisabledValues = uniqBy(prop("id"), newDisabledValues).filter(
+        ({ id }) => !selectedValueIds.includes(id)
+      );
+      setDisabledValues(uniqDisabledValues);
+    }
+    setEnableSublocations(!enableSublocations);
+  }, [enableSublocations, value, selectedValueIds, options]);
+  const onSelectAll = React76.useCallback(() => {
+    if (selectState === "none" || selectState === "partial") {
+      setSelectState("all");
+      setSelectedValueIds(options.map(({ id }) => id));
+      onChange(options);
+    }
+    if (selectState === "all") {
+      setSelectState("none");
+      setSelectedValueIds([]);
+      onChange([]);
+    }
+  }, [options, selectState, selectedValueIds]);
+  const onSelect = (selection) => {
+    if (selection.item.id === "select_all") {
+      return;
+    }
+    if (selection.item.id === "include_sublocations") {
+      return onChange(
+        value.map((item) => ({
+          ...item,
+          sublocations: enableSublocations ? [] : findSublocations(item)
+        }))
+      );
+    }
+    let newSelections = [];
+    if (selectedValueIds.includes(getId3(selection.item))) {
+      newSelections = removeSelections(selection.item, value);
+    } else {
+      newSelections = [...value, selection.item];
+      const sublocationsToDisable = handleSelectSublocations(selection.item);
+      const newDisabledValues = [
+        ...disabledValues,
+        ...sublocationsToDisable.filter(
+          ({ id }) => !selectedValueIds.includes(id)
+        )
+      ];
+      setDisabledValues(newDisabledValues);
+    }
+    setSelectState(determineSelectedState(newSelections));
+    setSelectedValueIds(newSelections.map(({ id }) => id));
+    onChange(
+      newSelections.map((item) => ({
+        ...item,
+        sublocations: handleSelectSublocations(item)
+      }))
+    );
+  };
+  const findSublocations = (selected) => {
+    return options.filter((option) => {
+      return startsWith(
+        `${getLabel3(selected).toLowerCase()} > `,
+        getLabel3(option).toLowerCase()
+      );
+    });
+  };
+  const handleSelectSublocations = (selected) => {
+    if (enableSublocations) {
+      const filteredOptions = findSublocations(selected);
+      return filteredOptions;
+    } else {
+      return [];
+    }
+  };
+  const removeSelections = React76.useCallback(
+    function(selection, selected) {
+      const sublocations = handleSelectSublocations(selection);
+      const disabledValueIds = disabledValues.map(({ id }) => id);
+      const sublocationsToRemoveFromDisabledIds = sublocations.filter(({ id }) => disabledValueIds.includes(id)).map(({ id }) => id);
+      setDisabledValues(
+        disabledValues.filter(
+          ({ id }) => !sublocationsToRemoveFromDisabledIds.includes(id)
+        )
+      );
+      return selected.filter((item) => getId3(item) !== getId3(selection));
     },
-    [selectedColumns]
+    [enableSublocations, disabledValues]
   );
   React76.useEffect(() => {
-    function onDisplayedColumnsChanged(event) {
-      const agColumnDefs = event.api.getColumnDefs();
-      if (agColumnDefs?.length) {
-        const flattenedAgColDefs = flattenColDefs(event.api.getColumnDefs());
-        const dataTableColumnDefinitions = flattenedAgColDefs.map(
-          transformToColumnDefinition
-        );
-        setColumnDefinitions(dataTableColumnDefinitions);
-      }
+    setSelectState(determineSelectedState(value));
+  }, [value]);
+  const overlay = /* @__PURE__ */ React76.createElement(
+    LocationQuickFilterOverlay,
+    {
+      columnDefinition,
+      enableSublocations,
+      onSelectAll,
+      onSelectSublocations,
+      selectState,
+      value,
+      options,
+      disabledOptions: disabledValues,
+      getId: getId3,
+      getLabel: getLabel3,
+      loading,
+      onSelect,
+      selectedValueIds
     }
-    gridApi?.addEventListener(
-      "displayedColumnsChanged",
-      onDisplayedColumnsChanged
-    );
-    return () => {
-      removeEventListenerFromGrid(
-        "displayedColumnsChanged",
-        onDisplayedColumnsChanged,
-        gridApi
-      );
-    };
-  }, [gridApi]);
-  if (groupableColumns.length === 0) {
-    return null;
-  }
+  );
+  const triggerLabel = value.length ? value.length === 1 ? `: ${value[0].label}` : `: (${value.length})` : "";
   return /* @__PURE__ */ React76.createElement(
-    EmptyResultsControlTooltip,
+    OverlayTrigger,
     {
-      featureI18nKey: "featureGroupBy",
-      enabled: hasNoContent
+      overlay,
+      beforeShow: getOptions,
+      placement: "bottom-left"
     },
-    /* @__PURE__ */ React76.createElement(
-      GroupBySelect,
+    value.length ? /* @__PURE__ */ React76.createElement(
+      QuickFilterLabel,
       {
-        isDisabled: hasNoContent,
-        localeText,
-        onBlur: onGroupedRowChange,
-        onClear: onGroupedClear,
-        options: groupableColumns,
-        selected: selectedColumns
-      }
-    )
-  );
-};
-function mapColumnsToOptions(columnDefinitions) {
-  return columnDefinitions.map((col) => {
-    return {
-      label: col.headerName,
-      id: col.field,
-      key: col.field,
-      group: col.columnGroupName
-    };
-  });
-}
-var cx21 = classnames.bind(quickControlsStyles_default);
-var ClientSideSearch = ({
-  onSearch,
-  placeholder
-}) => {
-  const [internalValue, setInternalValue] = React76.useState("");
-  const { tableRef } = useInternalTableContext();
-  const hasNoContent = useTableHasNoContent();
-  const I18n = useI18nContext();
-  const debouncedSetSearchValue = React76.useCallback(
-    debounce5((value) => {
-      tableRef?.current?.setSearchValue(value);
-    }, 250),
-    [tableRef?.current?.setSearchValue]
-  );
-  const onChange = React76.useCallback(
-    (value, event) => {
-      setInternalValue(value);
-      if (onSearch) {
-        onSearch(event);
-      } else {
-        debouncedSetSearchValue(value);
+        enabled: true,
+        disabled,
+        label: `${I18n.t(
+          "dataTable.filters.locationFilter.locations"
+        )}${triggerLabel}`,
+        onClear: () => {
+          onChange([]);
+        },
+        block: true
       }
-    },
-    [debouncedSetSearchValue, onSearch]
-  );
-  return /* @__PURE__ */ React76.createElement(EmptyResultsControlTooltip, { hasSearch: true, enabled: hasNoContent }, /* @__PURE__ */ React76.createElement(
-    Typeahead,
-    {
-      disabled: hasNoContent,
-      "data-qa": "data-table-search",
-      value: internalValue,
-      className: cx21("search", {
-        "search--empty": !internalValue.length
-      }),
-      onChange,
-      placeholder: placeholder || I18n.t("dataTable.search")
-    }
-  ));
-};
-var Search = (props) => {
-  const { onServerSideDataRequest } = useInternalTableContext();
-  if (onServerSideDataRequest) {
-    return /* @__PURE__ */ React76.createElement(ServerSideSearch, { ...props });
-  }
-  return /* @__PURE__ */ React76.createElement(ClientSideSearch, { ...props });
-};
-
-// src/QuickControls/QuickControls.tsx
-var QuickControls = (props) => {
-  const I18n = useI18nContext();
-  if (props.children) {
-    return /* @__PURE__ */ React76.createElement(
-      Box,
+    ) : /* @__PURE__ */ React76.createElement(
+      QuickFilterLabel,
       {
-        "data-qa": "data-table-quick-controls",
-        padding: "xs none",
-        style: props.style
-      },
-      props.children
-    );
-  }
-  return /* @__PURE__ */ React76.createElement(Box, { padding: "xs none", style: props.style }, /* @__PURE__ */ React76.createElement(Box, { padding: "xs none", display: "flex-row", justifyContent: "space-between" }, /* @__PURE__ */ React76.createElement(FlexList, { size: "xs", alignItems: "center", marginRight: "sm" }, /* @__PURE__ */ React76.createElement(
-    Search,
-    {
-      onSearch: props.onSearch,
-      placeholder: props.placeholder,
-      disabled: props.disabledSearch
-    }
-  ), /* @__PURE__ */ React76.createElement(FiltersPanelButton, null)), /* @__PURE__ */ React76.createElement(FlexList, { size: "xs", alignItems: "center" }, /* @__PURE__ */ React76.createElement(
-    RowGroupSelector,
-    {
-      localeText: {
-        reset: I18n.t("dataTable.tableSettings.reset"),
-        placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
-        selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
+        enabled: false,
+        disabled,
+        label: `${I18n.t(
+          "dataTable.filters.locationFilter.locations"
+        )}${triggerLabel}`,
+        block: true
       }
-    }
-  ), /* @__PURE__ */ React76.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React76.createElement(
-    QuickFilters,
-    {
-      overlayMatchesTriggerWidth: props.filterOverlayMatchesTriggerWidth
-    }
-  ));
-};
-
-// src/utils/addSubcomponents.ts
-var addSubcomponents = (subs, parent) => {
-  const assigned = parent;
-  Object.keys(subs).forEach((key) => {
-    assigned[key] = subs[key];
-  });
-  return assigned;
-};
-
-// src/ClientSideDataTable.tsx
-var ClientSideDataTable = ({
-  analytics,
-  children,
-  columnDefinitions: _columnDefinitions,
-  customBulkEditorFields,
-  enableDynamicRowHeight,
-  enableGroupEditAndValidation,
-  filterGroups,
-  getRowId,
-  initialTableConfig: _initialTableConfig,
-  onBulkEditUpdate,
-  onTableConfigChange,
-  translations: translations2 = {},
-  enableCellTextSelection,
-  localStoragePersistenceKey
-}) => {
-  return /* @__PURE__ */ React76.createElement(
-    DataTable,
-    {
-      analytics,
-      columnDefinitions: _columnDefinitions,
-      enableGroupEditAndValidation,
-      enableDynamicRowHeight,
-      filterGroups,
-      getRowId,
-      initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onBulkEditUpdate,
-      showExpandCollapseAllToggle: true,
-      translations: translations2,
-      localStoragePersistenceKey,
-      customBulkEditorFields,
-      enableCellTextSelection
-    },
-    children
+    )
   );
 };
-var Table2 = (props) => {
-  const internalTableContext = useInternalTableContext();
-  React76.useEffect(() => {
-    internalTableContext.setTotalRowCount(props.rows?.length ?? 0);
-  }, [props.rows]);
-  return /* @__PURE__ */ React76.createElement(Table, { ...props, modules: [ClientSideRowModelModule] });
-};
-BulkActions.displayName = "ClientSideDataTable.BulkActions";
-ConfigPanelButton.displayName = "ClientSideDataTable.ConfigPanelButton";
-ContextPanel.displayName = "ClientSideDataTable.ContextPanel";
-QuickControls.displayName = "ClientSideDataTable.QuickControls";
-QuickFilters.displayName = "ClientSideDataTable.QuickFilters";
-RowGroupSelector.displayName = "ClientSideDataTable.RowGroupSelector";
-Search.displayName = "ClientSideDataTable.Search";
-Table2.displayName = "ClientSideDataTable.Table";
-FiltersPanel.displayName = "ClientSideDataTable.FiltersPanel";
-var ClientSideDataTable_default = addSubcomponents(
-  {
-    BulkActions,
-    BulkEditActionButton,
-    ConfigPanelButton,
-    ContextPanel,
-    QuickControls,
-    QuickFilters,
-    RowGroupSelector,
-    Search,
-    Table: Table2,
-    FiltersPanel,
-    FiltersPanelButton
-  },
-  ClientSideDataTable
-);
-var QuickFilterLabel = React76.forwardRef(({ enabled, ...props }, ref) => {
-  return /* @__PURE__ */ React76.createElement(StyledQuickFilterLabel, { $enabled: enabled }, /* @__PURE__ */ React76.createElement(SelectButton, { ref, ...props }));
-});
-var StyledQuickFilterLabel = styled4.div`
-  ${StyledSelectButton} {
-    width: auto;
-    max-width: 380px;
-    ${({ $enabled }) => $enabled && css$1`
-        background: ${colors.blue96};
-        border-color: ${colors.blue96};
-        font-weight: ${typographyWeights.semibold};
-        &:hover {
-          background: ${colors.blue90};
-          border-color: ${colors.blue90};
-        }
-        ${StyledSelectButtonLabel} {
-          color: ${colors.blue45};
-        }
-        ${StyledButton} {
-          color: ${colors.blue45};
-          &:hover {
-            background: white;
-          }
-        }
-        ${StyledSelectArrow} {
-          svg {
-            fill: ${colors.blue45};
-          }
-        }
-      `}
-  }
+var LocationQuickFilterRenderer_default = LocationQuickFilterRenderer;
+var StyledFilterPresetPopoverContent = styled3(Popover.Content)`
+  padding: ${spacing.sm}px ${spacing.lg}px;
 `;
-
-// src/QuickFilterRenderers/DateQuickFilterRenderer.tsx
-function getPlacement2(currentSelectionType, position) {
-  if (currentSelectionType === "single") {
-    return "bottom-left";
-  }
-  if (position === "start") {
-    return "bottom-left";
-  }
-  return "bottom-right";
-}
-var OptionalDateTimeProvider2 = ({ timeZone, children }) => {
-  return timeZone ? /* @__PURE__ */ React76.createElement(DateTimeProvider, { timeZone }, children) : /* @__PURE__ */ React76.createElement(React76.Fragment, null, children);
+var getValueLabel = (isValueEmpty, value, placeholder, filterName) => {
+  const prefixLabel = isValueEmpty ? placeholder || filterName : filterName;
+  const valueLabel = value ? `${prefixLabel ? ": " : ""}${value}` : "";
+  return `${prefixLabel}${valueLabel}`;
 };
-var DateFilterSelect2 = React76.forwardRef(
-  ({
-    afterHide,
-    selectionType = "either",
-    headerName,
-    disabled,
-    onChange,
-    position,
-    selectedValue,
-    setSelectionType = () => {
-    }
-  }, ref) => {
-    const dateTime = useDateTime();
-    const { start, end } = selectedValue;
-    const selectedDate = (position === "start" ? start : end) ?? void 0;
-    const [displayed, setDisplayed2] = React76.useState(
-      // @ts-ignore
-      selectedDate || dateTime.newDate()
-    );
-    React76.useEffect(() => {
-      if (isDate(start) && !isDate(end) && position === "end") {
-        setDisplayed2(start);
-      }
-      if (!isDate(start) && isDate(end) && position === "start") {
-        setDisplayed2(end);
-      }
-    }, [position, selectedValue]);
-    function onClear() {
-      onChange(null, position);
-    }
-    const clearRef = React76.useRef(null);
-    const monthRef = React76.useRef(null);
-    const yearRef = React76.useRef(null);
-    const overlay = /* @__PURE__ */ React76.createElement(
-      DateFilterOverlay,
-      {
-        displayDate: displayed,
-        selectionType,
-        monthRef,
-        onSelect: (date) => {
-          onChange(date, position);
-        },
-        position,
-        selectedValue,
-        setDisplayDate: setDisplayed2,
-        setSelectionType,
-        yearRef
-      }
-    );
-    return /* @__PURE__ */ React76.createElement(
-      OverlayTrigger,
-      {
-        afterHide,
-        autoFocus: true,
-        beforeShow: (e) => {
-          if (isEventSource(clearRef, e)) {
-            return false;
-          }
-          return true;
-        },
-        clickOutsideIgnoreRefs: [monthRef, yearRef],
-        overlay,
-        placement: getPlacement2(selectionType, position),
-        ref,
-        restoreFocusOnHide: true,
-        role: "dialog"
-      },
-      /* @__PURE__ */ React76.createElement(
-        DateQuickFilterLabel,
-        {
-          headerName,
-          onClear,
-          value: selectedDate,
-          disabled
+var getSuperSelectFilterPreset = (columnDefinition) => {
+  const filterName = columnDefinition.headerName;
+  const getValueLabel_ = typeof columnDefinition.filterProps?.getFilterTokenText === "function" ? (value) => {
+    return columnDefinition.filterProps?.getFilterTokenText?.({
+      headerName: columnDefinition.headerName,
+      value: Array.isArray(value) ? value : [value]
+    });
+  } : void 0;
+  return {
+    components: {
+      Label: React76.forwardRef(() => {
+        const ctx = UNSAFE_useSuperSelectContext();
+        const isValueEmpty = ["", null, void 0].includes(
+          ctx.state.value
+        );
+        return /* @__PURE__ */ React76.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
+          isValueEmpty,
+          ctx.state.selectedLabel,
+          ctx.config.placeholder,
+          filterName
+        ));
+      }),
+      TriggerContainer: React76.forwardRef((props, ref) => {
+        const ctx = UNSAFE_useSuperSelectContext();
+        if (!Array.isArray(ctx.state.value)) {
+          return /* @__PURE__ */ React76.createElement(
+            UNSAFE_StyledSuperSelectTrigger,
+            {
+              $block: ctx.config.block,
+              ...props,
+              ref
+            }
+          );
+        }
+        return /* @__PURE__ */ React76.createElement(
+          Popover,
+          {
+            placement: "top",
+            trigger: ctx.state.value.length > 1 ? "hover" : "none",
+            overlay: /* @__PURE__ */ React76.createElement(StyledFilterPresetPopoverContent, null, /* @__PURE__ */ React76.createElement(Typography, null, ctx.state.value.map((v) => {
+              const option = ctx.state.options.find(
+                (option2) => ctx.option.value(option2) === v
+              );
+              return option ? ctx.option.label(option) : "";
+            }).join(", ")))
+          },
+          /* @__PURE__ */ React76.createElement(
+            UNSAFE_StyledSuperSelectTrigger,
+            {
+              $block: ctx.config.block,
+              ...props,
+              ref
+            }
+          )
+        );
+      }),
+      MultiValueContainer: () => {
+        const ctx = UNSAFE_useSuperSelectContext();
+        if (Array.isArray(ctx.state.value)) {
+          const isValueEmpty = !ctx.state.value.length;
+          const value = ctx.state.value.length > 1 ? `(${ctx.state.value.length})` : ctx.state.value.length === 1 ? `${ctx.state.selectedLabel}` : "";
+          return /* @__PURE__ */ React76.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
+            isValueEmpty,
+            value,
+            ctx.config.placeholder,
+            filterName
+          ));
         }
-      )
-    );
-  }
-);
-function DateFilter3({
-  // TODO: talk to design about potential loading UX for this.
-  // core DateSelect doesn't have it
-  // loading,
-  headerName,
-  onChange,
-  selectionType = "either",
-  value,
-  disabled,
-  ...props
-}) {
-  const [selectedValue, setSelectedValue] = React76.useState({
-    type: selectionType === "either" ? "range" : selectionType
-  });
-  React76.useEffect(() => {
-    const parsedValue = value.map((date) => {
-      if (isDate(date)) {
-        return date;
+        return /* @__PURE__ */ React76.createElement("div", null, "Value is not an array");
       }
-      return parseISO(String(date));
-    });
-    const type = isSameDay(parsedValue[0], parsedValue[1]) ? "single" : "range";
-    setSelectedValue({ type, start: parsedValue[0], end: parsedValue[1] });
-  }, [value]);
-  const dateRangeEndDateRef = React76.useRef(null);
-  function dateFilterOnChange(date, position) {
-    const newValue = getValueFromSelection(selectedValue, date, position);
-    setSelectedValue(newValue);
-    if (isValidDateSelection(newValue)) {
-      onChange(
-        newValue.start || newValue.end ? [
-          newValue.start,
-          newValue.type === "single" ? newValue.start : newValue.end
-        ] : []
-      );
-    }
-  }
-  const onSelectionTypeChange = React76.useCallback(
-    (newSelectionType) => {
-      setSelectedValue({ type: newSelectionType });
     },
-    [setSelectedValue]
-  );
-  function dateRangeAfterHide() {
-    if (selectedValue.type === "range" && isDate(selectedValue.start) && !isDate(selectedValue.end)) {
-      dateRangeEndDateRef.current?.click();
-    }
-    return true;
+    selectionStyle: "highlight"
+  };
+};
+var StyledSuperSelectWrapper = styled3.div`
+  ${UNSAFE_StyledSuperSelectTrigger} {
+    width: auto;
   }
-  return /* @__PURE__ */ React76.createElement(FlexList, { space: "xs", "data-qa": props["data-qa"] }, /* @__PURE__ */ React76.createElement(
-    DateFilterSelect2,
-    {
-      afterHide: dateRangeAfterHide,
-      headerName,
-      onChange: dateFilterOnChange,
-      position: "start",
-      selectedValue,
-      selectionType,
-      setSelectionType: onSelectionTypeChange,
-      disabled
-    }
-  ), selectedValue.type === "range" && /* @__PURE__ */ React76.createElement(
-    DateFilterSelect2,
-    {
-      headerName,
-      onChange: dateFilterOnChange,
-      position: "end",
-      ref: dateRangeEndDateRef,
-      selectedValue,
-      selectionType,
-      setSelectionType: onSelectionTypeChange,
-      disabled
-    }
-  ));
+
+  ${({ $enabled }) => $enabled && css$1`
+      ${UNSAFE_StyledSuperSelectTrigger} {
+        max-width: 360px;
+        background: ${colors.blue96};
+        border-color: ${colors.blue96};
+        font-weight: ${typographyWeights.semibold};
+
+        &:hover {
+          background: ${colors.blue90};
+          border-color: ${colors.blue90};
+        }
+
+        ${UNSAFE_StyledSuperSelectLabel} {
+          color: ${colors.blue45};
+        }
+
+        ${StyledButton} {
+          color: ${colors.blue45};
+
+          &:hover {
+            background: white;
+          }
+        }
+
+        ${UNSAFE_StyledSuperSelectArrow} {
+          svg {
+            fill: ${colors.blue45};
+          }
+        }
+      }
+    `}
+`;
+
+// src/QuickFilterRenderers/types.ts
+function isClientSideFilterProps(_value, isServerSideDataRequest) {
+  return !isServerSideDataRequest;
 }
-function ServerSideQuickDateFilterRenderer({
+
+// src/QuickFilterRenderers/MultiSelectQuickFilterRenderer.tsx
+var ClientSideMultiSelectQuickFilter = ({
+  filter,
   columnDefinition,
+  onChange,
+  onRemove,
+  overlayMatchesTriggerWidth,
   disabled
-}) {
-  const { onChange, value = [] } = useServerSideFilter({
-    columnDefinition
-  });
-  const colDef = columnDefinition;
-  return /* @__PURE__ */ React76.createElement(OptionalDateTimeProvider2, { timeZone: colDef.timeZone }, /* @__PURE__ */ React76.createElement(
-    DateFilter3,
+}) => {
+  return /* @__PURE__ */ React76.createElement(StyledSuperSelectWrapper, { $enabled: Boolean(filter.filterValues?.length) }, /* @__PURE__ */ React76.createElement(
+    UNSAFE_SuperSelect,
     {
-      selectionType: colDef.filterProps?.selectionType ?? "either",
-      headerName: colDef.headerName,
+      overlayMatchesTriggerWidth,
+      value: filter.filterValues === null ? [] : filter.filterValues,
+      search: false,
+      multiple: true,
+      options: filter.options,
       disabled,
-      onChange: (selected) => {
-        onChange(
-          selected.map((date) => {
-            return date ? {
-              // future extensions can go here (month, day, year keys etc)
-              date
-            } : (
-              // TODO: refactor out date-specific getId stuff from useServerSideFilterStorage
-              date
-            );
-          })
-        );
+      getOptionValue: (option) => {
+        return getId(columnDefinition.filterProps?.getId, option);
       },
-      value: value.map((option) => option ? option.date : option)
+      getOptionLabel: (option) => {
+        return getLabel(columnDefinition.filterProps?.getLabel, option);
+      },
+      onChange: (values2) => {
+        if (Array.isArray(values2) && !values2.length) {
+          onRemove?.();
+          return;
+        }
+        onChange?.(values2);
+      },
+      ...getSuperSelectFilterPreset(columnDefinition)
     }
   ));
-}
-var QuickDateFilterRenderer = (props) => {
-  const { onServerSideDataRequest } = useInternalTableContext();
-  if (onServerSideDataRequest) {
-    return /* @__PURE__ */ React76.createElement(ServerSideQuickDateFilterRenderer, { ...props });
-  }
-  logger.error(
-    "Warning: Date Filters are currently only implemented for the serverside row model"
-  );
-  return null;
-};
-var dateInputLocales = {
-  "fr-CA": {
-    placeholders: { day: "jj", month: "mm", year: "aaaa" }
-  },
-  "fr-FR": {
-    placeholders: { day: "jj", month: "mm", year: "aaaa" }
-  },
-  es: {
-    placeholders: { day: "dd", month: "mm", year: "aaaa" }
-  },
-  "es-ES": {
-    placeholders: { day: "dd", month: "mm", year: "aaaa" }
-  },
-  pt: {
-    placeholders: { day: "dd", month: "mm", year: "aaaa" }
-  },
-  "is-IS": {
-    placeholders: { day: "dd", month: "mm", year: "\xE1\xE1\xE1\xE1" }
-  },
-  "de-DE": {
-    placeholders: { day: "tt", month: "MM", year: "jjjj" }
-  }
-};
-var DateQuickFilterLabel = React76.forwardRef(({ headerName, onClear, value, disabled }, ref) => {
-  const dateTime = useDateTime();
-  const i18n = useI18nContext();
-  const placeholders = dateInputLocales[i18n.locale]?.placeholders || {
-    day: "dd",
-    month: "mm",
-    year: "yyyy"
-  };
-  if (value !== void 0 && isDate(value)) {
-    return /* @__PURE__ */ React76.createElement(
-      QuickFilterLabel,
-      {
-        enabled: true,
-        disabled,
-        label: `${headerName}: ${dateTime.format(value, "numeric-date")}`,
-        onClear,
-        ref
-      }
-    );
-  }
-  return /* @__PURE__ */ React76.createElement(
-    QuickFilterLabel,
-    {
-      enabled: false,
-      disabled,
-      label: `${headerName}: ${getDatePlaceholder(i18n.locale, placeholders)}`,
-      ref
-    }
-  );
-});
-var DateQuickFilterRenderer_default = QuickDateFilterRenderer;
-var defaultGetId2 = (option) => option?.id;
-var defaultGetLabel2 = (option) => {
-  return option?.label ?? option?.name ?? option;
 };
-var useSuperSelectOptionAsValueWorkaround = ({
+var useSuperSelectOptionAsValueWorkaround2 = ({
   originValue,
   originOptions,
-  getId: getId3 = defaultGetId2,
+  getId: getId3,
   loading
 }) => {
   const isValueFromOptions = React76.useRef(false);
   const getValueFromOptions = () => {
-    const valueIds = originValue.map(getId3);
+    const valueIds = originValue.map((option) => getId(getId3, option));
     isValueFromOptions.current = true;
-    return originOptions.filter((option) => valueIds.includes(getId3(option)));
+    return originOptions.filter(
+      (option) => valueIds.includes(getId(getId3, option))
+    );
   };
   const hasOptions = originOptions.length > 0 && !loading;
   const hasValue = originValue?.length > 0;
@@ -83878,684 +83888,814 @@ var useSuperSelectOptionAsValueWorkaround = ({
     getOptionValue: (option) => option
   };
 };
-var LocationQuickFilterOverlay = React76.forwardRef(
-  ({
-    getId: getId3,
-    getLabel: getLabel3,
+var ServerSideMultiSelectQuickFilter = ({ columnDefinition, overlayMatchesTriggerWidth, disabled }) => {
+  const {
+    options: originOptions,
+    onClearFilter,
+    fieldName,
+    value: originValue = [],
+    onChange,
+    getOptions,
+    loading
+  } = useServerSideFilter({ columnDefinition });
+  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround2({
+    originOptions,
+    originValue,
     loading,
-    onSelect: _onSelect,
-    onSelectAll,
-    onSelectSublocations,
-    enableSublocations,
-    selectState,
-    options,
-    disabledOptions,
-    columnDefinition,
-    value
-  }, ref) => {
-    if (value && !Array.isArray(value)) {
-      logger.warn(
-        "a value was set that is not compatible with this LocationQuickFilterRenderer"
-      );
-      return null;
-    }
-    const [items, setItems] = React76.useState(options);
-    const [searching, setSearching] = React76.useState(false);
-    const menuRef = React76.useRef(null);
-    const { menuProps, menuNavigationTriggerProps } = UNSAFE_useMenuImperativeControlNavigation(menuRef);
-    const I18n = useI18nContext();
-    const selectAllOption = {
-      label: I18n.t("dataTable.filters.locationFilter.selectAll"),
-      id: "select_all"
-    };
-    const includeSublocationOption = {
-      label: I18n.t("dataTable.filters.locationFilter.includeSublocations"),
-      id: "include_sublocations"
-    };
-    const onSelect = (selection) => {
-      if (selection.item.id === selectAllOption.id) {
-        return onSelectAll();
-      }
-      if (selection.item.id === includeSublocationOption.id) {
-        _onSelect(selection);
-        return onSelectSublocations();
-      }
-      return _onSelect(selection);
-    };
-    function defaultOnSearch(e) {
-      if (e.target.value === "") {
-        setSearching(false);
-        setItems(options);
-      } else {
-        setSearching(true);
-        setItems(
-          options.filter(
-            (item) => getLabel3(item).toLowerCase().includes(e.target.value.toLowerCase())
-          )
-        );
-      }
+    getId: columnDefinition.filterProps?.getId
+  });
+  return /* @__PURE__ */ React76.createElement(StyledSuperSelectWrapper, { $enabled: Boolean(value?.length) }, /* @__PURE__ */ React76.createElement(
+    UNSAFE_SuperSelect,
+    {
+      overlayMatchesTriggerWidth,
+      loading,
+      value: value === null ? [] : value,
+      search: false,
+      getOptionLabel: (option) => {
+        return getLabel(columnDefinition.filterProps?.getLabel, option);
+      },
+      getOptionValue,
+      multiple: true,
+      options,
+      disabled,
+      onChange: (values2) => {
+        if (Array.isArray(values2) && !values2.length) {
+          onClearFilter?.(fieldName);
+          getOptions();
+          return;
+        }
+        onChange(values2);
+      },
+      onOpenChange: (open) => {
+        if (open && !originOptions.length) {
+          getOptions();
+        }
+      },
+      ...getSuperSelectFilterPreset(columnDefinition)
     }
-    const _onSearch = columnDefinition.filterProps.onSearch || defaultOnSearch;
-    React76.useEffect(() => {
-      menuRef.current?.highlightSuggested();
-    }, []);
-    return /* @__PURE__ */ React76.createElement(Card, { ref }, /* @__PURE__ */ React76.createElement(
-      UNSAFE_Menu,
+  ));
+};
+var MultiSelectQuickFilterRenderer = (props) => {
+  const { onServerSideDataRequest } = useInternalTableContext();
+  if (!isClientSideFilterProps(props, !!onServerSideDataRequest)) {
+    return /* @__PURE__ */ React76.createElement(ServerSideMultiSelectQuickFilter, { ...props });
+  }
+  return /* @__PURE__ */ React76.createElement(ClientSideMultiSelectQuickFilter, { ...props });
+};
+var MultiSelectQuickFilterRenderer_default = MultiSelectQuickFilterRenderer;
+function getFilterTokenText(columnDefinition, filterValue) {
+  if (columnDefinition?.filterProps?.getFilterTokenText) {
+    return columnDefinition?.filterProps?.getFilterTokenText?.({
+      headerName: columnDefinition?.headerName || "",
+      value: filterValue
+    });
+  }
+  if (columnDefinition.filterRenderer === DateFilterRenderer_default) {
+    return /* @__PURE__ */ React76.createElement(
+      OptionalDateTimeProvider,
       {
-        ...menuProps,
-        multiple: true,
-        role: "listbox",
-        ref: menuRef,
-        onSelect,
-        className: locationFilterStyles_default.locationFilterMenu
+        timeZone: columnDefinition.timeZone
       },
       /* @__PURE__ */ React76.createElement(
-        UNSAFE_Menu.Search,
+        DateFilterTokenText,
         {
-          ...menuNavigationTriggerProps,
-          onChange: _onSearch
+          headerName: columnDefinition.headerName,
+          value: filterValue
         }
-      ),
-      /* @__PURE__ */ React76.createElement(UNSAFE_Menu.Options, null, !searching && /* @__PURE__ */ React76.createElement(
-        Box,
-        {
-          className: locationFilterStyles_default.controlsContainer,
-          ...UNSAFE_menuItemsWrapperAttribute
-        },
-        /* @__PURE__ */ React76.createElement(
-          UNSAFE_Menu.CheckboxItem,
-          {
-            key: getId3(includeSublocationOption),
-            item: includeSublocationOption,
-            selected: enableSublocations
-          },
-          getLabel3(includeSublocationOption)
-        ),
-        /* @__PURE__ */ React76.createElement(
-          UNSAFE_Menu.CheckboxItem,
-          {
-            key: getId3(selectAllOption),
-            item: selectAllOption,
-            selected: selectState === "all",
-            indeterminate: selectState === "partial"
-          },
-          getLabel3(selectAllOption)
-        )
-      ), !loading && items.map((item, i) => {
-        return /* @__PURE__ */ React76.createElement(
-          UNSAFE_Menu.CheckboxItem,
-          {
-            key: getId3(item),
-            item,
-            selected: value.map(({ id }) => id).includes(getId3(item)) || disabledOptions.map(({ id }) => id).includes(getId3(item)),
-            suggested: i === 0,
-            disabled: disabledOptions.map(({ id }) => id).includes(getId3(item))
-          },
-          getLabel3(item)
-        );
-      })),
-      loading && /* @__PURE__ */ React76.createElement(UNSAFE_Menu.Footer, null, /* @__PURE__ */ React76.createElement(Flex, { justifyContent: "center" }, /* @__PURE__ */ React76.createElement(Spinner$1, { size: "sm" })))
-    ));
+      )
+    );
   }
-);
-var LocationQuickFilterRenderer = ({
+  if (columnDefinition.filterRenderer === NumberFilterRenderer) {
+    return columnDefinition?.headerName;
+  }
+  if (Array.isArray(filterValue)) {
+    if (filterValue.length === 0) {
+      return columnDefinition?.headerName;
+    }
+    if (filterValue.length === 1) {
+      return `${columnDefinition?.headerName}: ${getLabel(
+        columnDefinition.filterProps?.getLabel,
+        filterValue[0]
+      )}`;
+    }
+    return `${columnDefinition?.headerName}: (${filterValue.length})`;
+  }
+  return columnDefinition?.headerName;
+}
+var ensureArray = (input) => {
+  if (input === null) {
+    return [];
+  }
+  return Array.isArray(input) ? input : [input];
+};
+
+// src/QuickFilterRenderers/SingleSelectQuickFilterRenderer.tsx
+var ClientSideSingleSelectQuickFilter = ({
+  filter,
   columnDefinition,
+  onChange,
+  onRemove,
+  overlayMatchesTriggerWidth,
   disabled
 }) => {
+  return /* @__PURE__ */ React76.createElement(
+    StyledSuperSelectWrapper,
+    {
+      $enabled: Boolean(filter.filterValues?.length),
+      "data-test-id": "client-side-single-select-quick-filter"
+    },
+    /* @__PURE__ */ React76.createElement(
+      UNSAFE_SuperSelect,
+      {
+        overlayMatchesTriggerWidth,
+        value: filter.filterValues ?? [],
+        search: false,
+        multiple: false,
+        options: filter.options,
+        disabled,
+        getOptionValue: (option) => getId(columnDefinition.filterProps?.getId, option),
+        getOptionLabel: (option) => getLabel(columnDefinition.filterProps?.getLabel, option),
+        onChange: (values2) => {
+          const valuesArray = ensureArray(values2);
+          if (!valuesArray.length) {
+            onRemove?.();
+            return;
+          }
+          onChange?.(valuesArray);
+        },
+        ...getSuperSelectFilterPreset(columnDefinition)
+      }
+    )
+  );
+};
+var useSuperSelectOptionAsValueWorkaround3 = ({
+  originValue,
+  originOptions,
+  getId: getId3,
+  loading
+}) => {
+  const isValueFromOptions = React76.useRef(false);
+  const getValueFromOptions = () => {
+    const valueIds = originValue.map((option) => getId(getId3, option));
+    isValueFromOptions.current = true;
+    return originOptions.filter(
+      (option) => valueIds.includes(getId(getId3, option))
+    );
+  };
+  const hasOptions = originOptions.length > 0 && !loading;
+  const hasValue = originValue?.length > 0;
+  const options = !hasOptions && hasValue ? originValue : originOptions;
+  const value = !hasOptions ? originValue : isValueFromOptions.current ? originValue : getValueFromOptions();
+  return {
+    options,
+    value,
+    getOptionValue: (option) => option
+  };
+};
+var ServerSideSingleSelectQuickFilter = ({ columnDefinition, overlayMatchesTriggerWidth, disabled }) => {
   const {
     options: originOptions,
+    onClearFilter,
+    fieldName,
     value: originValue = [],
     onChange,
     getOptions,
     loading
   } = useServerSideFilter({ columnDefinition });
-  const { options, value } = useSuperSelectOptionAsValueWorkaround({
+  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround3({
     originOptions,
     originValue,
     loading,
     getId: columnDefinition.filterProps?.getId
   });
-  const I18n = useI18nContext();
-  const getId3 = columnDefinition.filterProps?.getId || defaultGetId2;
-  const getLabel3 = columnDefinition.filterProps?.getLabel || defaultGetLabel2;
-  const determineSelectedState = (selection) => {
-    if (options.length === selection.length) {
-      return "all";
-    }
-    if (selection.length && (options.length > selection.length || options.length < selection.length)) {
-      return "partial";
-    }
-    if (selection.length === 0) {
-      return "none";
-    }
-    return "none";
-  };
-  const ids = React76.useMemo(() => value.map(({ id }) => id), [value]);
-  const [selectedValueIds, setSelectedValueIds] = React76.useState(ids);
-  const [selectState, setSelectState] = React76.useState(
-    determineSelectedState(value)
-  );
-  const [disabledValues, setDisabledValues] = React76.useState([]);
-  const [enableSublocations, setEnableSublocations] = React76.useState(false);
-  const onSelectSublocations = React76.useCallback(() => {
-    if (enableSublocations) {
-      setDisabledValues([]);
-    } else {
-      const newDisabledValues = [];
-      value.forEach((location) => {
-        newDisabledValues.push(...findSublocations(location));
-      });
-      const uniqDisabledValues = uniqBy(prop("id"), newDisabledValues).filter(
-        ({ id }) => !selectedValueIds.includes(id)
-      );
-      setDisabledValues(uniqDisabledValues);
-    }
-    setEnableSublocations(!enableSublocations);
-  }, [enableSublocations, value, selectedValueIds, options]);
-  const onSelectAll = React76.useCallback(() => {
-    if (selectState === "none" || selectState === "partial") {
-      setSelectState("all");
-      setSelectedValueIds(options.map(({ id }) => id));
-      onChange(options);
-    }
-    if (selectState === "all") {
-      setSelectState("none");
-      setSelectedValueIds([]);
-      onChange([]);
+  const hasFetchedOptions = React76.useRef(false);
+  React76.useEffect(() => {
+    if (!hasFetchedOptions.current && !originOptions.length) {
+      getOptions();
+      hasFetchedOptions.current = true;
     }
-  }, [options, selectState, selectedValueIds]);
-  const onSelect = (selection) => {
-    if (selection.item.id === "select_all") {
+  }, [getOptions, originOptions.length]);
+  const handleOnChange = (values2) => {
+    const selectedValues = ensureArray(values2);
+    if (!selectedValues.length) {
+      onClearFilter?.(fieldName);
+      getOptions();
       return;
     }
-    if (selection.item.id === "include_sublocations") {
-      return onChange(
-        value.map((item) => ({
-          ...item,
-          sublocations: enableSublocations ? [] : findSublocations(item)
-        }))
-      );
-    }
-    let newSelections = [];
-    if (selectedValueIds.includes(getId3(selection.item))) {
-      newSelections = removeSelections(selection.item, value);
-    } else {
-      newSelections = [...value, selection.item];
-      const sublocationsToDisable = handleSelectSublocations(selection.item);
-      const newDisabledValues = [
-        ...disabledValues,
-        ...sublocationsToDisable.filter(
-          ({ id }) => !selectedValueIds.includes(id)
-        )
-      ];
-      setDisabledValues(newDisabledValues);
-    }
-    setSelectState(determineSelectedState(newSelections));
-    setSelectedValueIds(newSelections.map(({ id }) => id));
-    onChange(
-      newSelections.map((item) => ({
-        ...item,
-        sublocations: handleSelectSublocations(item)
-      }))
-    );
-  };
-  const findSublocations = (selected) => {
-    return options.filter((option) => {
-      return startsWith(
-        `${getLabel3(selected).toLowerCase()} > `,
-        getLabel3(option).toLowerCase()
-      );
-    });
+    onChange(selectedValues);
   };
-  const handleSelectSublocations = (selected) => {
-    if (enableSublocations) {
-      const filteredOptions = findSublocations(selected);
-      return filteredOptions;
-    } else {
-      return [];
+  const handleOnOpenChange = (open) => {
+    if (open && !originOptions.length) {
+      getOptions();
     }
   };
-  const removeSelections = React76.useCallback(
-    function(selection, selected) {
-      const sublocations = handleSelectSublocations(selection);
-      const disabledValueIds = disabledValues.map(({ id }) => id);
-      const sublocationsToRemoveFromDisabledIds = sublocations.filter(({ id }) => disabledValueIds.includes(id)).map(({ id }) => id);
-      setDisabledValues(
-        disabledValues.filter(
-          ({ id }) => !sublocationsToRemoveFromDisabledIds.includes(id)
-        )
-      );
-      return selected.filter((item) => getId3(item) !== getId3(selection));
+  return /* @__PURE__ */ React76.createElement(
+    StyledSuperSelectWrapper,
+    {
+      $enabled: Boolean(value?.length),
+      "data-test-id": "server-side-single-select-quick-filter"
     },
-    [enableSublocations, disabledValues]
+    /* @__PURE__ */ React76.createElement(
+      UNSAFE_SuperSelect,
+      {
+        overlayMatchesTriggerWidth,
+        loading,
+        value: value ?? [],
+        search: false,
+        disabled,
+        getOptionLabel: (option) => getLabel(columnDefinition.filterProps?.getLabel, option),
+        getOptionValue,
+        multiple: false,
+        options,
+        onChange: handleOnChange,
+        onOpenChange: handleOnOpenChange,
+        ...getSuperSelectFilterPreset(columnDefinition)
+      }
+    )
   );
-  React76.useEffect(() => {
-    setSelectState(determineSelectedState(value));
-  }, [value]);
-  const overlay = /* @__PURE__ */ React76.createElement(
-    LocationQuickFilterOverlay,
+};
+var SingleSelectQuickFilterRenderer = (props) => {
+  const { onServerSideDataRequest } = useInternalTableContext();
+  if (!isClientSideFilterProps(props, !!onServerSideDataRequest)) {
+    return /* @__PURE__ */ React76.createElement(ServerSideSingleSelectQuickFilter, { ...props });
+  }
+  return /* @__PURE__ */ React76.createElement(ClientSideSingleSelectQuickFilter, { ...props });
+};
+var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
+var FiltersPanelToggleButton = ({ hasSelectedFilters, hasDefinedFilters }) => {
+  const I18n = useI18nContext();
+  const { contextPanel } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  if (!hasDefinedFilters) {
+    return null;
+  }
+  return /* @__PURE__ */ React76.createElement(
+    EmptyResultsControlTooltip,
     {
-      columnDefinition,
-      enableSublocations,
-      onSelectAll,
-      onSelectSublocations,
-      selectState,
-      value,
-      options,
-      disabledOptions: disabledValues,
-      getId: getId3,
-      getLabel: getLabel3,
-      loading,
-      onSelect,
-      selectedValueIds
+      featureI18nKey: "featureFilter",
+      enabled: hasNoContent
+    },
+    /* @__PURE__ */ React76.createElement(
+      ToggleButton,
+      {
+        "data-qa": "data-table-show-filters-button",
+        disabled: hasNoContent,
+        icon: /* @__PURE__ */ React76.createElement(FilterIcon, null),
+        onClick: () => {
+          if (contextPanel.content === "filters") {
+            contextPanel.hide();
+          } else {
+            contextPanel.show("filters");
+          }
+        },
+        selected: contextPanel.content === "filters"
+      },
+      hasSelectedFilters ? I18n.t("dataTable.filters.moreFilters") : I18n.t("dataTable.filters.filters")
+    )
+  );
+};
+var ServerSideFiltersPanelToggleButton = () => {
+  const {
+    filterStorage: { hasDefinedFilters, hasSelectedFilters }
+  } = useInternalTableContext();
+  return /* @__PURE__ */ React76.createElement(
+    FiltersPanelToggleButton,
+    {
+      hasDefinedFilters,
+      hasSelectedFilters
     }
   );
-  const triggerLabel = value.length ? value.length === 1 ? `: ${value[0].label}` : `: (${value.length})` : "";
+};
+var ClientSideFiltersPanelToggleButton = () => {
+  const { filterState } = useInternalTableContext();
+  const activeFilters = React76.useMemo(() => {
+    return filterState.allAvailableFilters.filter(({ instance }) => {
+      return instance.isFilterActive();
+    });
+  }, [filterState.allAvailableFilters]);
   return /* @__PURE__ */ React76.createElement(
-    OverlayTrigger,
+    FiltersPanelToggleButton,
     {
-      overlay,
-      beforeShow: getOptions,
-      placement: "bottom-left"
+      hasDefinedFilters: filterState.allAvailableFilters.length > 0,
+      hasSelectedFilters: activeFilters.length > 0
+    }
+  );
+};
+
+// src/QuickControls/QuickFilters.tsx
+var defaultQuickFilterRenderers = {
+  MultiSelectFilterRenderer: MultiSelectQuickFilterRenderer_default,
+  DateFilterRenderer: DateQuickFilterRenderer_default,
+  LocationFilterRenderer: LocationQuickFilterRenderer_default,
+  SingleSelectFilterRenderer: SingleSelectQuickFilterRenderer_default
+};
+function getQuickFilterRenderer(colDef) {
+  if (!colDef)
+    return null;
+  if (colDef.quickFilterRenderer) {
+    return colDef.quickFilterRenderer;
+  }
+  const filterRendererName = colDef.filterRenderer?.displayName;
+  if (filterRendererName) {
+    return defaultQuickFilterRenderers[filterRendererName] || null;
+  }
+  return null;
+}
+var FilterIcon = () => {
+  return /* @__PURE__ */ React76.createElement(
+    "svg",
+    {
+      focusable: false,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
     },
-    value.length ? /* @__PURE__ */ React76.createElement(
-      QuickFilterLabel,
-      {
-        enabled: true,
-        disabled,
-        label: `${I18n.t(
-          "dataTable.filters.locationFilter.locations"
-        )}${triggerLabel}`,
-        onClear: () => {
-          onChange([]);
-        },
-        block: true
-      }
-    ) : /* @__PURE__ */ React76.createElement(
-      QuickFilterLabel,
+    /* @__PURE__ */ React76.createElement(
+      "path",
       {
-        enabled: false,
-        disabled,
-        label: `${I18n.t(
-          "dataTable.filters.locationFilter.locations"
-        )}${triggerLabel}`,
-        block: true
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3 5V7H17V5H3ZM8 15H12V13H8V15ZM15 11H5V9H15V11Z",
+        fill: "currentColor"
       }
     )
   );
 };
-var LocationQuickFilterRenderer_default = LocationQuickFilterRenderer;
-var StyledFilterPresetPopoverContent = styled4(Popover.Content)`
-  padding: ${spacing.sm}px ${spacing.lg}px;
+var StyledFilterTokenWrapper = styled3.div`
+  ${UNSAFE_StyledFilterTokenLabel} {
+    font-weight: ${typographyWeights.semibold};
+  }
 `;
-var getValueLabel = (isValueEmpty, value, placeholder, filterName) => {
-  const prefixLabel = isValueEmpty ? placeholder || filterName : filterName;
-  const valueLabel = value ? `${prefixLabel ? ": " : ""}${value}` : "";
-  return `${prefixLabel}${valueLabel}`;
-};
-var getSuperSelectFilterPreset = (columnDefinition) => {
-  const filterName = columnDefinition.headerName;
-  const getValueLabel_ = typeof columnDefinition.filterProps?.getFilterTokenText === "function" ? (value) => {
-    return columnDefinition.filterProps?.getFilterTokenText?.({
-      headerName: columnDefinition.headerName,
-      value: Array.isArray(value) ? value : [value]
-    });
-  } : void 0;
-  return {
-    components: {
-      Label: React76.forwardRef(() => {
-        const ctx = UNSAFE_useSuperSelectContext();
-        const isValueEmpty = ["", null, void 0].includes(
-          ctx.state.value
-        );
-        return /* @__PURE__ */ React76.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
-          isValueEmpty,
-          ctx.state.selectedLabel,
-          ctx.config.placeholder,
-          filterName
-        ));
-      }),
-      TriggerContainer: React76.forwardRef((props, ref) => {
-        const ctx = UNSAFE_useSuperSelectContext();
-        if (!Array.isArray(ctx.state.value)) {
-          return /* @__PURE__ */ React76.createElement(
-            UNSAFE_StyledSuperSelectTrigger,
-            {
-              $block: ctx.config.block,
-              ...props,
-              ref
-            }
-          );
+var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
+  const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  const { quickFilters, tokens } = React76.useMemo(() => {
+    return filterState.allAvailableFilters.reduce(
+      (acc, filter) => {
+        const colDef = getColumnDefinition(filter.field);
+        if (!colDef) {
+          return acc;
         }
-        return /* @__PURE__ */ React76.createElement(
-          Popover,
-          {
-            placement: "top",
-            trigger: ctx.state.value.length > 1 ? "hover" : "none",
-            overlay: /* @__PURE__ */ React76.createElement(StyledFilterPresetPopoverContent, null, /* @__PURE__ */ React76.createElement(Typography, null, ctx.state.value.map((v) => {
-              const option = ctx.state.options.find(
-                (option2) => ctx.option.value(option2) === v
-              );
-              return option ? ctx.option.label(option) : "";
-            }).join(", ")))
-          },
-          /* @__PURE__ */ React76.createElement(
-            UNSAFE_StyledSuperSelectTrigger,
-            {
-              $block: ctx.config.block,
-              ...props,
-              ref
-            }
-          )
-        );
-      }),
-      MultiValueContainer: () => {
-        const ctx = UNSAFE_useSuperSelectContext();
-        if (Array.isArray(ctx.state.value)) {
-          const isValueEmpty = !ctx.state.value.length;
-          const value = ctx.state.value.length > 1 ? `(${ctx.state.value.length})` : ctx.state.value.length === 1 ? `${ctx.state.selectedLabel}` : "";
-          return /* @__PURE__ */ React76.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
-            isValueEmpty,
-            value,
-            ctx.config.placeholder,
-            filterName
-          ));
+        const isInteractive = colDef?.filterProps?.isInteractiveFilterToken === true;
+        const hasQuickFilterRenderer = !!colDef?.quickFilterRenderer;
+        const filterIsActive = filter.instance.isFilterActive();
+        if (hasQuickFilterRenderer || filterIsActive && isInteractive && getQuickFilterRenderer(colDef) !== null) {
+          return { ...acc, quickFilters: [...acc.quickFilters, filter] };
+        } else if (filterIsActive) {
+          return { ...acc, tokens: [...acc.tokens, filter] };
         }
-        return /* @__PURE__ */ React76.createElement("div", null, "Value is not an array");
+        return acc;
+      },
+      {
+        quickFilters: [],
+        tokens: []
       }
+    );
+  }, [filterState.allAvailableFilters, getColumnDefinition]);
+  const isEmpty2 = quickFilters.length === 0 && tokens.length === 0;
+  return isEmpty2 ? null : /* @__PURE__ */ React76.createElement(
+    FlexList,
+    {
+      padding: "xs none",
+      size: "none",
+      alignItems: "center",
+      wrap: "wrap",
+      gap: "sm"
     },
-    selectionStyle: "highlight"
-  };
-};
-var StyledSuperSelectWrapper = styled4.div`
-  ${UNSAFE_StyledSuperSelectTrigger} {
-    width: auto;
-  }
-
-  ${({ $enabled }) => $enabled && css$1`
-      ${UNSAFE_StyledSuperSelectTrigger} {
-        max-width: 360px;
-        background: ${colors.blue96};
-        border-color: ${colors.blue96};
-        font-weight: ${typographyWeights.semibold};
-
-        &:hover {
-          background: ${colors.blue90};
-          border-color: ${colors.blue90};
+    quickFilters.map((filter) => {
+      const colDef = getColumnDefinition(filter.field);
+      const QuickFilter = getQuickFilterRenderer(colDef);
+      if (!colDef || !QuickFilter) {
+        return null;
+      }
+      return /* @__PURE__ */ React76.createElement(
+        EmptyResultsControlTooltip,
+        {
+          featureI18nKey: "featureQuickFilter",
+          enabled: hasNoContent
+        },
+        /* @__PURE__ */ React76.createElement(
+          QuickFilter,
+          {
+            key: filter.field,
+            filter,
+            columnDefinition: colDef,
+            disabled: hasNoContent,
+            onChange: (value) => tableRef?.current?.applyListFilter(filter.field, value),
+            onRemove: () => tableRef?.current?.removeFilter(filter.field),
+            overlayMatchesTriggerWidth
+          }
+        )
+      );
+    }),
+    tokens.map((filter) => {
+      const colDef = getColumnDefinition(filter.field);
+      if (!colDef) {
+        return null;
+      }
+      return /* @__PURE__ */ React76.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken.Label, null, getFilterTokenText(colDef, filter.filterValues)), /* @__PURE__ */ React76.createElement(
+        UNSAFE_FilterToken.Remove,
+        {
+          onClick: () => tableRef?.current?.removeFilter(filter.field)
         }
-
-        ${UNSAFE_StyledSuperSelectLabel} {
-          color: ${colors.blue45};
+      )));
+    })
+  );
+};
+var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
+  const {
+    filterStorage: {
+      hasDefinedFilters,
+      onClearFilter,
+      possibleFilters,
+      selectedFilters,
+      getListFilter
+    },
+    getColumnDefinition
+  } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  const { quickFilterNames, tokenNames } = React76.useMemo(() => {
+    const appliedFilterNames = Object.keys(selectedFilters);
+    const isActiveFilter = (filterName) => appliedFilterNames.includes(filterName);
+    return possibleFilters.reduce(
+      (acc, filterName) => {
+        const colDef = getColumnDefinition(filterName);
+        if (!colDef) {
+          return acc;
         }
-
-        ${StyledButton} {
-          color: ${colors.blue45};
-
-          &:hover {
-            background: white;
-          }
+        const isInteractive = colDef?.filterProps?.isInteractiveFilterToken === true;
+        const hasQuickFilterRenderer = !!colDef?.quickFilterRenderer;
+        const filterIsActive = isActiveFilter(filterName);
+        if (hasQuickFilterRenderer || filterIsActive && isInteractive && getQuickFilterRenderer(colDef) !== null) {
+          return {
+            ...acc,
+            quickFilterNames: [...acc.quickFilterNames, filterName]
+          };
+        } else if (filterIsActive) {
+          return {
+            ...acc,
+            tokenNames: [...acc.tokenNames, filterName]
+          };
         }
-
-        ${UNSAFE_StyledSuperSelectArrow} {
-          svg {
-            fill: ${colors.blue45};
+        return acc;
+      },
+      {
+        quickFilterNames: [],
+        tokenNames: []
+      }
+    );
+  }, [possibleFilters, selectedFilters, getColumnDefinition]);
+  if (!hasDefinedFilters) {
+    return null;
+  }
+  const isEmpty2 = quickFilterNames.length === 0 && tokenNames.length === 0;
+  return isEmpty2 ? null : /* @__PURE__ */ React76.createElement(
+    FlexList,
+    {
+      padding: "xs none",
+      size: "none",
+      alignItems: "center",
+      wrap: "wrap",
+      gap: "sm",
+      "data-qa": "data-table-quick-filters"
+    },
+    quickFilterNames.map((fieldName) => {
+      const colDef = getColumnDefinition(fieldName);
+      const QuickFilter = getQuickFilterRenderer(colDef);
+      if (!colDef || !QuickFilter) {
+        return null;
+      }
+      return /* @__PURE__ */ React76.createElement(
+        EmptyResultsControlTooltip,
+        {
+          featureI18nKey: "featureQuickFilter",
+          enabled: hasNoContent
+        },
+        /* @__PURE__ */ React76.createElement(
+          QuickFilter,
+          {
+            key: fieldName,
+            columnDefinition: colDef,
+            disabled: hasNoContent,
+            overlayMatchesTriggerWidth
           }
-        }
+        )
+      );
+    }),
+    tokenNames.map((fieldName) => {
+      const colDef = getColumnDefinition(fieldName);
+      if (!colDef) {
+        return null;
       }
-    `}
-`;
-
-// src/QuickFilterRenderers/types.ts
-function isClientSideFilterProps(_value, isServerSideDataRequest) {
-  return !isServerSideDataRequest;
-}
-
-// src/QuickFilterRenderers/MultiSelectQuickFilterRenderer.tsx
-var ClientSideMultiSelectQuickFilter = ({
-  filter,
-  columnDefinition,
-  onChange,
-  onRemove,
-  overlayMatchesTriggerWidth,
-  disabled
-}) => {
-  return /* @__PURE__ */ React76.createElement(StyledSuperSelectWrapper, { $enabled: Boolean(filter.filterValues?.length) }, /* @__PURE__ */ React76.createElement(
-    UNSAFE_SuperSelect,
-    {
-      overlayMatchesTriggerWidth,
-      value: filter.filterValues === null ? [] : filter.filterValues,
-      search: false,
-      multiple: true,
-      options: filter.options,
-      disabled,
-      getOptionValue: (option) => {
-        return getId(columnDefinition.filterProps?.getId, option);
-      },
-      getOptionLabel: (option) => {
-        return getLabel(columnDefinition.filterProps?.getLabel, option);
-      },
-      onChange: (values2) => {
-        if (Array.isArray(values2) && !values2.length) {
-          onRemove?.();
-          return;
+      const filter = getListFilter(fieldName);
+      return /* @__PURE__ */ React76.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React76.createElement(UNSAFE_FilterToken.Label, null, getFilterTokenText(
+        colDef,
+        colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
+      )), /* @__PURE__ */ React76.createElement(
+        UNSAFE_FilterToken.Remove,
+        {
+          "data-qa": "data-table-quick-filter-remove-token",
+          onClick: () => onClearFilter(fieldName)
         }
-        onChange?.(values2);
-      },
-      ...getSuperSelectFilterPreset(columnDefinition)
-    }
-  ));
+      )));
+    })
+  );
 };
-var useSuperSelectOptionAsValueWorkaround2 = ({
-  originValue,
-  originOptions,
-  getId: getId3,
-  loading
-}) => {
-  const isValueFromOptions = React76.useRef(false);
-  const getValueFromOptions = () => {
-    const valueIds = originValue.map((option) => getId(getId3, option));
-    isValueFromOptions.current = true;
-    return originOptions.filter(
-      (option) => valueIds.includes(getId(getId3, option))
+var QuickFilters = ({ overlayMatchesTriggerWidth }) => {
+  const { onServerSideDataRequest } = useInternalTableContext();
+  if (onServerSideDataRequest) {
+    return /* @__PURE__ */ React76.createElement(
+      ServerSideQuickFilters,
+      {
+        overlayMatchesTriggerWidth
+      }
     );
-  };
-  const hasOptions = originOptions.length > 0 && !loading;
-  const hasValue = originValue?.length > 0;
-  const options = !hasOptions && hasValue ? originValue : originOptions;
-  const value = !hasOptions ? originValue : isValueFromOptions.current ? originValue : getValueFromOptions();
-  return {
-    options,
-    value,
-    getOptionValue: (option) => option
-  };
-};
-var ServerSideMultiSelectQuickFilter = ({ columnDefinition, overlayMatchesTriggerWidth, disabled }) => {
-  const {
-    options: originOptions,
-    onClearFilter,
-    fieldName,
-    value: originValue = [],
-    onChange,
-    getOptions,
-    loading
-  } = useServerSideFilter({ columnDefinition });
-  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround2({
-    originOptions,
-    originValue,
-    loading,
-    getId: columnDefinition.filterProps?.getId
-  });
-  return /* @__PURE__ */ React76.createElement(StyledSuperSelectWrapper, { $enabled: Boolean(value?.length) }, /* @__PURE__ */ React76.createElement(
-    UNSAFE_SuperSelect,
+  }
+  return /* @__PURE__ */ React76.createElement(
+    ClientSideQuickFilters,
     {
-      overlayMatchesTriggerWidth,
-      loading,
-      value: value === null ? [] : value,
-      search: false,
-      getOptionLabel: (option) => {
-        return getLabel(columnDefinition.filterProps?.getLabel, option);
-      },
-      getOptionValue,
-      multiple: true,
-      options,
-      disabled,
-      onChange: (values2) => {
-        if (Array.isArray(values2) && !values2.length) {
-          onClearFilter?.(fieldName);
-          getOptions();
-          return;
-        }
-        onChange(values2);
-      },
-      onOpenChange: (open) => {
-        if (open && !originOptions.length) {
-          getOptions();
-        }
-      },
-      ...getSuperSelectFilterPreset(columnDefinition)
+      overlayMatchesTriggerWidth
     }
-  ));
+  );
 };
-var MultiSelectQuickFilterRenderer = (props) => {
+var FiltersPanelButton = () => {
   const { onServerSideDataRequest } = useInternalTableContext();
-  if (!isClientSideFilterProps(props, !!onServerSideDataRequest)) {
-    return /* @__PURE__ */ React76.createElement(ServerSideMultiSelectQuickFilter, { ...props });
+  if (onServerSideDataRequest) {
+    return /* @__PURE__ */ React76.createElement(ServerSideFiltersPanelToggleButton, null);
   }
-  return /* @__PURE__ */ React76.createElement(ClientSideMultiSelectQuickFilter, { ...props });
+  return /* @__PURE__ */ React76.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var MultiSelectQuickFilterRenderer_default = MultiSelectQuickFilterRenderer;
-var ClientSideSingleSelectQuickFilter = ({
-  filter,
-  columnDefinition,
-  onChange,
-  onRemove,
-  overlayMatchesTriggerWidth,
-  disabled
-}) => {
+var RowGroupSelector = ({ localeText }) => {
+  const {
+    columnDefinitions: _columnDefinitions,
+    columnApi,
+    gridApi,
+    tableRef
+  } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  const [columnDefinitions, setColumnDefinitions] = React76.useState(_columnDefinitions);
+  const groupableColumns = React76.useMemo(
+    () => mapColumnsToOptions(
+      columnDefinitions.filter((column2) => column2.enableRowGroup)
+    ),
+    [columnDefinitions]
+  );
+  const groupedColumns = React76.useMemo(() => {
+    const rowGrouping = columnApi?.getRowGroupColumns() ?? [];
+    return rowGrouping.map((column2) => {
+      const colDef = column2.getColDef();
+      return transformToColumnDefinition(colDef);
+    });
+  }, [columnDefinitions]);
+  const selectedColumns = React76.useMemo(
+    () => mapColumnsToOptions(groupedColumns),
+    [groupedColumns]
+  );
+  const onGroupedClear = React76.useCallback(() => {
+    tableRef?.current?.setRowGrouping([]);
+  }, [tableRef]);
+  const onGroupedRowChange = React76.useCallback(
+    (newValue) => {
+      const fields = newValue.map((val) => {
+        return val.id;
+      });
+      if (!equals(selectedColumns, newValue)) {
+        tableRef?.current?.setRowGrouping(fields);
+      }
+    },
+    [selectedColumns]
+  );
+  React76.useEffect(() => {
+    function onDisplayedColumnsChanged(event) {
+      const agColumnDefs = event.api.getColumnDefs();
+      if (agColumnDefs?.length) {
+        const flattenedAgColDefs = flattenColDefs(event.api.getColumnDefs());
+        const dataTableColumnDefinitions = flattenedAgColDefs.map(
+          transformToColumnDefinition
+        );
+        setColumnDefinitions(dataTableColumnDefinitions);
+      }
+    }
+    gridApi?.addEventListener(
+      "displayedColumnsChanged",
+      onDisplayedColumnsChanged
+    );
+    return () => {
+      removeEventListenerFromGrid(
+        "displayedColumnsChanged",
+        onDisplayedColumnsChanged,
+        gridApi
+      );
+    };
+  }, [gridApi]);
+  if (groupableColumns.length === 0) {
+    return null;
+  }
   return /* @__PURE__ */ React76.createElement(
-    StyledSuperSelectWrapper,
+    EmptyResultsControlTooltip,
     {
-      $enabled: Boolean(filter.filterValues?.length),
-      "data-test-id": "client-side-single-select-quick-filter"
+      featureI18nKey: "featureGroupBy",
+      enabled: hasNoContent
     },
     /* @__PURE__ */ React76.createElement(
-      UNSAFE_SuperSelect,
+      Tooltip,
       {
-        overlayMatchesTriggerWidth,
-        value: filter.filterValues ?? [],
-        search: false,
-        multiple: false,
-        options: filter.options,
-        disabled,
-        getOptionValue: (option) => getId(columnDefinition.filterProps?.getId, option),
-        getOptionLabel: (option) => getLabel(columnDefinition.filterProps?.getLabel, option),
-        onChange: (values2) => {
-          const valuesArray = ensureArray(values2);
-          if (!valuesArray.length) {
-            onRemove?.();
-            return;
-          }
-          onChange?.(valuesArray);
-        },
-        ...getSuperSelectFilterPreset(columnDefinition)
-      }
+        overlay: localeText.placeholder,
+        trigger: "hover",
+        placement: "top",
+        showDelay: 400
+      },
+      /* @__PURE__ */ React76.createElement(Box, { style: { width: "100%" } }, /* @__PURE__ */ React76.createElement(
+        GroupBySelect,
+        {
+          isDisabled: hasNoContent,
+          localeText,
+          onBlur: onGroupedRowChange,
+          onClear: onGroupedClear,
+          options: groupableColumns,
+          selected: selectedColumns
+        }
+      ))
     )
   );
 };
-var useSuperSelectOptionAsValueWorkaround3 = ({
-  originValue,
-  originOptions,
-  getId: getId3,
-  loading
+function mapColumnsToOptions(columnDefinitions) {
+  return columnDefinitions.map((col) => {
+    return {
+      label: col.headerName,
+      id: col.field,
+      key: col.field,
+      group: col.columnGroupName
+    };
+  });
+}
+var cx21 = classnames.bind(quickControlsStyles_default);
+var ClientSideSearch = ({
+  onSearch,
+  placeholder
 }) => {
-  const isValueFromOptions = React76.useRef(false);
-  const getValueFromOptions = () => {
-    const valueIds = originValue.map((option) => getId(getId3, option));
-    isValueFromOptions.current = true;
-    return originOptions.filter(
-      (option) => valueIds.includes(getId(getId3, option))
-    );
-  };
-  const hasOptions = originOptions.length > 0 && !loading;
-  const hasValue = originValue?.length > 0;
-  const options = !hasOptions && hasValue ? originValue : originOptions;
-  const value = !hasOptions ? originValue : isValueFromOptions.current ? originValue : getValueFromOptions();
-  return {
-    options,
-    value,
-    getOptionValue: (option) => option
-  };
+  const [internalValue, setInternalValue] = React76.useState("");
+  const { tableRef } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  const I18n = useI18nContext();
+  const debouncedSetSearchValue = React76.useCallback(
+    debounce5((value) => {
+      tableRef?.current?.setSearchValue(value);
+    }, 250),
+    [tableRef?.current?.setSearchValue]
+  );
+  const onChange = React76.useCallback(
+    (value, event) => {
+      setInternalValue(value);
+      if (onSearch) {
+        onSearch(event);
+      } else {
+        debouncedSetSearchValue(value);
+      }
+    },
+    [debouncedSetSearchValue, onSearch]
+  );
+  return /* @__PURE__ */ React76.createElement(EmptyResultsControlTooltip, { hasSearch: true, enabled: hasNoContent }, /* @__PURE__ */ React76.createElement(
+    Typeahead,
+    {
+      disabled: hasNoContent,
+      "data-qa": "data-table-search",
+      value: internalValue,
+      className: cx21("search", {
+        "search--empty": !internalValue.length
+      }),
+      onChange,
+      placeholder: placeholder || I18n.t("dataTable.search")
+    }
+  ));
 };
-var ServerSideSingleSelectQuickFilter = ({ columnDefinition, overlayMatchesTriggerWidth, disabled }) => {
-  const {
-    options: originOptions,
-    onClearFilter,
-    fieldName,
-    value: originValue = [],
-    onChange,
-    getOptions,
-    loading
-  } = useServerSideFilter({ columnDefinition });
-  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround3({
-    originOptions,
-    originValue,
-    loading,
-    getId: columnDefinition.filterProps?.getId
-  });
-  const hasFetchedOptions = React76.useRef(false);
-  React76.useEffect(() => {
-    if (!hasFetchedOptions.current && !originOptions.length) {
-      getOptions();
-      hasFetchedOptions.current = true;
+var Search = (props) => {
+  const { onServerSideDataRequest } = useInternalTableContext();
+  if (onServerSideDataRequest) {
+    return /* @__PURE__ */ React76.createElement(ServerSideSearch, { ...props });
+  }
+  return /* @__PURE__ */ React76.createElement(ClientSideSearch, { ...props });
+};
+
+// src/QuickControls/QuickControls.tsx
+var QuickControls = (props) => {
+  const I18n = useI18nContext();
+  if (props.children) {
+    return /* @__PURE__ */ React76.createElement(
+      Box,
+      {
+        "data-qa": "data-table-quick-controls",
+        padding: "xs none",
+        style: props.style
+      },
+      props.children
+    );
+  }
+  return /* @__PURE__ */ React76.createElement(Box, { padding: "xs none", style: props.style }, /* @__PURE__ */ React76.createElement(Box, { padding: "xs none", display: "flex-row", justifyContent: "space-between" }, /* @__PURE__ */ React76.createElement(FlexList, { size: "xs", alignItems: "center", marginRight: "sm" }, /* @__PURE__ */ React76.createElement(
+    Search,
+    {
+      onSearch: props.onSearch,
+      placeholder: props.placeholder,
+      disabled: props.disabledSearch
     }
-  }, [getOptions, originOptions.length]);
-  const handleOnChange = (values2) => {
-    const selectedValues = ensureArray(values2);
-    if (!selectedValues.length) {
-      onClearFilter?.(fieldName);
-      getOptions();
-      return;
+  ), /* @__PURE__ */ React76.createElement(FiltersPanelButton, null)), /* @__PURE__ */ React76.createElement(FlexList, { size: "xs", alignItems: "center" }, /* @__PURE__ */ React76.createElement(
+    RowGroupSelector,
+    {
+      localeText: {
+        reset: I18n.t("dataTable.tableSettings.reset"),
+        placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
+        selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
+      }
     }
-    onChange(selectedValues);
-  };
-  const handleOnOpenChange = (open) => {
-    if (open && !originOptions.length) {
-      getOptions();
+  ), /* @__PURE__ */ React76.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React76.createElement(
+    QuickFilters,
+    {
+      overlayMatchesTriggerWidth: props.filterOverlayMatchesTriggerWidth
     }
-  };
+  ));
+};
+
+// src/utils/addSubcomponents.ts
+var addSubcomponents = (subs, parent) => {
+  const assigned = parent;
+  Object.keys(subs).forEach((key) => {
+    assigned[key] = subs[key];
+  });
+  return assigned;
+};
+
+// src/ClientSideDataTable.tsx
+var ClientSideDataTable = ({
+  analytics,
+  children,
+  columnDefinitions: _columnDefinitions,
+  customBulkEditorFields,
+  enableDynamicRowHeight,
+  enableGroupEditAndValidation,
+  filterGroups,
+  getRowId,
+  initialTableConfig: _initialTableConfig,
+  onBulkEditUpdate,
+  onTableConfigChange,
+  translations: translations2 = {},
+  enableCellTextSelection,
+  localStoragePersistenceKey
+}) => {
   return /* @__PURE__ */ React76.createElement(
-    StyledSuperSelectWrapper,
+    DataTable,
     {
-      $enabled: Boolean(value?.length),
-      "data-test-id": "server-side-single-select-quick-filter"
+      analytics,
+      columnDefinitions: _columnDefinitions,
+      enableGroupEditAndValidation,
+      enableDynamicRowHeight,
+      filterGroups,
+      getRowId,
+      initialTableConfig: _initialTableConfig,
+      onTableConfigChange,
+      onBulkEditUpdate,
+      showExpandCollapseAllToggle: true,
+      translations: translations2,
+      localStoragePersistenceKey,
+      customBulkEditorFields,
+      enableCellTextSelection
     },
-    /* @__PURE__ */ React76.createElement(
-      UNSAFE_SuperSelect,
-      {
-        overlayMatchesTriggerWidth,
-        loading,
-        value: value ?? [],
-        search: false,
-        disabled,
-        getOptionLabel: (option) => getLabel(columnDefinition.filterProps?.getLabel, option),
-        getOptionValue,
-        multiple: false,
-        options,
-        onChange: handleOnChange,
-        onOpenChange: handleOnOpenChange,
-        ...getSuperSelectFilterPreset(columnDefinition)
-      }
-    )
+    children
   );
 };
-var SingleSelectQuickFilterRenderer = (props) => {
-  const { onServerSideDataRequest } = useInternalTableContext();
-  if (!isClientSideFilterProps(props, !!onServerSideDataRequest)) {
-    return /* @__PURE__ */ React76.createElement(ServerSideSingleSelectQuickFilter, { ...props });
-  }
-  return /* @__PURE__ */ React76.createElement(ClientSideSingleSelectQuickFilter, { ...props });
+var Table2 = (props) => {
+  const internalTableContext = useInternalTableContext();
+  React76.useEffect(() => {
+    internalTableContext.setTotalRowCount(props.rows?.length ?? 0);
+  }, [props.rows]);
+  return /* @__PURE__ */ React76.createElement(Table, { ...props, modules: [ClientSideRowModelModule] });
 };
-var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
+BulkActions.displayName = "ClientSideDataTable.BulkActions";
+ConfigPanelButton.displayName = "ClientSideDataTable.ConfigPanelButton";
+ContextPanel.displayName = "ClientSideDataTable.ContextPanel";
+QuickControls.displayName = "ClientSideDataTable.QuickControls";
+QuickFilters.displayName = "ClientSideDataTable.QuickFilters";
+RowGroupSelector.displayName = "ClientSideDataTable.RowGroupSelector";
+Search.displayName = "ClientSideDataTable.Search";
+Table2.displayName = "ClientSideDataTable.Table";
+FiltersPanel.displayName = "ClientSideDataTable.FiltersPanel";
+var ClientSideDataTable_default = addSubcomponents(
+  {
+    BulkActions,
+    BulkEditActionButton,
+    ConfigPanelButton,
+    ContextPanel,
+    QuickControls,
+    QuickFilters,
+    RowGroupSelector,
+    Search,
+    Table: Table2,
+    FiltersPanel,
+    FiltersPanelButton
+  },
+  ClientSideDataTable
+);
 
 // ../../node_modules/@ag-grid-enterprise/server-side-row-model/dist/esm/es6/serverSideRowModel/stores/fullStore.mjs
 var __decorate212 = function(decorators, target, key, desc) {
@@ -89096,4 +89236,4 @@ object-assign/index.js:
    *)
 */
 
-export { Analytics_default as Analytics, AnalyticsBulkClient, BooleanCellEditor, BooleanCellRenderer, ButtonsCellRenderer, ClientSideDataTable_default as ClientSideDataTable, CompanyCellRenderer, CurrencyCellEditor, CurrencyCellRenderer, DateCellEditor, DateCellRenderer, DateFilterRenderer_default as DateFilterRenderer, DateQuickFilterRenderer_default as DateQuickFilterRenderer, DateTimeCellEditor, DateTimeCellRenderer, GrandTotalsLabelRenderer, GroupCellRenderer2 as GroupCellRenderer, LinkCellRenderer, LocationFilterRenderer, LocationQuickFilterRenderer_default as LocationQuickFilterRenderer, MultiSelectCellEditor, MultiSelectCellRenderer, MultiSelectFilterRenderer_default as MultiSelectFilterRenderer, MultiSelectQuickFilterRenderer_default as MultiSelectQuickFilterRenderer, NumberCellEditor2 as NumberCellEditor, NumberCellRenderer, NumberFilterRenderer, PeopleCellRenderer, PercentCellEditor, PercentCellRenderer, PersonCellRenderer, PillCellRenderer, PillSelectCellEditor, SelectAllState, SelectCellEditor2 as SelectCellEditor, SelectCellRenderer, ServerSideDataTable_default as ServerSideDataTable, SingleSelectQuickFilterRenderer_default as SingleSelectQuickFilterRenderer, TextCellEditor2 as TextCellEditor, TextCellRenderer, UNSAFE_useTableContext, rowSize, useAnalyticsContext, useRowSelectionState, waitForAsyncCondition, withDataTableEditor, withDataTableRenderer };
+export { Analytics_default as Analytics, AnalyticsBulkClient, BooleanCellEditor, BooleanCellRenderer, ButtonsCellRenderer, ClientSideDataTable_default as ClientSideDataTable, CompanyCellRenderer, CurrencyCellEditor, CurrencyCellRenderer, DateCellEditor, DateCellRenderer, DateFilterRenderer_default as DateFilterRenderer, DateQuickFilterRenderer_default as DateQuickFilterRenderer, DateTimeCellEditor, DateTimeCellRenderer, GrandTotalsLabelRenderer, GroupCellRenderer2 as GroupCellRenderer, LinkCellRenderer, LocationFilterRenderer, LocationQuickFilterRenderer_default as LocationQuickFilterRenderer, MultiSelectCellEditor, MultiSelectCellRenderer, MultiSelectFilterRenderer_default as MultiSelectFilterRenderer, MultiSelectQuickFilterRenderer_default as MultiSelectQuickFilterRenderer, NumberCellEditor2 as NumberCellEditor, NumberCellRenderer, NumberFilterRenderer, PeopleCellRenderer, PercentCellEditor, PercentCellRenderer, PersonCellRenderer, PillCellRenderer, PillSelectCellEditor, SelectAllState, SelectCellEditor2 as SelectCellEditor, SelectCellRenderer, ServerSideDataTable_default as ServerSideDataTable, SingleSelectQuickFilterRenderer_default as SingleSelectQuickFilterRenderer, TextCellEditor2 as TextCellEditor, TextCellRenderer, UNSAFE_useTableContext, assignAlphabeticalFilterIndices, rowSize, useAnalyticsContext, useRowSelectionState, waitForAsyncCondition, withDataTableEditor, withDataTableRenderer };