@etsoo/materialui 1.1.75 → 1.1.77

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)
@@ -223,7 +224,12 @@ export function SearchBar(props) {
                 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%", sx: {
+                    scrollbarWidth: 0,
+                    "-ms-overflow-style": "none",
+                    "&::-webkit-scrollbar": {
+                        display: "none"
+                    },
                     "& > :not(style)": {
                         flexBasis: "auto",
                         flexGrow: 0,
@@ -243,7 +249,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.77",
   "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>) => {
@@ -306,13 +307,18 @@ export function SearchBar(props: SearchBarProps) {
       >
         <Stack
           ref={dimensions[0][0]}
+          className="SearchBarContainer"
           justifyContent="center"
           alignItems="center"
           direction="row"
           spacing={1}
           width="100%"
-          overflow="hidden"
           sx={{
+            scrollbarWidth: 0,
+            "-ms-overflow-style": "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
             "& > :not(style)": {
               flexBasis: "auto",
               flexGrow: 0,
@@ -351,7 +357,7 @@ export function SearchBar(props: SearchBarProps) {
           </Button>
         </Stack>
       </form>
-      {index != null && index < fields.length && (
+      {hasMoreItems && (
         <Drawer
           anchor="right"
           sx={{ minWidth: "250px" }}