@etsoo/materialui 1.4.86 → 1.4.87

package/lib/cjs/ResponsibleContainer.js

@@ -176,7 +176,7 @@ function ResponsibleContainer(props) {
             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"}`, top: searchBarTop }));
+        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]);
     // Pull container
     const pullContainer = showDataGrid == null

package/lib/cjs/SearchBar.d.ts

@@ -27,6 +27,10 @@ export interface SearchBarProps {
      * Top position, true means Toolbar's height
      */
     top?: number | true;
+    /**
+     * Width
+     */
+    width: number;
 }
 /**
  * Search bar

package/lib/cjs/SearchBar.js

@@ -76,7 +76,7 @@ function checkFormEvent(event) {
  */
 function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top } = props;
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Menu index
@@ -240,10 +240,10 @@ function SearchBar(props) {
         };
     }, [className]);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { fixed: true, ref: dimensions[0][0], children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
+    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)
                         state.form = form;
-                }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: width, overflow: "hidden", paddingTop: "6px", sx: {
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,

package/lib/cjs/pages/DataGridPage.js

@@ -110,5 +110,5 @@ function DataGridPage(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: states.element, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
+                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/cjs/pages/FixedListPage.js

@@ -100,5 +100,5 @@ function FixedListPage(props) {
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/cjs/pages/ListPage.js

@@ -20,7 +20,7 @@ const GridUtils_1 = require("../GridUtils");
  */
 function ListPage(props) {
     // Destruct
-    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, sizeReadyMiliseconds = 0, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
@@ -46,6 +46,9 @@ function ListPage(props) {
     const localLoadData = (props, lastItem) => {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
+    // Watch container
+    const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
     // Search data
     const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
     const onInitLoad = (ref) => {
@@ -77,7 +80,7 @@ function ListPage(props) {
     };
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
 }

package/lib/cjs/pages/TablePage.js

@@ -20,7 +20,7 @@ const GridUtils_1 = require("../GridUtils");
  */
 function TablePage(props) {
     // Destruct
-    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
@@ -68,5 +68,5 @@ function TablePage(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: (0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/mjs/ResponsibleContainer.js

@@ -170,7 +170,7 @@ export function ResponsibleContainer(props) {
             rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
-        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, top: searchBarTop }));
+        return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
     const pullContainer = showDataGrid == null

package/lib/mjs/SearchBar.d.ts

@@ -27,6 +27,10 @@ export interface SearchBarProps {
      * Top position, true means Toolbar's height
      */
     top?: number | true;
+    /**
+     * Width
+     */
+    width: number;
 }
 /**
  * Search bar

package/lib/mjs/SearchBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Container, Drawer, IconButton, Stack, Toolbar } from "@mui/material";
+import { Button, Drawer, IconButton, Stack, Toolbar } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils, NumberUtils } from "@etsoo/shared";
@@ -70,7 +70,7 @@ function checkFormEvent(event) {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top } = props;
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Menu index
@@ -234,10 +234,10 @@ export function SearchBar(props) {
         };
     }, [className]);
     // Layout
-    return (_jsxs(Container, { fixed: true, ref: dimensions[0][0], children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
+    return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)
                         state.form = form;
-                }, children: _jsxs(Stack, { className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
+                }, children: _jsxs(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: width, overflow: "hidden", paddingTop: "6px", sx: {
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,

package/lib/mjs/pages/DataGridPage.js

@@ -104,5 +104,5 @@ export function DataGridPage(props) {
     // Layout
     return (_jsx(CommonPage, { ...pageProps, scrollContainer: states.element, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
+                    }, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/mjs/pages/FixedListPage.js

@@ -94,5 +94,5 @@ export function FixedListPage(props) {
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return (_jsx(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), list] }) }));
+    return (_jsx(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/mjs/pages/ListPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCombinedRefs } from "@etsoo/react";
+import { useCombinedRefs, useDimensions } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
@@ -14,7 +14,7 @@ import { GridUtils } from "../GridUtils";
  */
 export function ListPage(props) {
     // Destruct
-    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, sizeReadyMiliseconds = 0, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
@@ -40,6 +40,9 @@ export function ListPage(props) {
     const localLoadData = (props, lastItem) => {
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
+    // Watch container
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+    const rect = dimensions[0][2];
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);
     const onInitLoad = (ref) => {
@@ -71,7 +74,7 @@ export function ListPage(props) {
     };
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
-    return (_jsx(CommonPage, { ...pageProps, scrollContainer: globalThis, children: _jsxs(Stack, { children: [_jsx(Box, { sx: {
+    return (_jsx(CommonPage, { ...pageProps, scrollContainer: globalThis, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop }) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
 }

package/lib/mjs/pages/TablePage.js

@@ -14,7 +14,7 @@ import { GridUtils } from "../GridUtils";
  */
 export function TablePage(props) {
     // Destruct
-    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
+    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
@@ -62,5 +62,5 @@ export function TablePage(props) {
     // Layout
     return (_jsx(CommonPage, { ...pageProps, scrollContainer: globalThis, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
+                    }, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.86",
+  "version": "1.4.87",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ResponsibleContainer.tsx

@@ -441,6 +441,7 @@ export function ResponsibleContainer<T extends object, F>(
         fields={f}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
+        width={rect.width}
         top={searchBarTop}
       />
     );

package/src/SearchBar.tsx

@@ -45,6 +45,11 @@ export interface SearchBarProps {
    * Top position, true means Toolbar's height
    */
   top?: number | true;
+
+  /**
+   * Width
+   */
+  width: number;
 }
 
 // Cached width attribute name
@@ -126,7 +131,8 @@ export function SearchBar(props: SearchBarProps) {
     onSubmit,
     itemGap = 6,
     itemWidth = 160,
-    top
+    top,
+    width
   } = props;
 
   // Labels
@@ -337,7 +343,7 @@ export function SearchBar(props: SearchBarProps) {
 
   // Layout
   return (
-    <Container fixed ref={dimensions[0][0]}>
+    <React.Fragment>
       <form
         id="SearchBarForm"
         className={className}
@@ -347,12 +353,13 @@ export function SearchBar(props: SearchBarProps) {
         }}
       >
         <Stack
+          ref={dimensions[0][0]}
           className="SearchBarContainer"
           justifyContent="center"
           alignItems="center"
           direction="row"
           spacing={`${itemGap}px`}
-          width="100%"
+          width={width}
           overflow="hidden"
           paddingTop="6px"
           sx={{
@@ -429,6 +436,6 @@ export function SearchBar(props: SearchBarProps) {
           </form>
         </Drawer>
       )}
-    </Container>
+    </React.Fragment>
   );
 }

package/src/pages/DataGridPage.tsx

@@ -186,7 +186,14 @@ export function DataGridPage<T extends object, F>(
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={f} onSubmit={onSubmit} top={searchBarTop} />
+          {rect && rect.width > 100 && (
+            <SearchBar
+              fields={f}
+              onSubmit={onSubmit}
+              top={searchBarTop}
+              width={rect.width}
+            />
+          )}
         </Box>
         {list}
       </Stack>

package/src/pages/FixedListPage.tsx

@@ -179,7 +179,14 @@ export function FixedListPage<T extends object, F>(
     <CommonPage {...pageRest} paddings={{}} scrollContainer={scrollContainer}>
       <Stack>
         <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
-          <SearchBar fields={f} onSubmit={onSubmit} top={searchBarTop} />
+          {rect && rect.width > 100 && (
+            <SearchBar
+              fields={f}
+              onSubmit={onSubmit}
+              top={searchBarTop}
+              width={rect.width}
+            />
+          )}
         </Box>
         {list}
       </Stack>

package/src/pages/ListPage.tsx

@@ -4,7 +4,8 @@ import {
   ListOnScrollProps,
   ScrollerListForwardRef,
   ScrollerListRef,
-  useCombinedRefs
+  useCombinedRefs,
+  useDimensions
 } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
@@ -36,6 +37,7 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
     pageProps = {},
     cacheKey,
     cacheMinutes = 15,
+    sizeReadyMiliseconds = 0,
     searchBarTop,
     ...rest
   } = props;
@@ -78,6 +80,10 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
     );
   };
 
+  // Watch container
+  const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+  const rect = dimensions[0][2];
+
   // Search data
   const searchData = GridUtils.getSearchData(cacheKey);
 
@@ -123,11 +129,19 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
     <CommonPage {...pageProps} scrollContainer={globalThis}>
       <Stack>
         <Box
+          ref={dimensions[0][0]}
           sx={{
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={f} onSubmit={onSubmit} top={searchBarTop} />
+          {rect && rect.width > 100 && (
+            <SearchBar
+              fields={f}
+              onSubmit={onSubmit}
+              top={searchBarTop}
+              width={rect.width}
+            />
+          )}
         </Box>
         <ScrollerListEx<T>
           autoLoad={false}

package/src/pages/TablePage.tsx

@@ -48,6 +48,7 @@ export function TablePage<
     pageProps = {},
     cacheKey,
     cacheMinutes = 15,
+    searchBarTop,
     ...rest
   } = props;
 
@@ -139,7 +140,14 @@ export function TablePage<
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={f} onSubmit={onSubmit} />
+          {rect && rect.width > 100 && (
+            <SearchBar
+              fields={f}
+              onSubmit={onSubmit}
+              top={searchBarTop}
+              width={rect.width}
+            />
+          )}
         </Box>
         {list}
       </Stack>