@superdispatch/ui 0.16.0-alpha.0 → 0.16.0-alpha.1

package/dist-src/drawer/DrawerList.js

@@ -1,11 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["className"];
-import { List } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { List, styled } from '@mui/material';
 
 function listItemMixins(theme, space) {
   return {
@@ -25,26 +19,13 @@ function listItemMixins(theme, space) {
   };
 }
 
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  root: _objectSpread(_objectSpread({
+export var DrawerList = /*#__PURE__*/styled(List)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
     [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
-  })
-}), {
-  name: 'SD-DrawerList'
-});
-export var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useStyles();
-  return /*#__PURE__*/_jsx(List, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    component: "div",
-    className: clsx(className, styles.root)
-  }));
-});
-if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
+  });
+});

package/dist-src/drawer/DrawerOverrides.js

@@ -1,14 +1,16 @@
 export function overrideDrawer(theme) {
-  theme.props.MuiDrawer = {
-    anchor: 'right'
-  };
-  theme.overrides.MuiDrawer = {
-    paper: {
-      maxWidth: '100%',
-      minWidth: '100%',
-      [theme.breakpoints.up('sm')]: {
-        minWidth: theme.spacing(54),
-        maxWidth: theme.breakpoints.values.sm
+  theme.components.MuiDrawer = {
+    defaultProps: {
+      anchor: 'right'
+    },
+    styleOverrides: {
+      paper: {
+        maxWidth: '100%',
+        minWidth: '100%',
+        [theme.breakpoints.up('sm')]: {
+          minWidth: theme.spacing(54),
+          maxWidth: theme.breakpoints.values.sm
+        }
       }
     }
   };

package/dist-src/drawer/DrawerTitle.js

@@ -1,29 +1,32 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
-import { AppBar, Grid, Toolbar, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
+import { AppBar, Grid, styled, Toolbar, Typography } from '@mui/material';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      borderTop: 'none',
-      borderLeft: 'none',
-      borderRight: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderBottomColor: Color.Transparent
-      }
+var StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderBottomColor: Color.Transparent
     }
-  },
-  appBarSticky: {},
-  toolbar: {
+  };
+});
+var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -32,56 +35,60 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
         paddingRight: theme.spacing(4)
       }
     }
-  },
-  startAction: {
+  };
+});
+var StartAction = /*#__PURE__*/styled(Grid)(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
     marginRight: theme.spacing(0.5),
     '& .MuiIconButton-edgeStart': {
       marginLeft: theme.spacing(-2)
     }
-  },
-  endAction: {
+  };
+});
+var EndAction = /*#__PURE__*/styled(Grid)(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return {
     marginLeft: theme.spacing(0.5),
     '& .MuiIconButton-edgeEnd': {
       marginRight: theme.spacing(-2)
     }
-  }
-}), {
-  name: 'SD-DrawerTitle'
+  };
 });
-export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
+export var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
   var {
     title,
     titleTypographyProps,
     subtitle,
     subtitleTypographyProps,
     startAction,
-    endAction,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+    endAction
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded);
 
-  var styles = useStyles();
   return /*#__PURE__*/_jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref6 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref6;
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("div", {
           ref: ref
-        }), /*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
+        }), /*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/_jsx(Toolbar, {
-            className: styles.toolbar,
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/_jsx(StyledToolbar, {
             children: /*#__PURE__*/_jsxs(Grid, {
               container: true,
               alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/_jsx(Grid, {
+              children: [!!startAction && /*#__PURE__*/_jsx(StartAction, {
                 item: true,
-                className: styles.startAction,
                 children: startAction
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
@@ -98,9 +105,8 @@ export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
                 }, subtitleTypographyProps), {}, {
                   children: subtitle
                 }))]
-              }), !!endAction && /*#__PURE__*/_jsx(Grid, {
+              }), !!endAction && /*#__PURE__*/_jsx(EndAction, {
                 item: true,
-                className: styles.endAction,
                 children: endAction
               })]
             })

package/dist-src/grid/GridStack.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "alignItems"];
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import { Children, forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 

package/dist-src/grid/InlineGrid.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "wrap", "justify", "alignItems"];
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import { Children, forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -22,7 +22,7 @@ export var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     wrap: wrap,
     container: true,
-    justify: justify,
+    justifyContent: justify,
     alignItems: alignItems,
     children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
       item: true,

package/dist-src/icon-button/IconButtonOverrides.js

@@ -1,44 +1,60 @@
+import { iconButtonClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideIconButton(theme) {
-  theme.overrides.MuiIconButton = {
-    root: {
-      color: Color.Dark100,
-      backgroundColor: Color.Transparent,
-      transition: theme.transitions.create(['color', 'background-color'], {
-        duration: theme.transitions.duration.short
-      }),
-      '&:hover': {
-        backgroundColor: Color.Transparent
+  theme.components.MuiIconButton = {
+    styleOverrides: {
+      root: {
+        // no selector for default color
+        ["&:not(.".concat(iconButtonClasses.colorInherit, "):not(.").concat(iconButtonClasses.colorPrimary, "):not(.").concat(iconButtonClasses.colorSecondary, "):not(.").concat(iconButtonClasses.disabled, ")")]: {
+          color: Color.Dark100
+        },
+        backgroundColor: Color.Transparent,
+        transition: theme.transitions.create(['color', 'background-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        '&:hover': {
+          backgroundColor: Color.Transparent
+        },
+        '&:active': {
+          color: Color.Dark500
+        },
+        '&:hover ': {
+          color: Color.Dark300
+        },
+        '&:focus': {
+          backgroundColor: Color.Silver400
+        },
+        ["&.".concat(iconButtonClasses.disabled)]: {
+          color: Color.Silver500
+        }
       },
-      '&:active': {
-        color: Color.Dark500
+      colorPrimary: {
+        '&:active': {
+          color: Color.Blue500
+        },
+        '&:hover ': {
+          color: Color.Blue300
+        },
+        '&:focus': {
+          backgroundColor: Color.Blue50
+        }
       },
-      '&:hover ': {
-        color: Color.Dark300
+      edgeEnd: {
+        marginRight: theme.spacing(-1)
       },
-      '&:focus': {
-        backgroundColor: Color.Silver400
+      edgeStart: {
+        marginLeft: theme.spacing(-1)
       },
-      '&$disabled': {
-        color: Color.Silver500
-      }
-    },
-    colorPrimary: {
-      '&:active': {
-        color: Color.Blue500
+      sizeSmall: {
+        padding: 3,
+        fontSize: theme.typography.pxToRem(18)
       },
-      '&:hover ': {
-        color: Color.Blue300
+      sizeMedium: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(24)
       },
-      '&:focus': {
-        backgroundColor: Color.Blue50
+      sizeLarge: {// todo declare large size
       }
-    },
-    edgeEnd: {
-      marginRight: theme.spacing(-1)
-    },
-    edgeStart: {
-      marginLeft: theme.spacing(-1)
     }
   };
 }

package/dist-src/index.js

@@ -1,4 +1,3 @@
-import * as v5 from "./v5/index.js";
 export * from "./adaptive-toolbar/AdaptiveToolbar.js";
 export * from "./avatar-button/AvatarButton.js";
 export * from "./button/Button.js";
@@ -23,8 +22,6 @@ export * from "./props/ResponsiveProp.js";
 export * from "./props/SpaceProp.js";
 export * from "./radio/RadioField.js";
 export * from "./radio/RadioGroupField.js";
-export * from "./responsive/CollapseBreakpoint.js";
-export * from "./responsive/ResponsiveContext.js";
 export * from "./snackbar/Snackbar.js";
 export * from "./snackbar/SnackbarContent.js";
 export * from "./snackbar/SnackbarStack.js";
@@ -38,5 +35,4 @@ export * from "./utils/isEmptyReactNode.js";
 export * from "./utils/mergeRefs.js";
 export * from "./utils/renderChildren.js";
 export * from "./utils/useUID.js";
-export * from "./utils/VisibilityObserver.js";
-export { v5 };
+export * from "./utils/VisibilityObserver.js";

package/dist-src/info-card/InfoCard.js

@@ -1,35 +1,36 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "square", "classes", "children", "className", "CardContentProps"],
-    _excluded2 = ["content", "sizeLarge", "fullWidth"];
-import { Card, CardContent } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+var _excluded = ["size", "square", "classes", "children", "className", "CardContentProps"];
+import { Card, CardContent, styled } from '@mui/material';
 import { forwardRef, useState } from 'react';
 import { assignRef } from "../utils/mergeRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  root: {
-    '&$fullWidth': {
+var StyledCardContent = /*#__PURE__*/styled(CardContent)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    padding: theme.spacing(2)
+  };
+});
+var StyledCard = /*#__PURE__*/styled(Card)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&[data-full-width="true"]': {
       borderRadius: 0,
       borderLeftWidth: 0,
       borderRightWidth: 0
-    }
-  },
-  fullWidth: {},
-  sizeLarge: {},
-  content: {
-    padding: theme.spacing(2),
-    '$sizeLarge > &': {
+    },
+    ["&[data-size=\"large\"] > ".concat(StyledCardContent)]: {
       [theme.breakpoints.up('sm')]: {
         padding: theme.spacing(3)
       }
     }
-  }
-}), {
-  name: 'SD-InfoCard'
+  };
 });
-export var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
+export var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
   var {
     size,
     square,
@@ -37,31 +38,20 @@ export var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
     children,
     className,
     CardContentProps: cardContentProps = {}
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useStyles = useStyles({
-    classes
-  }),
-      {
-    content: contentClassName,
-    sizeLarge: sizeLargeClassName,
-    fullWidth: fullWidthClassName
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
   var [rootNode, setRootNode] = useState(null);
   var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
   var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
-  return /*#__PURE__*/_jsx(Card, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
     ref: node => {
-      assignRef(_ref2, node);
+      assignRef(_ref4, node);
       setRootNode(node);
     },
-    classes: styles,
-    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
-    children: /*#__PURE__*/_jsx(CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
-      className: clsx(cardContentProps.className, contentClassName),
+    "data-size": size,
+    "data-full-width": isFullWidth,
+    children: /*#__PURE__*/_jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
       children: children
     }))
   }));

package/dist-src/link/LinkOverrides.js

@@ -5,39 +5,42 @@ function line(color) {
 }
 
 export function overrideLink(theme) {
-  theme.props.MuiLink = {
-    underline: 'none',
-    color: 'textPrimary'
-  };
-  theme.overrides.MuiLink = {
-    root: {
-      backgroundSize: '100% 1px',
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: '0 100%',
-      backgroundColor: Color.Transparent,
-      '&:focus': {
-        outline: 'none'
-      },
-      '&:hover, &:active': {
-        backgroundImage: line('currentColor')
+  theme.components.MuiLink = {
+    defaultProps: {
+      underline: 'none',
+      color: 'textPrimary'
+    },
+    styleOverrides: {
+      root: {
+        backgroundSize: '100% 1px',
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: '0 100%',
+        backgroundColor: Color.Transparent,
+        '&:focus': {
+          outline: 'none'
+        },
+        '&:hover, &:active': {
+          backgroundImage: line('currentColor')
+        }
       },
-      '&.MuiTypography-colorTextPrimary': {
+      // @ts-expect-error type def need in patch-package
+      colorTextPrimary: {
         backgroundImage: line(Color.Silver500),
         '&:focus, &:hover, &:active': {
           color: Color.Blue300,
           backgroundImage: line(Color.Blue300)
         }
+      },
+      button: {
+        // Reset button styles.
+        backgroundColor: 'unset',
+        // Override browser defaults.
+        fontSize: 'inherit',
+        textAlign: 'inherit',
+        lineHeight: 'inherit',
+        userSelect: 'inherit',
+        verticalAlign: 'inherit'
       }
-    },
-    button: {
-      // Reset button styles.
-      backgroundColor: undefined,
-      // Override browser defaults.
-      fontSize: 'inherit',
-      textAlign: 'inherit',
-      lineHeight: 'inherit',
-      userSelect: 'inherit',
-      verticalAlign: 'inherit'
     }
   };
 }

package/dist-src/list/ListOverrides.js

@@ -1,12 +1,15 @@
+import { listItemClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideList(theme) {
-  theme.overrides.MuiListItem = {
-    root: {
-      '&$selected, &$selected:hover': {
-        backgroundColor: Color.Blue50
-      },
-      '& .MuiTouchRipple-root': {
-        color: Color.Blue100
+  theme.components.MuiListItem = {
+    styleOverrides: {
+      root: {
+        ["&.".concat(listItemClasses.selected, ", &.").concat(listItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50
+        },
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        }
       }
     }
   };

package/dist-src/menu/MenuOverrides.js

@@ -1,20 +1,34 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { menuItemClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
 export function overrideMenu(theme) {
-  theme.props.MuiMenu = {
-    getContentAnchorEl: null,
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'left'
+  theme.components.MuiMenu = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
     }
   };
-  theme.overrides.MuiMenuItem = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    })
+  theme.components.MuiMenuItem = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        },
+        ["&.".concat(menuItemClasses.selected, ", &.").concat(menuItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50,
+          ["&.".concat(menuItemClasses.focusVisible)]: {
+            backgroundColor: Color.Blue50
+          }
+        }
+      })
+    }
   };
 }