@laerdal/life-react-components 3.4.3 → 3.5.1-dev.10

package/dist/esm/Toasters/Toast.js

@@ -0,0 +1,360 @@
+import _pt from "prop-types";
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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';
+const LoaderAnimationKeyframes = keyframes`
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+`;
+const Loader = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+
+  animation: ${LoaderAnimationKeyframes} ${props => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);
+
+  &.${ToastColor[ToastColor.BLACK]} {
+    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.WHITE]} {
+    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.BLUE]} {
+    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.GREEN]} {
+    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.ORANGE]} {
+    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.RED]} {
+    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;
+    background-size: 200% 100%;
+  }
+`;
+const Container = styled.div`
+  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
+  border-radius: 4px;
+
+  animation: ${props => props.animation.keyframes} ${props => props.animation.duration} ${props => props.animation.bezier};
+  transform: ${props => props.animation.transform};
+
+  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);
+
+  padding: 0 ${props => props.withClose ? '0' : '16px'} ${props => props.withLoader ? '4px' : '0'} 16px;
+
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  justify-content: left;
+
+  position: relative;
+
+  width: max-content;
+  min-height: 48px;
+  box-sizing: border-box;
+
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
+
+  & a {
+    display: inline;
+    ${HyperLinkInvertedStyling}
+  }
+
+  &.${ToastColor[ToastColor.BLACK]} {
+    background-color: ${COLORS.neutral_800};
+  }
+
+  &.${ToastColor[ToastColor.WHITE]} {
+    background-color: ${COLORS.white};
+    color: ${COLORS.black};
+
+    & a {
+      ${HyperLinkDefaultStyling}
+    }
+  }
+
+  &.${ToastColor[ToastColor.BLUE]} {
+    background-color: ${COLORS.accent1_600};
+  }
+
+  &.${ToastColor[ToastColor.GREEN]} {
+    background-color: ${COLORS.correct_500};
+  }
+
+  &.${ToastColor[ToastColor.ORANGE]} {
+    background-color: ${COLORS.warning_500};
+  }
+
+  &.${ToastColor[ToastColor.RED]} {
+    background-color: ${COLORS.critical_500};
+  }
+`;
+const ActionButtons = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+
+  & .action {
+    height: unset;
+  }
+`;
+const CloseButton = styled.div`
+  & > button {
+    background-color: transparent;
+    border: none;
+    margin-left: 16px;
+
+    & svg {
+      padding: 0;
+    }
+  }
+
+  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {
+    fill: ${COLORS.white};
+  }
+
+  & div svg path {
+    fill: ${COLORS.white};
+  }
+
+  &.${ToastColor[ToastColor.WHITE]} {
+    & div svg path {
+      fill: ${COLORS.neutral_600};
+    }
+  }
+`;
+const TextContainer = styled.span`
+  font-feature-settings: 'liga' off;
+  width: 240px;
+  display: flex;
+  padding: 16px 0;
+`;
+const IconContainer = styled.span`
+  margin-right: -8px;
+`;
+const DEFAULT_OPTIONS = {
+  color: ToastColor.BLACK,
+  autoClose: true,
+  delay: 5000,
+  showCloseButton: false,
+  position: ToastPosition.TOPLEFT,
+  enterFrom: ToastEntryDirection.TOP
+};
+
+const Toast = ({
+  content,
+  remove,
+  options = DEFAULT_OPTIONS,
+  testId
+}) => {
+  const removeRef = React.useRef();
+  removeRef.current = remove;
+  const elementRef = React.useRef(null);
+  const [shouldRemove, setShouldRemove] = React.useState(false);
+  const [dimensions, setDimensions] = React.useState({
+    width: 0,
+    height: 0
+  });
+
+  const opts = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options);
+
+  React.useEffect(() => {
+    if (opts?.autoClose) {
+      // @ts-ignore
+      const id = setTimeout(() => setShouldRemove(true), opts.delay);
+      return () => clearTimeout(id);
+    }
+
+    return undefined;
+  }, []);
+  React.useEffect(() => {
+    if (shouldRemove) {
+      // @ts-ignore
+      const id = setTimeout(() => removeRef.current(), 200);
+      return () => clearTimeout(id);
+    }
+  }, [shouldRemove]);
+  React.useEffect(() => {
+    setDimensions({
+      height: elementRef.current?.clientHeight,
+      width: elementRef.current?.clientWidth
+    });
+  }, []);
+  const animation = animations[shouldRemove ? 'leave' : 'enter'];
+  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];
+  const fromY = dimensions.height * direction.fromHeight;
+  const toY = dimensions.height * direction.toHeight;
+  const fromX = dimensions.width * direction.fromWidth;
+  const toX = dimensions.width * direction.toWidth;
+  let prop = {
+    duration: animation.duration,
+    bezier: animation.bezier,
+    transform: `translateY(${toY}) translateX(${toX})`,
+    keyframes: keyframes`
+        0% {
+          transform: translateY(${fromY}px) translateX(${fromX}px);
+        }
+        100% {
+          transform: translateY(${toY}px) translateX(${toX}px);
+        }`
+  };
+
+  if (!dimensions.height) {
+    prop = _objectSpread(_objectSpread({}, prop), {
+      transform: 'translateY(-1000vh) translateX(-1000vw)',
+      keyframes: keyframes``
+    });
+  }
+
+  const theme = ToastColor[opts.color ?? ToastColor.BLACK];
+
+  if (!shouldRemove) {
+    setTimeout(() => elementRef?.current?.focus());
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    "data-testid": testId,
+    animation: prop,
+    ref: elementRef,
+    withLoader: !!opts.autoClose,
+    className: theme,
+    withClose: !!opts.showCloseButton,
+    tabIndex: -1
+  }, opts.icon && /*#__PURE__*/React.createElement(IconContainer, null, opts.icon), /*#__PURE__*/React.createElement(TextContainer, {
+    className: 'description'
+  }, content), opts.action && /*#__PURE__*/React.createElement(ActionButtons, null, opts.action.map((action, i) => /*#__PURE__*/React.createElement(Button, {
+    size: Size.Small,
+    variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
+    colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+    key: i,
+    onClick: () => {
+      setShouldRemove(true);
+      action.handler();
+    },
+    className: 'action'
+  }, action.label))), opts.showCloseButton && /*#__PURE__*/React.createElement(CloseButton, {
+    className: `close-button ${theme}`
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    useTransparentBackground: true,
+    action: event => setShouldRemove(true)
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: "24px",
+    color: COLORS.neutral_600
+  }))), !!opts.autoClose && /*#__PURE__*/React.createElement(Loader, {
+    className: `loader ${theme}`,
+    duration: 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;
+const animations = {
+  enter: {
+    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
+    duration: '300ms',
+    [ToastEntryDirection.TOP]: {
+      fromHeight: -1,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.BOTTOM]: {
+      fromHeight: 1,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.LEFT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: -1,
+      toWidth: 0
+    },
+    [ToastEntryDirection.RIGHT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: 1,
+      toWidth: 0
+    }
+  },
+  leave: {
+    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
+    duration: '205ms',
+    [ToastEntryDirection.TOP]: {
+      fromHeight: 0,
+      toHeight: -1,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.BOTTOM]: {
+      fromHeight: 0,
+      toHeight: 1,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.LEFT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: -1
+    },
+    [ToastEntryDirection.RIGHT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: 1
+    }
+  }
+};
+//# sourceMappingURL=Toast.js.map

package/dist/esm/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","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","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":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\r\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\r\nimport { Close } from '../icons/systemicons/SystemIcons';\r\nimport { Size } from '../types' \r\nimport { Button, IconButton } from '../Button';\r\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\r\n\r\nconst LoaderAnimationKeyframes = keyframes`\r\n  0% {\r\n    background-position: right;\r\n  }\r\n  100% {\r\n    background-position: left;\r\n  }\r\n`;\r\n\r\nconst Loader = styled.div<{ duration: number }>`\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 4px;\r\n  border-bottom-left-radius: 8px;\r\n  border-bottom-right-radius: 8px;\r\n\r\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\r\n\r\n  &.${ToastColor[ToastColor.BLACK]} {\r\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\r\n    background-size: 200% 100%;\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.WHITE]} {\r\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\r\n    background-size: 200% 100%;\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.BLUE]} {\r\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\r\n    background-size: 200% 100%;\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.GREEN]} {\r\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\r\n    background-size: 200% 100%;\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.ORANGE]} {\r\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\r\n    background-size: 200% 100%;\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.RED]} {\r\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\r\n    background-size: 200% 100%;\r\n  }\r\n`;\r\n\r\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n  border-radius: 4px;\r\n\r\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\r\n  transform: ${(props) => props.animation.transform};\r\n\r\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\r\n\r\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\r\n\r\n  margin-bottom: 8px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  justify-content: left;\r\n\r\n  position: relative;\r\n\r\n  width: max-content;\r\n  min-height: 48px;\r\n  box-sizing: border-box;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\r\n\r\n  & a {\r\n    display: inline;\r\n    ${HyperLinkInvertedStyling}\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.BLACK]} {\r\n    background-color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.WHITE]} {\r\n    background-color: ${COLORS.white};\r\n    color: ${COLORS.black};\r\n\r\n    & a {\r\n      ${HyperLinkDefaultStyling}\r\n    }\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.BLUE]} {\r\n    background-color: ${COLORS.accent1_600};\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.GREEN]} {\r\n    background-color: ${COLORS.correct_500};\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.ORANGE]} {\r\n    background-color: ${COLORS.warning_500};\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.RED]} {\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n`;\r\n\r\nconst ActionButtons = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  gap: 8px;\r\n  align-items: center;\r\n\r\n  & .action {\r\n    height: unset;\r\n  }\r\n`;\r\n\r\nconst CloseButton = styled.div`\r\n  & > button {\r\n    background-color: transparent;\r\n    border: none;\r\n    margin-left: 16px;\r\n\r\n    & svg {\r\n      padding: 0;\r\n    }\r\n  }\r\n\r\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\r\n    fill: ${COLORS.white};\r\n  }\r\n\r\n  & div svg path {\r\n    fill: ${COLORS.white};\r\n  }\r\n\r\n  &.${ToastColor[ToastColor.WHITE]} {\r\n    & div svg path {\r\n      fill: ${COLORS.neutral_600};\r\n    }\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.span`\r\n  font-feature-settings: 'liga' off;\r\n  width: 240px;\r\n  display: flex;\r\n  padding: 16px 0;\r\n`;\r\n\r\nconst IconContainer = styled.span`\r\n  margin-right: -8px;\r\n`;\r\n\r\nexport type ToastOptions = {\r\n  color?: ToastColor;\r\n  autoClose?: boolean;\r\n  delay?: number;\r\n  showCloseButton?: boolean;\r\n  action?: {\r\n    label: string;\r\n    handler: () => void;\r\n    type?: ToastActionType;\r\n  }[];\r\n  position: ToastPosition;\r\n  enterFrom?: ToastEntryDirection;\r\n  icon?: React.ReactNode;\r\n};\r\n\r\ntype Props = {\r\n  remove?: any;\r\n  content: any;\r\n  options?: ToastOptions;\r\n  testId?: string;\r\n};\r\n\r\nconst DEFAULT_OPTIONS: ToastOptions = {\r\n  color: ToastColor.BLACK,\r\n  autoClose: true,\r\n  delay: 5000,\r\n  showCloseButton: false,\r\n  position: ToastPosition.TOPLEFT,\r\n  enterFrom: ToastEntryDirection.TOP,\r\n};\r\n\r\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\r\n  const removeRef = React.useRef();\r\n  removeRef.current = remove;\r\n\r\n  const elementRef = React.useRef<any>(null);\r\n\r\n  const [shouldRemove, setShouldRemove] = React.useState(false);\r\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\r\n\r\n  const opts = { ...DEFAULT_OPTIONS, ...options };\r\n\r\n  React.useEffect(() => {\r\n    if (opts?.autoClose) {\r\n      // @ts-ignore\r\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\r\n      return () => clearTimeout(id);\r\n    }\r\n    return undefined;\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    if (shouldRemove) {\r\n      // @ts-ignore\r\n      const id = setTimeout(() => removeRef.current(), 200);\r\n      return () => clearTimeout(id);\r\n    }\r\n  }, [shouldRemove]);\r\n\r\n  React.useEffect(() => {\r\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\r\n  }, []);\r\n\r\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\r\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\r\n\r\n  const fromY = dimensions.height * direction.fromHeight;\r\n  const toY = dimensions.height * direction.toHeight;\r\n  const fromX = dimensions.width * direction.fromWidth;\r\n  const toX = dimensions.width * direction.toWidth;\r\n\r\n  let prop = {\r\n    duration: animation.duration,\r\n    bezier: animation.bezier,\r\n    transform: `translateY(${toY}) translateX(${toX})`,\r\n    keyframes: keyframes`\r\n        0% {\r\n          transform: translateY(${fromY}px) translateX(${fromX}px);\r\n        }\r\n        100% {\r\n          transform: translateY(${toY}px) translateX(${toX}px);\r\n        }`,\r\n  };\r\n\r\n  if (!dimensions.height) {\r\n    prop = {\r\n      ...prop,\r\n      ...{\r\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\r\n        keyframes: keyframes``,\r\n      },\r\n    };\r\n  }\r\n\r\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\r\n\r\n  if (!shouldRemove){\r\n    setTimeout(() => elementRef?.current?.focus());\r\n  }\r\n\r\n  return (\r\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\r\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\r\n      <TextContainer className={'description'}>{content}</TextContainer>\r\n      {opts.action && (\r\n        <ActionButtons>\r\n          {opts.action.map((action, i) => (\r\n            <Button\r\n              size={Size.Small}\r\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\r\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\r\n              key={i}\r\n              onClick={() => {\r\n                setShouldRemove(true);\r\n                action.handler();\r\n              }}\r\n              className={'action'}>\r\n              {action.label}\r\n            </Button>\r\n          ))}\r\n        </ActionButtons>\r\n      )}\r\n      {opts.showCloseButton && (\r\n        <CloseButton className={`close-button ${theme}`}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\r\n            <Close size=\"24px\" color={COLORS.neutral_600} />\r\n          </IconButton>\r\n        </CloseButton>\r\n      )}\r\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Toast;\r\n\r\nconst animations = {\r\n  enter: {\r\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\r\n    duration: '300ms',\r\n    [ToastEntryDirection.TOP]: {\r\n      fromHeight: -1,\r\n      toHeight: 0,\r\n      fromWidth: 0,\r\n      toWidth: 0,\r\n    },\r\n    [ToastEntryDirection.BOTTOM]: {\r\n      fromHeight: 1,\r\n      toHeight: 0,\r\n      fromWidth: 0,\r\n      toWidth: 0,\r\n    },\r\n    [ToastEntryDirection.LEFT]: {\r\n      fromHeight: 0,\r\n      toHeight: 0,\r\n      fromWidth: -1,\r\n      toWidth: 0,\r\n    },\r\n    [ToastEntryDirection.RIGHT]: {\r\n      fromHeight: 0,\r\n      toHeight: 0,\r\n      fromWidth: 1,\r\n      toWidth: 0,\r\n    },\r\n  },\r\n  leave: {\r\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\r\n    duration: '205ms',\r\n    [ToastEntryDirection.TOP]: {\r\n      fromHeight: 0,\r\n      toHeight: -1,\r\n      fromWidth: 0,\r\n      toWidth: 0,\r\n    },\r\n    [ToastEntryDirection.BOTTOM]: {\r\n      fromHeight: 0,\r\n      toHeight: 1,\r\n      fromWidth: 0,\r\n      toWidth: 0,\r\n    },\r\n    [ToastEntryDirection.LEFT]: {\r\n      fromHeight: 0,\r\n      toHeight: 0,\r\n      fromWidth: 0,\r\n      toWidth: -1,\r\n    },\r\n    [ToastEntryDirection.RIGHT]: {\r\n      fromHeight: 0,\r\n      toHeight: 0,\r\n      fromWidth: 0,\r\n      toWidth: 1,\r\n    },\r\n  },\r\n};\r\n"],"file":"Toast.js"}

package/dist/esm/Toasters/ToastContext.js

@@ -0,0 +1,114 @@
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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';
+
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+export const ToastContext = /*#__PURE__*/React.createContext({});
+const ToastBucket = styled.div`
+  position: fixed;
+  z-index: ${Z_INDEXES.toast};
+  display: flex;
+  flex-direction: column-reverse;
+`;
+const ToastBucketTopLeft = styled(ToastBucket)`
+  top: 16px;
+  left: 5%;
+`;
+const ToastBucketTopMiddle = styled(ToastBucket)`
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const ToastBucketTopRight = styled(ToastBucket)`
+  top: 16px;
+  right: 5%;
+`;
+const ToastBucketBottomLeft = styled(ToastBucket)`
+  bottom: 16px;
+  left: 5%;
+`;
+const ToastBucketBottomMiddle = styled(ToastBucket)`
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const ToastBucketBottomRight = styled(ToastBucket)`
+  bottom: 16px;
+  right: 5%;
+`;
+export const ToastProvider = ({
+  children
+}) => {
+  const [toasts, setToasts] = React.useState([]);
+
+  const add = (content, options) => {
+    const id = createUUID();
+    setToasts(prev => [...prev, {
+      id,
+      content,
+      options
+    }]);
+  };
+
+  const remove = id => setToasts(toasts.filter(t => t.id !== id));
+
+  const functions = React.useMemo(() => {
+    return {
+      addToast: add,
+      removeToast: remove
+    };
+  }, [toasts]);
+  return /*#__PURE__*/React.createElement(ToastContext.Provider, {
+    value: _objectSpread({
+      toasts
+    }, functions)
+  }, /*#__PURE__*/React.createElement(ToastBucketTopLeft, null, toasts.filter(t => t.options.position === ToastPosition.TOPLEFT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketTopMiddle, null, toasts.filter(t => t.options.position === ToastPosition.TOPMIDDLE).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketTopRight, null, toasts.filter(t => t.options.position === ToastPosition.TOPRIGHT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketBottomLeft, null, toasts.filter(t => t.options.position === ToastPosition.BOTTOMLEFT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketBottomMiddle, null, toasts.filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketBottomRight, null, toasts.filter(t => t.options.position === ToastPosition.BOTTOMRIGHT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), children);
+};
+export function useToast() {
+  const {
+    addToast
+  } = React.useContext(ToastContext);
+  return {
+    addToast
+  };
+}
+//# sourceMappingURL=ToastContext.js.map

package/dist/esm/Toasters/ToastContext.js.map

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

package/dist/esm/Toasters/__tests__/Toast.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Toast } from '../index';
+import 'jest-styled-components';
+import { ToastColor, ToastPosition } from '../../types';
+describe('<Toast />', () => {
+  it('Renders black toast', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Toast, {
+      key: "a",
+      options: {
+        color: ToastColor.BLACK,
+        position: ToastPosition.TOPMIDDLE
+      },
+      content: "This is a warning",
+      testId: "TestToast"
+    }));
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('BLACK')).toBe(true);
+  });
+  it('Renders white toast', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Toast, {
+      key: "a",
+      options: {
+        color: ToastColor.WHITE,
+        position: ToastPosition.TOPMIDDLE
+      },
+      content: "This is a warning",
+      testId: "TestToast"
+    }));
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('WHITE')).toBe(true);
+  });
+  it('Renders warning toast', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Toast, {
+      key: "a",
+      options: {
+        color: ToastColor.ORANGE,
+        position: ToastPosition.TOPMIDDLE
+      },
+      content: "This is a warning",
+      testId: "TestToast"
+    }));
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('ORANGE')).toBe(true);
+  });
+  it('Renders error toast', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Toast, {
+      key: "a",
+      options: {
+        color: ToastColor.RED,
+        position: ToastPosition.TOPMIDDLE
+      },
+      content: "This is a warning",
+      testId: "TestToast"
+    }));
+    expect(queryByText('This is a warning')).toBeDefined();
+    expect(getByTestId('TestToast').classList.contains('RED')).toBe(true);
+  });
+});
+//# sourceMappingURL=Toast.test.js.map

package/dist/esm/Toasters/__tests__/Toast.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Toasters/__tests__/Toast.test.tsx"],"names":["React","render","Toast","ToastColor","ToastPosition","describe","it","queryByText","getByTestId","color","BLACK","position","TOPMIDDLE","expect","toBeDefined","classList","contains","toBe","WHITE","ORANGE","RED"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport { Toast } from '../index';\r\nimport 'jest-styled-components';\r\nimport { ToastColor, ToastPosition } from '../../types';\r\n\r\ndescribe('<Toast />', () => {\r\n  it('Renders black toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.BLACK,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('BLACK')).toBe(true);\r\n  });\r\n  it('Renders white toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.WHITE,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('WHITE')).toBe(true);\r\n  });\r\n  it('Renders warning toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.ORANGE,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('ORANGE')).toBe(true);\r\n  });\r\n  it('Renders error toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.RED,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('RED')).toBe(true);\r\n  });\r\n});\r\n"],"file":"Toast.test.js"}

package/dist/esm/Toasters/index.js

@@ -0,0 +1,4 @@
+import Toast from './Toast';
+import { ToastProvider, useToast, ToastContext } from './ToastContext';
+export { Toast, ToastProvider, useToast, ToastContext };
+//# sourceMappingURL=index.js.map

package/dist/esm/Toasters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Toasters/index.tsx"],"names":["Toast","ToastProvider","useToast","ToastContext"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,SAAlB;AACA,SAASC,aAAT,EAAwBC,QAAxB,EAAkCC,YAAlC,QAAsD,gBAAtD;AAEA,SAASH,KAAT,EAAgBC,aAAhB,EAA+BC,QAA/B,EAAyCC,YAAzC","sourcesContent":["import Toast from './Toast';\r\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\r\n\r\nexport { Toast, ToastProvider, useToast, ToastContext };\r\n"],"file":"index.js"}