@procore/data-table 14.12.1 → 14.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 14.13.0
+
+### Minor Changes
+
+- 03bf2b82b: Add Polish support
+
+## 14.12.2
+
+### Patch Changes
+
+- 7ba11177c: When using an input or date editor and focusing on an element outside of the table, clear the cell focus and ensure that the new element is focused.
+
 ## 14.12.1
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -8028,7 +8028,7 @@ var InternalBooleanCellEditor = React76__default.default.forwardRef(({ columnDef
   return /* @__PURE__ */ React76__default.default.createElement(
     coreReact.Select,
     {
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       className: cx("input-cell"),
       label: value ? I18n.t("dataTable.cells.booleanCell.options.yes") : I18n.t("dataTable.cells.booleanCell.options.no"),
@@ -8249,8 +8249,8 @@ var Editor = React76__default.default.forwardRef(
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
     }
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
       ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
@@ -8693,8 +8693,8 @@ var DateCellRenderer = withDataTableRenderer(Renderer4, "date");
 var Editor2 = React76__default.default.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
     var _a, _b;
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
     function onChange(date) {
       if (date) {
@@ -8767,8 +8767,8 @@ var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
 var Editor3 = React76__default.default.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
     var _a, _b;
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
     function onChange(date) {
       if (date) {
@@ -12818,8 +12818,8 @@ var GridOptionsValidator = class GridOptionsValidator2 {
       enterMovesDownAfterEdit: { version: "30", newProp: "enterNavigatesVerticallyAfterEdit", copyToNewProp: true }
     };
   }
-  pickOneWarning(prop1, prop2) {
-    console.warn(`AG Grid: ${prop1} and ${prop2} do not work with each other, you need to pick one.`);
+  pickOneWarning(prop1, prop22) {
+    console.warn(`AG Grid: ${prop1} and ${prop22} do not work with each other, you need to pick one.`);
   }
   init() {
     this.checkForDeprecated();
@@ -12841,7 +12841,7 @@ var GridOptionsValidator = class GridOptionsValidator2 {
       this.pickOneWarning("groupRemoveSingleChildren", "groupHideOpenParents");
     }
     if (this.gridOptionsService.isRowModelType("serverSide")) {
-      const msg = (prop, alt) => `AG Grid: '${prop}' is not supported on the Server-Side Row Model.` + (alt ? ` Please use ${alt} instead.` : "");
+      const msg = (prop3, alt) => `AG Grid: '${prop3}' is not supported on the Server-Side Row Model.` + (alt ? ` Please use ${alt} instead.` : "");
       if (this.gridOptionsService.exists("groupDefaultExpanded")) {
         console.warn(msg("groupDefaultExpanded", "isServerSideGroupOpenByDefault callback"));
       }
@@ -12857,7 +12857,7 @@ var GridOptionsValidator = class GridOptionsValidator2 {
     } else if (this.gridOptionsService.is("enableRangeHandle") || this.gridOptionsService.is("enableFillHandle")) {
       console.warn("AG Grid: 'enableRangeHandle' or 'enableFillHandle' will not work unless 'enableRangeSelection' is set to true");
     }
-    const validateRegistered = (prop, module) => this.gridOptionsService.exists(prop) && ModuleRegistry.__assertRegistered(module, prop, this.gridOptionsService.getGridId());
+    const validateRegistered = (prop3, module) => this.gridOptionsService.exists(prop3) && ModuleRegistry.__assertRegistered(module, prop3, this.gridOptionsService.getGridId());
     validateRegistered("sideBar", ModuleNames.SideBarModule);
     validateRegistered("statusBar", ModuleNames.StatusBarModule);
     validateRegistered("enableCharts", ModuleNames.GridChartsModule);
@@ -52181,15 +52181,15 @@ var DataTypeService = class DataTypeService2 extends BeanStub {
       ["valueGetter", void 0],
       ["valueParser", void 0],
       ["refData", void 0]
-    ].some(([prop, comparisonValue]) => this.doesColDefPropPreventInference(colDef, propsToCheckForInference, prop, comparisonValue));
+    ].some(([prop3, comparisonValue]) => this.doesColDefPropPreventInference(colDef, propsToCheckForInference, prop3, comparisonValue));
   }
-  doesColDefPropPreventInference(colDef, checkProps, prop, comparisonValue) {
-    if (!checkProps[prop]) {
+  doesColDefPropPreventInference(colDef, checkProps, prop3, comparisonValue) {
+    if (!checkProps[prop3]) {
       return false;
     }
-    const value = colDef[prop];
+    const value = colDef[prop3];
     if (value === null) {
-      checkProps[prop] = false;
+      checkProps[prop3] = false;
       return false;
     } else {
       return comparisonValue === void 0 ? !!value : value === comparisonValue;
@@ -53043,8 +53043,8 @@ var InternalNumberCellEditor = React76__default.default.forwardRef(({ columnDefi
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   return /* @__PURE__ */ React76__default.default.createElement(
     coreReact.Input,
@@ -53335,8 +53335,8 @@ var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
 var Editor4 = React76__default.default.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   var _a, _b, _c, _d, _e;
   const I18n = coreReact.useI18nContext();
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -53741,8 +53741,8 @@ var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React76__default.default.forwardRef(
   ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = coreReact.useI18nContext();
     const internalValue = eventKey ? value : ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
@@ -53815,8 +53815,8 @@ var Renderer12 = ({
 var Editor8 = React76__default.default.forwardRef(
   ({ columnDefinition, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = coreReact.useI18nContext();
     const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
@@ -53877,6 +53877,7 @@ var LocationFilterOverlay = React76__default.default.forwardRef(
     enableSublocations,
     selectState,
     options,
+    disabledOptions,
     columnDefinition,
     value
   }, ref) => {
@@ -53898,6 +53899,7 @@ var LocationFilterOverlay = React76__default.default.forwardRef(
         return onSelectAll();
       }
       if (selection.item.id === includeSublocationOption.id) {
+        _onSelect(selection);
         return onSelectSublocations();
       }
       return _onSelect(selection);
@@ -53968,8 +53970,9 @@ var LocationFilterOverlay = React76__default.default.forwardRef(
           {
             key: getId3(item),
             item,
-            selected: value.map(({ id }) => id).includes(getId3(item)),
-            suggested: i === 0
+            selected: value.map(({ id }) => id).includes(getId3(item)) || disabledOptions.map(({ id }) => id).includes(getId3(item)),
+            suggested: i === 0,
+            disabled: disabledOptions.map(({ id }) => id).includes(getId3(item))
           },
           getLabel3(item)
         );
@@ -54000,10 +54003,23 @@ var ServerSideLocationFilterRenderer = React76__default.default.forwardRef(
     const [selectState, setSelectState] = React76__default.default.useState(
       determineSelectedState(value)
     );
+    const [disabledValues, setDisabledValues] = React76__default.default.useState([]);
     const [enableSublocations, setEnableSublocations] = React76__default.default.useState(false);
     const onSelectSublocations = React76__default.default.useCallback(() => {
+      if (enableSublocations) {
+        setDisabledValues([]);
+      } else {
+        const newDisabledValues = [];
+        value.forEach((location) => {
+          newDisabledValues.push(...findSublocations(location));
+        });
+        const uniqDisabledValues = ramda.uniqBy(ramda.prop("id"), newDisabledValues).filter(
+          ({ id }) => !selectedValueIds.includes(id)
+        );
+        setDisabledValues(uniqDisabledValues);
+      }
       setEnableSublocations(!enableSublocations);
-    }, [enableSublocations]);
+    }, [enableSublocations, value, selectedValueIds, options]);
     const I18n = coreReact.useI18nContext();
     const selectRef = React76__default.default.useRef(null);
     const onSelectAll = React76__default.default.useCallback(() => {
@@ -54019,17 +54035,47 @@ var ServerSideLocationFilterRenderer = React76__default.default.forwardRef(
       }
     }, [options, selectState, selectedValueIds]);
     const onSelect = (selection) => {
-      if (selection.item.id === "select_all" || selection.item.id === "include_sublocations") {
+      if (selection.item.id === "select_all") {
         return;
       }
-      let newSelections = selectedValueIds.includes(getId3(selection.item)) ? removeSelections(selection.item, value) : [
-        ...value,
-        ...handleSelectSublocations(selection.item),
-        selection.item
-      ];
+      if (selection.item.id === "include_sublocations") {
+        return onChange(
+          value.map((item) => ({
+            ...item,
+            sublocations: enableSublocations ? [] : findSublocations(item)
+          }))
+        );
+      }
+      let newSelections = [];
+      if (selectedValueIds.includes(getId3(selection.item))) {
+        newSelections = removeSelections(selection.item, value);
+      } else {
+        newSelections = [...value, selection.item];
+        const sublocationsToDisable = handleSelectSublocations(selection.item);
+        const newDisabledValues = [
+          ...disabledValues,
+          ...sublocationsToDisable.filter(
+            ({ id }) => !selectedValueIds.includes(id)
+          )
+        ];
+        setDisabledValues(newDisabledValues);
+      }
       setSelectState(determineSelectedState(newSelections));
       setSelectedValueIds(newSelections.map(({ id }) => id));
-      onChange(newSelections);
+      onChange(
+        newSelections.map((item) => ({
+          ...item,
+          sublocations: handleSelectSublocations(item)
+        }))
+      );
+    };
+    const findSublocations = (selected) => {
+      return options.filter((option) => {
+        return ramda.startsWith(
+          `${getLabel3(selected).toLowerCase()} > `,
+          getLabel3(option).toLowerCase()
+        );
+      });
     };
     const handleSelectSublocations = (selected) => {
       if (enableSublocations) {
@@ -54047,14 +54093,16 @@ var ServerSideLocationFilterRenderer = React76__default.default.forwardRef(
     const removeSelections = React76__default.default.useCallback(
       function(selection, selected) {
         const sublocations = handleSelectSublocations(selection);
-        return enableSublocations ? selected.filter(
-          (item) => ![
-            ...sublocations.map(({ id }) => id),
-            getId3(selection)
-          ].includes(item.id)
-        ) : selected.filter((item) => getId3(item) !== getId3(selection));
+        const disabledValueIds = disabledValues.map(({ id }) => id);
+        const sublocationsToRemoveFromDisabledIds = sublocations.filter(({ id }) => disabledValueIds.includes(id)).map(({ id }) => id);
+        setDisabledValues(
+          disabledValues.filter(
+            ({ id }) => !sublocationsToRemoveFromDisabledIds.includes(id)
+          )
+        );
+        return selected.filter((item) => getId3(item) !== getId3(selection));
       },
-      [enableSublocations]
+      [enableSublocations, disabledValues]
     );
     React76__default.default.useEffect(() => {
       setSelectState(determineSelectedState(value));
@@ -54065,6 +54113,7 @@ var ServerSideLocationFilterRenderer = React76__default.default.forwardRef(
         columnDefinition,
         value,
         options,
+        disabledOptions: disabledValues,
         enableSublocations,
         getId: getId3,
         getLabel: getLabel3,
@@ -56070,7 +56119,14 @@ var DataTableCellEditor = React76__default.default.forwardRef(
             node.setDataValue(field, newValue);
             setCurrentValue(newValue);
           },
-          stopEditing,
+          stopEditing: (relatedTarget) => {
+            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table')) === null;
+            stopEditing(isRelatedTargetOutsideTable);
+            if (isRelatedTargetOutsideTable) {
+              api.clearFocusedCell();
+              relatedTarget.focus();
+            }
+          },
           tableApi: tableRef == null ? void 0 : tableRef.current,
           value: currentValue,
           ref: handleRefs(editorType)
@@ -56952,6 +57008,9 @@ function withDataTableRenderer(Component4, editorType) {
     }
   );
 }
+function ensureIsHTMLElement(element) {
+  return element instanceof HTMLElement ? element : null;
+}
 function getGroupNodes(params) {
   var _a, _b;
   const currentParentId = ((_b = (_a = params.node) == null ? void 0 : _a.parent) == null ? void 0 : _b.id) ?? "root";
@@ -57200,7 +57259,7 @@ var MultiSelectEditor = React76__default.default.forwardRef(({ columnDefinition,
     coreReact.MultiSelect,
     {
       beforeShow,
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       loading: isSearching || loading,
       getId: (option) => {
@@ -79800,6 +79859,11 @@ var ja_JP_default = {
   }
 };
 
+// src/locales/pl-PL.json
+var pl_PL_default = {
+  dataTable: {}
+};
+
 // src/locales/pseudo.json
 var pseudo_default = {
   dataTable: {
@@ -80416,7 +80480,8 @@ var translations = {
   pseudo: pseudo_default,
   "pt-BR": pt_BR_default,
   "th-TH": th_TH_default,
-  "zh-SG": zh_SG_default
+  "zh-SG": zh_SG_default,
+  "pl-PL": pl_PL_default
 };
 var PRINCE_XML_DPI = 96;
 var DEFAULT_PAGE_MARGIN = 40;
@@ -82346,6 +82411,7 @@ var Table = (props) => {
   return /* @__PURE__ */ React76__default.default.createElement(
     Spinner,
     {
+      "data-qa": "data-table-table",
       loading: loadingStatus.loading,
       label: loadingStatus.message,
       style: {
@@ -83843,6 +83909,7 @@ var LocationQuickFilterOverlay = React76__default.default.forwardRef(
     enableSublocations,
     selectState,
     options,
+    disabledOptions,
     columnDefinition,
     value
   }, ref) => {
@@ -83870,6 +83937,7 @@ var LocationQuickFilterOverlay = React76__default.default.forwardRef(
         return onSelectAll();
       }
       if (selection.item.id === includeSublocationOption.id) {
+        _onSelect(selection);
         return onSelectSublocations();
       }
       return _onSelect(selection);
@@ -83940,8 +84008,9 @@ var LocationQuickFilterOverlay = React76__default.default.forwardRef(
           {
             key: getId3(item),
             item,
-            selected: value.map(({ id }) => id).includes(getId3(item)),
-            suggested: i === 0
+            selected: value.map(({ id }) => id).includes(getId3(item)) || disabledOptions.map(({ id }) => id).includes(getId3(item)),
+            suggested: i === 0,
+            disabled: disabledOptions.map(({ id }) => id).includes(getId3(item))
           },
           getLabel3(item)
         );
@@ -83988,10 +84057,23 @@ var LocationQuickFilterRenderer = ({
   const [selectState, setSelectState] = React76__default.default.useState(
     determineSelectedState(value)
   );
+  const [disabledValues, setDisabledValues] = React76__default.default.useState([]);
   const [enableSublocations, setEnableSublocations] = React76__default.default.useState(false);
   const onSelectSublocations = React76__default.default.useCallback(() => {
+    if (enableSublocations) {
+      setDisabledValues([]);
+    } else {
+      const newDisabledValues = [];
+      value.forEach((location) => {
+        newDisabledValues.push(...findSublocations(location));
+      });
+      const uniqDisabledValues = ramda.uniqBy(ramda.prop("id"), newDisabledValues).filter(
+        ({ id }) => !selectedValueIds.includes(id)
+      );
+      setDisabledValues(uniqDisabledValues);
+    }
     setEnableSublocations(!enableSublocations);
-  }, [enableSublocations]);
+  }, [enableSublocations, value, selectedValueIds, options]);
   const onSelectAll = React76__default.default.useCallback(() => {
     if (selectState === "none" || selectState === "partial") {
       setSelectState("all");
@@ -84005,22 +84087,51 @@ var LocationQuickFilterRenderer = ({
     }
   }, [options, selectState, selectedValueIds]);
   const onSelect = (selection) => {
-    if (selection.item.id === "select_all" || selection.item.id === "include_sublocations") {
+    if (selection.item.id === "select_all") {
       return;
     }
-    let newSelections = selectedValueIds.includes(getId3(selection.item)) ? removeSelections(selection.item, value) : [...value, ...handleSelectSublocations(selection.item), selection.item];
+    if (selection.item.id === "include_sublocations") {
+      return onChange(
+        value.map((item) => ({
+          ...item,
+          sublocations: enableSublocations ? [] : findSublocations(item)
+        }))
+      );
+    }
+    let newSelections = [];
+    if (selectedValueIds.includes(getId3(selection.item))) {
+      newSelections = removeSelections(selection.item, value);
+    } else {
+      newSelections = [...value, selection.item];
+      const sublocationsToDisable = handleSelectSublocations(selection.item);
+      const newDisabledValues = [
+        ...disabledValues,
+        ...sublocationsToDisable.filter(
+          ({ id }) => !selectedValueIds.includes(id)
+        )
+      ];
+      setDisabledValues(newDisabledValues);
+    }
     setSelectState(determineSelectedState(newSelections));
     setSelectedValueIds(newSelections.map(({ id }) => id));
-    onChange(newSelections);
+    onChange(
+      newSelections.map((item) => ({
+        ...item,
+        sublocations: handleSelectSublocations(item)
+      }))
+    );
+  };
+  const findSublocations = (selected) => {
+    return options.filter((option) => {
+      return ramda.startsWith(
+        `${getLabel3(selected).toLowerCase()} > `,
+        getLabel3(option).toLowerCase()
+      );
+    });
   };
   const handleSelectSublocations = (selected) => {
     if (enableSublocations) {
-      const filteredOptions = options.filter((option) => {
-        return ramda.startsWith(
-          `${getLabel3(selected).toLowerCase()} > `,
-          getLabel3(option).toLowerCase()
-        );
-      });
+      const filteredOptions = findSublocations(selected);
       return filteredOptions;
     } else {
       return [];
@@ -84029,13 +84140,16 @@ var LocationQuickFilterRenderer = ({
   const removeSelections = React76__default.default.useCallback(
     function(selection, selected) {
       const sublocations = handleSelectSublocations(selection);
-      return enableSublocations ? selected.filter(
-        (item) => ![...sublocations.map(({ id }) => id), getId3(selection)].includes(
-          item.id
+      const disabledValueIds = disabledValues.map(({ id }) => id);
+      const sublocationsToRemoveFromDisabledIds = sublocations.filter(({ id }) => disabledValueIds.includes(id)).map(({ id }) => id);
+      setDisabledValues(
+        disabledValues.filter(
+          ({ id }) => !sublocationsToRemoveFromDisabledIds.includes(id)
         )
-      ) : selected.filter((item) => getId3(item) !== getId3(selection));
+      );
+      return selected.filter((item) => getId3(item) !== getId3(selection));
     },
-    [enableSublocations]
+    [enableSublocations, disabledValues]
   );
   React76__default.default.useEffect(() => {
     setSelectState(determineSelectedState(value));
@@ -84050,6 +84164,7 @@ var LocationQuickFilterRenderer = ({
       selectState,
       value,
       options,
+      disabledOptions: disabledValues,
       getId: getId3,
       getLabel: getLabel3,
       loading,

package/dist/legacy/index.d.cts

@@ -198,7 +198,7 @@ interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends Colum
     eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
-    stopEditing: () => void;
+    stopEditing: (relatedTarget?: HTMLElement | null) => void;
 }
 
 interface BooleanCellRendererParams {
@@ -1175,6 +1175,7 @@ interface LocationOption {
     label?: string;
     name?: string;
     id: string | number;
+    sublocations?: Omit<LocationOption, 'sublocations'>[];
 }
 declare const LocationFilterRenderer: (props: LocationFilterProps) => React__default.JSX.Element | null;
 

package/dist/legacy/index.d.ts

@@ -198,7 +198,7 @@ interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends Colum
     eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
-    stopEditing: () => void;
+    stopEditing: (relatedTarget?: HTMLElement | null) => void;
 }
 
 interface BooleanCellRendererParams {
@@ -1175,6 +1175,7 @@ interface LocationOption {
     label?: string;
     name?: string;
     id: string | number;
+    sublocations?: Omit<LocationOption, 'sublocations'>[];
 }
 declare const LocationFilterRenderer: (props: LocationFilterProps) => React__default.JSX.Element | null;