@procore/data-table 14.27.1 → 14.28.0-cdn.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 15.0.0-cdn.0
+
+### Minor Changes
+
+- 3f72970: Add placeholder implementation for MultiSelectCellRenderer component
+- 8baa7c3: Update I18nprovider and DataTable to have the option to pull translations from the CDN
+
+### Patch Changes
+
+- Updated dependencies [8baa7c3]
+  - @procore/core-react@12.21.0-cdn.0
+
 ## 14.27.1
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -12,6 +12,7 @@ var labsFinancialsUtils = require('@procore/labs-financials-utils');
 var styled4 = require('styled-components');
 var format = require('@procore/labs-financials-utils/dist/format');
 var ulid$1 = require('ulid');
+var cdnTranslations = require('@procore/cdn-translations');
 var toastAlert = require('@procore/toast-alert');
 var ReactDOM = require('react-dom');
 var server = require('react-dom/server');
@@ -57937,7 +57938,8 @@ function getId2(func, option) {
   return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.id) ?? option;
 }
 var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
+  const I18n = coreReact.useI18nContext();
   const ref = React80__default.default.useRef();
   React80__default.default.useLayoutEffect(() => {
     var _a2, _b2;
@@ -57946,12 +57948,19 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
   if (value === void 0 || value === null) {
     return null;
   }
+  const options = getValue(
+    (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.getValue,
+    value,
+    emptyArray
+  );
+  const enablePlaceholder = (((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.enablePlaceholder) && columnDefinition.editable) ?? false;
+  const placeholder = ((_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.placeholder) ?? I18n.t("dataTable.cells.multiSelectCell.placeholder");
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Typography,
     {
       as: "ol",
       ...getCellValueTypographyProps(
-        (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
+        (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
       ),
       className: cx16("inlineListItems", "truncatingText", {
         "truncatingText--md": rowHeight === rowSize.md,
@@ -57959,29 +57968,19 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
       }),
       ref
     },
-    getValue(
-      (_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.getValue,
-      value,
-      emptyArray
-    ).map((option, idx, arr) => {
-      var _a2, _b2, _c;
-      return /* @__PURE__ */ React80__default.default.createElement(
-        React80__default.default.Fragment,
-        {
-          key: (
-            // eslint-disable-next-line react/no-array-index-key
-            `${getLabel2(
-              (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getLabel,
-              option
-            )}_${getId2(
-              (_b2 = columnDefinition.cellRendererParams) == null ? void 0 : _b2.getId,
-              option
-            )}_idx_${idx}`
-          )
-        },
-        /* @__PURE__ */ React80__default.default.createElement("li", null, getLabel2((_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.getLabel, option), idx !== arr.length - 1 ? commaToken : null)
+    options.length ? options.map((option, idx, arr) => {
+      var _a2, _b2;
+      const label = getLabel2(
+        (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getLabel,
+        option
       );
-    })
+      const optionId = getId2(
+        (_b2 = columnDefinition.cellRendererParams) == null ? void 0 : _b2.getId,
+        option
+      );
+      const key = `${label}_${optionId}_idx_${idx}`;
+      return /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, { key }, /* @__PURE__ */ React80__default.default.createElement("li", null, label, idx !== arr.length - 1 ? commaToken : null));
+    }) : enablePlaceholder ? /* @__PURE__ */ React80__default.default.createElement("li", { style: { color: coreReact.colors.gray45 } }, placeholder) : null
   );
 };
 var MultiSelectCellRenderer = withDataTableRenderer(
@@ -80057,17 +80056,17 @@ var Shape = class _Shape extends Node2 {
     let linearGradientMatch;
     if ((fill === null || fill === void 0 ? void 0 : fill.startsWith("linear-gradient")) && (linearGradientMatch = LINEAR_GRADIENT_REGEXP.exec(fill))) {
       const angle = parseFloat(linearGradientMatch[1]);
-      const colors8 = [];
+      const colors9 = [];
       const colorsPart = linearGradientMatch[2];
       const colorRegex = /(#[0-9a-f]+)|(rgba?\(.+?\))|([a-z]+)/gi;
       let c;
       while (c = colorRegex.exec(colorsPart)) {
-        colors8.push(c[0]);
+        colors9.push(c[0]);
       }
       this.gradient = new LinearGradient();
       this.gradient.angle = angle;
-      this.gradient.stops = colors8.map((color, index) => {
-        const offset4 = index / (colors8.length - 1);
+      this.gradient.stops = colors9.map((color, index) => {
+        const offset4 = index / (colors9.length - 1);
         return { offset: offset4, color };
       });
     } else {
@@ -106412,6 +106411,9 @@ var en_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select Values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -107716,6 +107718,9 @@ var pseudo_default = {
       selectCell: {
         placeholder: "[\u015E\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 {{\u0140\u0227\u0180\u1E17\u0140}}}}}]"
       },
+      multiSelectCell: {
+        placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u015F\u015F\u015F]"
+      },
       booleanCell: {
         options: {
           yes: "[\u1E8E\u1E17\u015F]",
@@ -109227,7 +109232,8 @@ var DataTable = ({
   showExpandCollapseAllToggle,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   const initialTableConfig = localStoragePersistenceKey && webSdkStorage.storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React80__default.default.useRef(onServerSideDataRequest);
@@ -109239,14 +109245,29 @@ var DataTable = ({
   );
   const contextPanel = useContextPanel();
   const clientI18n = coreReact.useI18nContext();
+  const isCDNEnabled = enableCDN ?? (clientI18n == null ? void 0 : clientI18n.enableCDN) ?? false;
+  const cdnTranslations$1 = cdnTranslations.useRequestTranslations(
+    {
+      locale: clientI18n.locale,
+      type: "file",
+      absolute_file_path: (locale) => `core/packages/data-table/src/locales/${locale}.json`
+    },
+    { en: translations.en },
+    {
+      translations,
+      enableCDN: isCDNEnabled
+    }
+  );
   const internalI18n = coreReact.useI18n({
-    ...clientI18n,
+    locale: clientI18n.locale,
     translations: ramda.mergeDeepLeft(
       ramda.mergeDeepLeft(clientI18n.translations, {
         [clientI18n.locale]: translations2
       }),
-      translations
-    )
+      cdnTranslations$1.translations
+    ),
+    requestedTranslations: cdnTranslations$1,
+    enableCDN: isCDNEnabled
   });
   const rowSelectionRef = React80__default.default.useRef({
     affectedRows: {},
@@ -112482,7 +112503,8 @@ var ClientSideDataTable = ({
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80__default.default.createElement(
     DataTable,
@@ -112500,7 +112522,8 @@ var ClientSideDataTable = ({
       translations: translations2,
       localStoragePersistenceKey,
       customBulkEditorFields,
-      enableCellTextSelection
+      enableCellTextSelection,
+      enableCDN
     },
     children
   );
@@ -116961,7 +116984,8 @@ var ServerSideDataTable = ({
   enableCellTextSelection,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80__default.default.createElement(
     DataTable,
@@ -116980,7 +117004,8 @@ var ServerSideDataTable = ({
       translations: translations2,
       customBulkEditorFields,
       enableCellTextSelection,
-      localStoragePersistenceKey
+      localStoragePersistenceKey,
+      enableCDN
     },
     children
   );

package/dist/legacy/index.d.cts

@@ -316,6 +316,8 @@ interface MultiSelectCellRendererParams<TValue, OptionValue> {
     getLabel?: (cellValue: OptionValue) => string;
     getValue?: (cellValue: TValue) => OptionValue[];
     typographyProps?: TypographyProps;
+    placeholder?: string;
+    enablePlaceholder?: boolean;
 }
 type OnSearchParams$1 = {
     data: MultiSelectCellEditorProps['data'];
@@ -1146,6 +1148,7 @@ interface DataTableProps {
     showExpandCollapseAllToggle?: boolean;
     translations?: DataTableTranslations;
     enableCellTextSelection?: boolean;
+    enableCDN?: boolean;
 }
 interface ClientSideDataTableProps extends Omit<DataTableProps, 'onServerSideDataRequest' | 'showExpandCollapseAllToggle'> {
 }
@@ -1435,7 +1438,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1472,7 +1475,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/legacy/index.d.ts

@@ -316,6 +316,8 @@ interface MultiSelectCellRendererParams<TValue, OptionValue> {
     getLabel?: (cellValue: OptionValue) => string;
     getValue?: (cellValue: TValue) => OptionValue[];
     typographyProps?: TypographyProps;
+    placeholder?: string;
+    enablePlaceholder?: boolean;
 }
 type OnSearchParams$1 = {
     data: MultiSelectCellEditorProps['data'];
@@ -1146,6 +1148,7 @@ interface DataTableProps {
     showExpandCollapseAllToggle?: boolean;
     translations?: DataTableTranslations;
     enableCellTextSelection?: boolean;
+    enableCDN?: boolean;
 }
 interface ClientSideDataTableProps extends Omit<DataTableProps, 'onServerSideDataRequest' | 'showExpandCollapseAllToggle'> {
 }
@@ -1435,7 +1438,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1472,7 +1475,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/legacy/index.js

@@ -10,6 +10,7 @@ import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-fi
 import styled4, { css as css$1 } from 'styled-components';
 import { format } from '@procore/labs-financials-utils/dist/format';
 import { detectPrng, factory } from 'ulid';
+import { useRequestTranslations } from '@procore/cdn-translations';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
 import ReactDOM, { createPortal } from 'react-dom';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
@@ -57924,7 +57925,8 @@ function getId2(func, option) {
   return (func == null ? void 0 : func(option)) ?? (option == null ? void 0 : option.id) ?? option;
 }
 var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
+  const I18n = useI18nContext();
   const ref = React80.useRef();
   React80.useLayoutEffect(() => {
     var _a2, _b2;
@@ -57933,12 +57935,19 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
   if (value === void 0 || value === null) {
     return null;
   }
+  const options = getValue(
+    (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.getValue,
+    value,
+    emptyArray
+  );
+  const enablePlaceholder = (((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.enablePlaceholder) && columnDefinition.editable) ?? false;
+  const placeholder = ((_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.placeholder) ?? I18n.t("dataTable.cells.multiSelectCell.placeholder");
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
       as: "ol",
       ...getCellValueTypographyProps(
-        (_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.typographyProps
+        (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
       ),
       className: cx16("inlineListItems", "truncatingText", {
         "truncatingText--md": rowHeight === rowSize.md,
@@ -57946,29 +57955,19 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
       }),
       ref
     },
-    getValue(
-      (_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.getValue,
-      value,
-      emptyArray
-    ).map((option, idx, arr) => {
-      var _a2, _b2, _c;
-      return /* @__PURE__ */ React80.createElement(
-        React80.Fragment,
-        {
-          key: (
-            // eslint-disable-next-line react/no-array-index-key
-            `${getLabel2(
-              (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getLabel,
-              option
-            )}_${getId2(
-              (_b2 = columnDefinition.cellRendererParams) == null ? void 0 : _b2.getId,
-              option
-            )}_idx_${idx}`
-          )
-        },
-        /* @__PURE__ */ React80.createElement("li", null, getLabel2((_c = columnDefinition.cellRendererParams) == null ? void 0 : _c.getLabel, option), idx !== arr.length - 1 ? commaToken : null)
+    options.length ? options.map((option, idx, arr) => {
+      var _a2, _b2;
+      const label = getLabel2(
+        (_a2 = columnDefinition.cellRendererParams) == null ? void 0 : _a2.getLabel,
+        option
       );
-    })
+      const optionId = getId2(
+        (_b2 = columnDefinition.cellRendererParams) == null ? void 0 : _b2.getId,
+        option
+      );
+      const 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
   );
 };
 var MultiSelectCellRenderer = withDataTableRenderer(
@@ -80044,17 +80043,17 @@ var Shape = class _Shape extends Node2 {
     let linearGradientMatch;
     if ((fill === null || fill === void 0 ? void 0 : fill.startsWith("linear-gradient")) && (linearGradientMatch = LINEAR_GRADIENT_REGEXP.exec(fill))) {
       const angle = parseFloat(linearGradientMatch[1]);
-      const colors8 = [];
+      const colors9 = [];
       const colorsPart = linearGradientMatch[2];
       const colorRegex = /(#[0-9a-f]+)|(rgba?\(.+?\))|([a-z]+)/gi;
       let c;
       while (c = colorRegex.exec(colorsPart)) {
-        colors8.push(c[0]);
+        colors9.push(c[0]);
       }
       this.gradient = new LinearGradient();
       this.gradient.angle = angle;
-      this.gradient.stops = colors8.map((color, index) => {
-        const offset4 = index / (colors8.length - 1);
+      this.gradient.stops = colors9.map((color, index) => {
+        const offset4 = index / (colors9.length - 1);
         return { offset: offset4, color };
       });
     } else {
@@ -106399,6 +106398,9 @@ var en_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select Values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -107703,6 +107705,9 @@ var pseudo_default = {
       selectCell: {
         placeholder: "[\u015E\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 {{\u0140\u0227\u0180\u1E17\u0140}}}}}]"
       },
+      multiSelectCell: {
+        placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u015F\u015F\u015F]"
+      },
       booleanCell: {
         options: {
           yes: "[\u1E8E\u1E17\u015F]",
@@ -109214,7 +109219,8 @@ var DataTable = ({
   showExpandCollapseAllToggle,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   const initialTableConfig = localStoragePersistenceKey && storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React80.useRef(onServerSideDataRequest);
@@ -109226,14 +109232,29 @@ var DataTable = ({
   );
   const contextPanel = useContextPanel();
   const clientI18n = useI18nContext();
+  const isCDNEnabled = enableCDN ?? (clientI18n == null ? void 0 : clientI18n.enableCDN) ?? false;
+  const cdnTranslations = useRequestTranslations(
+    {
+      locale: clientI18n.locale,
+      type: "file",
+      absolute_file_path: (locale) => `core/packages/data-table/src/locales/${locale}.json`
+    },
+    { en: translations.en },
+    {
+      translations,
+      enableCDN: isCDNEnabled
+    }
+  );
   const internalI18n = useI18n({
-    ...clientI18n,
+    locale: clientI18n.locale,
     translations: mergeDeepLeft(
       mergeDeepLeft(clientI18n.translations, {
         [clientI18n.locale]: translations2
       }),
-      translations
-    )
+      cdnTranslations.translations
+    ),
+    requestedTranslations: cdnTranslations,
+    enableCDN: isCDNEnabled
   });
   const rowSelectionRef = React80.useRef({
     affectedRows: {},
@@ -112469,7 +112490,8 @@ var ClientSideDataTable = ({
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80.createElement(
     DataTable,
@@ -112487,7 +112509,8 @@ var ClientSideDataTable = ({
       translations: translations2,
       localStoragePersistenceKey,
       customBulkEditorFields,
-      enableCellTextSelection
+      enableCellTextSelection,
+      enableCDN
     },
     children
   );
@@ -116948,7 +116971,8 @@ var ServerSideDataTable = ({
   enableCellTextSelection,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80.createElement(
     DataTable,
@@ -116967,7 +116991,8 @@ var ServerSideDataTable = ({
       translations: translations2,
       customBulkEditorFields,
       enableCellTextSelection,
-      localStoragePersistenceKey
+      localStoragePersistenceKey,
+      enableCDN
     },
     children
   );

package/dist/modern/index.cjs

@@ -12,6 +12,7 @@ var labsFinancialsUtils = require('@procore/labs-financials-utils');
 var styled4 = require('styled-components');
 var format = require('@procore/labs-financials-utils/dist/format');
 var ulid$1 = require('ulid');
+var cdnTranslations = require('@procore/cdn-translations');
 var toastAlert = require('@procore/toast-alert');
 var ReactDOM = require('react-dom');
 var server = require('react-dom/server');
@@ -57825,6 +57826,7 @@ function getId2(func, option) {
   return func?.(option) ?? option?.id ?? option;
 }
 var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
+  const I18n = coreReact.useI18nContext();
   const ref = React80__default.default.useRef();
   React80__default.default.useLayoutEffect(() => {
     ref?.current?.setAttribute("title", ref?.current?.innerText);
@@ -57832,6 +57834,13 @@ 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");
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Typography,
     {
@@ -57845,26 +57854,18 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
       }),
       ref
     },
-    getValue(
-      columnDefinition.cellRendererParams?.getValue,
-      value,
-      emptyArray
-    ).map((option, idx, arr) => /* @__PURE__ */ React80__default.default.createElement(
-      React80__default.default.Fragment,
-      {
-        key: (
-          // eslint-disable-next-line react/no-array-index-key
-          `${getLabel2(
-            columnDefinition.cellRendererParams?.getLabel,
-            option
-          )}_${getId2(
-            columnDefinition.cellRendererParams?.getId,
-            option
-          )}_idx_${idx}`
-        )
-      },
-      /* @__PURE__ */ React80__default.default.createElement("li", null, getLabel2(columnDefinition.cellRendererParams?.getLabel, option), idx !== arr.length - 1 ? commaToken : null)
-    ))
+    options.length ? options.map((option, idx, arr) => {
+      const label = getLabel2(
+        columnDefinition.cellRendererParams?.getLabel,
+        option
+      );
+      const optionId = getId2(
+        columnDefinition.cellRendererParams?.getId,
+        option
+      );
+      const key = `${label}_${optionId}_idx_${idx}`;
+      return /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, { key }, /* @__PURE__ */ React80__default.default.createElement("li", null, label, idx !== arr.length - 1 ? commaToken : null));
+    }) : enablePlaceholder ? /* @__PURE__ */ React80__default.default.createElement("li", { style: { color: coreReact.colors.gray45 } }, placeholder) : null
   );
 };
 var MultiSelectCellRenderer = withDataTableRenderer(
@@ -79924,17 +79925,17 @@ var Shape = class _Shape extends Node2 {
     let linearGradientMatch;
     if ((fill === null || fill === void 0 ? void 0 : fill.startsWith("linear-gradient")) && (linearGradientMatch = LINEAR_GRADIENT_REGEXP.exec(fill))) {
       const angle = parseFloat(linearGradientMatch[1]);
-      const colors8 = [];
+      const colors9 = [];
       const colorsPart = linearGradientMatch[2];
       const colorRegex = /(#[0-9a-f]+)|(rgba?\(.+?\))|([a-z]+)/gi;
       let c;
       while (c = colorRegex.exec(colorsPart)) {
-        colors8.push(c[0]);
+        colors9.push(c[0]);
       }
       this.gradient = new LinearGradient();
       this.gradient.angle = angle;
-      this.gradient.stops = colors8.map((color, index) => {
-        const offset4 = index / (colors8.length - 1);
+      this.gradient.stops = colors9.map((color, index) => {
+        const offset4 = index / (colors9.length - 1);
         return { offset: offset4, color };
       });
     } else {
@@ -106244,6 +106245,9 @@ var en_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select Values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -107548,6 +107552,9 @@ var pseudo_default = {
       selectCell: {
         placeholder: "[\u015E\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 {{\u0140\u0227\u0180\u1E17\u0140}}}}}]"
       },
+      multiSelectCell: {
+        placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u015F\u015F\u015F]"
+      },
       booleanCell: {
         options: {
           yes: "[\u1E8E\u1E17\u015F]",
@@ -109045,7 +109052,8 @@ var DataTable = ({
   showExpandCollapseAllToggle,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   const initialTableConfig = localStoragePersistenceKey && webSdkStorage.storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React80__default.default.useRef(onServerSideDataRequest);
@@ -109057,14 +109065,29 @@ var DataTable = ({
   );
   const contextPanel = useContextPanel();
   const clientI18n = coreReact.useI18nContext();
+  const isCDNEnabled = enableCDN ?? clientI18n?.enableCDN ?? false;
+  const cdnTranslations$1 = cdnTranslations.useRequestTranslations(
+    {
+      locale: clientI18n.locale,
+      type: "file",
+      absolute_file_path: (locale) => `core/packages/data-table/src/locales/${locale}.json`
+    },
+    { en: translations.en },
+    {
+      translations,
+      enableCDN: isCDNEnabled
+    }
+  );
   const internalI18n = coreReact.useI18n({
-    ...clientI18n,
+    locale: clientI18n.locale,
     translations: ramda.mergeDeepLeft(
       ramda.mergeDeepLeft(clientI18n.translations, {
         [clientI18n.locale]: translations2
       }),
-      translations
-    )
+      cdnTranslations$1.translations
+    ),
+    requestedTranslations: cdnTranslations$1,
+    enableCDN: isCDNEnabled
   });
   const rowSelectionRef = React80__default.default.useRef({
     affectedRows: {},
@@ -112218,7 +112241,8 @@ var ClientSideDataTable = ({
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80__default.default.createElement(
     DataTable,
@@ -112236,7 +112260,8 @@ var ClientSideDataTable = ({
       translations: translations2,
       localStoragePersistenceKey,
       customBulkEditorFields,
-      enableCellTextSelection
+      enableCellTextSelection,
+      enableCDN
     },
     children
   );
@@ -116696,7 +116721,8 @@ var ServerSideDataTable = ({
   enableCellTextSelection,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80__default.default.createElement(
     DataTable,
@@ -116715,7 +116741,8 @@ var ServerSideDataTable = ({
       translations: translations2,
       customBulkEditorFields,
       enableCellTextSelection,
-      localStoragePersistenceKey
+      localStoragePersistenceKey,
+      enableCDN
     },
     children
   );

package/dist/modern/index.d.cts

@@ -316,6 +316,8 @@ interface MultiSelectCellRendererParams<TValue, OptionValue> {
     getLabel?: (cellValue: OptionValue) => string;
     getValue?: (cellValue: TValue) => OptionValue[];
     typographyProps?: TypographyProps;
+    placeholder?: string;
+    enablePlaceholder?: boolean;
 }
 type OnSearchParams$1 = {
     data: MultiSelectCellEditorProps['data'];
@@ -1146,6 +1148,7 @@ interface DataTableProps {
     showExpandCollapseAllToggle?: boolean;
     translations?: DataTableTranslations;
     enableCellTextSelection?: boolean;
+    enableCDN?: boolean;
 }
 interface ClientSideDataTableProps extends Omit<DataTableProps, 'onServerSideDataRequest' | 'showExpandCollapseAllToggle'> {
 }
@@ -1435,7 +1438,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1472,7 +1475,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/modern/index.d.ts

@@ -316,6 +316,8 @@ interface MultiSelectCellRendererParams<TValue, OptionValue> {
     getLabel?: (cellValue: OptionValue) => string;
     getValue?: (cellValue: TValue) => OptionValue[];
     typographyProps?: TypographyProps;
+    placeholder?: string;
+    enablePlaceholder?: boolean;
 }
 type OnSearchParams$1 = {
     data: MultiSelectCellEditorProps['data'];
@@ -1146,6 +1148,7 @@ interface DataTableProps {
     showExpandCollapseAllToggle?: boolean;
     translations?: DataTableTranslations;
     enableCellTextSelection?: boolean;
+    enableCDN?: boolean;
 }
 interface ClientSideDataTableProps extends Omit<DataTableProps, 'onServerSideDataRequest' | 'showExpandCollapseAllToggle'> {
 }
@@ -1435,7 +1438,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1472,7 +1475,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/modern/index.js

@@ -10,6 +10,7 @@ import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-fi
 import styled4, { css as css$1 } from 'styled-components';
 import { format } from '@procore/labs-financials-utils/dist/format';
 import { detectPrng, factory } from 'ulid';
+import { useRequestTranslations } from '@procore/cdn-translations';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
 import ReactDOM, { createPortal } from 'react-dom';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
@@ -57812,6 +57813,7 @@ function getId2(func, option) {
   return func?.(option) ?? option?.id ?? option;
 }
 var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) => {
+  const I18n = useI18nContext();
   const ref = React80.useRef();
   React80.useLayoutEffect(() => {
     ref?.current?.setAttribute("title", ref?.current?.innerText);
@@ -57819,6 +57821,13 @@ 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");
   return /* @__PURE__ */ React80.createElement(
     Typography,
     {
@@ -57832,26 +57841,18 @@ var InternalMultiSelectCellRenderer = ({ columnDefinition, rowHeight, value }) =
       }),
       ref
     },
-    getValue(
-      columnDefinition.cellRendererParams?.getValue,
-      value,
-      emptyArray
-    ).map((option, idx, arr) => /* @__PURE__ */ React80.createElement(
-      React80.Fragment,
-      {
-        key: (
-          // eslint-disable-next-line react/no-array-index-key
-          `${getLabel2(
-            columnDefinition.cellRendererParams?.getLabel,
-            option
-          )}_${getId2(
-            columnDefinition.cellRendererParams?.getId,
-            option
-          )}_idx_${idx}`
-        )
-      },
-      /* @__PURE__ */ React80.createElement("li", null, getLabel2(columnDefinition.cellRendererParams?.getLabel, option), idx !== arr.length - 1 ? commaToken : null)
-    ))
+    options.length ? options.map((option, idx, arr) => {
+      const label = getLabel2(
+        columnDefinition.cellRendererParams?.getLabel,
+        option
+      );
+      const optionId = getId2(
+        columnDefinition.cellRendererParams?.getId,
+        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
   );
 };
 var MultiSelectCellRenderer = withDataTableRenderer(
@@ -79911,17 +79912,17 @@ var Shape = class _Shape extends Node2 {
     let linearGradientMatch;
     if ((fill === null || fill === void 0 ? void 0 : fill.startsWith("linear-gradient")) && (linearGradientMatch = LINEAR_GRADIENT_REGEXP.exec(fill))) {
       const angle = parseFloat(linearGradientMatch[1]);
-      const colors8 = [];
+      const colors9 = [];
       const colorsPart = linearGradientMatch[2];
       const colorRegex = /(#[0-9a-f]+)|(rgba?\(.+?\))|([a-z]+)/gi;
       let c;
       while (c = colorRegex.exec(colorsPart)) {
-        colors8.push(c[0]);
+        colors9.push(c[0]);
       }
       this.gradient = new LinearGradient();
       this.gradient.angle = angle;
-      this.gradient.stops = colors8.map((color, index) => {
-        const offset4 = index / (colors8.length - 1);
+      this.gradient.stops = colors9.map((color, index) => {
+        const offset4 = index / (colors9.length - 1);
         return { offset: offset4, color };
       });
     } else {
@@ -106231,6 +106232,9 @@ var en_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select Values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -107535,6 +107539,9 @@ var pseudo_default = {
       selectCell: {
         placeholder: "[\u015E\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 {{\u0140\u0227\u0180\u1E17\u0140}}}}}]"
       },
+      multiSelectCell: {
+        placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u015F\u015F\u015F]"
+      },
       booleanCell: {
         options: {
           yes: "[\u1E8E\u1E17\u015F]",
@@ -109032,7 +109039,8 @@ var DataTable = ({
   showExpandCollapseAllToggle,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   const initialTableConfig = localStoragePersistenceKey && storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React80.useRef(onServerSideDataRequest);
@@ -109044,14 +109052,29 @@ var DataTable = ({
   );
   const contextPanel = useContextPanel();
   const clientI18n = useI18nContext();
+  const isCDNEnabled = enableCDN ?? clientI18n?.enableCDN ?? false;
+  const cdnTranslations = useRequestTranslations(
+    {
+      locale: clientI18n.locale,
+      type: "file",
+      absolute_file_path: (locale) => `core/packages/data-table/src/locales/${locale}.json`
+    },
+    { en: translations.en },
+    {
+      translations,
+      enableCDN: isCDNEnabled
+    }
+  );
   const internalI18n = useI18n({
-    ...clientI18n,
+    locale: clientI18n.locale,
     translations: mergeDeepLeft(
       mergeDeepLeft(clientI18n.translations, {
         [clientI18n.locale]: translations2
       }),
-      translations
-    )
+      cdnTranslations.translations
+    ),
+    requestedTranslations: cdnTranslations,
+    enableCDN: isCDNEnabled
   });
   const rowSelectionRef = React80.useRef({
     affectedRows: {},
@@ -112205,7 +112228,8 @@ var ClientSideDataTable = ({
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80.createElement(
     DataTable,
@@ -112223,7 +112247,8 @@ var ClientSideDataTable = ({
       translations: translations2,
       localStoragePersistenceKey,
       customBulkEditorFields,
-      enableCellTextSelection
+      enableCellTextSelection,
+      enableCDN
     },
     children
   );
@@ -116683,7 +116708,8 @@ var ServerSideDataTable = ({
   enableCellTextSelection,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  localStoragePersistenceKey
+  localStoragePersistenceKey,
+  enableCDN
 }) => {
   return /* @__PURE__ */ React80.createElement(
     DataTable,
@@ -116702,7 +116728,8 @@ var ServerSideDataTable = ({
       translations: translations2,
       customBulkEditorFields,
       enableCellTextSelection,
-      localStoragePersistenceKey
+      localStoragePersistenceKey,
+      enableCDN
     },
     children
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.27.1",
+  "version": "14.28.0-cdn.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -79,6 +79,7 @@
     "styled-components": ">= 5.1.1 < 6"
   },
   "dependencies": {
+    "@procore/cdn-translations": "0.0.5",
     "@procore/error-pages": "0.2.1",
     "@procore/labs-datetime-select": "0.1.1",
     "@procore/labs-group-by-select": "4.0.0",
@@ -113,7 +114,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.6.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.20.4",
+    "@procore/core-react": "12.21.0-cdn.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",