@etsoo/materialui 1.1.58 → 1.1.60

package/lib/ResponsibleContainer.js

@@ -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, searchBarHeight, ...rest } = props;
+    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, searchBarHeight = 45.6, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -130,7 +130,7 @@ 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"}`, innerHeight: searchBarHeight }));
+        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
     }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container
     const pullContainer = showDataGrid == null
@@ -143,7 +143,7 @@ export function ResponsibleContainer(props) {
             ? undefined
             : containerBoxSx(paddings, hasFields, showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? 40 : 0 } }, searchBar),
+            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: hasFields ? searchBarHeight : 0 } }, searchBar),
             list),
         pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
                 const container = document.querySelector(pullContainer);

package/lib/SearchBar.d.ts

@@ -11,11 +11,6 @@ export interface SearchBarProps {
      * Fields
      */
     fields: React.ReactElement[];
-    /**
-     * Inner height
-     * @default 40
-     */
-    innerHeight?: number;
     /**
      * On submit callback
      */

package/lib/SearchBar.js

@@ -52,7 +52,7 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, innerHeight = 45.6, onSubmit } = props;
+    const { className, fields, onSubmit } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Spacing
@@ -223,7 +223,7 @@ 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 < 1 ? undefined : innerHeight, sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, sx: {
                     "& > :not(style)": {
                         flexBasis: "auto",
                         flexGrow: 0,
@@ -243,8 +243,8 @@ export function SearchBar(props) {
                 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: {
-                keepMounted: true // Better open performance on mobile.
+        index != null && index < fields.length && open && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: "250px" }, ModalProps: {
+                keepMounted: false
             }, open: open, onClose: () => updateOpen(false) },
             React.createElement("form", { onChange: moreFormChange, ref: (form) => {
                     if (form)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.58",
+  "version": "1.1.60",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/ResponsibleContainer.tsx

@@ -184,7 +184,7 @@ export function ResponsibleContainer<
     pullToRefresh = true,
     quickAction,
     sizeReadyMiliseconds = 0,
-    searchBarHeight,
+    searchBarHeight = 45.6,
     ...rest
   } = props;
 
@@ -342,7 +342,6 @@ export function ResponsibleContainer<
         fields={fields}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
-        innerHeight={searchBarHeight}
       />
     );
   }, [showDataGrid, hasFields, searchBarHeight]);
@@ -368,7 +367,7 @@ export function ResponsibleContainer<
         <Box
           ref={dimensions[0][0]}
           className="SearchBox"
-          sx={{ height: hasFields ? 40 : 0 }}
+          sx={{ height: hasFields ? searchBarHeight : 0 }}
         >
           {searchBar}
         </Box>

package/src/SearchBar.tsx

@@ -19,12 +19,6 @@ export interface SearchBarProps {
    */
   fields: React.ReactElement[];
 
-  /**
-   * Inner height
-   * @default 40
-   */
-  innerHeight?: number;
-
   /**
    * On submit callback
    */
@@ -83,7 +77,7 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
   // Destruct
-  const { className, fields, innerHeight = 45.6, onSubmit } = props;
+  const { className, fields, onSubmit } = props;
 
   // Labels
   const labels = Labels.CommonPage;
@@ -311,7 +305,6 @@ export function SearchBar(props: SearchBarProps) {
           alignItems="center"
           direction="row"
           spacing={1}
-          height={innerHeight < 1 ? undefined : innerHeight}
           sx={{
             "& > :not(style)": {
               flexBasis: "auto",
@@ -346,12 +339,12 @@ export function SearchBar(props: SearchBarProps) {
           </Button>
         </Stack>
       </form>
-      {index != null && index < fields.length && (
+      {index != null && index < fields.length && open && (
         <Drawer
           anchor="right"
           sx={{ minWidth: "250px" }}
           ModalProps={{
-            keepMounted: true // Better open performance on mobile.
+            keepMounted: false
           }}
           open={open}
           onClose={() => updateOpen(false)}