@teselagen/ui 0.5.23-beta.17 → 0.5.23-beta.19

package/DataTable/Columns.d.ts

@@ -1,4 +1,4 @@
-export function useColumns({ addFilters, cellRenderer, columns, currentParams, compact, editingCell, editingCellSelectAll, entities, expandedEntityIdMap, extraCompact, filters, formName, getCellHoverText, isCellEditable, isEntityDisabled, isLocalCall, isSimple, isSingleSelect, isSelectionARectangle, noDeselectAll, noSelect, noUserSelect, onDeselect, onMultiRowSelect, onRowClick, onRowSelect, onSingleRowSelect, order, primarySelectedCellId, reduxFormCellValidation, reduxFormSelectedEntityIdMap, refocusTable, removeSingleFilter, schema, selectedCells, setEditingCell, setExpandedEntityIdMap, setNewParams, setOrder, setSelectedCells, shouldShowSubComponent, startCellEdit, SubComponent, tableRef, updateEntitiesHelper, updateValidation, withCheckboxes, withExpandAndCollapseAllButton, withFilter: _withFilter, withSort }: {
+export function useColumns({ addFilters, cellRenderer, columns, currentParams, compact, editingCell, editingCellSelectAll, entities, expandedEntityIdMap, extraCompact, filters, formName, getCellHoverText, isCellEditable, isEntityDisabled, isLocalCall, isSimple, isSingleSelect, isSelectionARectangle, noDeselectAll, noSelect, noUserSelect, onDeselect, onMultiRowSelect, onRowClick, onRowSelect, onSingleRowSelect, order, primarySelectedCellId, reduxFormCellValidation, reduxFormSelectedEntityIdMap, refocusTable, removeSingleFilter, schema, selectedCells, setExpandedEntityIdMap, setNewParams, setOrder, setSelectedCells, shouldShowSubComponent, startCellEdit, SubComponent, tableRef, updateEntitiesHelper, updateValidation, withCheckboxes, withExpandAndCollapseAllButton, withFilter: _withFilter, withSort }: {
     addFilters: any;
     cellRenderer: any;
     columns: any;
@@ -34,7 +34,6 @@ export function useColumns({ addFilters, cellRenderer, columns, currentParams, c
     removeSingleFilter?: ((...args: any[]) => void) | undefined;
     schema: any;
     selectedCells: any;
-    setEditingCell: any;
     setExpandedEntityIdMap: any;
     setNewParams: any;
     setOrder?: ((...args: any[]) => void) | undefined;

package/DataTable/RenderCell.d.ts

@@ -0,0 +1,18 @@
+export function RenderCell({ oldFunc, getCopyTextForCell, column, isCellEditable, isEntityDisabled, finishCellEdit, formName, noEllipsis, cancelCellEdit, getCellHoverText, selectedCells, isSelectionARectangle, startCellEdit, tableRef, onDragEnd, args }: {
+    oldFunc: any;
+    getCopyTextForCell: any;
+    column: any;
+    isCellEditable: any;
+    isEntityDisabled: any;
+    finishCellEdit: any;
+    formName: any;
+    noEllipsis: any;
+    cancelCellEdit: any;
+    getCellHoverText: any;
+    selectedCells: any;
+    isSelectionARectangle: any;
+    startCellEdit: any;
+    tableRef: any;
+    onDragEnd: any;
+    args: any;
+}): import("react/jsx-runtime").JSX.Element;

package/index.cjs.js

@@ -47274,6 +47274,177 @@ const CellDragHandle = /* @__PURE__ */ __name(({
     }
   );
 }, "CellDragHandle");
+const RenderCell = /* @__PURE__ */ __name(({
+  oldFunc,
+  getCopyTextForCell,
+  column,
+  isCellEditable,
+  isEntityDisabled,
+  finishCellEdit,
+  formName,
+  noEllipsis,
+  cancelCellEdit,
+  getCellHoverText,
+  selectedCells,
+  isSelectionARectangle,
+  startCellEdit,
+  tableRef,
+  onDragEnd,
+  args
+}) => {
+  var _a;
+  const editingCell = reactRedux.useSelector(
+    (state) => {
+      var _a2, _b, _c;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormEditingCell;
+    }
+  );
+  const initialValue = reactRedux.useSelector(
+    (state) => {
+      var _a2, _b, _c;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormInitialValue;
+    }
+  );
+  const [row] = args;
+  const rowId = getIdOrCodeOrIndex(row.original, row.index);
+  const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
+  let val = oldFunc(...args);
+  const oldVal = val;
+  const text2 = getCopyTextForCell(val, row, column);
+  const dataTest = {
+    "data-test": "tgCell_" + column.path
+  };
+  const fullValue = (_a = row.original) == null ? void 0 : _a[row.column.path];
+  if (isEditingCell) {
+    if (column.type === "genericSelect") {
+      const GenericSelectComp = column.GenericSelectComp;
+      return /* @__PURE__ */ React$1.createElement(
+        GenericSelectComp,
+        __spreadProps(__spreadValues({
+          rowId,
+          fullValue,
+          initialValue: text2
+        }, dataTest), {
+          finishEdit: (newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          },
+          dataTest,
+          cancelEdit: cancelCellEdit
+        })
+      );
+    }
+    if (column.type === "dropdown" || column.type === "dropdownMulti") {
+      return /* @__PURE__ */ React$1.createElement(
+        DropdownCell,
+        {
+          isMulti: dataTest.isMulti || column.type === "dropdownMulti",
+          initialValue: dataTest.initialValue || text2,
+          options: getVals(column.values),
+          finishEdit: (newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          },
+          dataTest,
+          cancelEdit: cancelCellEdit
+        }
+      );
+    } else {
+      return /* @__PURE__ */ React$1.createElement(
+        EditableCell,
+        {
+          dataTest,
+          cancelEdit: cancelCellEdit,
+          isNumeric: column.type === "number",
+          initialValue: initialValue || text2,
+          finishEdit: (newVal) => {
+            finishCellEdit(cellId, newVal);
+          }
+        }
+      );
+    }
+  }
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = /* @__PURE__ */ React$1.createElement(
+      core.Checkbox,
+      {
+        disabled: isEntityDisabled(row.original),
+        className: "tg-cell-edit-boolean-checkbox",
+        checked: oldVal === "True",
+        onChange: (e2) => {
+          const checked = e2.target.checked;
+          finishCellEdit(cellId, checked);
+        }
+      }
+    );
+    noEllipsis = true;
+  }
+  let title = text2;
+  if (getCellHoverText)
+    title = getCellHoverText(...args);
+  else if (column.getTitleAttr)
+    title = column.getTitleAttr(...args);
+  const isSelectedCell = selectedCells == null ? void 0 : selectedCells[cellId];
+  const {
+    isRect,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  } = isSelectionARectangle();
+  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
+    "div",
+    __spreadProps(__spreadValues({
+      style: __spreadValues({}, !noEllipsis && {
+        textOverflow: "ellipsis",
+        overflow: "hidden"
+      })
+    }, dataTest), {
+      className: "tg-cell-wrapper",
+      "data-copy-text": text2,
+      "data-copy-json": JSON.stringify(
+        //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
+        column.type === "genericSelect" ? {
+          __strVal: fullValue,
+          __genSelCol: column.path
+        } : { __strVal: text2 }
+      ),
+      title: title || void 0
+    }),
+    val
+  ), isCellEditable && (column.type === "dropdown" || column.type === "dropdownMulti" || column.type === "genericSelect") && /* @__PURE__ */ React$1.createElement(
+    core.Icon,
+    {
+      icon: "caret-down",
+      style: {
+        position: "absolute",
+        right: 5,
+        opacity: 0.3
+      },
+      className: "cell-edit-dropdown",
+      onClick: () => {
+        startCellEdit(cellId);
+      }
+    }
+  ), isSelectedCell && (isRect ? isBottomRightCornerOfRectangle({
+    cellId,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  }) : isSelectedCell === PRIMARY_SELECTED_VAL) && /* @__PURE__ */ React$1.createElement(
+    CellDragHandle,
+    {
+      key: cellId,
+      thisTable: tableRef.current.tableRef,
+      cellId,
+      isSelectionARectangle,
+      onDragEnd
+    }
+  ));
+}, "RenderCell");
 dayjs.extend(localizedFormat);
 const RenderColumnHeader = /* @__PURE__ */ __name(({
   addFilters,
@@ -47525,171 +47696,6 @@ const renderCheckboxHeader = /* @__PURE__ */ __name(({
     }, checkboxProps)
   ) : null;
 }, "renderCheckboxHeader");
-const RenderCell = /* @__PURE__ */ __name(({
-  oldFunc,
-  getCopyTextForCell,
-  column,
-  isCellEditable,
-  isEntityDisabled,
-  finishCellEdit,
-  formName,
-  noEllipsis,
-  cancelCellEdit,
-  getCellHoverText,
-  selectedCells,
-  isSelectionARectangle,
-  startCellEdit,
-  tableRef,
-  onDragEnd,
-  args
-}) => {
-  var _a;
-  const editingCell = reactRedux.useSelector(
-    (state) => {
-      var _a2, _b, _c;
-      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.editingCell;
-    }
-  );
-  const [row] = args;
-  const rowId = getIdOrCodeOrIndex(row.original, row.index);
-  const cellId = `${rowId}:${row.column.path}`;
-  const isEditingCell = editingCell === cellId;
-  let val = oldFunc(...args);
-  const oldVal = val;
-  const text2 = getCopyTextForCell(val, row, column);
-  const dataTest = {
-    "data-test": "tgCell_" + column.path
-  };
-  const fullValue = (_a = row.original) == null ? void 0 : _a[row.column.path];
-  if (isEditingCell) {
-    if (column.type === "genericSelect") {
-      const GenericSelectComp = column.GenericSelectComp;
-      return /* @__PURE__ */ React$1.createElement(
-        GenericSelectComp,
-        __spreadProps(__spreadValues({
-          rowId,
-          fullValue,
-          initialValue: text2
-        }, dataTest), {
-          finishEdit: (newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          },
-          dataTest,
-          cancelEdit: cancelCellEdit
-        })
-      );
-    }
-    if (column.type === "dropdown" || column.type === "dropdownMulti") {
-      return /* @__PURE__ */ React$1.createElement(
-        DropdownCell,
-        {
-          isMulti: dataTest.isMulti || column.type === "dropdownMulti",
-          initialValue: dataTest.initialValue || text2,
-          options: getVals(column.values),
-          finishEdit: (newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          },
-          dataTest,
-          cancelEdit: cancelCellEdit
-        }
-      );
-    } else {
-      return /* @__PURE__ */ React$1.createElement(
-        EditableCell,
-        {
-          dataTest,
-          cancelEdit: cancelCellEdit,
-          isNumeric: column.type === "number",
-          initialValue: text2,
-          finishEdit: (newVal) => {
-            finishCellEdit(cellId, newVal);
-          }
-        }
-      );
-    }
-  }
-  const isBool = column.type === "boolean";
-  if (isCellEditable && isBool) {
-    val = /* @__PURE__ */ React$1.createElement(
-      core.Checkbox,
-      {
-        disabled: isEntityDisabled(row.original),
-        className: "tg-cell-edit-boolean-checkbox",
-        checked: oldVal === "True",
-        onChange: (e2) => {
-          const checked = e2.target.checked;
-          finishCellEdit(cellId, checked);
-        }
-      }
-    );
-    noEllipsis = true;
-  }
-  let title = text2;
-  if (getCellHoverText)
-    title = getCellHoverText(...args);
-  else if (column.getTitleAttr)
-    title = column.getTitleAttr(...args);
-  const isSelectedCell = selectedCells == null ? void 0 : selectedCells[cellId];
-  const {
-    isRect,
-    selectionGrid,
-    lastRowIndex,
-    lastCellIndex,
-    entityMap,
-    pathToIndex
-  } = isSelectionARectangle();
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      style: __spreadValues({}, !noEllipsis && {
-        textOverflow: "ellipsis",
-        overflow: "hidden"
-      })
-    }, dataTest), {
-      className: "tg-cell-wrapper",
-      "data-copy-text": text2,
-      "data-copy-json": JSON.stringify(
-        //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
-        column.type === "genericSelect" ? {
-          __strVal: fullValue,
-          __genSelCol: column.path
-        } : { __strVal: text2 }
-      ),
-      title: title || void 0
-    }),
-    val
-  ), isCellEditable && (column.type === "dropdown" || column.type === "dropdownMulti" || column.type === "genericSelect") && /* @__PURE__ */ React$1.createElement(
-    core.Icon,
-    {
-      icon: "caret-down",
-      style: {
-        position: "absolute",
-        right: 5,
-        opacity: 0.3
-      },
-      className: "cell-edit-dropdown",
-      onClick: () => {
-        startCellEdit(cellId);
-      }
-    }
-  ), isSelectedCell && (isRect ? isBottomRightCornerOfRectangle({
-    cellId,
-    selectionGrid,
-    lastRowIndex,
-    lastCellIndex,
-    entityMap,
-    pathToIndex
-  }) : isSelectedCell === PRIMARY_SELECTED_VAL) && /* @__PURE__ */ React$1.createElement(
-    CellDragHandle,
-    {
-      key: cellId,
-      thisTable: tableRef.current.tableRef,
-      cellId,
-      isSelectionARectangle,
-      onDragEnd
-    }
-  ));
-}, "RenderCell");
 const useColumns = /* @__PURE__ */ __name(({
   addFilters,
   cellRenderer,
@@ -47726,7 +47732,6 @@ const useColumns = /* @__PURE__ */ __name(({
   removeSingleFilter = noop$3,
   schema,
   selectedCells,
-  setEditingCell,
   setExpandedEntityIdMap,
   setNewParams,
   setOrder = noop$3,
@@ -48036,7 +48041,7 @@ const useColumns = /* @__PURE__ */ __name(({
   const finishCellEdit = React$1.useCallback(
     (cellId, newVal, doNotStopEditing) => {
       const [rowId, path2] = cellId.split(":");
-      !doNotStopEditing && setEditingCell(null);
+      !doNotStopEditing && change("reduxFormEditingCell", null);
       updateEntitiesHelper(entities, (entities2) => {
         const entity = entities2.find((e2, i) => {
           return getIdOrCodeOrIndex(e2, i) === rowId;
@@ -48055,19 +48060,19 @@ const useColumns = /* @__PURE__ */ __name(({
       !doNotStopEditing && refocusTable();
     },
     [
+      change,
       entities,
       reduxFormCellValidation,
       refocusTable,
       schema,
-      setEditingCell,
       updateEntitiesHelper,
       updateValidation
     ]
   );
   const cancelCellEdit = React$1.useCallback(() => {
-    setEditingCell(null);
+    change("reduxFormEditingCell", null);
     refocusTable();
-  }, [refocusTable, setEditingCell]);
+  }, [change, refocusTable]);
   if (!columns.length) {
     return columns;
   }
@@ -48250,6 +48255,7 @@ const useColumns = /* @__PURE__ */ __name(({
       RenderCell,
       {
         oldFunc,
+        formName,
         getCopyTextForCell,
         column,
         isCellEditable,
@@ -48282,21 +48288,6 @@ 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 = {
@@ -48369,7 +48360,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   const {
     reduxFormCellValidation: _reduxFormCellValidation,
     reduxFormEditingCell,
-    reduxFormEntities: _reduxFormEntities,
+    reduxFormEntities,
     reduxFormQueryParams: _reduxFormQueryParams = {},
     reduxFormSearchInput: _reduxFormSearchInput = "",
     reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
@@ -48384,7 +48375,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     )
   );
   const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);
-  const reduxFormEntities = useDeepEqualMemo(_reduxFormEntities);
   const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
   const reduxFormSearchInput = useDeepEqualMemo(_reduxFormSearchInput);
   const reduxFormSelectedEntityIdMap = useDeepEqualMemo(
@@ -48457,7 +48447,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     return tmp;
   }, [history, reduxFormQueryParams, reduxFormSearchInput, urlConnected]);
   const currentParams = useDeepEqualMemo(_currentParams);
-  useTraceUpdate({ currentParams });
   const tableParams = React$1.useMemo(() => {
     if (!isTableParamsConnected) {
       const updateSearch = /* @__PURE__ */ __name((val) => {
@@ -48663,20 +48652,28 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   }, [entitiesAcrossPages, reduxFormSelectedEntityIdMap, change]);
   const [tableConfig, setTableConfig] = React$1.useState({ fieldOptions: [] });
   React$1.useEffect(() => {
-    let newTableConfig = {};
     if (withDisplayOptions) {
+      let newTableConfig = {};
       if (syncDisplayOptionsToDb) {
         newTableConfig = tableConfigurations && tableConfigurations[0];
       } else {
         newTableConfig = getTableConfigFromStorage(formName);
       }
-      if (!newTableConfig) {
-        newTableConfig = {
-          fieldOptions: []
-        };
-      }
+      setTableConfig((prev) => {
+        if (!newTableConfig) {
+          newTableConfig = {
+            fieldOptions: []
+          };
+          if (isEqual(prev, newTableConfig)) {
+            return prev;
+          } else {
+            return newTableConfig;
+          }
+        } else {
+          return newTableConfig;
+        }
+      });
     }
-    setTableConfig(newTableConfig);
   }, [
     formName,
     syncDisplayOptionsToDb,
@@ -48924,8 +48921,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         }
       }));
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [change]
   );
   const formatAndValidateEntities = React$1.useCallback(
     (entities2, { useDefaultValues, indexToStartAt } = {}) => {
@@ -49125,7 +49121,8 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
   }, [selectedCells]);
   const startCellEdit = React$1.useCallback(
-    (cellId) => {
+    (cellId, initialValue) => {
+      change("reduxFormInitialValue", initialValue);
       change("reduxFormEditingCell", (prev) => {
         if (prev === cellId)
           return cellId;
@@ -49487,22 +49484,27 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   const [selectingAll, setSelectingAll] = React$1.useState(false);
   React$1.useEffect(() => {
     const formatAndValidateTableInitial = /* @__PURE__ */ __name(() => {
-      const { newEnts, validationErrors } = formatAndValidateEntities(_origEntities);
+      const { newEnts, validationErrors } = formatAndValidateEntities(entities);
       const toKeep = {};
       forEach(reduxFormCellValidation, (v2, k2) => {
         if (v2 && v2._isTableAsyncWideError) {
           toKeep[k2] = v2;
         }
       });
-      change("reduxFormEntities", newEnts);
+      change("reduxFormEntities", (prev) => {
+        if (!isEqual(prev, newEnts)) {
+          return newEnts;
+        }
+        return prev;
+      });
       updateValidation(newEnts, __spreadValues(__spreadValues({}, toKeep), validationErrors));
     }, "formatAndValidateTableInitial");
     isCellEditable && formatAndValidateTableInitial();
   }, [
-    _origEntities,
-    isCellEditable,
     change,
+    entities,
     formatAndValidateEntities,
+    isCellEditable,
     reduxFormCellValidation,
     updateValidation
   ]);
@@ -50831,7 +50833,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
           if (rowDisabled)
             return;
           e2.stopPropagation();
-          startCellEdit(primarySelectedCellId);
+          startCellEdit(primarySelectedCellId, e2.key);
         }
       }),
       isCellEditable && entities.length > 50 && // test for this!!
@@ -64425,6 +64427,7 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
     syncDisplayOptionsToDb,
     tableParams: _tableParams,
     urlConnected,
+    withDisplayOptions,
     withPaging,
     withSelectedEntities: withSelectedEntities2
   } = props;
@@ -64585,7 +64588,8 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
       formName,
       isLocalCall,
       schema,
-      currentParams
+      currentParams,
+      withDisplayOptions
     }), queryParams), boundDispatchProps), {
       form: formName,
       //this will override the default redux form name
@@ -64604,7 +64608,8 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
     queryParams,
     schema,
     selectedEntities,
-    urlConnected
+    urlConnected,
+    withDisplayOptions
   ]);
   return __spreadProps(__spreadValues(__spreadValues({
     isLocalCall,
@@ -69575,6 +69580,21 @@ 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(