@etsoo/materialui 1.6.42 → 1.6.44

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/DnDSortableList.d.ts

@@ -2,7 +2,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
 import React from "react";
 import { CSSProperties, Theme } from "@mui/material/styles";
 import { useSortable } from "@dnd-kit/react/sortable";
-import { DragDropEvents } from "@dnd-kit/react";
+import { DragDropEventHandlers } from "@dnd-kit/react";
 /**
  * DnD sortable item default style
  * @param index Item index
@@ -91,11 +91,11 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
     /**
      * Drag start handler
      */
-    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    onDragStart?: (items: D[], event: Parameters<DragDropEventHandlers["onDragStart"]>[0]) => void;
     /**
      * Drag end handler
      */
-    onDragEnd?: (items: D[], ...args: Parameters<DragDropEvents["dragend"]>) => void;
+    onDragEnd?: (items: D[], ...args: Parameters<DragDropEventHandlers["onDragEnd"]>) => void;
 };
 /**
  * DnD sortable list component

package/lib/cjs/NumberInputField.d.ts

@@ -29,6 +29,10 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
      * Maximum value
      */
     max?: number;
+    /**
+     * Is search field?
+     */
+    search?: boolean;
     /**
      * Step value
      */

package/lib/cjs/NumberInputField.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
 const shared_1 = require("@etsoo/shared");
 const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const MUGlobal_1 = require("./MUGlobal");
 /**
  * Number input field, for controlled only components, please see IntInputField and MoneyInputField
  * @param props Props
@@ -17,12 +18,13 @@ const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment")
 function NumberInputField(props) {
     const { currency, inputStyle, min = 0, step = 1, symbol = currency
         ? `${currency} ${shared_1.NumberUtils.getCurrencySymbol(currency)}`
-        : undefined, endSymbol, max = 9999999, slotProps = {}, ...rest } = props;
-    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", slotProps: Object.assign(slotProps, {
+        : undefined, endSymbol, max = 9999999, search = false, slotProps = {}, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", size: search ? MUGlobal_1.MUGlobal.searchFieldSize : undefined, slotProps: Object.assign(slotProps, {
             input: {
                 startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
                 endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
             },
+            inputLabel: { shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : undefined },
             htmlInput: {
                 min,
                 step,
@@ -30,5 +32,5 @@ function NumberInputField(props) {
                 style: inputStyle,
                 inputMode: "numeric"
             }
-        }), ...rest }));
+        }), variant: search ? MUGlobal_1.MUGlobal.searchFieldVariant : undefined, ...rest }));
 }

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/DnDSortableList.d.ts

@@ -2,7 +2,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
 import React from "react";
 import { CSSProperties, Theme } from "@mui/material/styles";
 import { useSortable } from "@dnd-kit/react/sortable";
-import { DragDropEvents } from "@dnd-kit/react";
+import { DragDropEventHandlers } from "@dnd-kit/react";
 /**
  * DnD sortable item default style
  * @param index Item index
@@ -91,11 +91,11 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
     /**
      * Drag start handler
      */
-    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    onDragStart?: (items: D[], event: Parameters<DragDropEventHandlers["onDragStart"]>[0]) => void;
     /**
      * Drag end handler
      */
-    onDragEnd?: (items: D[], ...args: Parameters<DragDropEvents["dragend"]>) => void;
+    onDragEnd?: (items: D[], ...args: Parameters<DragDropEventHandlers["onDragEnd"]>) => void;
 };
 /**
  * DnD sortable list component

package/lib/mjs/NumberInputField.d.ts

@@ -29,6 +29,10 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
      * Maximum value
      */
     max?: number;
+    /**
+     * Is search field?
+     */
+    search?: boolean;
     /**
      * Step value
      */

package/lib/mjs/NumberInputField.js

@@ -3,6 +3,7 @@ import React from "react";
 import { InputField } from "./InputField";
 import { NumberUtils } from "@etsoo/shared";
 import InputAdornment from "@mui/material/InputAdornment";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Number input field, for controlled only components, please see IntInputField and MoneyInputField
  * @param props Props
@@ -11,12 +12,13 @@ import InputAdornment from "@mui/material/InputAdornment";
 export function NumberInputField(props) {
     const { currency, inputStyle, min = 0, step = 1, symbol = currency
         ? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
-        : undefined, endSymbol, max = 9999999, slotProps = {}, ...rest } = props;
-    return (_jsx(InputField, { type: "number", slotProps: Object.assign(slotProps, {
+        : undefined, endSymbol, max = 9999999, search = false, slotProps = {}, ...rest } = props;
+    return (_jsx(InputField, { type: "number", size: search ? MUGlobal.searchFieldSize : undefined, slotProps: Object.assign(slotProps, {
             input: {
                 startAdornment: symbol ? (_jsx(React.Fragment, { children: _jsx(InputAdornment, { position: "start", children: symbol }) })) : undefined,
                 endAdornment: endSymbol ? (_jsx(InputAdornment, { position: "end", children: endSymbol })) : undefined
             },
+            inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : undefined },
             htmlInput: {
                 min,
                 step,
@@ -24,5 +26,5 @@ export function NumberInputField(props) {
                 style: inputStyle,
                 inputMode: "numeric"
             }
-        }), ...rest }));
+        }), variant: search ? MUGlobal.searchFieldVariant : undefined, ...rest }));
 }

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.44",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -36,20 +36,20 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "@dnd-kit/react": "^0.3.2",
+    "@base-ui/react": "^1.4.0",
+    "@dnd-kit/react": "^0.4.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.60",
     "@etsoo/notificationbase": "^1.1.69",
     "@etsoo/react": "^1.8.84",
-    "@etsoo/shared": "^1.2.82",
+    "@etsoo/shared": "^1.2.83",
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
     "@mui/x-data-grid": "^9.0.1",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.0",
     "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",

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/DnDSortableList.tsx

@@ -2,7 +2,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
 import React from "react";
 import { CSSProperties, Theme, useTheme } from "@mui/material/styles";
 import { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
-import { DragDropEvents, DragDropProvider } from "@dnd-kit/react";
+import { DragDropEventHandlers, DragDropProvider } from "@dnd-kit/react";
 
 /**
  * DnD sortable item default style
@@ -126,7 +126,7 @@ export type DnDSortableListProps<
    */
   onDragStart?: (
     items: D[],
-    event: Parameters<DragDropEvents["dragstart"]>[0]
+    event: Parameters<DragDropEventHandlers["onDragStart"]>[0]
   ) => void;
 
   /**
@@ -134,7 +134,7 @@ export type DnDSortableListProps<
    */
   onDragEnd?: (
     items: D[],
-    ...args: Parameters<DragDropEvents["dragend"]>
+    ...args: Parameters<DragDropEventHandlers["onDragEnd"]>
   ) => void;
 };
 
@@ -293,7 +293,9 @@ export function DnDSortableList<
     };
   }, [items, labelFn, changeItems]);
 
-  function handleDragEnd(...args: Parameters<DragDropEvents["dragend"]>) {
+  function handleDragEnd(
+    ...args: Parameters<DragDropEventHandlers["onDragEnd"]>
+  ) {
     // Event
     const event = args[0];
 

package/src/NumberInputField.tsx

@@ -3,7 +3,7 @@ import { InputField, InputFieldProps } from "./InputField";
 import { Currency } from "@etsoo/appscript";
 import { NumberUtils } from "@etsoo/shared";
 import InputAdornment from "@mui/material/InputAdornment";
-import { NumberFieldInput } from "@base-ui/react/number-field";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Number input field properties
@@ -42,6 +42,11 @@ export type NumberInputFieldProps = Omit<
    */
   max?: number;
 
+  /**
+   * Is search field?
+   */
+  search?: boolean;
+
   /**
    * Step value
    */
@@ -64,6 +69,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
       : undefined,
     endSymbol,
     max = 9999999,
+    search = false,
     slotProps = {},
     ...rest
   } = props;
@@ -71,6 +77,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
   return (
     <InputField
       type="number"
+      size={search ? MUGlobal.searchFieldSize : undefined}
       slotProps={Object.assign(slotProps, {
         input: {
           startAdornment: symbol ? (
@@ -82,6 +89,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
             <InputAdornment position="end">{endSymbol}</InputAdornment>
           ) : undefined
         },
+        inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : undefined },
         htmlInput: {
           min,
           step,
@@ -90,6 +98,7 @@ export function NumberInputField(props: NumberInputFieldProps) {
           inputMode: "numeric"
         }
       })}
+      variant={search ? MUGlobal.searchFieldVariant : undefined}
       {...rest}
     />
   );

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 () => {