@etsoo/materialui 1.6.42 → 1.6.43

package/lib/cjs/DataGridEx.js

@@ -135,7 +135,7 @@ function DataGridEx(props) {
                 alignItems: "center",
                 borderTop: thinBorder,
                 marginTop: "1px",
-                minHeight: widthCalculator.total,
+                minWidth: widthCalculator.total,
                 height: bottomHeight - 1
             }, children: columns.map((column, index) => {
                 // Destruct

package/lib/cjs/ResponsibleContainer.js

@@ -73,8 +73,9 @@ function ResponsibleContainer(props) {
     // Search data
     const searchData = (0, react_2.useSearchParamsWithCache)(cacheKey);
     // On submit callback
-    const onSubmit = (data, _reset) => {
-        if (data == null || state.ref == null)
+    // Current UI may be rendered but the search bar rerendered with new data, check init to avoid reset and load new data
+    const onSubmit = (data, _reset, init) => {
+        if (data == null || state.ref == null || (state.mounted && init))
             return;
         state.ref.reset({ data });
     };
@@ -137,8 +138,8 @@ function ResponsibleContainer(props) {
         if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
-        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
-    }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
+        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop, autoSubmitDelay: rest.autoLoad === false ? 0 : undefined }));
+    }, [showDataGrid, hasFields, searchBarHeight, rect?.width, rest.autoLoad]);
     // Pull container
     const pullContainer = showDataGrid
         ? ".DataGridEx-Body"

package/lib/cjs/SearchBar.d.ts

@@ -26,7 +26,7 @@ export interface SearchBarProps {
     /**
      * On submit callback
      */
-    onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+    onSubmit: (data: FormData, reset: boolean, init: boolean) => void | PromiseLike<void>;
     /**
      * Top position, true means Toolbar's height
      */

package/lib/cjs/SearchBar.js

@@ -216,13 +216,13 @@ function SearchBar(props) {
         delayed.call();
     };
     // Submit at once
-    const handleSubmitInstant = (reset = false) => {
+    const handleSubmitInstant = (reset = false, init = false) => {
         // Prepare data
         const data = new FormData(state.form);
         if (state.moreForm != null) {
             shared_1.DomUtils.mergeFormData(data, new FormData(state.moreForm));
         }
-        onSubmit(data, reset);
+        onSubmit(data, reset, init);
     };
     const delayed = (0, react_2.useDelayedExecutor)(handleSubmitInstant, 480);
     // Reset
@@ -237,8 +237,8 @@ function SearchBar(props) {
     };
     react_1.default.useEffect(() => {
         // Delayed way
-        if (autoSubmitDelay > 0) {
-            delayed.call(autoSubmitDelay);
+        if (autoSubmitDelay > 10) {
+            delayed.call(autoSubmitDelay, false, true);
         }
         return () => {
             delayed.clear();

package/lib/mjs/DataGridEx.js

@@ -128,7 +128,7 @@ export function DataGridEx(props) {
                 alignItems: "center",
                 borderTop: thinBorder,
                 marginTop: "1px",
-                minHeight: widthCalculator.total,
+                minWidth: widthCalculator.total,
                 height: bottomHeight - 1
             }, children: columns.map((column, index) => {
                 // Destruct

package/lib/mjs/ResponsibleContainer.js

@@ -67,8 +67,9 @@ export function ResponsibleContainer(props) {
     // Search data
     const searchData = useSearchParamsWithCache(cacheKey);
     // On submit callback
-    const onSubmit = (data, _reset) => {
-        if (data == null || state.ref == null)
+    // Current UI may be rendered but the search bar rerendered with new data, check init to avoid reset and load new data
+    const onSubmit = (data, _reset, init) => {
+        if (data == null || state.ref == null || (state.mounted && init))
             return;
         state.ref.reset({ data });
     };
@@ -131,8 +132,8 @@ export function ResponsibleContainer(props) {
         if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
-        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
-    }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
+        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop, autoSubmitDelay: rest.autoLoad === false ? 0 : undefined }));
+    }, [showDataGrid, hasFields, searchBarHeight, rect?.width, rest.autoLoad]);
     // Pull container
     const pullContainer = showDataGrid
         ? ".DataGridEx-Body"

package/lib/mjs/SearchBar.d.ts

@@ -26,7 +26,7 @@ export interface SearchBarProps {
     /**
      * On submit callback
      */
-    onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+    onSubmit: (data: FormData, reset: boolean, init: boolean) => void | PromiseLike<void>;
     /**
      * Top position, true means Toolbar's height
      */

package/lib/mjs/SearchBar.js

@@ -210,13 +210,13 @@ export function SearchBar(props) {
         delayed.call();
     };
     // Submit at once
-    const handleSubmitInstant = (reset = false) => {
+    const handleSubmitInstant = (reset = false, init = false) => {
         // Prepare data
         const data = new FormData(state.form);
         if (state.moreForm != null) {
             DomUtils.mergeFormData(data, new FormData(state.moreForm));
         }
-        onSubmit(data, reset);
+        onSubmit(data, reset, init);
     };
     const delayed = useDelayedExecutor(handleSubmitInstant, 480);
     // Reset
@@ -231,8 +231,8 @@ export function SearchBar(props) {
     };
     React.useEffect(() => {
         // Delayed way
-        if (autoSubmitDelay > 0) {
-            delayed.call(autoSubmitDelay);
+        if (autoSubmitDelay > 10) {
+            delayed.call(autoSubmitDelay, false, true);
         }
         return () => {
             delayed.clear();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.42",
+  "version": "1.6.43",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/DataGridEx.tsx

@@ -339,7 +339,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
           alignItems: "center",
           borderTop: thinBorder,
           marginTop: "1px",
-          minHeight: widthCalculator.total,
+          minWidth: widthCalculator.total,
           height: bottomHeight - 1
         }}
       >

package/src/ResponsibleContainer.tsx

@@ -252,8 +252,9 @@ export function ResponsibleContainer<T extends object, F>(
   const searchData = useSearchParamsWithCache(cacheKey);
 
   // On submit callback
-  const onSubmit = (data: FormData, _reset: boolean) => {
-    if (data == null || state.ref == null) return;
+  // Current UI may be rendered but the search bar rerendered with new data, check init to avoid reset and load new data
+  const onSubmit = (data: FormData, _reset: boolean, init: boolean) => {
+    if (data == null || state.ref == null || (state.mounted && init)) return;
     state.ref.reset({ data });
   };
 
@@ -385,9 +386,10 @@ export function ResponsibleContainer<T extends object, F>(
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
         width={rect.width}
         top={searchBarTop}
+        autoSubmitDelay={rest.autoLoad === false ? 0 : undefined}
       />
     );
-  }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
+  }, [showDataGrid, hasFields, searchBarHeight, rect?.width, rest.autoLoad]);
 
   // Pull container
   const pullContainer = showDataGrid

package/src/SearchBar.tsx

@@ -41,7 +41,11 @@ export interface SearchBarProps {
   /**
    * On submit callback
    */
-  onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+  onSubmit: (
+    data: FormData,
+    reset: boolean,
+    init: boolean
+  ) => void | PromiseLike<void>;
 
   /**
    * Top position, true means Toolbar's height
@@ -314,7 +318,10 @@ export function SearchBar(props: SearchBarProps) {
   };
 
   // Submit at once
-  const handleSubmitInstant = (reset: boolean = false) => {
+  const handleSubmitInstant = (
+    reset: boolean = false,
+    init: boolean = false
+  ) => {
     // Prepare data
     const data = new FormData(state.form);
 
@@ -322,7 +329,7 @@ export function SearchBar(props: SearchBarProps) {
       DomUtils.mergeFormData(data, new FormData(state.moreForm));
     }
 
-    onSubmit(data, reset);
+    onSubmit(data, reset, init);
   };
 
   const delayed = useDelayedExecutor(handleSubmitInstant, 480);
@@ -339,8 +346,8 @@ export function SearchBar(props: SearchBarProps) {
 
   React.useEffect(() => {
     // Delayed way
-    if (autoSubmitDelay > 0) {
-      delayed.call(autoSubmitDelay);
+    if (autoSubmitDelay > 10) {
+      delayed.call(autoSubmitDelay, false, true);
     }
 
     return () => {