@superdispatch/ui 0.15.0 → 0.16.0-alpha.0

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";

package/dist-src/v5/text-field/TextFieldOverrides.js

@@ -0,0 +1,205 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { formLabelClasses, inputBaseClasses, outlinedInputClasses, SvgIcon } from '@mui/material';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SelectIcon = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SvgIcon, _objectSpread(_objectSpread({
+  ref: ref
+}, props), {}, {
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M12 16.5L6 9h12l-6 7.5z",
+    fill: "currentColor"
+  })
+})));
+if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
+export function overrideTextField(theme) {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiTextField = {
+    defaultProps: {
+      minRows: 4,
+      maxRows: 4,
+      variant: 'outlined'
+    }
+  };
+  theme.components.MuiFormLabel = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        color: Color.Dark400,
+        ["&.".concat(formLabelClasses.error)]: {
+          color: Color.Dark400
+        },
+        ["&.".concat(formLabelClasses.focused)]: {
+          color: Color.Dark400
+        },
+        ["&.".concat(formLabelClasses.disabled)]: {
+          color: Color.Dark400
+        }
+      })
+    }
+  };
+  theme.components.MuiInputBase = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        ["&.".concat(inputBaseClasses.disabled)]: {
+          backgroundColor: Color.Silver100
+        }
+      }),
+      input: {
+        textOverflow: 'ellipsis',
+        height: theme.spacing(3),
+        [sm]: {
+          height: theme.spacing(2.5)
+        }
+      },
+      inputMultiline: {
+        resize: 'vertical'
+      }
+    }
+  };
+  theme.components.MuiInputLabel = {
+    defaultProps: {
+      shrink: true
+    },
+    styleOverrides: {
+      root: {
+        marginBottom: theme.spacing(0.5),
+        transformOrigin: 'unset'
+      },
+      formControl: {
+        top: 'unset',
+        left: 'unset',
+        position: 'unset',
+        transform: 'unset'
+      },
+      shrink: {
+        transform: 'unset',
+        transformOrigin: 'unset'
+      },
+      outlined: {
+        zIndex: 'unset',
+        transform: 'unset',
+        pointerEvents: 'unset'
+      }
+    }
+  };
+  theme.components.MuiOutlinedInput = {
+    defaultProps: {
+      notched: false
+    },
+    styleOverrides: {
+      root: {
+        ["&:hover .".concat(outlinedInputClasses.notchedOutline)]: {
+          borderColor: Color.Silver500
+        }
+      },
+      input: {
+        padding: theme.spacing(1.25, 1.5),
+        [sm]: {
+          padding: theme.spacing(0.75, 1)
+        },
+        '&.MuiInputBase-inputAdornedStart': {
+          paddingLeft: 0
+        },
+        '&.MuiInputBase-inputAdornedEnd': {
+          paddingRight: 0
+        }
+      },
+      inputMultiline: {
+        padding: 0,
+        [sm]: {
+          padding: 0
+        }
+      },
+      multiline: {
+        padding: theme.spacing(0.75, 1)
+      },
+      adornedStart: {
+        paddingLeft: theme.spacing(1)
+      },
+      adornedEnd: {
+        paddingRight: theme.spacing(1)
+      },
+      notchedOutline: {
+        top: 0,
+        borderColor: Color.Silver500,
+        '& legend': {
+          display: 'none'
+        }
+      }
+    }
+  };
+  theme.components.MuiSelect = {
+    defaultProps: {
+      IconComponent: SelectIcon
+    },
+    styleOverrides: {
+      icon: {
+        top: 'calc(50% - 0.5em)',
+        '$disabled &': {
+          color: Color.Dark100
+        },
+        fontSize: theme.spacing(3),
+        [sm]: {
+          fontSize: theme.spacing(2)
+        }
+      },
+      iconOutlined: {
+        right: theme.spacing(1.5),
+        [sm]: {
+          right: theme.spacing(1)
+        }
+      },
+      select: {
+        paddingRight: theme.spacing(4.5),
+        [sm]: {
+          right: theme.spacing(4)
+        },
+        '&:focus': {
+          backgroundColor: 'unset'
+        }
+      }
+    }
+  };
+  theme.components.MuiInputAdornment = {
+    styleOverrides: {
+      root: {
+        '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
+          fontSize: theme.spacing(3),
+          [sm]: {
+            fontSize: theme.spacing(2.5)
+          }
+        },
+        '& .MuiIconButton-root': {
+          padding: theme.spacing(1)
+        }
+      },
+      positionStart: {
+        '& .MuiIconButton-root': {
+          marginLeft: theme.spacing(-0.5),
+          [sm]: {
+            marginLeft: theme.spacing(-0.75)
+          }
+        }
+      },
+      positionEnd: {
+        '& .MuiIconButton-root': {
+          marginRight: theme.spacing(-0.5),
+          [sm]: {
+            marginRight: theme.spacing(-0.75)
+          }
+        }
+      }
+    }
+  };
+  theme.components.MuiFormHelperText = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        marginTop: theme.spacing(0.5)
+      }),
+      contained: {
+        marginLeft: 'unset',
+        marginRight: 'unset'
+      }
+    }
+  };
+}