@teselagen/ui 0.5.23-beta.13 → 0.5.23-beta.15

package/index.cjs.js

@@ -47060,9 +47060,7 @@ const ColumnFilterMenu = /* @__PURE__ */ __name(({
           removeSingleFilter,
           schemaForField,
           setNewParams,
-          togglePopover: () => {
-            setColumnFilterMenuOpen(false);
-          }
+          togglePopover: () => setColumnFilterMenuOpen(false)
         }
       )
     },
@@ -47072,7 +47070,11 @@ const ColumnFilterMenu = /* @__PURE__ */ __name(({
         style: { marginLeft: 5 },
         icon: "filter",
         size: extraCompact ? 14 : void 0,
-        onClick: () => setColumnFilterMenuOpen((prev) => !prev),
+        onClick: (e2) => {
+          e2.preventDefault();
+          e2.stopPropagation();
+          setColumnFilterMenuOpen((prev) => !prev);
+        },
         className: classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
         })
@@ -48254,6 +48256,21 @@ const throwFormError = /* @__PURE__ */ __name((error) => {
   }
   throw new reduxForm.SubmissionError(errorToUse);
 }, "throwFormError");
+const useTraceUpdate = /* @__PURE__ */ __name((props) => {
+  const prev = React$1.useRef(props);
+  React$1.useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
+      if (prev.current[k2] !== v2) {
+        ps[k2] = [prev.current[k2], v2];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+}, "useTraceUpdate");
 T();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
 const itemSizeEstimators = {
@@ -48405,11 +48422,12 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   props = __spreadValues(__spreadValues({}, props), withSelectedEntities2 && typeof withSelectedEntities2 === "string" && {
     [withSelectedEntities2]: selectedEntities
   });
-  const currentParams = React$1.useMemo(() => {
+  const _currentParams = React$1.useMemo(() => {
     const tmp = (urlConnected ? getCurrentParamsFromUrl(history.location) : reduxFormQueryParams) || {};
     tmp.searchTerm = reduxFormSearchInput;
     return tmp;
   }, [history, reduxFormQueryParams, reduxFormSearchInput, urlConnected]);
+  const currentParams = useDeepEqualMemo(_currentParams);
   const tableParams = React$1.useMemo(() => {
     if (!isTableParamsConnected) {
       const updateSearch = /* @__PURE__ */ __name((val) => {
@@ -48487,6 +48505,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isTableParamsConnected,
     urlConnected
   ]);
+  useTraceUpdate(__spreadValues({}, queryParams));
   props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
@@ -48663,7 +48682,13 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         if (!showForcedHiddenColumns && withDisplayOptions && (isSimple || isInfinite)) {
           noValsForField = entities.every((e2) => {
             const val = get$5(e2, field.path);
-            return field.render ? !field.render(val, e2) : (cellRenderer == null ? void 0 : cellRenderer[field.path]) ? !cellRenderer[field.path](val, e2) : !val;
+            return field.render ? !field.render(val, e2, void 0, {
+              currentParams,
+              setNewParams
+            }) : (cellRenderer == null ? void 0 : cellRenderer[field.path]) ? !cellRenderer[field.path](val, e2, void 0, {
+              currentParams,
+              setNewParams
+            }) : !val;
           });
         }
         if (noValsForField) {
@@ -48705,8 +48730,8 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
     return schema2;
   }, [
-    cellRenderer,
     convertedSchema,
+    currentParams,
     entities,
     history,
     isInfinite,
@@ -48714,6 +48739,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isSimple,
     isViewable,
     onDoubleClick,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -49606,7 +49632,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   ]);
   React$1.useEffect(() => {
     addFilters(additionalFilters);
-  }, [addFilters, additionalFilters]);
+  }, [additionalFilters]);
   React$1.useEffect(() => {
     setColumns(
       schema.fields ? schema.fields.reduce((col, field, i) => {
@@ -49747,13 +49773,13 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       }
     });
   }, "addEntitiesToSelection");
-  const refocusTable = /* @__PURE__ */ __name(() => {
+  const refocusTable = React$1.useCallback(() => {
     var _a2, _b2;
     const table2 = (_b2 = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b2.closest(
       ".data-table-container>div"
     );
     table2 == null ? void 0 : table2.focus();
-  }, "refocusTable");
+  }, []);
   const isSelectionARectangle = React$1.useCallback(() => {
     if (selectedCells && Object.keys(selectedCells).length > 1) {
       const pathToIndex = getFieldPathToIndex(schema);
@@ -49940,6 +49966,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50122,6 +50149,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50595,8 +50623,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact3,
       currentParams,
@@ -50629,7 +50655,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,
@@ -69540,21 +69565,6 @@ const CmdButton = withCommand({
   icon: "icon",
   disabled: "isDisabled"
 })(core.Button);
-const useTraceUpdate = /* @__PURE__ */ __name((props) => {
-  const prev = React$1.useRef(props);
-  React$1.useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
-      if (prev.current[k2] !== v2) {
-        ps[k2] = [prev.current[k2], v2];
-      }
-      return ps;
-    }, {});
-    if (Object.keys(changedProps).length > 0) {
-      console.log("Changed props:", changedProps);
-    }
-    prev.current = props;
-  });
-}, "useTraceUpdate");
 const showProgressToast = /* @__PURE__ */ __name((message, value, key, opts) => {
   return window.toastr.default(
     /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement("div", { style: { marginBottom: 10 } }, message), /* @__PURE__ */ React$1.createElement(

package/index.es.js

@@ -47042,9 +47042,7 @@ const ColumnFilterMenu = /* @__PURE__ */ __name(({
           removeSingleFilter,
           schemaForField,
           setNewParams,
-          togglePopover: () => {
-            setColumnFilterMenuOpen(false);
-          }
+          togglePopover: () => setColumnFilterMenuOpen(false)
         }
       )
     },
@@ -47054,7 +47052,11 @@ const ColumnFilterMenu = /* @__PURE__ */ __name(({
         style: { marginLeft: 5 },
         icon: "filter",
         size: extraCompact ? 14 : void 0,
-        onClick: () => setColumnFilterMenuOpen((prev) => !prev),
+        onClick: (e2) => {
+          e2.preventDefault();
+          e2.stopPropagation();
+          setColumnFilterMenuOpen((prev) => !prev);
+        },
         className: classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
         })
@@ -48236,6 +48238,21 @@ const throwFormError = /* @__PURE__ */ __name((error) => {
   }
   throw new SubmissionError(errorToUse);
 }, "throwFormError");
+const useTraceUpdate = /* @__PURE__ */ __name((props) => {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
+      if (prev.current[k2] !== v2) {
+        ps[k2] = [prev.current[k2], v2];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+}, "useTraceUpdate");
 T();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
 const itemSizeEstimators = {
@@ -48387,11 +48404,12 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   props = __spreadValues(__spreadValues({}, props), withSelectedEntities2 && typeof withSelectedEntities2 === "string" && {
     [withSelectedEntities2]: selectedEntities
   });
-  const currentParams = useMemo(() => {
+  const _currentParams = useMemo(() => {
     const tmp = (urlConnected ? getCurrentParamsFromUrl(history.location) : reduxFormQueryParams) || {};
     tmp.searchTerm = reduxFormSearchInput;
     return tmp;
   }, [history, reduxFormQueryParams, reduxFormSearchInput, urlConnected]);
+  const currentParams = useDeepEqualMemo(_currentParams);
   const tableParams = useMemo(() => {
     if (!isTableParamsConnected) {
       const updateSearch = /* @__PURE__ */ __name((val) => {
@@ -48469,6 +48487,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isTableParamsConnected,
     urlConnected
   ]);
+  useTraceUpdate(__spreadValues({}, queryParams));
   props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
@@ -48645,7 +48664,13 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         if (!showForcedHiddenColumns && withDisplayOptions && (isSimple || isInfinite)) {
           noValsForField = entities.every((e2) => {
             const val = get$5(e2, field.path);
-            return field.render ? !field.render(val, e2) : (cellRenderer == null ? void 0 : cellRenderer[field.path]) ? !cellRenderer[field.path](val, e2) : !val;
+            return field.render ? !field.render(val, e2, void 0, {
+              currentParams,
+              setNewParams
+            }) : (cellRenderer == null ? void 0 : cellRenderer[field.path]) ? !cellRenderer[field.path](val, e2, void 0, {
+              currentParams,
+              setNewParams
+            }) : !val;
           });
         }
         if (noValsForField) {
@@ -48687,8 +48712,8 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
     return schema2;
   }, [
-    cellRenderer,
     convertedSchema,
+    currentParams,
     entities,
     history,
     isInfinite,
@@ -48696,6 +48721,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isSimple,
     isViewable,
     onDoubleClick,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -49588,7 +49614,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   ]);
   useEffect(() => {
     addFilters(additionalFilters);
-  }, [addFilters, additionalFilters]);
+  }, [additionalFilters]);
   useEffect(() => {
     setColumns(
       schema.fields ? schema.fields.reduce((col, field, i) => {
@@ -49729,13 +49755,13 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       }
     });
   }, "addEntitiesToSelection");
-  const refocusTable = /* @__PURE__ */ __name(() => {
+  const refocusTable = useCallback(() => {
     var _a2, _b2;
     const table2 = (_b2 = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b2.closest(
       ".data-table-container>div"
     );
     table2 == null ? void 0 : table2.focus();
-  }, "refocusTable");
+  }, []);
   const isSelectionARectangle = useCallback(() => {
     if (selectedCells && Object.keys(selectedCells).length > 1) {
       const pathToIndex = getFieldPathToIndex(schema);
@@ -49922,6 +49948,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50104,6 +50131,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50577,8 +50605,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact3,
       currentParams,
@@ -50611,7 +50637,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,
@@ -69522,21 +69547,6 @@ const CmdButton = withCommand({
   icon: "icon",
   disabled: "isDisabled"
 })(Button);
-const useTraceUpdate = /* @__PURE__ */ __name((props) => {
-  const prev = useRef(props);
-  useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
-      if (prev.current[k2] !== v2) {
-        ps[k2] = [prev.current[k2], v2];
-      }
-      return ps;
-    }, {});
-    if (Object.keys(changedProps).length > 0) {
-      console.log("Changed props:", changedProps);
-    }
-    prev.current = props;
-  });
-}, "useTraceUpdate");
 const showProgressToast = /* @__PURE__ */ __name((message, value, key, opts) => {
   return window.toastr.default(
     /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { style: { marginBottom: 10 } }, message), /* @__PURE__ */ React__default.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.23-beta.13",
+  "version": "0.5.23-beta.15",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/DataTable/ColumnFilterMenu.js

@@ -38,9 +38,7 @@ export const ColumnFilterMenu = ({
           removeSingleFilter={removeSingleFilter}
           schemaForField={schemaForField}
           setNewParams={setNewParams}
-          togglePopover={() => {
-            setColumnFilterMenuOpen(false);
-          }}
+          togglePopover={() => setColumnFilterMenuOpen(false)}
         />
       }
     >
@@ -48,7 +46,11 @@ export const ColumnFilterMenu = ({
         style={{ marginLeft: 5 }}
         icon="filter"
         size={extraCompact ? 14 : undefined}
-        onClick={() => setColumnFilterMenuOpen(prev => !prev)}
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setColumnFilterMenuOpen(prev => !prev);
+        }}
         className={classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
         })}

package/src/DataTable/index.js

@@ -102,6 +102,7 @@ import {
 import { RenderColumns } from "./Columns";
 import { formValueSelector } from "redux-form";
 import { throwFormError } from "../throwFormError";
+import { useTraceUpdate } from "../utils/useTraceUpdate";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -268,7 +269,7 @@ const DataTable = ({
       })
   };
 
-  const currentParams = useMemo(() => {
+  const _currentParams = useMemo(() => {
     const tmp =
       (urlConnected
         ? getCurrentParamsFromUrl(history.location) //important to use history location and not ownProps.location because for some reason the location path lags one render behind!!
@@ -278,6 +279,8 @@ const DataTable = ({
     return tmp;
   }, [history, reduxFormQueryParams, reduxFormSearchInput, urlConnected]);
 
+  const currentParams = useDeepEqualMemo(_currentParams);
+
   const tableParams = useMemo(() => {
     if (!isTableParamsConnected) {
       const updateSearch = val => {
@@ -376,6 +379,8 @@ const DataTable = ({
     urlConnected
   ]);
 
+  useTraceUpdate({ ...queryParams });
+
   props = {
     ...props,
     ...queryParams
@@ -577,9 +582,15 @@ const DataTable = ({
           noValsForField = entities.every(e => {
             const val = get(e, field.path);
             return field.render
-              ? !field.render(val, e)
+              ? !field.render(val, e, undefined, {
+                  currentParams,
+                  setNewParams
+                })
               : cellRenderer?.[field.path]
-                ? !cellRenderer[field.path](val, e)
+                ? !cellRenderer[field.path](val, e, undefined, {
+                    currentParams,
+                    setNewParams
+                  })
                 : !val;
           });
         }
@@ -636,9 +647,10 @@ const DataTable = ({
       }
     }
     return schema;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    cellRenderer,
     convertedSchema,
+    currentParams,
     entities,
     history,
     isInfinite,
@@ -646,6 +658,7 @@ const DataTable = ({
     isSimple,
     isViewable,
     onDoubleClick,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -1652,7 +1665,8 @@ const DataTable = ({
 
   useEffect(() => {
     addFilters(additionalFilters);
-  }, [addFilters, additionalFilters]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [additionalFilters]);
 
   useEffect(() => {
     setColumns(
@@ -1806,12 +1820,12 @@ const DataTable = ({
     });
   };
 
-  const refocusTable = () => {
+  const refocusTable = useCallback(() => {
     const table = tableRef.current?.tableRef?.closest(
       ".data-table-container>div"
     );
     table?.focus();
-  };
+  }, []);
 
   const isSelectionARectangle = useCallback(() => {
     if (selectedCells && Object.keys(selectedCells).length > 1) {
@@ -2013,6 +2027,7 @@ const DataTable = ({
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -2200,6 +2215,7 @@ const DataTable = ({
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -2731,8 +2747,6 @@ const DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact,
       currentParams,
@@ -2765,7 +2779,6 @@ const DataTable = ({
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,