@etsoo/materialui 1.4.35 → 1.4.36

package/lib/MUGlobal.js

@@ -158,7 +158,10 @@ export class MUGlobal {
                 const mediaRaw = theme.breakpoints.up(key);
                 const mediaQuery = mediaRaw.substring(mediaRaw.indexOf("("));
                 if (window.matchMedia(mediaQuery).matches) {
-                    return parseInt(theme.spacing(value), 10);
+                    let space = parseInt(theme.spacing(value), 10);
+                    if (isNaN(space))
+                        space = 8 * value;
+                    return space;
                 }
             }
         }

package/lib/SearchBar.d.ts

@@ -7,6 +7,10 @@ export interface SearchBarProps {
      * Style class name
      */
     className?: string;
+    /**
+     * Item gap
+     */
+    itemGap?: number;
     /**
      * Item width
      */

package/lib/SearchBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
+import { Button, Drawer, IconButton, Stack } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils } from "@etsoo/shared";
@@ -54,12 +54,9 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit, itemWidth = 160 } = props;
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
     // Labels
     const labels = Labels.CommonPage;
-    // Spacing
-    const theme = useTheme();
-    const gap = parseFloat(theme.spacing(1));
     // Menu index
     const [index, updateIndex] = React.useState();
     // Drawer open / close
@@ -68,7 +65,7 @@ export function SearchBar(props) {
     const state = React.useRef({ hasMore: true, lastMaxWidth: 9999 }).current;
     // Watch container
     const { dimensions } = useDimensions(1, (target, rect) => {
-        // Same logic from resetButtonRef
+        // Same logic from resetButtonRefe);
         if (rect.width === state.lastMaxWidth ||
             (!state.hasMore && rect.width > state.lastMaxWidth))
             return false;
@@ -114,7 +111,7 @@ export function SearchBar(props) {
             // More button rect
             const buttonMoreRect = buttonMore.getBoundingClientRect();
             // Total
-            const totalButtonWidth = resetButtonRect.width + buttonMoreRect.width + 3 * gap;
+            const totalButtonWidth = resetButtonRect.width + buttonMoreRect.width + 3 * itemGap;
             // Cache
             container.setAttribute(cachedWidthName, totalButtonWidth.toString());
             maxWidth -= totalButtonWidth;
@@ -136,7 +133,7 @@ export function SearchBar(props) {
             }
             else {
                 const childD = child.getBoundingClientRect();
-                childWidth = childD.width + gap;
+                childWidth = childD.width + itemGap;
                 child.setAttribute(cachedWidthName, childWidth.toString());
             }
             // No gap here, child width includes the gap
@@ -224,7 +221,7 @@ export function SearchBar(props) {
     return (_jsxs(React.Fragment, { 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: 1, 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: "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.35",
+  "version": "1.4.36",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -73,6 +73,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.6"
+    "vitest": "^2.1.8"
   }
 }

package/src/MUGlobal.ts

@@ -187,7 +187,9 @@ export class MUGlobal {
         const mediaRaw = theme.breakpoints.up(key as Breakpoint);
         const mediaQuery = mediaRaw.substring(mediaRaw.indexOf("("));
         if (window.matchMedia(mediaQuery).matches) {
-          return parseInt(theme.spacing(value), 10);
+          let space = parseInt(theme.spacing(value), 10);
+          if (isNaN(space)) space = 8 * value;
+          return space;
         }
       }
     }

package/src/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Button, Drawer, IconButton, Stack, useTheme } from "@mui/material";
+import { Button, Drawer, IconButton, Stack } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils } from "@etsoo/shared";
@@ -14,6 +14,11 @@ export interface SearchBarProps {
    */
   className?: string;
 
+  /**
+   * Item gap
+   */
+  itemGap?: number;
+
   /**
    * Item width
    */
@@ -83,15 +88,11 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
   // Destruct
-  const { className, fields, onSubmit, itemWidth = 160 } = props;
+  const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
 
   // Labels
   const labels = Labels.CommonPage;
 
-  // Spacing
-  const theme = useTheme();
-  const gap = parseFloat(theme.spacing(1));
-
   // Menu index
   const [index, updateIndex] = React.useState<number>();
 
@@ -110,7 +111,7 @@ export function SearchBar(props: SearchBarProps) {
   const { dimensions } = useDimensions(
     1,
     (target, rect) => {
-      // Same logic from resetButtonRef
+      // Same logic from resetButtonRefe);
       if (
         rect.width === state.lastMaxWidth ||
         (!state.hasMore && rect.width > state.lastMaxWidth)
@@ -170,7 +171,7 @@ export function SearchBar(props: SearchBarProps) {
 
       // Total
       const totalButtonWidth =
-        resetButtonRect.width + buttonMoreRect.width + 3 * gap;
+        resetButtonRect.width + buttonMoreRect.width + 3 * itemGap;
 
       // Cache
       container.setAttribute(cachedWidthName, totalButtonWidth.toString());
@@ -196,7 +197,7 @@ export function SearchBar(props: SearchBarProps) {
         childWidth = Number.parseFloat(cachedWidth);
       } else {
         const childD = child.getBoundingClientRect();
-        childWidth = childD.width + gap;
+        childWidth = childD.width + itemGap;
         child.setAttribute(cachedWidthName, childWidth.toString());
       }
 
@@ -312,7 +313,7 @@ export function SearchBar(props: SearchBarProps) {
           justifyContent="center"
           alignItems="center"
           direction="row"
-          spacing={1}
+          spacing={`${itemGap}px`}
           width="100%"
           overflow="hidden"
           paddingTop="6px"
@@ -336,7 +337,6 @@ export function SearchBar(props: SearchBarProps) {
           {fields.map((item, index) => (
             <React.Fragment key={index}>{item}</React.Fragment>
           ))}
-
           <IconButton
             title={labels.more}
             size="medium"