@etsoo/materialui 1.1.75 → 1.1.76

package/lib/SearchBar.js

@@ -170,6 +170,7 @@ export function SearchBar(props) {
             moreItems.push(React.createElement(React.Fragment, { key: i }, fields[i]));
         }
     }
+    const hasMoreItems = moreItems.length > 0;
     // Handle main form
     const handleForm = (event) => {
         if (event.nativeEvent.cancelable && !event.nativeEvent.composed)
@@ -217,13 +218,20 @@ export function SearchBar(props) {
             delayed.clear();
         };
     }, [className]);
+    React.useEffect(() => {
+        if (!hasMoreItems || state.form == null)
+            return;
+        const stack = state.form.querySelector(".SearchBarContainer");
+        if (stack)
+            stack.style.overflow = "visbile";
+    }, [hasMoreItems]);
     // Layout
     return (React.createElement(React.Fragment, null,
         React.createElement("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                 if (form)
                     state.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: "hidden", sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: hasMoreItems ? "hidden" : undefined, sx: {
                     "& > :not(style)": {
                         flexBasis: "auto",
                         flexGrow: 0,
@@ -243,7 +251,7 @@ export function SearchBar(props) {
                 React.createElement(IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, 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: {
+        hasMoreItems && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: "250px" }, ModalProps: {
                 keepMounted: true
             }, open: open, onClose: () => updateOpen(false) },
             React.createElement("form", { onChange: moreFormChange, ref: (form) => {

package/package.json

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

package/src/SearchBar.tsx

@@ -237,6 +237,7 @@ export function SearchBar(props: SearchBarProps) {
       moreItems.push(<React.Fragment key={i}>{fields[i]}</React.Fragment>);
     }
   }
+  const hasMoreItems = moreItems.length > 0;
 
   // Handle main form
   const handleForm = (event: React.FormEvent<HTMLFormElement>) => {
@@ -293,6 +294,14 @@ export function SearchBar(props: SearchBarProps) {
     };
   }, [className]);
 
+  React.useEffect(() => {
+    if (!hasMoreItems || state.form == null) return;
+    const stack = state.form.querySelector<HTMLDivElement>(
+      ".SearchBarContainer"
+    );
+    if (stack) stack.style.overflow = "visbile";
+  }, [hasMoreItems]);
+
   // Layout
   return (
     <React.Fragment>
@@ -306,12 +315,13 @@ export function SearchBar(props: SearchBarProps) {
       >
         <Stack
           ref={dimensions[0][0]}
+          className="SearchBarContainer"
           justifyContent="center"
           alignItems="center"
           direction="row"
           spacing={1}
           width="100%"
-          overflow="hidden"
+          overflow={hasMoreItems ? "hidden" : undefined}
           sx={{
             "& > :not(style)": {
               flexBasis: "auto",
@@ -351,7 +361,7 @@ export function SearchBar(props: SearchBarProps) {
           </Button>
         </Stack>
       </form>
-      {index != null && index < fields.length && (
+      {hasMoreItems && (
         <Drawer
           anchor="right"
           sx={{ minWidth: "250px" }}