@laerdal/life-react-components 1.2.2-dev.5.full → 1.2.2-dev.8

package/dist/umd/Tabs/HorizontalTabs.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../styles", "styled-components", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "../styles", "styled-components", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styles, _styledComponents, _typography) {
+})(this, function (exports, _propTypes, _react, _styles, _styledComponents, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -100,8 +100,7 @@
   const TabSideFill = _styledComponents2.default.div`
   position: absolute;
   border-bottom: 1px solid ${_styles.COLORS.neutral_100};
-  height: Calc(100% - 1px);
-  z-index: 1;
+  bottom: 0;
   width: 100%;
 
   &.fill {
@@ -112,7 +111,6 @@
   color: ${_styles.COLORS.neutral_800};
   border: none;
   background-color: transparent;
-  z-index: 2;
   cursor: pointer;
   padding: 0px;
 
@@ -130,6 +128,7 @@
   }
 
   &:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     div {
       background: ${_styles.COLORS.primary_20};
       color: ${_styles.COLORS.primary_700};
@@ -142,8 +141,14 @@
       }
     }
   }
+  &.selected{
+    z-index: ${_zIndexes.Z_INDEXES.active};
+  }
   
   &:focus {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+    outline: none;
+    
     div {
       color: ${_styles.COLORS.primary_800};
       box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;

package/dist/umd/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","Z_INDEXES","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n    \n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/umd/Tabs/TabLink.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NotificationDot", "../styles"], factory);
+    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NotificationDot", "../styles", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NotificationDot"), require("../styles"));
+    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NotificationDot"), require("../styles"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NotificationDot, global.styles);
+    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NotificationDot, global.styles, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NotificationDot, _styles) {
+})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NotificationDot, _styles, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -100,6 +100,7 @@
   }
 
   &:focus {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
     background-color: ${_styles.COLORS.white};
     box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
     outline: none;
@@ -110,24 +111,31 @@
   }
 
   &.active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     background-color: ${_styles.COLORS.neutral_20};
   }
+
   &.active:hover {
     background-color: ${_styles.COLORS.primary_20};
   }
+
   &.active:focus {
     background-color: ${_styles.COLORS.white};
   }
 
   &:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_600};
   }
+
   &:active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     box-shadow: none;
     background-color: ${_styles.COLORS.primary_100};
     color: ${_styles.COLORS.primary_800};
   }
+
   &.active {
     &::after {
       position: absolute;
@@ -138,17 +146,16 @@
       left: -1px;
       background-color: ${_styles.COLORS.primary_500};
 
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-radius: 2px;
     }
   }
+
   &.active:hover {
     &::after {
       background-color: ${_styles.COLORS.primary_600};
     }
   }
+
   &.active:active {
     background-color: ${_styles.COLORS.primary_100};
 
@@ -156,12 +163,15 @@
       background-color: ${_styles.COLORS.primary_800};
     }
   }
+
   &:disabled {
     box-shadow: none;
     background-color: ${_styles.COLORS.white};
+
     span {
       color: ${_styles.COLORS.neutral_300};
     }
+
     &::after {
       background-color: ${_styles.COLORS.white};
     }

package/dist/umd/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","size","variant","StyledTabLink","styled","COLORS","neutral_600","props","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","size","variant","StyledTabLink","styled","COLORS","neutral_600","props","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,QAAMQ,aAAa,GAAGC,gCAAM,uBAANA,CAAoC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,eAAOC,WAAY;AAC9B;AACA,sBAAuBC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAiBF,eAAjBE,WAAAA,GAAsC,aAAe;AACvF,YAAaA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,aAAAA,GAAiC,SAAW;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeC,oBAAUC,KAAM;AAC/B,wBAAwBJ,eAAOK,KAAM;AACrC;AACA;AACA;AACA;AACA,0BAA0BL,eAAOK,KAAM;AACvC;AACA;AACA;AACA;AACA,eAAeF,oBAAUG,MAAO;AAChC,wBAAwBN,eAAOO,UAAW;AAC1C;AACA;AACA;AACA,wBAAwBP,eAAOQ,UAAW;AAC1C;AACA;AACA;AACA,wBAAwBR,eAAOK,KAAM;AACrC;AACA;AACA;AACA,eAAeF,oBAAUM,KAAM;AAC/B,wBAAwBT,eAAOQ,UAAW;AAC1C,aAAaR,eAAOU,WAAY;AAChC;AACA;AACA;AACA,eAAeP,oBAAUG,MAAO;AAChC;AACA,wBAAwBN,eAAOW,WAAY;AAC3C,aAAaX,eAAOY,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BZ,eAAOa,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0Bb,eAAOU,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBV,eAAOW,WAAY;AAC3C;AACA;AACA,0BAA0BX,eAAOY,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,eAAOK,KAAM;AACrC;AACA;AACA,eAAeL,eAAOc,WAAY;AAClC;AACA;AACA;AACA,0BAA0Bd,eAAOK,KAAM;AACvC;AACA;AAhGA,CAAA;AAmGA,QAAMU,2BAA2B,GAAGhB,2BAAOiB,GAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,CAAA;AAUA,QAAMC,UAAU,GAAGlB,2BAAOiB,GAAI;AAC9B;AACA;AACA;AACA;AACA;AALA,CAAA;AAQA,QAAME,aAAa,GAAGnB,2BAAOiB,GAAI;AACjC;AADA,CAAA;AAIA,QAAMG,kBAAkB,GAAGpB,2BAAOiB,GAAI;AACtC;AADA,CAAA;AAIA,QAAMI,mBAAmB,GAAGrB,2BAAOiB,GAAI;AACvC;AADA,CAAA;;AAIA,QAAMK,OAAO,GAAG,CAAC;AAAA,IAAA,EAAA;AAAM/B,IAAAA,QAAQ,GAAd,KAAA;AAAwBgC,IAAAA,KAAK,GAA7B,KAAA;AAAA,IAAA,YAAA;AAAA,IAAA,YAAA;AAAA,IAAA,gBAAA;AAAA,IAAA,WAAA;AAAA,IAAA,MAAA;AAA0G3B,IAAAA,mBAAmB,GAA7H,KAAA;AAAuIC,IAAAA,IAAI,GAA3I,OAAA;AAAuJC,IAAAA,OAAO,GAAG;AAAjK,GAAD,KAAiM;AAC/M,UAAM0B,QAAQ,GAAd,kCAAA;AACA,UAAMC,GAAG,GAAGC,KAAK,CAALA,MAAAA,CAAZ,IAAYA,CAAZ;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AACE,MAAA,EAAE,EAAEC,EAAE,CADR,QACMA,EADN;AAEE,MAAA,eAAe,EAFjB,QAAA;AAGE,MAAA,QAAQ,EAHV,QAAA;AAIE,MAAA,KAAK,EAJP,KAAA;AAKE,MAAA,IAAI,EALN,KAAA;AAME,uBAAeA,EAAE,KAAKH,QAAQ,CANhC,QAAA;AAOE,MAAA,OAAO,EAAE,MAAM;AACbC,QAAAA,GAAG,EAAHA,OAAAA,EAAAA,IAAAA;;AACA,YAAA,WAAA,EAAiB;AACf/B,UAAAA,WAAW;AACZ;AAXL,OAAA;AAaE,MAAA,GAAG,EAbL,GAAA;AAcE,qBAAaC;AAdf,KAAA,EAAA,aAeE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACA,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAFF,YAEE,CADF,CADA,EAIC,YAAY,IAAZ,gBAAA,GAAA,aACC,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,EACGiC,gBAAgB,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAkB,MAAA,IAAI,EAAC;AAAvB,KAAA,CADvB,EAEGnC,YAAY,KAAZA,SAAAA,IAAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHlC,YAGkC,CAFjC,CADD,GAKGA,YAAY,GAAA,aACd,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAFY,YAEZ,CADF,CADc,GAAA,aAKd,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EA7BJ,IA6BI,CAdF,CAfF,EAAA,aAgCE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,IAAA,EACGG,mBAAmB,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,gCAAA,EAAA;AAAiB,MAAA,MAAM,EAAvB,iBAAA;AAA0C,MAAA,IAAI,EAA9C,IAAA;AAAsD,MAAA,OAAO,EAAEE;AAA/D,KAAA,CAD1B,CAhCF,CADF;AAJF,GAAA;;;AAjJEP,IAAAA,Q;AACAC,IAAAA,Y;AACAC,IAAAA,Y;AAEAC,IAAAA,W;AACAC,IAAAA,M;AACAC,IAAAA,mB;AACAC,IAAAA,I;AACAC,IAAAA,O,6BAAU,U,EAAa,U;;oBAqLzB,O","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/umd/Toasters/Toast.js

@@ -359,7 +359,11 @@
     }
 
     const theme = _types.ToastColor[opts.color ?? _types.ToastColor.BLACK];
-    setTimeout(() => elementRef?.current?.focus());
+
+    if (!shouldRemove) {
+      setTimeout(() => elementRef?.current?.focus());
+    }
+
     return /*#__PURE__*/React.createElement(Container, {
       "data-testid": testId,
       animation: prop,

package/dist/umd/Toasters/Toast.js.map

@@ -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","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"}
+{"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  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\" 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"}

package/dist/umd/Toasters/ToastContext.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "styled-components", "../Services/functions", "./Toast", "../types"], factory);
+    define(["exports", "react", "styled-components", "../Services/functions", "./Toast", "../types", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("styled-components"), require("../Services/functions"), require("./Toast"), require("../types"));
+    factory(exports, require("react"), require("styled-components"), require("../Services/functions"), require("./Toast"), require("../types"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.styledComponents, global.functions, global.Toast, global.types);
+    factory(mod.exports, global.react, global.styledComponents, global.functions, global.Toast, global.types, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _styledComponents, _functions, _Toast, _types) {
+})(this, function (exports, _react, _styledComponents, _functions, _Toast, _types, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -138,7 +138,7 @@
   const ToastContext = exports.ToastContext = React.createContext({});
   const ToastBucket = _styledComponents2.default.div`
   position: fixed;
-  z-index: 9999;
+  z-index: ${_zIndexes.Z_INDEXES.toast};
   display: flex;
   flex-direction: column-reverse;
 `;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","ToastBucket","styled","div","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","add","id","setToasts","prev","options","remove","toasts","t","functions","addToast","removeToast","ToastPosition"],"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';\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: 9999;\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.js"}
+{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","ToastBucket","styled","div","Z_INDEXES","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","add","id","setToasts","prev","options","remove","toasts","t","functions","addToast","removeToast","ToastPosition"],"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.js"}

package/dist/umd/Tooltips/TooltipStyles.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../types", "../styles", "../styles/typography"], factory);
+    define(["exports", "styled-components", "../types", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../types"), require("../styles"), require("../styles/typography"));
+    factory(exports, require("styled-components"), require("../types"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.types, global.styles, global.typography);
+    factory(mod.exports, global.styledComponents, global.types, global.styles, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _types, _styles, _typography) {
+})(this, function (exports, _styledComponents, _types, _styles, _typography, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -43,11 +43,11 @@
     border-radius: 2px;
     width: max-content;
     height: ${props => props.height};
-    max-width: 34ems;
+    max-width: 34em;
     background: ${_styles.COLORS.primary_800};
     position: absolute; 
     opacity: 0; 
-    z-index: 1;
+    z-index: ${_zIndexes.Z_INDEXES.tooltip};
     ${props => props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''}
 
     ${props => props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}

package/dist/umd/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","withArrow","align","position","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34ems;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: 1;\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","withArrow","align","position","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/umd/styles/z-indexes.js

@@ -0,0 +1,33 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  const Z_INDEXES = exports.Z_INDEXES = {
+    hover: '1',
+    active: '2',
+    focus: '3',
+    dropdown: '1000',
+    sticky_menu: '1020',
+    fixed_menu: '1030',
+    backdrop: '1040',
+    off_canvas: '1050',
+    modal: '1060',
+    toast: '1070',
+    tooltip: '1080'
+  };
+});
+//# sourceMappingURL=z-indexes.js.map

package/dist/umd/styles/z-indexes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":";;;;;;;;;;;;;;;;;;AAAO,QAAMA,SAAS,WAATA,SAAS,GAAG;AACvBC,IAAAA,KAAK,EADkB,GAAA;AAEvBC,IAAAA,MAAM,EAFiB,GAAA;AAGvBC,IAAAA,KAAK,EAHkB,GAAA;AAMvBC,IAAAA,QAAQ,EANe,MAAA;AAOvBC,IAAAA,WAAW,EAPY,MAAA;AAQvBC,IAAAA,UAAU,EARa,MAAA;AASvBC,IAAAA,QAAQ,EATe,MAAA;AAUvBC,IAAAA,UAAU,EAVa,MAAA;AAWvBC,IAAAA,KAAK,EAXkB,MAAA;AAYvBC,IAAAA,KAAK,EAZkB,MAAA;AAavBC,IAAAA,OAAO,EAAE;AAbc,GAAlB","sourcesContent":["export const Z_INDEXES = {\n  hover: '1',\n  active: '2',\n  focus: '3',\n\n\n  dropdown: '1000',\n  sticky_menu: '1020',\n  fixed_menu: '1030',\n  backdrop: '1040',\n  off_canvas: '1050',\n  modal: '1060',\n  toast: '1070',\n  tooltip: '1080',\n}\n"],"file":"z-indexes.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.2.2-dev.5.full",
+  "version": "1.2.2-dev.8",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [