@bolio-ui/core 1.0.0

package/esm/use-keyboard/use-keyboard.js

@@ -0,0 +1,79 @@
+import { KeyMod } from './codes';
+import { useEffect } from 'react';
+import { getActiveModMap, getCtrlKeysByPlatform } from './helper';
+
+var useKeyboard = function useKeyboard(handler, keyBindings) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var bindings = Array.isArray(keyBindings) ? keyBindings : [keyBindings];
+  var _options$disableGloba = options.disableGlobalEvent,
+      disableGlobalEvent = _options$disableGloba === void 0 ? false : _options$disableGloba,
+      _options$capture = options.capture,
+      capture = _options$capture === void 0 ? false : _options$capture,
+      _options$stopPropagat = options.stopPropagation,
+      stopPropagation = _options$stopPropagat === void 0 ? false : _options$stopPropagat,
+      _options$preventDefau = options.preventDefault,
+      preventDefault = _options$preventDefau === void 0 ? true : _options$preventDefau,
+      _options$event = options.event,
+      event = _options$event === void 0 ? 'keydown' : _options$event;
+  var activeModMap = getActiveModMap(bindings);
+  var keyCode = bindings.filter(function (item) {
+    return !KeyMod[item];
+  });
+
+  var _getCtrlKeysByPlatfor = getCtrlKeysByPlatform(),
+      CtrlCmd = _getCtrlKeysByPlatfor.CtrlCmd,
+      WinCtrl = _getCtrlKeysByPlatfor.WinCtrl;
+
+  var eventHandler = function eventHandler(event) {
+    if (activeModMap.Shift && !event.shiftKey) return;
+    if (activeModMap.Alt && !event.altKey) return;
+    if (activeModMap.CtrlCmd && !event[CtrlCmd]) return;
+    if (activeModMap.WinCtrl && !event[WinCtrl]) return;
+    var hitOne = keyCode.find(function (k) {
+      return k === event.keyCode;
+    });
+    if (keyCode && !hitOne) return;
+
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    if (preventDefault) {
+      event.preventDefault();
+    }
+
+    handler && handler(event);
+  };
+
+  useEffect(function () {
+    if (!disableGlobalEvent) {
+      document.addEventListener(event, eventHandler);
+    }
+
+    return function () {
+      document.removeEventListener(event, eventHandler);
+    };
+  }, [disableGlobalEvent]);
+
+  var elementBindingHandler = function elementBindingHandler(elementEventType) {
+    var isCapture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (elementEventType !== event) return function () {};
+    if (isCapture !== capture) return function () {};
+    return function (e) {
+      return eventHandler(e);
+    };
+  };
+
+  return {
+    bindings: {
+      onKeyDown: elementBindingHandler('keydown'),
+      onKeyDownCapture: elementBindingHandler('keydown', true),
+      onKeyPress: elementBindingHandler('keypress'),
+      onKeyPressCapture: elementBindingHandler('keypress', true),
+      onKeyUp: elementBindingHandler('keyup'),
+      onKeyUpCapture: elementBindingHandler('keyup', true)
+    }
+  };
+};
+
+export default useKeyboard;

package/esm/use-media-query/index.js

@@ -0,0 +1,2 @@
+import useMediaQuery from './use-media-query';
+export default useMediaQuery;

package/esm/use-media-query/use-media-query.js

@@ -0,0 +1,90 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { tuple } from '../utils/prop-types';
+var breakpoints = tuple('xs', 'sm', 'md', 'lg', 'xl', 'mobile');
+var matchType = tuple('up', 'down', 'default');
+var defaultResponsiveOptions = {
+  match: 'default'
+};
+
+var makeQueries = function makeQueries(bp, up, down) {
+  var queryString = function queryString(item) {
+    var upQuery = "(min-width: ".concat(item.min, ")");
+    var downQuery = "(max-width: ".concat(item.max, ")");
+    return up ? upQuery : down ? downQuery : "".concat(upQuery, " and ").concat(downQuery);
+  };
+
+  var xs = queryString(bp.xs);
+  return {
+    xs: xs,
+    mobile: xs,
+    sm: queryString(bp.sm),
+    md: queryString(bp.md),
+    lg: queryString(bp.lg),
+    xl: queryString(bp.xl)
+  };
+};
+
+var useMediaQuery = function useMediaQuery(breakpoint) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultResponsiveOptions;
+  var _options$match = options.match,
+      matchType = _options$match === void 0 ? 'default' : _options$match,
+      _options$ssrMatchMedi = options.ssrMatchMedia,
+      ssrMatchMedia = _options$ssrMatchMedi === void 0 ? null : _options$ssrMatchMedi;
+  var supportMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  var theme = useTheme();
+  var mediaQueries = useMemo(function () {
+    var up = matchType === 'up';
+    var down = matchType === 'down';
+    return makeQueries(theme.breakpoints, up, down);
+  }, [matchType, theme.breakpoints]);
+  var query = useMemo(function () {
+    return mediaQueries[breakpoint];
+  }, [mediaQueries, breakpoint]);
+
+  var matchQuery = function matchQuery(q) {
+    return window.matchMedia(q);
+  };
+  /**
+   * Do nothing in the server-side rendering.
+   * If server match query fucntion is simulated, return user-defined value first.
+   */
+
+
+  var _useState = useState(function () {
+    if (supportMedia) return matchQuery(query).matches;
+
+    if (ssrMatchMedia && typeof ssrMatchMedia === 'function') {
+      return ssrMatchMedia(query).matches;
+    }
+
+    return false;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  useEffect(function () {
+    if (!supportMedia) return;
+    var queryList = matchQuery(query);
+
+    var update = function update() {
+      return setState(matchQuery(query).matches);
+    };
+
+    update();
+    /**
+     * addListener is deprecated. EventTarget.addEventListener is recommended.
+     * But in some old browsers, MediaQueryList does not inherit from EventTarget.
+     */
+
+    queryList.addListener(update);
+    return function () {
+      queryList.removeListener(update);
+    };
+  }, [query, supportMedia]);
+  return state;
+};
+
+export default useMediaQuery;

package/esm/use-modal/index.js

@@ -0,0 +1,2 @@
+import useModal from './use-modal';
+export default useModal;

package/esm/use-modal/use-modal.js

@@ -0,0 +1,26 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import useCurrentState from '../utils/use-current-state';
+
+var useModal = function useModal() {
+  var initialVisible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  var _useCurrentState = useCurrentState(initialVisible),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      visible = _useCurrentState2[0],
+      setVisible = _useCurrentState2[1],
+      currentRef = _useCurrentState2[2];
+
+  return {
+    visible: visible,
+    setVisible: setVisible,
+    currentRef: currentRef,
+    bindings: {
+      visible: visible,
+      onClose: function onClose() {
+        return setVisible(false);
+      }
+    }
+  };
+};
+
+export default useModal;

package/esm/use-scale/index.js

@@ -0,0 +1,6 @@
+import withScale from './with-scale';
+import { useScale } from './scale-context';
+export * from './utils';
+export * from './scale-context';
+export default useScale;
+export { withScale };

package/esm/use-scale/scale-context.js

@@ -0,0 +1,37 @@
+import React from 'react';
+export var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'pl', 'pr', 'pt', 'pb', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'ml', 'mr', 'mt', 'mb', 'px', 'py', 'mx', 'my', 'font', 'unit', 'scale'];
+
+var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
+  return "".concat(scale1x);
+};
+
+var defaultContext = {
+  getScaleProps: function getScaleProps() {
+    return undefined;
+  },
+  getAllScaleProps: function getAllScaleProps() {
+    return {};
+  },
+  SCALES: {
+    pl: defaultDynamicLayoutPipe,
+    pr: defaultDynamicLayoutPipe,
+    pb: defaultDynamicLayoutPipe,
+    pt: defaultDynamicLayoutPipe,
+    px: defaultDynamicLayoutPipe,
+    py: defaultDynamicLayoutPipe,
+    mb: defaultDynamicLayoutPipe,
+    ml: defaultDynamicLayoutPipe,
+    mr: defaultDynamicLayoutPipe,
+    mt: defaultDynamicLayoutPipe,
+    mx: defaultDynamicLayoutPipe,
+    my: defaultDynamicLayoutPipe,
+    width: defaultDynamicLayoutPipe,
+    height: defaultDynamicLayoutPipe,
+    font: defaultDynamicLayoutPipe
+  },
+  unit: '16px'
+};
+export var ScaleContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useScale = function useScale() {
+  return React.useContext(ScaleContext);
+};

package/esm/use-scale/utils.js

@@ -0,0 +1,62 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import { ScalePropKeys } from './scale-context';
+export var generateGetScaleProps = function generateGetScaleProps(props) {
+  var getScaleProps = function getScaleProps(keyOrKeys) {
+    if (!Array.isArray(keyOrKeys)) return props[keyOrKeys];
+    var value = undefined;
+
+    var _iterator = _createForOfIteratorHelper(keyOrKeys),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var key = _step.value;
+        var currentValue = props[key];
+
+        if (typeof currentValue !== 'undefined') {
+          value = currentValue;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return value;
+  };
+
+  return getScaleProps;
+};
+export var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
+  var getAllScaleProps = function getAllScaleProps() {
+    var scaleProps = {};
+
+    var _iterator2 = _createForOfIteratorHelper(ScalePropKeys),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var key = _step2.value;
+        var value = props[key];
+
+        if (typeof value !== 'undefined') {
+          scaleProps[key] = value;
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    return scaleProps;
+  };
+
+  return getAllScaleProps;
+};

package/esm/use-scale/with-scale.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"],
+    _excluded2 = ["paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "marginTop", "mt", "marginRight", "mr", "marginBottom", "mb", "marginLeft", "ml", "px", "py", "mx", "my", "width", "height", "font", "w", "h", "margin", "padding", "unit", "scale"];
+import React, { forwardRef } from 'react';
+import { ScaleContext } from './scale-context';
+import useTheme from '../use-theme';
+import { isCSSNumberValue } from '../utils/collections';
+import { generateGetAllScaleProps, generateGetScaleProps } from './utils';
+
+var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
+  if (scale === 1) return scale;
+  var diff = Math.abs((scale - 1) / 2);
+  return scale > 1 ? 1 + diff : 1 - diff;
+}; // eslint-disable-next-line @typescript-eslint/ban-types
+
+
+var withScale = function withScale(Render) {
+  var ScaleFC = /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
+
+    var children = _ref.children,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    var _useTheme = useTheme(),
+        layout = _useTheme.layout;
+
+    var paddingLeft = props.paddingLeft,
+        pl = props.pl,
+        paddingRight = props.paddingRight,
+        pr = props.pr,
+        paddingTop = props.paddingTop,
+        pt = props.pt,
+        paddingBottom = props.paddingBottom,
+        pb = props.pb,
+        marginTop = props.marginTop,
+        mt = props.mt,
+        marginRight = props.marginRight,
+        mr = props.mr,
+        marginBottom = props.marginBottom,
+        mb = props.mb,
+        marginLeft = props.marginLeft,
+        ml = props.ml,
+        px = props.px,
+        py = props.py,
+        mx = props.mx,
+        my = props.my,
+        width = props.width,
+        height = props.height,
+        font = props.font,
+        w = props.w,
+        h = props.h,
+        margin = props.margin,
+        padding = props.padding,
+        _props$unit = props.unit,
+        unit = _props$unit === void 0 ? layout.unit : _props$unit,
+        _props$scale = props.scale,
+        scale = _props$scale === void 0 ? 1 : _props$scale,
+        innerProps = _objectWithoutProperties(props, _excluded2);
+
+    var makeScaleHandler = function makeScaleHandler(attrValue) {
+      return function (scale1x, defaultValue) {
+        // 0 means disable scale and the default value is 0
+        if (scale1x === 0) {
+          scale1x = 1;
+          defaultValue = defaultValue || 0;
+        }
+
+        var factor = reduceScaleCoefficient(scale) * scale1x;
+
+        if (typeof attrValue === 'undefined') {
+          if (typeof defaultValue !== 'undefined') return "".concat(defaultValue);
+          return "calc(".concat(factor, " * ").concat(unit, ")");
+        }
+
+        if (!isCSSNumberValue(attrValue)) return "".concat(attrValue);
+        var customFactor = factor * Number(attrValue);
+        return "calc(".concat(customFactor, " * ").concat(unit, ")");
+      };
+    };
+
+    var value = {
+      unit: unit,
+      SCALES: {
+        pt: makeScaleHandler((_ref2 = (_ref3 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : pt) !== null && _ref3 !== void 0 ? _ref3 : py) !== null && _ref2 !== void 0 ? _ref2 : padding),
+        pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
+        pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
+        pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
+        px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
+        py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
+        mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
+        mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
+        mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
+        ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
+        mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
+        my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
+        width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
+        height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
+        font: makeScaleHandler(font)
+      },
+      getScaleProps: generateGetScaleProps(props),
+      getAllScaleProps: generateGetAllScaleProps(props)
+    };
+    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React.createElement(Render, _extends({}, innerProps, {
+      ref: ref
+    }), children));
+  });
+  ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
+  return ScaleFC;
+};
+
+export default withScale;

package/esm/use-tabs/index.js

@@ -0,0 +1,2 @@
+import useTabs from './use-tabs';
+export default useTabs;

package/esm/use-tabs/use-tabs.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import useCurrentState from '../utils/use-current-state';
+
+var useTabs = function useTabs(initialValue) {
+  var _useCurrentState = useCurrentState(initialValue),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      state = _useCurrentState2[0],
+      setState = _useCurrentState2[1],
+      currentRef = _useCurrentState2[2];
+
+  return {
+    state: state,
+    setState: setState,
+    currentRef: currentRef,
+    bindings: {
+      value: state,
+      onChange: function onChange(val) {
+        setState(val);
+      }
+    }
+  };
+};
+
+export default useTabs;

package/esm/use-theme/index.js

@@ -0,0 +1,2 @@
+import { useTheme } from './theme-context';
+export default useTheme;

package/esm/use-theme/theme-context.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import Themes from '../themes';
+var defaultTheme = Themes.getPresetStaticTheme();
+export var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
+export var useTheme = function useTheme() {
+  return React.useContext(ThemeContext);
+};

package/esm/use-toasts/helpers.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import Button from '../button';
+import { tuple } from '../utils/prop-types';
+export var makeToastActions = function makeToastActions(actions, cancelHandle) {
+  var handler = function handler(event, userHandler) {
+    userHandler && userHandler(event, cancelHandle);
+  };
+
+  if (!actions || !actions.length) return null;
+  return actions.map(function (action, index) {
+    return /*#__PURE__*/React.createElement(Button, {
+      auto: true,
+      scale: 1 / 3,
+      font: "13px",
+      type: action.passive ? 'default' : 'primary',
+      key: "action-".concat(index),
+      onClick: function onClick(event) {
+        return handler(event, action.handler);
+      }
+    }, action.name);
+  });
+};
+export var getColors = function getColors(palette, type) {
+  var colors = {
+    "default": palette.background,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  var isDefault = !type || type === 'default';
+  if (isDefault) return {
+    bgColor: colors["default"],
+    color: palette.foreground
+  };
+  /**
+   * Prevent main color change in special types.
+   * The color will only follow the theme when it is in the default type.
+   */
+
+  return {
+    bgColor: colors[type],
+    color: 'white'
+  };
+};
+var toastPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+export var isTopPlacement = function isTopPlacement(placement) {
+  return "".concat(placement).toLowerCase().startsWith('top');
+};
+export var isLeftPlacement = function isLeftPlacement(placement) {
+  return "".concat(placement).toLowerCase().endsWith('left');
+};
+export var getTranslateByPlacement = function getTranslateByPlacement(placement) {
+  var translateInByPlacement = {
+    topLeft: 'translate(-60px, -60px)',
+    topRight: 'translate(60px, -60px)',
+    bottomLeft: 'translate(-60px, 60px)',
+    bottomRight: 'translate(60px, 60px)'
+  };
+  var translateOutByPlacement = {
+    topLeft: 'translate(-50px, 15px) scale(0.85)',
+    topRight: 'translate(50px, 15px) scale(0.85)',
+    bottomLeft: 'translate(-50px, -15px) scale(0.85)',
+    bottomRight: 'translate(50px, -15px) scale(0.85)'
+  };
+  return {
+    enter: translateInByPlacement[placement],
+    leave: translateOutByPlacement[placement]
+  };
+};

package/esm/use-toasts/index.js

@@ -0,0 +1,2 @@
+import useToasts from './use-toast';
+export default useToasts;

package/esm/use-toasts/toast-container.js

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import usePortal from '../utils/use-portal';
+import useTheme from '../use-theme';
+import { useBolioUIContext } from '../utils/use-bolio-ui-context';
+import ToastItem from './toast-item';
+import useClasses from '../use-classes';
+import { isLeftPlacement, isTopPlacement } from './helpers';
+import useCurrentState from '../utils/use-current-state';
+
+var ToastContainer = function ToastContainer() {
+  var theme = useTheme();
+  var portal = usePortal('toast');
+
+  var _useCurrentState = useCurrentState(false),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      setHovering = _useCurrentState2[1],
+      hoveringRef = _useCurrentState2[2];
+
+  var _useBolioUIContext = useBolioUIContext(),
+      toasts = _useBolioUIContext.toasts,
+      updateToasts = _useBolioUIContext.updateToasts,
+      toastLayout = _useBolioUIContext.toastLayout,
+      lastUpdateToastId = _useBolioUIContext.lastUpdateToastId;
+
+  var memoizedLayout = useMemo(function () {
+    return toastLayout;
+  }, [toastLayout]);
+  var toastElements = useMemo(function () {
+    return toasts.map(function (toast) {
+      return /*#__PURE__*/React.createElement(ToastItem, {
+        toast: toast,
+        layout: memoizedLayout,
+        key: toast._internalIdent
+      });
+    });
+  }, [toasts, memoizedLayout]);
+  var classNames = useMemo(function () {
+    return useClasses('toasts', {
+      top: isTopPlacement(toastLayout.placement),
+      left: isLeftPlacement(toastLayout.placement)
+    });
+  }, [memoizedLayout]);
+
+  var hoverHandler = function hoverHandler(isHovering) {
+    setHovering(isHovering);
+
+    if (isHovering) {
+      return updateToasts(function (last) {
+        return last.map(function (toast) {
+          if (!toast.visible) return toast;
+          toast._timeout && window.clearTimeout(toast._timeout);
+          return _extends({}, toast, {
+            timeout: null
+          });
+        });
+      });
+    }
+
+    updateToasts(function (last) {
+      return last.map(function (toast, index) {
+        if (!toast.visible) return toast;
+        toast._timeout && window.clearTimeout(toast._timeout);
+        return _extends({}, toast, {
+          _timeout: function () {
+            var timer = window.setTimeout(function () {
+              toast.cancel();
+              window.clearTimeout(timer);
+            }, toast.delay + index * 100);
+            return timer;
+          }()
+        });
+      });
+    });
+  };
+
+  useEffect(function () {
+    var index = toasts.findIndex(function (r) {
+      return r._internalIdent === lastUpdateToastId;
+    });
+    var toast = toasts[index];
+    if (!toast || toast.visible || !hoveringRef.current) return;
+    var hasVisible = toasts.find(function (r, i) {
+      return i < index && r.visible;
+    });
+    if (hasVisible || !hoveringRef.current) return;
+    hoverHandler(false);
+  }, [toasts, lastUpdateToastId]);
+  useEffect(function () {
+    var timeout = null;
+    var timer = window.setInterval(function () {
+      if (toasts.length === 0) return;
+      timeout = window.setTimeout(function () {
+        var allInvisible = !toasts.find(function (r) {
+          return r.visible;
+        });
+        allInvisible && updateToasts(function () {
+          return [];
+        });
+        timeout && clearTimeout(timeout);
+      }, 350);
+    }, 5000);
+    return function () {
+      timer && clearInterval(timer);
+      timeout && clearTimeout(timeout);
+    };
+  }, [toasts]);
+  if (!portal) return null;
+  if (!toasts || toasts.length === 0) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      return hoverHandler(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return hoverHandler(false);
+    },
+    className: _JSXStyle.dynamic([["622610754", [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (classNames || "")
+  }, toastElements, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "622610754",
+    dynamic: [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]
+  }, ".toasts.__jsx-style-dynamic-selector{position:fixed;width:auto;max-width:100%;right:".concat(theme.layout.gap, ";bottom:").concat(theme.layout.gap, ";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.top.__jsx-style-dynamic-selector{bottom:unset;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:").concat(theme.layout.gap, ";}.left.__jsx-style-dynamic-selector{right:unset;left:").concat(theme.layout.gap, ";}"))), portal);
+};
+
+export default ToastContainer;