@laerdal/life-react-components 2.2.1-dev.9.full → 2.3.0

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_600","Z_INDEXES","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport Colors from \"../styles/colors\";\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ${focusStyles};\n  }\n\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_600};\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &.selected.floating {\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ${COLORS.neutral_100};\n    border-right: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover:after {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active, &:active.selected {\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    color: ${COLORS.neutral_300};\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.${Size.XSmall} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.${Size.Small} {\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.${Size.Medium} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.${Size.Large} {\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n  variant?: 'default' | 'floating';\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: 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  const [focused, setFocused] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if (selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if (x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if (e.key === 'ArrowRight') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = j + i;\n            if (nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n\n      if (e.key === 'ArrowLeft') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = i - j;\n            if (nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      {\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\n      }\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const {value, selected, to, disabled, className, ...rest} = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            disabled={disabled}\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            {tab.value}\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } 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';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \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  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\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  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\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    &: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 {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\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 extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: 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  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}

package/dist/Tabs/HorizontalTabs.d.ts

@@ -9,12 +9,11 @@ interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
     sideFill?: boolean;
     fullWidth?: boolean;
     onTabChange: (to: string) => void;
-    variant?: 'default' | 'floating';
 }
 export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
     value: string;
     selected: boolean;
     to: string;
 }
-declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
+declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => JSX.Element;
 export default HorizontalTabs;

package/dist/Tabs/HorizontalTabs.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
+var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
   _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -23,15 +23,16 @@ import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
  * Import third-party libraries.
  */
 import styled from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
-import { Z_INDEXES } from '../styles';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 import { defaultOnMouseDownHandler } from '../common';
+
+// Add custom styles
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-// Add custom styles
-var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), focusStyles);
+var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ", ";\n  }\n  \n"])), focusStyles);
 var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.white);
-var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
+var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
 
 // Add component-specific types
 
@@ -41,7 +42,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     sideFill = _ref.sideFill,
     fullWidth = _ref.fullWidth,
     onTabChange = _ref.onTabChange,
-    variant = _ref.variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
@@ -121,7 +121,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     role: "tablist",
     "data-testid": 'horizontal-tabs-container'
   }, rest), {}, {
-    children: [variant !== 'floating' && /*#__PURE__*/_jsx(TabSideFill, {
+    children: [/*#__PURE__*/_jsx(TabSideFill, {
       tabIndex: -1,
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
@@ -141,13 +141,15 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
         style: fullWidth ? {
           width: "".concat(100 / tabs.length, "%")
         } : {},
-        disabled: disabled,
-        className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
+        className: "".concat(className || '', " size-").concat(size),
         onClick: function onClick() {
           return !disabled && changeTabInternal(tab);
         }
       }, rest), {}, {
-        children: tab.value
+        children: /*#__PURE__*/_jsx("div", {
+          className: "size-".concat(size, " ").concat(tab.selected ? 'selected' : '', " ").concat(tab.disabled ? 'disabled' : ''),
+          children: tab.value
+        })
       }), "".concat(tab, "_").concat(index));
     })]
   }));
@@ -160,8 +162,7 @@ HorizontalTabs.propTypes = {
   })).isRequired,
   sideFill: _pt.bool,
   fullWidth: _pt.bool,
-  onTabChange: _pt.func.isRequired,
-  variant: _pt.oneOf(['default', 'floating'])
+  onTabChange: _pt.func.isRequired
 };
 export default HorizontalTabs;
 //# sourceMappingURL=HorizontalTabs.js.map

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_600","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport Colors from \"../styles/colors\";\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ${focusStyles};\n  }\n\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_600};\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &.selected.floating {\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ${COLORS.neutral_100};\n    border-right: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover:after {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active, &:active.selected {\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    color: ${COLORS.neutral_300};\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.${Size.XSmall} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.${Size.Small} {\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.${Size.Medium} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.${Size.Large} {\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n  variant?: 'default' | 'floating';\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: 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  const [focused, setFocused] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if (selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if (x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if (e.key === 'ArrowRight') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = j + i;\n            if (nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n\n      if (e.key === 'ArrowLeft') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = i - j;\n            if (nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      {\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\n      }\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const {value, selected, to, disabled, className, ...rest} = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            disabled={disabled}\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            {tab.value}\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AACrG,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAGpD;AACA,IAAMC,sBAAsB,GAAGP,MAAM,CAACQ,GAAG,0LAOnCT,WAAW,CAGhB;AAED,IAAMU,WAAW,GAAGT,MAAM,CAACQ,GAAG,2MAEDX,MAAM,CAACa,WAAW,EAK7Bb,MAAM,CAACc,KAAK,CAE7B;AAED,IAAMC,SAAS,GAAGZ,MAAM,CAACa,MAAM,y0DACpBhB,MAAM,CAACiB,WAAW,EAYdT,SAAS,CAACU,MAAM,EAQPlB,MAAM,CAACc,KAAK,EACvBd,MAAM,CAACmB,WAAW,EAIPnB,MAAM,CAACoB,UAAU,EASZpB,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,EAUxBb,MAAM,CAACqB,WAAW,EAUlBrB,MAAM,CAACqB,WAAW,EAKxBrB,MAAM,CAACsB,UAAU,EACtBtB,MAAM,CAACuB,WAAW,EAIPvB,MAAM,CAACuB,WAAW,EAIxBvB,MAAM,CAACwB,WAAW,EACvBxB,MAAM,CAACyB,WAAW,EAKPzB,MAAM,CAACyB,WAAW,EAI7BzB,MAAM,CAAC0B,WAAW,EAMzB3B,IAAI,CAAC4B,MAAM,EACXpB,kBAAkB,CAACN,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,EAMpD7B,IAAI,CAAC8B,KAAK,EACVvB,iBAAiB,CAACL,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,EAMnD7B,IAAI,CAAC+B,MAAM,EACXzB,iBAAiB,CAACJ,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,EAMnD7B,IAAI,CAACgC,KAAK,EACV3B,iBAAiB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,CAKxD;;AAED;;AAgBA,IAAMI,cAAc,GAAG,SAAjBA,cAAc,OAA6F;EAAA,IAAxFC,IAAI,QAAJA,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,WAAW,QAAXA,WAAW;IAAEC,OAAO,QAAPA,OAAO;IAAKC,IAAI;EACrF;AACF;AACA;AACA;EACE,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,EAAU,EAAW;IACxC;IACAJ,WAAW,CAACI,EAAE,CAAC;;IAEf;IACA,IAAIC,QAAQ,CAACC,aAAa,YAAYC,WAAW,EAAE;MACjDF,QAAQ,CAACC,aAAa,CAAEE,IAAI,EAAE;IAChC;EACF,CAAC;EAED,sBAA8B/C,KAAK,CAACgD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAArDC,OAAO;IAAEC,UAAU;EAC1B,uBAAoClD,KAAK,CAACgD,QAAQ,EAAU;IAAA;IAArDG,UAAU;IAAEC,aAAa;EAEhCpD,KAAK,CAACqD,SAAS,CAAC,YAAM;IACpB,IAAMC,WAAW,GAAGlB,IAAI,CAACmB,IAAI,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,QAAQ,IAAI,CAACD,CAAC,CAACE,QAAQ;IAAA,EAAC;IAC7D,IAAIJ,WAAW,EACbF,aAAa,CAACE,WAAW,CAACX,EAAE,CAAC;EACjC,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;EAEV,IAAMuB,WAAW,GAAG,SAAdA,WAAW;IAAA,OAAST,UAAU,CAAC,KAAK,CAAC;EAAA;EAE3C,IAAMU,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAA4C;IAAA,OAAKX,UAAU,CAAC,IAAI,CAAC;EAAA;EAEvF,IAAMY,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,GAAkB,EAAK;IAChDA,GAAG,CAACN,QAAQ,GAAG,IAAI;IACnBrB,IAAI,CAAC4B,OAAO,CAAC,UAAAR,CAAC,EAAI;MAChB,IAAIA,CAAC,CAACb,EAAE,IAAIoB,GAAG,CAACpB,EAAE,EAChBa,CAAC,CAACC,QAAQ,GAAG,KAAK;IACtB,CAAC,CAAC;IACFL,aAAa,CAACW,GAAG,CAACpB,EAAE,CAAC;IACrBJ,WAAW,CAACwB,GAAG,CAACpB,EAAE,CAAC;EACrB,CAAC;EAED,IAAMsB,cAAc,GAAG,SAAjBA,cAAc,CAAIJ,CAAsB,EAAK;IACjD,IAAIZ,OAAO,KAAKY,CAAC,CAACK,GAAG,KAAK,WAAW,IAAIL,CAAC,CAACK,GAAG,KAAK,YAAY,CAAC,EAAE;MAChEL,CAAC,CAACM,cAAc,EAAE;MAClB,IAAIN,CAAC,CAACK,GAAG,KAAK,YAAY,EAAE;QAC1B9B,IAAI,CAAC4B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAIZ,CAAC,CAACb,EAAE,IAAIQ,UAAU,EACpB;UAEF,KAAK,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EAAE;YACxC,IAAIE,SAAS,GAAGF,CAAC,GAAGD,CAAC;YACrB,IAAIG,SAAS,GAAGnC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAC7BC,SAAS,GAAGA,SAAS,GAAGnC,IAAI,CAACkC,MAAM;YACrC,IAAIlC,IAAI,CAACmC,SAAS,CAAC,CAACb,QAAQ,EAC1B;YACFI,iBAAiB,CAAC1B,IAAI,CAACmC,SAAS,CAAC,CAAC;YAClC;UACF;QACF,CAAC,CAAC;MACJ;MAEA,IAAIV,CAAC,CAACK,GAAG,KAAK,WAAW,EAAE;QACzB9B,IAAI,CAAC4B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAIZ,CAAC,CAACb,EAAE,IAAIQ,UAAU,EACpB;UAEF,KAAK,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EAAE;YACxC,IAAIE,SAAS,GAAGH,CAAC,GAAGC,CAAC;YACrB,IAAIE,SAAS,GAAG,CAAC,EACfA,SAAS,GAAGA,SAAS,GAAGnC,IAAI,CAACkC,MAAM;YACrC,IAAIlC,IAAI,CAACmC,SAAS,CAAC,CAACb,QAAQ,EAC1B;YACFI,iBAAiB,CAAC1B,IAAI,CAACmC,SAAS,CAAC,CAAC;YAClC;UACF;QACF,CAAC,CAAC;MACJ;IACF;EACF,CAAC;EAED,oBACE,MAAC,sBAAsB;IAAC,QAAQ,EAAE,CAAE;IAAC,MAAM,EAAEZ,WAAY;IAAC,OAAO,EAAEC,YAAa;IAAC,SAAS,EAAEK,cAAe;IACnF,IAAI,EAAC,SAAS;IAAC,eAAa;EAA4B,GAAKxB,IAAI;IAAA,WAErFD,OAAO,KAAK,UAAU,iBAAI,KAAC,WAAW;MAAC,QAAQ,EAAE,CAAC,CAAE;MAAC,SAAS,YAAKH,QAAQ,GAAG,MAAM,GAAG,EAAE;IAAG,EAAE,EAE/FD,IAAI,CAACoC,GAAG,CAAC,UAACT,GAAkB,EAAEU,KAAa,EAAK;MAC/C,IAAOC,KAAK,GAAgDX,GAAG,CAAxDW,KAAK;QAAEjB,QAAQ,GAAsCM,GAAG,CAAjDN,QAAQ;QAAEd,EAAE,GAAkCoB,GAAG,CAAvCpB,EAAE;QAAEe,QAAQ,GAAwBK,GAAG,CAAnCL,QAAQ;QAAEiB,SAAS,GAAaZ,GAAG,CAAzBY,SAAS;QAAKlC,IAAI,4BAAIsB,GAAG;MAC/D,oBACE,KAAC,SAAS;QACR,IAAI,EAAC,KAAK;QACV,6BAAoBW,KAAK,CAAG;QAE5B,iBAAejB,QAAS;QACxB,iBAAeA,QAAS;QACxB,QAAQ,EAAE,CAAC,CAAE;QACb,WAAW,EAAE9C,yBAA0B;QACvC,KAAK,EAAE2B,SAAS,GAAG;UAACsC,KAAK,YAAK,GAAG,GAAGxC,IAAI,CAACkC,MAAM;QAAG,CAAC,GAAG,CAAC,CAAE;QACzD,QAAQ,EAAEZ,QAAS;QACnB,SAAS,YAAKiB,SAAS,IAAI,EAAE,cAAIxC,IAAI,cAAIK,OAAO,IAAI,SAAS,cAAIuB,GAAG,CAACN,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAG;QAClG,OAAO,EAAE;UAAA,OAAM,CAACC,QAAQ,IAAII,iBAAiB,CAACC,GAAG,CAAC;QAAA;MAAC,GAC/CtB,IAAI;QAAA,UACPsB,GAAG,CAACW;MAAK,cAVFX,GAAG,cAAIU,KAAK,EAWV;IAEhB,CAAC,CAAC;EAAA,GACqB;AAE7B,CAAC;AAAC;EAtHArC,IAAI;IAQJsC,KAAK;IACLjB,QAAQ;IACRd,EAAE;EAAA;EATFN,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,OAAO,aAAG,SAAS,EAAG,UAAU;AAAA;AAoHlC,eAAeN,cAAc"}
+{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } 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';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \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  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\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  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\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    &: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 {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\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 extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: 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  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}

package/dist/Tabs/TabLink.cjs

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
@@ -17,21 +19,25 @@ var _styles = require("../styles");
 var _zIndexes = require("../styles/z-indexes");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\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    ", "\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\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: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
+var TopWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
+var StyledNotification = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
+var EndLineIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
+var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n"])));
+//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
+var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n  \n    background-color: ", ";\n    cursor: ", ";\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      ", "\n    }\n  \n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n  \n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.active:active {\n      background-color: ", ";\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n  \n      span {\n        color: ", ";\n      }\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
   return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-var TopWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-var StyledNotification = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
-var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n"])));
-var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n  }\n"])), StyledTabLink);
-var TabLink = function TabLink(_ref) {
+var TabLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -39,25 +45,40 @@ var TabLink = function TabLink(_ref) {
     optionalLine = _ref.optionalLine,
     OptionalLineIcon = _ref.OptionalLineIcon,
     onLinkClick = _ref.onLinkClick,
+    forceDeactivate = _ref.forceDeactivate,
     testId = _ref.testId,
     _ref$showNotification = _ref.showNotificationDot,
     showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
+    endLineIcon = _ref.endLineIcon,
+    onActiveStateChanged = _ref.onActiveStateChanged,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
-  var ref = React.useRef(null);
+    variant = _ref$variant === void 0 ? 'critical' : _ref$variant,
+    children = _ref.children,
+    containerOnMouseEnter = _ref.containerOnMouseEnter,
+    containerOnMouseLeave = _ref.containerOnMouseLeave,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, React.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeState = _useState2[0],
     setActiveState = _useState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    disabled: disabled,
     className: disabled ? 'disabled' : '',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTabLink, {
-      to: to.toString(),
-      disabled: disabled,
+    onMouseEnter: containerOnMouseEnter,
+    onMouseLeave: containerOnMouseLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, _objectSpread(_objectSpread({
+      to: forceDeactivate ? 'invalid' : to.toString()
+      //disabled={disabled}
+      ,
       className: function className(_ref2) {
         var isActive = _ref2.isActive;
+        onActiveStateChanged && onActiveStateChanged(activeState);
+        if (forceDeactivate) {
+          if (disabled) return 'disabled';else return '';
+        }
         if (isActive != activeState) setActiveState(isActive);
         return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
       },
@@ -69,7 +90,8 @@ var TabLink = function TabLink(_ref) {
         return !disabled && onLinkClick && onLinkClick(e);
       },
       ref: ref,
-      "data-testid": testId,
+      "data-testid": testId
+    }, rest), {}, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopWrapper, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -90,10 +112,12 @@ var TabLink = function TabLink(_ref) {
           size: size,
           variant: variant
         })
+      }), endLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndLineIcon, {
+        children: endLineIcon
       })]
-    })
+    })), children]
   });
-};
+});
 var _default = TabLink;
 exports.default = _default;
 //# sourceMappingURL=TabLink.cjs.map

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["StyledTabLink","styled","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: 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    ${focusStyles}\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  &: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    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    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\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\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\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 Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.cjs","names":["OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","React","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\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\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{disabled: boolean}>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \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      ${focusStyles}\n    }\n  \n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      background-color: ${COLORS.primary_20};\n    }\n  \n    &:hover, &.dropdown-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      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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover, &.active.dropdown-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      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n  \n      span {\n        color: ${COLORS.neutral_300};\n      }\n  \n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps, ref) => {\n  \n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <NavLink\n        to={forceDeactivate ? 'invalid' : to.toString()}\n        //disabled={disabled}\n        className={({ isActive }) => {\n          onActiveStateChanged && onActiveStateChanged(activeState);\n          if(forceDeactivate)\n            {\n              if(disabled) \n                return 'disabled';\n              else \n                return '';\n            }\n\n          if(isActive != activeState)\n            setActiveState(isActive);\n\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}\n        {...rest}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n        {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n      </NavLink>\n      {children}\n    </Wrapper>\n  );\n});\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tabs/TabLink.d.ts

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { NavLinkProps } from 'react-router-dom';
 import { Size } from '../types';
-type TabLinkProps = {
-    disabled?: boolean;
+declare const TabLink: React.ForwardRefExoticComponent<{
+    disabled?: boolean | undefined;
+    forceDeactivate?: boolean | undefined;
     requiredLine: string;
-    optionalLine?: string;
+    optionalLine?: string | undefined;
     OptionalLineIcon?: React.ReactNode;
-    onLinkClick?: (e: React.MouseEvent) => void;
-    testId?: string;
-    showNotificationDot?: boolean;
-    size?: Size.Small | Size.Medium | Size.Large;
-    variant?: 'positive' | 'critical';
-} & NavLinkProps;
-declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant, }: TabLinkProps) => JSX.Element;
+    endLineIcon?: React.ReactNode;
+    onLinkClick?: ((e: React.MouseEvent) => void) | undefined;
+    testId?: string | undefined;
+    onActiveStateChanged?: ((state: boolean) => void) | undefined;
+    showNotificationDot?: boolean | undefined;
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    variant?: "positive" | "critical" | undefined;
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+} & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default TabLink;

package/dist/Tabs/TabLink.js

@@ -1,6 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
@@ -13,18 +18,19 @@ import { useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var StyledTabLink = styled(NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\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    ", "\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\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: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
+var OptionalLineWrapperWithIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
+var TopWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
+var StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
+var EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
+var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
+//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
+var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n  \n    background-color: ", ";\n    cursor: ", ";\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      ", "\n    }\n  \n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n  \n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.active:active {\n      background-color: ", ";\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n  \n      span {\n        color: ", ";\n      }\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
   return props.disabled ? COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var OptionalLineWrapperWithIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-var TopWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-var StyledNotification = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
-var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
-var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n  }\n"])), StyledTabLink);
-var TabLink = function TabLink(_ref) {
+var TabLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -32,25 +38,40 @@ var TabLink = function TabLink(_ref) {
     optionalLine = _ref.optionalLine,
     OptionalLineIcon = _ref.OptionalLineIcon,
     onLinkClick = _ref.onLinkClick,
+    forceDeactivate = _ref.forceDeactivate,
     testId = _ref.testId,
     _ref$showNotification = _ref.showNotificationDot,
     showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? Size.Small : _ref$size,
+    endLineIcon = _ref.endLineIcon,
+    onActiveStateChanged = _ref.onActiveStateChanged,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
-  var ref = React.useRef(null);
+    variant = _ref$variant === void 0 ? 'critical' : _ref$variant,
+    children = _ref.children,
+    containerOnMouseEnter = _ref.containerOnMouseEnter,
+    containerOnMouseLeave = _ref.containerOnMouseLeave,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     activeState = _useState2[0],
     setActiveState = _useState2[1];
-  return /*#__PURE__*/_jsx(Wrapper, {
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    disabled: disabled,
     className: disabled ? 'disabled' : '',
-    children: /*#__PURE__*/_jsxs(StyledTabLink, {
-      to: to.toString(),
-      disabled: disabled,
+    onMouseEnter: containerOnMouseEnter,
+    onMouseLeave: containerOnMouseLeave,
+    children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
+      to: forceDeactivate ? 'invalid' : to.toString()
+      //disabled={disabled}
+      ,
       className: function className(_ref2) {
         var isActive = _ref2.isActive;
+        onActiveStateChanged && onActiveStateChanged(activeState);
+        if (forceDeactivate) {
+          if (disabled) return 'disabled';else return '';
+        }
         if (isActive != activeState) setActiveState(isActive);
         return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
       },
@@ -62,7 +83,8 @@ var TabLink = function TabLink(_ref) {
         return !disabled && onLinkClick && onLinkClick(e);
       },
       ref: ref,
-      "data-testid": testId,
+      "data-testid": testId
+    }, rest), {}, {
       children: [/*#__PURE__*/_jsxs(TextContainer, {
         children: [/*#__PURE__*/_jsx(TopWrapper, {
           children: /*#__PURE__*/_jsx("span", {
@@ -83,9 +105,11 @@ var TabLink = function TabLink(_ref) {
           size: size,
           variant: variant
         })
+      }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
+        children: endLineIcon
       })]
-    })
+    })), children]
   });
-};
+});
 export default TabLink;
 //# sourceMappingURL=TabLink.js.map