@teselagen/ui 0.5.21-beta.4 → 0.5.21-beta.6

package/index.cjs.js

@@ -46742,12 +46742,14 @@ const FilterAndSortMenu = /* @__PURE__ */ __name(({
   );
   const [filterValue, setFilterValue] = React$1.useState("");
   const handleFilterChange = /* @__PURE__ */ __name((selectedFilter2) => {
-    if (filterValue && !Array.isArray(filterValue) && filterTypesDictionary[selectedFilter2] === "list") {
-      setFilterValue((filterValue == null ? void 0 : filterValue.split(" ")) || []);
-    } else if (filterTypesDictionary[selectedFilter2] === "text" && Array.isArray(filterValue)) {
-      setFilterValue(filterValue.join(" "));
-    }
-    setSelectedFilter(camelCase(selectedFilter2));
+    require$$2$1.flushSync(() => {
+      if (filterValue && !Array.isArray(filterValue) && filterTypesDictionary[selectedFilter2] === "list") {
+        setFilterValue((filterValue == null ? void 0 : filterValue.split(" ")) || []);
+      } else if (filterTypesDictionary[selectedFilter2] === "text" && Array.isArray(filterValue)) {
+        setFilterValue(filterValue.join(" "));
+      }
+      setSelectedFilter(camelCase(selectedFilter2));
+    });
   }, "handleFilterChange");
   const handleFilterValueChange = /* @__PURE__ */ __name((filterValue2) => setFilterValue(filterValue2), "handleFilterValueChange");
   const handleFilterSubmit = /* @__PURE__ */ __name(() => {
@@ -47057,7 +47059,7 @@ const ColumnFilterMenu = /* @__PURE__ */ __name(({
       {
         style: { marginLeft: 5 },
         icon: "filter",
-        iconSize: extraCompact ? 14 : void 0,
+        size: extraCompact ? 14 : void 0,
         onClick: () => setColumnFilterMenuOpen((prev) => !prev),
         className: classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
@@ -48395,57 +48397,81 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     reduxFormSearchInput,
     urlConnected
   ]);
-  if (!isTableParamsConnected) {
-    const updateSearch = /* @__PURE__ */ __name((val) => {
-      change("reduxFormSearchInput", val || "");
-    }, "updateSearch");
-    const setNewParams2 = /* @__PURE__ */ __name((newParams) => {
-      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
-      change("reduxFormQueryParams", newParams);
-    }, "setNewParams2");
-    const bindThese = makeDataTableHandlers({
-      setNewParams: setNewParams2,
-      updateSearch,
-      defaults: props.defaults,
-      onlyOneFilter: props.onlyOneFilter
-    });
-    const boundDispatchProps = {};
-    Object.keys(bindThese).forEach(function(key) {
-      const action = bindThese[key];
-      boundDispatchProps[key] = function(...args) {
-        action(...args, currentParams);
-      };
-    });
-    const changeFormValue = /* @__PURE__ */ __name((...args) => change(...args), "changeFormValue");
-    props.tableParams = __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-      changeFormValue,
-      selectedEntities
-    }, _tableParams), props), boundDispatchProps), {
-      isTableParamsConnected: true
-      //let the table know not to do local sorting/filtering etc.
-    });
-  }
-  props = __spreadValues(__spreadValues({}, props), props.tableParams);
-  if (!isTableParamsConnected) {
-    const additionalFilterToUse = typeof props.additionalFilter === "function" ? props.additionalFilter.bind(void 0, ownProps) : () => props.additionalFilter;
-    const additionalOrFilterToUse = typeof props.additionalOrFilter === "function" ? props.additionalOrFilter.bind(void 0, ownProps) : () => props.additionalOrFilter;
-    props = __spreadValues(__spreadValues({}, props), getQueryParams({
-      doNotCoercePageSize,
-      currentParams,
-      entities: props.entities,
-      // for local table
-      urlConnected,
-      defaults: props.defaults,
-      schema: convertedSchema,
-      isInfinite,
-      isLocalCall,
-      additionalFilter: additionalFilterToUse,
-      additionalOrFilter: additionalOrFilterToUse,
-      noOrderError: props.noOrderError,
-      isCodeModel: props.isCodeModel,
-      ownProps: props
-    }));
-  }
+  const tableParams = React$1.useMemo(() => {
+    if (!isTableParamsConnected) {
+      const updateSearch = /* @__PURE__ */ __name((val) => {
+        change("reduxFormSearchInput", val || "");
+      }, "updateSearch");
+      const setNewParams2 = /* @__PURE__ */ __name((newParams) => {
+        urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+        change("reduxFormQueryParams", newParams);
+      }, "setNewParams2");
+      const bindThese = makeDataTableHandlers({
+        setNewParams: setNewParams2,
+        updateSearch,
+        defaults: props.defaults,
+        onlyOneFilter: props.onlyOneFilter
+      });
+      const boundDispatchProps = {};
+      Object.keys(bindThese).forEach(function(key) {
+        const action = bindThese[key];
+        boundDispatchProps[key] = function(...args) {
+          action(...args, currentParams);
+        };
+      });
+      const changeFormValue = /* @__PURE__ */ __name((...args) => change(...args), "changeFormValue");
+      return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+        changeFormValue,
+        selectedEntities
+      }, _tableParams), props), boundDispatchProps), {
+        isTableParamsConnected: true
+        //let the table know not to do local sorting/filtering etc.
+      });
+    }
+    return _tableParams;
+  }, [
+    _tableParams,
+    change,
+    currentParams,
+    history.replace,
+    isTableParamsConnected,
+    props,
+    selectedEntities,
+    urlConnected
+  ]);
+  props = __spreadValues(__spreadValues({}, props), tableParams);
+  const queryParams = React$1.useMemo(() => {
+    if (!isTableParamsConnected) {
+      const additionalFilterToUse = typeof props.additionalFilter === "function" ? props.additionalFilter.bind(void 0, ownProps) : () => props.additionalFilter;
+      const additionalOrFilterToUse = typeof props.additionalOrFilter === "function" ? props.additionalOrFilter.bind(void 0, ownProps) : () => props.additionalOrFilter;
+      return getQueryParams({
+        doNotCoercePageSize,
+        currentParams,
+        entities: props.entities,
+        // for local table
+        urlConnected,
+        defaults: props.defaults,
+        schema: convertedSchema,
+        isInfinite,
+        isLocalCall,
+        additionalFilter: additionalFilterToUse,
+        additionalOrFilter: additionalOrFilterToUse,
+        noOrderError: props.noOrderError,
+        isCodeModel: props.isCodeModel,
+        ownProps: props
+      });
+    }
+    return {};
+  }, [
+    convertedSchema,
+    currentParams,
+    doNotCoercePageSize,
+    isInfinite,
+    isLocalCall,
+    isTableParamsConnected,
+    urlConnected
+  ]);
+  props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
     additionalFilters,
@@ -63264,11 +63290,13 @@ const Uploader = /* @__PURE__ */ __name(({
   const [loading, setLoading] = React$1.useState(false);
   const filesToClean = React$1.useRef([]);
   const onChange = /* @__PURE__ */ __name((val) => {
-    if (noRedux) {
-      return _onChange(val);
-    }
-    dispatch(reduxForm.touch(formName, name));
-    return dispatch(reduxForm.change(formName, name, val));
+    require$$2$1.flushSync(() => {
+      if (noRedux) {
+        return _onChange(val);
+      }
+      dispatch(reduxForm.touch(formName, name));
+      dispatch(reduxForm.change(formName, name, val));
+    });
   }, "onChange");
   const handleSecondHalfOfUpload = /* @__PURE__ */ __name((_0) => __async(exports, [_0], function* ({
     acceptedFiles,
@@ -64431,22 +64459,13 @@ function withTableParams(compOrOpts, pTopLevelOpts) {
     const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
     const { formName, urlConnected, history, defaults: defaults2, onlyOneFilter } = mergedOpts;
     function updateSearch(val) {
-      setTimeout(function() {
-        dispatch(reduxForm.change(formName, "reduxFormSearchInput", val || ""));
-      });
+      dispatch(reduxForm.change(formName, "reduxFormSearchInput", val || ""));
     }
     __name(updateSearch, "updateSearch");
-    let setNewParams;
-    if (urlConnected) {
-      setNewParams = /* @__PURE__ */ __name(function(newParams) {
-        setCurrentParamsOnUrl(newParams, history.replace);
-        dispatch(reduxForm.change(formName, "reduxFormQueryParams", newParams));
-      }, "setNewParams");
-    } else {
-      setNewParams = /* @__PURE__ */ __name(function(newParams) {
-        dispatch(reduxForm.change(formName, "reduxFormQueryParams", newParams));
-      }, "setNewParams");
-    }
+    const setNewParams = /* @__PURE__ */ __name((newParams) => {
+      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+      dispatch(reduxForm.change(formName, "reduxFormQueryParams", newParams));
+    }, "setNewParams");
     return {
       bindThese: makeDataTableHandlers({
         setNewParams,

package/index.es.js

@@ -60,7 +60,7 @@ import * as React$1 from "react";
 import React__default, { useState, useEffect, forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useCallback, createElement, Component, useLayoutEffect, createContext, memo, useContext, isValidElement, PureComponent, createPortal as createPortal$1 } from "react";
 import { Icon, Classes, Button, Intent, Keys, MenuItem, Tag, Popover, Tooltip, Spinner, InputGroup, Checkbox, Switch, TextArea, EditableText, NumericInput, RadioGroup, Position, FormGroup, Menu, Toaster, MenuDivider, useHotkeys, ContextMenu, Callout, Dialog, Card, Tabs, Tab, Colors, Overlay, KeyCombo, ProgressBar } from "@blueprintjs/core";
 import { formValueSelector, Field, change, reduxForm, SubmissionError, destroy, initialize, touch, FormName, Fields } from "redux-form";
-import require$$2$1, { unstable_batchedUpdates, createPortal } from "react-dom";
+import require$$2$1, { unstable_batchedUpdates, createPortal, flushSync } from "react-dom";
 import { connect, useDispatch, useSelector, useStore } from "react-redux";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
 import { getCreateNewItem, MultiSelect, Suggest } from "@blueprintjs/select";
@@ -46724,12 +46724,14 @@ const FilterAndSortMenu = /* @__PURE__ */ __name(({
   );
   const [filterValue, setFilterValue] = useState("");
   const handleFilterChange = /* @__PURE__ */ __name((selectedFilter2) => {
-    if (filterValue && !Array.isArray(filterValue) && filterTypesDictionary[selectedFilter2] === "list") {
-      setFilterValue((filterValue == null ? void 0 : filterValue.split(" ")) || []);
-    } else if (filterTypesDictionary[selectedFilter2] === "text" && Array.isArray(filterValue)) {
-      setFilterValue(filterValue.join(" "));
-    }
-    setSelectedFilter(camelCase(selectedFilter2));
+    flushSync(() => {
+      if (filterValue && !Array.isArray(filterValue) && filterTypesDictionary[selectedFilter2] === "list") {
+        setFilterValue((filterValue == null ? void 0 : filterValue.split(" ")) || []);
+      } else if (filterTypesDictionary[selectedFilter2] === "text" && Array.isArray(filterValue)) {
+        setFilterValue(filterValue.join(" "));
+      }
+      setSelectedFilter(camelCase(selectedFilter2));
+    });
   }, "handleFilterChange");
   const handleFilterValueChange = /* @__PURE__ */ __name((filterValue2) => setFilterValue(filterValue2), "handleFilterValueChange");
   const handleFilterSubmit = /* @__PURE__ */ __name(() => {
@@ -47039,7 +47041,7 @@ const ColumnFilterMenu = /* @__PURE__ */ __name(({
       {
         style: { marginLeft: 5 },
         icon: "filter",
-        iconSize: extraCompact ? 14 : void 0,
+        size: extraCompact ? 14 : void 0,
         onClick: () => setColumnFilterMenuOpen((prev) => !prev),
         className: classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
@@ -48377,57 +48379,81 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     reduxFormSearchInput,
     urlConnected
   ]);
-  if (!isTableParamsConnected) {
-    const updateSearch = /* @__PURE__ */ __name((val) => {
-      change2("reduxFormSearchInput", val || "");
-    }, "updateSearch");
-    const setNewParams2 = /* @__PURE__ */ __name((newParams) => {
-      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
-      change2("reduxFormQueryParams", newParams);
-    }, "setNewParams2");
-    const bindThese = makeDataTableHandlers({
-      setNewParams: setNewParams2,
-      updateSearch,
-      defaults: props.defaults,
-      onlyOneFilter: props.onlyOneFilter
-    });
-    const boundDispatchProps = {};
-    Object.keys(bindThese).forEach(function(key) {
-      const action = bindThese[key];
-      boundDispatchProps[key] = function(...args) {
-        action(...args, currentParams);
-      };
-    });
-    const changeFormValue = /* @__PURE__ */ __name((...args) => change2(...args), "changeFormValue");
-    props.tableParams = __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-      changeFormValue,
-      selectedEntities
-    }, _tableParams), props), boundDispatchProps), {
-      isTableParamsConnected: true
-      //let the table know not to do local sorting/filtering etc.
-    });
-  }
-  props = __spreadValues(__spreadValues({}, props), props.tableParams);
-  if (!isTableParamsConnected) {
-    const additionalFilterToUse = typeof props.additionalFilter === "function" ? props.additionalFilter.bind(void 0, ownProps) : () => props.additionalFilter;
-    const additionalOrFilterToUse = typeof props.additionalOrFilter === "function" ? props.additionalOrFilter.bind(void 0, ownProps) : () => props.additionalOrFilter;
-    props = __spreadValues(__spreadValues({}, props), getQueryParams({
-      doNotCoercePageSize,
-      currentParams,
-      entities: props.entities,
-      // for local table
-      urlConnected,
-      defaults: props.defaults,
-      schema: convertedSchema,
-      isInfinite,
-      isLocalCall,
-      additionalFilter: additionalFilterToUse,
-      additionalOrFilter: additionalOrFilterToUse,
-      noOrderError: props.noOrderError,
-      isCodeModel: props.isCodeModel,
-      ownProps: props
-    }));
-  }
+  const tableParams = useMemo(() => {
+    if (!isTableParamsConnected) {
+      const updateSearch = /* @__PURE__ */ __name((val) => {
+        change2("reduxFormSearchInput", val || "");
+      }, "updateSearch");
+      const setNewParams2 = /* @__PURE__ */ __name((newParams) => {
+        urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+        change2("reduxFormQueryParams", newParams);
+      }, "setNewParams2");
+      const bindThese = makeDataTableHandlers({
+        setNewParams: setNewParams2,
+        updateSearch,
+        defaults: props.defaults,
+        onlyOneFilter: props.onlyOneFilter
+      });
+      const boundDispatchProps = {};
+      Object.keys(bindThese).forEach(function(key) {
+        const action = bindThese[key];
+        boundDispatchProps[key] = function(...args) {
+          action(...args, currentParams);
+        };
+      });
+      const changeFormValue = /* @__PURE__ */ __name((...args) => change2(...args), "changeFormValue");
+      return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+        changeFormValue,
+        selectedEntities
+      }, _tableParams), props), boundDispatchProps), {
+        isTableParamsConnected: true
+        //let the table know not to do local sorting/filtering etc.
+      });
+    }
+    return _tableParams;
+  }, [
+    _tableParams,
+    change2,
+    currentParams,
+    history.replace,
+    isTableParamsConnected,
+    props,
+    selectedEntities,
+    urlConnected
+  ]);
+  props = __spreadValues(__spreadValues({}, props), tableParams);
+  const queryParams = useMemo(() => {
+    if (!isTableParamsConnected) {
+      const additionalFilterToUse = typeof props.additionalFilter === "function" ? props.additionalFilter.bind(void 0, ownProps) : () => props.additionalFilter;
+      const additionalOrFilterToUse = typeof props.additionalOrFilter === "function" ? props.additionalOrFilter.bind(void 0, ownProps) : () => props.additionalOrFilter;
+      return getQueryParams({
+        doNotCoercePageSize,
+        currentParams,
+        entities: props.entities,
+        // for local table
+        urlConnected,
+        defaults: props.defaults,
+        schema: convertedSchema,
+        isInfinite,
+        isLocalCall,
+        additionalFilter: additionalFilterToUse,
+        additionalOrFilter: additionalOrFilterToUse,
+        noOrderError: props.noOrderError,
+        isCodeModel: props.isCodeModel,
+        ownProps: props
+      });
+    }
+    return {};
+  }, [
+    convertedSchema,
+    currentParams,
+    doNotCoercePageSize,
+    isInfinite,
+    isLocalCall,
+    isTableParamsConnected,
+    urlConnected
+  ]);
+  props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
     additionalFilters,
@@ -63246,11 +63272,13 @@ const Uploader = /* @__PURE__ */ __name(({
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
   const onChange = /* @__PURE__ */ __name((val) => {
-    if (noRedux) {
-      return _onChange(val);
-    }
-    dispatch(touch(formName, name));
-    return dispatch(change(formName, name, val));
+    flushSync(() => {
+      if (noRedux) {
+        return _onChange(val);
+      }
+      dispatch(touch(formName, name));
+      dispatch(change(formName, name, val));
+    });
   }, "onChange");
   const handleSecondHalfOfUpload = /* @__PURE__ */ __name((_0) => __async(void 0, [_0], function* ({
     acceptedFiles,
@@ -64413,22 +64441,13 @@ function withTableParams(compOrOpts, pTopLevelOpts) {
     const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
     const { formName, urlConnected, history, defaults: defaults2, onlyOneFilter } = mergedOpts;
     function updateSearch(val) {
-      setTimeout(function() {
-        dispatch(change(formName, "reduxFormSearchInput", val || ""));
-      });
+      dispatch(change(formName, "reduxFormSearchInput", val || ""));
     }
     __name(updateSearch, "updateSearch");
-    let setNewParams;
-    if (urlConnected) {
-      setNewParams = /* @__PURE__ */ __name(function(newParams) {
-        setCurrentParamsOnUrl(newParams, history.replace);
-        dispatch(change(formName, "reduxFormQueryParams", newParams));
-      }, "setNewParams");
-    } else {
-      setNewParams = /* @__PURE__ */ __name(function(newParams) {
-        dispatch(change(formName, "reduxFormQueryParams", newParams));
-      }, "setNewParams");
-    }
+    const setNewParams = /* @__PURE__ */ __name((newParams) => {
+      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+      dispatch(change(formName, "reduxFormQueryParams", newParams));
+    }, "setNewParams");
     return {
       bindThese: makeDataTableHandlers({
         setNewParams,

package/package.json

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

package/src/DataTable/ColumnFilterMenu.js

@@ -49,7 +49,7 @@ export const ColumnFilterMenu = ({
       <Icon
         style={{ marginLeft: 5 }}
         icon="filter"
-        iconSize={extraCompact ? 14 : undefined}
+        size={extraCompact ? 14 : undefined}
         onClick={() => setColumnFilterMenuOpen(prev => !prev)}
         className={classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn

package/src/DataTable/FilterAndSortMenu.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { flushSync } from "react-dom";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
 import { camelCase } from "lodash-es";
 import classNames from "classnames";
@@ -68,19 +69,21 @@ const FilterAndSortMenu = ({
   const [filterValue, setFilterValue] = useState("");
 
   const handleFilterChange = selectedFilter => {
-    if (
-      filterValue &&
-      !Array.isArray(filterValue) &&
-      filterTypesDictionary[selectedFilter] === "list"
-    ) {
-      setFilterValue(filterValue?.split(" ") || []);
-    } else if (
-      filterTypesDictionary[selectedFilter] === "text" &&
-      Array.isArray(filterValue)
-    ) {
-      setFilterValue(filterValue.join(" "));
-    }
-    setSelectedFilter(camelCase(selectedFilter));
+    flushSync(() => {
+      if (
+        filterValue &&
+        !Array.isArray(filterValue) &&
+        filterTypesDictionary[selectedFilter] === "list"
+      ) {
+        setFilterValue(filterValue?.split(" ") || []);
+      } else if (
+        filterTypesDictionary[selectedFilter] === "text" &&
+        Array.isArray(filterValue)
+      ) {
+        setFilterValue(filterValue.join(" "));
+      }
+      setSelectedFilter(camelCase(selectedFilter));
+    });
   };
 
   const handleFilterValueChange = filterValue => setFilterValue(filterValue);

package/src/DataTable/index.js

@@ -278,63 +278,74 @@ const DataTable = ({
     urlConnected
   ]);
 
-  if (!isTableParamsConnected) {
-    const updateSearch = val => {
-      change("reduxFormSearchInput", val || "");
-    };
+  const tableParams = useMemo(() => {
+    if (!isTableParamsConnected) {
+      const updateSearch = val => {
+        change("reduxFormSearchInput", val || "");
+      };
 
-    const setNewParams = newParams => {
-      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
-      change("reduxFormQueryParams", newParams); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
-    };
+      const setNewParams = newParams => {
+        urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+        change("reduxFormQueryParams", newParams); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
+      };
 
-    const bindThese = makeDataTableHandlers({
-      setNewParams,
-      updateSearch,
-      defaults: props.defaults,
-      onlyOneFilter: props.onlyOneFilter
-    });
+      const bindThese = makeDataTableHandlers({
+        setNewParams,
+        updateSearch,
+        defaults: props.defaults,
+        onlyOneFilter: props.onlyOneFilter
+      });
 
-    const boundDispatchProps = {};
-    //bind currentParams to actions
-    Object.keys(bindThese).forEach(function (key) {
-      const action = bindThese[key];
-      boundDispatchProps[key] = function (...args) {
-        action(...args, currentParams);
-      };
-    });
+      const boundDispatchProps = {};
+      //bind currentParams to actions
+      Object.keys(bindThese).forEach(function (key) {
+        const action = bindThese[key];
+        boundDispatchProps[key] = function (...args) {
+          action(...args, currentParams);
+        };
+      });
 
-    const changeFormValue = (...args) => change(...args);
+      const changeFormValue = (...args) => change(...args);
 
-    props.tableParams = {
-      changeFormValue,
-      selectedEntities,
-      ..._tableParams,
-      ...props,
-      ...boundDispatchProps,
-      isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
-    };
-  }
+      return {
+        changeFormValue,
+        selectedEntities,
+        ..._tableParams,
+        ...props,
+        ...boundDispatchProps,
+        isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
+      };
+    }
+    return _tableParams;
+  }, [
+    _tableParams,
+    change,
+    currentParams,
+    history.replace,
+    isTableParamsConnected,
+    props,
+    selectedEntities,
+    urlConnected
+  ]);
 
   props = {
     ...props,
-    ...props.tableParams
+    ...tableParams
   };
 
-  if (!isTableParamsConnected) {
-    const additionalFilterToUse =
-      typeof props.additionalFilter === "function"
-        ? props.additionalFilter.bind(this, ownProps)
-        : () => props.additionalFilter;
+  const queryParams = useMemo(() => {
+    if (!isTableParamsConnected) {
+      const additionalFilterToUse =
+        typeof props.additionalFilter === "function"
+          ? props.additionalFilter.bind(this, ownProps)
+          : () => props.additionalFilter;
 
-    const additionalOrFilterToUse =
-      typeof props.additionalOrFilter === "function"
-        ? props.additionalOrFilter.bind(this, ownProps)
-        : () => props.additionalOrFilter;
+      const additionalOrFilterToUse =
+        typeof props.additionalOrFilter === "function"
+          ? props.additionalOrFilter.bind(this, ownProps)
+          : () => props.additionalOrFilter;
 
-    props = {
-      ...props,
-      ...getQueryParams({
+      return getQueryParams({
         doNotCoercePageSize,
         currentParams,
         entities: props.entities, // for local table
@@ -348,9 +359,24 @@ const DataTable = ({
         noOrderError: props.noOrderError,
         isCodeModel: props.isCodeModel,
         ownProps: props
-      })
-    };
-  }
+      });
+    }
+    return {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    convertedSchema,
+    currentParams,
+    doNotCoercePageSize,
+    isInfinite,
+    isLocalCall,
+    isTableParamsConnected,
+    urlConnected
+  ]);
+
+  props = {
+    ...props,
+    ...queryParams
+  };
 
   const {
     addFilters = noop,

package/src/DataTable/utils/withTableParams.js

@@ -182,22 +182,13 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
       mergedOpts;
 
     function updateSearch(val) {
-      setTimeout(function () {
-        dispatch(change(formName, "reduxFormSearchInput", val || ""));
-      });
+      dispatch(change(formName, "reduxFormSearchInput", val || ""));
     }
 
-    let setNewParams;
-    if (urlConnected) {
-      setNewParams = function (newParams) {
-        setCurrentParamsOnUrl(newParams, history.replace);
-        dispatch(change(formName, "reduxFormQueryParams", newParams)); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
-      };
-    } else {
-      setNewParams = function (newParams) {
-        dispatch(change(formName, "reduxFormQueryParams", newParams));
-      };
-    }
+    const setNewParams = newParams => {
+      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+      dispatch(change(formName, "reduxFormQueryParams", newParams)); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
+    };
     return {
       bindThese: makeDataTableHandlers({
         setNewParams,

package/src/FormComponents/Uploader.js

@@ -41,6 +41,7 @@ import classNames from "classnames";
 import convertSchema from "../DataTable/utils/convertSchema";
 import { LoadingDots } from "./LoadingDots";
 import { useDispatch } from "react-redux";
+import { flushSync } from "react-dom";
 
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
@@ -249,11 +250,13 @@ const Uploader = ({
   // onChange received from redux-form is not working anymore,
   // so we need to overwrite it for redux to works.
   const onChange = val => {
-    if (noRedux) {
-      return _onChange(val);
-    }
-    dispatch(touch(formName, name));
-    return dispatch(change(formName, name, val));
+    flushSync(() => {
+      if (noRedux) {
+        return _onChange(val);
+      }
+      dispatch(touch(formName, name));
+      dispatch(change(formName, name, val));
+    });
   };
 
   const handleSecondHalfOfUpload = async ({