@procore/data-table 14.31.0 → 14.33.0

package/dist/legacy/index.js

@@ -7984,32 +7984,15 @@ var styles_default = {
   "spin": "_spin_if78k_1"
 };
 
-// src/utils/getCellValueTypographyProps.ts
-function getCellValueTypographyProps(typographyProps) {
-  return {
-    intent: "small",
-    ...typographyProps ?? {}
-  };
-}
-
 // src/CellRenderers/BooleanCell.tsx
 var cx = classnames.bind(styles_default);
-var InternalBooleanCellRenderer = ({ columnDefinition, isGroup, value }) => {
-  var _a;
+var InternalBooleanCellRenderer = ({ isGroup, value, typographyProps }) => {
   const I18n = useI18nContext();
   const internalValue = value ? I18n.t("dataTable.cells.booleanCell.options.yes") : I18n.t("dataTable.cells.booleanCell.options.no");
   if (isGroup) {
     return null;
   }
-  return /* @__PURE__ */ React80.createElement(
-    Typography,
-    {
-      ...getCellValueTypographyProps(
-        (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-      )
-    },
-    internalValue
-  );
+  return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps }, internalValue);
 };
 var BooleanCellRenderer = withDataTableRenderer(
   InternalBooleanCellRenderer,
@@ -8050,12 +8033,13 @@ var BooleanCellEditor = withDataTableEditor(
 var Renderer = ({
   columnDefinition,
   rowPinned,
+  buttons,
   ...props
 }) => {
   if (rowPinned) {
     return null;
   }
-  return /* @__PURE__ */ React80.createElement(FlexList, { justifyContent: "center", alignItems: "center", size: "xs" }, columnDefinition.cellRendererParams.buttons.map((Button6) => /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React80.createElement(FlexList, { justifyContent: "center", alignItems: "center", size: "xs" }, buttons.map((Button6) => /* @__PURE__ */ React80.createElement(
     Button6,
     {
       key: Button6.displayName,
@@ -8157,12 +8141,13 @@ function ContactItem({
 
 // src/CellRenderers/CompanyCell.tsx
 var Renderer2 = ({
-  columnDefinition,
   rowHeight,
   isGroup,
-  value
+  value,
+  getCompanyName,
+  getImageURL,
+  typographyProps
 }) => {
-  var _a, _b, _c, _d, _e;
   const [showAvatar, setShowAvatar] = React80.useState(false);
   React80.useEffect(() => {
     setShowAvatar(rowHeight === rowSize.lg || rowHeight === rowSize.md);
@@ -8170,18 +8155,9 @@ var Renderer2 = ({
   if (value === void 0 || value === null) {
     return null;
   }
-  const companyName = isGroup ? value : ((_b = (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.getCompanyName) == null ? void 0 : _b.call(_a, value)) ?? value.name;
-  const imageURL = (_d = (_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.getImageURL) == null ? void 0 : _d.call(_c, value);
-  return isGroup ? /* @__PURE__ */ React80.createElement(
-    Typography,
-    {
-      ...getCellValueTypographyProps(
-        (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.typographyProps
-      ),
-      weight: "semibold"
-    },
-    companyName
-  ) : /* @__PURE__ */ React80.createElement(
+  const companyName = isGroup ? value : (getCompanyName == null ? void 0 : getCompanyName(value)) ?? value.name;
+  const imageURL = getImageURL == null ? void 0 : getImageURL(value);
+  return isGroup ? /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, companyName) : /* @__PURE__ */ React80.createElement(
     ContactItem,
     {
       imageUrl: showAvatar ? imageURL : void 0,
@@ -8216,29 +8192,19 @@ var Renderer3 = ({
   columnDefinition,
   isGroup,
   rowPinned,
-  value
+  value,
+  typographyProps,
+  formatConfig,
+  inputProps
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
   const I18n = useI18nContext();
-  const internalValue = value !== void 0 && formatCurrency(
-    value == null ? void 0 : value.toString(),
-    (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.formatConfig
-  ) || void 0;
+  const internalValue = value !== void 0 && formatCurrency(value == null ? void 0 : value.toString(), formatConfig) || void 0;
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            (_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.typographyProps
-          ),
-          className: cx3("input-placeholder")
-        },
-        ((_d = (_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.inputProps) == null ? void 0 : _d.placeholder) || I18n.t("dataTable.cells.currencyCell.placeholder")
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx3("input-placeholder") }, (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.currencyCell.placeholder"));
     }
   }
   if (isGroup) {
@@ -8255,10 +8221,8 @@ var Renderer3 = ({
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
-      ...getCellValueTypographyProps(
-        (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.typographyProps
-      ),
-      weight: rowPinned ? "bold" : (_g = (_f = columnDefinition.cellRendererParams) == null ? void 0 : _f.typographyProps) == null ? void 0 : _g.weight,
+      ...typographyProps,
+      weight: rowPinned ? "bold" : typographyProps == null ? void 0 : typographyProps.weight,
       className: cx3("tabular-nums")
     },
     internalValue
@@ -8266,8 +8230,15 @@ var Renderer3 = ({
 };
 var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
 var Editor = React80.forwardRef(
-  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
-    var _a, _b, _c, _d, _e;
+  ({
+    columnDefinition,
+    eventKey,
+    stopEditing,
+    value,
+    formatConfig,
+    inputProps
+  }, ref) => {
+    var _a;
     const I18n = useI18nContext();
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
@@ -8276,19 +8247,20 @@ var Editor = React80.forwardRef(
       stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const defaultValue = eventKey ? value : formatNumber(value, {
-      ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
+      ...formatConfig || ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.formatConfig),
+      //TODO remove usage of columnDefinition.cellRendererParams in next major version
       symbol: void 0,
       symbolAfterValue: void 0
     });
     return /* @__PURE__ */ React80.createElement(
       Input,
       {
-        placeholder: ((_d = (_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.inputProps) == null ? void 0 : _d.placeholder) || I18n.t("dataTable.cells.currencyCell.placeholder"),
+        placeholder: (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.currencyCell.placeholder"),
         defaultValue,
         onBlur,
         ref,
         className: cx3("input-cell", "input-cell--right-aligned"),
-        ...((_e = columnDefinition.cellEditorParams) == null ? void 0 : _e.inputProps) || {}
+        ...inputProps
       }
     );
   }
@@ -8702,6 +8674,14 @@ var DateFilterTokenText = ({
 };
 var DateFilterRenderer_default = DateFilterRenderer;
 
+// src/utils/getCellValueTypographyProps.ts
+function getCellValueTypographyProps(typographyProps) {
+  return {
+    intent: "small",
+    ...typographyProps
+  };
+}
+
 // src/CellRenderers/DateCell.tsx
 var cx4 = classnames.bind(styles_default);
 function getDateObject(date) {
@@ -8791,39 +8771,32 @@ function getDateObject2(date) {
   return date;
 }
 var DateTimeCellValue = ({
-  columnDefinition,
   isGroup,
-  value
+  value,
+  typographyProps,
+  dateFormatType
 }) => {
-  var _a, _b;
   const { format: format3 } = useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject2(value);
-  const internalValue = parsedValue ? format3(
-    parsedValue,
-    ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.dateFormatType) || "abbr-weekday-abbr-date-at-time"
-  ) : void 0;
-  const typographyProps = getCellValueTypographyProps(
-    (_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.typographyProps
-  );
+  const internalValue = parsedValue ? format3(parsedValue, dateFormatType || "abbr-weekday-abbr-date-at-time") : void 0;
   return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps }, internalValue);
 };
 var Renderer5 = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ React80.createElement(
-    OptionalDateTimeProvider,
-    {
-      timeZone: (_b = (_a = props.columnDefinition) == null ? void 0 : _a.cellRendererParams) == null ? void 0 : _b.timeZone
-    },
-    /* @__PURE__ */ React80.createElement(DateTimeCellValue, { ...props })
-  );
+  return /* @__PURE__ */ React80.createElement(OptionalDateTimeProvider, { timeZone: props.timeZone }, /* @__PURE__ */ React80.createElement(DateTimeCellValue, { ...props }));
 };
 var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
 var Editor3 = React80.forwardRef(
-  ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
-    var _a, _b;
+  ({
+    columnDefinition,
+    setDataValue,
+    stopEditing,
+    value,
+    timeZone,
+    disabledDate
+  }, ref) => {
     function afterHide(event) {
       stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
@@ -8834,23 +8807,17 @@ var Editor3 = React80.forwardRef(
         setDataValue(columnDefinition.field, void 0);
       }
     }
-    return /* @__PURE__ */ React80.createElement(
-      OptionalDateTimeProvider,
+    return /* @__PURE__ */ React80.createElement(OptionalDateTimeProvider, { timeZone }, /* @__PURE__ */ React80.createElement(
+      DateSelect,
       {
-        timeZone: (_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.timeZone
-      },
-      /* @__PURE__ */ React80.createElement(
-        DateSelect,
-        {
-          afterHide,
-          className: cx5("input-cell"),
-          disabledDate: (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.disabledDate,
-          onChange,
-          ref,
-          value: getDateObject2(value)
-        }
-      )
-    );
+        afterHide,
+        className: cx5("input-cell"),
+        disabledDate,
+        onChange,
+        ref,
+        value: getDateObject2(value)
+      }
+    ));
   }
 );
 var DateTimeCellEditor = withDataTableEditor(Editor3, "date");
@@ -52376,16 +52343,22 @@ globalObj.MouseEvent = typeof MouseEvent === "undefined" ? {} : MouseEvent;
 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;
+var InternalLinkCellRenderer = ({
+  columnDefinition,
+  isGroup,
+  data,
+  rowHeight,
+  value,
+  typographyProps,
+  isExternalLink,
+  getURL
+}) => {
+  var _a;
   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
-  );
   const className = cx6(
-    (_d = (_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.typographyProps) == null ? void 0 : _d.className,
+    typographyProps == null ? void 0 : typographyProps.className,
     "textCell",
     "truncatingText",
     {
@@ -52403,8 +52376,7 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
       setIsLinkWidthBelowMin(width < MIN_LINK_WIDTH);
     }
   }, [internalValue]);
-  const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
-  const URL = columnDefinition.cellRendererParams.getURL(value, data);
+  const URL = getURL(value, data);
   const extendClickableAreaClassNames = isLinkWidthBelowMin ? cx6("extendClickableArea", {
     "extendClickableArea--rowHeightSm": rowHeight === rowSize.sm
   }) : "";
@@ -52434,24 +52406,22 @@ var LinkCellRenderer = withDataTableRenderer(
   "input"
 );
 var cx7 = classnames.bind(styles_default);
-var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+var InternalNumberCellRenderer = ({
+  columnDefinition,
+  rowPinned,
+  isGroup,
+  value,
+  typographyProps,
+  inputProps,
+  formatConfig
+}) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-          ),
-          className: cx7("input-placeholder")
-        },
-        ((_c = (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.inputProps) == null ? void 0 : _c.placeholder) || I18n.t("dataTable.cells.numberCell.placeholder")
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx7("input-placeholder") }, (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.numberCell.placeholder"));
     }
     return /* @__PURE__ */ React80.createElement(React80.Fragment, null);
   }
@@ -52460,7 +52430,7 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
     minDecimalPrecision: 0,
     shouldUseGtk: true,
     symbol: "",
-    ...(_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.formatConfig
+    ...formatConfig
   });
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(Typography, { intent: "small", weight: "semibold" }, internalValue);
@@ -52468,10 +52438,8 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
-      ...getCellValueTypographyProps(
-        (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.typographyProps
-      ),
-      weight: rowPinned ? "bold" : (_g = (_f = columnDefinition.cellRendererParams) == null ? void 0 : _f.typographyProps) == null ? void 0 : _g.weight
+      ...typographyProps,
+      weight: rowPinned ? "bold" : typographyProps == null ? void 0 : typographyProps.weight
     },
     internalValue
   );
@@ -52480,8 +52448,7 @@ var NumberCellRenderer = withDataTableRenderer(
   InternalNumberCellRenderer,
   "input"
 );
-var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
-  var _a, _b, _c;
+var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditing, value, inputProps }, ref) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -52492,13 +52459,13 @@ var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditi
   return /* @__PURE__ */ React80.createElement(
     Input,
     {
-      placeholder: ((_b = (_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.inputProps) == null ? void 0 : _b.placeholder) || I18n.t("dataTable.cells.numberCell.placeholder"),
+      placeholder: (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.numberCell.placeholder"),
       type: "number",
       defaultValue: value,
       onBlur,
       ref,
       className: cx7("input-cell", "input-cell--right-aligned"),
-      ...((_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.inputProps) || {}
+      ...inputProps
     }
   );
 });
@@ -52579,45 +52546,43 @@ var defaultAvatarStackItemFilter = (person) => !!person || !!person.id;
 var Renderer6 = ({
   columnDefinition,
   rowHeight,
-  value
+  value,
+  getValue: getValue2,
+  getCompanyName: getCompanyNameParam,
+  getPersonName: getPersonNameParam,
+  getInitials,
+  getImageURL,
+  typographyProps
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a;
   const [fullCellView, setFullCellView] = React80.useState(false);
   const getPeople = React80.useCallback(() => {
-    var _a2, _b2;
-    return ((_b2 = (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getValue) == null ? void 0 : _b2.call(_a2, value)) || value || [];
-  }, [(_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.getValue, value]);
+    return (getValue2 == null ? void 0 : getValue2(value)) || value || [];
+  }, [getValue2, value]);
   const getCompanyName = React80.useCallback(
     (person) => {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getCompanyName) == null ? void 0 : _b2.call(_a2, person)) ?? person.company ?? "";
+      return (getCompanyNameParam == null ? void 0 : getCompanyNameParam(person)) ?? person.company ?? "";
     },
-    [(_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.getCompanyName]
+    [getCompanyNameParam]
   );
   const getPersonName = React80.useCallback(
     (person) => {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getPersonName) == null ? void 0 : _b2.call(_a2, person)) ?? person.name ?? "";
+      return (getPersonNameParam == null ? void 0 : getPersonNameParam(person)) ?? person.name ?? "";
     },
-    [(_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.getPersonName]
+    [getPersonNameParam]
   );
   const getPersonImageUrl = React80.useCallback(
     (person) => {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getImageURL) == null ? void 0 : _b2.call(_a2, person)) ?? "";
+      return (getImageURL == null ? void 0 : getImageURL(person)) ?? "";
     },
-    [(_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.getImageURL]
+    [getImageURL]
   );
   const getPersonInitials = React80.useCallback(
     (person) => {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getInitials) == null ? void 0 : _b2.call(_a2, person)) ?? "";
+      return (getInitials == null ? void 0 : getInitials(person)) ?? "";
     },
-    [(_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.getInitials]
+    [getInitials]
   );
-  React80.useEffect(() => {
-    setFullCellView(rowHeight === rowSize.lg || rowHeight === rowSize.md);
-  }, [rowHeight]);
   const getPersonNameWithCompany = React80.useCallback(
     (person) => {
       const name = getPersonName(person);
@@ -52626,6 +52591,9 @@ var Renderer6 = ({
     },
     [getCompanyName, getPersonName]
   );
+  React80.useEffect(() => {
+    setFullCellView(rowHeight === rowSize.lg || rowHeight === rowSize.md);
+  }, [rowHeight]);
   const namesWithCompany = React80.useMemo(
     () => getPeople().map(getPersonNameWithCompany).join(", "),
     [getPeople, getPersonNameWithCompany]
@@ -52641,9 +52609,6 @@ var Renderer6 = ({
     }
     return avatarWidth * avatarCount;
   }, [getPeople, rowHeight]);
-  const typographyProps = getCellValueTypographyProps(
-    (_f = columnDefinition.cellRendererParams) == null ? void 0 : _f.typographyProps
-  );
   const people = getPeople();
   if (isEmptyValue(value) || people.length === 0) {
     return null;
@@ -52657,7 +52622,7 @@ var Renderer6 = ({
       type: person.type || "user"
     };
   }).filter(
-    ((_g = columnDefinition.cellRendererParams) == null ? void 0 : _g.avatarStackItemFilter) ?? defaultAvatarStackItemFilter
+    ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.avatarStackItemFilter) ?? defaultAvatarStackItemFilter
   );
   const isAvatarStackDisplayed = fullCellView && avatarStackItems && !!avatarStackItems.length;
   return /* @__PURE__ */ React80.createElement(
@@ -52752,31 +52717,21 @@ var Renderer7 = ({
   columnDefinition,
   isGroup,
   rowPinned,
-  value
+  value,
+  typographyProps,
+  inputProps,
+  formatConfig
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-          ),
-          className: cx9("input-placeholder")
-        },
-        ((_c = (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.inputProps) == null ? void 0 : _c.placeholder) || I18n.t("dataTable.cells.percentCell.placeholder")
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx9("input-placeholder") }, (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.percentCell.placeholder"));
     }
   }
-  const internalValue = formatPercentage(
-    (value == null ? void 0 : value.toString()) ?? "",
-    (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.formatConfig
-  );
+  const internalValue = formatPercentage((value == null ? void 0 : value.toString()) ?? "", formatConfig);
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(
       Typography,
@@ -52791,51 +52746,62 @@ var Renderer7 = ({
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
-      ...getCellValueTypographyProps(
-        (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.typographyProps
-      ),
-      weight: rowPinned ? "bold" : (_g = (_f = columnDefinition.cellRendererParams) == null ? void 0 : _f.typographyProps) == null ? void 0 : _g.weight,
+      ...typographyProps,
+      weight: rowPinned ? "bold" : typographyProps == null ? void 0 : typographyProps.weight,
       className: cx9("tabular-nums")
     },
     internalValue
   );
 };
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
-var Editor4 = React80.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
-  var _a, _b, _c, _d, _e;
-  const I18n = useI18nContext();
-  function onBlur(event) {
-    stopEditing(ensureIsHTMLElement(event.relatedTarget));
-  }
-  if (isEmptyValue(value) && !columnDefinition.editable) {
-    return null;
-  }
-  const defaultValue = eventKey ? value : formatNumber(value, {
-    ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
-    symbol: void 0,
-    symbolAfterValue: void 0
-  });
-  return /* @__PURE__ */ React80.createElement(
-    Input,
-    {
-      placeholder: ((_d = (_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.inputProps) == null ? void 0 : _d.placeholder) || I18n.t("dataTable.cells.percentCell.placeholder"),
-      className: cx9("input-cell", "input-cell--right-aligned"),
-      defaultValue,
-      onBlur,
-      ref,
-      style: { textAlign: "right" },
-      ...((_e = columnDefinition.cellEditorParams) == null ? void 0 : _e.inputProps) || {}
+var Editor4 = React80.forwardRef(
+  ({
+    columnDefinition,
+    eventKey,
+    stopEditing,
+    value,
+    formatConfig,
+    inputProps
+  }, ref) => {
+    var _a;
+    const I18n = useI18nContext();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
-  );
-});
+    if (isEmptyValue(value) && !columnDefinition.editable) {
+      return null;
+    }
+    const defaultValue = eventKey ? value : formatNumber(value, {
+      ...formatConfig || ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.formatConfig),
+      //TODO remove usage of columnDefinition.cellRendererParams in next major version
+      symbol: void 0,
+      symbolAfterValue: void 0
+    });
+    return /* @__PURE__ */ React80.createElement(
+      Input,
+      {
+        placeholder: (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.percentCell.placeholder"),
+        className: cx9("input-cell", "input-cell--right-aligned"),
+        defaultValue,
+        onBlur,
+        ref,
+        style: { textAlign: "right" },
+        ...inputProps
+      }
+    );
+  }
+);
 var PercentCellEditor = withDataTableEditor(Editor4, "input");
 var Renderer8 = ({
-  columnDefinition,
   rowHeight,
   isGroup,
-  value
+  value,
+  getPersonName,
+  getCompanyName,
+  getImageURL,
+  getInitials,
+  typographyProps
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const [showAvatar, setShowAvatar] = React80.useState(false);
   React80.useEffect(() => {
     setShowAvatar(rowHeight === rowSize.lg || rowHeight === rowSize.md);
@@ -52843,13 +52809,10 @@ var Renderer8 = ({
   if (value === void 0 || value === null) {
     return null;
   }
-  const name = (_b = (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.getPersonName) == null ? void 0 : _b.call(_a, value);
-  const companyName = (_d = (_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.getCompanyName) == null ? void 0 : _d.call(_c, value);
-  const imageURL = (_f = (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.getImageURL) == null ? void 0 : _f.call(_e, value);
-  const initials = (_h = (_g = columnDefinition.cellRendererParams) == null ? void 0 : _g.getInitials) == null ? void 0 : _h.call(_g, value);
-  const typographyProps = getCellValueTypographyProps(
-    (_i = columnDefinition.cellRendererParams) == null ? void 0 : _i.typographyProps
-  );
+  const name = getPersonName == null ? void 0 : getPersonName(value);
+  const companyName = getCompanyName == null ? void 0 : getCompanyName(value);
+  const imageURL = getImageURL == null ? void 0 : getImageURL(value);
+  const initials = getInitials == null ? void 0 : getInitials(value);
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, name);
   }
@@ -52873,35 +52836,26 @@ var Renderer9 = ({
   columnDefinition,
   isGroup,
   value,
-  rowPinned
+  rowPinned,
+  getColor,
+  displayAsPill,
+  typographyProps,
+  placeholder
 }) => {
-  var _a, _b, _c, _d;
-  const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
+  var _a;
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-          ),
-          className: cx10("input-placeholder")
-        },
-        ((_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.placeholder) || I18n.t("dataTable.cells.pillCell.placeholder", {
-          label: columnDefinition.headerName
-        })
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx10("input-placeholder") }, placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
+        label: columnDefinition.headerName
+      }));
     }
     return null;
   }
-  const label = ((_c = columnDefinition.getStringFormattedValue) == null ? void 0 : _c.call(columnDefinition, value)) || value;
-  const typographyProps = getCellValueTypographyProps(
-    (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
-  );
+  const label = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) || value;
   if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
     return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
   }
@@ -52909,8 +52863,18 @@ var Renderer9 = ({
 };
 var PillCellRenderer = withDataTableRenderer(Renderer9, "select");
 var Editor5 = React80.forwardRef(
-  ({ columnDefinition, data, setDataValue, stopEditing, value }, ref) => {
-    var _a, _b, _c;
+  ({
+    columnDefinition,
+    data,
+    setDataValue,
+    stopEditing,
+    value,
+    selectOptions,
+    getId: getIdParam,
+    placeholder,
+    getColor,
+    clearable
+  }, ref) => {
     const [options, setOptions] = React80.useState([]);
     const [loading, setLoading] = React80.useState(false);
     const I18n = useI18nContext();
@@ -52918,8 +52882,6 @@ var Editor5 = React80.forwardRef(
       stopEditing();
     }
     async function beforeShow() {
-      var _a2;
-      const selectOptions = ((_a2 = columnDefinition.cellEditorParams) == null ? void 0 : _a2.selectOptions) || [];
       if (Array.isArray(selectOptions)) {
         setOptions(selectOptions);
       } else {
@@ -52936,28 +52898,27 @@ var Editor5 = React80.forwardRef(
       setDataValue(columnDefinition.field, null);
     }
     function getId3(item) {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellEditorParams) == null ? void 0 : _a2.getId) == null ? void 0 : _b2.call(_a2, item)) ?? item;
+      return (getIdParam == null ? void 0 : getIdParam(item)) ?? item;
     }
     function getLabel3(item) {
-      var _a2;
-      const unformattedLabel = ((_a2 = columnDefinition.getStringFormattedValue) == null ? void 0 : _a2.call(columnDefinition, item)) || "";
+      var _a;
+      const unformattedLabel = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, item)) || "";
       return unformattedLabel;
     }
     return /* @__PURE__ */ React80.createElement(
       PillSelect,
       {
-        placeholder: ((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.placeholder) || I18n.t("dataTable.cells.pillCell.placeholder", {
+        placeholder: placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
           label: columnDefinition.headerName
         }),
         afterHide,
         beforeShow,
         block: true,
-        getColor: ((_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.getColor) ?? columnDefinition.cellRendererParams.getColor,
+        getColor,
         getId: getId3,
         getLabel: getLabel3,
         loading,
-        onClear: ((_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.clearable) ? onClear : void 0,
+        onClear: clearable ? onClear : void 0,
         onSelect,
         options,
         ref,
@@ -53002,14 +52963,12 @@ function useSearch(data, onSearchFunction) {
     setSearchResultOptions
   };
 }
-function useSelectOptions(columnDefinition, data) {
+function useSelectOptions(selectOptions, data) {
   const [options, setOptions] = React80.useState([]);
   const [loading, setLoading] = React80.useState(false);
   const [totalOptions, setTotalOptions] = React80.useState(0);
   const fetchOptions = async (offset4) => {
-    var _a;
     setLoading(true);
-    const selectOptions = ((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.selectOptions) || [];
     let newOptions = [];
     let total = 0;
     if (typeof selectOptions === "function") {
@@ -53041,33 +53000,23 @@ var cx11 = classnames.bind({ ...styles_default, ...truncation_default });
 var Renderer10 = ({
   columnDefinition,
   isGroup,
-  value
+  value,
+  typographyProps,
+  placeholder
 }) => {
-  var _a, _b, _c, _d;
+  var _a;
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-          ),
-          className: cx11("truncatingText")
-        },
-        ((_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.placeholder) || I18n.t("dataTable.cells.selectCell.placeholder", {
-          label: columnDefinition.headerName
-        })
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx11("truncatingText") }, placeholder || I18n.t("dataTable.cells.selectCell.placeholder", {
+        label: columnDefinition.headerName
+      }));
     }
   }
-  const internalValue = (_c = columnDefinition.getStringFormattedValue) == null ? void 0 : _c.call(columnDefinition, value);
-  const typographyProps = getCellValueTypographyProps(
-    (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
-  );
+  const internalValue = (_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value);
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(
       Typography,
@@ -53083,15 +53032,25 @@ var Renderer10 = ({
 };
 var SelectCellRenderer = withDataTableRenderer(Renderer10, "select");
 var Editor6 = React80.forwardRef(
-  ({ columnDefinition, data, setDataValue, stopEditing, value }, ref) => {
-    var _a, _b;
+  ({
+    columnDefinition,
+    data,
+    setDataValue,
+    stopEditing,
+    value,
+    clearable,
+    selectOptions,
+    onSearch: onSearchParam,
+    getId: getIdParam,
+    getOptionLabel: getOptionLabelParam
+  }, ref) => {
     const { options, loading, totalOptions, fetchOptions } = useSelectOptions(
-      columnDefinition,
+      selectOptions,
       data
     );
     const { onSearch, searchResultOptions, isSearching } = useSearch(
       data,
-      (_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.onSearch
+      onSearchParam
     );
     function onSelect(selection) {
       if (selection.item !== value) {
@@ -53114,16 +53073,14 @@ var Editor6 = React80.forwardRef(
       }
     }, 500);
     function getId3(val) {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellEditorParams) == null ? void 0 : _a2.getId) == null ? void 0 : _b2.call(_a2, val)) ?? val;
+      return (getIdParam == null ? void 0 : getIdParam(val)) ?? val;
     }
     function getLabel3(val) {
-      var _a2;
-      return (_a2 = columnDefinition.getStringFormattedValue) == null ? void 0 : _a2.call(columnDefinition, val);
+      var _a;
+      return (_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, val);
     }
     function getOptionLabel(option) {
-      var _a2, _b2;
-      return ((_b2 = (_a2 = columnDefinition.cellEditorParams) == null ? void 0 : _a2.getOptionLabel) == null ? void 0 : _b2.call(_a2, option)) || getLabel3(option);
+      return (getOptionLabelParam == null ? void 0 : getOptionLabelParam(option)) || getLabel3(option);
     }
     return /* @__PURE__ */ React80.createElement(
       Select,
@@ -53135,7 +53092,7 @@ var Editor6 = React80.forwardRef(
         loading: isSearching || loading,
         onSearch,
         onSelect,
-        onClear: ((_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.clearable) ? onClear : void 0,
+        onClear: clearable ? onClear : void 0,
         onScrollBottom,
         ref,
         className: cx11("input-cell", "truncatingText")
@@ -53159,28 +53116,21 @@ var Renderer11 = ({
   rowHeight,
   node,
   isGroup,
-  value
+  value,
+  typographyProps,
+  inputProps
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a;
   const I18n = useI18nContext();
   if (isEmptyValue(value) && columnDefinition.editable) {
     if (isGroup) {
       return null;
     }
-    return /* @__PURE__ */ React80.createElement(
-      Typography,
-      {
-        ...getCellValueTypographyProps(
-          (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-        ),
-        className: cx12("input-placeholder")
-      },
-      ((_c = (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.inputProps) == null ? void 0 : _c.placeholder) || I18n.t("dataTable.cells.textCell.placeholder")
-    );
+    return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx12("input-placeholder") }, (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.textCell.placeholder"));
   }
-  const internalValue = ((_d = columnDefinition.getStringFormattedValue) == null ? void 0 : _d.call(columnDefinition, value)) ?? value;
+  const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
   const className = cx12(
-    (_f = (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.typographyProps) == null ? void 0 : _f.className,
+    typographyProps == null ? void 0 : typographyProps.className,
     "textCell",
     "truncatingText",
     {
@@ -53188,9 +53138,6 @@ var Renderer11 = ({
       "truncatingText--lg": rowHeight === rowSize.lg
     }
   );
-  const typographyProps = getCellValueTypographyProps(
-    (_g = columnDefinition.cellRendererParams) == null ? void 0 : _g.typographyProps
-  );
   if (isGroup) {
     const fontWeight = (node == null ? void 0 : node.footer) ? "regular" : "semibold";
     return /* @__PURE__ */ React80.createElement(
@@ -53208,8 +53155,8 @@ var Renderer11 = ({
 };
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React80.forwardRef(
-  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
-    var _a, _b, _c, _d;
+  ({ columnDefinition, eventKey, stopEditing, value, inputProps }, ref) => {
+    var _a;
     function onBlur(event) {
       stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
@@ -53218,12 +53165,12 @@ var Editor7 = React80.forwardRef(
     return /* @__PURE__ */ React80.createElement(
       Input,
       {
-        placeholder: ((_c = (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.inputProps) == null ? void 0 : _c.placeholder) || I18n.t("dataTable.cells.textCell.placeholder"),
         className: cx12("input-cell"),
         defaultValue: internalValue,
         onBlur,
         ref,
-        ...((_d = columnDefinition.cellEditorParams) == null ? void 0 : _d.inputProps) || {}
+        ...inputProps,
+        placeholder: (inputProps == null ? void 0 : inputProps.placeholder) || I18n.t("dataTable.cells.textCell.placeholder")
       }
     );
   }
@@ -53244,29 +53191,19 @@ var Renderer12 = ({
   columnDefinition,
   node,
   isGroup,
-  value
+  value,
+  typographyProps,
+  textAreaProps
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a;
   const I18n = useI18nContext();
   if (isEmptyValue(value) && columnDefinition.editable) {
     if (isGroup) {
       return null;
     }
-    return /* @__PURE__ */ React80.createElement(
-      Typography,
-      {
-        ...getCellValueTypographyProps(
-          (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
-        ),
-        className: cx13("input-placeholder")
-      },
-      ((_c = (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.textAreaProps) == null ? void 0 : _c.placeholder) || I18n.t("dataTable.cells.textCell.placeholder")
-    );
+    return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx13("input-placeholder") }, (textAreaProps == null ? void 0 : textAreaProps.placeholder) || I18n.t("dataTable.cells.textCell.placeholder"));
   }
-  const internalValue = ((_d = columnDefinition.getStringFormattedValue) == null ? void 0 : _d.call(columnDefinition, value)) ?? value;
-  const typographyProps = getCellValueTypographyProps(
-    (_e = columnDefinition.cellRendererParams) == null ? void 0 : _e.typographyProps
-  );
+  const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
   if (isGroup) {
     const fontWeight = (node == null ? void 0 : node.footer) ? "regular" : "semibold";
     return /* @__PURE__ */ React80.createElement(
@@ -53282,8 +53219,8 @@ var Renderer12 = ({
   return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx13("textarea-cell", "text") }, internalValue);
 };
 var Editor8 = React80.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
-    var _a, _b, _c, _d;
+  ({ columnDefinition, stopEditing, value, textAreaProps }, ref) => {
+    var _a;
     function onBlur(event) {
       stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
@@ -53292,14 +53229,14 @@ var Editor8 = React80.forwardRef(
     return /* @__PURE__ */ React80.createElement(
       TextArea,
       {
-        placeholder: ((_c = (_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.textAreaProps) == null ? void 0 : _c.placeholder) || I18n.t("dataTable.cells.textCell.placeholder"),
         className: cx13("textarea-cell", "editor-text"),
         defaultValue: internalValue,
         onBlur,
         ref,
         resize: "none",
         style: { lineHeight: "16px" },
-        ...((_d = columnDefinition.cellEditorParams) == null ? void 0 : _d.textAreaProps) || {}
+        ...textAreaProps,
+        placeholder: (textAreaProps == null ? void 0 : textAreaProps.placeholder) || I18n.t("dataTable.cells.textCell.placeholder")
       }
     );
   }
@@ -54000,7 +53937,7 @@ var NumberFilterRenderer = React80.memo(
         return {
           type: prev == null ? void 0 : prev.type,
           filter: prev == null ? void 0 : prev.filter,
-          filterTo: inputValue
+          filterTo: inputValue !== "" ? Number(inputValue) : void 0
         };
       });
       if (inputValue === void 0 || inputValue === "") {
@@ -54010,7 +53947,7 @@ var NumberFilterRenderer = React80.memo(
         return {
           type: prev == null ? void 0 : prev.type,
           filter: prev == null ? void 0 : prev.filter,
-          filterTo: inputValue
+          filterTo: Number(inputValue)
         };
       });
     }, []);
@@ -54278,7 +54215,7 @@ var ServerSideFilter = ({
         "data-qa": `data-table-filter-heading-${fieldName}`,
         id: `data-table-filter-heading-${fieldName}`
       },
-      filterHeading
+      typeof filterHeading === "function" ? filterHeading({}) : filterHeading
     ) : null,
     /* @__PURE__ */ React80.createElement(
       Component4,
@@ -55697,11 +55634,8 @@ function getRowActions(actions, rowProps) {
   return actions;
 }
 var InternalRowActionsCellRenderer = (props) => {
-  const actions = getRowActions(
-    props.columnDefinition.cellRendererParams.actions,
-    props
-  );
-  if (props.rowPinned || props.columnDefinition.cellRendererParams.hideActionsOnGroupedRow && props.isGroup || actions.length === 0) {
+  const actions = getRowActions(props.actions, props);
+  if (props.rowPinned || props.hideActionsOnGroupedRow && props.isGroup || actions.length === 0) {
     return null;
   }
   return /* @__PURE__ */ React80.createElement(
@@ -55973,7 +55907,8 @@ var DataTableCellRenderer = ({
   node,
   editorType,
   value,
-  setValue
+  setValue,
+  ...props
 }) => {
   var _a, _b, _c, _d, _e;
   const { columnApi } = useInternalTableContext();
@@ -56004,10 +55939,11 @@ var DataTableCellRenderer = ({
     parentData: context == null ? void 0 : context.parentData,
     parentId: context == null ? void 0 : context.parentId,
     rowHeight,
-    rowIndex: node.rowIndex,
     rowPinned: node.rowPinned,
     tableApi: tableRef == null ? void 0 : tableRef.current,
-    value
+    value,
+    ...props,
+    typographyProps: getCellValueTypographyProps(props.typographyProps)
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
   const isSelectCellComponent = ((_c = (_b = columnDefinition.cellRendererSelector) == null ? void 0 : _b.call(columnDefinition, {
@@ -56087,7 +56023,8 @@ var DataTableCellEditor = React80.forwardRef(
     node,
     parseValue,
     stopEditing,
-    value
+    value,
+    ...props
   }, ref) => {
     var _a;
     const startingValue = getStartingValue(eventKey, editorType, value);
@@ -56198,7 +56135,7 @@ var DataTableCellEditor = React80.forwardRef(
             setCurrentValue(newValue);
           },
           stopEditing: (relatedTarget) => {
-            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table')) === null;
+            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table"]')) === null;
             stopEditing(isRelatedTargetOutsideTable);
             if (isRelatedTargetOutsideTable) {
               api.clearFocusedCell();
@@ -56207,7 +56144,8 @@ var DataTableCellEditor = React80.forwardRef(
           },
           tableApi: tableRef == null ? void 0 : tableRef.current,
           value: currentValue,
-          ref: handleRefs(editorType)
+          ref: handleRefs(editorType),
+          ...props
         }
       )
     );
@@ -57297,31 +57235,34 @@ function getLabel2(func, option) {
 function getId2(func, option) {
   return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.id) ?? option;
 }
-var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
-  var _a, _b, _c, _d;
+var InternalMultiSelectCellRenderer = ({
+  columnDefinition,
+  rowHeight,
+  value,
+  getValue: getValueParam,
+  enablePlaceholder: enablePlaceholderParam,
+  placeholder: placeholderParam,
+  typographyProps,
+  getLabel: getLabelParam,
+  getId: getIdParam
+}) => {
   const I18n = useI18nContext();
   const ref = React80.useRef();
   React80.useLayoutEffect(() => {
-    var _a2, _b2;
-    (_b2 = ref == null ? void 0 : ref.current) == null ? void 0 : _b2.setAttribute("title", (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.innerText);
+    var _a, _b;
+    (_b = ref == null ? void 0 : ref.current) == null ? void 0 : _b.setAttribute("title", (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.innerText);
   });
   if (value === void 0 || value === null) {
     return null;
   }
-  const options = getValue(
-    (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.getValue,
-    value,
-    emptyArray
-  );
-  const enablePlaceholder = (((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.enablePlaceholder) && columnDefinition.editable) ?? false;
-  const placeholder = ((_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.placeholder) ?? I18n.t("dataTable.cells.multiSelectCell.placeholder");
+  const options = getValue(getValueParam, value, emptyArray);
+  const enablePlaceholder = (enablePlaceholderParam && columnDefinition.editable) ?? false;
+  const placeholder = placeholderParam ?? I18n.t("dataTable.cells.multiSelectCell.placeholder");
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
       as: "ol",
-      ...getCellValueTypographyProps(
-        (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
-      ),
+      ...typographyProps,
       className: cx16("inlineListItems", "truncatingText", {
         "truncatingText--md": rowHeight === rowSize.md,
         "truncatingText--lg": rowHeight === rowSize.lg
@@ -57329,15 +57270,8 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
       ref
     },
     options.length ? options.map((option, idx, arr) => {
-      var _a2, _b2;
-      const label = getLabel2(
-        (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getLabel,
-        option
-      );
-      const optionId = getId2(
-        (_b2 = columnDefinition.cellRendererParams) == null ? void 0 : _b2.getId,
-        option
-      );
+      const label = getLabel2(getLabelParam, option);
+      const optionId = getId2(getIdParam, option);
       const key = `${label}_${optionId}_idx_${idx}`;
       return /* @__PURE__ */ React80.createElement(React80.Fragment, { key }, /* @__PURE__ */ React80.createElement("li", null, label, idx !== arr.length - 1 ? commaToken : null));
     }) : enablePlaceholder ? /* @__PURE__ */ React80.createElement("li", { style: { color: colors.gray45 } }, placeholder) : null
@@ -57347,66 +57281,80 @@ var MultiSelectCellRenderer = withDataTableRenderer(
   InternalMultiSelectCellRenderer,
   "select"
 );
-var MultiSelectEditor = React80.forwardRef(({ columnDefinition, value = [], setDataValue, data, stopEditing }, ref) => {
-  var _a;
-  const [selectedValue, setSelectedValue] = React80.useState(value);
-  const { options, loading, totalOptions, fetchOptions } = useSelectOptions(
+var MultiSelectEditor = React80.forwardRef(
+  ({
     columnDefinition,
-    data
-  );
-  const { onSearch: editorOnSearch } = columnDefinition.cellEditorParams || {};
-  const shouldSearch = options.length < totalOptions && !!editorOnSearch;
-  const { onSearch, searchResultOptions, setSearchResultOptions, isSearching } = useSearch(data, shouldSearch ? editorOnSearch : void 0);
-  async function beforeShow() {
-    if (options.length === 0) {
-      await fetchOptions();
+    value = [],
+    setDataValue,
+    data,
+    stopEditing,
+    selectOptions,
+    placeholder,
+    onSearch: editorOnSearch,
+    getLabel: getLabelParam,
+    getId: getIdParam
+  }, ref) => {
+    const [selectedValue, setSelectedValue] = React80.useState(value);
+    const { options, loading, totalOptions, fetchOptions } = useSelectOptions(
+      selectOptions,
+      data
+    );
+    const shouldSearch = options.length < totalOptions && !!editorOnSearch;
+    const {
+      onSearch,
+      searchResultOptions,
+      setSearchResultOptions,
+      isSearching
+    } = useSearch(data, shouldSearch ? editorOnSearch : void 0);
+    async function beforeShow() {
+      if (options.length === 0) {
+        await fetchOptions();
+      }
+      return true;
     }
-    return true;
-  }
-  const onScrollBottom = debounce5(async () => {
-    if (!searchResultOptions && options.length < totalOptions) {
-      const nextOffset = options.length;
-      await fetchOptions(nextOffset);
+    const onScrollBottom = debounce5(async () => {
+      if (!searchResultOptions && options.length < totalOptions) {
+        const nextOffset = options.length;
+        await fetchOptions(nextOffset);
+      }
+    }, 500);
+    function onChange(value2) {
+      setSelectedValue(value2);
+      setDataValue(columnDefinition.field, value2);
+      if (searchResultOptions) {
+        setSearchResultOptions(void 0);
+      }
     }
-  }, 500);
-  function onChange(value2) {
-    setSelectedValue(value2);
-    setDataValue(columnDefinition.field, value2);
-    if (searchResultOptions) {
-      setSearchResultOptions(void 0);
+    function getLabel3(func, option) {
+      return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.label) ?? (option == null ? void 0 : option.name) ?? option;
     }
-  }
-  function getLabel3(func, option) {
-    return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.label) ?? (option == null ? void 0 : option.name) ?? option;
-  }
-  function getId3(func, option) {
-    return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.id) ?? option;
-  }
-  return /* @__PURE__ */ React80.createElement(
-    MultiSelect,
-    {
-      beforeShow,
-      afterHide: () => stopEditing(),
-      block: true,
-      loading: isSearching || loading,
-      getId: (option) => {
-        var _a2;
-        return getId3((_a2 = columnDefinition.cellEditorParams) == null ? void 0 : _a2.getId, option);
-      },
-      getLabel: (option) => {
-        var _a2;
-        return getLabel3((_a2 = columnDefinition.cellEditorParams) == null ? void 0 : _a2.getLabel, option);
-      },
-      placeholder: (_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.placeholder,
-      onScrollBottom,
-      onSearch,
-      onChange,
-      options: searchResultOptions || options,
-      value: selectedValue,
-      ref
+    function getId3(func, option) {
+      return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.id) ?? option;
     }
-  );
-});
+    return /* @__PURE__ */ React80.createElement(
+      MultiSelect,
+      {
+        beforeShow,
+        afterHide: () => stopEditing(),
+        block: true,
+        loading: isSearching || loading,
+        getId: (option) => {
+          return getId3(getIdParam, option);
+        },
+        getLabel: (option) => {
+          return getLabel3(getLabelParam, option);
+        },
+        placeholder,
+        onScrollBottom,
+        onSearch,
+        onChange,
+        options: searchResultOptions || options,
+        value: selectedValue,
+        ref
+      }
+    );
+  }
+);
 var MultiSelectCellEditor = withDataTableEditor(
   MultiSelectEditor,
   "select"
@@ -104612,11 +104560,6 @@ var de_DE_default = {
       error: "Entschuldigung, die Elemente konnten nicht aktualisiert werden. Versuchen Sie es noch einmal.",
       placeholderForField: "%{fieldName} eingeben",
       selection: "%{count} %{number} ausgew\xE4hlt",
-      selection_count: {
-        zero: "%{count} Elemente ausgew\xE4hlt",
-        one: "%{count} Element ausgew\xE4hlt",
-        other: "%{count} Elemente ausgew\xE4hlt"
-      },
       success: "Die Elemente wurden erfolgreich aktualisiert.",
       one: "Element",
       many: "Elemente"
@@ -104783,11 +104726,6 @@ var en_AU_default = {
       error: "Sorry, the items couldn't be updated. Try again.",
       placeholderForField: "Enter %{fieldName}",
       selection: "%{count} %{number} selected",
-      selection_count: {
-        zero: "%{count} items selected",
-        one: "%{count} item selected",
-        other: "%{count} items selected"
-      },
       success: "The items were successfully updated.",
       one: "item",
       many: "items"
@@ -104851,7 +104789,7 @@ var en_AU_default = {
       autoSizeAllColumns: "Autosize all columns",
       hideColumn: "Hide column",
       resetColumns: "Reset columns",
-      unGroupBy: "Un-Group by {{label}}",
+      unGroupBy: "Un-group by {{label}}",
       groupBy: "Group by {{label}}"
     },
     grandTotals: "Grand totals",
@@ -104954,11 +104892,6 @@ var en_CA_default = {
       error: "Sorry, the items couldn't be updated. Try again.",
       placeholderForField: "Enter %{fieldName}",
       selection: "%{count} %{number} selected",
-      selection_count: {
-        zero: "%{count} items selected",
-        one: "%{count} item selected",
-        other: "%{count} items selected"
-      },
       success: "The items were successfully updated.",
       one: "item",
       many: "items"
@@ -105022,7 +104955,7 @@ var en_CA_default = {
       autoSizeAllColumns: "Autosize all columns",
       hideColumn: "Hide column",
       resetColumns: "Reset columns",
-      unGroupBy: "Un-Group by {{label}}",
+      unGroupBy: "Un-group by {{label}}",
       groupBy: "Group by {{label}}"
     },
     grandTotals: "Grand totals",
@@ -105125,11 +105058,6 @@ var en_GB_default = {
       error: "Sorry, the items couldn't be updated. Try again.",
       placeholderForField: "Enter %{fieldName}",
       selection: "%{count} %{number} selected",
-      selection_count: {
-        zero: "%{count} items selected",
-        one: "%{count} item selected",
-        other: "%{count} items selected"
-      },
       success: "The items were successfully updated.",
       one: "item",
       many: "items"
@@ -105467,11 +105395,6 @@ var es_ES_default = {
       error: "No se han podido actualizar los elementos. Int\xE9ntelo de nuevo.",
       placeholderForField: "Introducir %{fieldName}",
       selection: "%{count} %{number} seleccionados",
-      selection_count: {
-        zero: "%{count} elementos seleccionados",
-        one: "%{count} elemento seleccionado",
-        other: "%{count} elementos seleccionados"
-      },
       success: "Los elementos se han actualizado correctamente.",
       one: "elemento",
       many: "elementos"
@@ -105622,7 +105545,7 @@ var es_default = {
         title: "No hay \xEDtems para mostrar en este momento",
         itemsTitle: "No hay %{itemsLabel} para mostrar en este momento",
         tooltip: "El bot\xF3n %{featureName} se habilitar\xE1 una vez que agregue informaci\xF3n a la %{tableName}.",
-        searchTooltip: "La b\xFAsqueda se habilitar\xE1 una vez que agregue informaci\xF3n a la %{tableName}.",
+        searchTooltip: "La b\xFAsqueda se habilitar\xE1 una vez que agregue informaci\xF3n a la %{tableName}",
         featureFilter: "Filtro",
         featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
@@ -105635,14 +105558,9 @@ var es_default = {
       bulkEdit: "Edici\xF3n masiva",
       cancel: "Cancelar",
       editValues: "Editar valores",
-      error: "Lo sentimos, no se pudieron actualizar los \xEDtems. Vuelva a intentarlo.",
+      error: "Lo sentimos, no se pudieron actualizar los \xEDtems. Int\xE9ntelo de nuevo.",
       placeholderForField: "Ingrese %{fieldName}",
       selection: "%{count} %{number} seleccionado",
-      selection_count: {
-        zero: "%{count} \xEDtems seleccionados",
-        one: "%{count} \xEDtem seleccionado",
-        other: "%{count} \xEDtems seleccionados"
-      },
       success: "Los \xEDtems se actualizaron correctamente.",
       one: "\xEDtem",
       many: "\xEDtems"
@@ -105806,14 +105724,9 @@ var fr_CA_default = {
       bulkEdit: "Modifier en bloc",
       cancel: "Annuler",
       editValues: "Modifier les valeurs",
-      error: "D\xE9sol\xE9, les items n'ont pas pu \xEAtre mis \xE0 jour. R\xE9essayer.",
+      error: "D\xE9sol\xE9, les items n'ont pas pu \xEAtre mis \xE0 jour. Veuillez r\xE9essayer.",
       placeholderForField: "Entrez %{fieldName}",
       selection: "%{count} %{number} s\xE9lectionn\xE9",
-      selection_count: {
-        zero: "%{count}\xA0items s\xE9lectionn\xE9s",
-        one: "%{count}\xA0item s\xE9lectionn\xE9",
-        other: "%{count}\xA0items s\xE9lectionn\xE9s"
-      },
       success: "Les items ont \xE9t\xE9 mis \xE0 jour avec succ\xE8s.",
       one: "Item",
       many: "items"
@@ -105936,7 +105849,7 @@ var fr_CA_default = {
     },
     filterRenders: {
       dateFilter: {
-        single: "Seul",
+        single: "Unique",
         range: "Intervalle"
       }
     },
@@ -105977,14 +105890,9 @@ var fr_FR_default = {
       bulkEdit: "Modifier en masse",
       cancel: "Annuler",
       editValues: "Modifier les valeurs",
-      error: "D\xE9sol\xE9, les \xE9l\xE9ments n'ont pas pu \xEAtre mis \xE0 jour. R\xE9essayez.",
+      error: "D\xE9sol\xE9, les \xE9l\xE9ments n'ont pas pu \xEAtre mis \xE0 jour. Veuillez r\xE9essayer.",
       placeholderForField: "Saisissez %{fieldName}",
       selection: "%{count} %{number} s\xE9lectionn\xE9",
-      selection_count: {
-        zero: "%{count}\xA0\xE9l\xE9ments s\xE9lectionn\xE9s",
-        one: "%{count}\xA0\xE9l\xE9ment s\xE9lectionn\xE9",
-        other: "%{count}\xA0\xE9l\xE9ments s\xE9lectionn\xE9s"
-      },
       success: "Les \xE9l\xE9ments ont bien \xE9t\xE9 mis \xE0 jour.",
       one: "\xE9l\xE9ment",
       many: "\xE9l\xE9ments"
@@ -106151,11 +106059,6 @@ var is_IS_default = {
       error: "\xDEv\xED mi\xF0ur var ekki h\xE6gt a\xF0 uppf\xE6ra atri\xF0in. Reyndu aftur.",
       placeholderForField: "Sl\xE1\xF0u inn %{fieldName}",
       selection: "%{count} %{number} valinn",
-      selection_count: {
-        zero: "%{count} atri\xF0i valin",
-        one: "%{count} atri\xF0i vali\xF0",
-        other: "%{count} atri\xF0i valin"
-      },
       success: "Atri\xF0in voru uppf\xE6r\xF0.",
       one: "Atri\xF0i",
       many: "Hlutir"
@@ -106322,11 +106225,6 @@ var ja_JP_default = {
       error: "\u7533\u3057\u8A33\u3042\u308A\u307E\u305B\u3093\u304C\u3001\u9805\u76EE\u3092\u66F4\u65B0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
       placeholderForField: "%{fieldName}\u3092\u5165\u529B",
       selection: "%{count}%{number}\u3092\u9078\u629E\u3057\u307E\u3057\u305F",
-      selection_count: {
-        zero: "%{count}\u500B\u306E\u9805\u76EE\u3092\u9078\u629E\u3057\u307E\u3057\u305F",
-        one: "%{count}\u500B\u306E\u9805\u76EE\u3092\u9078\u629E\u3057\u307E\u3057\u305F",
-        other: "%{count}\u500B\u306E\u9805\u76EE\u3092\u9078\u629E\u3057\u307E\u3057\u305F"
-      },
       success: "\u9805\u76EE\u3092\u6B63\u5E38\u306B\u66F4\u65B0\u3057\u307E\u3057\u305F\u3002",
       one: "\u9805\u76EE",
       many: "\u9805\u76EE"
@@ -106493,11 +106391,6 @@ var pl_PL_default = {
       error: "Przepraszamy, nie mo\u017Cna zaktualizowa\u0107 pozycji.  Spr\xF3buj ponownie.",
       placeholderForField: "Wprowad\u017A %{fieldName}",
       selection: "Wybrano %{count} %{number}",
-      selection_count: {
-        zero: "Wybrano pozycje: %{count}",
-        one: "Wybrano pozycji: %{count}",
-        other: "Wybrano pozycje: %{count}"
-      },
       success: "Pozycje zosta\u0142y pomy\u015Blnie zaktualizowane.",
       one: "pozycja",
       many: "pozycje"
@@ -106832,14 +106725,9 @@ var pt_BR_default = {
       bulkEdit: "Edi\xE7\xE3o em Massa",
       cancel: "Cancelar",
       editValues: "Editar Valores",
-      error: "Lamentamos, mas n\xE3o foi poss\xEDvel atualizar os itens. Tente novamente.",
+      error: "Sentimos muito, mas n\xE3o foi poss\xEDvel atualizar os itens. Tente novamente.",
       placeholderForField: "Digite %{fieldName}",
       selection: "%{count} %{number} selecionado",
-      selection_count: {
-        zero: "%{count} itens selecionados",
-        one: "%{count} item selecionado",
-        other: "%{count} itens selecionados"
-      },
       success: "Os itens foram atualizados com sucesso.",
       one: "item",
       many: "itens"
@@ -107003,14 +106891,9 @@ var th_TH_default = {
       bulkEdit: "\u0E01\u0E32\u0E23\u0E41\u0E01\u0E49\u0E44\u0E02\u0E41\u0E1A\u0E1A\u0E01\u0E25\u0E38\u0E48\u0E21",
       cancel: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
       editValues: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E04\u0E48\u0E32",
-      error: "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E44\u0E14\u0E49 \u0E42\u0E1B\u0E23\u0E14\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07",
+      error: "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E44\u0E14\u0E49 \u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07.",
       placeholderForField: "\u0E1B\u0E49\u0E2D\u0E19 %{fieldName}",
       selection: "%{count} %{number} \u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01",
-      selection_count: {
-        zero: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27 %{count} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
-        one: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27 %{count} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
-        other: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27 %{count} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23"
-      },
       success: "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
       one: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
       many: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23"
@@ -107177,11 +107060,6 @@ var zh_SG_default = {
       error: "\u62B1\u6B49\uFF0C\u65E0\u6CD5\u66F4\u65B0\u6B64\u9879\u3002\u8BF7\u91CD\u8BD5\u3002",
       placeholderForField: "\u8F93\u5165 %{fieldName}",
       selection: "\u5DF2\u9009\u62E9 %{count} %{number}",
-      selection_count: {
-        zero: "\u5DF2\u9009\u62E9 %{count} \u9879",
-        one: "\u5DF2\u9009\u62E9 %{count} \u9879",
-        other: "\u5DF2\u9009\u62E9 %{count} \u9879"
-      },
       success: "\u5DF2\u6210\u529F\u66F4\u65B0\u8FD9\u4E9B\u9879\u3002",
       one: "\u9879",
       many: "\u9879"
@@ -109051,7 +108929,7 @@ var Table = (props) => {
           (acc, column3) => acc + column3.width,
           0
         );
-        const currentPinnedColumnMaxWidth = tableWidth - totalPinnedWidth + column2.actualWidth - 50;
+        const currentPinnedColumnMaxWidth = tableWidth - totalPinnedWidth + column2.getActualWidth() - 50;
         column2.maxWidth = currentPinnedColumnMaxWidth;
       }
     },
@@ -109624,14 +109502,14 @@ function ClientSideFilterInner(props) {
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = ((_b = (_a = columnDefinition.filterProps) == null ? void 0 : _a.getFilterHeadingText) == null ? void 0 : _b.call(_a, columnDefinition)) ?? columnDefinition.headerName;
   const filterOptions = React80.useMemo(() => options ?? [], [options]);
-  return /* @__PURE__ */ React80.createElement(Box, { as: "li", display: "block", paddingBottom: "xl", style: { width: "100%" } }, filterHeading ? /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React80.createElement(Box, { as: "li", display: "block", paddingBottom: "xl", style: { width: "100%" } }, filterHeading && /* @__PURE__ */ React80.createElement(
     Label$1,
     {
       "data-qa": `data-table-filter-heading-${columnDefinition.field}`,
       id: `data-table-filter-heading-${columnDefinition.field}`
     },
-    filterHeading
-  ) : null, /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React80.createElement(React80.Fragment, null, filterHeading)
+  ), /* @__PURE__ */ React80.createElement(
     Component4,
     {
       "data-qa": `data-table-filter-input-${columnDefinition.field}`,
@@ -110633,58 +110511,60 @@ var getSuperSelectFilterPreset = (columnDefinition) => {
         const isValueEmpty = ["", null, void 0].includes(
           ctx.state.value
         );
-        return /* @__PURE__ */ React80.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
+        return /* @__PURE__ */ React80.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, /* @__PURE__ */ React80.createElement(React80.Fragment, null, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
           isValueEmpty,
           ctx.state.selectedLabel,
           ctx.config.placeholder,
           filterName
-        ));
+        )));
       }),
-      TriggerContainer: React80.forwardRef((props, ref) => {
-        const ctx = UNSAFE_useSuperSelectContext();
-        if (!Array.isArray(ctx.state.value)) {
+      TriggerContainer: React80.forwardRef(
+        (props, ref) => {
+          const ctx = UNSAFE_useSuperSelectContext();
+          if (!Array.isArray(ctx.state.value)) {
+            return /* @__PURE__ */ React80.createElement(
+              UNSAFE_StyledSuperSelectTrigger,
+              {
+                $block: ctx.config.block,
+                ...props,
+                ref
+              }
+            );
+          }
           return /* @__PURE__ */ React80.createElement(
-            UNSAFE_StyledSuperSelectTrigger,
+            Popover,
             {
-              $block: ctx.config.block,
-              ...props,
-              ref
-            }
+              placement: "top",
+              trigger: ctx.state.value.length > 1 ? "hover" : "none",
+              overlay: /* @__PURE__ */ React80.createElement(StyledFilterPresetPopoverContent, null, /* @__PURE__ */ React80.createElement(Typography, null, ctx.state.value.map((v) => {
+                const option = ctx.state.options.find(
+                  (option2) => ctx.option.value(option2) === v
+                );
+                return option ? ctx.option.label(option) : "";
+              }).join(", ")))
+            },
+            /* @__PURE__ */ React80.createElement(
+              UNSAFE_StyledSuperSelectTrigger,
+              {
+                $block: ctx.config.block,
+                ...props,
+                ref
+              }
+            )
           );
         }
-        return /* @__PURE__ */ React80.createElement(
-          Popover,
-          {
-            placement: "top",
-            trigger: ctx.state.value.length > 1 ? "hover" : "none",
-            overlay: /* @__PURE__ */ React80.createElement(StyledFilterPresetPopoverContent, null, /* @__PURE__ */ React80.createElement(Typography, null, ctx.state.value.map((v) => {
-              const option = ctx.state.options.find(
-                (option2) => ctx.option.value(option2) === v
-              );
-              return option ? ctx.option.label(option) : "";
-            }).join(", ")))
-          },
-          /* @__PURE__ */ React80.createElement(
-            UNSAFE_StyledSuperSelectTrigger,
-            {
-              $block: ctx.config.block,
-              ...props,
-              ref
-            }
-          )
-        );
-      }),
+      ),
       MultiValueContainer: () => {
         const ctx = UNSAFE_useSuperSelectContext();
         if (Array.isArray(ctx.state.value)) {
           const isValueEmpty = !ctx.state.value.length;
           const value = ctx.state.value.length > 1 ? `(${ctx.state.value.length})` : ctx.state.value.length === 1 ? `${ctx.state.selectedLabel}` : "";
-          return /* @__PURE__ */ React80.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
+          return /* @__PURE__ */ React80.createElement(UNSAFE_StyledSuperSelectLabel, { $hoverable: false }, /* @__PURE__ */ React80.createElement(React80.Fragment, null, typeof getValueLabel_ === "function" ? getValueLabel_(ctx.state.value) : getValueLabel(
             isValueEmpty,
             value,
             ctx.config.placeholder,
             filterName
-          ));
+          )));
         }
         return /* @__PURE__ */ React80.createElement("div", null, "Value is not an array");
       }
@@ -111241,7 +111121,7 @@ var ClientSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
       if (!colDef) {
         return null;
       }
-      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, getFilterTokenText(colDef, filter.filterValues)), /* @__PURE__ */ React80.createElement(
+      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: filter.field }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, getFilterTokenText(colDef, filter.filterValues))), /* @__PURE__ */ React80.createElement(
         UNSAFE_FilterToken.Remove,
         {
           onClick: () => {
@@ -111340,10 +111220,10 @@ var ServerSideQuickFilters = ({ overlayMatchesTriggerWidth }) => {
         return null;
       }
       const filter = getListFilter(fieldName);
-      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, getFilterTokenText(
+      return /* @__PURE__ */ React80.createElement(StyledFilterTokenWrapper, { key: fieldName }, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken, null, /* @__PURE__ */ React80.createElement(UNSAFE_FilterToken.Label, null, /* @__PURE__ */ React80.createElement(React80.Fragment, null, getFilterTokenText(
         colDef,
         colDef.filterRenderer === DateFilterRenderer_default ? filter.value : filter.selected
-      )), /* @__PURE__ */ React80.createElement(
+      ))), /* @__PURE__ */ React80.createElement(
         UNSAFE_FilterToken.Remove,
         {
           "data-qa": "data-table-quick-filter-remove-token",