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