@superdispatch/ui 0.14.0 → 0.16.0-alpha.1

package/dist-src/adaptive-toolbar/AdaptiveToolbar.js

@@ -1,10 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["items"];
+
+var _templateObject;
+
 import { ResizeObserver } from '@juggle/resize-observer';
-import { Grid, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
-import { MoreHoriz } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
+import { MoreHoriz } from '@mui/icons-material';
+import { Grid, Menu, MenuItem, styled, Toolbar, Typography } from '@mui/material';
 import { useEventHandler } from '@superdispatch/hooks';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import { Button } from "../button/Button.js";
@@ -29,20 +32,15 @@ function useResizeObserver(node, observer) {
   }, [node, handler]);
 }
 
-var useStyles = /*#__PURE__*/makeStyles({
-  actions: {
-    overflow: 'hidden'
-  }
-}, {
+var GridActionsItem = /*#__PURE__*/styled(Grid, {
   name: 'SD-AdaptiveToolbar'
-});
+})(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
 export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     items
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var styles = useStyles();
   var itemNodes = useRef([]);
   var optionsButtonRef = useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
@@ -85,9 +83,8 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
       spacing: 1,
       wrap: "nowrap",
       ref: setRootNode,
-      children: [/*#__PURE__*/_jsx(Grid, {
+      children: [/*#__PURE__*/_jsx(GridActionsItem, {
         item: true,
-        className: styles.actions,
         children: /*#__PURE__*/_jsx(Grid, {
           container: true,
           spacing: 1,
@@ -100,6 +97,8 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
             },
             children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
               type: "button",
+              color: "primary",
+              variant: "outlined",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
               children: /*#__PURE__*/_jsx(Typography, {
@@ -116,6 +115,7 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
         component: "div",
         children: [/*#__PURE__*/_jsx(Button, {
           type: "button",
+          variant: "outlined",
           onClick: _ref2 => {
             var {
               currentTarget

package/dist-src/app-bar/AppBarOverrides.js

@@ -1,7 +1,9 @@
 export function overrideAppBar(theme) {
-  theme.props.MuiAppBar = {
-    elevation: 0,
-    color: 'inherit',
-    position: 'static'
+  theme.components.MuiAppBar = {
+    defaultProps: {
+      elevation: 0,
+      color: 'inherit',
+      position: 'static'
+    }
   };
 }

package/dist-src/autocomplete/AutocompleteOverrides.js

@@ -1,21 +1,18 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { SvgIcon } from '@material-ui/core';
+import { autocompleteClasses, SvgIcon } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function overrideAutocomplete(theme) {
-  var sm = theme.breakpoints.up('sm'); // Remove `Object.assign` after official release of `Autocomplete`.
-
-  Object.assign(theme.props, {
-    MuiAutocomplete: {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiAutocomplete = {
+    defaultProps: {
       popupIcon: /*#__PURE__*/_jsx(SvgIcon, {
         children: /*#__PURE__*/_jsx("path", {
           d: "M12 16.5L6 9h12l-6 7.5z",
           fill: "currentColor"
         })
       })
-    }
-  });
-  Object.assign(theme.overrides, {
-    MuiAutocomplete: {
+    },
+    styleOverrides: {
       paper: _objectSpread({}, theme.typography.body2),
       tag: {
         margin: '4px',
@@ -40,27 +37,27 @@ export function overrideAutocomplete(theme) {
       inputRoot: {
         '&[class*="MuiOutlinedInput-root"]': {
           padding: '6px 8px',
-          '& $input': {
+          ["& .".concat(autocompleteClasses.input)]: {
             width: '144px',
             padding: '4px'
           },
-          '& $input:first-child': {
-            paddingLeft: undefined
+          ["& .".concat(autocompleteClasses.input, ":first-child")]: {
+            paddingLeft: 'unset'
           },
-          '& $endAdornment': {
+          ["& .".concat(autocompleteClasses.endAdornment)]: {
             right: '12px'
           },
           [sm]: {
             padding: theme.spacing(0.5, 0.75),
-            '& $input': {
+            ["& .".concat(autocompleteClasses.input)]: {
               padding: '2px'
             },
-            '& $endAdornment': {
+            ["& .".concat(autocompleteClasses.endAdornment)]: {
               right: '8px'
             }
           }
         }
       }
     }
-  });
+  };
 }

package/dist-src/avatar/AvatarOverrides.js

@@ -1,19 +1,21 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Color } from "../theme/Color.js";
 export function overrideAvatar(theme) {
-  theme.overrides.MuiAvatar = {
-    root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
-      textTransform: 'uppercase',
-      width: theme.spacing(5),
-      height: theme.spacing(5),
-      [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4)
+  theme.components.MuiAvatar = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
+        textTransform: 'uppercase',
+        width: theme.spacing(5),
+        height: theme.spacing(5),
+        [theme.breakpoints.up('sm')]: {
+          width: theme.spacing(4),
+          height: theme.spacing(4)
+        }
+      }),
+      colorDefault: {
+        color: Color.Dark300,
+        backgroundColor: Color.Silver300
       }
-    }),
-    colorDefault: {
-      color: Color.Dark300,
-      backgroundColor: Color.Silver300
     }
   };
 }

package/dist-src/avatar-button/AvatarButton.js

@@ -1,72 +1,83 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
-    _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
-import { Avatar, ButtonBase, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+var _excluded = ["size", "icon", "isLoading", "disabled", "avatarRef", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"];
+import { Avatar, ButtonBase, CircularProgress, styled } from '@mui/material';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => {
+var Overlay = /*#__PURE__*/styled('div')(_ref => {
+  var {
+    theme
+  } = _ref;
   var sm = theme.breakpoints.up('sm');
   return {
-    button: {
-      borderRadius: '50%',
-      '&[disabled], &[aria-busy="true"]': {
-        '& > $overlay': {
-          backgroundColor: Color.White50
-        }
-      },
-      '&:not([disabled])[aria-busy="false"]': {
-        '&:hover, &:focus': {
-          '&$withIcon > $overlay': {
-            backgroundColor: Color.Black50,
-            '& > svg': {
-              opacity: 1
-            }
-          },
-          '&:not($withIcon) > $overlay': {
-            backgroundColor: Color.Black20
-          }
-        }
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    backgroundColor: Color.Transparent,
+    transition: theme.transitions.create('background-color'),
+    '& > svg': {
+      opacity: 0,
+      color: Color.White,
+      transition: theme.transitions.create('opacity'),
+      fontSize: theme.spacing(3),
+      [sm]: {
+        fontSize: theme.spacing(2)
       }
-    },
-    overlay: {
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      position: 'absolute',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: '50%',
-      backgroundColor: Color.Transparent,
-      transition: theme.transitions.create('background-color'),
-      '& > svg': {
-        opacity: 0,
-        color: Color.White,
-        transition: theme.transitions.create('opacity'),
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2)
-        }
+    }
+  };
+});
+var StyledProgress = /*#__PURE__*/styled(CircularProgress)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  var sm = theme.breakpoints.up('sm');
+  return {
+    top: 0,
+    left: 0,
+    position: 'absolute',
+    fontSize: theme.spacing(5),
+    [sm]: {
+      fontSize: theme.spacing(4)
+    }
+  };
+});
+var StyledButton = /*#__PURE__*/styled(ButtonBase, {
+  name: 'SD-AvatarButton'
+})(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  var sm = theme.breakpoints.up('sm');
+  return {
+    borderRadius: '50%',
+    '&[disabled], &[aria-busy="true"]': {
+      ["& > ".concat(Overlay)]: {
+        backgroundColor: Color.White50
       }
     },
-    progress: {
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      fontSize: theme.spacing(5),
-      [sm]: {
-        fontSize: theme.spacing(4)
+    '&:not([disabled])[aria-busy="false"]': {
+      '&:hover, &:focus': {
+        ["&[data-with-icon=\"true\"] > ".concat(Overlay)]: {
+          backgroundColor: Color.Black50,
+          '& > svg': {
+            opacity: 1
+          }
+        },
+        ["&:not([data-with-icon=\"true\"]) > ".concat(Overlay)]: {
+          backgroundColor: Color.Black20
+        }
       }
     },
-    withIcon: {},
-    sizeLarge: {
-      '& > $root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
+    '&[data-size-large="true"]': {
+      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
         width: theme.spacing(7),
         height: theme.spacing(7),
         [sm]: {
@@ -74,8 +85,8 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
           height: theme.spacing(8)
         }
       }),
-      '& > $overlay': {
-        '& > $progress': {
+      ["& > ".concat(Overlay)]: {
+        ["& > ".concat(StyledProgress)]: {
           fontSize: theme.spacing(7),
           [sm]: {
             fontSize: theme.spacing(8)
@@ -88,27 +99,16 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
           }
         }
       }
-    },
-    root: {},
-    colorDefault: {},
-    circular: {},
-    rounded: {},
-    square: {},
-    img: {},
-    fallback: {}
+    }
   };
-}, {
-  name: 'SD-AvatarButton'
 });
-export var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+export var AvatarButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
     size,
     icon,
     isLoading = false,
-    classes,
     disabled = false,
     avatarRef,
-    className,
     alt,
     imgProps,
     sizes,
@@ -116,30 +116,18 @@ export var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     srcSet,
     variant,
     children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useStyles = useStyles({
-    classes
-  }),
-      {
-    button: buttonClassName,
-    overlay: overlayClassName,
-    progress: progressClassName,
-    withIcon: withIconClassName,
-    sizeLarge: sizeLargeClassName
-  } = _useStyles,
-      avatarClasses = _objectWithoutProperties(_useStyles, _excluded2);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded);
 
-  return /*#__PURE__*/_jsxs(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
+    "data-with-icon": !!icon,
+    "data-size-large": size === 'large',
     children: [/*#__PURE__*/_jsx(Avatar, {
       ref: avatarRef,
-      classes: avatarClasses,
       variant: variant,
       alt: alt,
       src: src,
@@ -147,11 +135,9 @@ export var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       srcSet: srcSet,
       imgProps: imgProps,
       children: children
-    }), /*#__PURE__*/_jsxs("div", {
-      className: overlayClassName,
-      children: [icon, isLoading && /*#__PURE__*/_jsx(CircularProgress, {
+    }), /*#__PURE__*/_jsxs(Overlay, {
+      children: [icon, isLoading && /*#__PURE__*/_jsx(StyledProgress, {
         size: "1em",
-        className: progressClassName,
         thickness: size === 'large' ? 2.5 : 1.5
       })]
     })]

package/dist-src/button/Button.js

@@ -1,36 +1,32 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
-import { Button as MaterialButton, CircularProgress } from '@material-ui/core';
+var _excluded = ["size", "children", "isActive", "isLoading", "color"];
+import { LoadingButton } from '@mui/lab';
+import { CircularProgress } from '@mui/material';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     size,
     children,
-    disabled,
     isActive,
     isLoading,
     color = 'primary'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_jsx(MaterialButton, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(LoadingButton, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     size: size,
     "data-color": color,
-    "aria-busy": isLoading,
+    loading: isLoading,
     "aria-expanded": isActive,
-    disabled: disabled || isLoading,
-    color: color === 'primary' ? color : 'default',
-    children: !isLoading ? children : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [children, /*#__PURE__*/_jsx(CircularProgress, {
-        size: "1em",
-        color: "inherit"
-      })]
-    })
+    color: color === 'primary' ? color : 'inherit',
+    loadingIndicator: /*#__PURE__*/_jsx(CircularProgress, {
+      size: "1em",
+      color: "inherit"
+    }),
+    children: children
   }));
 });
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";