@etsoo/materialui 1.1.54 → 1.1.56

package/lib/ResponsibleContainer.d.ts

@@ -1,19 +1,23 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { SxProps, Theme } from '@mui/material';
-import React from 'react';
-import { ListChildComponentProps } from 'react-window';
-import { GridColumn, GridJsonData, GridMethodRef } from '@etsoo/react';
-import { DataGridExProps } from './DataGridEx';
-import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from './ScrollerListEx';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { SxProps, Theme } from "@mui/material";
+import React from "react";
+import { ListChildComponentProps } from "react-window";
+import { GridColumn, GridJsonData, GridMethodRef } from "@etsoo/react";
+import { DataGridExProps } from "./DataGridEx";
+import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./ScrollerListEx";
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> & {
+export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
      */
     adjustHeight?: (height: number) => number;
+    /**
+     * Top height
+     */
+    topHeight?: number;
     /**
      * Columns
      */
@@ -78,6 +82,10 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * Size ready to read miliseconds span
      */
     sizeReadyMiliseconds?: number;
+    /**
+     * SearchBar height
+     */
+    searchBarHeight?: number;
 };
 /**
  * Responsible container

package/lib/ResponsibleContainer.js

@@ -1,16 +1,16 @@
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from '@etsoo/react';
-import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
-import { MUGlobal } from './MUGlobal';
-import { PullToRefreshUI } from './PullToRefreshUI';
-import { ScrollerListEx } from './ScrollerListEx';
-import { SearchBar } from './SearchBar';
-import { Labels } from './app/Labels';
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { DataGridEx, DataGridExCalColumns } from "./DataGridEx";
+import { MUGlobal } from "./MUGlobal";
+import { PullToRefreshUI } from "./PullToRefreshUI";
+import { ScrollerListEx } from "./ScrollerListEx";
+import { SearchBar } from "./SearchBar";
+import { Labels } from "./app/Labels";
 function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
     const half = MUGlobal.half(paddings);
     return {
-        '& .SearchBox': {
+        "& .SearchBox": {
             marginBottom: hasField ? half : 0
         }
     };
@@ -22,7 +22,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, topHeight, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -90,7 +90,7 @@ export function ResponsibleContainer(props) {
             // Auto calculation
             heightLocal =
                 document.documentElement.clientHeight -
-                    Math.round(rect.bottom + 1);
+                    (topHeight !== null && topHeight !== void 0 ? topHeight : Math.round(rect.bottom + 1));
             const style = window.getComputedStyle(dimensions[0][1]);
             const boxMargin = parseFloat(style.marginBottom);
             if (!isNaN(boxMargin))
@@ -122,9 +122,7 @@ export function ResponsibleContainer(props) {
         delete rest.selectable;
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
-                        ReactUtils.isSafeClick(event) &&
-                        quickAction(data), oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
                     }, ...rest })),
@@ -134,14 +132,14 @@ export function ResponsibleContainer(props) {
     const searchBar = React.useMemo(() => {
         if (!hasFields || showDataGrid == null)
             return;
-        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? 'Grid' : 'List'}` }));
-    }, [showDataGrid, hasFields]);
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, innerHeight: searchBarHeight }));
+    }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container
     const pullContainer = showDataGrid == null
         ? undefined
         : showDataGrid
-            ? '.DataGridEx-Body'
-            : '.ScrollerListEx-Body';
+            ? ".DataGridEx-Body"
+            : ".ScrollerListEx-Body";
     // Layout
     return (React.createElement(Box, { sx: containerBoxSx == null
             ? undefined

package/lib/SearchBar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 /**
  * Search bar props
  */

package/lib/SearchBar.js

@@ -1,31 +1,31 @@
-import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
-import React from 'react';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import { DomUtils } from '@etsoo/shared';
-import { ReactUtils, useDelayedExecutor, useDimensions } from '@etsoo/react';
-import { Labels } from './app/Labels';
+import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
+import React from "react";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import { DomUtils } from "@etsoo/shared";
+import { ReactUtils, useDelayedExecutor, useDimensions } from "@etsoo/react";
+import { Labels } from "./app/Labels";
 // Cached width attribute name
-const cachedWidthName = 'data-cached-width';
+const cachedWidthName = "data-cached-width";
 // Reset form
 const resetForm = (form) => {
     for (const input of form.elements) {
         // Ignore disabled inputs
-        if ('disabled' in input && input.disabled)
+        if ("disabled" in input && input.disabled)
             continue;
         // All non hidden inputs
         if (input instanceof HTMLInputElement) {
             // Ignore hidden input
-            if (input.type === 'hidden')
+            if (input.type === "hidden")
                 continue;
             // Ignore readOnly without data-reset=true inputs
-            if (!input.readOnly || input.dataset.reset === 'true') {
-                ReactUtils.triggerChange(input, '', true);
+            if (!input.readOnly || input.dataset.reset === "true") {
+                ReactUtils.triggerChange(input, "", true);
             }
             continue;
         }
         // All selects
         if (input instanceof HTMLSelectElement) {
-            if (input.options.length > 0 && input.options[0].value === '') {
+            if (input.options.length > 0 && input.options[0].value === "") {
                 input.selectedIndex = 0;
             }
             else {
@@ -35,12 +35,12 @@ const resetForm = (form) => {
         }
     }
     // Trigger reset event
-    const resetEvent = new Event('reset');
+    const resetEvent = new Event("reset");
     form.dispatchEvent(resetEvent);
 };
 // Disable inputs avoid auto trigger change events for them
 const setChildState = (child, enabled) => {
-    const inputs = child.getElementsByTagName('input');
+    const inputs = child.getElementsByTagName("input");
     for (const input of inputs) {
         input.disabled = !enabled;
     }
@@ -52,7 +52,7 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, innerHeight = 40, onSubmit } = props;
+    const { className, fields, innerHeight = 45.6, onSubmit } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Spacing
@@ -74,13 +74,13 @@ export function SearchBar(props) {
         const len = target.children.length;
         for (let i = 0; i < len; i++) {
             var classList = target.children[i].classList;
-            classList.remove('showChild');
+            classList.remove("showChild");
         }
     }, 0);
     // Show or hide element
     const setElementVisible = (element, visible) => {
-        element.classList.remove(visible ? 'hiddenChild' : 'showChild');
-        element.classList.add(visible ? 'showChild' : 'hiddenChild');
+        element.classList.remove(visible ? "hiddenChild" : "showChild");
+        element.classList.add(visible ? "showChild" : "hiddenChild");
     };
     // Reset button ref
     const resetButtonRef = (instance) => {
@@ -90,9 +90,7 @@ export function SearchBar(props) {
             return;
         // First
         const [_, container, containerRect] = dimensions[0];
-        if (container == null ||
-            containerRect == null ||
-            containerRect.width < 10)
+        if (container == null || containerRect == null || containerRect.width < 10)
             return;
         // Container width
         let maxWidth = containerRect.width;
@@ -225,27 +223,27 @@ export function SearchBar(props) {
                 if (form)
                     state.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
-                    '& > :not(style)': {
-                        flexBasis: 'auto',
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight < 1 ? undefined : innerHeight, sx: {
+                    "& > :not(style)": {
+                        flexBasis: "auto",
                         flexGrow: 0,
                         flexShrink: 0,
-                        maxWidth: '180px',
-                        visibility: 'hidden'
+                        maxWidth: "180px",
+                        visibility: "hidden"
                     },
-                    '& > .hiddenChild': {
-                        display: 'none'
+                    "& > .hiddenChild": {
+                        display: "none"
                     },
-                    '& > .showChild': {
-                        display: 'block',
-                        visibility: 'visible'
+                    "& > .showChild": {
+                        display: "block",
+                        visibility: "visible"
                     }
                 } },
                 fields.map((item, index) => (React.createElement(React.Fragment, { key: index }, item))),
                 React.createElement(IconButton, { "aria-label": "delete", size: "medium", onClick: handleMore },
                     React.createElement(MoreHorizIcon, null)),
                 React.createElement(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset }, labels.reset))),
-        index != null && index < fields.length && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: '250px' }, ModalProps: {
+        index != null && index < fields.length && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: "250px" }, ModalProps: {
                 keepMounted: true // Better open performance on mobile.
             }, open: open, onClose: () => updateOpen(false) },
             React.createElement("form", { onChange: moreFormChange, ref: (form) => {
@@ -253,8 +251,8 @@ export function SearchBar(props) {
                         state.moreForm = form;
                 } },
                 React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
-                        '& > :not(style)': {
-                            minWidth: '100px'
+                        "& > :not(style)": {
+                            minWidth: "100px"
                         }
                     } }, moreItems))))));
 }

package/lib/app/ReactApp.d.ts

@@ -61,10 +61,11 @@ export interface IReactAppBase {
      */
     setPageData(data: IPageData): void;
     /**
-     * Set page title and data
-     * @param key Page title resource key
+     * Set page title and subtitle
+     * @param title Page title
+     * @param subtitle Page subtitle
      */
-    setPageKey(key: string): void;
+    setPageTitle(title: string, subtitle?: string): void;
     /**
      * Set page title and data
      * @param title Page title
@@ -183,10 +184,11 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      */
     setPageData(data: P): void;
     /**
-     * Set page title and data
+     * Set page title and subtitle
      * @param title Page title
+     * @param subtitle Page subtitle
      */
-    setPageTitle(title: string): void;
+    setPageTitle(title: string, subtitle?: string): void;
     /**
      * Navigate to Url or delta
      * @param url Url or delta

package/lib/app/ReactApp.js

@@ -206,12 +206,13 @@ export class ReactApp extends CoreApp {
         }
     }
     /**
-     * Set page title and data
+     * Set page title and subtitle
      * @param title Page title
+     * @param subtitle Page subtitle
      */
-    setPageTitle(title) {
+    setPageTitle(title, subtitle) {
         // Data
-        const data = { title };
+        const data = { title, subtitle };
         // Dispatch the change
         if (this.pageStateDispatch != null) {
             this.pageStateDispatch({

package/lib/pages/ResponsivePage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { ResponsePageProps } from './ResponsivePageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { ResponsePageProps } from "./ResponsivePageProps";
 /**
  * Fixed height list page
  * @param props Props

package/lib/pages/ResponsivePage.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ResponsibleContainer } from '../ResponsibleContainer';
-import { CommonPage } from './CommonPage';
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { ResponsibleContainer } from "../ResponsibleContainer";
+import { CommonPage } from "./CommonPage";
 /**
  * Fixed height list page
  * @param props Props
@@ -24,15 +24,15 @@ export function ResponsivePage(props) {
                 // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                 return {
                     paddingTop: paddings,
-                    '& .SearchBox': {
+                    "& .SearchBox": {
                         marginLeft: paddings,
                         marginRight: paddings,
                         marginBottom: hasField ? half : 0
                     },
-                    '& .ListBox': {
+                    "& .ListBox": {
                         marginBottom: paddings
                     },
-                    '& .DataGridBox': {
+                    "& .DataGridBox": {
                         marginLeft: paddings,
                         marginRight: paddings,
                         marginBottom: paddings

package/lib/pages/SearchPageProps.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { GridJsonData, GridLoader } from '@etsoo/react';
-import { DataTypes } from '@etsoo/shared';
-import { CommonPageProps } from './CommonPageProps';
+import { GridJsonData, GridLoader } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { CommonPageProps } from "./CommonPageProps";
 /**
  * Search page props
  */
-export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate> = Omit<GridLoader<T>, 'loadData'> & {
+export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate> = Omit<GridLoader<T>, "loadData"> & {
     /**
      * Search fields
      */
@@ -27,4 +27,12 @@ export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate>
      * @default 100
      */
     sizeReadyMiliseconds?: number;
+    /**
+     * Top height
+     */
+    topHeight?: number;
+    /**
+     * SearchBar height
+     */
+    searchBarHeight?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.54",
+  "version": "1.1.56",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.80",
+    "@etsoo/appscript": "^1.3.81",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.51",
+    "@etsoo/react": "^1.6.52",
     "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.14",
-    "@mui/x-data-grid": "^6.0.2",
+    "@mui/x-data-grid": "^6.0.3",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",