@superdispatch/ui 0.21.5-alpha.4 → 0.21.8

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

@@ -1,23 +1,22 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["items"];
-import { MoreHoriz } from '@mui/icons-material';
-import { Divider, Grid, Menu, MenuItem, styled, Toolbar, Typography } from '@mui/material';
+import { Divider, Grid, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
+import { MoreHoriz } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/styles';
 import { forwardRef, useRef, useState } from 'react';
 import { Button } from "../button/Button.js";
 import { DropdownButton } from "../dropdown-button/DropdownButton.js";
-import { useResizeObserver } from "../utils/ResizeObserver.js"; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
+import { useResizeObserver } from "../utils/ResizeObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var GridActionsItem = /*#__PURE__*/styled(Grid, {
-  name: 'SD-AdaptiveToolbar'
-})(() => {
-  return {
+var useStyles = /*#__PURE__*/makeStyles({
+  actions: {
     overflow: 'hidden'
-  };
+  }
+}, {
+  name: 'SD-AdaptiveToolbar'
 });
 export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -25,6 +24,7 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var styles = useStyles();
   var itemNodes = useRef([]);
   var optionsButtonRef = useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
@@ -66,8 +66,9 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
       container: true,
       spacing: 1,
       ref: setRootNode,
-      children: [/*#__PURE__*/_jsx(GridActionsItem, {
+      children: [/*#__PURE__*/_jsx(Grid, {
         item: true,
+        className: styles.actions,
         children: /*#__PURE__*/_jsx(Grid, {
           container: true,
           spacing: 1,
@@ -89,8 +90,6 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
               }, dropdownItem.key))
             })) : /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
               type: "button",
-              color: "primary",
-              variant: "outlined",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
               children: /*#__PURE__*/_jsx(Typography, {
@@ -107,7 +106,6 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
         component: "div",
         children: [/*#__PURE__*/_jsx(Button, {
           type: "button",
-          variant: "outlined",
           onClick: _ref2 => {
             var {
               currentTarget

package/dist-src/adaptive-vertical-toolbar/AdaptiveVerticalToolbar.js

@@ -1,6 +1,6 @@
-import { MoreHoriz } from '@mui/icons-material';
-import { Divider, Grid, Menu, MenuItem } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { Divider, Grid, Menu, MenuItem } from '@material-ui/core';
+import { MoreHoriz } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/styles';
 import { cloneElement, forwardRef, useRef, useState } from 'react';
 import { Button } from "../button/Button.js";
 import { mergeRefs } from "../utils/mergeRefs.js";

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

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

package/dist-src/autocomplete/AutocompleteOverrides.js

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

package/dist-src/avatar/AvatarOverrides.js

@@ -1,21 +1,19 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Color } from "../theme/Color.js";
 export function overrideAvatar(theme) {
-  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
+  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)
       }
+    }),
+    colorDefault: {
+      color: Color.Dark300,
+      backgroundColor: Color.Silver300
     }
   };
 }

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

@@ -1,85 +1,72 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["size", "icon", "isLoading", "disabled", "avatarRef", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"];
-import { Avatar, ButtonBase, CircularProgress, styled } from '@mui/material';
+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';
 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 Overlay = /*#__PURE__*/styled('div')(_ref => {
-  var {
-    theme
-  } = _ref;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    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)(props => {
-  var {
-    theme
-  } = props;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    top: 0,
-    left: 0,
-    position: 'absolute',
-    fontSize: theme.spacing(5),
-    [sm]: {
-      fontSize: theme.spacing(4)
-    }
-  };
-}); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
-var StyledButton = /*#__PURE__*/styled(ButtonBase, {
-  name: 'SD-AvatarButton'
-})(_ref2 => {
-  var {
-    theme
-  } = _ref2;
+var useStyles = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
   return {
-    borderRadius: '50%',
-    '&[disabled], &[aria-busy="true"]': {
-      ["& > ".concat(Overlay.toString())]: {
-        backgroundColor: Color.White50
+    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
+          }
+        }
       }
     },
-    '&:not([disabled])[aria-busy="false"]': {
-      '&:hover, &:focus': {
-        ["&[data-with-icon=\"true\"] > ".concat(Overlay.toString())]: {
-          backgroundColor: Color.Black50,
-          '& > svg': {
-            opacity: 1
-          }
-        },
-        ["&:not([data-with-icon=\"true\"]) > ".concat(Overlay.toString())]: {
-          backgroundColor: Color.Black20
+    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)
         }
       }
     },
-    '&[data-size-large="true"]': {
-      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
+    progress: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      fontSize: theme.spacing(5),
+      [sm]: {
+        fontSize: theme.spacing(4)
+      }
+    },
+    withIcon: {},
+    sizeLarge: {
+      '& > $root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
         width: theme.spacing(7),
         height: theme.spacing(7),
         [sm]: {
@@ -87,8 +74,8 @@ var StyledButton = /*#__PURE__*/styled(ButtonBase, {
           height: theme.spacing(8)
         }
       }),
-      ["& > ".concat(Overlay.toString())]: {
-        ["& > ".concat(StyledProgress.toString())]: {
+      '& > $overlay': {
+        '& > $progress': {
           fontSize: theme.spacing(7),
           [sm]: {
             fontSize: theme.spacing(8)
@@ -101,16 +88,27 @@ var StyledButton = /*#__PURE__*/styled(ButtonBase, {
           }
         }
       }
-    }
+    },
+    root: {},
+    colorDefault: {},
+    circular: {},
+    rounded: {},
+    square: {},
+    img: {},
+    fallback: {}
   };
+}, {
+  name: 'SD-AvatarButton'
 });
-export var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+export var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     size,
     icon,
     isLoading = false,
+    classes,
     disabled = false,
     avatarRef,
+    className,
     alt,
     imgProps,
     sizes,
@@ -118,18 +116,30 @@ export var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     srcSet,
     variant,
     children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useStyles = useStyles({
+    classes
+  }),
+      {
+    button: buttonClassName,
+    overlay: overlayClassName,
+    progress: progressClassName,
+    withIcon: withIconClassName,
+    sizeLarge: sizeLargeClassName
+  } = _useStyles,
+      avatarClasses = _objectWithoutProperties(_useStyles, _excluded2);
 
-  return /*#__PURE__*/_jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsxs(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    "data-with-icon": !!icon,
-    "data-size-large": size === 'large',
+    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
     children: [/*#__PURE__*/_jsx(Avatar, {
       ref: avatarRef,
+      classes: avatarClasses,
       variant: variant,
       alt: alt,
       src: src,
@@ -137,9 +147,11 @@ export var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
       srcSet: srcSet,
       imgProps: imgProps,
       children: children
-    }), /*#__PURE__*/_jsxs(Overlay, {
-      children: [icon, isLoading && /*#__PURE__*/_jsx(StyledProgress, {
+    }), /*#__PURE__*/_jsxs("div", {
+      className: overlayClassName,
+      children: [icon, isLoading && /*#__PURE__*/_jsx(CircularProgress, {
         size: "1em",
+        className: progressClassName,
         thickness: size === 'large' ? 2.5 : 1.5
       })]
     })]

package/dist-src/button/Button.js

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