@laerdal/life-react-components 1.0.1-dev.36.full → 1.0.1-dev.41.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/Button/Iconbutton.js +8 -6
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +2 -6
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/ChipDropdownInput.js +1 -3
- package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/esm/Dropdown/DropdownButton.js +19 -1
- package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownContent.js +4 -4
- package/dist/esm/Dropdown/DropdownContent.js.map +1 -1
- package/dist/esm/Dropdown/DropdownFilter.js +2 -0
- package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/esm/HyperLink/index.js +2 -1
- package/dist/esm/HyperLink/index.js.map +1 -1
- package/dist/esm/Toasters/Toast.js +6 -14
- package/dist/esm/Toasters/Toast.js.map +1 -1
- package/dist/js/Button/Iconbutton.d.ts +4 -3
- package/dist/js/Button/Iconbutton.js +7 -5
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.js +2 -8
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/ChipDropdownInput.js +1 -3
- package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/js/Dropdown/DropdownButton.js +20 -1
- package/dist/js/Dropdown/DropdownButton.js.map +1 -1
- package/dist/js/Dropdown/DropdownContent.js +4 -4
- package/dist/js/Dropdown/DropdownContent.js.map +1 -1
- package/dist/js/Dropdown/DropdownFilter.js +2 -0
- package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/js/HyperLink/index.d.ts +2 -1
- package/dist/js/HyperLink/index.js +14 -0
- package/dist/js/HyperLink/index.js.map +1 -1
- package/dist/js/Toasters/Toast.js +5 -3
- package/dist/js/Toasters/Toast.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +8 -6
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +2 -6
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/ChipDropdownInput.js +1 -3
- package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/umd/Dropdown/DropdownButton.js +19 -1
- package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownContent.js +4 -4
- package/dist/umd/Dropdown/DropdownContent.js.map +1 -1
- package/dist/umd/Dropdown/DropdownFilter.js +2 -0
- package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/umd/HyperLink/index.js +7 -5
- package/dist/umd/HyperLink/index.js.map +1 -1
- package/dist/umd/Toasters/Toast.js +9 -18
- package/dist/umd/Toasters/Toast.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "styled-components", "../types", "../styles", "../icons/systemicons/SystemIcons", "../Button", "../styles/typography"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "../types", "../styles", "../icons/systemicons/SystemIcons", "../Button", "../styles/typography", "../HyperLink"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("../styles/typography"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("../styles/typography"), require("../HyperLink"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global.styles, global.SystemIcons, global.Button, global.typography);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global.styles, global.SystemIcons, global.Button, global.typography, global.HyperLink);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _styledComponents, _types, _styles, _SystemIcons, _Button, _typography) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _types, _styles, _SystemIcons, _Button, _typography, _HyperLink) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -204,13 +204,13 @@
|
|
|
204
204
|
min-height: 48px;
|
|
205
205
|
box-sizing: border-box;
|
|
206
206
|
|
|
207
|
+
${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
|
|
208
|
+
|
|
207
209
|
& a {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
+
display: inline;
|
|
211
|
+
${_HyperLink.HyperLinkInvertedStyling}
|
|
210
212
|
}
|
|
211
213
|
|
|
212
|
-
${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
|
|
213
|
-
|
|
214
214
|
&.${_types.ToastColor[_types.ToastColor.BLACK]} {
|
|
215
215
|
background-color: ${_styles.COLORS.neutral_800};
|
|
216
216
|
}
|
|
@@ -220,8 +220,7 @@
|
|
|
220
220
|
color: ${_styles.COLORS.black};
|
|
221
221
|
|
|
222
222
|
& a {
|
|
223
|
-
|
|
224
|
-
font-weight: bold;
|
|
223
|
+
${_HyperLink.HyperLinkDefaultStyling}
|
|
225
224
|
}
|
|
226
225
|
}
|
|
227
226
|
|
|
@@ -281,14 +280,6 @@
|
|
|
281
280
|
width: 240px;
|
|
282
281
|
display: flex;
|
|
283
282
|
padding: 16px 0;
|
|
284
|
-
|
|
285
|
-
a {
|
|
286
|
-
display: contents;
|
|
287
|
-
text-decoration: none;
|
|
288
|
-
}
|
|
289
|
-
a:hover {
|
|
290
|
-
text-decoration: underline;
|
|
291
|
-
}
|
|
292
283
|
`;
|
|
293
284
|
const IconContainer = _styledComponents2.default.span`
|
|
294
285
|
margin-right: -8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","COLORS","neutral_200","neutral_800","neutral_400","white","accent1_200","accent1_600","correct_200","correct_500","warning_200","warning_500","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","bezier","transform","ComponentSStyling","ComponentTextStyle","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","autoClose","delay","showCloseButton","action","label","handler","icon","remove","content","options","testId","DEFAULT_OPTIONS","color","position","ToastPosition","enterFrom","ToastEntryDirection","TOP","Toast","removeRef","React","elementRef","width","height","opts","id","setTimeout","setShouldRemove","clearTimeout","setDimensions","clientWidth","animation","animations","shouldRemove","direction","fromY","dimensions","toY","fromX","toX","prop","theme","Size","ToastActionType","event","enter","fromHeight","toHeight","fromWidth","toWidth","leave"],"mappings":"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","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';\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 & a {\n color: ${COLORS.white};\n font-weight: bold;\n }\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\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 color: ${COLORS.black};\n font-weight: bold;\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 background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\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 a {\n display: contents;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\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 setTimeout(() => elementRef?.current?.focus());\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\" shape=\"circular\" useTransparentBackground 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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","COLORS","neutral_200","neutral_800","neutral_400","white","accent1_200","accent1_600","correct_200","correct_500","warning_200","warning_500","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","bezier","transform","ComponentSStyling","ComponentTextStyle","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","autoClose","delay","showCloseButton","action","label","handler","icon","remove","content","options","testId","DEFAULT_OPTIONS","color","position","ToastPosition","enterFrom","ToastEntryDirection","TOP","Toast","removeRef","React","elementRef","width","height","opts","id","setTimeout","setShouldRemove","clearTimeout","setDimensions","clientWidth","animation","animations","shouldRemove","direction","fromY","dimensions","toY","fromX","toX","prop","theme","Size","ToastActionType","event","enter","fromHeight","toHeight","fromWidth","toWidth","leave"],"mappings":"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","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 background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\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 setTimeout(() => elementRef?.current?.focus());\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\" shape=\"circular\" useTransparentBackground 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"}
|