@etsoo/materialui 1.1.64 → 1.1.66

package/lib/IconButtonLink.d.ts

@@ -1,13 +1,17 @@
 /// <reference types="react" />
-import { IconButtonProps } from '@mui/material';
+import { IconButtonProps } from "@mui/material";
 /**
  * IconButtonLink props
  */
-export type IconButtonLinkProps = Omit<IconButtonProps, 'href' | 'onClick'> & {
+export type IconButtonLinkProps = Omit<IconButtonProps, "href" | "onClick"> & {
     /**
      * To href
      */
     href: string;
+    /**
+     * Link state
+     */
+    state?: any;
 };
 /**
  * IconButtonLink

package/lib/IconButtonLink.js

@@ -1,6 +1,6 @@
-import { IconButton } from '@mui/material';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { IconButton } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 /**
  * IconButtonLink
  * @param props Props
@@ -8,9 +8,9 @@ import { useNavigate } from 'react-router-dom';
  */
 export function IconButtonLink(props) {
     // Destruct
-    const { href, ...rest } = props;
+    const { href, state, ...rest } = props;
     // Navigate
     const navigate = useNavigate();
     // Layout
-    return React.createElement(IconButton, { ...rest, onClick: () => navigate(href) });
+    return React.createElement(IconButton, { ...rest, onClick: () => navigate(href, { state }) });
 }

package/lib/MoreFab.d.ts

@@ -1,7 +1,7 @@
-import { CustomFabProps } from './CustomFabProps';
-import React from 'react';
-import { PaperProps, PopoverOrigin } from '@mui/material';
-import { ListItemReact } from '@etsoo/react';
+import { CustomFabProps } from "./CustomFabProps";
+import React from "react";
+import { PaperProps, PopoverOrigin } from "@mui/material";
+import { ListItemReact } from "@etsoo/react";
 /**
  * More fab props
  */

package/lib/MoreFab.js

@@ -1,12 +1,12 @@
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import React from 'react';
-import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
-import { Link } from 'react-router-dom';
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import React from "react";
+import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
+import { Link } from "react-router-dom";
 function getActions(input) {
     // Actions
     const actions = [];
     input.forEach((action) => {
-        if (typeof action === 'boolean')
+        if (typeof action === "boolean")
             return;
         actions.push(action);
     });
@@ -19,38 +19,38 @@ function getActions(input) {
 export function MoreFab(props) {
     // Destruct
     const { actions, drawArrow = true, anchorOrigin = {
-        vertical: 'top',
-        horizontal: 'right'
-    }, color = 'primary', icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps = drawArrow
+        vertical: "top",
+        horizontal: "right"
+    }, color = "primary", icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps = drawArrow
         ? {
             elevation: 0,
             sx: {
-                overflow: 'visible',
-                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                overflow: "visible",
+                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
                 mt: -0.4,
-                '& .MuiAvatar-root': {
+                "& .MuiAvatar-root": {
                     width: 32,
                     height: 32,
                     ml: -0.5,
                     mr: 1
                 },
-                '&:before': {
+                "&:before": {
                     content: '""',
-                    display: 'block',
-                    position: 'absolute',
+                    display: "block",
+                    position: "absolute",
                     top: 0,
                     right: 14,
                     width: 10,
                     height: 10,
-                    bgcolor: 'background.paper',
-                    transform: 'translateY(-50%) rotate(45deg)',
+                    bgcolor: "background.paper",
+                    transform: "translateY(-50%) rotate(45deg)",
                     zIndex: 0
                 }
             }
         }
         : undefined, size, title, transformOrigin = {
-        vertical: 'bottom',
-        horizontal: 'right'
+        vertical: "bottom",
+        horizontal: "right"
     } } = props;
     // State
     const [anchorEl, setAnchorEl] = React.useState();
@@ -75,21 +75,23 @@ export function MoreFab(props) {
     const main = iconButton ? (React.createElement(IconButton, { color: color, size: size, title: title, onClick: handleClick }, icon)) : (React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick }, icon));
     return (React.createElement(React.Fragment, null,
         main,
-        React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actionsLocal.map(({ label, icon, action }, index) => label === '-' ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === 'string'
-                ? action.includes('://')
+        React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === "string"
+                ? action.includes("://")
                     ? {
-                        component: 'a',
+                        component: "a",
                         href: action,
-                        target: '_blank'
+                        target: "_blank"
                     }
                     : { component: Link, to: action }
-                : {
-                    onClick: () => {
-                        handleClose();
-                        if (typeof action === 'function')
-                            action();
-                    }
-                }) },
-            icon != null && (React.createElement(ListItemIcon, null, icon)),
+                : Array.isArray(action)
+                    ? { component: Link, to: action[0], state: action[1] }
+                    : {
+                        onClick: () => {
+                            handleClose();
+                            if (typeof action === "function")
+                                action();
+                        }
+                    }) },
+            icon != null && React.createElement(ListItemIcon, null, icon),
             React.createElement(ListItemText, { inset: icon == null && hasIcon }, label)))))));
 }

package/lib/SearchBar.js

@@ -224,11 +224,11 @@ export function SearchBar(props) {
                     state.form = form;
             } },
             React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", sx: {
-                    overflowX: "hidden",
                     "& > :not(style)": {
-                        flexBasis: `${itemWidth}px`,
+                        flexBasis: "auto",
                         flexGrow: 0,
                         flexShrink: 0,
+                        maxWidth: `${itemWidth}px`,
                         visibility: "hidden"
                     },
                     "& > .hiddenChild": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.64",
+  "version": "1.1.66",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.81",
+    "@etsoo/appscript": "^1.3.82",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.52",
+    "@etsoo/react": "^1.6.53",
     "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.14",

package/src/IconButtonLink.tsx

@@ -1,15 +1,20 @@
-import { IconButton, IconButtonProps } from '@mui/material';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { IconButton, IconButtonProps } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
 /**
  * IconButtonLink props
  */
-export type IconButtonLinkProps = Omit<IconButtonProps, 'href' | 'onClick'> & {
-    /**
-     * To href
-     */
-    href: string;
+export type IconButtonLinkProps = Omit<IconButtonProps, "href" | "onClick"> & {
+  /**
+   * To href
+   */
+  href: string;
+
+  /**
+   * Link state
+   */
+  state?: any;
 };
 
 /**
@@ -18,12 +23,12 @@ export type IconButtonLinkProps = Omit<IconButtonProps, 'href' | 'onClick'> & {
  * @returns Component
  */
 export function IconButtonLink(props: IconButtonLinkProps) {
-    // Destruct
-    const { href, ...rest } = props;
+  // Destruct
+  const { href, state, ...rest } = props;
 
-    // Navigate
-    const navigate = useNavigate();
+  // Navigate
+  const navigate = useNavigate();
 
-    // Layout
-    return <IconButton {...rest} onClick={() => navigate(href)} />;
+  // Layout
+  return <IconButton {...rest} onClick={() => navigate(href, { state })} />;
 }

package/src/MoreFab.tsx

@@ -1,71 +1,71 @@
-import { CustomFabProps } from './CustomFabProps';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import React from 'react';
+import { CustomFabProps } from "./CustomFabProps";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import React from "react";
 import {
-    Divider,
-    Fab,
-    IconButton,
-    ListItemIcon,
-    ListItemText,
-    Menu,
-    MenuItem,
-    PaperProps,
-    PopoverOrigin
-} from '@mui/material';
-import { Link } from 'react-router-dom';
-import { ListItemReact } from '@etsoo/react';
+  Divider,
+  Fab,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  PaperProps,
+  PopoverOrigin
+} from "@mui/material";
+import { Link } from "react-router-dom";
+import { ListItemReact } from "@etsoo/react";
 
 /**
  * More fab props
  */
 export interface MoreFabProps extends CustomFabProps {
-    /**
-     * Actions
-     */
-    actions?: (ListItemReact | boolean)[];
-
-    /**
-     * Dray arrow
-     */
-    drawArrow?: boolean;
-
-    /**
-     * Main icon
-     */
-    icon?: React.ReactNode;
-
-    /**
-     * Show as icon button
-     */
-    iconButton?: boolean;
-
-    /**
-     * This is the point on the anchor where the popover's
-     * `anchorEl` will attach to
-     */
-    anchorOrigin?: PopoverOrigin;
-
-    /**
-     * Props applied to the [`Paper`](/api/paper/) element.
-     * @default {}
-     */
-    PaperProps?: Partial<PaperProps>;
-
-    /**
-     * This is the point on the popover which
-     * will attach to the anchor's origin
-     */
-    transformOrigin?: PopoverOrigin;
+  /**
+   * Actions
+   */
+  actions?: (ListItemReact | boolean)[];
+
+  /**
+   * Dray arrow
+   */
+  drawArrow?: boolean;
+
+  /**
+   * Main icon
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Show as icon button
+   */
+  iconButton?: boolean;
+
+  /**
+   * This is the point on the anchor where the popover's
+   * `anchorEl` will attach to
+   */
+  anchorOrigin?: PopoverOrigin;
+
+  /**
+   * Props applied to the [`Paper`](/api/paper/) element.
+   * @default {}
+   */
+  PaperProps?: Partial<PaperProps>;
+
+  /**
+   * This is the point on the popover which
+   * will attach to the anchor's origin
+   */
+  transformOrigin?: PopoverOrigin;
 }
 
 function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
-    // Actions
-    const actions: ListItemReact[] = [];
-    input.forEach((action) => {
-        if (typeof action === 'boolean') return;
-        actions.push(action);
-    });
-    return actions;
+  // Actions
+  const actions: ListItemReact[] = [];
+  input.forEach((action) => {
+    if (typeof action === "boolean") return;
+    actions.push(action);
+  });
+  return actions;
 }
 
 /**
@@ -73,139 +73,133 @@ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
  * @returns Component
  */
 export function MoreFab(props: MoreFabProps) {
-    // Destruct
-    const {
-        actions,
-        drawArrow = true,
-        anchorOrigin = {
-            vertical: 'top',
-            horizontal: 'right'
-        },
-        color = 'primary',
-        icon = <MoreHorizIcon />,
-        iconButton = false,
-        PaperProps = drawArrow
-            ? {
-                  elevation: 0,
-                  sx: {
-                      overflow: 'visible',
-                      filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                      mt: -0.4,
-                      '& .MuiAvatar-root': {
-                          width: 32,
-                          height: 32,
-                          ml: -0.5,
-                          mr: 1
-                      },
-                      '&:before': {
-                          content: '""',
-                          display: 'block',
-                          position: 'absolute',
-                          top: 0,
-                          right: 14,
-                          width: 10,
-                          height: 10,
-                          bgcolor: 'background.paper',
-                          transform: 'translateY(-50%) rotate(45deg)',
-                          zIndex: 0
-                      }
-                  }
-              }
-            : undefined,
-        size,
-        title,
-        transformOrigin = {
-            vertical: 'bottom',
-            horizontal: 'right'
+  // Destruct
+  const {
+    actions,
+    drawArrow = true,
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "right"
+    },
+    color = "primary",
+    icon = <MoreHorizIcon />,
+    iconButton = false,
+    PaperProps = drawArrow
+      ? {
+          elevation: 0,
+          sx: {
+            overflow: "visible",
+            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+            mt: -0.4,
+            "& .MuiAvatar-root": {
+              width: 32,
+              height: 32,
+              ml: -0.5,
+              mr: 1
+            },
+            "&:before": {
+              content: '""',
+              display: "block",
+              position: "absolute",
+              top: 0,
+              right: 14,
+              width: 10,
+              height: 10,
+              bgcolor: "background.paper",
+              transform: "translateY(-50%) rotate(45deg)",
+              zIndex: 0
+            }
+          }
         }
-    } = props;
-
-    // State
-    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>();
-
-    // Open state
-    const open = Boolean(anchorEl);
-
-    // Handle click
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    // Handle close
-    const handleClose = () => {
-        setAnchorEl(undefined);
-    };
-
-    // No actions
-    if (actions == null || actions.length == 0) return <React.Fragment />;
-
-    // Actions
-    const actionsLocal = getActions(actions);
-
-    // Has any icon
-    const hasIcon = actionsLocal.some((action) => action.icon != null);
-
-    // Main
-    const main = iconButton ? (
-        <IconButton
-            color={color}
-            size={size}
-            title={title}
-            onClick={handleClick}
-        >
-            {icon}
-        </IconButton>
-    ) : (
-        <Fab color={color} size={size} title={title} onClick={handleClick}>
-            {icon}
-        </Fab>
-    );
-
-    return (
-        <React.Fragment>
-            {main}
-            <Menu
-                disableScrollLock={true}
-                anchorEl={anchorEl}
-                anchorOrigin={anchorOrigin}
-                keepMounted
-                transformOrigin={transformOrigin}
-                open={open}
-                onClose={handleClose}
-                PaperProps={PaperProps}
+      : undefined,
+    size,
+    title,
+    transformOrigin = {
+      vertical: "bottom",
+      horizontal: "right"
+    }
+  } = props;
+
+  // State
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement>();
+
+  // Open state
+  const open = Boolean(anchorEl);
+
+  // Handle click
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  // Handle close
+  const handleClose = () => {
+    setAnchorEl(undefined);
+  };
+
+  // No actions
+  if (actions == null || actions.length == 0) return <React.Fragment />;
+
+  // Actions
+  const actionsLocal = getActions(actions);
+
+  // Has any icon
+  const hasIcon = actionsLocal.some((action) => action.icon != null);
+
+  // Main
+  const main = iconButton ? (
+    <IconButton color={color} size={size} title={title} onClick={handleClick}>
+      {icon}
+    </IconButton>
+  ) : (
+    <Fab color={color} size={size} title={title} onClick={handleClick}>
+      {icon}
+    </Fab>
+  );
+
+  return (
+    <React.Fragment>
+      {main}
+      <Menu
+        disableScrollLock={true}
+        anchorEl={anchorEl}
+        anchorOrigin={anchorOrigin}
+        keepMounted
+        transformOrigin={transformOrigin}
+        open={open}
+        onClose={handleClose}
+        PaperProps={PaperProps}
+      >
+        {actionsLocal.map(({ label, icon, action }, index) =>
+          label === "-" ? (
+            <Divider key={index} />
+          ) : (
+            <MenuItem
+              key={label}
+              {...(typeof action === "string"
+                ? action.includes("://")
+                  ? {
+                      component: "a",
+                      href: action,
+                      target: "_blank"
+                    }
+                  : { component: Link, to: action }
+                : Array.isArray(action)
+                ? { component: Link, to: action[0], state: action[1] }
+                : {
+                    onClick: () => {
+                      handleClose();
+                      if (typeof action === "function") action();
+                    }
+                  })}
             >
-                {actionsLocal.map(({ label, icon, action }, index) =>
-                    label === '-' ? (
-                        <Divider key={index} />
-                    ) : (
-                        <MenuItem
-                            key={label}
-                            {...(typeof action === 'string'
-                                ? action.includes('://')
-                                    ? {
-                                          component: 'a',
-                                          href: action,
-                                          target: '_blank'
-                                      }
-                                    : { component: Link, to: action }
-                                : {
-                                      onClick: () => {
-                                          handleClose();
-                                          if (typeof action === 'function')
-                                              action();
-                                      }
-                                  })}
-                        >
-                            {icon != null && (
-                                <ListItemIcon>{icon}</ListItemIcon>
-                            )}
-                            <ListItemText inset={icon == null && hasIcon}>
-                                {label}
-                            </ListItemText>
-                        </MenuItem>
-                    )
-                )}
-            </Menu>
-        </React.Fragment>
-    );
+              {icon != null && <ListItemIcon>{icon}</ListItemIcon>}
+              <ListItemText inset={icon == null && hasIcon}>
+                {label}
+              </ListItemText>
+            </MenuItem>
+          )
+        )}
+      </Menu>
+    </React.Fragment>
+  );
 }

package/src/SearchBar.tsx

@@ -312,11 +312,11 @@ export function SearchBar(props: SearchBarProps) {
           spacing={1}
           width="100%"
           sx={{
-            overflowX: "hidden",
             "& > :not(style)": {
-              flexBasis: `${itemWidth}px`,
+              flexBasis: "auto",
               flexGrow: 0,
               flexShrink: 0,
+              maxWidth: `${itemWidth}px`,
               visibility: "hidden"
             },
             "& > .hiddenChild": {