@superdispatch/ui 0.13.0 → 0.16.0-alpha.0

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

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "square", "classes", "children", "className", "CardContentProps"];
+import { Card, CardContent, styled } from '@mui/material';
+import { forwardRef, useState } from 'react';
+import { assignRef } from "../utils/mergeRefs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledCardContent = /*#__PURE__*/styled(CardContent)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    padding: theme.spacing(2)
+  };
+});
+var StyledCard = /*#__PURE__*/styled(Card)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&[data-full-width="true"]': {
+      borderRadius: 0,
+      borderLeftWidth: 0,
+      borderRightWidth: 0
+    },
+    ["&[data-size=\"large\"] > ".concat(StyledCardContent)]: {
+      [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(3)
+      }
+    }
+  };
+});
+export var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
+  var {
+    size,
+    square,
+    classes,
+    children,
+    className,
+    CardContentProps: cardContentProps = {}
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  var [rootNode, setRootNode] = useState(null);
+  var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
+  var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
+  return /*#__PURE__*/_jsx(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
+    ref: node => {
+      assignRef(_ref4, node);
+      setRootNode(node);
+    },
+    "data-size": size,
+    "data-full-width": isFullWidth,
+    children: /*#__PURE__*/_jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+      children: children
+    }))
+  }));
+});
+if (process.env.NODE_ENV !== "production") InfoCard.displayName = "InfoCard";

package/dist-src/v5/inline/Inline.js

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import styled, { css } from 'styled-components';
+import { parseAlignProp } from "../props/AlignProps.js";
+import { useResponsiveProp } from "../props/ResponsiveProp.js";
+import { parseSpaceProp } from "../props/SpaceProp.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function inlineRootMixin(spaceProp, noWrap, verticalAlign, horizontalAlign) {
+  var space = parseSpaceProp(spaceProp);
+  return css(["&:before{margin-top:", "px;}& > div{display:flex;margin-left:-", "px;flex-wrap:", ";align-items:", ";justify-content:", ";& > div{&:empty{display:none;}min-width:0;flex-shrink:0;max-width:100%;margin-top:", "px;margin-left:", "px;}}"], -space - 1, space, noWrap ? 'nowrap' : 'wrap', parseAlignProp(verticalAlign), parseAlignProp(horizontalAlign), space, space);
+}
+
+var InlineRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Inline__InlineRoot",
+  componentId: "SD__sc-1tgkwtt-0"
+})(_ref => {
+  var {
+    theme,
+    space,
+    noWrap,
+    verticalAlign,
+    horizontalAlign
+  } = _ref;
+  return css(["padding-top:1px;&:before{content:'';display:block;}", " ", "{", "}", "{", "}"], inlineRootMixin(space[0], noWrap[0], verticalAlign[0], horizontalAlign[0]), theme.breakpoints.up('sm'), inlineRootMixin(space[1], noWrap[1], verticalAlign[1], horizontalAlign[1]), theme.breakpoints.up('md'), inlineRootMixin(space[2], noWrap[2], verticalAlign[2], horizontalAlign[2]));
+});
+export var Inline = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    noWrap: noWrapProp = false,
+    space: spaceProp = 'xsmall',
+    verticalAlign: verticalAlignProp = 'top',
+    horizontalAlign: horizontalAlignProp = 'left'
+  } = _ref2;
+  var space = useResponsiveProp(spaceProp);
+  var noWrap = useResponsiveProp(noWrapProp);
+  var verticalAlign = useResponsiveProp(verticalAlignProp);
+  var horizontalAlign = useResponsiveProp(horizontalAlignProp);
+  return /*#__PURE__*/_jsx(InlineRoot, {
+    ref: ref,
+    space: space,
+    noWrap: noWrap,
+    verticalAlign: verticalAlign,
+    horizontalAlign: horizontalAlign,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    children: /*#__PURE__*/_jsx("div", {
+      children: flattenChildren(children).map((child, idx) => /*#__PURE__*/_jsx("div", {
+        children: child
+      }, idx))
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";

package/dist-src/v5/link/LinkOverrides.js

@@ -0,0 +1,46 @@
+import { Color } from "../theme/Color.js";
+
+function line(color) {
+  return "linear-gradient(to right, ".concat(color, " 0%, ").concat(color, " 100%)");
+}
+
+export function overrideLink(theme) {
+  theme.components.MuiLink = {
+    defaultProps: {
+      underline: 'none',
+      color: 'textPrimary'
+    },
+    styleOverrides: {
+      root: {
+        backgroundSize: '100% 1px',
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: '0 100%',
+        backgroundColor: Color.Transparent,
+        '&:focus': {
+          outline: 'none'
+        },
+        '&:hover, &:active': {
+          backgroundImage: line('currentColor')
+        }
+      },
+      // @ts-expect-error type def need in patch-package
+      colorTextPrimary: {
+        backgroundImage: line(Color.Silver500),
+        '&:focus, &:hover, &:active': {
+          color: Color.Blue300,
+          backgroundImage: line(Color.Blue300)
+        }
+      },
+      button: {
+        // Reset button styles.
+        backgroundColor: 'unset',
+        // Override browser defaults.
+        fontSize: 'inherit',
+        textAlign: 'inherit',
+        lineHeight: 'inherit',
+        userSelect: 'inherit',
+        verticalAlign: 'inherit'
+      }
+    }
+  };
+}

package/dist-src/v5/list/ListOverrides.js

@@ -0,0 +1,16 @@
+import { listItemClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overrideList(theme) {
+  theme.components.MuiListItem = {
+    styleOverrides: {
+      root: {
+        ["&.".concat(listItemClasses.selected, ", &.").concat(listItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50
+        },
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/menu/MenuOverrides.js

@@ -0,0 +1,34 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { menuItemClasses } from '@mui/material';
+import { Color } from "../../theme/Color.js";
+export function overrideMenu(theme) {
+  theme.components.MuiMenu = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
+    }
+  };
+  theme.components.MuiMenuItem = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        },
+        ["&.".concat(menuItemClasses.selected, ", &.").concat(menuItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50,
+          ["&.".concat(menuItemClasses.focusVisible)]: {
+            backgroundColor: Color.Blue50
+          }
+        }
+      })
+    }
+  };
+}

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