@procore/data-table 14.32.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,41 +52546,42 @@ 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]
   );
   const getPersonNameWithCompany = React80.useCallback(
     (person) => {
@@ -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")
       }
     );
   }
@@ -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"