@superdispatch/ui-lab 0.14.0 → 0.16.0-alpha.1

package/dist-node/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var icons = require('@material-ui/icons');
-var lab = require('@material-ui/lab');
+var iconsMaterial = require('@mui/icons-material');
+var lab = require('@mui/lab');
 var ui = require('@superdispatch/ui');
 var react = require('react');
 var styled = require('styled-components');
@@ -13,7 +13,8 @@ var styled__default = _interopDefault(styled);
 var jsxRuntime = require('react/jsx-runtime');
 var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread2'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var core = require('@material-ui/core');
+var reactTransitionGroup = require('react-transition-group');
+var material = require('@mui/material');
 var js = require('@mdi/js');
 var Dropzone = _interopDefault(require('react-dropzone'));
 
@@ -31,9 +32,9 @@ function toMaterialSeverity(severity) {
 }
 
 var iconMapping = {
-  success: /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {}),
-  info: /*#__PURE__*/jsxRuntime.jsx(icons.Info, {}),
-  error: /*#__PURE__*/jsxRuntime.jsx(icons.Error, {})
+  success: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.CheckCircle, {}),
+  info: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Info, {}),
+  error: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {})
 };
 var Alert = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -54,6 +55,60 @@ var Alert = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Alert.displayName = "Alert";
 
+var _excluded = ["children"],
+    _excluded2 = ["in"];
+
+function enterMixin(border) {
+  return styled.css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], ui.Color.Dark500, ui.Color.White, border);
+}
+
+function enterAnimation(border) {
+  return styled.keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, enterMixin(border));
+}
+
+var CustomTransition = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    timeout: 3000,
+    classNames: props.className,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CustomTransition.displayName = "CustomTransition";
+var BannerContent = /*#__PURE__*/styled__default(CustomTransition).withConfig({
+  displayName: "Banner__BannerContent",
+  componentId: "SD__sc-9kw31n-0"
+})(_ref2 => {
+  var {
+    border = 'bottom'
+  } = _ref2;
+  return styled.css(["height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";&-enter-active{animation:", " 2s 1s forwards;}&-enter-done{", ";}&-exit{", ";}&-exit-active{min-height:0;transition:min-height 2s 1s;}"], ui.Color.White, ui.Color.White, enterAnimation(border), enterMixin(border), enterMixin(border));
+});
+var Banner = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
+  var {
+    in: inProp
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  var [isIn, setIn] = react.useState(false); // transition is not triggered on initial render with `in: true`
+
+  react.useEffect(() => {
+    setIn(!!inProp);
+  }, [inProp]);
+  return /*#__PURE__*/jsxRuntime.jsx(BannerContent, _objectSpread({
+    ref: ref,
+    in: isIn
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") Banner.displayName = "Banner";
+
 function createRuleNormalizer(rules) {
   return input => {
     if (typeof input == 'string') {
@@ -216,8 +271,8 @@ var Box = /*#__PURE__*/styled__default.div.withConfig({
   return styles;
 });
 
-var _excluded = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
-var ButtonRoot = /*#__PURE__*/styled__default(core.ButtonBase).withConfig({
+var _excluded$1 = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
+var ButtonRoot = /*#__PURE__*/styled__default(material.ButtonBase).withConfig({
   displayName: "ButtonArea__ButtonRoot",
   componentId: "SD__sc-1czum63-0"
 })(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], ui.Color.Silver500, ui.Color.Dark100, ui.Color.White, ui.Color.Silver500, ui.Color.Silver400, ui.Color.Green300, ui.Color.Green100, ui.Color.Green300, ui.Color.Green300, ui.Color.Green300, ui.Color.Green50, ui.Color.Red300, ui.Color.Red100, ui.Color.Red300, ui.Color.Red300, ui.Color.Red300, ui.Color.Red50);
@@ -230,7 +285,7 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     disabled,
     fullWidth
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot, _objectSpread(_objectSpread({
     ref: ref,
@@ -243,7 +298,7 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
       align: "center",
       space: "xxsmall",
-      children: [icon, /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+      children: [icon, /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
         variant: "h4",
         color: disabled ? 'inherit' : 'textPrimary',
         children: children
@@ -253,8 +308,8 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") ButtonArea.displayName = "ButtonArea";
 
-var _excluded$1 = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
-    _excluded2 = ["type"],
+var _excluded$2 = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
+    _excluded2$1 = ["type"],
     _excluded3 = ["href", "target"];
 
 function createButtonVariables(size, _ref) {
@@ -413,7 +468,7 @@ function useButtonProps(_ref3) {
     fullWidth = false,
     variant = 'default'
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$1);
+      props = _objectWithoutProperties(_ref3, _excluded$2);
 
   var disabled = pending || disabledProp;
   var tabIndex = disabled ? -1 : tabIndexProp;
@@ -432,7 +487,7 @@ function useButtonProps(_ref3) {
       }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx(ButtonEndIcon, {
         children: endIcon
       }), pending && /*#__PURE__*/jsxRuntime.jsx(ButtonPendingIndicator, {
-        children: /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
           size: "1em",
           color: "inherit"
         })
@@ -445,7 +500,7 @@ var Button = /*#__PURE__*/react.forwardRef((_ref4, ref) => {
   var {
     type = 'button'
   } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded2);
+      props = _objectWithoutProperties(_ref4, _excluded2$1);
 
   var buttonProps = useButtonProps(props);
   return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot$1, _objectSpread(_objectSpread({}, buttonProps), {}, {
@@ -498,7 +553,7 @@ function mergeStyles(styles) {
   return styles;
 }
 
-var _excluded$2 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+var _excluded$3 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
   primary: ui.Color.Dark500,
@@ -600,7 +655,7 @@ var TextBox = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
     noWrap = false,
     wrapOverflow = false
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$2);
+      props = _objectWithoutProperties(_ref3, _excluded$3);
 
   var $align = ui.parseResponsiveProp(align);
   var $color = ui.parseResponsiveProp(color);
@@ -681,7 +736,7 @@ var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";
 
-var _excluded$3 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+var _excluded$4 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
   if (unit === 'mb') return input * (1 << 20);
@@ -718,7 +773,7 @@ function UploadRejection(_ref2) {
     align: "center",
     children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
       width: "content",
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.Error, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {})
     }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
       children: error.code === 'file-too-large' ? maxSize == null ? 'Attachment size is too large' : "Attachment size should be less than ".concat(formatBytes(maxSize)) : error.message
     })]
@@ -731,7 +786,7 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
     disabled = false,
     children: _children = 'Upload Attachments',
     hintText = 'or Drag & Drop files',
-    startIcon = /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {
+    startIcon = /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
       children: /*#__PURE__*/jsxRuntime.jsx("path", {
         d: js.mdiUpload
       })
@@ -739,7 +794,7 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
     fallback = /*#__PURE__*/jsxRuntime.jsx(ui.CardButton, {
       ref: ref,
       disabled: true,
-      startIcon: /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+      startIcon: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
         size: "1em",
         color: "inherit"
       }),
@@ -752,7 +807,7 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
     onDropRejected: _onDropRejected,
     onDropAccepted: _onDropAccepted
   } = props,
-      dropzoneProps = _objectWithoutProperties(props, _excluded$3);
+      dropzoneProps = _objectWithoutProperties(props, _excluded$4);
 
   return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
     fallback: fallback,
@@ -800,7 +855,7 @@ var FileListItemName = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "FileListItem__FileListItemName",
   componentId: "SD__sc-hxbsiy-0"
 })(["overflow:hidden;line-height:22px;white-space:nowrap;text-overflow:ellipsis;"]);
-var FileListItemProgress = /*#__PURE__*/styled__default(core.CircularProgress).withConfig({
+var FileListItemProgress = /*#__PURE__*/styled__default(material.CircularProgress).withConfig({
   displayName: "FileListItem__FileListItemProgress",
   componentId: "SD__sc-hxbsiy-1"
 })(["font-size:24px;", "{font-size:14px;}"], _ref => {
@@ -809,12 +864,12 @@ var FileListItemProgress = /*#__PURE__*/styled__default(core.CircularProgress).w
   } = _ref;
   return theme.breakpoints.up('sm');
 });
-var PdfIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+var PdfIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
     d: js.mdiFilePdfBox
   })
 })));
-var TextBoxIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+var TextBoxIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
     d: js.mdiTextBox
   })
@@ -853,13 +908,13 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
       space: "xsmall",
       children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
-        children: status === 'error' ? /*#__PURE__*/jsxRuntime.jsx(icons.Error, {
+        children: status === 'error' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {
           color: "error",
           fontSize: "small"
         }) : fileType === 'pdf' ? /*#__PURE__*/jsxRuntime.jsx(PdfIcon, {
           color: "action",
           fontSize: "small"
-        }) : fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx(icons.Image, {
+        }) : fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Image, {
           color: "action",
           fontSize: "small"
         }) : /*#__PURE__*/jsxRuntime.jsx(TextBoxIcon, {
@@ -870,7 +925,7 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
         width: "fluid",
         children: /*#__PURE__*/jsxRuntime.jsx(FileListItemName, {
           id: uid,
-          children: !url ? name : /*#__PURE__*/jsxRuntime.jsx(core.Link, {
+          children: !url ? name : /*#__PURE__*/jsxRuntime.jsx(material.Link, {
             href: url,
             noWrap: true,
             target: "_blank",
@@ -880,33 +935,33 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
         })
       }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
           title: "Retry",
-          children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+          children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
             size: "small",
             onClick: onRetry,
-            children: /*#__PURE__*/jsxRuntime.jsx(icons.Refresh, {
+            children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Refresh, {
               fontSize: "small"
             })
           })
         })
       }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
-        children: status === 'loading' ? /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+        children: status === 'loading' ? /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
           size: "small",
           disabled: true,
           children: /*#__PURE__*/jsxRuntime.jsx(FileListItemProgress, {
             size: "1em"
           })
-        }) : /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+        }) : /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
           title: "Delete",
-          children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+          children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
             size: "small",
             onClick: onDelete,
-            children: !isHovered && status === 'success' ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {
+            children: !isHovered && status === 'success' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.CheckCircle, {
               fontSize: "small",
               htmlColor: ui.Color.Green300
-            }) : /*#__PURE__*/jsxRuntime.jsx(icons.Delete, {
+            }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Delete, {
               fontSize: "small"
             })
           })
@@ -1001,7 +1056,7 @@ var SidebarDividerRoot = /*#__PURE__*/styled__default.div.withConfig({
 var SidebarDivider = /*#__PURE__*/react.forwardRef((_, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(SidebarDividerRoot, {
     ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsx(core.Divider, {})
+    children: /*#__PURE__*/jsxRuntime.jsx(material.Divider, {})
   });
 });
 if (process.env.NODE_ENV !== "production") SidebarDivider.displayName = "SidebarDivider";
@@ -1074,7 +1129,7 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     onMouseLeave: () => {
       setHovered(false);
     },
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.ButtonBase, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.ButtonBase, {
       onClick: onClick,
       disabled: disabled,
       "aria-current": selected,
@@ -1106,7 +1161,7 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
                   })
                 }), external && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
                   width: "content",
-                  children: /*#__PURE__*/jsxRuntime.jsx(icons.OpenInNew, {
+                  children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.OpenInNew, {
                     color: "action",
                     fontSize: "small"
                   })
@@ -1136,7 +1191,7 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "SidebarMenuItem";
 
-var SidebarMenuItemActionRoot = /*#__PURE__*/styled__default(core.IconButton).withConfig({
+var SidebarMenuItemActionRoot = /*#__PURE__*/styled__default(material.IconButton).withConfig({
   displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
   componentId: "SD__sc-1n50gmv-0"
 })(["& .MuiSvgIcon-root{font-size:16px;}"]);
@@ -1146,7 +1201,7 @@ var SidebarMenuItemAction = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     placement,
     children
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
     title: title,
     placement: placement,
     children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemActionRoot, {
@@ -1186,7 +1241,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 
   if (value === true || hovered && value != null) {
     return /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemAvatarCheckbox, {
-      children: /*#__PURE__*/jsxRuntime.jsx(core.Checkbox, {
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
         color: "primary",
         checked: value,
         disabled: disabled,
@@ -1199,7 +1254,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     });
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
     ref: ref,
     "aria-hidden": true,
     children: initials
@@ -1241,6 +1296,7 @@ if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "Sideb
 
 exports.Alert = Alert;
 exports.AnchorButton = AnchorButton;
+exports.Banner = Banner;
 exports.Box = Box;
 exports.Button = Button;
 exports.ButtonArea = ButtonArea;