@procore/data-table 14.31.0 → 14.33.0

package/dist/modern/index.js

@@ -7982,31 +7982,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 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(
-        columnDefinition.cellRendererParams?.typographyProps
-      )
-    },
-    internalValue
-  );
+  return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps }, internalValue);
 };
 var BooleanCellRenderer = withDataTableRenderer(
   InternalBooleanCellRenderer,
@@ -8047,12 +8031,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,
@@ -8154,10 +8139,12 @@ function ContactItem({
 
 // src/CellRenderers/CompanyCell.tsx
 var Renderer2 = ({
-  columnDefinition,
   rowHeight,
   isGroup,
-  value
+  value,
+  getCompanyName,
+  getImageURL,
+  typographyProps
 }) => {
   const [showAvatar, setShowAvatar] = React80.useState(false);
   React80.useEffect(() => {
@@ -8166,18 +8153,9 @@ var Renderer2 = ({
   if (value === void 0 || value === null) {
     return null;
   }
-  const companyName = isGroup ? value : columnDefinition.cellRendererParams?.getCompanyName?.(value) ?? value.name;
-  const imageURL = columnDefinition.cellRendererParams?.getImageURL?.(value);
-  return isGroup ? /* @__PURE__ */ React80.createElement(
-    Typography,
-    {
-      ...getCellValueTypographyProps(
-        columnDefinition.cellRendererParams?.typographyProps
-      ),
-      weight: "semibold"
-    },
-    companyName
-  ) : /* @__PURE__ */ React80.createElement(
+  const companyName = isGroup ? value : getCompanyName?.(value) ?? value.name;
+  const imageURL = getImageURL?.(value);
+  return isGroup ? /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, companyName) : /* @__PURE__ */ React80.createElement(
     ContactItem,
     {
       imageUrl: showAvatar ? imageURL : void 0,
@@ -8212,28 +8190,19 @@ var Renderer3 = ({
   columnDefinition,
   isGroup,
   rowPinned,
-  value
+  value,
+  typographyProps,
+  formatConfig,
+  inputProps
 }) => {
   const I18n = useI18nContext();
-  const internalValue = value !== void 0 && formatCurrency(
-    value?.toString(),
-    columnDefinition.cellRendererParams?.formatConfig
-  ) || void 0;
+  const internalValue = value !== void 0 && formatCurrency(value?.toString(), formatConfig) || void 0;
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            columnDefinition.cellRendererParams?.typographyProps
-          ),
-          className: cx3("input-placeholder")
-        },
-        columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder")
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx3("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder"));
     }
   }
   if (isGroup) {
@@ -8250,10 +8219,8 @@ var Renderer3 = ({
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
-      ...getCellValueTypographyProps(
-        columnDefinition.cellRendererParams?.typographyProps
-      ),
-      weight: rowPinned ? "bold" : columnDefinition.cellRendererParams?.typographyProps?.weight,
+      ...typographyProps,
+      weight: rowPinned ? "bold" : typographyProps?.weight,
       className: cx3("tabular-nums")
     },
     internalValue
@@ -8261,7 +8228,14 @@ var Renderer3 = ({
 };
 var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
 var Editor = React80.forwardRef(
-  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
+  ({
+    columnDefinition,
+    eventKey,
+    stopEditing,
+    value,
+    formatConfig,
+    inputProps
+  }, ref) => {
     const I18n = useI18nContext();
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
@@ -8270,19 +8244,20 @@ var Editor = React80.forwardRef(
       stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const defaultValue = eventKey ? value : formatNumber(value, {
-      ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
+      ...formatConfig || columnDefinition.cellRendererParams?.formatConfig,
+      //TODO remove usage of columnDefinition.cellRendererParams in next major version
       symbol: void 0,
       symbolAfterValue: void 0
     });
     return /* @__PURE__ */ React80.createElement(
       Input,
       {
-        placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder"),
+        placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder"),
         defaultValue,
         onBlur,
         ref,
         className: cx3("input-cell", "input-cell--right-aligned"),
-        ...columnDefinition.cellEditorParams?.inputProps || {}
+        ...inputProps
       }
     );
   }
@@ -8694,6 +8669,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) {
@@ -8780,36 +8763,32 @@ function getDateObject2(date) {
   return date;
 }
 var DateTimeCellValue = ({
-  columnDefinition,
   isGroup,
-  value
+  value,
+  typographyProps,
+  dateFormatType
 }) => {
   const { format: format3 } = useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject2(value);
-  const internalValue = parsedValue ? format3(
-    parsedValue,
-    columnDefinition.cellRendererParams?.dateFormatType || "abbr-weekday-abbr-date-at-time"
-  ) : void 0;
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.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) => {
-  return /* @__PURE__ */ React80.createElement(
-    OptionalDateTimeProvider,
-    {
-      timeZone: props.columnDefinition?.cellRendererParams?.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) => {
+  ({
+    columnDefinition,
+    setDataValue,
+    stopEditing,
+    value,
+    timeZone,
+    disabledDate
+  }, ref) => {
     function afterHide(event) {
       stopEditing(ensureIsHTMLElement(event?.target));
     }
@@ -8820,23 +8799,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: columnDefinition.cellEditorParams?.timeZone
-      },
-      /* @__PURE__ */ React80.createElement(
-        DateSelect,
-        {
-          afterHide,
-          className: cx5("input-cell"),
-          disabledDate: columnDefinition.cellEditorParams?.disabledDate,
-          onChange,
-          ref,
-          value: getDateObject2(value)
-        }
-      )
-    );
+        afterHide,
+        className: cx5("input-cell"),
+        disabledDate,
+        onChange,
+        ref,
+        value: getDateObject2(value)
+      }
+    ));
   }
 );
 var DateTimeCellEditor = withDataTableEditor(Editor3, "date");
@@ -52362,15 +52335,21 @@ 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 InternalLinkCellRenderer = ({
+  columnDefinition,
+  isGroup,
+  data,
+  rowHeight,
+  value,
+  typographyProps,
+  isExternalLink,
+  getURL
+}) => {
   const [isLinkWidthBelowMin, setIsLinkWidthBelowMin] = useState(false);
   const linkRef = useRef(null);
   const internalValue = value ? columnDefinition.getStringFormattedValue?.(value) : "";
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
   const className = cx6(
-    columnDefinition.cellRendererParams?.typographyProps?.className,
+    typographyProps?.className,
     "textCell",
     "truncatingText",
     {
@@ -52388,8 +52367,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
   }) : "";
@@ -52419,23 +52397,22 @@ var LinkCellRenderer = withDataTableRenderer(
   "input"
 );
 var cx7 = classnames.bind(styles_default);
-var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value }) => {
+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(
-            columnDefinition.cellRendererParams?.typographyProps
-          ),
-          className: cx7("input-placeholder")
-        },
-        columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder")
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx7("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder"));
     }
     return /* @__PURE__ */ React80.createElement(React80.Fragment, null);
   }
@@ -52444,7 +52421,7 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
     minDecimalPrecision: 0,
     shouldUseGtk: true,
     symbol: "",
-    ...columnDefinition.cellRendererParams?.formatConfig
+    ...formatConfig
   });
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(Typography, { intent: "small", weight: "semibold" }, internalValue);
@@ -52452,10 +52429,8 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
-      ...getCellValueTypographyProps(
-        columnDefinition.cellRendererParams?.typographyProps
-      ),
-      weight: rowPinned ? "bold" : columnDefinition.cellRendererParams?.typographyProps?.weight
+      ...typographyProps,
+      weight: rowPinned ? "bold" : typographyProps?.weight
     },
     internalValue
   );
@@ -52464,7 +52439,7 @@ var NumberCellRenderer = withDataTableRenderer(
   InternalNumberCellRenderer,
   "input"
 );
-var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
+var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditing, value, inputProps }, ref) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -52475,13 +52450,13 @@ var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditi
   return /* @__PURE__ */ React80.createElement(
     Input,
     {
-      placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder"),
+      placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder"),
       type: "number",
       defaultValue: value,
       onBlur,
       ref,
       className: cx7("input-cell", "input-cell--right-aligned"),
-      ...columnDefinition.cellEditorParams?.inputProps || {}
+      ...inputProps
     }
   );
 });
@@ -52562,39 +52537,42 @@ var defaultAvatarStackItemFilter = (person) => !!person || !!person.id;
 var Renderer6 = ({
   columnDefinition,
   rowHeight,
-  value
+  value,
+  getValue: getValue2,
+  getCompanyName: getCompanyNameParam,
+  getPersonName: getPersonNameParam,
+  getInitials,
+  getImageURL,
+  typographyProps
 }) => {
   const [fullCellView, setFullCellView] = React80.useState(false);
   const getPeople = React80.useCallback(() => {
-    return columnDefinition.cellRendererParams?.getValue?.(value) || value || [];
-  }, [columnDefinition.cellRendererParams?.getValue, value]);
+    return getValue2?.(value) || value || [];
+  }, [getValue2, value]);
   const getCompanyName = React80.useCallback(
     (person) => {
-      return columnDefinition.cellRendererParams?.getCompanyName?.(person) ?? person.company ?? "";
+      return getCompanyNameParam?.(person) ?? person.company ?? "";
     },
-    [columnDefinition.cellRendererParams?.getCompanyName]
+    [getCompanyNameParam]
   );
   const getPersonName = React80.useCallback(
     (person) => {
-      return columnDefinition.cellRendererParams?.getPersonName?.(person) ?? person.name ?? "";
+      return getPersonNameParam?.(person) ?? person.name ?? "";
     },
-    [columnDefinition.cellRendererParams?.getPersonName]
+    [getPersonNameParam]
   );
   const getPersonImageUrl = React80.useCallback(
     (person) => {
-      return columnDefinition.cellRendererParams?.getImageURL?.(person) ?? "";
+      return getImageURL?.(person) ?? "";
     },
-    [columnDefinition.cellRendererParams?.getImageURL]
+    [getImageURL]
   );
   const getPersonInitials = React80.useCallback(
     (person) => {
-      return columnDefinition.cellRendererParams?.getInitials?.(person) ?? "";
+      return getInitials?.(person) ?? "";
     },
-    [columnDefinition.cellRendererParams?.getInitials]
+    [getInitials]
   );
-  React80.useEffect(() => {
-    setFullCellView(rowHeight === rowSize.lg || rowHeight === rowSize.md);
-  }, [rowHeight]);
   const getPersonNameWithCompany = React80.useCallback(
     (person) => {
       const name = getPersonName(person);
@@ -52603,6 +52581,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]
@@ -52618,9 +52599,6 @@ var Renderer6 = ({
     }
     return avatarWidth * avatarCount;
   }, [getPeople, rowHeight]);
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
   const people = getPeople();
   if (isEmptyValue(value) || people.length === 0) {
     return null;
@@ -52729,7 +52707,10 @@ var Renderer7 = ({
   columnDefinition,
   isGroup,
   rowPinned,
-  value
+  value,
+  typographyProps,
+  inputProps,
+  formatConfig
 }) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
@@ -52737,22 +52718,10 @@ var Renderer7 = ({
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            columnDefinition.cellRendererParams?.typographyProps
-          ),
-          className: cx9("input-placeholder")
-        },
-        columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder")
-      );
+      return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx9("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder"));
     }
   }
-  const internalValue = formatPercentage(
-    value?.toString() ?? "",
-    columnDefinition.cellRendererParams?.formatConfig
-  );
+  const internalValue = formatPercentage(value?.toString() ?? "", formatConfig);
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(
       Typography,
@@ -52767,48 +52736,60 @@ var Renderer7 = ({
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
-      ...getCellValueTypographyProps(
-        columnDefinition.cellRendererParams?.typographyProps
-      ),
-      weight: rowPinned ? "bold" : columnDefinition.cellRendererParams?.typographyProps?.weight,
+      ...typographyProps,
+      weight: rowPinned ? "bold" : typographyProps?.weight,
       className: cx9("tabular-nums")
     },
     internalValue
   );
 };
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
-var Editor4 = React80.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
-  const I18n = useI18nContext();
-  function onBlur(event) {
-    stopEditing(ensureIsHTMLElement(event.relatedTarget));
-  }
-  if (isEmptyValue(value) && !columnDefinition.editable) {
-    return null;
-  }
-  const defaultValue = eventKey ? value : formatNumber(value, {
-    ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
-    symbol: void 0,
-    symbolAfterValue: void 0
-  });
-  return /* @__PURE__ */ React80.createElement(
-    Input,
-    {
-      placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder"),
-      className: cx9("input-cell", "input-cell--right-aligned"),
-      defaultValue,
-      onBlur,
-      ref,
-      style: { textAlign: "right" },
-      ...columnDefinition.cellEditorParams?.inputProps || {}
+var Editor4 = React80.forwardRef(
+  ({
+    columnDefinition,
+    eventKey,
+    stopEditing,
+    value,
+    formatConfig,
+    inputProps
+  }, ref) => {
+    const I18n = useI18nContext();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
-  );
-});
+    if (isEmptyValue(value) && !columnDefinition.editable) {
+      return null;
+    }
+    const defaultValue = eventKey ? value : formatNumber(value, {
+      ...formatConfig || columnDefinition.cellRendererParams?.formatConfig,
+      //TODO remove usage of columnDefinition.cellRendererParams in next major version
+      symbol: void 0,
+      symbolAfterValue: void 0
+    });
+    return /* @__PURE__ */ React80.createElement(
+      Input,
+      {
+        placeholder: 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
 }) => {
   const [showAvatar, setShowAvatar] = React80.useState(false);
   React80.useEffect(() => {
@@ -52817,13 +52798,10 @@ var Renderer8 = ({
   if (value === void 0 || value === null) {
     return null;
   }
-  const name = columnDefinition.cellRendererParams?.getPersonName?.(value);
-  const companyName = columnDefinition.cellRendererParams?.getCompanyName?.(value);
-  const imageURL = columnDefinition.cellRendererParams?.getImageURL?.(value);
-  const initials = columnDefinition.cellRendererParams?.getInitials?.(value);
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
+  const name = getPersonName?.(value);
+  const companyName = getCompanyName?.(value);
+  const imageURL = getImageURL?.(value);
+  const initials = getInitials?.(value);
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, name);
   }
@@ -52847,34 +52825,25 @@ var Renderer9 = ({
   columnDefinition,
   isGroup,
   value,
-  rowPinned
+  rowPinned,
+  getColor,
+  displayAsPill,
+  typographyProps,
+  placeholder
 }) => {
-  const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            columnDefinition.cellRendererParams?.typographyProps
-          ),
-          className: cx10("input-placeholder")
-        },
-        columnDefinition.cellEditorParams?.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 = columnDefinition.getStringFormattedValue?.(value) || value;
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
   if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
     return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
   }
@@ -52882,7 +52851,18 @@ var Renderer9 = ({
 };
 var PillCellRenderer = withDataTableRenderer(Renderer9, "select");
 var Editor5 = React80.forwardRef(
-  ({ columnDefinition, data, setDataValue, stopEditing, value }, ref) => {
+  ({
+    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();
@@ -52890,7 +52870,6 @@ var Editor5 = React80.forwardRef(
       stopEditing();
     }
     async function beforeShow() {
-      const selectOptions = columnDefinition.cellEditorParams?.selectOptions || [];
       if (Array.isArray(selectOptions)) {
         setOptions(selectOptions);
       } else {
@@ -52907,7 +52886,7 @@ var Editor5 = React80.forwardRef(
       setDataValue(columnDefinition.field, null);
     }
     function getId3(item) {
-      return columnDefinition.cellEditorParams?.getId?.(item) ?? item;
+      return getIdParam?.(item) ?? item;
     }
     function getLabel3(item) {
       const unformattedLabel = columnDefinition.getStringFormattedValue?.(item) || "";
@@ -52916,17 +52895,17 @@ var Editor5 = React80.forwardRef(
     return /* @__PURE__ */ React80.createElement(
       PillSelect,
       {
-        placeholder: columnDefinition.cellEditorParams?.placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
+        placeholder: placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
           label: columnDefinition.headerName
         }),
         afterHide,
         beforeShow,
         block: true,
-        getColor: columnDefinition.cellEditorParams?.getColor ?? columnDefinition.cellRendererParams.getColor,
+        getColor,
         getId: getId3,
         getLabel: getLabel3,
         loading,
-        onClear: columnDefinition.cellEditorParams?.clearable ? onClear : void 0,
+        onClear: clearable ? onClear : void 0,
         onSelect,
         options,
         ref,
@@ -52971,13 +52950,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) => {
     setLoading(true);
-    const selectOptions = columnDefinition.cellEditorParams?.selectOptions || [];
     let newOptions = [];
     let total = 0;
     if (typeof selectOptions === "function") {
@@ -53009,7 +52987,9 @@ var cx11 = classnames.bind({ ...styles_default, ...truncation_default });
 var Renderer10 = ({
   columnDefinition,
   isGroup,
-  value
+  value,
+  typographyProps,
+  placeholder
 }) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
@@ -53017,24 +52997,12 @@ var Renderer10 = ({
       return null;
     }
     if (columnDefinition.editable) {
-      return /* @__PURE__ */ React80.createElement(
-        Typography,
-        {
-          ...getCellValueTypographyProps(
-            columnDefinition.cellRendererParams?.typographyProps
-          ),
-          className: cx11("truncatingText")
-        },
-        columnDefinition.cellEditorParams?.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 = columnDefinition.getStringFormattedValue?.(value);
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
   if (isGroup) {
     return /* @__PURE__ */ React80.createElement(
       Typography,
@@ -53050,14 +53018,25 @@ var Renderer10 = ({
 };
 var SelectCellRenderer = withDataTableRenderer(Renderer10, "select");
 var Editor6 = React80.forwardRef(
-  ({ columnDefinition, data, setDataValue, stopEditing, value }, ref) => {
+  ({
+    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,
-      columnDefinition.cellEditorParams?.onSearch
+      onSearchParam
     );
     function onSelect(selection) {
       if (selection.item !== value) {
@@ -53080,13 +53059,13 @@ var Editor6 = React80.forwardRef(
       }
     }, 500);
     function getId3(val) {
-      return columnDefinition.cellEditorParams?.getId?.(val) ?? val;
+      return getIdParam?.(val) ?? val;
     }
     function getLabel3(val) {
       return columnDefinition.getStringFormattedValue?.(val);
     }
     function getOptionLabel(option) {
-      return columnDefinition.cellEditorParams?.getOptionLabel?.(option) || getLabel3(option);
+      return getOptionLabelParam?.(option) || getLabel3(option);
     }
     return /* @__PURE__ */ React80.createElement(
       Select,
@@ -53098,7 +53077,7 @@ var Editor6 = React80.forwardRef(
         loading: isSearching || loading,
         onSearch,
         onSelect,
-        onClear: columnDefinition.cellEditorParams?.clearable ? onClear : void 0,
+        onClear: clearable ? onClear : void 0,
         onScrollBottom,
         ref,
         className: cx11("input-cell", "truncatingText")
@@ -53122,27 +53101,20 @@ var Renderer11 = ({
   rowHeight,
   node,
   isGroup,
-  value
+  value,
+  typographyProps,
+  inputProps
 }) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value) && columnDefinition.editable) {
     if (isGroup) {
       return null;
     }
-    return /* @__PURE__ */ React80.createElement(
-      Typography,
-      {
-        ...getCellValueTypographyProps(
-          columnDefinition.cellRendererParams?.typographyProps
-        ),
-        className: cx12("input-placeholder")
-      },
-      columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
-    );
+    return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx12("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"));
   }
   const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
   const className = cx12(
-    columnDefinition.cellRendererParams?.typographyProps?.className,
+    typographyProps?.className,
     "textCell",
     "truncatingText",
     {
@@ -53150,9 +53122,6 @@ var Renderer11 = ({
       "truncatingText--lg": rowHeight === rowSize.lg
     }
   );
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
   if (isGroup) {
     const fontWeight = node?.footer ? "regular" : "semibold";
     return /* @__PURE__ */ React80.createElement(
@@ -53170,7 +53139,7 @@ var Renderer11 = ({
 };
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React80.forwardRef(
-  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value, inputProps }, ref) => {
     function onBlur(event) {
       stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
@@ -53179,12 +53148,12 @@ var Editor7 = React80.forwardRef(
     return /* @__PURE__ */ React80.createElement(
       Input,
       {
-        placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"),
         className: cx12("input-cell"),
         defaultValue: internalValue,
         onBlur,
         ref,
-        ...columnDefinition.cellEditorParams?.inputProps || {}
+        ...inputProps,
+        placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
       }
     );
   }
@@ -53204,28 +53173,18 @@ var Renderer12 = ({
   columnDefinition,
   node,
   isGroup,
-  value
+  value,
+  typographyProps,
+  textAreaProps
 }) => {
   const I18n = useI18nContext();
   if (isEmptyValue(value) && columnDefinition.editable) {
     if (isGroup) {
       return null;
     }
-    return /* @__PURE__ */ React80.createElement(
-      Typography,
-      {
-        ...getCellValueTypographyProps(
-          columnDefinition.cellRendererParams?.typographyProps
-        ),
-        className: cx13("input-placeholder")
-      },
-      columnDefinition.cellEditorParams?.textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
-    );
+    return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx13("input-placeholder") }, textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"));
   }
   const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
-  const typographyProps = getCellValueTypographyProps(
-    columnDefinition.cellRendererParams?.typographyProps
-  );
   if (isGroup) {
     const fontWeight = node?.footer ? "regular" : "semibold";
     return /* @__PURE__ */ React80.createElement(
@@ -53241,7 +53200,7 @@ var Renderer12 = ({
   return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx13("textarea-cell", "text") }, internalValue);
 };
 var Editor8 = React80.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, stopEditing, value, textAreaProps }, ref) => {
     function onBlur(event) {
       stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
@@ -53250,14 +53209,14 @@ var Editor8 = React80.forwardRef(
     return /* @__PURE__ */ React80.createElement(
       TextArea,
       {
-        placeholder: columnDefinition.cellEditorParams?.textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"),
         className: cx13("textarea-cell", "editor-text"),
         defaultValue: internalValue,
         onBlur,
         ref,
         resize: "none",
         style: { lineHeight: "16px" },
-        ...columnDefinition.cellEditorParams?.textAreaProps || {}
+        ...textAreaProps,
+        placeholder: textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
       }
     );
   }
@@ -53940,7 +53899,7 @@ var NumberFilterRenderer = React80.memo(
         return {
           type: prev?.type,
           filter: prev?.filter,
-          filterTo: inputValue
+          filterTo: inputValue !== "" ? Number(inputValue) : void 0
         };
       });
       if (inputValue === void 0 || inputValue === "") {
@@ -53950,7 +53909,7 @@ var NumberFilterRenderer = React80.memo(
         return {
           type: prev?.type,
           filter: prev?.filter,
-          filterTo: inputValue
+          filterTo: Number(inputValue)
         };
       });
     }, []);
@@ -54217,7 +54176,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,
@@ -55609,11 +55568,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(
@@ -55879,7 +55835,8 @@ var DataTableCellRenderer = ({
   node,
   editorType,
   value,
-  setValue
+  setValue,
+  ...props
 }) => {
   const { columnApi } = useInternalTableContext();
   const columnDefinition = transformToColumnDefinition(colDef);
@@ -55909,10 +55866,11 @@ var DataTableCellRenderer = ({
     parentData: context?.parentData,
     parentId: context?.parentId,
     rowHeight,
-    rowIndex: node.rowIndex,
     rowPinned: node.rowPinned,
     tableApi: tableRef?.current,
-    value
+    value,
+    ...props,
+    typographyProps: getCellValueTypographyProps(props.typographyProps)
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
   const isSelectCellComponent = columnDefinition.cellRendererSelector?.({
@@ -55992,7 +55950,8 @@ var DataTableCellEditor = React80.forwardRef(
     node,
     parseValue,
     stopEditing,
-    value
+    value,
+    ...props
   }, ref) => {
     const startingValue = getStartingValue(eventKey, editorType, value);
     const [currentValue, setCurrentValue] = useState(startingValue);
@@ -56099,7 +56058,7 @@ var DataTableCellEditor = React80.forwardRef(
             setCurrentValue(newValue);
           },
           stopEditing: (relatedTarget) => {
-            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table') === null;
+            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table"]') === null;
             stopEditing(isRelatedTargetOutsideTable);
             if (isRelatedTargetOutsideTable) {
               api.clearFocusedCell();
@@ -56108,7 +56067,8 @@ var DataTableCellEditor = React80.forwardRef(
           },
           tableApi: tableRef?.current,
           value: currentValue,
-          ref: handleRefs(editorType)
+          ref: handleRefs(editorType),
+          ...props
         }
       )
     );
@@ -57185,7 +57145,17 @@ function getLabel2(func, option) {
 function getId2(func, option) {
   return func?.(option) ?? option?.id ?? option;
 }
-var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
+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(() => {
@@ -57194,20 +57164,14 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
   if (value === void 0 || value === null) {
     return null;
   }
-  const options = getValue(
-    columnDefinition.cellRendererParams?.getValue,
-    value,
-    emptyArray
-  );
-  const enablePlaceholder = (columnDefinition.cellRendererParams?.enablePlaceholder && columnDefinition.editable) ?? false;
-  const placeholder = columnDefinition.cellRendererParams?.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(
-        columnDefinition.cellRendererParams?.typographyProps
-      ),
+      ...typographyProps,
       className: cx16("inlineListItems", "truncatingText", {
         "truncatingText--md": rowHeight === rowSize.md,
         "truncatingText--lg": rowHeight === rowSize.lg
@@ -57215,14 +57179,8 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
       ref
     },
     options.length ? options.map((option, idx, arr) => {
-      const label = getLabel2(
-        columnDefinition.cellRendererParams?.getLabel,
-        option
-      );
-      const optionId = getId2(
-        columnDefinition.cellRendererParams?.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
@@ -57232,63 +57190,80 @@ var MultiSelectCellRenderer = withDataTableRenderer(
   InternalMultiSelectCellRenderer,
   "select"
 );
-var MultiSelectEditor = React80.forwardRef(({ columnDefinition, value = [], setDataValue, data, stopEditing }, ref) => {
-  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?.(option) ?? option?.label ?? option?.name ?? option;
     }
-  }
-  function getLabel3(func, option) {
-    return func?.(option) ?? option?.label ?? option?.name ?? option;
-  }
-  function getId3(func, option) {
-    return func?.(option) ?? option?.id ?? option;
-  }
-  return /* @__PURE__ */ React80.createElement(
-    MultiSelect,
-    {
-      beforeShow,
-      afterHide: () => stopEditing(),
-      block: true,
-      loading: isSearching || loading,
-      getId: (option) => {
-        return getId3(columnDefinition.cellEditorParams?.getId, option);
-      },
-      getLabel: (option) => {
-        return getLabel3(columnDefinition.cellEditorParams?.getLabel, option);
-      },
-      placeholder: columnDefinition.cellEditorParams?.placeholder,
-      onScrollBottom,
-      onSearch,
-      onChange,
-      options: searchResultOptions || options,
-      value: selectedValue,
-      ref
+    function getId3(func, option) {
+      return func?.(option) ?? 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"
@@ -104446,11 +104421,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"
@@ -104617,11 +104587,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"
@@ -104685,7 +104650,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",
@@ -104788,11 +104753,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"
@@ -104856,7 +104816,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",
@@ -104959,11 +104919,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"
@@ -105301,11 +105256,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"
@@ -105456,7 +105406,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",
@@ -105469,14 +105419,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"
@@ -105640,14 +105585,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"
@@ -105770,7 +105710,7 @@ var fr_CA_default = {
     },
     filterRenders: {
       dateFilter: {
-        single: "Seul",
+        single: "Unique",
         range: "Intervalle"
       }
     },
@@ -105811,14 +105751,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"
@@ -105985,11 +105920,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"
@@ -106156,11 +106086,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"
@@ -106327,11 +106252,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"
@@ -106666,14 +106586,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"
@@ -106837,14 +106752,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"
@@ -107011,11 +106921,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"
@@ -108843,7 +108748,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;
       }
     },
@@ -109406,14 +109311,14 @@ function ClientSideFilterInner(props) {
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = columnDefinition.filterProps?.getFilterHeadingText?.(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}`,
@@ -110407,58 +110312,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");
       }
@@ -110990,7 +110897,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: () => tableRef?.current?.removeFilter(filter.field)
@@ -111085,10 +110992,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",