fannypack-v5/es/Toast/ToastManager.js

An accessible, composable, and friendly React UI Kit

import { useContext, createElement as createElement$1 } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import { useTheme } from '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import '../theme/palette.js';
import { Box } from 'reakit';
import '../Button/styles-7847dc2c.js';
import 'conditional-wrap';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Flex/styles-53e15538.js';
import '../Flex/Flex.js';
import '../Icon/styles-ca55138b.js';
import '../Icon/Icon.js';
import '../Text/styles-00cf45ec.js';
import '../Text/Text.js';
import '../Spinner/styles-d3bec5e2.js';
import '../Spinner/Spinner.js';
import '../Button/Button.js';
import 'reakit/VisuallyHidden';
import '../Button/ButtonClose.js';
import '../Button/index.js';
import '../Alert/styles-9352ddc3.js';
import '../Alert/Alert.js';
import '../Alert/index.js';
import '../Modal/styles-70c71d7d.js';
import '../Modal/ModalState.js';
import '../Modal/ModalBackdrop.js';
import '../Modal/Modal.js';
import '../Modal/ModalDisclosure.js';
import '../Modal/index.js';
import '../Overlay/styles-ac505900.js';
import '../Overlay/Overlay.js';
import '../Overlay/OverlayDisclosure.js';
import '../Overlay/OverlayState.js';
import { Overlay } from '../Overlay/index.js';
import '../Stack/styles-93fbefec.js';
import { Stack } from '../Stack/Stack.js';
import { T as Toast, a as ToastOverlay } from './styles-94fb4c89.js';
import { Toast as Toast$1 } from './Toast.js';
import { ToastContext } from './ToastContext.js';

var useProps = createHook(function (props, _ref) {
  var _theme$Toast;

  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var children = props.children,
      isStacked = props.isStacked,
      overlayProps = props.overlayProps,
      spacing = props.spacing,
      restProps = _objectWithoutPropertiesLoose(props, ["children", "isStacked", "overlayProps", "spacing"]);

  var _useTheme = useTheme(),
      theme = _useTheme.theme;

  var boxProps = Box$1.useProps(restProps);
  var overlay = Overlay.useState({
    visible: true,
    animated: true
  });

  var _React$useContext = useContext(ToastContext),
      toasts = _React$useContext.toasts;

  var placement = theme === null || theme === void 0 ? void 0 : (_theme$Toast = theme.Toast) === null || _theme$Toast === void 0 ? void 0 : _theme$Toast.placement;
  var className = useClassName({
    style: Toast,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  var overlayClassName = useClassName({
    style: ToastOverlay,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      placement: placement
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Overlay'
  });
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    children: /*#__PURE__*/createElement$1(Overlay, _extends({}, overlay, overlayProps, {
      className: overlayClassName,
      placement: placement
    }), /*#__PURE__*/createElement$1(Stack, {
      spacing: spacing
    }, toasts.map(function (toast) {
      return /*#__PURE__*/createElement$1(Toast$1, _extends({
        key: toast.key
      }, toast), toast.message);
    })))
  });
}, {
  defaultProps: {
    fade: true,
    slide: true,
    spacing: 'major-2'
  },
  themeKey: 'Toast.Manager'
});
var ToastManager = createComponent(function (props) {
  var toastManagerProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: toastManagerProps
  });
}, {
  attach: {
    useProps: useProps
  },
  themeKey: 'Toast.Manager'
});

export { ToastManager };