@etsoo/materialui 1.6.57 → 1.6.59

package/lib/cjs/NumberInputField.d.ts

@@ -33,6 +33,11 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
      * Step value
      */
     step?: number;
+    /**
+     * Number value change handler
+     * @param value New value
+     */
+    onNumberChange?: (value: number | undefined) => void;
 };
 /**
  * Number input field, for controlled only components, please see IntInputField and MoneyInputField

package/lib/cjs/NumberInputField.js

@@ -17,8 +17,21 @@ 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, onChange, onNumberChange, slotProps = {}, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", onChange: (event) => {
+            onChange?.(event);
+            if (onNumberChange) {
+                const input = event.target;
+                if (input.checkValidity()) {
+                    const qty = shared_1.NumberUtils.parse(input.value);
+                    onNumberChange(qty);
+                }
+                else {
+                    input.reportValidity();
+                    onNumberChange(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

package/lib/cjs/UserAvatarEditor.js

@@ -130,6 +130,12 @@ function UserAvatarEditor(props) {
         const newState = { ...editorState, rotate };
         setEditorState(newState);
     };
+    let picaInstance;
+    // toBlob helper
+    // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
+    const toBlob = (canvas, mimeType = type.current, quality = 1) => {
+        return picaInstance.toBlob(canvas, mimeType, quality);
+    };
     // Handle done
     const handleDone = async () => {
         // Data
@@ -139,13 +145,10 @@ function UserAvatarEditor(props) {
         if (data == null)
             return;
         // pica
-        const pica = (await import("pica")).default;
-        const picaInstance = pica();
-        // toBlob helper
-        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-        const toBlob = (canvas, mimeType = type.current, quality = 1) => {
-            return picaInstance.toBlob(canvas, mimeType, quality);
-        };
+        if (picaInstance == null) {
+            const pica = (await import("pica")).Pica;
+            picaInstance = new pica();
+        }
         if (data.width > maxWidthCalculated) {
             // Target height
             const heightCalculated = (localHeight * maxWidthCalculated) / width;

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

@@ -43,6 +43,14 @@ export type ResponsePageProps<T extends object, F> = Omit<DataGridPageProps<T, F
      * Row height
      */
     rowHeight?: ResponsibleContainerProps<T, F>["rowHeight"];
+    /**
+     * Header
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer
+     */
+    footer?: React.ReactNode;
 };
 /**
  * Fixed height list page

package/lib/cjs/pages/ResponsivePage.js

@@ -17,14 +17,14 @@ const OperationMessageContainer_1 = require("../messages/OperationMessageContain
  */
 function ResponsivePage(props) {
     // Destruct
-    const { pageProps = {}, operationMessageHandler, ...rest } = props;
+    const { pageProps = {}, operationMessageHandler, header, footer, ...rest } = props;
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
     // State
     const [scrollContainer, setScrollContainer] = react_1.default.useState();
     const [direction, setDirection] = react_1.default.useState(fabColumnDirection);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), (0, jsx_runtime_1.jsx)(ResponsibleContainer_1.ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
+    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), header, (0, jsx_runtime_1.jsx)(ResponsibleContainer_1.ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
                     // Half
                     const half = typeof paddings == "number"
                         ? paddings / 2
@@ -49,5 +49,5 @@ function ResponsivePage(props) {
                 }, elementReady: (element, isDataGrid) => {
                     setDirection(!isDataGrid);
                     setScrollContainer(element);
-                }, ...rest })] }));
+                }, ...rest }), footer] }));
 }

package/lib/mjs/NumberInputField.d.ts

@@ -33,6 +33,11 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
      * Step value
      */
     step?: number;
+    /**
+     * Number value change handler
+     * @param value New value
+     */
+    onNumberChange?: (value: number | undefined) => void;
 };
 /**
  * Number input field, for controlled only components, please see IntInputField and MoneyInputField

package/lib/mjs/NumberInputField.js

@@ -11,8 +11,21 @@ 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, onChange, onNumberChange, slotProps = {}, ...rest } = props;
+    return (_jsx(InputField, { type: "number", onChange: (event) => {
+            onChange?.(event);
+            if (onNumberChange) {
+                const input = event.target;
+                if (input.checkValidity()) {
+                    const qty = NumberUtils.parse(input.value);
+                    onNumberChange(qty);
+                }
+                else {
+                    input.reportValidity();
+                    onNumberChange(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

package/lib/mjs/UserAvatarEditor.js

@@ -124,6 +124,12 @@ export function UserAvatarEditor(props) {
         const newState = { ...editorState, rotate };
         setEditorState(newState);
     };
+    let picaInstance;
+    // toBlob helper
+    // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
+    const toBlob = (canvas, mimeType = type.current, quality = 1) => {
+        return picaInstance.toBlob(canvas, mimeType, quality);
+    };
     // Handle done
     const handleDone = async () => {
         // Data
@@ -133,13 +139,10 @@ export function UserAvatarEditor(props) {
         if (data == null)
             return;
         // pica
-        const pica = (await import("pica")).default;
-        const picaInstance = pica();
-        // toBlob helper
-        // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-        const toBlob = (canvas, mimeType = type.current, quality = 1) => {
-            return picaInstance.toBlob(canvas, mimeType, quality);
-        };
+        if (picaInstance == null) {
+            const pica = (await import("pica")).Pica;
+            picaInstance = new pica();
+        }
         if (data.width > maxWidthCalculated) {
             // Target height
             const heightCalculated = (localHeight * maxWidthCalculated) / width;

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

@@ -43,6 +43,14 @@ export type ResponsePageProps<T extends object, F> = Omit<DataGridPageProps<T, F
      * Row height
      */
     rowHeight?: ResponsibleContainerProps<T, F>["rowHeight"];
+    /**
+     * Header
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer
+     */
+    footer?: React.ReactNode;
 };
 /**
  * Fixed height list page

package/lib/mjs/pages/ResponsivePage.js

@@ -11,14 +11,14 @@ import { OperationMessageContainer } from "../messages/OperationMessageContainer
  */
 export function ResponsivePage(props) {
     // Destruct
-    const { pageProps = {}, operationMessageHandler, ...rest } = props;
+    const { pageProps = {}, operationMessageHandler, header, footer, ...rest } = props;
     pageProps.paddings ??= MUGlobal.pagePaddings;
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
     // State
     const [scrollContainer, setScrollContainer] = React.useState();
     const [direction, setDirection] = React.useState(fabColumnDirection);
     // Layout
-    return (_jsxs(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), _jsx(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
+    return (_jsxs(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), header, _jsx(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
                     // Half
                     const half = typeof paddings == "number"
                         ? paddings / 2
@@ -43,5 +43,5 @@ export function ResponsivePage(props) {
                 }, elementReady: (element, isDataGrid) => {
                     setDirection(!isDataGrid);
                     setScrollContainer(element);
-                }, ...rest })] }));
+                }, ...rest }), footer] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.57",
+  "version": "1.6.59",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -49,9 +49,9 @@
     "@mui/x-data-grid": "^9.1.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.4.3",
+    "dompurify": "^3.4.5",
     "eventemitter3": "^5.0.4",
-    "pica": "^9.0.1",
+    "pica": "^10.0.1",
     "pulltorefreshjs": "^0.1.22",
     "react": "^19.2.6",
     "react-avatar-editor": "^15.1.0",

package/src/NumberInputField.tsx

@@ -46,6 +46,12 @@ export type NumberInputFieldProps = Omit<
    * Step value
    */
   step?: number;
+
+  /**
+   * Number value change handler
+   * @param value New value
+   */
+  onNumberChange?: (value: number | undefined) => void;
 };
 
 /**
@@ -64,6 +70,8 @@ export function NumberInputField(props: NumberInputFieldProps) {
       : undefined,
     endSymbol,
     max = 9999999,
+    onChange,
+    onNumberChange,
     slotProps = {},
     ...rest
   } = props;
@@ -71,6 +79,20 @@ export function NumberInputField(props: NumberInputFieldProps) {
   return (
     <InputField
       type="number"
+      onChange={(event) => {
+        onChange?.(event);
+
+        if (onNumberChange) {
+          const input = event.target;
+          if (input.checkValidity()) {
+            const qty = NumberUtils.parse(input.value);
+            onNumberChange(qty);
+          } else {
+            input.reportValidity();
+            onNumberChange(undefined);
+          }
+        }
+      }}
       slotProps={Object.assign(slotProps, {
         input: {
           startAdornment: symbol ? (

package/src/UserAvatarEditor.tsx

@@ -251,6 +251,18 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     setEditorState(newState);
   };
 
+  let picaInstance: any;
+
+  // toBlob helper
+  // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
+  const toBlob = (
+    canvas: HTMLCanvasElement,
+    mimeType: string = type.current,
+    quality: number = 1
+  ) => {
+    return picaInstance.toBlob(canvas, mimeType, quality);
+  };
+
   // Handle done
   const handleDone = async () => {
     // Data
@@ -260,18 +272,10 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     if (data == null) return;
 
     // pica
-    const pica = (await import("pica")).default;
-    const picaInstance = pica();
-
-    // toBlob helper
-    // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-    const toBlob = (
-      canvas: HTMLCanvasElement,
-      mimeType: string = type.current,
-      quality: number = 1
-    ) => {
-      return picaInstance.toBlob(canvas, mimeType, quality);
-    };
+    if (picaInstance == null) {
+      const pica = (await import("pica")).Pica;
+      picaInstance = new pica();
+    }
 
     if (data.width > maxWidthCalculated) {
       // Target height

package/src/pages/ResponsivePage.tsx

@@ -60,6 +60,16 @@ export type ResponsePageProps<T extends object, F> = Omit<
    * Row height
    */
   rowHeight?: ResponsibleContainerProps<T, F>["rowHeight"];
+
+  /**
+   * Header
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Footer
+   */
+  footer?: React.ReactNode;
 };
 
 /**
@@ -71,7 +81,13 @@ export function ResponsivePage<T extends object, F>(
   props: ResponsePageProps<T, F>
 ) {
   // Destruct
-  const { pageProps = {}, operationMessageHandler, ...rest } = props;
+  const {
+    pageProps = {},
+    operationMessageHandler,
+    header,
+    footer,
+    ...rest
+  } = props;
 
   pageProps.paddings ??= MUGlobal.pagePaddings;
   const { paddings, fabColumnDirection, ...pageRest } = pageProps;
@@ -91,6 +107,7 @@ export function ResponsivePage<T extends object, F>(
       {operationMessageHandler && (
         <OperationMessageContainer handler={operationMessageHandler} />
       )}
+      {header}
       <ResponsibleContainer<T, F>
         paddings={paddings}
         containerBoxSx={(paddings, hasField, _dataGrid) => {
@@ -124,6 +141,7 @@ export function ResponsivePage<T extends object, F>(
         }}
         {...rest}
       />
+      {footer}
     </CommonPage>
   );
 }