@superdispatch/ui 0.13.0 → 0.16.0-alpha.0

package/dist-src/dialog/DialogOverrides.js

@@ -6,6 +6,14 @@ export function overrideDialog(theme) {
   theme.overrides.MuiDialog = {
     paper: {
       margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
+        }
+      }
     }
   };
   theme.overrides.MuiDialogTitle = {

package/dist-src/index.js

@@ -1,3 +1,4 @@
+import * as v5 from "./v5/index.js";
 export * from "./adaptive-toolbar/AdaptiveToolbar.js";
 export * from "./avatar-button/AvatarButton.js";
 export * from "./button/Button.js";
@@ -37,4 +38,5 @@ 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 * from "./utils/VisibilityObserver.js";
+export { v5 };

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

@@ -6,18 +6,8 @@ import { Card, CardContent } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
+import { assignRef } from "../utils/mergeRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-
-function assignRef(ref, value) {
-  if (ref) {
-    if (typeof ref === 'object') {
-      ref.current = value;
-    } else {
-      ref(value);
-    }
-  }
-}
-
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
     '&$fullWidth': {

package/dist-src/utils/mergeRefs.js

@@ -5,13 +5,16 @@ export function mergeRefs() {
 
   return node => {
     refs.forEach(ref => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
+      assignRef(ref, node);
     });
   };
+}
+export function assignRef(ref, value) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      ref.current = value;
+    }
+  }
 }

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

@@ -0,0 +1,146 @@
+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 { 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";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+function useResizeObserver(node, observer) {
+  var handler = useEventHandler(observer);
+  useLayoutEffect(() => {
+    if (!node) {
+      return;
+    }
+
+    var resizeObserver = new ResizeObserver(() => {
+      handler(node);
+    });
+    resizeObserver.observe(node);
+    handler(node);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [node, handler]);
+}
+
+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 itemNodes = useRef([]);
+  var optionsButtonRef = useRef(null);
+  var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
+  var menuItems = firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
+  var [menuButtonNode, setMenuButtonRef] = useState();
+  var [rootNode, setRootNode] = useState(null);
+  useResizeObserver(rootNode, node => {
+    var _optionsButtonRef$cur;
+
+    var rootRect = node.getBoundingClientRect();
+    var rootWidth = rootRect.left + rootRect.width;
+    var optionsButtonRect = (_optionsButtonRef$cur = optionsButtonRef.current) === null || _optionsButtonRef$cur === void 0 ? void 0 : _optionsButtonRef$cur.getBoundingClientRect();
+    var optionsButtonWidth = (optionsButtonRect === null || optionsButtonRect === void 0 ? void 0 : optionsButtonRect.width) || 0;
+    var maxRightPosition = rootWidth - optionsButtonWidth;
+    var mountedNodes = itemNodes.current.filter(x => x != null);
+    var hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
+      itemNode.removeAttribute('hidden');
+      var itemRect = itemNode.getBoundingClientRect();
+      var itemRightPosition = itemRect.left + itemRect.width; // Ignore options button width when checking last item.
+
+      if (idx === mountedNodes.length - 1) {
+        return itemRightPosition > rootWidth;
+      }
+
+      return itemRightPosition > maxRightPosition;
+    });
+
+    if (hiddenIdx !== -1) {
+      mountedNodes.slice(hiddenIdx).forEach(itemNode => {
+        itemNode.setAttribute('hidden', 'true');
+      });
+    }
+
+    setFirstHiddenIdx(hiddenIdx);
+  });
+  return /*#__PURE__*/_jsx(Toolbar, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      spacing: 1,
+      wrap: "nowrap",
+      ref: setRootNode,
+      children: [/*#__PURE__*/_jsx(GridActionsItem, {
+        item: true,
+        children: /*#__PURE__*/_jsx(Grid, {
+          container: true,
+          spacing: 1,
+          wrap: "nowrap",
+          component: "div",
+          children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            ref: node => {
+              itemNodes.current[idx] = node;
+            },
+            children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+              type: "button",
+              color: "primary",
+              variant: "outlined",
+              onClick: item.onClick
+            }, item.ButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(Typography, {
+                noWrap: true,
+                variant: "inherit",
+                children: item.label
+              })
+            }))
+          }, item.key))
+        })
+      }), menuItems.length > 0 && /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        ref: optionsButtonRef,
+        component: "div",
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: "button",
+          variant: "outlined",
+          onClick: _ref2 => {
+            var {
+              currentTarget
+            } = _ref2;
+            setMenuButtonRef(currentTarget);
+          },
+          children: /*#__PURE__*/_jsx(MoreHoriz, {})
+        }), /*#__PURE__*/_jsx(Menu, {
+          open: !!menuButtonNode,
+          anchorEl: menuButtonNode,
+          onClose: () => {
+            setMenuButtonRef(undefined);
+          },
+          children: menuItems.map(item => /*#__PURE__*/_jsx(MenuItem, {
+            onClick: event => {
+              var _item$onClick;
+
+              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+              setMenuButtonRef(undefined);
+            },
+            children: item.label
+          }, item.key))
+        })]
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") AdaptiveToolbar.displayName = "AdaptiveToolbar";

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

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

package/dist-src/v5/autocomplete/AutocompleteOverrides.js

@@ -0,0 +1,63 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { autocompleteClasses, SvgIcon } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function overrideAutocomplete(theme) {
+  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"
+        })
+      })
+    },
+    styleOverrides: {
+      paper: _objectSpread({}, theme.typography.body2),
+      tag: {
+        margin: '4px',
+        [sm]: {
+          margin: '2px'
+        }
+      },
+      endAdornment: {
+        top: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center'
+      },
+      popupIndicator: {
+        '& .MuiSvgIcon-root': {
+          fontSize: '24px',
+          [sm]: {
+            fontSize: '16px'
+          }
+        }
+      },
+      inputRoot: {
+        '&[class*="MuiOutlinedInput-root"]': {
+          padding: '6px 8px',
+          ["& .".concat(autocompleteClasses.input)]: {
+            width: '144px',
+            padding: '4px'
+          },
+          ["& .".concat(autocompleteClasses.input, ":first-child")]: {
+            paddingLeft: 'unset'
+          },
+          ["& .".concat(autocompleteClasses.endAdornment)]: {
+            right: '12px'
+          },
+          [sm]: {
+            padding: theme.spacing(0.5, 0.75),
+            ["& .".concat(autocompleteClasses.input)]: {
+              padding: '2px'
+            },
+            ["& .".concat(autocompleteClasses.endAdornment)]: {
+              right: '8px'
+            }
+          }
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/avatar/AvatarOverrides.js

@@ -0,0 +1,21 @@
+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
+      }
+    }
+  };
+}

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

@@ -0,0 +1,146 @@
+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';
+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)(_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
+      }
+    },
+    '&: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
+        }
+      }
+    },
+    '&[data-size-large="true"]': {
+      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        [sm]: {
+          width: theme.spacing(8),
+          height: theme.spacing(8)
+        }
+      }),
+      ["& > ".concat(Overlay)]: {
+        ["& > ".concat(StyledProgress)]: {
+          fontSize: theme.spacing(7),
+          [sm]: {
+            fontSize: theme.spacing(8)
+          }
+        },
+        '& > svg': {
+          fontSize: theme.spacing(4),
+          [sm]: {
+            fontSize: theme.spacing(3)
+          }
+        }
+      }
+    }
+  };
+});
+export var AvatarButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  var {
+    size,
+    icon,
+    isLoading = false,
+    disabled = false,
+    avatarRef,
+    alt,
+    imgProps,
+    sizes,
+    src,
+    srcSet,
+    variant,
+    children
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded);
+
+  return /*#__PURE__*/_jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    "aria-busy": isLoading,
+    "aria-disabled": disabled,
+    disabled: disabled || isLoading,
+    "data-with-icon": !!icon,
+    "data-size-large": size === 'large',
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      ref: avatarRef,
+      variant: variant,
+      alt: alt,
+      src: src,
+      sizes: sizes,
+      srcSet: srcSet,
+      imgProps: imgProps,
+      children: children
+    }), /*#__PURE__*/_jsxs(Overlay, {
+      children: [icon, isLoading && /*#__PURE__*/_jsx(StyledProgress, {
+        size: "1em",
+        thickness: size === 'large' ? 2.5 : 1.5
+      })]
+    })]
+  }));
+});
+if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";

package/dist-src/v5/button/Button.js

@@ -0,0 +1,32 @@
+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';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    size,
+    children,
+    isActive,
+    isLoading,
+    color = 'primary'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(LoadingButton, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    size: size,
+    "data-color": color,
+    loading: isLoading,
+    "aria-expanded": isActive,
+    color: color === 'primary' ? color : 'inherit',
+    loadingIndicator: /*#__PURE__*/_jsx(CircularProgress, {
+      size: "1em",
+      color: "inherit"
+    }),
+    children: children
+  }));
+});
+if (process.env.NODE_ENV !== "production") Button.displayName = "Button";