@etsoo/materialui 1.4.84 → 1.4.86

package/lib/cjs/SearchBar.js

@@ -240,10 +240,10 @@ function SearchBar(props) {
         };
     }, [className]);
     // Layout
-    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) => {
+    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) => {
                     if (form)
                         state.form = form;
-                }, 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: "100%", overflow: "hidden", paddingTop: "6px", sx: {
+                }, 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: {
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,

package/lib/mjs/SearchBar.js

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

package/package.json

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

package/src/SearchBar.tsx

@@ -1,4 +1,11 @@
-import { Button, Drawer, IconButton, Stack, Toolbar } from "@mui/material";
+import {
+  Button,
+  Container,
+  Drawer,
+  IconButton,
+  Stack,
+  Toolbar
+} from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils, NumberUtils } from "@etsoo/shared";
@@ -330,7 +337,7 @@ export function SearchBar(props: SearchBarProps) {
 
   // Layout
   return (
-    <React.Fragment>
+    <Container fixed ref={dimensions[0][0]}>
       <form
         id="SearchBarForm"
         className={className}
@@ -340,7 +347,6 @@ export function SearchBar(props: SearchBarProps) {
         }}
       >
         <Stack
-          ref={dimensions[0][0]}
           className="SearchBarContainer"
           justifyContent="center"
           alignItems="center"
@@ -423,6 +429,6 @@ export function SearchBar(props: SearchBarProps) {
           </form>
         </Drawer>
       )}
-    </React.Fragment>
+    </Container>
   );
 }