@teselagen/ui 0.7.7-beta.2 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.7-beta.2",
+  "version": "0.7.7",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,8 +12,8 @@
   "dependencies": {
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
-    "@blueprintjs/core": "3.52.0",
-    "@blueprintjs/datetime": "3.23.19",
+    "@blueprintjs/core": "3.54.0",
+    "@blueprintjs/datetime": "^3.24.1",
     "@blueprintjs/icons": "3.33.0",
     "@blueprintjs/select": "3.18.11",
     "@dnd-kit/core": "^6.1.0",
@@ -45,7 +45,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
     "react-dropzone": "^11.4.2",
-    "react-markdown": "8.0.7",
+    "react-markdown": "9.0.1",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
     "react-router-dom": "4",
@@ -54,7 +54,7 @@
     "redux": "^4.1.2",
     "redux-form": "^8.3.10",
     "redux-thunk": "2.4.1",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "tippy.js": "^6.3.7",
     "url-join": "^4.0.1",
     "use-deep-compare-effect": "^1.6.1",

package/src/DataTable/index.js

@@ -102,6 +102,7 @@ import { useColumns } from "./Columns";
 import { formValueSelector, change as _change } from "redux-form";
 import { throwFormError } from "../throwFormError";
 import { isObservableArray, toJS } from "mobx";
+import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -425,7 +426,7 @@ const DataTable = ({
     hideSelectedCount = isSimple,
     hideSetPageSize,
     hideTotalPages,
-    initialSelectedIds,
+    selectedIds,
     isCellEditable,
     isCopyable = true,
     isEntityDisabled = noop,
@@ -501,16 +502,14 @@ const DataTable = ({
   // This is because we need to maintain the reduxFormSelectedEntityIdMap and
   // allOrderedEntities updated
   useEffect(() => {
-    if (change) {
-      change("allOrderedEntities", entitiesAcrossPages);
-      if (entities.length === 0 || isEmpty(reduxFormSelectedEntityIdMap))
-        return;
-      changeSelectedEntities({
-        idMap: reduxFormSelectedEntityIdMap,
-        entities,
-        change
-      });
-    }
+    isBeingCalledExcessively({ uniqName: `dt_entities_${formName}` });
+    change("allOrderedEntities", entitiesAcrossPages);
+    if (entities.length === 0 || isEmpty(reduxFormSelectedEntityIdMap)) return;
+    changeSelectedEntities({
+      idMap: reduxFormSelectedEntityIdMap,
+      entities,
+      change
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entitiesAcrossPages, reduxFormSelectedEntityIdMap, change]);
 
@@ -524,6 +523,7 @@ const DataTable = ({
       } else {
         newTableConfig = getTableConfigFromStorage(formName);
       }
+      isBeingCalledExcessively({ uniqName: `dt_setTableConfig_${formName}` });
       // if the tableConfig is the same as the newTableConfig, don't update
       setTableConfig(prev => {
         if (!newTableConfig) {
@@ -1752,17 +1752,15 @@ const DataTable = ({
 
   // We need to make sure this only runs at the beggining
   useEffect(() => {
-    if (initialSelectedIds) {
-      if (alreadySelected.current) return;
-      setSelectedIds(initialSelectedIds);
-      alreadySelected.current = true;
+    if (selectedIds) {
+      setSelectedIds(selectedIds);
     }
     if (selectAllByDefault && entities && entities.length) {
       if (alreadySelected.current) return;
       setSelectedIds(entities.map(getIdOrCodeOrIndex));
       alreadySelected.current = true;
     }
-  }, [entities, initialSelectedIds, selectAllByDefault, setSelectedIds]);
+  }, [entities, selectedIds, selectAllByDefault, setSelectedIds]);
 
   const TheadComponent = useCallback(
     ({ className, style, children }) => {

package/src/FillWindow.js

@@ -1,4 +1,5 @@
-import React, { createPortal } from "react";
+import React from "react";
+import createPortal from "react-dom";
 import { isFunction } from "lodash-es";
 import rerenderOnWindowResize from "./rerenderOnWindowResize";
 import "./FillWindow.css";

package/src/FormComponents/Uploader.js

@@ -49,8 +49,6 @@ import { LoadingDots } from "./LoadingDots";
 import { useDispatch } from "react-redux";
 import { flushSync } from "react-dom";
 import { useStableReference } from "../utils/hooks/useStableReference";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { useTraceUpdate } from "../utils/useTraceUpdate";
 
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
@@ -254,7 +252,7 @@ const Uploader = ({
   validateAgainstSchema: _validateAgainstSchema
 }) => {
   const dispatch = useDispatch();
-  const [acceptLoading, setAcceptLoading] = useState(true); // set to true by default to prevent the dropzone from being actionable until the accept is resolved
+  const [acceptLoading, setAcceptLoading] = useState();
   const [resolvedAccept, setResolvedAccept] = useState();
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
@@ -364,26 +362,17 @@ const Uploader = ({
     }
     return __accept;
   }, [__accept, isAcceptPromise, resolvedAccept]);
-  useTraceUpdate({
-    __accept,
-    isAcceptPromise
-  });
+
   useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
       Promise.allSettled(Array.isArray(__accept) ? __accept : [__accept]).then(
         results => {
           const resolved = flatMap(results, r => r.value);
+          setAcceptLoading(false);
           setResolvedAccept(resolved);
-          setTimeout(() => {
-            // give the resolved accept a full JS cycle to update before allowing actionability on the dropzone
-            setAcceptLoading(false);
-          }, 0);
         }
       );
-    } else {
-      // set this to false since it is defaulted to true
-      setAcceptLoading(false);
     }
   }, [__accept, isAcceptPromise]);
 

package/src/utils/isBeingCalledExcessively.js

@@ -0,0 +1,24 @@
+const keyCount = {};
+export const isBeingCalledExcessively = ({ uniqName }) => {
+  if (process.env.NODE_ENV !== "development") {
+    return;
+  }
+  if (!uniqName) {
+    throw new Error("uniqName is required");
+  }
+  // if this function is hit more than 10 times in a row in 2 seconds with the same uniqName then throw an error
+  if (keyCount[uniqName + "_timeout"]) {
+    clearTimeout(keyCount[uniqName + "_timeout"]);
+  }
+  keyCount[uniqName] = keyCount[uniqName] || 0;
+  keyCount[uniqName]++;
+
+  keyCount[uniqName + "_timeout"] = setTimeout(() => {
+    keyCount[uniqName] = 0;
+  }, 2000);
+
+  if (keyCount[uniqName] > 20) {
+    keyCount[uniqName] = 0;
+    throw new Error(`isBeingCalledExcessively: ${uniqName}`);
+  }
+};

package/utils/isBeingCalledExcessively.d.ts

@@ -0,0 +1,3 @@
+export function isBeingCalledExcessively({ uniqName }: {
+    uniqName: any;
+}): void;

package/DataTable/EditabelCell.d.ts

@@ -1,10 +0,0 @@
-export function EditableCell({ cancelEdit, dataTest, finishEdit, initialValue, isEditableCellInitialValue, isNumeric, shouldSelectAll, stopSelectAll }: {
-    cancelEdit: any;
-    dataTest: any;
-    finishEdit: any;
-    initialValue: any;
-    isEditableCellInitialValue: any;
-    isNumeric: any;
-    shouldSelectAll: any;
-    stopSelectAll: any;
-}): import("react/jsx-runtime").JSX.Element;

package/DataTable/defaultProps.d.ts

@@ -1,43 +0,0 @@
-import { noop } from 'lodash-es';
-declare namespace _default {
-    export { noop as addFilters };
-    export let className: string;
-    export { noop as clearFilters };
-    export { noop as contextMenu };
-    export let disabled: boolean;
-    export let entities: never[];
-    export let extraClasses: string;
-    export let filters: never[];
-    export let isCopyable: boolean;
-    export { noop as isEntityDisabled };
-    export let isLoading: boolean;
-    export let isSimple: boolean;
-    export let isSingleSelect: boolean;
-    export let maxHeight: number;
-    export let noHeader: boolean;
-    export let noSelect: boolean;
-    export let noUserSelect: boolean;
-    export { noop as onDeselect };
-    export { noop as onMultiRowSelect };
-    export { noop as onRowClick };
-    export { noop as onRowSelect };
-    export { noop as onSingleRowSelect };
-    export let page: number;
-    export let pageSize: number;
-    export let reduxFormExpandedEntityIdMap: {};
-    export let reduxFormSearchInput: string;
-    export let reduxFormSelectedEntityIdMap: {};
-    export { noop as removeSingleFilter };
-    export let resized: never[];
-    export { noop as resizePersist };
-    export { noop as setFilter };
-    export { noop as setOrder };
-    export { noop as setPage };
-    export { noop as setPageSize };
-    export { noop as setSearchTerm };
-    export let showCount: boolean;
-    export let style: {};
-    export let withCheckboxes: boolean;
-    export let withSort: boolean;
-}
-export default _default;

package/DataTable/utils/computePresets.d.ts

@@ -1 +0,0 @@
-export default function computePresets(props?: {}): import('lodash').Dictionary<any>;

package/src/DataTable/EditabelCell.js

@@ -1,55 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-export const EditableCell = ({
-  cancelEdit,
-  dataTest,
-  finishEdit,
-  initialValue,
-  isEditableCellInitialValue,
-  isNumeric,
-  shouldSelectAll,
-  stopSelectAll
-}) => {
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      if (isEditableCellInitialValue && !isNumeric) {
-        inputRef.current.selectionStart = inputRef.current.value.length;
-        inputRef.current.selectionEnd = inputRef.current.value.length;
-      } else if (shouldSelectAll) {
-        inputRef.current.select();
-        stopSelectAll();
-      }
-    }
-  }, [isEditableCellInitialValue, isNumeric, shouldSelectAll, stopSelectAll]);
-
-  return (
-    <input
-      style={{
-        border: 0,
-        width: "95%",
-        fontSize: 12,
-        background: "none"
-      }}
-      ref={inputRef}
-      {...dataTest}
-      autoFocus
-      onKeyDown={e => {
-        if (e.key === "Enter") {
-          finishEdit(value);
-          e.stopPropagation();
-        } else if (e.key === "Escape") {
-          e.stopPropagation();
-          cancelEdit();
-        }
-      }}
-      onBlur={() => finishEdit(value)}
-      onChange={e => setValue(e.target.value)}
-      type={isNumeric ? "number" : undefined}
-      value={value}
-    />
-  );
-};

package/src/DataTable/defaultProps.js

@@ -1,45 +0,0 @@
-import { noop } from "lodash-es";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
-  //NOTE: DO NOT SET DEFAULTS HERE FOR PROPS THAT GET COMPUTED AS PART OF PRESET GROUPS IN computePresets
-  addFilters: noop,
-  className: "",
-  clearFilters: noop,
-  contextMenu: noop,
-  disabled: false,
-  entities: [],
-  extraClasses: "",
-  filters: [],
-  isCopyable: true,
-  isEntityDisabled: noop,
-  isLoading: false,
-  isSimple: false,
-  isSingleSelect: false,
-  maxHeight: 600,
-  noHeader: false,
-  noSelect: false,
-  noUserSelect: false,
-  onDeselect: noop,
-  onMultiRowSelect: noop,
-  onRowClick: noop,
-  onRowSelect: noop,
-  onSingleRowSelect: noop,
-  page: 1,
-  pageSize: 10,
-  reduxFormExpandedEntityIdMap: {},
-  reduxFormSearchInput: "",
-  reduxFormSelectedEntityIdMap: {},
-  removeSingleFilter: noop,
-  resized: [],
-  resizePersist: noop,
-  setFilter: noop,
-  setOrder: noop,
-  setPage: noop,
-  setPageSize: noop,
-  setSearchTerm: noop,
-  showCount: false,
-  style: {},
-  withCheckboxes: false,
-  withSort: true
-};

package/src/DataTable/utils/computePresets.js

@@ -1,42 +0,0 @@
-import { omitBy, isNil } from "lodash-es";
-//we use this to make adding preset prop groups simpler
-export default function computePresets(props = {}) {
-  const { isSimple } = props;
-  let toReturn = omitBy(props, isNil);
-  toReturn.pageSize = toReturn.controlled_pageSize || toReturn.pageSize;
-  if (isSimple) {
-    //isSimplePreset
-    toReturn = {
-      noHeader: true,
-      noFooter: !props.withPaging,
-      noPadding: true,
-      noFullscreenButton: true,
-      hidePageSizeWhenPossible: !props.withPaging,
-      isInfinite: !props.withPaging,
-      hideSelectedCount: true,
-      withTitle: false,
-      withSearch: false,
-      compact: true,
-      withPaging: false,
-      withFilter: false,
-      ...toReturn
-    };
-  } else {
-    toReturn = {
-      // the usual defaults:
-      noFooter: false,
-      noPadding: false,
-      compact: true,
-      noFullscreenButton: false,
-      hidePageSizeWhenPossible: false,
-      isInfinite: false,
-      hideSelectedCount: false,
-      withTitle: true,
-      withSearch: true,
-      withPaging: true,
-      withFilter: true,
-      ...toReturn
-    };
-  }
-  return toReturn || {};
-}