@procore/data-table 14.16.0 → 14.18.0

package/dist/legacy/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;
@@ -1410,7 +1410,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;
@@ -5411,7 +5411,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);
   }
@@ -7717,7 +7717,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 {
@@ -7916,7 +7916,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;
@@ -7925,7 +7925,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;
@@ -7933,50 +7933,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
@@ -8064,7 +8064,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;
@@ -8073,17 +8073,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
@@ -52958,8 +52984,11 @@ 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 }) => {
   var _a, _b, _c, _d;
+  const [isLinkWidthBelowMin, setIsLinkWidthBelowMin] = useState(false);
+  const linkRef = useRef(null);
   const internalValue = value ? (_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value) : "";
   const typographyProps = getCellValueTypographyProps(
     (_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.typographyProps
@@ -52970,14 +52999,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,
@@ -52997,7 +53036,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,
@@ -53078,7 +53117,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;
@@ -53087,33 +53126,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
@@ -54187,6 +54252,38 @@ 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) => {
+    var _a;
+    const groupName = ((_a = col.filterProps) == null ? void 0 : _a.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) {
@@ -55962,7 +56059,10 @@ var DataTableCellRenderer = ({
     value
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
-  const isSelectCellComponent = ((_c = (_b = columnDefinition.cellEditor) == null ? void 0 : _b.render) == null ? void 0 : _c.displayName) === "SelectCellEditor";
+  const isSelectCellComponent = ((_c = (_b = columnDefinition.cellRendererSelector) == null ? void 0 : _b.call(columnDefinition, {
+    ...columnDefinition.cellRendererParams,
+    node
+  }).component) == null ? void 0 : _c.displayName) === "SelectCellRenderer";
   const URL = isSelectCellComponent && ((_d = columnDefinition == null ? void 0 : columnDefinition.cellRendererParams) == null ? void 0 : _d.getURL) ? columnDefinition.cellRendererParams.getURL(value) : null;
   const startEditing = useCallback(
     () => api.startEditingCell({
@@ -78226,12 +78326,16 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
 };
 
 // src/utils/expandRows.ts
+function getStringifiedRoute(node) {
+  var _a;
+  return (_a = node.getRoute()) == null ? void 0 : _a.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;
@@ -78252,7 +78356,7 @@ var setExpandCollapseRow = (gridApi, tableConfig, groupDefaultExpanded = 0) => {
   const expandedRoutes = ((_a = tableConfig.groupRowState) == null ? void 0 : _a.expandedRoutes) ?? [];
   const collapsedRoutes = ((_b = tableConfig.groupRowState) == null ? void 0 : _b.collapsedRoutes) ?? [];
   gridApi.forEachNode((node) => {
-    const route = node.getRoute();
+    const route = getStringifiedRoute(node);
     if (route) {
       const routePath = route.join(",");
       const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
@@ -78270,7 +78374,7 @@ var isRowOpenedByDefault = (node, tableConfig, groupDefaultExpanded = 0) => {
   var _a, _b;
   const expandedRoutes = ((_a = tableConfig == null ? void 0 : tableConfig.groupRowState) == null ? void 0 : _a.expandedRoutes) ?? [];
   const collapsedRoutes = ((_b = tableConfig == null ? void 0 : tableConfig.groupRowState) == null ? void 0 : _b.collapsedRoutes) ?? [];
-  const route = node.getRoute();
+  const route = getStringifiedRoute(node);
   if (!route) {
     return false;
   }
@@ -82892,7 +82996,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;
@@ -83183,905 +83287,307 @@ var ConfigPanelButton = () => {
     )
   );
 };
-function getFilterTokenText(columnDefinition, filterValue) {
-  var _a, _b, _c, _d;
-  if ((_a = columnDefinition == null ? void 0 : columnDefinition.filterProps) == null ? void 0 : _a.getFilterTokenText) {
-    return (_c = (_b = columnDefinition == null ? void 0 : columnDefinition.filterProps) == null ? void 0 : _b.getFilterTokenText) == null ? void 0 : _c.call(_b, {
-      headerName: (columnDefinition == null ? void 0 : 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 == null ? void 0 : columnDefinition.headerName;
-  }
-  if (Array.isArray(filterValue)) {
-    if (filterValue.length === 0) {
-      return columnDefinition == null ? void 0 : columnDefinition.headerName;
-    }
-    if (filterValue.length === 1) {
-      return `${columnDefinition == null ? void 0 : columnDefinition.headerName}: ${getLabel(
-        (_d = columnDefinition.filterProps) == null ? void 0 : _d.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 == null ? void 0 : columnDefinition.headerName}: (${filterValue.length})`;
-  }
-  return columnDefinition == null ? void 0 : 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() {
+    var _a;
+    if (selectedValue.type === "range" && isDate(selectedValue.start) && !isDate(selectedValue.end)) {
+      (_a = dateRangeEndDateRef.current) == null ? void 0 : _a.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
+}) {
+  var _a;
+  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: ((_a = colDef.filterProps) == null ? void 0 : _a.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 == null ? void 0 : 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) => {
+  var _a;
+  const dateTime = useDateTime();
+  const i18n = useI18nContext();
+  const placeholders = ((_a = dateInputLocales[i18n.locale]) == null ? void 0 : _a.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 == null ? void 0 : 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) => {
-              var _a;
-              return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.applyListFilter(filter.field, value);
-            },
-            onRemove: () => {
-              var _a;
-              return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.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: () => {
-            var _a;
-            return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.removeFilter(filter.field);
-          }
-        }
-      )));
-    })
+      enabled: false,
+      disabled,
+      label: `${headerName}: ${getDatePlaceholder(i18n.locale, placeholders)}`,
+      ref
+    }
   );
-};
-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 == null ? void 0 : colDef.quickFilterRenderer) {
-          return {
-            ...acc,
-            quickFilterNames: [...acc.quickFilterNames, filterName]
-          };
-        } else if (isActiveFilter(filterName)) {
-          return { ...acc, tokenNames: [...acc.tokenNames, filterName] };
-        }
-        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 = colDef == null ? void 0 : colDef.quickFilterRenderer;
-      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;
-      }
-      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);
-  }
-  return /* @__PURE__ */ React76.createElement(ClientSideFiltersPanelToggleButton, null);
-};
-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 == null ? void 0 : 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(() => {
-    var _a;
-    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping([]);
-  }, [tableRef]);
-  const onGroupedRowChange = React76.useCallback(
-    (newValue) => {
-      var _a;
-      const fields = newValue.map((val) => {
-        return val.id;
-      });
-      if (!equals(selectedColumns, newValue)) {
-        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(fields);
-      }
-    },
-    [selectedColumns]
-  );
-  React76.useEffect(() => {
-    function onDisplayedColumnsChanged(event) {
-      const agColumnDefs = event.api.getColumnDefs();
-      if (agColumnDefs == null ? void 0 : agColumnDefs.length) {
-        const flattenedAgColDefs = flattenColDefs(event.api.getColumnDefs());
-        const dataTableColumnDefinitions = flattenedAgColDefs.map(
-          transformToColumnDefinition
-        );
-        setColumnDefinitions(dataTableColumnDefinitions);
-      }
-    }
-    gridApi == null ? void 0 : gridApi.addEventListener(
-      "displayedColumnsChanged",
-      onDisplayedColumnsChanged
-    );
-    return () => {
-      removeEventListenerFromGrid(
-        "displayedColumnsChanged",
-        onDisplayedColumnsChanged,
-        gridApi
-      );
-    };
-  }, [gridApi]);
-  if (groupableColumns.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React76.createElement(
-    EmptyResultsControlTooltip,
-    {
-      featureI18nKey: "featureGroupBy",
-      enabled: hasNoContent
-    },
-    /* @__PURE__ */ React76.createElement(
-      GroupBySelect,
-      {
-        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
-}) => {
-  var _a;
-  const [internalValue, setInternalValue] = React76.useState("");
-  const { tableRef } = useInternalTableContext();
-  const hasNoContent = useTableHasNoContent();
-  const I18n = useI18nContext();
-  const debouncedSetSearchValue = React76.useCallback(
-    debounce5((value) => {
-      var _a2;
-      (_a2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a2.setSearchValue(value);
-    }, 250),
-    [(_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.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 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
-    }
-  ), /* @__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")
-      }
-    }
-  ), /* @__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(() => {
-    var _a;
-    internalTableContext.setTotalRowCount(((_a = props.rows) == null ? void 0 : _a.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};
-          }
-        }
-      `}
-  }
-`;
-
-// 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(
-      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
-        }
-      )
-    );
-  }
-);
-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
-        ] : []
-      );
-    }
-  }
-  const onSelectionTypeChange = React76.useCallback(
-    (newSelectionType) => {
-      setSelectedValue({ type: newSelectionType });
-    },
-    [setSelectedValue]
-  );
-  function dateRangeAfterHide() {
-    var _a;
-    if (selectedValue.type === "range" && isDate(selectedValue.start) && !isDate(selectedValue.end)) {
-      (_a = dateRangeEndDateRef.current) == null ? void 0 : _a.click();
-    }
-    return true;
-  }
-  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
-    }
-  ));
-}
-function ServerSideQuickDateFilterRenderer({
-  columnDefinition,
-  disabled
-}) {
-  var _a;
-  const { onChange, value = [] } = useServerSideFilter({
-    columnDefinition
-  });
-  const colDef = columnDefinition;
-  return /* @__PURE__ */ React76.createElement(OptionalDateTimeProvider2, { timeZone: colDef.timeZone }, /* @__PURE__ */ React76.createElement(
-    DateFilter3,
-    {
-      selectionType: ((_a = colDef.filterProps) == null ? void 0 : _a.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 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) => {
-  var _a;
-  const dateTime = useDateTime();
-  const i18n = useI18nContext();
-  const placeholders = ((_a = dateInputLocales[i18n.locale]) == null ? void 0 : _a.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 == null ? void 0 : option.id;
-var defaultGetLabel2 = (option) => {
-  return (option == null ? void 0 : option.label) ?? (option == null ? void 0 : option.name) ?? option;
+});
+var DateQuickFilterRenderer_default = QuickDateFilterRenderer;
+var defaultGetId2 = (option) => option == null ? void 0 : option.id;
+var defaultGetLabel2 = (option) => {
+  return (option == null ? void 0 : option.label) ?? (option == null ? void 0 : option.name) ?? option;
 };
 var useSuperSelectOptionAsValueWorkaround = ({
   originValue,
@@ -84414,7 +83920,7 @@ var LocationQuickFilterRenderer = ({
   );
 };
 var LocationQuickFilterRenderer_default = LocationQuickFilterRenderer;
-var StyledFilterPresetPopoverContent = styled4(Popover.Content)`
+var StyledFilterPresetPopoverContent = styled3(Popover.Content)`
   padding: ${spacing.sm}px ${spacing.lg}px;
 `;
 var getValueLabel = (isValueEmpty, value, placeholder, filterName) => {
@@ -84498,7 +84004,7 @@ var getSuperSelectFilterPreset = (columnDefinition) => {
     selectionStyle: "highlight"
   };
 };
-var StyledSuperSelectWrapper = styled4.div`
+var StyledSuperSelectWrapper = styled3.div`
   ${UNSAFE_StyledSuperSelectTrigger} {
     width: auto;
   }
@@ -84573,236 +84079,875 @@ var ClientSideMultiSelectQuickFilter = ({
           onRemove == null ? void 0 : onRemove();
           return;
         }
-        onChange == null ? void 0 : onChange(values2);
-      },
-      ...getSuperSelectFilterPreset(columnDefinition)
-    }
-  ));
+        onChange == null ? void 0 : 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))
+    );
+  };
+  const hasOptions = originOptions.length > 0 && !loading;
+  const hasValue = (originValue == null ? void 0 : 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 }) => {
+  var _a;
+  const {
+    options: originOptions,
+    onClearFilter,
+    fieldName,
+    value: originValue = [],
+    onChange,
+    getOptions,
+    loading
+  } = useServerSideFilter({ columnDefinition });
+  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround2({
+    originOptions,
+    originValue,
+    loading,
+    getId: (_a = columnDefinition.filterProps) == null ? void 0 : _a.getId
+  });
+  return /* @__PURE__ */ React76.createElement(StyledSuperSelectWrapper, { $enabled: Boolean(value == null ? void 0 : value.length) }, /* @__PURE__ */ React76.createElement(
+    UNSAFE_SuperSelect,
+    {
+      overlayMatchesTriggerWidth,
+      loading,
+      value: value === null ? [] : value,
+      search: false,
+      getOptionLabel: (option) => {
+        var _a2;
+        return getLabel((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getLabel, option);
+      },
+      getOptionValue,
+      multiple: true,
+      options,
+      disabled,
+      onChange: (values2) => {
+        if (Array.isArray(values2) && !values2.length) {
+          onClearFilter == null ? void 0 : onClearFilter(fieldName);
+          getOptions();
+          return;
+        }
+        onChange(values2);
+      },
+      onOpenChange: (open) => {
+        if (open && !originOptions.length) {
+          getOptions();
+        }
+      },
+      ...getSuperSelectFilterPreset(columnDefinition)
+    }
+  ));
+};
+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) {
+  var _a, _b, _c, _d;
+  if ((_a = columnDefinition == null ? void 0 : columnDefinition.filterProps) == null ? void 0 : _a.getFilterTokenText) {
+    return (_c = (_b = columnDefinition == null ? void 0 : columnDefinition.filterProps) == null ? void 0 : _b.getFilterTokenText) == null ? void 0 : _c.call(_b, {
+      headerName: (columnDefinition == null ? void 0 : columnDefinition.headerName) || "",
+      value: filterValue
+    });
+  }
+  if (columnDefinition.filterRenderer === DateFilterRenderer_default) {
+    return /* @__PURE__ */ React76.createElement(
+      OptionalDateTimeProvider,
+      {
+        timeZone: columnDefinition.timeZone
+      },
+      /* @__PURE__ */ React76.createElement(
+        DateFilterTokenText,
+        {
+          headerName: columnDefinition.headerName,
+          value: filterValue
+        }
+      )
+    );
+  }
+  if (columnDefinition.filterRenderer === NumberFilterRenderer) {
+    return columnDefinition == null ? void 0 : columnDefinition.headerName;
+  }
+  if (Array.isArray(filterValue)) {
+    if (filterValue.length === 0) {
+      return columnDefinition == null ? void 0 : columnDefinition.headerName;
+    }
+    if (filterValue.length === 1) {
+      return `${columnDefinition == null ? void 0 : columnDefinition.headerName}: ${getLabel(
+        (_d = columnDefinition.filterProps) == null ? void 0 : _d.getLabel,
+        filterValue[0]
+      )}`;
+    }
+    return `${columnDefinition == null ? void 0 : columnDefinition.headerName}: (${filterValue.length})`;
+  }
+  return columnDefinition == null ? void 0 : 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
+}) => {
+  var _a;
+  return /* @__PURE__ */ React76.createElement(
+    StyledSuperSelectWrapper,
+    {
+      $enabled: Boolean((_a = filter.filterValues) == null ? void 0 : _a.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) => {
+          var _a2;
+          return getId((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getId, option);
+        },
+        getOptionLabel: (option) => {
+          var _a2;
+          return getLabel((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getLabel, option);
+        },
+        onChange: (values2) => {
+          const valuesArray = ensureArray(values2);
+          if (!valuesArray.length) {
+            onRemove == null ? void 0 : onRemove();
+            return;
+          }
+          onChange == null ? void 0 : 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 == null ? void 0 : 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 }) => {
+  var _a;
+  const {
+    options: originOptions,
+    onClearFilter,
+    fieldName,
+    value: originValue = [],
+    onChange,
+    getOptions,
+    loading
+  } = useServerSideFilter({ columnDefinition });
+  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround3({
+    originOptions,
+    originValue,
+    loading,
+    getId: (_a = columnDefinition.filterProps) == null ? void 0 : _a.getId
+  });
+  const hasFetchedOptions = React76.useRef(false);
+  React76.useEffect(() => {
+    if (!hasFetchedOptions.current && !originOptions.length) {
+      getOptions();
+      hasFetchedOptions.current = true;
+    }
+  }, [getOptions, originOptions.length]);
+  const handleOnChange = (values2) => {
+    const selectedValues = ensureArray(values2);
+    if (!selectedValues.length) {
+      onClearFilter == null ? void 0 : onClearFilter(fieldName);
+      getOptions();
+      return;
+    }
+    onChange(selectedValues);
+  };
+  const handleOnOpenChange = (open) => {
+    if (open && !originOptions.length) {
+      getOptions();
+    }
+  };
+  return /* @__PURE__ */ React76.createElement(
+    StyledSuperSelectWrapper,
+    {
+      $enabled: Boolean(value == null ? void 0 : value.length),
+      "data-test-id": "server-side-single-select-quick-filter"
+    },
+    /* @__PURE__ */ React76.createElement(
+      UNSAFE_SuperSelect,
+      {
+        overlayMatchesTriggerWidth,
+        loading,
+        value: value ?? [],
+        search: false,
+        disabled,
+        getOptionLabel: (option) => {
+          var _a2;
+          return getLabel((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getLabel, option);
+        },
+        getOptionValue,
+        multiple: false,
+        options,
+        onChange: handleOnChange,
+        onOpenChange: handleOnOpenChange,
+        ...getSuperSelectFilterPreset(columnDefinition)
+      }
+    )
+  );
+};
+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,
+    {
+      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
+    }
+  );
+};
+var ClientSideFiltersPanelToggleButton = () => {
+  const { filterState } = useInternalTableContext();
+  const activeFilters = React76.useMemo(() => {
+    return filterState.allAvailableFilters.filter(({ instance }) => {
+      return instance.isFilterActive();
+    });
+  }, [filterState.allAvailableFilters]);
+  return /* @__PURE__ */ React76.createElement(
+    FiltersPanelToggleButton,
+    {
+      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) {
+  var _a;
+  if (!colDef)
+    return null;
+  if (colDef.quickFilterRenderer) {
+    return colDef.quickFilterRenderer;
+  }
+  const filterRendererName = (_a = colDef.filterRenderer) == null ? void 0 : _a.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"
+    },
+    /* @__PURE__ */ React76.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3 5V7H17V5H3ZM8 15H12V13H8V15ZM15 11H5V9H15V11Z",
+        fill: "currentColor"
+      }
+    )
+  );
+};
+var StyledFilterTokenWrapper = styled3.div`
+  ${UNSAFE_StyledFilterTokenLabel} {
+    font-weight: ${typographyWeights.semibold};
+  }
+`;
+var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
+  const { tableRef, filterState, getColumnDefinition } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  const { quickFilters, tokens } = React76.useMemo(() => {
+    return filterState.allAvailableFilters.reduce(
+      (acc, filter) => {
+        var _a;
+        const colDef = getColumnDefinition(filter.field);
+        if (!colDef) {
+          return acc;
+        }
+        const isInteractive = ((_a = colDef == null ? void 0 : colDef.filterProps) == null ? void 0 : _a.isInteractiveFilterToken) === true;
+        const hasQuickFilterRenderer = !!(colDef == null ? void 0 : 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 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"
+    },
+    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) => {
+              var _a;
+              return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.applyListFilter(filter.field, value);
+            },
+            onRemove: () => {
+              var _a;
+              return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.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: () => {
+            var _a;
+            return (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.removeFilter(filter.field);
+          }
+        }
+      )));
+    })
+  );
+};
+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) => {
+        var _a;
+        const colDef = getColumnDefinition(filterName);
+        if (!colDef) {
+          return acc;
+        }
+        const isInteractive = ((_a = colDef == null ? void 0 : colDef.filterProps) == null ? void 0 : _a.isInteractiveFilterToken) === true;
+        const hasQuickFilterRenderer = !!(colDef == null ? void 0 : 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]
+          };
+        }
+        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;
+      }
+      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 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 == null ? void 0 : 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 }) => {
-  var _a;
-  const {
-    options: originOptions,
-    onClearFilter,
-    fieldName,
-    value: originValue = [],
-    onChange,
-    getOptions,
-    loading
-  } = useServerSideFilter({ columnDefinition });
-  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround2({
-    originOptions,
-    originValue,
-    loading,
-    getId: (_a = columnDefinition.filterProps) == null ? void 0 : _a.getId
-  });
-  return /* @__PURE__ */ React76.createElement(StyledSuperSelectWrapper, { $enabled: Boolean(value == null ? void 0 : value.length) }, /* @__PURE__ */ React76.createElement(
-    UNSAFE_SuperSelect,
+  }
+  return /* @__PURE__ */ React76.createElement(
+    ClientSideQuickFilters,
     {
-      overlayMatchesTriggerWidth,
-      loading,
-      value: value === null ? [] : value,
-      search: false,
-      getOptionLabel: (option) => {
-        var _a2;
-        return getLabel((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getLabel, option);
-      },
-      getOptionValue,
-      multiple: true,
-      options,
-      disabled,
-      onChange: (values2) => {
-        if (Array.isArray(values2) && !values2.length) {
-          onClearFilter == null ? void 0 : 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 _a;
+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 == null ? void 0 : 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(() => {
+    var _a;
+    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping([]);
+  }, [tableRef]);
+  const onGroupedRowChange = React76.useCallback(
+    (newValue) => {
+      var _a;
+      const fields = newValue.map((val) => {
+        return val.id;
+      });
+      if (!equals(selectedColumns, newValue)) {
+        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(fields);
+      }
+    },
+    [selectedColumns]
+  );
+  React76.useEffect(() => {
+    function onDisplayedColumnsChanged(event) {
+      const agColumnDefs = event.api.getColumnDefs();
+      if (agColumnDefs == null ? void 0 : agColumnDefs.length) {
+        const flattenedAgColDefs = flattenColDefs(event.api.getColumnDefs());
+        const dataTableColumnDefinitions = flattenedAgColDefs.map(
+          transformToColumnDefinition
+        );
+        setColumnDefinitions(dataTableColumnDefinitions);
+      }
+    }
+    gridApi == null ? void 0 : gridApi.addEventListener(
+      "displayedColumnsChanged",
+      onDisplayedColumnsChanged
+    );
+    return () => {
+      removeEventListenerFromGrid(
+        "displayedColumnsChanged",
+        onDisplayedColumnsChanged,
+        gridApi
+      );
+    };
+  }, [gridApi]);
+  if (groupableColumns.length === 0) {
+    return null;
+  }
   return /* @__PURE__ */ React76.createElement(
-    StyledSuperSelectWrapper,
+    EmptyResultsControlTooltip,
     {
-      $enabled: Boolean((_a = filter.filterValues) == null ? void 0 : _a.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) => {
-          var _a2;
-          return getId((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getId, option);
-        },
-        getOptionLabel: (option) => {
-          var _a2;
-          return getLabel((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.getLabel, option);
-        },
-        onChange: (values2) => {
-          const valuesArray = ensureArray(values2);
-          if (!valuesArray.length) {
-            onRemove == null ? void 0 : onRemove();
-            return;
-          }
-          onChange == null ? void 0 : 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 == null ? void 0 : 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 }) => {
   var _a;
-  const {
-    options: originOptions,
-    onClearFilter,
-    fieldName,
-    value: originValue = [],
-    onChange,
-    getOptions,
-    loading
-  } = useServerSideFilter({ columnDefinition });
-  const { options, value, getOptionValue } = useSuperSelectOptionAsValueWorkaround3({
-    originOptions,
-    originValue,
-    loading,
-    getId: (_a = columnDefinition.filterProps) == null ? void 0 : _a.getId
-  });
-  const hasFetchedOptions = React76.useRef(false);
-  React76.useEffect(() => {
-    if (!hasFetchedOptions.current && !originOptions.length) {
-      getOptions();
-      hasFetchedOptions.current = true;
+  const [internalValue, setInternalValue] = React76.useState("");
+  const { tableRef } = useInternalTableContext();
+  const hasNoContent = useTableHasNoContent();
+  const I18n = useI18nContext();
+  const debouncedSetSearchValue = React76.useCallback(
+    debounce5((value) => {
+      var _a2;
+      (_a2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a2.setSearchValue(value);
+    }, 250),
+    [(_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.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")
     }
-  }, [getOptions, originOptions.length]);
-  const handleOnChange = (values2) => {
-    const selectedValues = ensureArray(values2);
-    if (!selectedValues.length) {
-      onClearFilter == null ? void 0 : onClearFilter(fieldName);
-      getOptions();
-      return;
+  ));
+};
+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
     }
-    onChange(selectedValues);
-  };
-  const handleOnOpenChange = (open) => {
-    if (open && !originOptions.length) {
-      getOptions();
+  ), /* @__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")
+      }
     }
-  };
+  ), /* @__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 == null ? void 0 : 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) => {
-          var _a2;
-          return getLabel((_a2 = columnDefinition.filterProps) == null ? void 0 : _a2.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(() => {
+    var _a;
+    internalTableContext.setTotalRowCount(((_a = props.rows) == null ? void 0 : _a.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) {
@@ -89343,4 +89488,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 };