@superdispatch/ui 0.13.0 → 0.16.0-alpha.0

package/dist-src/v5/snackbar/SnackbarContent.js

@@ -0,0 +1,105 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["action", "children", "onClose", "className", "classes", "variant"],
+    _excluded2 = ["icon", "closeButton", "variantError", "variantSuccess"];
+import { CheckCircle, Close, Warning } from '@mui/icons-material';
+import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.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 useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: {
+    color: Color.White,
+    backgroundColor: Color.Dark500,
+    '&$variantError': {
+      color: Color.White,
+      backgroundColor: Color.Red500
+    }
+  },
+  action: {
+    paddingLeft: theme.spacing(1)
+  },
+  message: {
+    alignItems: 'center',
+    [theme.breakpoints.down('xs')]: {
+      fontSize: theme.spacing(2)
+    }
+  },
+  icon: {
+    marginRight: theme.spacing(1),
+    fontSize: theme.spacing(3)
+  },
+  closeButton: {
+    color: Color.White40,
+    '&:hover, &:focus': {
+      backgroundColor: Color.White08,
+      color: Color.White40
+    }
+  },
+  variantError: {},
+  variantSuccess: {}
+}), {
+  name: 'SD-SnackbarContent'
+});
+export var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    action,
+    children,
+    onClose,
+    className,
+    classes,
+    variant = 'default'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useStyles = useStyles({
+    classes
+  }),
+      {
+    icon,
+    closeButton,
+    variantError,
+    variantSuccess
+  } = _useStyles,
+      styles = _objectWithoutProperties(_useStyles, _excluded2);
+
+  var Icon = variant === 'error' ? Warning : variant === 'success' ? CheckCircle : undefined;
+  return /*#__PURE__*/_jsx(MuiSnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    classes: styles,
+    className: clsx(className, {
+      'error': variantError,
+      'success': variantSuccess
+    }[variant]),
+    message: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        className: icon
+      }), children]
+    }),
+    action: !action && !onClose ? null : /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      spacing: 1,
+      alignItems: "center",
+      wrap: "nowrap",
+      children: [!!action && /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        children: action
+      }), onClose && /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          "aria-label": "close",
+          onClick: onClose,
+          className: closeButton,
+          children: /*#__PURE__*/_jsx(Close, {
+            fontSize: "small"
+          })
+        })
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";

package/dist-src/v5/snackbar/SnackbarOverrides.js

@@ -0,0 +1,35 @@
+export function overrideSnackbar(theme) {
+  theme.components.MuiSnackbar = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      }
+    },
+    styleOverrides: {
+      anchorOriginBottomCenter: {
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    }
+  };
+  theme.components.MuiSnackbarContent = {
+    styleOverrides: {
+      root: {
+        width: '100%',
+        borderRadius: 0,
+        minHeight: theme.spacing(7.5),
+        [theme.breakpoints.up('sm')]: {
+          width: theme.spacing(54),
+          maxWidth: theme.spacing(54),
+          borderRadius: theme.spacing(0.5)
+        }
+      },
+      message: {
+        flex: 1,
+        display: 'flex'
+      }
+    }
+  };
+}

package/dist-src/v5/snackbar/SnackbarStack.js

@@ -0,0 +1,113 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClose", "variant", "key", "id", "autoHideDuration"];
+import { useDeepEqualMemo } from '@superdispatch/hooks';
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { Snackbar } from "./Snackbar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+function warnContext() {
+  // eslint-disable-next-line no-console
+  console.log('`useSnackbarStack` is used outside of `SnackbarStackProvider`.');
+}
+
+var Context = /*#__PURE__*/createContext({
+  clearStack: warnContext,
+  addSnackbar: () => {
+    warnContext();
+    return warnContext;
+  }
+});
+export function useSnackbarStack() {
+  return useContext(Context);
+}
+export function SnackbarStackConsumer(_ref) {
+  var {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Context.Consumer, {
+    children: children
+  });
+}
+var TRANSIENT_KEY = '@@transient@@';
+export function SnackbarStackProvider(_ref2) {
+  var {
+    children
+  } = _ref2;
+  var [stack, setStack] = useState(new Map());
+  var transientKeyRef = useRef(0);
+  var getNextTransientKey = useCallback(() => TRANSIENT_KEY + String(transientKeyRef.current += 1), []);
+  var clearStack = useCallback(() => {
+    setStack(x => x.size === 0 ? x : new Map());
+  }, []);
+  var addSnackbar = useCallback(function (message) {
+    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        {
+      onClose: _onClose,
+      variant,
+      key = variant !== 'error' ? // We don't want non error snackbars without key to pop back.
+      getNextTransientKey() : typeof message === 'string' ? message : Math.random(),
+      id = String(key),
+      autoHideDuration = 5000
+    } = _ref3,
+        props = _objectWithoutProperties(_ref3, _excluded);
+
+    function removeSnackbar() {
+      setStack(prev => {
+        if (prev.has(key)) {
+          var next = new Map(prev);
+          next.delete(key);
+          return next;
+        }
+
+        return prev;
+      });
+    }
+
+    setStack(prev => {
+      var next = new Map(prev);
+
+      for (var prevKey of prev.keys()) {
+        // Ensure that we insert value to the end of the map.
+        if (Object.is(key, prevKey)) {
+          next.delete(key);
+        } // Ensure that transient snackbar will not pop back.
+
+
+        if (typeof prevKey == 'string' && prevKey.startsWith(TRANSIENT_KEY)) {
+          next.delete(prevKey);
+        }
+      }
+
+      return next.set(key, _objectSpread(_objectSpread({}, props), {}, {
+        id,
+        key,
+        variant,
+        autoHideDuration,
+        children: message,
+        onClose: reason => {
+          removeSnackbar();
+          _onClose === null || _onClose === void 0 ? void 0 : _onClose(reason);
+        }
+      }));
+    });
+    return removeSnackbar;
+  }, [getNextTransientKey]);
+  var snackbarProps = useDeepEqualMemo(prev => {
+    var next = Array.from(stack.values()).pop();
+    return next ? _objectSpread(_objectSpread({}, next), {}, {
+      open: true
+    }) : _objectSpread(_objectSpread({}, prev), {}, {
+      open: false
+    });
+  }, [stack]);
+  var api = useMemo(() => ({
+    clearStack,
+    addSnackbar
+  }), [clearStack, addSnackbar]);
+  return /*#__PURE__*/_jsxs(Context.Provider, {
+    value: api,
+    children: [children, /*#__PURE__*/_jsx(Snackbar, _objectSpread({}, snackbarProps))]
+  });
+}

package/dist-src/v5/stack/Stack.js

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import styled, { css } from 'styled-components';
+import { parseAlignProp } from "../props/AlignProps.js";
+import { parseResponsiveProp } from "../props/ResponsiveProp.js";
+import { parseSpaceProp } from "../props/SpaceProp.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function stackItemMixin(space, align) {
+  return css(["flex-direction:column;align-items:", ";display:", ";&:empty{display:none;}&:not(:empty) ~ div{padding-top:", "px;}"], parseAlignProp(align), align === 'left' ? 'block' : 'flex', parseSpaceProp(space));
+}
+
+var StackRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stack__StackRoot",
+  componentId: "SD__sc-dmzxni-0"
+})(_ref => {
+  var {
+    theme,
+    space,
+    align
+  } = _ref;
+  return css(["width:100%;& > div{", ";", "{", ";}", "{", ";}}"], stackItemMixin(space[0], align[0]), theme.breakpoints.up('sm'), stackItemMixin(space[1], align[1]), theme.breakpoints.up('md'), stackItemMixin(space[2], align[2]));
+});
+export var Stack = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    space = 'xsmall',
+    align = 'left'
+  } = _ref2;
+  return /*#__PURE__*/_jsx(StackRoot, {
+    ref: ref,
+    align: parseResponsiveProp(align),
+    space: parseResponsiveProp(space),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    children: flattenChildren(children).map((child, idx) => /*#__PURE__*/_jsx("div", {
+      children: child
+    }, idx))
+  });
+});
+if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";

package/dist-src/v5/svg-icon/SvgIconOverrides.js

@@ -0,0 +1,33 @@
+import { Color } from "../theme/Color.js";
+export function overrideSvgIcon(theme) {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiSvgIcon = {
+    styleOverrides: {
+      root: {
+        display: 'inherit',
+        fontSize: 'var(--mui-svg-icon-size, 32px)',
+        [sm]: {
+          fontSize: 'var(--mui-svg-icon-size, 24px)'
+        }
+      },
+      fontSizeInherit: {
+        fontSize: 'inherit',
+        [sm]: {
+          fontSize: 'inherit'
+        }
+      },
+      fontSizeSmall: {
+        fontSize: 'var(--mui-svg-icon-size, 24px)',
+        [sm]: {
+          fontSize: 'var(--mui-svg-icon-size, 16px)'
+        }
+      },
+      fontSizeLarge: {
+        fontSize: 'var(--mui-svg-icon-size, 32px)'
+      },
+      colorAction: {
+        color: Color.Dark100
+      }
+    }
+  };
+}

package/dist-src/v5/switch/SwitchOverrides.js

@@ -0,0 +1,88 @@
+import { switchClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overrideSwitch(theme) {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiSwitch = {
+    defaultProps: {
+      color: 'primary',
+      disableRipple: true,
+      disableFocusRipple: true
+    },
+    styleOverrides: {
+      root: {
+        width: theme.spacing(9.5),
+        height: theme.spacing(5.5),
+        padding: theme.spacing(0.75, 1.5),
+        [sm]: {
+          width: theme.spacing(8),
+          height: theme.spacing(4),
+          padding: theme.spacing(0.5, 1.5)
+        }
+      },
+      track: {
+        opacity: 1,
+        boxShadow: "0 0 0 0 ".concat(Color.Transparent),
+        transition: theme.transitions.create(['box-shadow', 'background-color'], {
+          duration: theme.transitions.duration.shortest
+        }),
+        borderRadius: theme.spacing(2),
+        [sm]: {
+          borderRadius: theme.spacing(1.625)
+        }
+      },
+      thumb: {
+        color: Color.White,
+        boxShadow: 'none',
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        [sm]: {
+          width: theme.spacing(2),
+          height: theme.spacing(2)
+        }
+      },
+      switchBase: {
+        left: theme.spacing(1),
+        padding: theme.spacing(1.25, 1),
+        [sm]: {
+          padding: theme.spacing(1)
+        },
+        ["&.".concat(switchClasses.checked)]: {
+          transform: "translateX(".concat(theme.spacing(2.5), ")"),
+          [sm]: {
+            transform: "translateX(".concat(theme.spacing(2), ")")
+          }
+        },
+        ["&.".concat(switchClasses.checked, " + .").concat(switchClasses.track)]: {
+          opacity: 1
+        },
+        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          opacity: 1
+        }
+      },
+      colorPrimary: {
+        ["&.".concat(switchClasses.checked)]: {
+          '&:hover': {
+            ["& + .".concat(switchClasses.track)]: {
+              backgroundColor: Color.Blue400
+            }
+          }
+        },
+        ["& + .".concat(switchClasses.track)]: {
+          backgroundColor: Color.Silver500
+        },
+        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          backgroundColor: Color.Silver300
+        },
+        ["&.".concat(switchClasses.checked, ".").concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          backgroundColor: Color.Blue100
+        },
+        ["&:hover + .".concat(switchClasses.track)]: {
+          backgroundColor: Color.Dark100
+        },
+        ["&.Mui-focusVisible + .".concat(switchClasses.track)]: {
+          boxShadow: "0 0 0 3px ".concat(Color.Blue100)
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/tabs/TabsOverrides.js

@@ -0,0 +1,45 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { Color } from "../theme/Color.js";
+export function overrideTabs(theme) {
+  theme.components.MuiTabs = {
+    defaultProps: {
+      variant: 'scrollable',
+      textColor: 'primary',
+      indicatorColor: 'primary'
+    },
+    styleOverrides: {
+      root: {
+        minHeight: theme.spacing(6)
+      },
+      scrollButtons: {
+        opacity: 1,
+        color: Color.Dark100,
+        width: theme.spacing(4),
+        transition: theme.transitions.create('opacity', {
+          duration: theme.transitions.duration.short
+        })
+      }
+    }
+  };
+  theme.components.MuiTab = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        minHeight: theme.spacing(6),
+        transition: theme.transitions.create(['color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [theme.breakpoints.up('sm')]: {
+          minWidth: 'unset',
+          fontSize: 'unset',
+          padding: theme.spacing(0.75, 3)
+        }
+      }),
+      textColorPrimary: {
+        color: Color.Dark500,
+        '&:hover, &:focus': {
+          color: Color.Blue300
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/tag/Tag.js

@@ -0,0 +1,118 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+import { Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import cx from 'clsx';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: {
+    maxWidth: '100%',
+    alignItems: 'center',
+    display: 'inline-flex',
+    borderRadius: theme.spacing(0.5),
+    padding: theme.spacing(0, 0.5)
+  },
+  variantSubtle: {
+    '&$colorGrey': {
+      color: Color.Dark300,
+      backgroundColor: Color.Silver200
+    },
+    '&$colorBlue': {
+      color: Color.Blue500,
+      backgroundColor: Color.Blue50
+    },
+    '&$colorGreen': {
+      color: Color.Green500,
+      backgroundColor: Color.Green50
+    },
+    '&$colorPurple': {
+      color: Color.Purple500,
+      backgroundColor: Color.Purple50
+    },
+    '&$colorRed': {
+      color: Color.Red500,
+      backgroundColor: Color.Red50
+    },
+    '&$colorTeal': {
+      color: Color.Teal500,
+      backgroundColor: Color.Teal50
+    },
+    '&$colorYellow': {
+      color: Color.Yellow500,
+      backgroundColor: Color.Yellow50
+    }
+  },
+  variantBold: {
+    color: Color.White,
+    '&$colorGrey': {
+      backgroundColor: Color.Dark300
+    },
+    '&$colorBlue': {
+      backgroundColor: Color.Blue500
+    },
+    '&$colorGreen': {
+      backgroundColor: Color.Green500
+    },
+    '&$colorPurple': {
+      backgroundColor: Color.Purple500
+    },
+    '&$colorRed': {
+      backgroundColor: Color.Red500
+    },
+    '&$colorTeal': {
+      backgroundColor: Color.Teal500
+    },
+    '&$colorYellow': {
+      backgroundColor: Color.Yellow500
+    }
+  },
+  colorGrey: {},
+  colorBlue: {},
+  colorGreen: {},
+  colorPurple: {},
+  colorRed: {},
+  colorTeal: {},
+  colorYellow: {}
+}), {
+  name: 'SD-Tag'
+});
+export var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    color,
+    variant,
+    children,
+    classes,
+    className,
+    noWrap = true,
+    fontWeight = 'bold',
+    component = 'div'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = useStyles({
+    classes
+  });
+  return /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    noWrap: noWrap,
+    component: component,
+    variant: fontWeight === 'bold' ? 'body1' : 'body2',
+    className: cx(styles.root, className, {
+      'grey': styles.colorGrey,
+      'blue': styles.colorBlue,
+      'green': styles.colorGreen,
+      'purple': styles.colorPurple,
+      'red': styles.colorRed,
+      'teal': styles.colorTeal,
+      'yellow': styles.colorYellow
+    }[color], {
+      'subtle': styles.variantSubtle,
+      'bold': styles.variantBold
+    }[variant]),
+    children: children
+  }));
+});
+if (process.env.NODE_ENV !== "production") Tag.displayName = "Tag";