@etsoo/materialui 1.6.58 → 1.6.60

package/lib/cjs/ResponsibleContainer.d.ts

@@ -35,7 +35,7 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
     /**
      * Search field template
      */
-    readonly fieldTemplate: F;
+    readonly fieldTemplate?: F;
     /**
      * Grid height
      */

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

@@ -35,7 +35,7 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
     /**
      * Search field template
      */
-    readonly fieldTemplate: F;
+    readonly fieldTemplate?: F;
     /**
      * Grid height
      */

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.58",
+  "version": "1.6.60",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -51,7 +51,7 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "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/ResponsibleContainer.tsx

@@ -68,7 +68,7 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<
   /**
    * Search field template
    */
-  readonly fieldTemplate: F;
+  readonly fieldTemplate?: F;
 
   /**
    * Grid height

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>
   );
 }