@laerdal/life-react-components 2.2.1-dev.2.full → 2.2.1-dev.3
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.
|
@@ -15,11 +15,9 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
15
15
|
var _types = require("../types");
|
|
16
16
|
var _styles = require("../styles");
|
|
17
17
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
18
|
-
var _typography = require("../styles/typography");
|
|
19
|
-
var _zIndexes = require("../styles/z-indexes");
|
|
20
18
|
var _common = require("../common");
|
|
21
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
-
var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
|
|
20
|
+
var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
|
|
23
21
|
_excluded2 = ["value", "selected", "to", "disabled", "className"];
|
|
24
22
|
var _templateObject, _templateObject2, _templateObject3;
|
|
25
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -27,9 +25,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
25
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
28
26
|
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; }
|
|
29
27
|
// Add custom styles
|
|
30
|
-
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
|
|
28
|
+
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);
|
|
31
29
|
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);
|
|
32
|
-
var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n
|
|
30
|
+
var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border: none;\n background-color: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n padding: 0;\n\n &[aria-selected=\"true\"] {\n z-index: ", ";\n }\n\n &.floating {\n border-radius: 2px;\n }\n \n &.selected {\n background-color: ", ";\n color: ", ";\n }\n\n &.selected.floating {\n background-color: ", ";\n }\n\n &.default {\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n }\n \n &.default.selected {\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &.selected:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -1px;\n right: -1px;\n height: 2px;\n background-color: ", ";\n }\n\n &.selected.floating:after {\n top: unset;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: 2px;\n border-radius: 2px;\n background-color: ", ";\n }\n\n\n &:hover, &:hover.selected {\n background: ", ";\n color: ", ";\n }\n\n &:hover:after {\n background-color: ", ";\n }\n\n &:active, &:active.selected {\n background: ", ";\n color: ", ";\n outline: none;\n }\n\n &:active:after {\n background-color: ", ";\n }\n\n &:disabled {\n color: ", ";\n background: transparent;\n cursor: not-allowed;\n }\n\n // Sizes\n &.", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0 16px;\n }\n\n &.", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0 16px;\n }\n"])), _styles.COLORS.neutral_600, _styles.Z_INDEXES.active, _styles.COLORS.white, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_500, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
|
|
33
31
|
|
|
34
32
|
// Add component-specific types
|
|
35
33
|
|
|
@@ -39,6 +37,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
39
37
|
sideFill = _ref.sideFill,
|
|
40
38
|
fullWidth = _ref.fullWidth,
|
|
41
39
|
onTabChange = _ref.onTabChange,
|
|
40
|
+
variant = _ref.variant,
|
|
42
41
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
43
42
|
/**
|
|
44
43
|
* Informs parent component of tab change and clears focus.
|
|
@@ -118,7 +117,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
118
117
|
role: "tablist",
|
|
119
118
|
"data-testid": 'horizontal-tabs-container'
|
|
120
119
|
}, rest), {}, {
|
|
121
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
|
|
120
|
+
children: [variant !== 'floating' && /*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
|
|
122
121
|
tabIndex: -1,
|
|
123
122
|
className: "".concat(sideFill ? 'fill' : '')
|
|
124
123
|
}), tabs.map(function (tab, index) {
|
|
@@ -138,15 +137,13 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
138
137
|
style: fullWidth ? {
|
|
139
138
|
width: "".concat(100 / tabs.length, "%")
|
|
140
139
|
} : {},
|
|
141
|
-
|
|
140
|
+
disabled: disabled,
|
|
141
|
+
className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
|
|
142
142
|
onClick: function onClick() {
|
|
143
143
|
return !disabled && changeTabInternal(tab);
|
|
144
144
|
}
|
|
145
145
|
}, rest), {}, {
|
|
146
|
-
children:
|
|
147
|
-
className: "size-".concat(size, " ").concat(tab.selected ? 'selected' : '', " ").concat(tab.disabled ? 'disabled' : ''),
|
|
148
|
-
children: tab.value
|
|
149
|
-
})
|
|
146
|
+
children: tab.value
|
|
150
147
|
}), "".concat(tab, "_").concat(index));
|
|
151
148
|
})]
|
|
152
149
|
}));
|
|
@@ -159,7 +156,8 @@ HorizontalTabs.propTypes = {
|
|
|
159
156
|
})).isRequired,
|
|
160
157
|
sideFill: _propTypes.default.bool,
|
|
161
158
|
fullWidth: _propTypes.default.bool,
|
|
162
|
-
onTabChange: _propTypes.default.func.isRequired
|
|
159
|
+
onTabChange: _propTypes.default.func.isRequired,
|
|
160
|
+
variant: _propTypes.default.oneOf(['default', 'floating'])
|
|
163
161
|
};
|
|
164
162
|
var _default = HorizontalTabs;
|
|
165
163
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
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 && changeTabInternal(tab)}\n {...rest}>\n <div\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":";;;;;;;;;;;;;AAGA;AACA;AAKA;AAKA;AACA;AACA;AACA;AAAsD;AAAA;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtD;AACA,IAAMA,sBAAsB,GAAGC,yBAAM,CAACC,GAAG,yMAOnCC,mBAAW,CAGhB;AAED,IAAMC,WAAW,GAAGH,yBAAM,CAACC,GAAG,yNAEDG,cAAM,CAACC,WAAW,EAK7BD,cAAM,CAACE,KAAK,CAE7B;AAED,IAAMC,SAAS,GAAGP,yBAAM,CAACQ,MAAM,mgEACpBJ,cAAM,CAACK,WAAW,EAOdC,mBAAS,CAACC,KAAK,EAEVP,cAAM,CAACQ,UAAU,EACtBR,cAAM,CAACS,WAAW,EAGDT,cAAM,CAACS,WAAW,EAEjBT,cAAM,CAACC,WAAW,EACjBD,cAAM,CAACC,WAAW,EAKrCK,mBAAS,CAACI,MAAM,EASXV,cAAM,CAACQ,UAAU,EACtBR,cAAM,CAACS,WAAW,EAGDT,cAAM,CAACS,WAAW,EAEjBT,cAAM,CAACC,WAAW,EACjBD,cAAM,CAACC,WAAW,EAK1BD,cAAM,CAACE,KAAK,EACRF,cAAM,CAACW,WAAW,EAEjBX,cAAM,CAACC,WAAW,EACjBD,cAAM,CAACC,WAAW,EAI9BD,cAAM,CAACY,WAAW,EACvBZ,cAAM,CAACa,WAAW,EACAb,cAAM,CAACc,QAAQ,EAAiBd,cAAM,CAACe,KAAK,EAI7Cf,cAAM,CAACa,WAAW,EAEjBb,cAAM,CAACC,WAAW,EACjBD,cAAM,CAACC,WAAW,EAKrCD,cAAM,CAACgB,WAAW,EAMhBhB,cAAM,CAACgB,WAAW,EAItBC,WAAI,CAACC,MAAM,EAChB,IAAAC,8BAAkB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAM/CJ,WAAI,CAACK,KAAK,EACf,IAAAC,6BAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAM9CJ,WAAI,CAACO,MAAM,EAChB,IAAAC,6BAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAM9CJ,WAAI,CAACS,KAAK,EACf,IAAAC,6BAAiB,EAACP,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAM1D;;AAED;;AAeA,IAAMO,cAAc,GAAG,SAAjBA,cAAc,OAAsF;EAAA,IAAhFC,IAAI,QAAJA,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EAC7E;AACF;AACA;AACA;EACE,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,EAAU,EAAW;IACxC;IACAH,WAAW,CAACG,EAAE,CAAC;;IAEf;IACA,IAAIC,QAAQ,CAACC,aAAa,YAAYC,WAAW,EAAE;MACjDF,QAAQ,CAACC,aAAa,CAAEE,IAAI,EAAE;IAChC;EACF,CAAC;EAED,sBAA+BC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAtDC,OAAO;IAAEC,UAAU;EAC1B,uBAAoCH,KAAK,CAACC,QAAQ,EAAU;IAAA;IAArDG,UAAU;IAAEC,aAAa;EAEhCL,KAAK,CAACM,SAAS,CAAC,YAAM;IACpB,IAAMC,WAAW,GAAGlB,IAAI,CAACmB,IAAI,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,QAAQ,IAAI,CAACD,CAAC,CAACE,QAAQ;IAAA,EAAC;IAC7D,IAAGJ,WAAW,EACZF,aAAa,CAACE,WAAW,CAACZ,EAAE,CAAC;EACjC,CAAC,EAAE,CAACN,IAAI,CAAC,CAAC;EAEV,IAAMuB,WAAW,GAAG,SAAdA,WAAW;IAAA,OAAST,UAAU,CAAC,KAAK,CAAC;EAAA;EAE3C,IAAMU,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAA4C;IAAA,OAAKX,UAAU,CAAC,IAAI,CAAC;EAAA;EAEvF,IAAMY,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,GAAkB,EAAK;IAChDA,GAAG,CAACN,QAAQ,GAAG,IAAI;IACnBrB,IAAI,CAAC4B,OAAO,CAAC,UAAAR,CAAC,EAAI;MAChB,IAAGA,CAAC,CAACd,EAAE,IAAIqB,GAAG,CAACrB,EAAE,EACfc,CAAC,CAACC,QAAQ,GAAG,KAAK;IACtB,CAAC,CAAC;IACFL,aAAa,CAACW,GAAG,CAACrB,EAAE,CAAC;IACrBH,WAAW,CAACwB,GAAG,CAACrB,EAAE,CAAC;EACrB,CAAC;EAED,IAAMuB,cAAc,GAAG,SAAjBA,cAAc,CAAIJ,CAAqB,EAAK;IAChD,IAAIZ,OAAO,KAAKY,CAAC,CAACK,GAAG,KAAK,WAAW,IAAIL,CAAC,CAACK,GAAG,KAAK,YAAY,CAAC,EAAE;MAChEL,CAAC,CAACM,cAAc,EAAE;MAClB,IAAGN,CAAC,CAACK,GAAG,KAAK,YAAY,EACzB;QACE9B,IAAI,CAAC4B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAGZ,CAAC,CAACd,EAAE,IAAIS,UAAU,EACnB;UAEF,KAAI,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EACvC;YACE,IAAIE,SAAS,GAAGF,CAAC,GAAGD,CAAC;YACrB,IAAGG,SAAS,GAAGnC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAC5BC,SAAS,GAAGA,SAAS,GAAGnC,IAAI,CAACkC,MAAM;YACrC,IAAGlC,IAAI,CAACmC,SAAS,CAAC,CAACb,QAAQ,EACzB;YACFI,iBAAiB,CAAC1B,IAAI,CAACmC,SAAS,CAAC,CAAC;YAChC;UACJ;QACF,CAAC,CAAC;MACJ;MAEA,IAAGV,CAAC,CAACK,GAAG,KAAK,WAAW,EACxB;QACE9B,IAAI,CAAC4B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAGZ,CAAC,CAACd,EAAE,IAAIS,UAAU,EACnB;UAEF,KAAI,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EACvC;YACE,IAAIE,SAAS,GAAGH,CAAC,GAAGC,CAAC;YACrB,IAAGE,SAAS,GAAG,CAAC,EACdA,SAAS,GAAGA,SAAS,GAAGnC,IAAI,CAACkC,MAAM;YACrC,IAAGlC,IAAI,CAACmC,SAAS,CAAC,CAACb,QAAQ,EACzB;YACFI,iBAAiB,CAAC1B,IAAI,CAACmC,SAAS,CAAC,CAAC;YAChC;UACJ;QACF,CAAC,CAAC;MACJ;IACF;EACF,CAAC;EAED,oBACE,sBAAC,sBAAsB;IAAC,QAAQ,EAAE,CAAE;IAAC,MAAM,EAAEZ,WAAY;IAAC,OAAO,EAAEC,YAAa;IAAC,SAAS,EAAEK,cAAe;IAAC,IAAI,EAAC,SAAS;IAAC,eAAa;EAA4B,GAAKzB,IAAI;IAAA,wBAC3K,qBAAC,WAAW;MAAC,QAAQ,EAAE,CAAC,CAAE;MAAC,SAAS,YAAKH,QAAQ,GAAG,MAAM,GAAG,EAAE;IAAG,EAAG,EACpED,IAAI,CAACoC,GAAG,CAAC,UAACT,GAAkB,EAAEU,KAAa,EAAK;MAC/C,IAAQC,KAAK,GAAiDX,GAAG,CAAzDW,KAAK;QAAEjB,QAAQ,GAAuCM,GAAG,CAAlDN,QAAQ;QAAEf,EAAE,GAAmCqB,GAAG,CAAxCrB,EAAE;QAAEgB,QAAQ,GAAyBK,GAAG,CAApCL,QAAQ;QAAEiB,SAAS,GAAcZ,GAAG,CAA1BY,SAAS;QAAKnC,IAAI,0CAAKuB,GAAG;MACjE,oBACE,qBAAC,SAAS;QACR,IAAI,EAAC,KAAK;QACV,6BAAoBW,KAAK,CAAG;QAE5B,iBAAejB,QAAS;QACxB,iBAAeA,QAAS;QACxB,QAAQ,EAAE,CAAC,CAAE;QACb,WAAW,EAAEmB,iCAA0B;QACvC,KAAK,EAAEtC,SAAS,GAAG;UAACuC,KAAK,YAAK,GAAG,GAAGzC,IAAI,CAACkC,MAAM;QAAG,CAAC,GAAG,CAAC,CAAE;QACzD,SAAS,YAAKK,SAAS,IAAI,EAAE,mBAASxC,IAAI,CAAG;QAC7C,OAAO,EAAE;UAAA,OAAM,CAACuB,QAAQ,IAAII,iBAAiB,CAACC,GAAG,CAAC;QAAA;MAAC,GAC/CvB,IAAI;QAAA,uBACR;UACE,SAAS,iBAAUL,IAAI,cAAI4B,GAAG,CAACN,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIM,GAAG,CAACL,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAG;UAAA,UAAEK,GAAG,CAACW;QAAK;MAAO,cAV1GX,GAAG,cAAIU,KAAK,EAWV;IAEhB,CAAC,CAAC;EAAA,GACqB;AAE7B,CAAC;AAAC;EAtHArC,IAAI;IAOJsC,KAAK;IACLjB,QAAQ;IACRf,EAAE;EAAA;EARFL,QAAQ;EACRC,SAAS;EACTC,WAAW;AAAA;AAAA,eAqHEL,cAAc;AAAA"}
|
|
1
|
+
{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_600","Z_INDEXES","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport Colors from \"../styles/colors\";\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus {\n ${focusStyles};\n }\n\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_600};\n border: none;\n background-color: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n padding: 0;\n\n &[aria-selected=\"true\"] {\n z-index: ${Z_INDEXES.active};\n }\n\n &.floating {\n border-radius: 2px;\n }\n \n &.selected {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &.selected.floating {\n background-color: ${COLORS.neutral_20};\n }\n\n &.default {\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n }\n \n &.default.selected {\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &.selected:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -1px;\n right: -1px;\n height: 2px;\n background-color: ${COLORS.primary_500};\n }\n\n &.selected.floating:after {\n top: unset;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: 2px;\n border-radius: 2px;\n background-color: ${COLORS.primary_500};\n }\n\n\n &:hover, &:hover.selected {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:hover:after {\n background-color: ${COLORS.primary_700};\n }\n\n &:active, &:active.selected {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n outline: none;\n }\n\n &:active:after {\n background-color: ${COLORS.primary_800};\n }\n\n &:disabled {\n color: ${COLORS.neutral_300};\n background: transparent;\n cursor: not-allowed;\n }\n\n // Sizes\n &.${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0 16px;\n }\n\n &.${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0 16px;\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n variant?: 'default' | 'floating';\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n const [focused, setFocused] = React.useState<boolean>(false);\n const [currentTab, setCurrentTab] = React.useState<string>();\n\n React.useEffect(() => {\n const selectedTab = tabs.find(x => x.selected && !x.disabled);\n if (selectedTab)\n setCurrentTab(selectedTab.to);\n }, [tabs]);\n\n const tabListBlur = () => setFocused(false);\n\n const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n const changeTabInternal = (tab: HorizontalTab) => {\n tab.selected = true;\n tabs.forEach(x => {\n if (x.to != tab.to)\n x.selected = false;\n });\n setCurrentTab(tab.to);\n onTabChange(tab.to);\n }\n\n const tabListKeyDown = (e: React.KeyboardEvent) => {\n if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n e.preventDefault();\n if (e.key === 'ArrowRight') {\n tabs.forEach((x, i) => {\n if (x.to != currentTab)\n return;\n\n for (let j = 1; j < tabs.length - 1; j++) {\n let nextIndex = j + i;\n if (nextIndex > tabs.length - 1)\n nextIndex = nextIndex - tabs.length;\n if (tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n\n if (e.key === 'ArrowLeft') {\n tabs.forEach((x, i) => {\n if (x.to != currentTab)\n return;\n\n for (let j = 1; j < tabs.length - 1; j++) {\n let nextIndex = i - j;\n if (nextIndex < 0)\n nextIndex = nextIndex + tabs.length;\n if (tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n }\n };\n\n return (\n <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\n role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n {\n variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\n }\n {tabs.map((tab: HorizontalTab, index: number) => {\n const {value, selected, to, disabled, className, ...rest} = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-selected={selected}\n aria-expanded={selected}\n tabIndex={-1}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n disabled={disabled}\n className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\n onClick={() => !disabled && changeTabInternal(tab)}\n {...rest}>\n {tab.value}\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|
|
@@ -9,11 +9,12 @@ interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
9
9
|
sideFill?: boolean;
|
|
10
10
|
fullWidth?: boolean;
|
|
11
11
|
onTabChange: (to: string) => void;
|
|
12
|
+
variant?: 'default' | 'floating';
|
|
12
13
|
}
|
|
13
14
|
export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
|
|
14
15
|
value: string;
|
|
15
16
|
selected: boolean;
|
|
16
17
|
to: string;
|
|
17
18
|
}
|
|
18
|
-
declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => JSX.Element;
|
|
19
|
+
declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
|
|
19
20
|
export default HorizontalTabs;
|
|
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
4
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
5
5
|
import _pt from "prop-types";
|
|
6
|
-
var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
|
|
6
|
+
var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
|
|
7
7
|
_excluded2 = ["value", "selected", "to", "disabled", "className"];
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3;
|
|
9
9
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -23,16 +23,15 @@ import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
|
|
|
23
23
|
* Import third-party libraries.
|
|
24
24
|
*/
|
|
25
25
|
import styled from 'styled-components';
|
|
26
|
-
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles
|
|
27
|
-
import { Z_INDEXES } from '../styles
|
|
26
|
+
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
|
|
27
|
+
import { Z_INDEXES } from '../styles';
|
|
28
28
|
import { defaultOnMouseDownHandler } from '../common';
|
|
29
|
-
|
|
30
|
-
// Add custom styles
|
|
31
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
32
30
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
|
-
|
|
31
|
+
// Add custom styles
|
|
32
|
+
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);
|
|
34
33
|
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);
|
|
35
|
-
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n
|
|
34
|
+
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n padding: 0;\n\n &[aria-selected=\"true\"] {\n z-index: ", ";\n }\n\n &.floating {\n border-radius: 2px;\n }\n \n &.selected {\n background-color: ", ";\n color: ", ";\n }\n\n &.selected.floating {\n background-color: ", ";\n }\n\n &.default {\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n }\n \n &.default.selected {\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &.selected:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -1px;\n right: -1px;\n height: 2px;\n background-color: ", ";\n }\n\n &.selected.floating:after {\n top: unset;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: 2px;\n border-radius: 2px;\n background-color: ", ";\n }\n\n\n &:hover, &:hover.selected {\n background: ", ";\n color: ", ";\n }\n\n &:hover:after {\n background-color: ", ";\n }\n\n &:active, &:active.selected {\n background: ", ";\n color: ", ";\n outline: none;\n }\n\n &:active:after {\n background-color: ", ";\n }\n\n &:disabled {\n color: ", ";\n background: transparent;\n cursor: not-allowed;\n }\n\n // Sizes\n &.", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0 16px;\n }\n\n &.", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0 16px;\n }\n"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
|
|
36
35
|
|
|
37
36
|
// Add component-specific types
|
|
38
37
|
|
|
@@ -42,6 +41,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
42
41
|
sideFill = _ref.sideFill,
|
|
43
42
|
fullWidth = _ref.fullWidth,
|
|
44
43
|
onTabChange = _ref.onTabChange,
|
|
44
|
+
variant = _ref.variant,
|
|
45
45
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
46
46
|
/**
|
|
47
47
|
* Informs parent component of tab change and clears focus.
|
|
@@ -121,7 +121,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
121
121
|
role: "tablist",
|
|
122
122
|
"data-testid": 'horizontal-tabs-container'
|
|
123
123
|
}, rest), {}, {
|
|
124
|
-
children: [/*#__PURE__*/_jsx(TabSideFill, {
|
|
124
|
+
children: [variant !== 'floating' && /*#__PURE__*/_jsx(TabSideFill, {
|
|
125
125
|
tabIndex: -1,
|
|
126
126
|
className: "".concat(sideFill ? 'fill' : '')
|
|
127
127
|
}), tabs.map(function (tab, index) {
|
|
@@ -141,15 +141,13 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
141
141
|
style: fullWidth ? {
|
|
142
142
|
width: "".concat(100 / tabs.length, "%")
|
|
143
143
|
} : {},
|
|
144
|
-
|
|
144
|
+
disabled: disabled,
|
|
145
|
+
className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
|
|
145
146
|
onClick: function onClick() {
|
|
146
147
|
return !disabled && changeTabInternal(tab);
|
|
147
148
|
}
|
|
148
149
|
}, rest), {}, {
|
|
149
|
-
children:
|
|
150
|
-
className: "size-".concat(size, " ").concat(tab.selected ? 'selected' : '', " ").concat(tab.disabled ? 'disabled' : ''),
|
|
151
|
-
children: tab.value
|
|
152
|
-
})
|
|
150
|
+
children: tab.value
|
|
153
151
|
}), "".concat(tab, "_").concat(index));
|
|
154
152
|
})]
|
|
155
153
|
}));
|
|
@@ -162,7 +160,8 @@ HorizontalTabs.propTypes = {
|
|
|
162
160
|
})).isRequired,
|
|
163
161
|
sideFill: _pt.bool,
|
|
164
162
|
fullWidth: _pt.bool,
|
|
165
|
-
onTabChange: _pt.func.isRequired
|
|
163
|
+
onTabChange: _pt.func.isRequired,
|
|
164
|
+
variant: _pt.oneOf(['default', 'floating'])
|
|
166
165
|
};
|
|
167
166
|
export default HorizontalTabs;
|
|
168
167
|
//# sourceMappingURL=HorizontalTabs.js.map
|
|
@@ -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","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus{\n ${focusStyles};\n }\n \n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &[aria-selected=\"true\"] {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &[aria-selected=\"true\"] {\n z-index: ${Z_INDEXES.active};\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n const [focused, setFocused ] = React.useState<boolean>(false);\n const [currentTab, setCurrentTab] = React.useState<string>();\n\n React.useEffect(() => {\n const selectedTab = tabs.find(x => x.selected && !x.disabled);\n if(selectedTab)\n setCurrentTab(selectedTab.to);\n }, [tabs]);\n\n const tabListBlur = () => setFocused(false);\n\n const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n const changeTabInternal = (tab: HorizontalTab) => {\n tab.selected = true;\n tabs.forEach(x => {\n if(x.to != tab.to)\n x.selected = false;\n });\n setCurrentTab(tab.to);\n onTabChange(tab.to);\n }\n\n const tabListKeyDown = (e:React.KeyboardEvent) => {\n if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n e.preventDefault();\n if(e.key === 'ArrowRight')\n {\n tabs.forEach((x, i) => {\n if(x.to != currentTab)\n return;\n\n for(let j = 1; j < tabs.length - 1; j++)\n {\n let nextIndex = j + i;\n if(nextIndex > tabs.length - 1)\n nextIndex = nextIndex - tabs.length;\n if(tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n\n if(e.key === 'ArrowLeft')\n {\n tabs.forEach((x, i) => {\n if(x.to != currentTab)\n return;\n\n for(let j = 1; j < tabs.length - 1; j++)\n {\n let nextIndex = i - j;\n if(nextIndex < 0)\n nextIndex = nextIndex + tabs.length;\n if(tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n }\n };\n\n return (\n <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => {\n const { value, selected, to, disabled, className, ...rest } = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-selected={selected}\n aria-expanded={selected}\n tabIndex={-1}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n className={`${className || ''} size-${size}`}\n onClick={() => !disabled && changeTabInternal(tab)}\n {...rest}>\n <div\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_600","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport Colors from \"../styles/colors\";\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n\n &:focus {\n ${focusStyles};\n }\n\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_600};\n border: none;\n background-color: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n padding: 0;\n\n &[aria-selected=\"true\"] {\n z-index: ${Z_INDEXES.active};\n }\n\n &.floating {\n border-radius: 2px;\n }\n \n &.selected {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &.selected.floating {\n background-color: ${COLORS.neutral_20};\n }\n\n &.default {\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n }\n \n &.default.selected {\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &.selected:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -1px;\n right: -1px;\n height: 2px;\n background-color: ${COLORS.primary_500};\n }\n\n &.selected.floating:after {\n top: unset;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: 2px;\n border-radius: 2px;\n background-color: ${COLORS.primary_500};\n }\n\n\n &:hover, &:hover.selected {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:hover:after {\n background-color: ${COLORS.primary_700};\n }\n\n &:active, &:active.selected {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n outline: none;\n }\n\n &:active:after {\n background-color: ${COLORS.primary_800};\n }\n\n &:disabled {\n color: ${COLORS.neutral_300};\n background: transparent;\n cursor: not-allowed;\n }\n\n // Sizes\n &.${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0 16px;\n }\n\n &.${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0 16px;\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n variant?: 'default' | 'floating';\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n value: string;\n selected: boolean;\n to: string;\n}\n\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n const [focused, setFocused] = React.useState<boolean>(false);\n const [currentTab, setCurrentTab] = React.useState<string>();\n\n React.useEffect(() => {\n const selectedTab = tabs.find(x => x.selected && !x.disabled);\n if (selectedTab)\n setCurrentTab(selectedTab.to);\n }, [tabs]);\n\n const tabListBlur = () => setFocused(false);\n\n const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n const changeTabInternal = (tab: HorizontalTab) => {\n tab.selected = true;\n tabs.forEach(x => {\n if (x.to != tab.to)\n x.selected = false;\n });\n setCurrentTab(tab.to);\n onTabChange(tab.to);\n }\n\n const tabListKeyDown = (e: React.KeyboardEvent) => {\n if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n e.preventDefault();\n if (e.key === 'ArrowRight') {\n tabs.forEach((x, i) => {\n if (x.to != currentTab)\n return;\n\n for (let j = 1; j < tabs.length - 1; j++) {\n let nextIndex = j + i;\n if (nextIndex > tabs.length - 1)\n nextIndex = nextIndex - tabs.length;\n if (tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n\n if (e.key === 'ArrowLeft') {\n tabs.forEach((x, i) => {\n if (x.to != currentTab)\n return;\n\n for (let j = 1; j < tabs.length - 1; j++) {\n let nextIndex = i - j;\n if (nextIndex < 0)\n nextIndex = nextIndex + tabs.length;\n if (tabs[nextIndex].disabled)\n continue;\n changeTabInternal(tabs[nextIndex]);\n break;\n }\n });\n }\n }\n };\n\n return (\n <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\n role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n {\n variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\n }\n {tabs.map((tab: HorizontalTab, index: number) => {\n const {value, selected, to, disabled, className, ...rest} = tab;\n return (\n <TabButton\n role=\"tab\"\n data-testid={`tab_${value}`}\n key={`${tab}_${index}`}\n aria-selected={selected}\n aria-expanded={selected}\n tabIndex={-1}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n disabled={disabled}\n className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\n onClick={() => !disabled && changeTabInternal(tab)}\n {...rest}>\n {tab.value}\n </TabButton>\n );\n })}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
|