@etsoo/materialui 1.4.83 → 1.4.85

package/lib/cjs/SearchBar.d.ts

@@ -30,6 +30,7 @@ export interface SearchBarProps {
 }
 /**
  * Search bar
+ * Make sure its container's width is fixed, not fluid, like "<Container fixed><SearchBar ../></Container>"
  * @param props Props
  * @returns Component
  */

package/lib/cjs/SearchBar.js

@@ -70,6 +70,7 @@ function checkFormEvent(event) {
 }
 /**
  * Search bar
+ * Make sure its container's width is fixed, not fluid, like "<Container fixed><SearchBar ../></Container>"
  * @param props Props
  * @returns Component
  */
@@ -154,7 +155,6 @@ function SearchBar(props) {
             }
             else {
                 const childD = child.getBoundingClientRect();
-                console.log("SearchBar", child.querySelector("input")?.name, childD.width, childD.height, child.clientWidth, child.computedStyleMap().get("width"));
                 childWidth = childD.width + itemGap;
                 child.setAttribute(cachedWidthName, childWidth.toString());
             }
@@ -240,7 +240,7 @@ 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, 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: {

package/lib/mjs/SearchBar.d.ts

@@ -30,6 +30,7 @@ export interface SearchBarProps {
 }
 /**
  * Search bar
+ * Make sure its container's width is fixed, not fluid, like "<Container fixed><SearchBar ../></Container>"
  * @param props Props
  * @returns Component
  */

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";
@@ -64,6 +64,7 @@ function checkFormEvent(event) {
 }
 /**
  * Search bar
+ * Make sure its container's width is fixed, not fluid, like "<Container fixed><SearchBar ../></Container>"
  * @param props Props
  * @returns Component
  */
@@ -148,7 +149,6 @@ export function SearchBar(props) {
             }
             else {
                 const childD = child.getBoundingClientRect();
-                console.log("SearchBar", child.querySelector("input")?.name, childD.width, childD.height, child.clientWidth, child.computedStyleMap().get("width"));
                 childWidth = childD.width + itemGap;
                 child.setAttribute(cachedWidthName, childWidth.toString());
             }
@@ -234,7 +234,7 @@ 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, 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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.83",
+  "version": "1.4.85",
   "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";
@@ -107,6 +114,7 @@ function checkFormEvent(event: React.FormEvent<HTMLFormElement>) {
 
 /**
  * Search bar
+ * Make sure its container's width is fixed, not fluid, like "<Container fixed><SearchBar ../></Container>"
  * @param props Props
  * @returns Component
  */
@@ -228,16 +236,6 @@ export function SearchBar(props: SearchBarProps) {
         childWidth = Number.parseFloat(cachedWidth);
       } else {
         const childD = child.getBoundingClientRect();
-
-        console.log(
-          "SearchBar",
-          child.querySelector("input")?.name,
-          childD.width,
-          childD.height,
-          child.clientWidth,
-          child.computedStyleMap().get("width")
-        );
-
         childWidth = childD.width + itemGap;
         child.setAttribute(cachedWidthName, childWidth.toString());
       }
@@ -339,7 +337,7 @@ export function SearchBar(props: SearchBarProps) {
 
   // Layout
   return (
-    <React.Fragment>
+    <Container fixed>
       <form
         id="SearchBarForm"
         className={className}
@@ -432,6 +430,6 @@ export function SearchBar(props: SearchBarProps) {
           </form>
         </Drawer>
       )}
-    </React.Fragment>
+    </Container>
   );
 }