@procore/data-table 14.32.0 → 14.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,6 +10,7 @@ import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-fi
10
10
  import styled4, { css as css$1 } from 'styled-components';
11
11
  import { format } from '@procore/labs-financials-utils/dist/format';
12
12
  import { detectPrng, factory } from 'ulid';
13
+ import { isCDNFeatureFlagEnabled, useRequestTranslations } from '@procore/cdn-translations';
13
14
  import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
14
15
  import ReactDOM, { createPortal } from 'react-dom';
15
16
  import { renderToString, renderToStaticMarkup } from 'react-dom/server';
@@ -7982,31 +7983,15 @@ var styles_default = {
7982
7983
  "spin": "_spin_if78k_1"
7983
7984
  };
7984
7985
 
7985
- // src/utils/getCellValueTypographyProps.ts
7986
- function getCellValueTypographyProps(typographyProps) {
7987
- return {
7988
- intent: "small",
7989
- ...typographyProps ?? {}
7990
- };
7991
- }
7992
-
7993
7986
  // src/CellRenderers/BooleanCell.tsx
7994
7987
  var cx = classnames.bind(styles_default);
7995
- var InternalBooleanCellRenderer = ({ columnDefinition, isGroup, value }) => {
7988
+ var InternalBooleanCellRenderer = ({ isGroup, value, typographyProps }) => {
7996
7989
  const I18n = useI18nContext();
7997
7990
  const internalValue = value ? I18n.t("dataTable.cells.booleanCell.options.yes") : I18n.t("dataTable.cells.booleanCell.options.no");
7998
7991
  if (isGroup) {
7999
7992
  return null;
8000
7993
  }
8001
- return /* @__PURE__ */ React80.createElement(
8002
- Typography,
8003
- {
8004
- ...getCellValueTypographyProps(
8005
- columnDefinition.cellRendererParams?.typographyProps
8006
- )
8007
- },
8008
- internalValue
8009
- );
7994
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps }, internalValue);
8010
7995
  };
8011
7996
  var BooleanCellRenderer = withDataTableRenderer(
8012
7997
  InternalBooleanCellRenderer,
@@ -8047,12 +8032,13 @@ var BooleanCellEditor = withDataTableEditor(
8047
8032
  var Renderer = ({
8048
8033
  columnDefinition,
8049
8034
  rowPinned,
8035
+ buttons,
8050
8036
  ...props
8051
8037
  }) => {
8052
8038
  if (rowPinned) {
8053
8039
  return null;
8054
8040
  }
8055
- return /* @__PURE__ */ React80.createElement(FlexList, { justifyContent: "center", alignItems: "center", size: "xs" }, columnDefinition.cellRendererParams.buttons.map((Button6) => /* @__PURE__ */ React80.createElement(
8041
+ return /* @__PURE__ */ React80.createElement(FlexList, { justifyContent: "center", alignItems: "center", size: "xs" }, buttons.map((Button6) => /* @__PURE__ */ React80.createElement(
8056
8042
  Button6,
8057
8043
  {
8058
8044
  key: Button6.displayName,
@@ -8154,10 +8140,12 @@ function ContactItem({
8154
8140
 
8155
8141
  // src/CellRenderers/CompanyCell.tsx
8156
8142
  var Renderer2 = ({
8157
- columnDefinition,
8158
8143
  rowHeight,
8159
8144
  isGroup,
8160
- value
8145
+ value,
8146
+ getCompanyName,
8147
+ getImageURL,
8148
+ typographyProps
8161
8149
  }) => {
8162
8150
  const [showAvatar, setShowAvatar] = React80.useState(false);
8163
8151
  React80.useEffect(() => {
@@ -8166,18 +8154,9 @@ var Renderer2 = ({
8166
8154
  if (value === void 0 || value === null) {
8167
8155
  return null;
8168
8156
  }
8169
- const companyName = isGroup ? value : columnDefinition.cellRendererParams?.getCompanyName?.(value) ?? value.name;
8170
- const imageURL = columnDefinition.cellRendererParams?.getImageURL?.(value);
8171
- return isGroup ? /* @__PURE__ */ React80.createElement(
8172
- Typography,
8173
- {
8174
- ...getCellValueTypographyProps(
8175
- columnDefinition.cellRendererParams?.typographyProps
8176
- ),
8177
- weight: "semibold"
8178
- },
8179
- companyName
8180
- ) : /* @__PURE__ */ React80.createElement(
8157
+ const companyName = isGroup ? value : getCompanyName?.(value) ?? value.name;
8158
+ const imageURL = getImageURL?.(value);
8159
+ return isGroup ? /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, companyName) : /* @__PURE__ */ React80.createElement(
8181
8160
  ContactItem,
8182
8161
  {
8183
8162
  imageUrl: showAvatar ? imageURL : void 0,
@@ -8212,28 +8191,19 @@ var Renderer3 = ({
8212
8191
  columnDefinition,
8213
8192
  isGroup,
8214
8193
  rowPinned,
8215
- value
8194
+ value,
8195
+ typographyProps,
8196
+ formatConfig,
8197
+ inputProps
8216
8198
  }) => {
8217
8199
  const I18n = useI18nContext();
8218
- const internalValue = value !== void 0 && formatCurrency(
8219
- value?.toString(),
8220
- columnDefinition.cellRendererParams?.formatConfig
8221
- ) || void 0;
8200
+ const internalValue = value !== void 0 && formatCurrency(value?.toString(), formatConfig) || void 0;
8222
8201
  if (isEmptyValue(value)) {
8223
8202
  if (isGroup) {
8224
8203
  return null;
8225
8204
  }
8226
8205
  if (columnDefinition.editable) {
8227
- return /* @__PURE__ */ React80.createElement(
8228
- Typography,
8229
- {
8230
- ...getCellValueTypographyProps(
8231
- columnDefinition.cellRendererParams?.typographyProps
8232
- ),
8233
- className: cx3("input-placeholder")
8234
- },
8235
- columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder")
8236
- );
8206
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx3("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder"));
8237
8207
  }
8238
8208
  }
8239
8209
  if (isGroup) {
@@ -8250,10 +8220,8 @@ var Renderer3 = ({
8250
8220
  return /* @__PURE__ */ React80.createElement(
8251
8221
  Typography,
8252
8222
  {
8253
- ...getCellValueTypographyProps(
8254
- columnDefinition.cellRendererParams?.typographyProps
8255
- ),
8256
- weight: rowPinned ? "bold" : columnDefinition.cellRendererParams?.typographyProps?.weight,
8223
+ ...typographyProps,
8224
+ weight: rowPinned ? "bold" : typographyProps?.weight,
8257
8225
  className: cx3("tabular-nums")
8258
8226
  },
8259
8227
  internalValue
@@ -8261,7 +8229,14 @@ var Renderer3 = ({
8261
8229
  };
8262
8230
  var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
8263
8231
  var Editor = React80.forwardRef(
8264
- ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
8232
+ ({
8233
+ columnDefinition,
8234
+ eventKey,
8235
+ stopEditing,
8236
+ value,
8237
+ formatConfig,
8238
+ inputProps
8239
+ }, ref) => {
8265
8240
  const I18n = useI18nContext();
8266
8241
  if (isEmptyValue(value) && !columnDefinition.editable) {
8267
8242
  return null;
@@ -8270,19 +8245,20 @@ var Editor = React80.forwardRef(
8270
8245
  stopEditing(ensureIsHTMLElement(event.relatedTarget));
8271
8246
  }
8272
8247
  const defaultValue = eventKey ? value : formatNumber(value, {
8273
- ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
8248
+ ...formatConfig || columnDefinition.cellRendererParams?.formatConfig,
8249
+ //TODO remove usage of columnDefinition.cellRendererParams in next major version
8274
8250
  symbol: void 0,
8275
8251
  symbolAfterValue: void 0
8276
8252
  });
8277
8253
  return /* @__PURE__ */ React80.createElement(
8278
8254
  Input,
8279
8255
  {
8280
- placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder"),
8256
+ placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.currencyCell.placeholder"),
8281
8257
  defaultValue,
8282
8258
  onBlur,
8283
8259
  ref,
8284
8260
  className: cx3("input-cell", "input-cell--right-aligned"),
8285
- ...columnDefinition.cellEditorParams?.inputProps || {}
8261
+ ...inputProps
8286
8262
  }
8287
8263
  );
8288
8264
  }
@@ -8694,6 +8670,14 @@ var DateFilterTokenText = ({
8694
8670
  };
8695
8671
  var DateFilterRenderer_default = DateFilterRenderer;
8696
8672
 
8673
+ // src/utils/getCellValueTypographyProps.ts
8674
+ function getCellValueTypographyProps(typographyProps) {
8675
+ return {
8676
+ intent: "small",
8677
+ ...typographyProps
8678
+ };
8679
+ }
8680
+
8697
8681
  // src/CellRenderers/DateCell.tsx
8698
8682
  var cx4 = classnames.bind(styles_default);
8699
8683
  function getDateObject(date) {
@@ -8780,36 +8764,32 @@ function getDateObject2(date) {
8780
8764
  return date;
8781
8765
  }
8782
8766
  var DateTimeCellValue = ({
8783
- columnDefinition,
8784
8767
  isGroup,
8785
- value
8768
+ value,
8769
+ typographyProps,
8770
+ dateFormatType
8786
8771
  }) => {
8787
8772
  const { format: format3 } = useDateTime();
8788
8773
  if (isGroup || isEmptyValue(value)) {
8789
8774
  return null;
8790
8775
  }
8791
8776
  const parsedValue = getDateObject2(value);
8792
- const internalValue = parsedValue ? format3(
8793
- parsedValue,
8794
- columnDefinition.cellRendererParams?.dateFormatType || "abbr-weekday-abbr-date-at-time"
8795
- ) : void 0;
8796
- const typographyProps = getCellValueTypographyProps(
8797
- columnDefinition.cellRendererParams?.typographyProps
8798
- );
8777
+ const internalValue = parsedValue ? format3(parsedValue, dateFormatType || "abbr-weekday-abbr-date-at-time") : void 0;
8799
8778
  return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps }, internalValue);
8800
8779
  };
8801
8780
  var Renderer5 = (props) => {
8802
- return /* @__PURE__ */ React80.createElement(
8803
- OptionalDateTimeProvider,
8804
- {
8805
- timeZone: props.columnDefinition?.cellRendererParams?.timeZone
8806
- },
8807
- /* @__PURE__ */ React80.createElement(DateTimeCellValue, { ...props })
8808
- );
8781
+ return /* @__PURE__ */ React80.createElement(OptionalDateTimeProvider, { timeZone: props.timeZone }, /* @__PURE__ */ React80.createElement(DateTimeCellValue, { ...props }));
8809
8782
  };
8810
8783
  var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
8811
8784
  var Editor3 = React80.forwardRef(
8812
- ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
8785
+ ({
8786
+ columnDefinition,
8787
+ setDataValue,
8788
+ stopEditing,
8789
+ value,
8790
+ timeZone,
8791
+ disabledDate
8792
+ }, ref) => {
8813
8793
  function afterHide(event) {
8814
8794
  stopEditing(ensureIsHTMLElement(event?.target));
8815
8795
  }
@@ -8820,23 +8800,17 @@ var Editor3 = React80.forwardRef(
8820
8800
  setDataValue(columnDefinition.field, void 0);
8821
8801
  }
8822
8802
  }
8823
- return /* @__PURE__ */ React80.createElement(
8824
- OptionalDateTimeProvider,
8803
+ return /* @__PURE__ */ React80.createElement(OptionalDateTimeProvider, { timeZone }, /* @__PURE__ */ React80.createElement(
8804
+ DateSelect,
8825
8805
  {
8826
- timeZone: columnDefinition.cellEditorParams?.timeZone
8827
- },
8828
- /* @__PURE__ */ React80.createElement(
8829
- DateSelect,
8830
- {
8831
- afterHide,
8832
- className: cx5("input-cell"),
8833
- disabledDate: columnDefinition.cellEditorParams?.disabledDate,
8834
- onChange,
8835
- ref,
8836
- value: getDateObject2(value)
8837
- }
8838
- )
8839
- );
8806
+ afterHide,
8807
+ className: cx5("input-cell"),
8808
+ disabledDate,
8809
+ onChange,
8810
+ ref,
8811
+ value: getDateObject2(value)
8812
+ }
8813
+ ));
8840
8814
  }
8841
8815
  );
8842
8816
  var DateTimeCellEditor = withDataTableEditor(Editor3, "date");
@@ -52362,15 +52336,21 @@ globalObj.MouseEvent = typeof MouseEvent === "undefined" ? {} : MouseEvent;
52362
52336
  var GroupCellRenderer2 = GroupCellRenderer;
52363
52337
  var cx6 = classnames.bind(truncation_default);
52364
52338
  var MIN_LINK_WIDTH = 48;
52365
- var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, value }) => {
52339
+ var InternalLinkCellRenderer = ({
52340
+ columnDefinition,
52341
+ isGroup,
52342
+ data,
52343
+ rowHeight,
52344
+ value,
52345
+ typographyProps,
52346
+ isExternalLink,
52347
+ getURL
52348
+ }) => {
52366
52349
  const [isLinkWidthBelowMin, setIsLinkWidthBelowMin] = useState(false);
52367
52350
  const linkRef = useRef(null);
52368
52351
  const internalValue = value ? columnDefinition.getStringFormattedValue?.(value) : "";
52369
- const typographyProps = getCellValueTypographyProps(
52370
- columnDefinition.cellRendererParams?.typographyProps
52371
- );
52372
52352
  const className = cx6(
52373
- columnDefinition.cellRendererParams?.typographyProps?.className,
52353
+ typographyProps?.className,
52374
52354
  "textCell",
52375
52355
  "truncatingText",
52376
52356
  {
@@ -52388,8 +52368,7 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
52388
52368
  setIsLinkWidthBelowMin(width < MIN_LINK_WIDTH);
52389
52369
  }
52390
52370
  }, [internalValue]);
52391
- const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
52392
- const URL = columnDefinition.cellRendererParams.getURL(value, data);
52371
+ const URL = getURL(value, data);
52393
52372
  const extendClickableAreaClassNames = isLinkWidthBelowMin ? cx6("extendClickableArea", {
52394
52373
  "extendClickableArea--rowHeightSm": rowHeight === rowSize.sm
52395
52374
  }) : "";
@@ -52419,23 +52398,22 @@ var LinkCellRenderer = withDataTableRenderer(
52419
52398
  "input"
52420
52399
  );
52421
52400
  var cx7 = classnames.bind(styles_default);
52422
- var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value }) => {
52401
+ var InternalNumberCellRenderer = ({
52402
+ columnDefinition,
52403
+ rowPinned,
52404
+ isGroup,
52405
+ value,
52406
+ typographyProps,
52407
+ inputProps,
52408
+ formatConfig
52409
+ }) => {
52423
52410
  const I18n = useI18nContext();
52424
52411
  if (isEmptyValue(value)) {
52425
52412
  if (isGroup) {
52426
52413
  return null;
52427
52414
  }
52428
52415
  if (columnDefinition.editable) {
52429
- return /* @__PURE__ */ React80.createElement(
52430
- Typography,
52431
- {
52432
- ...getCellValueTypographyProps(
52433
- columnDefinition.cellRendererParams?.typographyProps
52434
- ),
52435
- className: cx7("input-placeholder")
52436
- },
52437
- columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder")
52438
- );
52416
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx7("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder"));
52439
52417
  }
52440
52418
  return /* @__PURE__ */ React80.createElement(React80.Fragment, null);
52441
52419
  }
@@ -52444,7 +52422,7 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
52444
52422
  minDecimalPrecision: 0,
52445
52423
  shouldUseGtk: true,
52446
52424
  symbol: "",
52447
- ...columnDefinition.cellRendererParams?.formatConfig
52425
+ ...formatConfig
52448
52426
  });
52449
52427
  if (isGroup) {
52450
52428
  return /* @__PURE__ */ React80.createElement(Typography, { intent: "small", weight: "semibold" }, internalValue);
@@ -52452,10 +52430,8 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
52452
52430
  return /* @__PURE__ */ React80.createElement(
52453
52431
  Typography,
52454
52432
  {
52455
- ...getCellValueTypographyProps(
52456
- columnDefinition.cellRendererParams?.typographyProps
52457
- ),
52458
- weight: rowPinned ? "bold" : columnDefinition.cellRendererParams?.typographyProps?.weight
52433
+ ...typographyProps,
52434
+ weight: rowPinned ? "bold" : typographyProps?.weight
52459
52435
  },
52460
52436
  internalValue
52461
52437
  );
@@ -52464,7 +52440,7 @@ var NumberCellRenderer = withDataTableRenderer(
52464
52440
  InternalNumberCellRenderer,
52465
52441
  "input"
52466
52442
  );
52467
- var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
52443
+ var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditing, value, inputProps }, ref) => {
52468
52444
  const I18n = useI18nContext();
52469
52445
  if (isEmptyValue(value) && !columnDefinition.editable) {
52470
52446
  return null;
@@ -52475,13 +52451,13 @@ var InternalNumberCellEditor = React80.forwardRef(({ columnDefinition, stopEditi
52475
52451
  return /* @__PURE__ */ React80.createElement(
52476
52452
  Input,
52477
52453
  {
52478
- placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder"),
52454
+ placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.numberCell.placeholder"),
52479
52455
  type: "number",
52480
52456
  defaultValue: value,
52481
52457
  onBlur,
52482
52458
  ref,
52483
52459
  className: cx7("input-cell", "input-cell--right-aligned"),
52484
- ...columnDefinition.cellEditorParams?.inputProps || {}
52460
+ ...inputProps
52485
52461
  }
52486
52462
  );
52487
52463
  });
@@ -52562,35 +52538,41 @@ var defaultAvatarStackItemFilter = (person) => !!person || !!person.id;
52562
52538
  var Renderer6 = ({
52563
52539
  columnDefinition,
52564
52540
  rowHeight,
52565
- value
52541
+ value,
52542
+ getValue: getValue2,
52543
+ getCompanyName: getCompanyNameParam,
52544
+ getPersonName: getPersonNameParam,
52545
+ getInitials,
52546
+ getImageURL,
52547
+ typographyProps
52566
52548
  }) => {
52567
52549
  const [fullCellView, setFullCellView] = React80.useState(false);
52568
52550
  const getPeople = React80.useCallback(() => {
52569
- return columnDefinition.cellRendererParams?.getValue?.(value) || value || [];
52570
- }, [columnDefinition.cellRendererParams?.getValue, value]);
52551
+ return getValue2?.(value) || value || [];
52552
+ }, [getValue2, value]);
52571
52553
  const getCompanyName = React80.useCallback(
52572
52554
  (person) => {
52573
- return columnDefinition.cellRendererParams?.getCompanyName?.(person) ?? person.company ?? "";
52555
+ return getCompanyNameParam?.(person) ?? person.company ?? "";
52574
52556
  },
52575
- [columnDefinition.cellRendererParams?.getCompanyName]
52557
+ [getCompanyNameParam]
52576
52558
  );
52577
52559
  const getPersonName = React80.useCallback(
52578
52560
  (person) => {
52579
- return columnDefinition.cellRendererParams?.getPersonName?.(person) ?? person.name ?? "";
52561
+ return getPersonNameParam?.(person) ?? person.name ?? "";
52580
52562
  },
52581
- [columnDefinition.cellRendererParams?.getPersonName]
52563
+ [getPersonNameParam]
52582
52564
  );
52583
52565
  const getPersonImageUrl = React80.useCallback(
52584
52566
  (person) => {
52585
- return columnDefinition.cellRendererParams?.getImageURL?.(person) ?? "";
52567
+ return getImageURL?.(person) ?? "";
52586
52568
  },
52587
- [columnDefinition.cellRendererParams?.getImageURL]
52569
+ [getImageURL]
52588
52570
  );
52589
52571
  const getPersonInitials = React80.useCallback(
52590
52572
  (person) => {
52591
- return columnDefinition.cellRendererParams?.getInitials?.(person) ?? "";
52573
+ return getInitials?.(person) ?? "";
52592
52574
  },
52593
- [columnDefinition.cellRendererParams?.getInitials]
52575
+ [getInitials]
52594
52576
  );
52595
52577
  const getPersonNameWithCompany = React80.useCallback(
52596
52578
  (person) => {
@@ -52618,9 +52600,6 @@ var Renderer6 = ({
52618
52600
  }
52619
52601
  return avatarWidth * avatarCount;
52620
52602
  }, [getPeople, rowHeight]);
52621
- const typographyProps = getCellValueTypographyProps(
52622
- columnDefinition.cellRendererParams?.typographyProps
52623
- );
52624
52603
  const people = getPeople();
52625
52604
  if (isEmptyValue(value) || people.length === 0) {
52626
52605
  return null;
@@ -52729,7 +52708,10 @@ var Renderer7 = ({
52729
52708
  columnDefinition,
52730
52709
  isGroup,
52731
52710
  rowPinned,
52732
- value
52711
+ value,
52712
+ typographyProps,
52713
+ inputProps,
52714
+ formatConfig
52733
52715
  }) => {
52734
52716
  const I18n = useI18nContext();
52735
52717
  if (isEmptyValue(value)) {
@@ -52737,22 +52719,10 @@ var Renderer7 = ({
52737
52719
  return null;
52738
52720
  }
52739
52721
  if (columnDefinition.editable) {
52740
- return /* @__PURE__ */ React80.createElement(
52741
- Typography,
52742
- {
52743
- ...getCellValueTypographyProps(
52744
- columnDefinition.cellRendererParams?.typographyProps
52745
- ),
52746
- className: cx9("input-placeholder")
52747
- },
52748
- columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder")
52749
- );
52722
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx9("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder"));
52750
52723
  }
52751
52724
  }
52752
- const internalValue = formatPercentage(
52753
- value?.toString() ?? "",
52754
- columnDefinition.cellRendererParams?.formatConfig
52755
- );
52725
+ const internalValue = formatPercentage(value?.toString() ?? "", formatConfig);
52756
52726
  if (isGroup) {
52757
52727
  return /* @__PURE__ */ React80.createElement(
52758
52728
  Typography,
@@ -52767,48 +52737,60 @@ var Renderer7 = ({
52767
52737
  return /* @__PURE__ */ React80.createElement(
52768
52738
  Typography,
52769
52739
  {
52770
- ...getCellValueTypographyProps(
52771
- columnDefinition.cellRendererParams?.typographyProps
52772
- ),
52773
- weight: rowPinned ? "bold" : columnDefinition.cellRendererParams?.typographyProps?.weight,
52740
+ ...typographyProps,
52741
+ weight: rowPinned ? "bold" : typographyProps?.weight,
52774
52742
  className: cx9("tabular-nums")
52775
52743
  },
52776
52744
  internalValue
52777
52745
  );
52778
52746
  };
52779
52747
  var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
52780
- var Editor4 = React80.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
52781
- const I18n = useI18nContext();
52782
- function onBlur(event) {
52783
- stopEditing(ensureIsHTMLElement(event.relatedTarget));
52784
- }
52785
- if (isEmptyValue(value) && !columnDefinition.editable) {
52786
- return null;
52787
- }
52788
- const defaultValue = eventKey ? value : formatNumber(value, {
52789
- ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
52790
- symbol: void 0,
52791
- symbolAfterValue: void 0
52792
- });
52793
- return /* @__PURE__ */ React80.createElement(
52794
- Input,
52795
- {
52796
- placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder"),
52797
- className: cx9("input-cell", "input-cell--right-aligned"),
52798
- defaultValue,
52799
- onBlur,
52800
- ref,
52801
- style: { textAlign: "right" },
52802
- ...columnDefinition.cellEditorParams?.inputProps || {}
52748
+ var Editor4 = React80.forwardRef(
52749
+ ({
52750
+ columnDefinition,
52751
+ eventKey,
52752
+ stopEditing,
52753
+ value,
52754
+ formatConfig,
52755
+ inputProps
52756
+ }, ref) => {
52757
+ const I18n = useI18nContext();
52758
+ function onBlur(event) {
52759
+ stopEditing(ensureIsHTMLElement(event.relatedTarget));
52803
52760
  }
52804
- );
52805
- });
52761
+ if (isEmptyValue(value) && !columnDefinition.editable) {
52762
+ return null;
52763
+ }
52764
+ const defaultValue = eventKey ? value : formatNumber(value, {
52765
+ ...formatConfig || columnDefinition.cellRendererParams?.formatConfig,
52766
+ //TODO remove usage of columnDefinition.cellRendererParams in next major version
52767
+ symbol: void 0,
52768
+ symbolAfterValue: void 0
52769
+ });
52770
+ return /* @__PURE__ */ React80.createElement(
52771
+ Input,
52772
+ {
52773
+ placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.percentCell.placeholder"),
52774
+ className: cx9("input-cell", "input-cell--right-aligned"),
52775
+ defaultValue,
52776
+ onBlur,
52777
+ ref,
52778
+ style: { textAlign: "right" },
52779
+ ...inputProps
52780
+ }
52781
+ );
52782
+ }
52783
+ );
52806
52784
  var PercentCellEditor = withDataTableEditor(Editor4, "input");
52807
52785
  var Renderer8 = ({
52808
- columnDefinition,
52809
52786
  rowHeight,
52810
52787
  isGroup,
52811
- value
52788
+ value,
52789
+ getPersonName,
52790
+ getCompanyName,
52791
+ getImageURL,
52792
+ getInitials,
52793
+ typographyProps
52812
52794
  }) => {
52813
52795
  const [showAvatar, setShowAvatar] = React80.useState(false);
52814
52796
  React80.useEffect(() => {
@@ -52817,13 +52799,10 @@ var Renderer8 = ({
52817
52799
  if (value === void 0 || value === null) {
52818
52800
  return null;
52819
52801
  }
52820
- const name = columnDefinition.cellRendererParams?.getPersonName?.(value);
52821
- const companyName = columnDefinition.cellRendererParams?.getCompanyName?.(value);
52822
- const imageURL = columnDefinition.cellRendererParams?.getImageURL?.(value);
52823
- const initials = columnDefinition.cellRendererParams?.getInitials?.(value);
52824
- const typographyProps = getCellValueTypographyProps(
52825
- columnDefinition.cellRendererParams?.typographyProps
52826
- );
52802
+ const name = getPersonName?.(value);
52803
+ const companyName = getCompanyName?.(value);
52804
+ const imageURL = getImageURL?.(value);
52805
+ const initials = getInitials?.(value);
52827
52806
  if (isGroup) {
52828
52807
  return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, name);
52829
52808
  }
@@ -52847,34 +52826,25 @@ var Renderer9 = ({
52847
52826
  columnDefinition,
52848
52827
  isGroup,
52849
52828
  value,
52850
- rowPinned
52829
+ rowPinned,
52830
+ getColor,
52831
+ displayAsPill,
52832
+ typographyProps,
52833
+ placeholder
52851
52834
  }) => {
52852
- const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
52853
52835
  const I18n = useI18nContext();
52854
52836
  if (isEmptyValue(value)) {
52855
52837
  if (isGroup) {
52856
52838
  return null;
52857
52839
  }
52858
52840
  if (columnDefinition.editable) {
52859
- return /* @__PURE__ */ React80.createElement(
52860
- Typography,
52861
- {
52862
- ...getCellValueTypographyProps(
52863
- columnDefinition.cellRendererParams?.typographyProps
52864
- ),
52865
- className: cx10("input-placeholder")
52866
- },
52867
- columnDefinition.cellEditorParams?.placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
52868
- label: columnDefinition.headerName
52869
- })
52870
- );
52841
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx10("input-placeholder") }, placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
52842
+ label: columnDefinition.headerName
52843
+ }));
52871
52844
  }
52872
52845
  return null;
52873
52846
  }
52874
52847
  const label = columnDefinition.getStringFormattedValue?.(value) || value;
52875
- const typographyProps = getCellValueTypographyProps(
52876
- columnDefinition.cellRendererParams?.typographyProps
52877
- );
52878
52848
  if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
52879
52849
  return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
52880
52850
  }
@@ -52882,7 +52852,18 @@ var Renderer9 = ({
52882
52852
  };
52883
52853
  var PillCellRenderer = withDataTableRenderer(Renderer9, "select");
52884
52854
  var Editor5 = React80.forwardRef(
52885
- ({ columnDefinition, data, setDataValue, stopEditing, value }, ref) => {
52855
+ ({
52856
+ columnDefinition,
52857
+ data,
52858
+ setDataValue,
52859
+ stopEditing,
52860
+ value,
52861
+ selectOptions,
52862
+ getId: getIdParam,
52863
+ placeholder,
52864
+ getColor,
52865
+ clearable
52866
+ }, ref) => {
52886
52867
  const [options, setOptions] = React80.useState([]);
52887
52868
  const [loading, setLoading] = React80.useState(false);
52888
52869
  const I18n = useI18nContext();
@@ -52890,7 +52871,6 @@ var Editor5 = React80.forwardRef(
52890
52871
  stopEditing();
52891
52872
  }
52892
52873
  async function beforeShow() {
52893
- const selectOptions = columnDefinition.cellEditorParams?.selectOptions || [];
52894
52874
  if (Array.isArray(selectOptions)) {
52895
52875
  setOptions(selectOptions);
52896
52876
  } else {
@@ -52907,7 +52887,7 @@ var Editor5 = React80.forwardRef(
52907
52887
  setDataValue(columnDefinition.field, null);
52908
52888
  }
52909
52889
  function getId3(item) {
52910
- return columnDefinition.cellEditorParams?.getId?.(item) ?? item;
52890
+ return getIdParam?.(item) ?? item;
52911
52891
  }
52912
52892
  function getLabel3(item) {
52913
52893
  const unformattedLabel = columnDefinition.getStringFormattedValue?.(item) || "";
@@ -52916,17 +52896,17 @@ var Editor5 = React80.forwardRef(
52916
52896
  return /* @__PURE__ */ React80.createElement(
52917
52897
  PillSelect,
52918
52898
  {
52919
- placeholder: columnDefinition.cellEditorParams?.placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
52899
+ placeholder: placeholder || I18n.t("dataTable.cells.pillCell.placeholder", {
52920
52900
  label: columnDefinition.headerName
52921
52901
  }),
52922
52902
  afterHide,
52923
52903
  beforeShow,
52924
52904
  block: true,
52925
- getColor: columnDefinition.cellEditorParams?.getColor ?? columnDefinition.cellRendererParams.getColor,
52905
+ getColor,
52926
52906
  getId: getId3,
52927
52907
  getLabel: getLabel3,
52928
52908
  loading,
52929
- onClear: columnDefinition.cellEditorParams?.clearable ? onClear : void 0,
52909
+ onClear: clearable ? onClear : void 0,
52930
52910
  onSelect,
52931
52911
  options,
52932
52912
  ref,
@@ -52971,13 +52951,12 @@ function useSearch(data, onSearchFunction) {
52971
52951
  setSearchResultOptions
52972
52952
  };
52973
52953
  }
52974
- function useSelectOptions(columnDefinition, data) {
52954
+ function useSelectOptions(selectOptions, data) {
52975
52955
  const [options, setOptions] = React80.useState([]);
52976
52956
  const [loading, setLoading] = React80.useState(false);
52977
52957
  const [totalOptions, setTotalOptions] = React80.useState(0);
52978
52958
  const fetchOptions = async (offset4) => {
52979
52959
  setLoading(true);
52980
- const selectOptions = columnDefinition.cellEditorParams?.selectOptions || [];
52981
52960
  let newOptions = [];
52982
52961
  let total = 0;
52983
52962
  if (typeof selectOptions === "function") {
@@ -53009,7 +52988,9 @@ var cx11 = classnames.bind({ ...styles_default, ...truncation_default });
53009
52988
  var Renderer10 = ({
53010
52989
  columnDefinition,
53011
52990
  isGroup,
53012
- value
52991
+ value,
52992
+ typographyProps,
52993
+ placeholder
53013
52994
  }) => {
53014
52995
  const I18n = useI18nContext();
53015
52996
  if (isEmptyValue(value)) {
@@ -53017,24 +52998,12 @@ var Renderer10 = ({
53017
52998
  return null;
53018
52999
  }
53019
53000
  if (columnDefinition.editable) {
53020
- return /* @__PURE__ */ React80.createElement(
53021
- Typography,
53022
- {
53023
- ...getCellValueTypographyProps(
53024
- columnDefinition.cellRendererParams?.typographyProps
53025
- ),
53026
- className: cx11("truncatingText")
53027
- },
53028
- columnDefinition.cellEditorParams?.placeholder || I18n.t("dataTable.cells.selectCell.placeholder", {
53029
- label: columnDefinition.headerName
53030
- })
53031
- );
53001
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx11("truncatingText") }, placeholder || I18n.t("dataTable.cells.selectCell.placeholder", {
53002
+ label: columnDefinition.headerName
53003
+ }));
53032
53004
  }
53033
53005
  }
53034
53006
  const internalValue = columnDefinition.getStringFormattedValue?.(value);
53035
- const typographyProps = getCellValueTypographyProps(
53036
- columnDefinition.cellRendererParams?.typographyProps
53037
- );
53038
53007
  if (isGroup) {
53039
53008
  return /* @__PURE__ */ React80.createElement(
53040
53009
  Typography,
@@ -53050,14 +53019,25 @@ var Renderer10 = ({
53050
53019
  };
53051
53020
  var SelectCellRenderer = withDataTableRenderer(Renderer10, "select");
53052
53021
  var Editor6 = React80.forwardRef(
53053
- ({ columnDefinition, data, setDataValue, stopEditing, value }, ref) => {
53022
+ ({
53023
+ columnDefinition,
53024
+ data,
53025
+ setDataValue,
53026
+ stopEditing,
53027
+ value,
53028
+ clearable,
53029
+ selectOptions,
53030
+ onSearch: onSearchParam,
53031
+ getId: getIdParam,
53032
+ getOptionLabel: getOptionLabelParam
53033
+ }, ref) => {
53054
53034
  const { options, loading, totalOptions, fetchOptions } = useSelectOptions(
53055
- columnDefinition,
53035
+ selectOptions,
53056
53036
  data
53057
53037
  );
53058
53038
  const { onSearch, searchResultOptions, isSearching } = useSearch(
53059
53039
  data,
53060
- columnDefinition.cellEditorParams?.onSearch
53040
+ onSearchParam
53061
53041
  );
53062
53042
  function onSelect(selection) {
53063
53043
  if (selection.item !== value) {
@@ -53080,13 +53060,13 @@ var Editor6 = React80.forwardRef(
53080
53060
  }
53081
53061
  }, 500);
53082
53062
  function getId3(val) {
53083
- return columnDefinition.cellEditorParams?.getId?.(val) ?? val;
53063
+ return getIdParam?.(val) ?? val;
53084
53064
  }
53085
53065
  function getLabel3(val) {
53086
53066
  return columnDefinition.getStringFormattedValue?.(val);
53087
53067
  }
53088
53068
  function getOptionLabel(option) {
53089
- return columnDefinition.cellEditorParams?.getOptionLabel?.(option) || getLabel3(option);
53069
+ return getOptionLabelParam?.(option) || getLabel3(option);
53090
53070
  }
53091
53071
  return /* @__PURE__ */ React80.createElement(
53092
53072
  Select,
@@ -53098,7 +53078,7 @@ var Editor6 = React80.forwardRef(
53098
53078
  loading: isSearching || loading,
53099
53079
  onSearch,
53100
53080
  onSelect,
53101
- onClear: columnDefinition.cellEditorParams?.clearable ? onClear : void 0,
53081
+ onClear: clearable ? onClear : void 0,
53102
53082
  onScrollBottom,
53103
53083
  ref,
53104
53084
  className: cx11("input-cell", "truncatingText")
@@ -53122,27 +53102,20 @@ var Renderer11 = ({
53122
53102
  rowHeight,
53123
53103
  node,
53124
53104
  isGroup,
53125
- value
53105
+ value,
53106
+ typographyProps,
53107
+ inputProps
53126
53108
  }) => {
53127
53109
  const I18n = useI18nContext();
53128
53110
  if (isEmptyValue(value) && columnDefinition.editable) {
53129
53111
  if (isGroup) {
53130
53112
  return null;
53131
53113
  }
53132
- return /* @__PURE__ */ React80.createElement(
53133
- Typography,
53134
- {
53135
- ...getCellValueTypographyProps(
53136
- columnDefinition.cellRendererParams?.typographyProps
53137
- ),
53138
- className: cx12("input-placeholder")
53139
- },
53140
- columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
53141
- );
53114
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx12("input-placeholder") }, inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"));
53142
53115
  }
53143
53116
  const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
53144
53117
  const className = cx12(
53145
- columnDefinition.cellRendererParams?.typographyProps?.className,
53118
+ typographyProps?.className,
53146
53119
  "textCell",
53147
53120
  "truncatingText",
53148
53121
  {
@@ -53150,9 +53123,6 @@ var Renderer11 = ({
53150
53123
  "truncatingText--lg": rowHeight === rowSize.lg
53151
53124
  }
53152
53125
  );
53153
- const typographyProps = getCellValueTypographyProps(
53154
- columnDefinition.cellRendererParams?.typographyProps
53155
- );
53156
53126
  if (isGroup) {
53157
53127
  const fontWeight = node?.footer ? "regular" : "semibold";
53158
53128
  return /* @__PURE__ */ React80.createElement(
@@ -53170,7 +53140,7 @@ var Renderer11 = ({
53170
53140
  };
53171
53141
  var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
53172
53142
  var Editor7 = React80.forwardRef(
53173
- ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
53143
+ ({ columnDefinition, eventKey, stopEditing, value, inputProps }, ref) => {
53174
53144
  function onBlur(event) {
53175
53145
  stopEditing(ensureIsHTMLElement(event.relatedTarget));
53176
53146
  }
@@ -53179,12 +53149,12 @@ var Editor7 = React80.forwardRef(
53179
53149
  return /* @__PURE__ */ React80.createElement(
53180
53150
  Input,
53181
53151
  {
53182
- placeholder: columnDefinition.cellEditorParams?.inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"),
53183
53152
  className: cx12("input-cell"),
53184
53153
  defaultValue: internalValue,
53185
53154
  onBlur,
53186
53155
  ref,
53187
- ...columnDefinition.cellEditorParams?.inputProps || {}
53156
+ ...inputProps,
53157
+ placeholder: inputProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
53188
53158
  }
53189
53159
  );
53190
53160
  }
@@ -53204,28 +53174,18 @@ var Renderer12 = ({
53204
53174
  columnDefinition,
53205
53175
  node,
53206
53176
  isGroup,
53207
- value
53177
+ value,
53178
+ typographyProps,
53179
+ textAreaProps
53208
53180
  }) => {
53209
53181
  const I18n = useI18nContext();
53210
53182
  if (isEmptyValue(value) && columnDefinition.editable) {
53211
53183
  if (isGroup) {
53212
53184
  return null;
53213
53185
  }
53214
- return /* @__PURE__ */ React80.createElement(
53215
- Typography,
53216
- {
53217
- ...getCellValueTypographyProps(
53218
- columnDefinition.cellRendererParams?.typographyProps
53219
- ),
53220
- className: cx13("input-placeholder")
53221
- },
53222
- columnDefinition.cellEditorParams?.textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
53223
- );
53186
+ return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx13("input-placeholder") }, textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"));
53224
53187
  }
53225
53188
  const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
53226
- const typographyProps = getCellValueTypographyProps(
53227
- columnDefinition.cellRendererParams?.typographyProps
53228
- );
53229
53189
  if (isGroup) {
53230
53190
  const fontWeight = node?.footer ? "regular" : "semibold";
53231
53191
  return /* @__PURE__ */ React80.createElement(
@@ -53241,7 +53201,7 @@ var Renderer12 = ({
53241
53201
  return /* @__PURE__ */ React80.createElement(Typography, { ...typographyProps, className: cx13("textarea-cell", "text") }, internalValue);
53242
53202
  };
53243
53203
  var Editor8 = React80.forwardRef(
53244
- ({ columnDefinition, stopEditing, value }, ref) => {
53204
+ ({ columnDefinition, stopEditing, value, textAreaProps }, ref) => {
53245
53205
  function onBlur(event) {
53246
53206
  stopEditing(ensureIsHTMLElement(event.relatedTarget));
53247
53207
  }
@@ -53250,14 +53210,14 @@ var Editor8 = React80.forwardRef(
53250
53210
  return /* @__PURE__ */ React80.createElement(
53251
53211
  TextArea,
53252
53212
  {
53253
- placeholder: columnDefinition.cellEditorParams?.textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder"),
53254
53213
  className: cx13("textarea-cell", "editor-text"),
53255
53214
  defaultValue: internalValue,
53256
53215
  onBlur,
53257
53216
  ref,
53258
53217
  resize: "none",
53259
53218
  style: { lineHeight: "16px" },
53260
- ...columnDefinition.cellEditorParams?.textAreaProps || {}
53219
+ ...textAreaProps,
53220
+ placeholder: textAreaProps?.placeholder || I18n.t("dataTable.cells.textCell.placeholder")
53261
53221
  }
53262
53222
  );
53263
53223
  }
@@ -55389,15 +55349,12 @@ function getSelectedState(node, affectedRows) {
55389
55349
  const self = affectedRows[node.id];
55390
55350
  if (self?.selectedState === "selected") {
55391
55351
  return true;
55392
- } else if (node.parent && !isNodeRootLevelOfGrid(node.parent) && affectedRows[node.parent.id]?.selectedState === "selected") {
55393
- node.setSelected(true, void 0, self?.selectedState);
55394
- affectedRows[node.id] = {
55395
- node,
55396
- selectedState: "selected"
55397
- };
55352
+ } else if (node.isSelected()) {
55353
+ node.setSelected(true, void 0);
55354
+ affectedRows[node.id] = { node, selectedState: "selected" };
55398
55355
  return true;
55399
55356
  } else {
55400
- return !!node.isSelected();
55357
+ return false;
55401
55358
  }
55402
55359
  }
55403
55360
  function getCheckboxState(node, isServerSideDataRequest, rowSelectionRef) {
@@ -55609,11 +55566,8 @@ function getRowActions(actions, rowProps) {
55609
55566
  return actions;
55610
55567
  }
55611
55568
  var InternalRowActionsCellRenderer = (props) => {
55612
- const actions = getRowActions(
55613
- props.columnDefinition.cellRendererParams.actions,
55614
- props
55615
- );
55616
- if (props.rowPinned || props.columnDefinition.cellRendererParams.hideActionsOnGroupedRow && props.isGroup || actions.length === 0) {
55569
+ const actions = getRowActions(props.actions, props);
55570
+ if (props.rowPinned || props.hideActionsOnGroupedRow && props.isGroup || actions.length === 0) {
55617
55571
  return null;
55618
55572
  }
55619
55573
  return /* @__PURE__ */ React80.createElement(
@@ -55879,7 +55833,8 @@ var DataTableCellRenderer = ({
55879
55833
  node,
55880
55834
  editorType,
55881
55835
  value,
55882
- setValue
55836
+ setValue,
55837
+ ...props
55883
55838
  }) => {
55884
55839
  const { columnApi } = useInternalTableContext();
55885
55840
  const columnDefinition = transformToColumnDefinition(colDef);
@@ -55909,10 +55864,11 @@ var DataTableCellRenderer = ({
55909
55864
  parentData: context?.parentData,
55910
55865
  parentId: context?.parentId,
55911
55866
  rowHeight,
55912
- rowIndex: node.rowIndex,
55913
55867
  rowPinned: node.rowPinned,
55914
55868
  tableApi: tableRef?.current,
55915
- value
55869
+ value,
55870
+ ...props,
55871
+ typographyProps: getCellValueTypographyProps(props.typographyProps)
55916
55872
  };
55917
55873
  const hasValue = value !== void 0 && value !== null && value !== "";
55918
55874
  const isSelectCellComponent = columnDefinition.cellRendererSelector?.({
@@ -55992,7 +55948,8 @@ var DataTableCellEditor = React80.forwardRef(
55992
55948
  node,
55993
55949
  parseValue,
55994
55950
  stopEditing,
55995
- value
55951
+ value,
55952
+ ...props
55996
55953
  }, ref) => {
55997
55954
  const startingValue = getStartingValue(eventKey, editorType, value);
55998
55955
  const [currentValue, setCurrentValue] = useState(startingValue);
@@ -56099,7 +56056,7 @@ var DataTableCellEditor = React80.forwardRef(
56099
56056
  setCurrentValue(newValue);
56100
56057
  },
56101
56058
  stopEditing: (relatedTarget) => {
56102
- const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table') === null;
56059
+ const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table"]') === null;
56103
56060
  stopEditing(isRelatedTargetOutsideTable);
56104
56061
  if (isRelatedTargetOutsideTable) {
56105
56062
  api.clearFocusedCell();
@@ -56108,7 +56065,8 @@ var DataTableCellEditor = React80.forwardRef(
56108
56065
  },
56109
56066
  tableApi: tableRef?.current,
56110
56067
  value: currentValue,
56111
- ref: handleRefs(editorType)
56068
+ ref: handleRefs(editorType),
56069
+ ...props
56112
56070
  }
56113
56071
  )
56114
56072
  );
@@ -57185,7 +57143,17 @@ function getLabel2(func, option) {
57185
57143
  function getId2(func, option) {
57186
57144
  return func?.(option) ?? option?.id ?? option;
57187
57145
  }
57188
- var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
57146
+ var InternalMultiSelectCellRenderer = ({
57147
+ columnDefinition,
57148
+ rowHeight,
57149
+ value,
57150
+ getValue: getValueParam,
57151
+ enablePlaceholder: enablePlaceholderParam,
57152
+ placeholder: placeholderParam,
57153
+ typographyProps,
57154
+ getLabel: getLabelParam,
57155
+ getId: getIdParam
57156
+ }) => {
57189
57157
  const I18n = useI18nContext();
57190
57158
  const ref = React80.useRef();
57191
57159
  React80.useLayoutEffect(() => {
@@ -57194,20 +57162,14 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
57194
57162
  if (value === void 0 || value === null) {
57195
57163
  return null;
57196
57164
  }
57197
- const options = getValue(
57198
- columnDefinition.cellRendererParams?.getValue,
57199
- value,
57200
- emptyArray
57201
- );
57202
- const enablePlaceholder = (columnDefinition.cellRendererParams?.enablePlaceholder && columnDefinition.editable) ?? false;
57203
- const placeholder = columnDefinition.cellRendererParams?.placeholder ?? I18n.t("dataTable.cells.multiSelectCell.placeholder");
57165
+ const options = getValue(getValueParam, value, emptyArray);
57166
+ const enablePlaceholder = (enablePlaceholderParam && columnDefinition.editable) ?? false;
57167
+ const placeholder = placeholderParam ?? I18n.t("dataTable.cells.multiSelectCell.placeholder");
57204
57168
  return /* @__PURE__ */ React80.createElement(
57205
57169
  Typography,
57206
57170
  {
57207
57171
  as: "ol",
57208
- ...getCellValueTypographyProps(
57209
- columnDefinition.cellRendererParams?.typographyProps
57210
- ),
57172
+ ...typographyProps,
57211
57173
  className: cx16("inlineListItems", "truncatingText", {
57212
57174
  "truncatingText--md": rowHeight === rowSize.md,
57213
57175
  "truncatingText--lg": rowHeight === rowSize.lg
@@ -57215,14 +57177,8 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
57215
57177
  ref
57216
57178
  },
57217
57179
  options.length ? options.map((option, idx, arr) => {
57218
- const label = getLabel2(
57219
- columnDefinition.cellRendererParams?.getLabel,
57220
- option
57221
- );
57222
- const optionId = getId2(
57223
- columnDefinition.cellRendererParams?.getId,
57224
- option
57225
- );
57180
+ const label = getLabel2(getLabelParam, option);
57181
+ const optionId = getId2(getIdParam, option);
57226
57182
  const key = `${label}_${optionId}_idx_${idx}`;
57227
57183
  return /* @__PURE__ */ React80.createElement(React80.Fragment, { key }, /* @__PURE__ */ React80.createElement("li", null, label, idx !== arr.length - 1 ? commaToken : null));
57228
57184
  }) : enablePlaceholder ? /* @__PURE__ */ React80.createElement("li", { style: { color: colors.gray45 } }, placeholder) : null
@@ -57232,63 +57188,80 @@ var MultiSelectCellRenderer = withDataTableRenderer(
57232
57188
  InternalMultiSelectCellRenderer,
57233
57189
  "select"
57234
57190
  );
57235
- var MultiSelectEditor = React80.forwardRef(({ columnDefinition, value = [], setDataValue, data, stopEditing }, ref) => {
57236
- const [selectedValue, setSelectedValue] = React80.useState(value);
57237
- const { options, loading, totalOptions, fetchOptions } = useSelectOptions(
57191
+ var MultiSelectEditor = React80.forwardRef(
57192
+ ({
57238
57193
  columnDefinition,
57239
- data
57240
- );
57241
- const { onSearch: editorOnSearch } = columnDefinition.cellEditorParams || {};
57242
- const shouldSearch = options.length < totalOptions && !!editorOnSearch;
57243
- const { onSearch, searchResultOptions, setSearchResultOptions, isSearching } = useSearch(data, shouldSearch ? editorOnSearch : void 0);
57244
- async function beforeShow() {
57245
- if (options.length === 0) {
57246
- await fetchOptions();
57194
+ value = [],
57195
+ setDataValue,
57196
+ data,
57197
+ stopEditing,
57198
+ selectOptions,
57199
+ placeholder,
57200
+ onSearch: editorOnSearch,
57201
+ getLabel: getLabelParam,
57202
+ getId: getIdParam
57203
+ }, ref) => {
57204
+ const [selectedValue, setSelectedValue] = React80.useState(value);
57205
+ const { options, loading, totalOptions, fetchOptions } = useSelectOptions(
57206
+ selectOptions,
57207
+ data
57208
+ );
57209
+ const shouldSearch = options.length < totalOptions && !!editorOnSearch;
57210
+ const {
57211
+ onSearch,
57212
+ searchResultOptions,
57213
+ setSearchResultOptions,
57214
+ isSearching
57215
+ } = useSearch(data, shouldSearch ? editorOnSearch : void 0);
57216
+ async function beforeShow() {
57217
+ if (options.length === 0) {
57218
+ await fetchOptions();
57219
+ }
57220
+ return true;
57247
57221
  }
57248
- return true;
57249
- }
57250
- const onScrollBottom = debounce5(async () => {
57251
- if (!searchResultOptions && options.length < totalOptions) {
57252
- const nextOffset = options.length;
57253
- await fetchOptions(nextOffset);
57222
+ const onScrollBottom = debounce5(async () => {
57223
+ if (!searchResultOptions && options.length < totalOptions) {
57224
+ const nextOffset = options.length;
57225
+ await fetchOptions(nextOffset);
57226
+ }
57227
+ }, 500);
57228
+ function onChange(value2) {
57229
+ setSelectedValue(value2);
57230
+ setDataValue(columnDefinition.field, value2);
57231
+ if (searchResultOptions) {
57232
+ setSearchResultOptions(void 0);
57233
+ }
57254
57234
  }
57255
- }, 500);
57256
- function onChange(value2) {
57257
- setSelectedValue(value2);
57258
- setDataValue(columnDefinition.field, value2);
57259
- if (searchResultOptions) {
57260
- setSearchResultOptions(void 0);
57235
+ function getLabel3(func, option) {
57236
+ return func?.(option) ?? option?.label ?? option?.name ?? option;
57261
57237
  }
57262
- }
57263
- function getLabel3(func, option) {
57264
- return func?.(option) ?? option?.label ?? option?.name ?? option;
57265
- }
57266
- function getId3(func, option) {
57267
- return func?.(option) ?? option?.id ?? option;
57268
- }
57269
- return /* @__PURE__ */ React80.createElement(
57270
- MultiSelect,
57271
- {
57272
- beforeShow,
57273
- afterHide: () => stopEditing(),
57274
- block: true,
57275
- loading: isSearching || loading,
57276
- getId: (option) => {
57277
- return getId3(columnDefinition.cellEditorParams?.getId, option);
57278
- },
57279
- getLabel: (option) => {
57280
- return getLabel3(columnDefinition.cellEditorParams?.getLabel, option);
57281
- },
57282
- placeholder: columnDefinition.cellEditorParams?.placeholder,
57283
- onScrollBottom,
57284
- onSearch,
57285
- onChange,
57286
- options: searchResultOptions || options,
57287
- value: selectedValue,
57288
- ref
57238
+ function getId3(func, option) {
57239
+ return func?.(option) ?? option?.id ?? option;
57289
57240
  }
57290
- );
57291
- });
57241
+ return /* @__PURE__ */ React80.createElement(
57242
+ MultiSelect,
57243
+ {
57244
+ beforeShow,
57245
+ afterHide: () => stopEditing(),
57246
+ block: true,
57247
+ loading: isSearching || loading,
57248
+ getId: (option) => {
57249
+ return getId3(getIdParam, option);
57250
+ },
57251
+ getLabel: (option) => {
57252
+ return getLabel3(getLabelParam, option);
57253
+ },
57254
+ placeholder,
57255
+ onScrollBottom,
57256
+ onSearch,
57257
+ onChange,
57258
+ options: searchResultOptions || options,
57259
+ value: selectedValue,
57260
+ ref
57261
+ }
57262
+ );
57263
+ }
57264
+ );
57292
57265
  var MultiSelectCellEditor = withDataTableEditor(
57293
57266
  MultiSelectEditor,
57294
57267
  "select"
@@ -108065,7 +108038,8 @@ var DataTable = ({
108065
108038
  showExpandCollapseAllToggle,
108066
108039
  translations: translations2 = {},
108067
108040
  enableCellTextSelection,
108068
- localStoragePersistenceKey
108041
+ localStoragePersistenceKey,
108042
+ enableCDN
108069
108043
  }) => {
108070
108044
  const initialTableConfig = localStoragePersistenceKey && storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
108071
108045
  const onServerSideDataRequestRef = React80.useRef(onServerSideDataRequest);
@@ -108077,14 +108051,28 @@ var DataTable = ({
108077
108051
  );
108078
108052
  const contextPanel = useContextPanel();
108079
108053
  const clientI18n = useI18nContext();
108054
+ const isCDNEnabled = isCDNFeatureFlagEnabled(clientI18n, enableCDN);
108055
+ const cdnTranslations = useRequestTranslations(
108056
+ {
108057
+ locale: clientI18n.locale,
108058
+ type: "file",
108059
+ absolute_file_path: (locale) => `core/packages/data-table/src/locales/${locale}.json`
108060
+ },
108061
+ { en: translations.en, pseudo: translations.pseudo },
108062
+ {
108063
+ oldTranslations: translations,
108064
+ enableCDN: isCDNEnabled
108065
+ }
108066
+ );
108080
108067
  const internalI18n = useI18n({
108081
- ...clientI18n,
108068
+ locale: clientI18n.locale,
108082
108069
  translations: mergeDeepLeft(
108083
108070
  mergeDeepLeft(clientI18n.translations, {
108084
108071
  [clientI18n.locale]: translations2
108085
108072
  }),
108086
- translations
108087
- )
108073
+ cdnTranslations.translations
108074
+ ),
108075
+ enableCDN: isCDNEnabled
108088
108076
  });
108089
108077
  const rowSelectionRef = React80.useRef({
108090
108078
  affectedRows: {},
@@ -109177,7 +109165,10 @@ var Table = (props) => {
109177
109165
  groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded,
109178
109166
  groupIncludeFooter: !onSSDR && props.groupIncludeFooter === void 0 ? true : props.groupIncludeFooter,
109179
109167
  getGroupRowAgg: props.getGroupRowAgg ? getGroupRowAgg : void 0,
109180
- groupSelectsChildren: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR,
109168
+ groupSelectsChildren: (
109169
+ // Always true for client side, defaults to true for server side
109170
+ internalTableContext.totalRowCount > 0 && props.groupSelectsChildren !== false || !onSSDR
109171
+ ),
109181
109172
  groupSelectsFiltered: true,
109182
109173
  headerHeight: props.headerHeight,
109183
109174
  icons: tableIcons,
@@ -111268,7 +111259,8 @@ var ClientSideDataTable = ({
111268
111259
  onTableConfigChange,
111269
111260
  translations: translations2 = {},
111270
111261
  enableCellTextSelection,
111271
- localStoragePersistenceKey
111262
+ localStoragePersistenceKey,
111263
+ enableCDN
111272
111264
  }) => {
111273
111265
  return /* @__PURE__ */ React80.createElement(
111274
111266
  DataTable,
@@ -111286,7 +111278,8 @@ var ClientSideDataTable = ({
111286
111278
  translations: translations2,
111287
111279
  localStoragePersistenceKey,
111288
111280
  customBulkEditorFields,
111289
- enableCellTextSelection
111281
+ enableCellTextSelection,
111282
+ enableCDN
111290
111283
  },
111291
111284
  children
111292
111285
  );
@@ -115676,7 +115669,8 @@ var ServerSideDataTable = ({
115676
115669
  enableCellTextSelection,
115677
115670
  showExpandCollapseAllToggle,
115678
115671
  translations: translations2 = {},
115679
- localStoragePersistenceKey
115672
+ localStoragePersistenceKey,
115673
+ enableCDN
115680
115674
  }) => {
115681
115675
  return /* @__PURE__ */ React80.createElement(
115682
115676
  DataTable,
@@ -115695,7 +115689,8 @@ var ServerSideDataTable = ({
115695
115689
  translations: translations2,
115696
115690
  customBulkEditorFields,
115697
115691
  enableCellTextSelection,
115698
- localStoragePersistenceKey
115692
+ localStoragePersistenceKey,
115693
+ enableCDN
115699
115694
  },
115700
115695
  children
115701
115696
  );