@laerdal/life-react-components 2.3.1-dev.7 → 2.3.1-dev.9

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 styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\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","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","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 styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\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 {\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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\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`;\n\nconst TabLink = ({\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) => {\n  const ref = React.useRef<any>(null);\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

@@ -3,14 +3,19 @@ import { NavLinkProps } from 'react-router-dom';
 import { Size } from '../types';
 type TabLinkProps = {
     disabled?: boolean;
+    forceDeactivate?: boolean;
     requiredLine: string;
     optionalLine?: string;
     OptionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
     onLinkClick?: (e: React.MouseEvent) => void;
     testId?: string;
+    onActiveStateChanged?: (state: boolean) => void;
     showNotificationDot?: boolean;
     size?: Size.Small | Size.Medium | Size.Large;
     variant?: 'positive' | 'critical';
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 } & NavLinkProps;
-declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant, }: TabLinkProps) => JSX.Element;
+declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, forceDeactivate, testId, showNotificationDot, size, endLineIcon, onActiveStateChanged, variant, children, containerOnMouseEnter, containerOnMouseLeave, className, ...rest }: TabLinkProps) => JSX.Element;
 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,17 +18,18 @@ 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 {\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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\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  }\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 to = _ref.to,
     _ref$disabled = _ref.disabled,
@@ -32,25 +38,41 @@ 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;
+    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 ref = React.useRef(null);
   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 +84,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,8 +106,10 @@ var TabLink = function TabLink(_ref) {
           size: size,
           variant: variant
         })
+      }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
+        children: endLineIcon
       })]
-    })
+    })), children]
   });
 };
 export default TabLink;

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","StyledTabLink","neutral_600","props","disabled","neutral_100","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","Small","variant","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\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.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\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 {\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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\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`;\n\nconst TabLink = ({\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) => {\n  const ref = React.useRef<any>(null);\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/VerticalTabs.cjs

@@ -24,6 +24,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
         to: entry.to,
         requiredLine: entry.requiredLine,
         optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
         OptionalLineIcon: entry.optionalLineIcon,
         disabled: entry.disabled,
         showNotificationDot: entry.showNotificationDot,
@@ -43,6 +44,7 @@ VerticalTabs.propTypes = {
     requiredLine: _propTypes.default.string.isRequired,
     optionalLine: _propTypes.default.string,
     optionalLineIcon: _propTypes.default.node,
+    endLineIcon: _propTypes.default.node,
     to: _propTypes.default.string.isRequired,
     disabled: _propTypes.default.bool,
     onClick: _propTypes.default.func,

package/dist/Tabs/VerticalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAiBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,gBAAgB,EAAEH,KAAK,CAACI,gBAAiB;QACzC,QAAQ,EAAEJ,KAAK,CAACK,QAAS;QACzB,mBAAmB,EAAEL,KAAK,CAACM,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEK,KAAK,CAACO,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIR,KAAK,CAACS,OAAO,EAAE;YACjBT,KAAK,CAACS,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAbGR,KAAK,CAACC,EAAE,CAaT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EAzBAL,OAAO;IAXPM,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBH,EAAE;IACFI,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eA+BpBb,YAAY;AAAA"}
+{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAkBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEZ,IAAK;QACX,OAAO,EAAEK,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAL,OAAO;IAZPM,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eAgCpBd,YAAY;AAAA"}

package/dist/Tabs/VerticalTabs.d.ts

@@ -4,6 +4,7 @@ export interface VerticalTabEntry {
     requiredLine: string;
     optionalLine?: string;
     optionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
     to: string;
     disabled?: boolean;
     onClick?: (e: React.MouseEvent) => void;

package/dist/Tabs/VerticalTabs.js

@@ -14,6 +14,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
         to: entry.to,
         requiredLine: entry.requiredLine,
         optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
         OptionalLineIcon: entry.optionalLineIcon,
         disabled: entry.disabled,
         showNotificationDot: entry.showNotificationDot,
@@ -33,6 +34,7 @@ VerticalTabs.propTypes = {
     requiredLine: _pt.string.isRequired,
     optionalLine: _pt.string,
     optionalLineIcon: _pt.node,
+    endLineIcon: _pt.node,
     to: _pt.string.isRequired,
     disabled: _pt.bool,
     onClick: _pt.func,

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAiBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,gBAAgB,EAAEH,KAAK,CAACI,gBAAiB;QACzC,QAAQ,EAAEJ,KAAK,CAACK,QAAS;QACzB,mBAAmB,EAAEL,KAAK,CAACM,mBAAoB;QAC/C,IAAI,EAAEV,IAAK;QACX,OAAO,EAAEI,KAAK,CAACO,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIR,KAAK,CAACS,OAAO,EAAE;YACjBT,KAAK,CAACS,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAbGR,KAAK,CAACC,EAAE,CAaT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EAzBAJ,OAAO;IAXPK,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBH,EAAE;IACFI,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AA+BnC,eAAeZ,YAAY"}
+{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAkBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEI,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAJ,OAAO;IAZPK,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAgCnC,eAAeb,YAAY"}

package/dist/Tooltips/TooltipOverflow.cjs

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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 _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _reactResizeDetector = require("react-resize-detector");
+var _TooltipStyles = require("./TooltipStyles");
+var _ = require("..");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["label", "children", "input", "withArrow", "maxWidth", "width", "value", "size", "height", "align", "position"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 TooltipOverflow = function TooltipOverflow(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    input = _ref.input,
+    withArrow = _ref.withArrow,
+    maxWidth = _ref.maxWidth,
+    width = _ref.width,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _.Size.Small : _ref$size,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom' : _ref$position,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    textOverflowed = _React$useState2[0],
+    setTextOverflowed = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    focused = _React$useState4[0],
+    setFocused = _React$useState4[1];
+  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
+      targetRef: input
+    }),
+    customW = _useResizeDetector.width,
+    customH = _useResizeDetector.height;
+  React.useEffect(function () {
+    checkIfOverflowed();
+  }, [customW, customH]);
+  var checkIfOverflowed = function checkIfOverflowed() {
+    var _ref2, _input$current;
+    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
+    var over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    if ((input === null || input === void 0 ? void 0 : (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.id) == "overflowTest") {
+      console.log(input.current.offsetWidth);
+      console.log(input.current.scrollWidth);
+      console.log(input.current);
+    }
+    setTextOverflowed(over);
+  };
+  React.useEffect(function () {
+    checkIfOverflowed();
+  });
+  var onFocus = function onFocus() {
+    checkIfOverflowed();
+    setFocused(true);
+  };
+  var onBlur = function onBlur() {
+    setFocused(false);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (input !== null && input !== void 0 && input.current) {
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("focus", onFocus);
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("blur", onBlur);
+      }
+    };
+  }, []);
+  var renderedCallback = React.useCallback(function (node) {
+    if (input && input.current) {
+      input.current.addEventListener("focus", onFocus);
+      input.current.addEventListener("blur", onBlur);
+      checkIfOverflowed();
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: renderedCallback,
+    children: textOverflowed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, _objectSpread(_objectSpread({
+      align: align,
+      height: height,
+      role: "tooltip",
+      maxWidth: maxWidth,
+      width: width,
+      size: size,
+      withArrow: withArrow,
+      position: position
+    }, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [children, " "]
+      })
+    }))
+  });
+};
+TooltipOverflow.propTypes = {
+  maxWidth: _propTypes.default.string,
+  width: _propTypes.default.string,
+  value: _propTypes.default.string
+};
+var _default = TooltipOverflow;
+exports.default = _default;
+//# sourceMappingURL=TooltipOverflow.cjs.map

package/dist/Tooltips/TooltipOverflow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipOverflow.cjs","names":["TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","React","useState","textOverflowed","setTextOverflowed","focused","setFocused","useResizeDetector","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","id","console","log","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","node","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    if(input?.current?.id == \"overflowTest\")\n    {\n      console.log(input.current.offsetWidth);\n      console.log(input.current.scrollWidth);\n      console.log(input.current);\n    }\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(node => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TooltipProps } from './TooltipTypes';
+interface TooltipOverflowProps extends TooltipProps {
+    input?: React.MutableRefObject<HTMLInputElement | null>;
+    maxWidth?: string;
+    width?: string;
+    value?: string;
+}
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
+export default TooltipOverflow;

package/dist/Tooltips/TooltipOverflow.js

@@ -0,0 +1,107 @@
+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 _pt from "prop-types";
+var _excluded = ["label", "children", "input", "withArrow", "maxWidth", "width", "value", "size", "height", "align", "position"];
+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 { useResizeDetector } from 'react-resize-detector';
+import { Tooltip } from './TooltipStyles';
+import { Size } from '..';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var TooltipOverflow = function TooltipOverflow(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    input = _ref.input,
+    withArrow = _ref.withArrow,
+    maxWidth = _ref.maxWidth,
+    width = _ref.width,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Small : _ref$size,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom' : _ref$position,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    textOverflowed = _React$useState2[0],
+    setTextOverflowed = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focused = _React$useState4[0],
+    setFocused = _React$useState4[1];
+  var _useResizeDetector = useResizeDetector({
+      targetRef: input
+    }),
+    customW = _useResizeDetector.width,
+    customH = _useResizeDetector.height;
+  React.useEffect(function () {
+    checkIfOverflowed();
+  }, [customW, customH]);
+  var checkIfOverflowed = function checkIfOverflowed() {
+    var _ref2, _input$current;
+    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
+    var over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    if ((input === null || input === void 0 ? void 0 : (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.id) == "overflowTest") {
+      console.log(input.current.offsetWidth);
+      console.log(input.current.scrollWidth);
+      console.log(input.current);
+    }
+    setTextOverflowed(over);
+  };
+  React.useEffect(function () {
+    checkIfOverflowed();
+  });
+  var onFocus = function onFocus() {
+    checkIfOverflowed();
+    setFocused(true);
+  };
+  var onBlur = function onBlur() {
+    setFocused(false);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (input !== null && input !== void 0 && input.current) {
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("focus", onFocus);
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("blur", onBlur);
+      }
+    };
+  }, []);
+  var renderedCallback = React.useCallback(function (node) {
+    if (input && input.current) {
+      input.current.addEventListener("focus", onFocus);
+      input.current.addEventListener("blur", onBlur);
+      checkIfOverflowed();
+    }
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: renderedCallback,
+    children: textOverflowed && /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      align: align,
+      height: height,
+      role: "tooltip",
+      maxWidth: maxWidth,
+      width: width,
+      size: size,
+      withArrow: withArrow,
+      position: position
+    }, props), {}, {
+      children: /*#__PURE__*/_jsxs("span", {
+        children: [children, " "]
+      })
+    }))
+  });
+};
+TooltipOverflow.propTypes = {
+  maxWidth: _pt.string,
+  width: _pt.string,
+  value: _pt.string
+};
+export default TooltipOverflow;
+//# sourceMappingURL=TooltipOverflow.js.map

package/dist/Tooltips/TooltipOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipOverflow.js","names":["React","useResizeDetector","Tooltip","Size","TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Small","height","align","position","props","useState","textOverflowed","setTextOverflowed","focused","setFocused","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","id","console","log","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","node","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    if(input?.current?.id == \"overflowTest\")\n    {\n      console.log(input.current.offsetWidth);\n      console.log(input.current.scrollWidth);\n      console.log(input.current);\n    }\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(node => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}