@laerdal/life-react-components 2.3.1-dev.11.full → 2.3.1-dev.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/Banners/Banner.cjs.map +1 -1
  2. package/dist/Banners/Banner.js.map +1 -1
  3. package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
  4. package/dist/Dropdown/DropdownContent.cjs +1 -1
  5. package/dist/Dropdown/DropdownContent.js +1 -1
  6. package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
  7. package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
  8. package/dist/Footer/SiteFooter.cjs +19 -30
  9. package/dist/Footer/SiteFooter.cjs.map +1 -1
  10. package/dist/Footer/SiteFooter.d.ts +1 -3
  11. package/dist/Footer/SiteFooter.js +19 -31
  12. package/dist/Footer/SiteFooter.js.map +1 -1
  13. package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
  14. package/dist/GlobalNavigationBar/Logo.js.map +1 -1
  15. package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -0
  16. package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
  17. package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -0
  18. package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
  19. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +2 -0
  20. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
  21. package/dist/GlobalNavigationBar/desktop/MainMenu.js +2 -0
  22. package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
  23. package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
  24. package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
  25. package/dist/InputFields/DatepickerFieldHeader.cjs +2 -4
  26. package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
  27. package/dist/InputFields/DatepickerFieldHeader.js +2 -4
  28. package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
  29. package/dist/Layouts/index.cjs +6 -4
  30. package/dist/Layouts/index.cjs.map +1 -1
  31. package/dist/Layouts/index.d.ts +1 -0
  32. package/dist/Layouts/index.js +4 -3
  33. package/dist/Layouts/index.js.map +1 -1
  34. package/dist/NavItem/NestedNavItem.cjs.map +1 -1
  35. package/dist/NavItem/NestedNavItem.js.map +1 -1
  36. package/dist/Paginator/Paginator.cjs.map +1 -1
  37. package/dist/Paginator/Paginator.js.map +1 -1
  38. package/dist/SideMenu/types.d.ts +1 -0
  39. package/dist/Switcher/MobileCustomMenuContent.cjs +3 -0
  40. package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -1
  41. package/dist/Switcher/MobileCustomMenuContent.d.ts +1 -0
  42. package/dist/Switcher/MobileCustomMenuContent.js +3 -0
  43. package/dist/Switcher/MobileCustomMenuContent.js.map +1 -1
  44. package/dist/Table/Table.cjs +1 -1
  45. package/dist/Table/Table.js +1 -1
  46. package/dist/Table/TableFooter.cjs.map +1 -1
  47. package/dist/Table/TableFooter.js.map +1 -1
  48. package/dist/Table/TableTypes.d.ts +1 -0
  49. package/dist/Tabs/TabLink.cjs +50 -48
  50. package/dist/Tabs/TabLink.cjs.map +1 -1
  51. package/dist/Tabs/TabLink.js +50 -48
  52. package/dist/Tabs/TabLink.js.map +1 -1
  53. package/dist/Toggles/TogglerTypes.d.ts +1 -0
  54. package/dist/Tooltips/TooltipOverflow.cjs +1 -1
  55. package/dist/Tooltips/TooltipOverflow.cjs.map +1 -1
  56. package/dist/Tooltips/TooltipOverflow.js +1 -1
  57. package/dist/Tooltips/TooltipOverflow.js.map +1 -1
  58. package/dist/Tooltips/TooltipTypes.d.ts +1 -0
  59. package/dist/assets/index.cjs.map +1 -1
  60. package/dist/assets/index.js.map +1 -1
  61. package/dist/common/ActionWithin.cjs +1 -1
  62. package/dist/common/ActionWithin.js +1 -1
  63. package/dist/common/FocusVisible.cjs +1 -1
  64. package/dist/common/FocusVisible.js +1 -1
  65. package/dist/icons/systemicons/LoadingMedium.cjs.map +1 -1
  66. package/dist/icons/systemicons/LoadingMedium.js.map +1 -1
  67. package/dist/icons/systemicons/LoadingSmall.cjs.map +1 -1
  68. package/dist/icons/systemicons/LoadingSmall.js.map +1 -1
  69. package/package.json +7 -8
@@ -25,7 +25,7 @@ var StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _tag
25
25
  var EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: 0 15px 0 0 !important;\n"])));
26
26
  var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 12px;\n"])));
27
27
  //replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
28
- 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) {
28
+ 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 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) {
29
29
  return props.disabled ? COLORS.neutral_100 : 'transparent';
30
30
  }, function (props) {
31
31
  return props.disabled ? 'not-allowed' : 'pointer';
@@ -58,58 +58,60 @@ var TabLink = function TabLink(_ref) {
58
58
  _useState2 = _slicedToArray(_useState, 2),
59
59
  activeState = _useState2[0],
60
60
  setActiveState = _useState2[1];
61
- return /*#__PURE__*/_jsxs(Wrapper, {
61
+ return /*#__PURE__*/_jsx(Wrapper, {
62
62
  disabled: disabled,
63
63
  className: disabled ? 'disabled' : '',
64
64
  onMouseEnter: containerOnMouseEnter,
65
65
  onMouseLeave: containerOnMouseLeave,
66
- children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
67
- to: forceDeactivate ? 'invalid' : to.toString()
68
- //disabled={disabled}
69
- ,
70
- className: function className(_ref2) {
71
- var isActive = _ref2.isActive;
72
- onActiveStateChanged && onActiveStateChanged(activeState);
73
- if (forceDeactivate) {
74
- if (disabled) return 'disabled';else return '';
75
- }
76
- if (isActive != activeState) setActiveState(isActive);
77
- return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
78
- },
79
- onMouseDown: defaultOnMouseDownHandler,
80
- tabIndex: disabled ? -1 : 0,
81
- role: "tab",
82
- "aria-selected": activeState,
83
- onClick: function onClick(e) {
84
- return !disabled && onLinkClick && onLinkClick(e);
85
- },
86
- ref: ref,
87
- "data-testid": testId
88
- }, rest), {}, {
89
- children: [/*#__PURE__*/_jsxs(TextContainer, {
90
- children: [/*#__PURE__*/_jsx(TopWrapper, {
91
- children: /*#__PURE__*/_jsx("span", {
92
- children: requiredLine
66
+ children: /*#__PURE__*/_jsxs(_Fragment, {
67
+ children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
68
+ to: forceDeactivate ? 'invalid' : to.toString()
69
+ //disabled={disabled}
70
+ ,
71
+ className: function className(_ref2) {
72
+ var isActive = _ref2.isActive;
73
+ onActiveStateChanged && onActiveStateChanged(activeState);
74
+ if (forceDeactivate) {
75
+ if (disabled) return 'disabled';else return '';
76
+ }
77
+ if (isActive != activeState) setActiveState(isActive);
78
+ return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
79
+ },
80
+ onMouseDown: defaultOnMouseDownHandler,
81
+ tabIndex: disabled ? -1 : 0,
82
+ role: "tab",
83
+ "aria-selected": activeState,
84
+ onClick: function onClick(e) {
85
+ return !disabled && onLinkClick && onLinkClick(e);
86
+ },
87
+ ref: ref,
88
+ "data-testid": testId
89
+ }, rest), {}, {
90
+ children: [/*#__PURE__*/_jsxs(TextContainer, {
91
+ children: [/*#__PURE__*/_jsx(TopWrapper, {
92
+ children: /*#__PURE__*/_jsx("span", {
93
+ children: requiredLine
94
+ })
95
+ }), optionalLine && OptionalLineIcon ? /*#__PURE__*/_jsxs(OptionalLineWrapperWithIcon, {
96
+ children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/_jsx("span", {
97
+ children: optionalLine
98
+ })]
99
+ }) : optionalLine ? /*#__PURE__*/_jsx(OptionalLineWrapper, {
100
+ children: /*#__PURE__*/_jsx("span", {
101
+ children: optionalLine
102
+ })
103
+ }) : /*#__PURE__*/_jsx(_Fragment, {})]
104
+ }), /*#__PURE__*/_jsx(StyledNotification, {
105
+ children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
106
+ testId: "NotificationDot",
107
+ size: size,
108
+ variant: variant
93
109
  })
94
- }), optionalLine && OptionalLineIcon ? /*#__PURE__*/_jsxs(OptionalLineWrapperWithIcon, {
95
- children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/_jsx("span", {
96
- children: optionalLine
97
- })]
98
- }) : optionalLine ? /*#__PURE__*/_jsx(OptionalLineWrapper, {
99
- children: /*#__PURE__*/_jsx("span", {
100
- children: optionalLine
101
- })
102
- }) : /*#__PURE__*/_jsx(_Fragment, {})]
103
- }), /*#__PURE__*/_jsx(StyledNotification, {
104
- children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
105
- testId: "NotificationDot",
106
- size: size,
107
- variant: variant
108
- })
109
- }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
110
- children: endLineIcon
111
- })]
112
- })), children]
110
+ }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
111
+ children: endLineIcon
112
+ })]
113
+ })), children]
114
+ })
113
115
  });
114
116
  };
115
117
  export default TabLink;
@@ -1 +1 @@
1
- {"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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"}
1
+ {"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 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 <>\n <NavLink\n to={forceDeactivate ? 'invalid' : to.toString()}\n //disabled={disabled}\n className={({ isActive }) => {\n onActiveStateChanged && onActiveStateChanged(activeState);\n if (forceDeactivate) {\n if (disabled) return 'disabled';\n else return '';\n }\n\n if (isActive != activeState) 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 </>\n </Wrapper>\n );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { Size } from '..';
2
3
  /**
3
4
  * Types for the table.
@@ -82,7 +82,7 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
82
82
  }
83
83
  };
84
84
  }, []);
85
- var renderedCallback = React.useCallback(function (node) {
85
+ var renderedCallback = React.useCallback(function () {
86
86
  if (input && input.current) {
87
87
  input.current.addEventListener("focus", onFocus);
88
88
  input.current.addEventListener("blur", onBlur);
@@ -1 +1 @@
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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"}
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","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(() => {\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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"}
@@ -73,7 +73,7 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
73
73
  }
74
74
  };
75
75
  }, []);
76
- var renderedCallback = React.useCallback(function (node) {
76
+ var renderedCallback = React.useCallback(function () {
77
77
  if (input && input.current) {
78
78
  input.current.addEventListener("focus", onFocus);
79
79
  input.current.addEventListener("blur", onBlur);
@@ -1 +1 @@
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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"}
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","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(() => {\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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"}
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { Size } from "../types";
2
3
  /**
3
4
  * Types for the table.