@laerdal/life-react-components 2.0.1-dev.7.full → 2.0.1-dev.8
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.
|
@@ -11,6 +11,8 @@ exports.default = void 0;
|
|
|
11
11
|
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
13
|
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
14
16
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
17
|
|
|
16
18
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
@@ -47,11 +49,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
47
49
|
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; }
|
|
48
50
|
|
|
49
51
|
// Add custom styles
|
|
50
|
-
var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n"])));
|
|
52
|
+
var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus{\n ", ";\n }\n \n"])), _styles.focusStyles);
|
|
51
53
|
|
|
52
54
|
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);
|
|
53
55
|
|
|
54
|
-
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
|
|
56
|
+
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 &[aria-selected=\"true\"] {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n }\n &[aria-selected=\"true\"] {\n z-index: ", ";\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.selected {\n background-color: ", ";\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &:active {\n background: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n"])), _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.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.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
|
|
55
57
|
|
|
56
58
|
|
|
57
59
|
var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
@@ -75,11 +77,84 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
75
77
|
}
|
|
76
78
|
};
|
|
77
79
|
|
|
80
|
+
var _React$useState = React.useState(false),
|
|
81
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
82
|
+
focused = _React$useState2[0],
|
|
83
|
+
setFocused = _React$useState2[1];
|
|
84
|
+
|
|
85
|
+
var _React$useState3 = React.useState(),
|
|
86
|
+
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
|
87
|
+
currentTab = _React$useState4[0],
|
|
88
|
+
setCurrentTab = _React$useState4[1];
|
|
89
|
+
|
|
90
|
+
React.useEffect(function () {
|
|
91
|
+
var selectedTab = tabs.find(function (x) {
|
|
92
|
+
return x.selected && !x.disabled;
|
|
93
|
+
});
|
|
94
|
+
if (selectedTab) setCurrentTab(selectedTab.to);
|
|
95
|
+
}, [tabs]);
|
|
96
|
+
|
|
97
|
+
var tabListBlur = function tabListBlur() {
|
|
98
|
+
return setFocused(false);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
var tabListFocus = function tabListFocus(e) {
|
|
102
|
+
return setFocused(true);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
var changeTabInternal = function changeTabInternal(tab) {
|
|
106
|
+
tab.selected = true;
|
|
107
|
+
tabs.forEach(function (x) {
|
|
108
|
+
if (x.to != tab.to) x.selected = false;
|
|
109
|
+
});
|
|
110
|
+
setCurrentTab(tab.to);
|
|
111
|
+
onTabChange(tab.to);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
var tabListKeyDown = function tabListKeyDown(e) {
|
|
115
|
+
if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
|
|
116
|
+
e.preventDefault();
|
|
117
|
+
|
|
118
|
+
if (e.key === 'ArrowRight') {
|
|
119
|
+
tabs.forEach(function (x, i) {
|
|
120
|
+
if (x.to != currentTab) return;
|
|
121
|
+
|
|
122
|
+
for (var j = 1; j < tabs.length - 1; j++) {
|
|
123
|
+
var nextIndex = j + i;
|
|
124
|
+
if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
|
|
125
|
+
if (tabs[nextIndex].disabled) continue;
|
|
126
|
+
changeTabInternal(tabs[nextIndex]);
|
|
127
|
+
break;
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
if (e.key === 'ArrowLeft') {
|
|
133
|
+
tabs.forEach(function (x, i) {
|
|
134
|
+
if (x.to != currentTab) return;
|
|
135
|
+
|
|
136
|
+
for (var j = 1; j < tabs.length - 1; j++) {
|
|
137
|
+
var nextIndex = i - j;
|
|
138
|
+
if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
|
|
139
|
+
if (tabs[nextIndex].disabled) continue;
|
|
140
|
+
changeTabInternal(tabs[nextIndex]);
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
|
|
78
148
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, _objectSpread(_objectSpread({
|
|
149
|
+
tabIndex: 0,
|
|
150
|
+
onBlur: tabListBlur,
|
|
151
|
+
onFocus: tabListFocus,
|
|
152
|
+
onKeyDown: tabListKeyDown,
|
|
79
153
|
role: "tablist",
|
|
80
154
|
"data-testid": 'horizontal-tabs-container'
|
|
81
155
|
}, rest), {}, {
|
|
82
156
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
|
|
157
|
+
tabIndex: -1,
|
|
83
158
|
className: "".concat(sideFill ? 'fill' : '')
|
|
84
159
|
}), tabs.map(function (tab, index) {
|
|
85
160
|
var value = tab.value,
|
|
@@ -91,13 +166,14 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
91
166
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
|
|
92
167
|
role: "tab",
|
|
93
168
|
"data-testid": "tab_".concat(value),
|
|
169
|
+
"aria-selected": selected,
|
|
94
170
|
"aria-expanded": selected,
|
|
95
|
-
tabIndex:
|
|
171
|
+
tabIndex: -1,
|
|
96
172
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
97
173
|
style: fullWidth ? {
|
|
98
174
|
width: "".concat(100 / tabs.length, "%")
|
|
99
175
|
} : {},
|
|
100
|
-
className: "".concat(className || '', " size-").concat(size
|
|
176
|
+
className: "".concat(className || '', " size-").concat(size),
|
|
101
177
|
onClick: function onClick() {
|
|
102
178
|
return !disabled && doTabChange(to);
|
|
103
179
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalTabs.cjs","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","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","defaultOnMouseDownHandler","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\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 extends React.HTMLAttributes<HTMLDivElement>{\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => {\n const { value, selected, to, disabled, className, ...rest } = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-expanded={selected}\n tabIndex={disabled ? -1 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n onClick={() => !disabled && doTabChange(to)}\n {...rest}>\n <div\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus{\n ${focusStyles};\n }\n \n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &[aria-selected=\"true\"] {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &[aria-selected=\"true\"] {\n z-index: ${Z_INDEXES.active};\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n const [focused, setFocused ] = React.useState<boolean>(false);\n const [currentTab, setCurrentTab] = React.useState<string>();\n\n React.useEffect(() => {\n const selectedTab = tabs.find(x => x.selected && !x.disabled);\n if(selectedTab)\n setCurrentTab(selectedTab.to);\n }, [tabs]);\n\n const tabListBlur = () => setFocused(false);\n\n const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n const changeTabInternal = (tab: HorizontalTab) => {\n tab.selected = true;\n tabs.forEach(x => {\n if(x.to != tab.to)\n x.selected = false;\n });\n setCurrentTab(tab.to);\n onTabChange(tab.to);\n }\n\n const tabListKeyDown = (e:React.KeyboardEvent) => {\n if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n e.preventDefault();\n if(e.key === 'ArrowRight')\n {\n tabs.forEach((x, i) => {\n if(x.to != currentTab)\n return;\n\n for(let j = 1; j < tabs.length - 1; j++)\n {\n let nextIndex = j + i;\n if(nextIndex > tabs.length - 1)\n nextIndex = nextIndex - tabs.length;\n if(tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n\n if(e.key === 'ArrowLeft')\n {\n tabs.forEach((x, i) => {\n if(x.to != currentTab)\n return;\n\n for(let j = 1; j < tabs.length - 1; j++)\n {\n let nextIndex = i - j;\n if(nextIndex < 0)\n nextIndex = nextIndex + tabs.length;\n if(tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n }\n };\n\n return (\n <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => {\n const { value, selected, to, disabled, className, ...rest } = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-selected={selected}\n aria-expanded={selected}\n tabIndex={-1}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n className={`${className || ''} size-${size}`}\n onClick={() => !disabled && doTabChange(to)}\n {...rest}>\n <div\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
4
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
5
|
import _pt from "prop-types";
|
|
@@ -32,9 +33,9 @@ import { defaultOnMouseDownHandler } from '../common'; // Add custom styles
|
|
|
32
33
|
|
|
33
34
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
34
35
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
35
|
-
var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n"])));
|
|
36
|
+
var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus{\n ", ";\n }\n \n"])), focusStyles);
|
|
36
37
|
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);
|
|
37
|
-
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
|
|
38
|
+
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n\n &[aria-selected=\"true\"] {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n }\n &[aria-selected=\"true\"] {\n z-index: ", ";\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.selected {\n background-color: ", ";\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &:active {\n background: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
|
|
38
39
|
|
|
39
40
|
var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
40
41
|
var size = _ref.size,
|
|
@@ -57,11 +58,84 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
57
58
|
}
|
|
58
59
|
};
|
|
59
60
|
|
|
61
|
+
var _React$useState = React.useState(false),
|
|
62
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
63
|
+
focused = _React$useState2[0],
|
|
64
|
+
setFocused = _React$useState2[1];
|
|
65
|
+
|
|
66
|
+
var _React$useState3 = React.useState(),
|
|
67
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
68
|
+
currentTab = _React$useState4[0],
|
|
69
|
+
setCurrentTab = _React$useState4[1];
|
|
70
|
+
|
|
71
|
+
React.useEffect(function () {
|
|
72
|
+
var selectedTab = tabs.find(function (x) {
|
|
73
|
+
return x.selected && !x.disabled;
|
|
74
|
+
});
|
|
75
|
+
if (selectedTab) setCurrentTab(selectedTab.to);
|
|
76
|
+
}, [tabs]);
|
|
77
|
+
|
|
78
|
+
var tabListBlur = function tabListBlur() {
|
|
79
|
+
return setFocused(false);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var tabListFocus = function tabListFocus(e) {
|
|
83
|
+
return setFocused(true);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var changeTabInternal = function changeTabInternal(tab) {
|
|
87
|
+
tab.selected = true;
|
|
88
|
+
tabs.forEach(function (x) {
|
|
89
|
+
if (x.to != tab.to) x.selected = false;
|
|
90
|
+
});
|
|
91
|
+
setCurrentTab(tab.to);
|
|
92
|
+
onTabChange(tab.to);
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
var tabListKeyDown = function tabListKeyDown(e) {
|
|
96
|
+
if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
|
|
99
|
+
if (e.key === 'ArrowRight') {
|
|
100
|
+
tabs.forEach(function (x, i) {
|
|
101
|
+
if (x.to != currentTab) return;
|
|
102
|
+
|
|
103
|
+
for (var j = 1; j < tabs.length - 1; j++) {
|
|
104
|
+
var nextIndex = j + i;
|
|
105
|
+
if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
|
|
106
|
+
if (tabs[nextIndex].disabled) continue;
|
|
107
|
+
changeTabInternal(tabs[nextIndex]);
|
|
108
|
+
break;
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
if (e.key === 'ArrowLeft') {
|
|
114
|
+
tabs.forEach(function (x, i) {
|
|
115
|
+
if (x.to != currentTab) return;
|
|
116
|
+
|
|
117
|
+
for (var j = 1; j < tabs.length - 1; j++) {
|
|
118
|
+
var nextIndex = i - j;
|
|
119
|
+
if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
|
|
120
|
+
if (tabs[nextIndex].disabled) continue;
|
|
121
|
+
changeTabInternal(tabs[nextIndex]);
|
|
122
|
+
break;
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
|
|
60
129
|
return /*#__PURE__*/_jsxs(HorizontalTabContainer, _objectSpread(_objectSpread({
|
|
130
|
+
tabIndex: 0,
|
|
131
|
+
onBlur: tabListBlur,
|
|
132
|
+
onFocus: tabListFocus,
|
|
133
|
+
onKeyDown: tabListKeyDown,
|
|
61
134
|
role: "tablist",
|
|
62
135
|
"data-testid": 'horizontal-tabs-container'
|
|
63
136
|
}, rest), {}, {
|
|
64
137
|
children: [/*#__PURE__*/_jsx(TabSideFill, {
|
|
138
|
+
tabIndex: -1,
|
|
65
139
|
className: "".concat(sideFill ? 'fill' : '')
|
|
66
140
|
}), tabs.map(function (tab, index) {
|
|
67
141
|
var value = tab.value,
|
|
@@ -74,13 +148,14 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
74
148
|
return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
|
|
75
149
|
role: "tab",
|
|
76
150
|
"data-testid": "tab_".concat(value),
|
|
151
|
+
"aria-selected": selected,
|
|
77
152
|
"aria-expanded": selected,
|
|
78
|
-
tabIndex:
|
|
153
|
+
tabIndex: -1,
|
|
79
154
|
onMouseDown: defaultOnMouseDownHandler,
|
|
80
155
|
style: fullWidth ? {
|
|
81
156
|
width: "".concat(100 / tabs.length, "%")
|
|
82
157
|
} : {},
|
|
83
|
-
className: "".concat(className || '', " size-").concat(size
|
|
158
|
+
className: "".concat(className || '', " size-").concat(size),
|
|
84
159
|
onClick: function onClick() {
|
|
85
160
|
return !disabled && doTabChange(to);
|
|
86
161
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\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 extends React.HTMLAttributes<HTMLDivElement>{\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => {\n const { value, selected, to, disabled, className, ...rest } = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-expanded={selected}\n tabIndex={disabled ? -1 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n onClick={() => !disabled && doTabChange(to)}\n {...rest}>\n <div\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus{\n ${focusStyles};\n }\n \n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &[aria-selected=\"true\"] {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &[aria-selected=\"true\"] {\n z-index: ${Z_INDEXES.active};\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n const [focused, setFocused ] = React.useState<boolean>(false);\n const [currentTab, setCurrentTab] = React.useState<string>();\n\n React.useEffect(() => {\n const selectedTab = tabs.find(x => x.selected && !x.disabled);\n if(selectedTab)\n setCurrentTab(selectedTab.to);\n }, [tabs]);\n\n const tabListBlur = () => setFocused(false);\n\n const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n const changeTabInternal = (tab: HorizontalTab) => {\n tab.selected = true;\n tabs.forEach(x => {\n if(x.to != tab.to)\n x.selected = false;\n });\n setCurrentTab(tab.to);\n onTabChange(tab.to);\n }\n\n const tabListKeyDown = (e:React.KeyboardEvent) => {\n if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n e.preventDefault();\n if(e.key === 'ArrowRight')\n {\n tabs.forEach((x, i) => {\n if(x.to != currentTab)\n return;\n\n for(let j = 1; j < tabs.length - 1; j++)\n {\n let nextIndex = j + i;\n if(nextIndex > tabs.length - 1)\n nextIndex = nextIndex - tabs.length;\n if(tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n\n if(e.key === 'ArrowLeft')\n {\n tabs.forEach((x, i) => {\n if(x.to != currentTab)\n return;\n\n for(let j = 1; j < tabs.length - 1; j++)\n {\n let nextIndex = i - j;\n if(nextIndex < 0)\n nextIndex = nextIndex + tabs.length;\n if(tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n }\n };\n\n return (\n <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => {\n const { value, selected, to, disabled, className, ...rest } = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-selected={selected}\n aria-expanded={selected}\n tabIndex={-1}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n className={`${className || ''} size-${size}`}\n onClick={() => !disabled && doTabChange(to)}\n {...rest}>\n <div\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|