@laerdal/life-react-components 1.9.9-dev.28.full → 1.9.9-dev.29
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.
|
@@ -40,7 +40,7 @@ var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_
|
|
|
40
40
|
|
|
41
41
|
var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-bottom: 1px solid ", ";\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ", ";\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
|
|
42
42
|
|
|
43
|
-
var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n
|
|
43
|
+
var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n }\n &.selected {\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.selected {\n background-color: ", ";\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n background: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.focusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
@@ -64,10 +64,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, {
|
|
67
|
+
"data-testid": 'horizontal-tabs-container',
|
|
67
68
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
|
|
68
69
|
className: "".concat(sideFill ? 'fill' : '')
|
|
69
70
|
}), tabs.map(function (tab, index) {
|
|
70
71
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, {
|
|
72
|
+
"data-testid": "tab_".concat(tab.value),
|
|
71
73
|
tabIndex: tab.disabled ? -1 : 0,
|
|
72
74
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
73
75
|
style: fullWidth ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","disabled","defaultOnMouseDownHandler","width","length","selected"
|
|
1
|
+
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","disabled","defaultOnMouseDownHandler","width","length","selected"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &.selected {\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n value: string;\n selected: boolean;\n to: string;\n disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer data-testid={'horizontal-tabs-container'}>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\n data-testid={`tab_${tab.value}`}\n key={`${tab}_${index}`}\n tabIndex={tab.disabled ? -1 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n onClick={() => !tab.disabled && doTabChange(tab.to)}>\n <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.cjs"}
|
|
@@ -26,7 +26,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
26
26
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
27
|
var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n"])));
|
|
28
28
|
var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n border-bottom: 1px solid ", ";\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ", ";\n }\n"])), COLORS.neutral_100, COLORS.white);
|
|
29
|
-
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n
|
|
29
|
+
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n }\n &.selected {\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.selected {\n background-color: ", ";\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n background: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, focusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
|
|
30
30
|
|
|
31
31
|
var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
32
32
|
var size = _ref.size,
|
|
@@ -49,10 +49,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
49
49
|
};
|
|
50
50
|
|
|
51
51
|
return /*#__PURE__*/_jsxs(HorizontalTabContainer, {
|
|
52
|
+
"data-testid": 'horizontal-tabs-container',
|
|
52
53
|
children: [/*#__PURE__*/_jsx(TabSideFill, {
|
|
53
54
|
className: "".concat(sideFill ? 'fill' : '')
|
|
54
55
|
}), tabs.map(function (tab, index) {
|
|
55
56
|
return /*#__PURE__*/_jsx(TabButton, {
|
|
57
|
+
"data-testid": "tab_".concat(tab.value),
|
|
56
58
|
tabIndex: tab.disabled ? -1 : 0,
|
|
57
59
|
onMouseDown: defaultOnMouseDownHandler,
|
|
58
60
|
style: fullWidth ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","disabled","width","length","selected"
|
|
1
|
+
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","disabled","width","length","selected"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &.selected {\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n value: string;\n selected: boolean;\n to: string;\n disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer data-testid={'horizontal-tabs-container'}>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\n data-testid={`tab_${tab.value}`}\n key={`${tab}_${index}`}\n tabIndex={tab.disabled ? -1 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n onClick={() => !tab.disabled && doTabChange(tab.to)}>\n <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
|