@superdispatch/ui 0.15.0 → 0.16.0-alpha.0

package/dist-src/v5/overflow-text/OverflowText.js

@@ -0,0 +1,84 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["title", "enterDelay"],
+    _excluded2 = ["onClick", "children", "disableUnderline", "TooltipProps"];
+import { styled, Tooltip, Typography } from '@mui/material';
+import { forwardRef, useState } 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";
+var Root = /*#__PURE__*/styled(Typography, {
+  name: 'SD-OverflowText',
+  shouldForwardProp: prop => prop !== 'truncated'
+})(_ref => {
+  var {
+    truncated,
+    theme
+  } = _ref;
+  return _objectSpread({
+    marginBottom: -1,
+    borderBottom: '1px dashed transparent',
+    transition: theme.transitions.create('border')
+  }, truncated && {
+    cursor: 'pointer',
+    borderBottomColor: Color.Silver500
+  });
+});
+var Sential = /*#__PURE__*/styled('span', {
+  name: 'SD-OverflowText',
+  slot: 'Sential'
+})({
+  width: 1,
+  height: '100%',
+  display: 'inline-block'
+});
+export var OverflowText = /*#__PURE__*/forwardRef((_ref2, rootRef) => {
+  var {
+    onClick: _onClick,
+    children,
+    disableUnderline,
+    TooltipProps: {
+      title = children,
+      enterDelay = 1000
+    } = {}
+  } = _ref2,
+      tooltipProps = _objectWithoutProperties(_ref2.TooltipProps, _excluded),
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var [isOpen, setIsOpen] = useState(false);
+  return /*#__PURE__*/_jsx(VisibilityObserver, {
+    render: _ref3 => {
+      var {
+        ref,
+        visibility
+      } = _ref3;
+      var isTooltipEnabled = !!children && visibility === 'invisible';
+      return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+        enterDelay: 1000,
+        title: title || '',
+        disableFocusListener: true,
+        open: isOpen && isTooltipEnabled,
+        onOpen: () => {
+          setIsOpen(true);
+        },
+        onClose: () => {
+          setIsOpen(false);
+        },
+        children: /*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread({}, props), {}, {
+          ref: rootRef,
+          noWrap: true,
+          truncated: !disableUnderline && visibility === 'invisible',
+          onClick: event => {
+            setIsOpen(true);
+            _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+          },
+          children: [children, !!children && /*#__PURE__*/_jsx(Sential, {
+            ref: ref
+          })]
+        }))
+      }));
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") OverflowText.displayName = "OverflowText";

package/dist-src/v5/pagination/PaginationOverrides.js

@@ -0,0 +1,35 @@
+import { paginationItemClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overridePagination(theme) {
+  theme.components.MuiPaginationItem = {
+    styleOverrides: {
+      root: {
+        color: Color.Dark400
+      },
+      page: {
+        '&:hover': {
+          backgroundColor: Color.Silver200
+        },
+        ["&.".concat(paginationItemClasses.focusVisible)]: {
+          borderRadius: 4,
+          backgroundColor: Color.White,
+          border: "1px solid ".concat(Color.Blue100)
+        },
+        ["&.".concat(paginationItemClasses.selected)]: {
+          backgroundColor: Color.Silver400,
+          ["&:hover, &.".concat(paginationItemClasses.focusVisible)]: {
+            backgroundColor: Color.Silver400
+          },
+          ["&.".concat(paginationItemClasses.disabled)]: {
+            color: Color.Dark100,
+            backgroundColor: Color.Silver400
+          }
+        },
+        ["&.".concat(paginationItemClasses.disabled)]: {
+          opacity: 1,
+          color: Color.Dark100
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/paper/PaperOverrides.js

@@ -0,0 +1,13 @@
+import { Color } from "../theme/Color.js";
+export function overridePaper(theme) {
+  theme.components.MuiPaper = {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      elevation0: {
+        border: "1px solid ".concat(Color.Silver400)
+      }
+    }
+  };
+}

package/dist-src/v5/props/AlignProps.js

@@ -0,0 +1,15 @@
+export function parseAlignProp(align) {
+  switch (align) {
+    case 'top':
+    case 'left':
+    default:
+      return 'initial';
+
+    case 'center':
+      return 'center';
+
+    case 'right':
+    case 'bottom':
+      return 'flex-end';
+  }
+}

package/dist-src/v5/props/CollapseProp.js

@@ -0,0 +1,3 @@
+export function parseCollapsedBelow(collapsedBelow) {
+  return [collapsedBelow === 'tablet' || collapsedBelow === 'desktop', collapsedBelow === 'desktop', false];
+}

package/dist-src/v5/props/ResponsiveProp.js

@@ -0,0 +1,42 @@
+import { useDeepEqualValue } from '@superdispatch/hooks';
+import { useResponsiveContext } from "../responsive/ResponsiveContext.js";
+export function parseResponsiveProp(prop) {
+  var _tablet, _desktop;
+
+  if (typeof prop != 'object') return [prop, prop, prop];
+  var [mobile, tablet, desktop] = prop;
+  (_tablet = tablet) !== null && _tablet !== void 0 ? _tablet : tablet = mobile;
+  (_desktop = desktop) !== null && _desktop !== void 0 ? _desktop : desktop = tablet;
+  return [mobile, tablet, desktop];
+}
+export function useResponsiveProp(prop) {
+  return useDeepEqualValue(parseResponsiveProp(prop));
+}
+export function useResponsiveValue(xs, sm) {
+  var md = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : sm;
+  var lg = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : md;
+  var xl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : lg;
+  var {
+    breakpoint = 'xs'
+  } = useResponsiveContext();
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  }[breakpoint];
+}
+export function useResponsivePropRecord(prop) {
+  if (typeof prop != 'object') prop = {
+    xs: prop
+  };
+  var {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  } = prop;
+  return useResponsiveValue(xs, sm !== null && sm !== void 0 ? sm : xs, md, lg, xl);
+}

package/dist-src/v5/props/SpaceProp.js

@@ -0,0 +1,28 @@
+export function parseSpaceProp(prop) {
+  switch (prop) {
+    case 'none':
+    default:
+      return 0;
+
+    case 'xxsmall':
+      return 4;
+
+    case 'xsmall':
+      return 8;
+
+    case 'small':
+      return 16;
+
+    case 'medium':
+      return 24;
+
+    case 'large':
+      return 32;
+
+    case 'xlarge':
+      return 40;
+
+    case 'xxlarge':
+      return 48;
+  }
+}

package/dist-src/v5/radio/RadioField.js

@@ -0,0 +1,36 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+import { FormControl, FormControlLabel, FormHelperText, Radio } from '@mui/material';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    label,
+    error,
+    checked,
+    onBlur,
+    onChange,
+    helperText,
+    FormControlLabelProps: formControlLabelProps
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsxs(FormControl, {
+    error: error,
+    children: [/*#__PURE__*/_jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+      label: label,
+      checked: checked,
+      onBlur: onBlur,
+      onChange: onChange,
+      control: /*#__PURE__*/_jsx(Radio, _objectSpread({
+        ref: ref,
+        color: "primary"
+      }, props))
+    })), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";

package/dist-src/v5/radio/RadioGroupField.js

@@ -0,0 +1,38 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+import { FormControl, FormHelperText, FormLabel, RadioGroup } from '@mui/material';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    name,
+    value = '',
+    onChange,
+    RadioGroupProps: radioGroupProps,
+    label,
+    FormLabelProps: formLabelProps,
+    helperText,
+    FormHelperTextProps: formHelperTextProps,
+    children
+  } = _ref,
+      formControlProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+    hiddenLabel: !label,
+    children: [!!label && /*#__PURE__*/_jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+      children: label
+    })), /*#__PURE__*/_jsx(RadioGroup, _objectSpread(_objectSpread({
+      ref: ref
+    }, radioGroupProps), {}, {
+      name: name,
+      value: value,
+      onChange: onChange,
+      children: children
+    })), !!helperText && /*#__PURE__*/_jsx(FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+      children: helperText
+    }))]
+  }));
+});
+if (process.env.NODE_ENV !== "production") RadioGroupField.displayName = "RadioGroupField";

package/dist-src/v5/radio/RadioOverrides.js

@@ -0,0 +1,49 @@
+import { radioClasses, SvgIcon } from '@mui/material';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function overrideRadio(theme) {
+  theme.components.MuiRadio = {
+    defaultProps: {
+      color: 'primary',
+      icon: /*#__PURE__*/_jsx(SvgIcon, {
+        children: /*#__PURE__*/_jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "8.5",
+          fill: Color.White,
+          stroke: "currentColor"
+        })
+      }),
+      checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+        children: [/*#__PURE__*/_jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "8.5",
+          fill: "currentColor",
+          stroke: "currentColor"
+        }), /*#__PURE__*/_jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "4",
+          fill: Color.White
+        })]
+      })
+    },
+    styleOverrides: {
+      root: {
+        color: Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
+      },
+      colorPrimary: {
+        ["&.".concat(radioClasses.disabled, ".").concat(radioClasses.checked)]: {
+          color: Color.Silver500
+        },
+        ["&:hover:not(.".concat(radioClasses.checked, ")")]: {
+          color: Color.Dark100
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/responsive/CollapseBreakpoint.js

@@ -0,0 +1,15 @@
+import { useResponsiveContext } from "./ResponsiveContext.js";
+var BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+export function useCollapseBreakpoint(collapseBreakpoint) {
+  var {
+    breakpoint = 'xs'
+  } = useResponsiveContext();
+
+  if (collapseBreakpoint == null) {
+    return false;
+  }
+
+  var breakpointIDX = BREAKPOINTS.indexOf(breakpoint);
+  var collapseBreakpointIDX = BREAKPOINTS.indexOf(collapseBreakpoint);
+  return breakpointIDX < collapseBreakpointIDX;
+}

package/dist-src/v5/responsive/ResponsiveContext.js

@@ -0,0 +1,31 @@
+import { useMediaQuery } from '@mui/material';
+import { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Context = /*#__PURE__*/createContext({});
+
+function useBreakpoint(breakpoint) {
+  return useMediaQuery(theme => theme.breakpoints.only(breakpoint));
+}
+
+export function ResponsiveContextProvider(_ref) {
+  var {
+    children,
+    defaultBreakpoint
+  } = _ref;
+  var isXS = useBreakpoint('xs');
+  var isSM = useBreakpoint('sm');
+  var isMD = useBreakpoint('md');
+  var isLG = useBreakpoint('lg');
+  var isXL = useBreakpoint('xl');
+  var breakpoint = isXS ? 'xs' : isSM ? 'sm' : isMD ? 'md' : isLG ? 'lg' : isXL ? 'xl' : defaultBreakpoint;
+  var ctx = useMemo(() => ({
+    breakpoint
+  }), [breakpoint]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: ctx,
+    children: children
+  });
+}
+export function useResponsiveContext() {
+  return useContext(Context);
+}

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

@@ -0,0 +1,53 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+import { Portal, Slide, Snackbar as MaterialSnackbar } from '@mui/material';
+import { forwardRef } from 'react';
+import { SnackbarContent } from "./SnackbarContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function SlideTransition(props) {
+  return /*#__PURE__*/_jsx(Slide, _objectSpread(_objectSpread({}, props), {}, {
+    direction: "up"
+  }));
+}
+
+export var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    open,
+    action,
+    variant,
+    onClose,
+    children,
+    ContentProps,
+    hasCloseButton = onClose != null,
+    TransitionComponent = SlideTransition
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  function handleClose(reason) {
+    if (reason !== 'clickaway') {
+      onClose === null || onClose === void 0 ? void 0 : onClose(reason === 'timeout' ? 'timeout' : 'explicit');
+    }
+  }
+
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(MaterialSnackbar, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref,
+      open: open,
+      TransitionComponent: TransitionComponent,
+      onClose: (_, reason) => {
+        handleClose(reason);
+      },
+      children: /*#__PURE__*/_jsx(SnackbarContent, _objectSpread(_objectSpread({}, ContentProps), {}, {
+        action: action,
+        variant: variant,
+        onClose: !hasCloseButton ? undefined : () => {
+          handleClose('explicit');
+        },
+        children: children
+      }))
+    }))
+  });
+});
+if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";

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'
+      }
+    }
+  };
+}