@teselagen/ui 0.5.23-beta.14 → 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 = {
@@ -48488,6 +48505,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isTableParamsConnected,
     urlConnected
   ]);
+  useTraceUpdate(__spreadValues({}, queryParams));
   props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
@@ -48712,7 +48730,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
     return schema2;
   }, [
-    cellRenderer,
     convertedSchema,
     currentParams,
     entities,
@@ -48722,7 +48739,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isSimple,
     isViewable,
     onDoubleClick,
-    setNewParams,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -49615,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) => {
@@ -49756,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);
@@ -49949,6 +49966,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50131,6 +50149,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50604,8 +50623,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact3,
       currentParams,
@@ -50638,7 +50655,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,
@@ -69549,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 = {
@@ -48470,6 +48487,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isTableParamsConnected,
     urlConnected
   ]);
+  useTraceUpdate(__spreadValues({}, queryParams));
   props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
@@ -48694,7 +48712,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
     return schema2;
   }, [
-    cellRenderer,
     convertedSchema,
     currentParams,
     entities,
@@ -48704,7 +48721,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isSimple,
     isViewable,
     onDoubleClick,
-    setNewParams,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -49597,7 +49614,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   ]);
   useEffect(() => {
     addFilters(additionalFilters);
-  }, [addFilters, additionalFilters]);
+  }, [additionalFilters]);
   useEffect(() => {
     setColumns(
       schema.fields ? schema.fields.reduce((col, field, i) => {
@@ -49738,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);
@@ -49931,6 +49948,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50113,6 +50131,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -50586,8 +50605,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact3,
       currentParams,
@@ -50620,7 +50637,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,
@@ -69531,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.14",
+  "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;
@@ -378,6 +379,8 @@ const DataTable = ({
     urlConnected
   ]);
 
+  useTraceUpdate({ ...queryParams });
+
   props = {
     ...props,
     ...queryParams
@@ -644,8 +647,8 @@ const DataTable = ({
       }
     }
     return schema;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    cellRenderer,
     convertedSchema,
     currentParams,
     entities,
@@ -655,7 +658,7 @@ const DataTable = ({
     isSimple,
     isViewable,
     onDoubleClick,
-    setNewParams,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -1662,7 +1665,8 @@ const DataTable = ({
 
   useEffect(() => {
     addFilters(additionalFilters);
-  }, [addFilters, additionalFilters]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [additionalFilters]);
 
   useEffect(() => {
     setColumns(
@@ -1816,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) {
@@ -2023,6 +2027,7 @@ const DataTable = ({
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -2210,6 +2215,7 @@ const DataTable = ({
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -2741,8 +2747,6 @@ const DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact,
       currentParams,
@@ -2775,7 +2779,6 @@ const DataTable = ({
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,