@etsoo/materialui 1.6.24 → 1.6.26

package/lib/cjs/ResponsibleContainer.js

@@ -89,8 +89,9 @@ function ResponsibleContainer(props) {
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&
-            Math.abs(rect.height - lastRect.height) <= 32)
+            Math.abs(rect.height - lastRect.height) <= 32) {
             return true;
+        }
         // Hold the new rect
         state.rect = rect;
         return false;

package/lib/cjs/SearchBar.d.ts

@@ -3,6 +3,10 @@ import React from "react";
  * Search bar props
  */
 export interface SearchBarProps {
+    /**
+     * Auto submit delay miliseconds, default is 100ms
+     */
+    autoSubmitDelay?: number;
     /**
      * Style class name
      */

package/lib/cjs/SearchBar.js

@@ -80,7 +80,7 @@ function checkFormEvent(event) {
  */
 function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
+    const { autoSubmitDelay = 100, className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Menu index
@@ -93,8 +93,9 @@ function SearchBar(props) {
     const { dimensions } = (0, react_2.useDimensions)(1, (target, rect) => {
         // Same logic from resetButtonRefe);
         if (rect.width === state.lastMaxWidth ||
-            (!state.hasMore && rect.width > state.lastMaxWidth))
+            (!state.hasMore && rect.width > state.lastMaxWidth)) {
             return false;
+        }
         // Len
         const len = target.children.length;
         for (let i = 0; i < len; i++) {
@@ -238,11 +239,13 @@ function SearchBar(props) {
     };
     react_1.default.useEffect(() => {
         // Delayed way
-        delayed.call(100);
+        if (autoSubmitDelay > 0) {
+            delayed.call(autoSubmitDelay);
+        }
         return () => {
             delayed.clear();
         };
-    }, [className]);
+    }, [autoSubmitDelay]);
     // Layout
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)

package/lib/cjs/pages/EditPage.d.ts

@@ -1,4 +1,4 @@
-import React, { FormEventHandler } from "react";
+import React, { SubmitEventHandler } from "react";
 import { CommonPageProps } from "./CommonPage";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
@@ -12,7 +12,7 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
     /**
      * On form submit
      */
-    onSubmit?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: SubmitEventHandler<HTMLFormElement>;
     /**
      * On delete callback
      */

package/lib/mjs/ResponsibleContainer.js

@@ -83,8 +83,9 @@ export function ResponsibleContainer(props) {
         if (lastRect != null &&
             state.mounted !== true &&
             Math.abs(rect.width - lastRect.width) <= 32 &&
-            Math.abs(rect.height - lastRect.height) <= 32)
+            Math.abs(rect.height - lastRect.height) <= 32) {
             return true;
+        }
         // Hold the new rect
         state.rect = rect;
         return false;

package/lib/mjs/SearchBar.d.ts

@@ -3,6 +3,10 @@ import React from "react";
  * Search bar props
  */
 export interface SearchBarProps {
+    /**
+     * Auto submit delay miliseconds, default is 100ms
+     */
+    autoSubmitDelay?: number;
     /**
      * Style class name
      */

package/lib/mjs/SearchBar.js

@@ -74,7 +74,7 @@ function checkFormEvent(event) {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
+    const { autoSubmitDelay = 100, className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Menu index
@@ -87,8 +87,9 @@ export function SearchBar(props) {
     const { dimensions } = useDimensions(1, (target, rect) => {
         // Same logic from resetButtonRefe);
         if (rect.width === state.lastMaxWidth ||
-            (!state.hasMore && rect.width > state.lastMaxWidth))
+            (!state.hasMore && rect.width > state.lastMaxWidth)) {
             return false;
+        }
         // Len
         const len = target.children.length;
         for (let i = 0; i < len; i++) {
@@ -232,11 +233,13 @@ export function SearchBar(props) {
     };
     React.useEffect(() => {
         // Delayed way
-        delayed.call(100);
+        if (autoSubmitDelay > 0) {
+            delayed.call(autoSubmitDelay);
+        }
         return () => {
             delayed.clear();
         };
-    }, [className]);
+    }, [autoSubmitDelay]);
     // Layout
     return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)

package/lib/mjs/pages/EditPage.d.ts

@@ -1,4 +1,4 @@
-import React, { FormEventHandler } from "react";
+import React, { SubmitEventHandler } from "react";
 import { CommonPageProps } from "./CommonPage";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
@@ -12,7 +12,7 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
     /**
      * On form submit
      */
-    onSubmit?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: SubmitEventHandler<HTMLFormElement>;
     /**
      * On delete callback
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.24",
+  "version": "1.6.26",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.56",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.79",
+    "@etsoo/react": "^1.8.80",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",

package/src/ResponsibleContainer.tsx

@@ -275,8 +275,9 @@ export function ResponsibleContainer<T extends object, F>(
         state.mounted !== true &&
         Math.abs(rect.width - lastRect.width) <= 32 &&
         Math.abs(rect.height - lastRect.height) <= 32
-      )
+      ) {
         return true;
+      }
 
       // Hold the new rect
       state.rect = rect;

package/src/SearchBar.tsx

@@ -13,6 +13,11 @@ import Toolbar from "@mui/material/Toolbar";
  * Search bar props
  */
 export interface SearchBarProps {
+  /**
+   * Auto submit delay miliseconds, default is 100ms
+   */
+  autoSubmitDelay?: number;
+
   /**
    * Style class name
    */
@@ -95,7 +100,7 @@ const setChildState = (child: Element, enabled: boolean) => {
   }
 };
 
-function checkFormEvent(event: React.FormEvent<HTMLFormElement>) {
+function checkFormEvent(event: React.ChangeEvent<HTMLFormElement>) {
   if (event.nativeEvent.cancelable && !event.nativeEvent.composed) return true;
 
   if (
@@ -123,6 +128,7 @@ function checkFormEvent(event: React.FormEvent<HTMLFormElement>) {
 export function SearchBar(props: SearchBarProps) {
   // Destruct
   const {
+    autoSubmitDelay = 100,
     className,
     fields,
     onSubmit,
@@ -157,8 +163,9 @@ export function SearchBar(props: SearchBarProps) {
       if (
         rect.width === state.lastMaxWidth ||
         (!state.hasMore && rect.width > state.lastMaxWidth)
-      )
+      ) {
         return false;
+      }
 
       // Len
       const len = target.children.length;
@@ -284,7 +291,7 @@ export function SearchBar(props: SearchBarProps) {
   const hasMoreItems = moreItems.length > 0;
 
   // Handle main form
-  const handleForm = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleForm = (event: React.ChangeEvent<HTMLFormElement>) => {
     if (checkFormEvent(event)) return;
 
     if (state.form == null) state.form = event.currentTarget;
@@ -298,7 +305,7 @@ export function SearchBar(props: SearchBarProps) {
   };
 
   // More form change
-  const moreFormChange = (event: React.FormEvent<HTMLFormElement>) => {
+  const moreFormChange = (event: React.ChangeEvent<HTMLFormElement>) => {
     if (checkFormEvent(event)) return;
 
     if (state.moreForm == null) state.moreForm = event.currentTarget;
@@ -331,12 +338,14 @@ export function SearchBar(props: SearchBarProps) {
 
   React.useEffect(() => {
     // Delayed way
-    delayed.call(100);
+    if (autoSubmitDelay > 0) {
+      delayed.call(autoSubmitDelay);
+    }
 
     return () => {
       delayed.clear();
     };
-  }, [className]);
+  }, [autoSubmitDelay]);
 
   // Layout
   return (

package/src/pages/EditPage.tsx

@@ -1,4 +1,4 @@
-import React, { FormEventHandler } from "react";
+import React, { SubmitEventHandler } from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage, CommonPageProps } from "./CommonPage";
 import SaveIcon from "@mui/icons-material/Save";
@@ -22,7 +22,7 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
   /**
    * On form submit
    */
-  onSubmit?: FormEventHandler<HTMLFormElement>;
+  onSubmit?: SubmitEventHandler<HTMLFormElement>;
 
   /**
    * On delete callback