@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/Toasters/Toast.js

@@ -0,0 +1,256 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _enter, _leave;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
+import { BOXSHADOWS, COLORS } from '../styles';
+import { Close } from '../icons/systemicons/SystemIcons';
+import { Size } from '../types';
+import { Button, IconButton } from '../Button';
+import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LoaderAnimationKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
+var Loader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) {
+  return props.duration;
+}, ToastColor[ToastColor.BLACK], COLORS.neutral_200, COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.neutral_400, COLORS.white, ToastColor[ToastColor.BLUE], COLORS.accent1_200, COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_200, COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_200, COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_200, COLORS.critical_500);
+var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), BOXSHADOWS.BOXSHADOW_L2, function (props) {
+  return props.animation.keyframes;
+}, function (props) {
+  return props.animation.duration;
+}, function (props) {
+  return props.animation.bezier;
+}, function (props) {
+  return props.animation.transform;
+}, function (props) {
+  return props.withClose ? '0' : '16px';
+}, function (props) {
+  return props.withLoader ? '4px' : '0';
+}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.white), HyperLinkInvertedStyling, ToastColor[ToastColor.BLACK], COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.white, COLORS.black, HyperLinkDefaultStyling, ToastColor[ToastColor.BLUE], COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_500);
+var ActionButtons = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
+var CloseButton = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), COLORS.white, ToastColor[ToastColor.WHITE], COLORS.neutral_600);
+var TextContainer = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
+var IconContainer = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: -8px;\n"])));
+var DEFAULT_OPTIONS = {
+  color: ToastColor.BLACK,
+  autoClose: true,
+  delay: 5000,
+  showCloseButton: false,
+  position: ToastPosition.TOPLEFT,
+  enterFrom: ToastEntryDirection.TOP
+};
+
+var Toast = function Toast(_ref) {
+  var _opts$enterFrom, _opts$color, _opts$delay;
+
+  var content = _ref.content,
+      remove = _ref.remove,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? DEFAULT_OPTIONS : _ref$options,
+      testId = _ref.testId;
+  var removeRef = React.useRef();
+  removeRef.current = remove;
+  var elementRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      shouldRemove = _React$useState2[0],
+      setShouldRemove = _React$useState2[1];
+
+  var _React$useState3 = React.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      dimensions = _React$useState4[0],
+      setDimensions = _React$useState4[1];
+
+  var opts = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options);
+
+  React.useEffect(function () {
+    if (opts !== null && opts !== void 0 && opts.autoClose) {
+      // @ts-ignore
+      var id = setTimeout(function () {
+        return setShouldRemove(true);
+      }, opts.delay);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+
+    return undefined;
+  }, []);
+  React.useEffect(function () {
+    if (shouldRemove) {
+      // @ts-ignore
+      var id = setTimeout(function () {
+        return removeRef.current();
+      }, 200);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+  }, [shouldRemove]);
+  React.useEffect(function () {
+    var _elementRef$current, _elementRef$current2;
+
+    setDimensions({
+      height: (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.clientHeight,
+      width: (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.clientWidth
+    });
+  }, []);
+  var animation = animations[shouldRemove ? 'leave' : 'enter'];
+  var direction = animation[(_opts$enterFrom = opts.enterFrom) !== null && _opts$enterFrom !== void 0 ? _opts$enterFrom : ToastEntryDirection.TOP];
+  var fromY = dimensions.height * direction.fromHeight;
+  var toY = dimensions.height * direction.toHeight;
+  var fromX = dimensions.width * direction.fromWidth;
+  var toX = dimensions.width * direction.toWidth;
+  var prop = {
+    duration: animation.duration,
+    bezier: animation.bezier,
+    transform: "translateY(".concat(toY, ") translateX(").concat(toX, ")"),
+    keyframes: keyframes(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX)
+  };
+
+  if (!dimensions.height) {
+    prop = _objectSpread(_objectSpread({}, prop), {
+      transform: 'translateY(-1000vh) translateX(-1000vw)',
+      keyframes: keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])))
+    });
+  }
+
+  var theme = ToastColor[(_opts$color = opts.color) !== null && _opts$color !== void 0 ? _opts$color : ToastColor.BLACK];
+
+  if (!shouldRemove) {
+    setTimeout(function () {
+      var _elementRef$current3;
+
+      return elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.focus();
+    });
+  }
+
+  return /*#__PURE__*/_jsxs(Container, {
+    "data-testid": testId,
+    animation: prop,
+    ref: elementRef,
+    withLoader: !!opts.autoClose,
+    className: theme,
+    withClose: !!opts.showCloseButton,
+    tabIndex: -1,
+    children: [opts.icon && /*#__PURE__*/_jsx(IconContainer, {
+      children: opts.icon
+    }), /*#__PURE__*/_jsx(TextContainer, {
+      className: 'description',
+      children: content
+    }), opts.action && /*#__PURE__*/_jsx(ActionButtons, {
+      children: opts.action.map(function (action, i) {
+        return /*#__PURE__*/_jsx(Button, {
+          size: Size.Small,
+          variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
+          colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+          onClick: function onClick() {
+            setShouldRemove(true);
+            action.handler();
+          },
+          className: 'action',
+          children: action.label
+        }, i);
+      })
+    }), opts.showCloseButton && /*#__PURE__*/_jsx(CloseButton, {
+      className: "close-button ".concat(theme),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action(event) {
+          return setShouldRemove(true);
+        },
+        children: /*#__PURE__*/_jsx(Close, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    }), !!opts.autoClose && /*#__PURE__*/_jsx(Loader, {
+      className: "loader ".concat(theme),
+      duration: (_opts$delay = opts.delay) !== null && _opts$delay !== void 0 ? _opts$delay : 0
+    })]
+  });
+};
+
+Toast.propTypes = {
+  remove: _pt.any,
+  content: _pt.any.isRequired,
+  options: _pt.shape({
+    autoClose: _pt.bool,
+    delay: _pt.number,
+    showCloseButton: _pt.bool,
+    action: _pt.arrayOf(_pt.shape({
+      label: _pt.string.isRequired,
+      handler: _pt.func.isRequired
+    })),
+    icon: _pt.node
+  }),
+  testId: _pt.string
+};
+export default Toast;
+var animations = {
+  enter: (_enter = {
+    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
+    duration: '300ms'
+  }, _defineProperty(_enter, ToastEntryDirection.TOP, {
+    fromHeight: -1,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.BOTTOM, {
+    fromHeight: 1,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.LEFT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: -1,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.RIGHT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 1,
+    toWidth: 0
+  }), _enter),
+  leave: (_leave = {
+    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
+    duration: '205ms'
+  }, _defineProperty(_leave, ToastEntryDirection.TOP, {
+    fromHeight: 0,
+    toHeight: -1,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_leave, ToastEntryDirection.BOTTOM, {
+    fromHeight: 0,
+    toHeight: 1,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_leave, ToastEntryDirection.LEFT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: -1
+  }), _defineProperty(_leave, ToastEntryDirection.RIGHT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 1
+  }), _leave)
+};
+//# sourceMappingURL=Toast.js.map

package/dist/Toasters/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AACA,SAASC,eAAT,EAA0BC,UAA1B,EAAsCC,mBAAtC,EAA2DC,aAA3D,QAAgF,UAAhF;AACA,SAASC,UAAT,EAAqBC,MAArB,QAA+C,WAA/C;AACA,SAASC,KAAT,QAAsB,kCAAtB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,uBAAR,EAAiCC,wBAAjC,QAAgE,cAAhE;;;AAEA,IAAMC,wBAAwB,GAAGf,SAAH,oKAA9B;AASA,IAAMgB,MAAM,GAAGjB,MAAM,CAACkB,GAAV,u/BASGF,wBATH,EAS+B,UAACG,KAAD;AAAA,SAAWA,KAAK,CAACC,QAAjB;AAAA,CAT/B,EAWNjB,UAAU,CAACA,UAAU,CAACkB,KAAZ,CAXJ,EAYgCd,MAAM,CAACe,WAZvC,EAY2Df,MAAM,CAACgB,WAZlE,EAgBNpB,UAAU,CAACA,UAAU,CAACqB,KAAZ,CAhBJ,EAiBgCjB,MAAM,CAACkB,WAjBvC,EAiB2DlB,MAAM,CAACmB,KAjBlE,EAqBNvB,UAAU,CAACA,UAAU,CAACwB,IAAZ,CArBJ,EAsBgCpB,MAAM,CAACqB,WAtBvC,EAsB2DrB,MAAM,CAACsB,WAtBlE,EA0BN1B,UAAU,CAACA,UAAU,CAAC2B,KAAZ,CA1BJ,EA2BgCvB,MAAM,CAACwB,WA3BvC,EA2B2DxB,MAAM,CAACyB,WA3BlE,EA+BN7B,UAAU,CAACA,UAAU,CAAC8B,MAAZ,CA/BJ,EAgCgC1B,MAAM,CAAC2B,WAhCvC,EAgC2D3B,MAAM,CAAC4B,WAhClE,EAoCNhC,UAAU,CAACA,UAAU,CAACiC,GAAZ,CApCJ,EAqCgC7B,MAAM,CAAC8B,YArCvC,EAqC4D9B,MAAM,CAAC+B,YArCnE,CAAZ;AA0CA,IAAMC,SAAS,GAAGvC,MAAM,CAACkB,GAAV,i2BACCZ,UAAU,CAACkC,YADZ,EAIA,UAACrB,KAAD;AAAA,SAAWA,KAAK,CAACsB,SAAN,CAAgBxC,SAA3B;AAAA,CAJA,EAIwC,UAACkB,KAAD;AAAA,SAAWA,KAAK,CAACsB,SAAN,CAAgBrB,QAA3B;AAAA,CAJxC,EAI+E,UAACD,KAAD;AAAA,SAAWA,KAAK,CAACsB,SAAN,CAAgBC,MAA3B;AAAA,CAJ/E,EAKA,UAACvB,KAAD;AAAA,SAAWA,KAAK,CAACsB,SAAN,CAAgBE,SAA3B;AAAA,CALA,EASA,UAACxB,KAAD;AAAA,SAAYA,KAAK,CAACyB,SAAN,GAAkB,GAAlB,GAAwB,MAApC;AAAA,CATA,EAS+C,UAACzB,KAAD;AAAA,SAAYA,KAAK,CAAC0B,UAAN,GAAmB,KAAnB,GAA2B,GAAvC;AAAA,CAT/C,EAuBXjC,iBAAiB,CAACC,kBAAkB,CAACiC,OAApB,EAA6BvC,MAAM,CAACmB,KAApC,CAvBN,EA2BTX,wBA3BS,EA8BTZ,UAAU,CAACA,UAAU,CAACkB,KAAZ,CA9BD,EA+BSd,MAAM,CAACgB,WA/BhB,EAkCTpB,UAAU,CAACA,UAAU,CAACqB,KAAZ,CAlCD,EAmCSjB,MAAM,CAACmB,KAnChB,EAoCFnB,MAAM,CAACwC,KApCL,EAuCPjC,uBAvCO,EA2CTX,UAAU,CAACA,UAAU,CAACwB,IAAZ,CA3CD,EA4CSpB,MAAM,CAACsB,WA5ChB,EA+CT1B,UAAU,CAACA,UAAU,CAAC2B,KAAZ,CA/CD,EAgDSvB,MAAM,CAACyB,WAhDhB,EAmDT7B,UAAU,CAACA,UAAU,CAAC8B,MAAZ,CAnDD,EAoDS1B,MAAM,CAAC4B,WApDhB,EAuDThC,UAAU,CAACA,UAAU,CAACiC,GAAZ,CAvDD,EAwDS7B,MAAM,CAAC+B,YAxDhB,CAAf;AA4DA,IAAMU,aAAa,GAAGhD,MAAM,CAACkB,GAAV,kMAAnB;AAWA,IAAM+B,WAAW,GAAGjD,MAAM,CAACkB,GAAV,sSAULX,MAAM,CAACmB,KAVF,EAaXvB,UAAU,CAACA,UAAU,CAACqB,KAAZ,CAbC,EAeHjB,MAAM,CAAC2C,WAfJ,CAAjB;AAoBA,IAAMC,aAAa,GAAGnD,MAAM,CAACoD,IAAV,sKAAnB;AAOA,IAAMC,aAAa,GAAGrD,MAAM,CAACoD,IAAV,gGAAnB;AA0BA,IAAME,eAA6B,GAAG;AACpCC,EAAAA,KAAK,EAAEpD,UAAU,CAACkB,KADkB;AAEpCmC,EAAAA,SAAS,EAAE,IAFyB;AAGpCC,EAAAA,KAAK,EAAE,IAH6B;AAIpCC,EAAAA,eAAe,EAAE,KAJmB;AAKpCC,EAAAA,QAAQ,EAAEtD,aAAa,CAACuD,OALY;AAMpCC,EAAAA,SAAS,EAAEzD,mBAAmB,CAAC0D;AANK,CAAtC;;AASA,IAAMC,KAAK,GAAG,SAARA,KAAQ,OAAmE;AAAA;;AAAA,MAAhEC,OAAgE,QAAhEA,OAAgE;AAAA,MAAvDC,MAAuD,QAAvDA,MAAuD;AAAA,0BAA/CC,OAA+C;AAAA,MAA/CA,OAA+C,6BAArCZ,eAAqC;AAAA,MAApBa,MAAoB,QAApBA,MAAoB;AAC/E,MAAMC,SAAS,GAAGrE,KAAK,CAACsE,MAAN,EAAlB;AACAD,EAAAA,SAAS,CAACE,OAAV,GAAoBL,MAApB;AAEA,MAAMM,UAAU,GAAGxE,KAAK,CAACsE,MAAN,CAAkB,IAAlB,CAAnB;;AAEA,wBAAwCtE,KAAK,CAACyE,QAAN,CAAe,KAAf,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAAoC3E,KAAK,CAACyE,QAAN,CAAkD;AAAEG,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAAlD,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,IAAI,mCAAQzB,eAAR,GAA4BY,OAA5B,CAAV;;AAEAnE,EAAAA,KAAK,CAACiF,SAAN,CAAgB,YAAM;AACpB,QAAID,IAAJ,aAAIA,IAAJ,eAAIA,IAAI,CAAEvB,SAAV,EAAqB;AACnB;AACA,UAAMyB,EAAE,GAAGC,UAAU,CAAC;AAAA,eAAMR,eAAe,CAAC,IAAD,CAArB;AAAA,OAAD,EAA8BK,IAAI,CAACtB,KAAnC,CAArB;AACA,aAAO;AAAA,eAAM0B,YAAY,CAACF,EAAD,CAAlB;AAAA,OAAP;AACD;;AACD,WAAOG,SAAP;AACD,GAPD,EAOG,EAPH;AASArF,EAAAA,KAAK,CAACiF,SAAN,CAAgB,YAAM;AACpB,QAAIP,YAAJ,EAAkB;AAChB;AACA,UAAMQ,EAAE,GAAGC,UAAU,CAAC;AAAA,eAAMd,SAAS,CAACE,OAAV,EAAN;AAAA,OAAD,EAA4B,GAA5B,CAArB;AACA,aAAO;AAAA,eAAMa,YAAY,CAACF,EAAD,CAAlB;AAAA,OAAP;AACD;AACF,GAND,EAMG,CAACR,YAAD,CANH;AAQA1E,EAAAA,KAAK,CAACiF,SAAN,CAAgB,YAAM;AAAA;;AACpBF,IAAAA,aAAa,CAAC;AAAEF,MAAAA,MAAM,yBAAEL,UAAU,CAACD,OAAb,wDAAE,oBAAoBe,YAA9B;AAA4CV,MAAAA,KAAK,0BAAEJ,UAAU,CAACD,OAAb,yDAAE,qBAAoBgB;AAAvE,KAAD,CAAb;AACD,GAFD,EAEG,EAFH;AAIA,MAAM7C,SAAS,GAAG8C,UAAU,CAACd,YAAY,GAAG,OAAH,GAAa,OAA1B,CAA5B;AACA,MAAMe,SAAS,GAAG/C,SAAS,oBAACsC,IAAI,CAAClB,SAAN,6DAAmBzD,mBAAmB,CAAC0D,GAAvC,CAA3B;AAEA,MAAM2B,KAAK,GAAGZ,UAAU,CAACD,MAAX,GAAoBY,SAAS,CAACE,UAA5C;AACA,MAAMC,GAAG,GAAGd,UAAU,CAACD,MAAX,GAAoBY,SAAS,CAACI,QAA1C;AACA,MAAMC,KAAK,GAAGhB,UAAU,CAACF,KAAX,GAAmBa,SAAS,CAACM,SAA3C;AACA,MAAMC,GAAG,GAAGlB,UAAU,CAACF,KAAX,GAAmBa,SAAS,CAACQ,OAAzC;AAEA,MAAIC,IAAI,GAAG;AACT7E,IAAAA,QAAQ,EAAEqB,SAAS,CAACrB,QADX;AAETsB,IAAAA,MAAM,EAAED,SAAS,CAACC,MAFT;AAGTC,IAAAA,SAAS,uBAAgBgD,GAAhB,0BAAmCI,GAAnC,MAHA;AAIT9F,IAAAA,SAAS,EAAEA,SAAF,sPAEqBwF,KAFrB,EAE4CI,KAF5C,EAKqBF,GALrB,EAK0CI,GAL1C;AAJA,GAAX;;AAaA,MAAI,CAAClB,UAAU,CAACD,MAAhB,EAAwB;AACtBqB,IAAAA,IAAI,mCACCA,IADD,GAEC;AACDtD,MAAAA,SAAS,EAAE,yCADV;AAED1C,MAAAA,SAAS,EAAEA,SAAF;AAFR,KAFD,CAAJ;AAOD;;AAED,MAAMiG,KAAK,GAAG/F,UAAU,gBAAC4E,IAAI,CAACxB,KAAN,qDAAepD,UAAU,CAACkB,KAA1B,CAAxB;;AAEA,MAAI,CAACoD,YAAL,EAAkB;AAChBS,IAAAA,UAAU,CAAC;AAAA;;AAAA,aAAMX,UAAN,aAAMA,UAAN,+CAAMA,UAAU,CAAED,OAAlB,yDAAM,qBAAqB6B,KAArB,EAAN;AAAA,KAAD,CAAV;AACD;;AAED,sBACE,MAAC,SAAD;AAAW,mBAAahC,MAAxB;AAAgC,IAAA,SAAS,EAAE8B,IAA3C;AAAiD,IAAA,GAAG,EAAE1B,UAAtD;AAAkE,IAAA,UAAU,EAAE,CAAC,CAACQ,IAAI,CAACvB,SAArF;AAAgG,IAAA,SAAS,EAAE0C,KAA3G;AAAkH,IAAA,SAAS,EAAE,CAAC,CAACnB,IAAI,CAACrB,eAApI;AAAqJ,IAAA,QAAQ,EAAE,CAAC,CAAhK;AAAA,eACGqB,IAAI,CAACqB,IAAL,iBAAa,KAAC,aAAD;AAAA,gBAAgBrB,IAAI,CAACqB;AAArB,MADhB,eAEE,KAAC,aAAD;AAAe,MAAA,SAAS,EAAE,aAA1B;AAAA,gBAA0CpC;AAA1C,MAFF,EAGGe,IAAI,CAACsB,MAAL,iBACC,KAAC,aAAD;AAAA,gBACGtB,IAAI,CAACsB,MAAL,CAAYC,GAAZ,CAAgB,UAACD,MAAD,EAASE,CAAT;AAAA,4BACf,KAAC,MAAD;AACE,UAAA,IAAI,EAAE9F,IAAI,CAAC+F,KADb;AAEE,UAAA,OAAO,EAAEH,MAAM,CAACI,IAAP,KAAgBvG,eAAe,CAACwG,SAAhC,GAA4C,WAA5C,GAA0D,SAFrE;AAGE,UAAA,UAAU,EAAE3B,IAAI,CAACxB,KAAL,KAAepD,UAAU,CAACqB,KAA1B,GAAkC,MAAlC,GAA2C,MAHzD;AAKE,UAAA,OAAO,EAAE,mBAAM;AACbkD,YAAAA,eAAe,CAAC,IAAD,CAAf;AACA2B,YAAAA,MAAM,CAACM,OAAP;AACD,WARH;AASE,UAAA,SAAS,EAAE,QATb;AAAA,oBAUGN,MAAM,CAACO;AAVV,WAIOL,CAJP,CADe;AAAA,OAAhB;AADH,MAJJ,EAqBGxB,IAAI,CAACrB,eAAL,iBACC,KAAC,WAAD;AAAa,MAAA,SAAS,yBAAkBwC,KAAlB,CAAtB;AAAA,6BACE,KAAC,UAAD;AAAY,QAAA,OAAO,EAAE,WAArB;AACY,QAAA,KAAK,EAAC,UADlB;AAEY,QAAA,wBAAwB,EAAE,IAFtC;AAGY,QAAA,MAAM,EAAE,gBAACW,KAAD;AAAA,iBAAWnC,eAAe,CAAC,IAAD,CAA1B;AAAA,SAHpB;AAAA,+BAIE,KAAC,KAAD;AAAO,UAAA,IAAI,EAAC,MAAZ;AAAmB,UAAA,KAAK,EAAEnE,MAAM,CAAC2C;AAAjC;AAJF;AADF,MAtBJ,EA+BG,CAAC,CAAC6B,IAAI,CAACvB,SAAP,iBAAoB,KAAC,MAAD;AAAQ,MAAA,SAAS,mBAAY0C,KAAZ,CAAjB;AAAsC,MAAA,QAAQ,iBAAEnB,IAAI,CAACtB,KAAP,qDAAgB;AAA9D,MA/BvB;AAAA,IADF;AAmCD,CAxGD;;;AAfEQ,EAAAA,M;AACAD,EAAAA,O;AACAE,EAAAA,O;AAhBAV,IAAAA,S;AACAC,IAAAA,K;AACAC,IAAAA,e;AACA2C,IAAAA,M;AACEO,MAAAA,K;AACAD,MAAAA,O;;AAKFP,IAAAA,I;;AAOAjC,EAAAA,M;;AAsHF,eAAeJ,KAAf;AAEA,IAAMwB,UAAU,GAAG;AACjBuB,EAAAA,KAAK;AACHpE,IAAAA,MAAM,EAAE,mCADL;AAEHtB,IAAAA,QAAQ,EAAE;AAFP,6BAGFhB,mBAAmB,CAAC0D,GAHlB,EAGwB;AACzB4B,IAAAA,UAAU,EAAE,CAAC,CADY;AAEzBE,IAAAA,QAAQ,EAAE,CAFe;AAGzBE,IAAAA,SAAS,EAAE,CAHc;AAIzBE,IAAAA,OAAO,EAAE;AAJgB,GAHxB,2BASF5F,mBAAmB,CAAC2G,MATlB,EAS2B;AAC5BrB,IAAAA,UAAU,EAAE,CADgB;AAE5BE,IAAAA,QAAQ,EAAE,CAFkB;AAG5BE,IAAAA,SAAS,EAAE,CAHiB;AAI5BE,IAAAA,OAAO,EAAE;AAJmB,GAT3B,2BAeF5F,mBAAmB,CAAC4G,IAflB,EAeyB;AAC1BtB,IAAAA,UAAU,EAAE,CADc;AAE1BE,IAAAA,QAAQ,EAAE,CAFgB;AAG1BE,IAAAA,SAAS,EAAE,CAAC,CAHc;AAI1BE,IAAAA,OAAO,EAAE;AAJiB,GAfzB,2BAqBF5F,mBAAmB,CAAC6G,KArBlB,EAqB0B;AAC3BvB,IAAAA,UAAU,EAAE,CADe;AAE3BE,IAAAA,QAAQ,EAAE,CAFiB;AAG3BE,IAAAA,SAAS,EAAE,CAHgB;AAI3BE,IAAAA,OAAO,EAAE;AAJkB,GArB1B,UADY;AA6BjBkB,EAAAA,KAAK;AACHxE,IAAAA,MAAM,EAAE,qCADL;AAEHtB,IAAAA,QAAQ,EAAE;AAFP,6BAGFhB,mBAAmB,CAAC0D,GAHlB,EAGwB;AACzB4B,IAAAA,UAAU,EAAE,CADa;AAEzBE,IAAAA,QAAQ,EAAE,CAAC,CAFc;AAGzBE,IAAAA,SAAS,EAAE,CAHc;AAIzBE,IAAAA,OAAO,EAAE;AAJgB,GAHxB,2BASF5F,mBAAmB,CAAC2G,MATlB,EAS2B;AAC5BrB,IAAAA,UAAU,EAAE,CADgB;AAE5BE,IAAAA,QAAQ,EAAE,CAFkB;AAG5BE,IAAAA,SAAS,EAAE,CAHiB;AAI5BE,IAAAA,OAAO,EAAE;AAJmB,GAT3B,2BAeF5F,mBAAmB,CAAC4G,IAflB,EAeyB;AAC1BtB,IAAAA,UAAU,EAAE,CADc;AAE1BE,IAAAA,QAAQ,EAAE,CAFgB;AAG1BE,IAAAA,SAAS,EAAE,CAHe;AAI1BE,IAAAA,OAAO,EAAE,CAAC;AAJgB,GAfzB,2BAqBF5F,mBAAmB,CAAC6G,KArBlB,EAqB0B;AAC3BvB,IAAAA,UAAU,EAAE,CADe;AAE3BE,IAAAA,QAAQ,EAAE,CAFiB;AAG3BE,IAAAA,SAAS,EAAE,CAHgB;AAI3BE,IAAAA,OAAO,EAAE;AAJkB,GArB1B;AA7BY,CAAnB","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/Toasters/ToastContext.cjs

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastProvider = exports.ToastContext = void 0;
+exports.useToast = useToast;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _functions = require("../Services/functions");
+
+var _Toast = _interopRequireDefault(require("./Toast"));
+
+var _types = require("../types");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+var ToastContext = /*#__PURE__*/React.createContext({});
+exports.ToastContext = ToastContext;
+
+var ToastBucket = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), _zIndexes.Z_INDEXES.toast);
+
+var ToastBucketTopLeft = (0, _styledComponents.default)(ToastBucket)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  top: 16px;\n  left: 5%;\n"])));
+var ToastBucketTopMiddle = (0, _styledComponents.default)(ToastBucket)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketTopRight = (0, _styledComponents.default)(ToastBucket)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  top: 16px;\n  right: 5%;\n"])));
+var ToastBucketBottomLeft = (0, _styledComponents.default)(ToastBucket)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 16px;\n  left: 5%;\n"])));
+var ToastBucketBottomMiddle = (0, _styledComponents.default)(ToastBucket)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketBottomRight = (0, _styledComponents.default)(ToastBucket)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 16px;\n  right: 5%;\n"])));
+
+var ToastProvider = function ToastProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      toasts = _React$useState2[0],
+      setToasts = _React$useState2[1];
+
+  var add = function add(content, options) {
+    var id = (0, _functions.createUUID)();
+    setToasts(function (prev) {
+      return [].concat((0, _toConsumableArray2.default)(prev), [{
+        id: id,
+        content: content,
+        options: options
+      }]);
+    });
+  };
+
+  var _remove = function remove(id) {
+    return setToasts(toasts.filter(function (t) {
+      return t.id !== id;
+    }));
+  };
+
+  var functions = React.useMemo(function () {
+    return {
+      addToast: add,
+      removeToast: _remove
+    };
+  }, [toasts]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContext.Provider, {
+    value: _objectSpread({
+      toasts: toasts
+    }, functions),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToastBucketTopLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === _types.ToastPosition.TOPLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastBucketTopMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === _types.ToastPosition.TOPMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastBucketTopRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === _types.ToastPosition.TOPRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastBucketBottomLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === _types.ToastPosition.BOTTOMLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastBucketBottomMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === _types.ToastPosition.BOTTOMMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastBucketBottomRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === _types.ToastPosition.BOTTOMRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), children]
+  });
+};
+
+exports.ToastProvider = ToastProvider;
+
+function useToast() {
+  var _React$useContext = React.useContext(ToastContext),
+      addToast = _React$useContext.addToast;
+
+  return {
+    addToast: addToast
+  };
+}
+//# sourceMappingURL=ToastContext.cjs.map

package/dist/Toasters/ToastContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","createContext","ToastBucket","styled","div","Z_INDEXES","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.cjs"}

package/dist/Toasters/ToastContext.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { createUUID } from '../Services/functions';
+import Toast from './Toast';
+import { ToastPosition } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+export var ToastContext = /*#__PURE__*/React.createContext({});
+var ToastBucket = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
+var ToastBucketTopLeft = styled(ToastBucket)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 5%;\n"])));
+var ToastBucketTopMiddle = styled(ToastBucket)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketTopRight = styled(ToastBucket)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  top: 16px;\n  right: 5%;\n"])));
+var ToastBucketBottomLeft = styled(ToastBucket)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 5%;\n"])));
+var ToastBucketBottomMiddle = styled(ToastBucket)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketBottomRight = styled(ToastBucket)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  right: 5%;\n"])));
+export var ToastProvider = function ToastProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      toasts = _React$useState2[0],
+      setToasts = _React$useState2[1];
+
+  var add = function add(content, options) {
+    var id = createUUID();
+    setToasts(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        id: id,
+        content: content,
+        options: options
+      }]);
+    });
+  };
+
+  var _remove = function remove(id) {
+    return setToasts(toasts.filter(function (t) {
+      return t.id !== id;
+    }));
+  };
+
+  var functions = React.useMemo(function () {
+    return {
+      addToast: add,
+      removeToast: _remove
+    };
+  }, [toasts]);
+  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
+    value: _objectSpread({
+      toasts: toasts
+    }, functions),
+    children: [/*#__PURE__*/_jsx(ToastBucketTopLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketTopMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketTopRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), children]
+  });
+};
+export function useToast() {
+  var _React$useContext = React.useContext(ToastContext),
+      addToast = _React$useContext.addToast;
+
+  return {
+    addToast: addToast
+  };
+}
+//# sourceMappingURL=ToastContext.js.map