@elliemae/ds-tabs 2.4.2-rc.9 → 2.4.3-rc.2
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.
- package/cjs/config/useTabs.js +2 -5
- package/cjs/parts/carousel/styles.js +4 -2
- package/cjs/parts/carousel/useCarousel.js +0 -1
- package/cjs/parts/carousel/useCarouselCallbacks.js +1 -1
- package/cjs/parts/tabBar/TabBar.js +2 -2
- package/cjs/parts/tabBar/styles.js +153 -26
- package/cjs/parts/tabBar/useTabBar.js +4 -4
- package/cjs/parts/tabsPanel/TabsPanels.js +4 -6
- package/cjs/parts/tabsPanel/styles.js +1 -1
- package/cjs/utils/helpers.js +3 -3
- package/cjs/utils/hooks/useKeyboardNavigation.js +6 -14
- package/esm/config/useTabs.js +2 -5
- package/esm/parts/carousel/styles.js +4 -2
- package/esm/parts/carousel/useCarousel.js +0 -1
- package/esm/parts/carousel/useCarouselCallbacks.js +1 -1
- package/esm/parts/tabBar/TabBar.js +2 -2
- package/esm/parts/tabBar/styles.js +153 -25
- package/esm/parts/tabBar/useTabBar.js +4 -4
- package/esm/parts/tabsPanel/TabsPanels.js +4 -6
- package/esm/parts/tabsPanel/styles.js +1 -1
- package/esm/utils/helpers.js +3 -3
- package/esm/utils/hooks/useKeyboardNavigation.js +6 -14
- package/package.json +6 -6
package/cjs/config/useTabs.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
5
|
require('core-js/modules/esnext.async-iterator.find.js');
|
|
7
6
|
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
7
|
require('core-js/modules/esnext.iterator.find.js');
|
|
@@ -27,14 +26,12 @@ const useTabs = props => {
|
|
|
27
26
|
return internalActiveTab;
|
|
28
27
|
}, [activeTab, internalActiveTab]);
|
|
29
28
|
React.useEffect(() => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
|
|
29
|
+
actualActiveTabRef.current = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab) ?? null;
|
|
33
30
|
}, [actualActiveTab]);
|
|
34
31
|
React.useEffect(() => {
|
|
35
32
|
if (activeTab === undefined) {
|
|
36
33
|
const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
|
|
37
|
-
setInternalActiveTab(
|
|
34
|
+
setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');
|
|
38
35
|
}
|
|
39
36
|
}, [activeTab]);
|
|
40
37
|
const ctx = React.useMemo(() => ({
|
|
@@ -40,7 +40,7 @@ const StyledCarouselButtonWrapper = /*#__PURE__*/styled__default["default"].div.
|
|
|
40
40
|
let {
|
|
41
41
|
right
|
|
42
42
|
} = _ref4;
|
|
43
|
-
return right ? 'right: 0;' :
|
|
43
|
+
return right ? 'right: 0;' : `left: 0;`;
|
|
44
44
|
}, _ref5 => {
|
|
45
45
|
let {
|
|
46
46
|
tabType
|
|
@@ -56,7 +56,9 @@ const StyledCarouselButtonWrapper = /*#__PURE__*/styled__default["default"].div.
|
|
|
56
56
|
theme,
|
|
57
57
|
tabType
|
|
58
58
|
} = _ref7;
|
|
59
|
-
return tabType === constants.TabTypes.NORMAL ?
|
|
59
|
+
return tabType === constants.TabTypes.NORMAL ? `
|
|
60
|
+
background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );
|
|
61
|
+
` : ``;
|
|
60
62
|
});
|
|
61
63
|
|
|
62
64
|
exports.StyledCarouselBtn = StyledCarouselBtn;
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
5
|
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
7
6
|
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
7
|
require('core-js/modules/esnext.iterator.reduce.js');
|
|
@@ -40,7 +40,7 @@ const useCarouselCallbacks = _ref => {
|
|
|
40
40
|
const tabList = carouselOnlyListRef.current;
|
|
41
41
|
const tabButton = target;
|
|
42
42
|
const tabButtonDimensions = tabButton.getBoundingClientRect();
|
|
43
|
-
const tabListDimensions = tabList
|
|
43
|
+
const tabListDimensions = tabList?.getBoundingClientRect();
|
|
44
44
|
const tabButtonIndex = tabButton.dataset.index;
|
|
45
45
|
const lastItemIndex = focusableTabsRef.current.length.toString();
|
|
46
46
|
const magicNumber = 34;
|
|
@@ -93,7 +93,7 @@ const TabBar = () => {
|
|
|
93
93
|
"aria-controls": tabId,
|
|
94
94
|
"aria-selected": actualActiveTab === tabId,
|
|
95
95
|
"aria-disabled": disabled,
|
|
96
|
-
"aria-labelledby":
|
|
96
|
+
"aria-labelledby": `${tabId}-label`,
|
|
97
97
|
isDSMobile: isDSMobile,
|
|
98
98
|
fixedTabsHeaders: fixedTabsHeaders,
|
|
99
99
|
tabType: type,
|
|
@@ -106,7 +106,7 @@ const TabBar = () => {
|
|
|
106
106
|
disabled: disabled,
|
|
107
107
|
showSeparator: showSeparator && type !== constants.TabTypes.NORMAL,
|
|
108
108
|
"data-testid": type === constants.TabTypes.NORMAL ? DSTabsDatatestid.DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.DSTabsDatatestid.SUBTAB_BUTTON,
|
|
109
|
-
id:
|
|
109
|
+
id: `${tabId}-label`,
|
|
110
110
|
onClick: e => {
|
|
111
111
|
if (!disabled) {
|
|
112
112
|
handleOnTabChange(tabId, e);
|
|
@@ -2,17 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
6
5
|
var styled = require('styled-components');
|
|
7
6
|
var dsSystem = require('@elliemae/ds-system');
|
|
8
7
|
var constants = require('../../utils/constants.js');
|
|
9
8
|
|
|
10
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
10
|
|
|
12
|
-
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
13
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
/* eslint-disable indent */
|
|
16
14
|
const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
17
15
|
componentId: "sc-3hla56-0"
|
|
18
16
|
})(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
|
|
@@ -20,9 +18,9 @@ const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.wit
|
|
|
20
18
|
tabType,
|
|
21
19
|
isDSMobile
|
|
22
20
|
} = _ref;
|
|
23
|
-
if (isDSMobile) return
|
|
24
|
-
if (tabType === constants.TabTypes.NORMAL_SMALL) return
|
|
25
|
-
return
|
|
21
|
+
if (isDSMobile) return `35px`;
|
|
22
|
+
if (tabType === constants.TabTypes.NORMAL_SMALL) return `15px`;
|
|
23
|
+
return `25px`;
|
|
26
24
|
}, _ref2 => {
|
|
27
25
|
let {
|
|
28
26
|
theme
|
|
@@ -32,9 +30,13 @@ const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.wit
|
|
|
32
30
|
let {
|
|
33
31
|
isDSMobile
|
|
34
32
|
} = _ref3;
|
|
35
|
-
return isDSMobile ?
|
|
33
|
+
return isDSMobile ? `
|
|
34
|
+
margin-left: 0;
|
|
35
|
+
margin-top: 3px;
|
|
36
|
+
` : ``;
|
|
36
37
|
});
|
|
37
|
-
const mobileGradientsSettings = dsSystem.css
|
|
38
|
+
const mobileGradientsSettings = dsSystem.css`
|
|
39
|
+
${_ref4 => {
|
|
38
40
|
let {
|
|
39
41
|
theme,
|
|
40
42
|
mobileGradients,
|
|
@@ -43,13 +45,14 @@ const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject
|
|
|
43
45
|
} = _ref4;
|
|
44
46
|
|
|
45
47
|
if (isDSMobile && !fixedTabsHeaders) {
|
|
46
|
-
if (mobileGradients.right && mobileGradients.left) return
|
|
47
|
-
if (mobileGradients.right) return
|
|
48
|
-
if (mobileGradients.left) return
|
|
48
|
+
if (mobileGradients.right && mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
|
|
49
|
+
if (mobileGradients.right) return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
|
|
50
|
+
if (mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
|
|
49
51
|
}
|
|
50
52
|
|
|
51
|
-
return
|
|
52
|
-
}
|
|
53
|
+
return ``;
|
|
54
|
+
}}
|
|
55
|
+
`;
|
|
53
56
|
const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
54
57
|
componentId: "sc-3hla56-1"
|
|
55
58
|
})(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
|
|
@@ -63,7 +66,7 @@ const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig(
|
|
|
63
66
|
theme,
|
|
64
67
|
isDSMobile
|
|
65
68
|
} = _ref6;
|
|
66
|
-
return isDSMobile ?
|
|
69
|
+
return isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``;
|
|
67
70
|
});
|
|
68
71
|
const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfig({
|
|
69
72
|
componentId: "sc-3hla56-2"
|
|
@@ -71,7 +74,7 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
|
|
|
71
74
|
let {
|
|
72
75
|
tabType
|
|
73
76
|
} = _ref7;
|
|
74
|
-
return tabType === constants.TabTypes.SUBTABS ?
|
|
77
|
+
return tabType === constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`;
|
|
75
78
|
}, _ref8 => {
|
|
76
79
|
let {
|
|
77
80
|
fixedTabsHeaders,
|
|
@@ -97,27 +100,55 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
|
|
|
97
100
|
let {
|
|
98
101
|
tabType
|
|
99
102
|
} = _ref11;
|
|
100
|
-
return tabType === constants.TabTypes.NORMAL ?
|
|
103
|
+
return tabType === constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`;
|
|
101
104
|
}, _ref12 => {
|
|
102
105
|
let {
|
|
103
106
|
theme,
|
|
104
107
|
isActive,
|
|
105
108
|
disabled
|
|
106
109
|
} = _ref12;
|
|
107
|
-
return isActive && !disabled ?
|
|
110
|
+
return isActive && !disabled ? `
|
|
111
|
+
font-weight: ${theme.fontWeights.semibold};
|
|
112
|
+
${dsSystem.safariAndFirefoxBold(`#353C46`)}
|
|
113
|
+
|
|
114
|
+
&:hover {
|
|
115
|
+
${dsSystem.safariAndFirefoxBold(`#1E79C2`)}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
` : `
|
|
119
|
+
|
|
120
|
+
`;
|
|
108
121
|
}, _ref13 => {
|
|
109
122
|
let {
|
|
110
123
|
theme,
|
|
111
124
|
disabled
|
|
112
125
|
} = _ref13;
|
|
113
|
-
return disabled ?
|
|
126
|
+
return disabled ? `
|
|
127
|
+
color: ${theme.colors.neutral[500]};
|
|
128
|
+
cursor: not-allowed;
|
|
129
|
+
` : `
|
|
130
|
+
&:hover {
|
|
131
|
+
color: ${theme.colors.brand[600]};
|
|
132
|
+
}
|
|
133
|
+
`;
|
|
114
134
|
}, _ref14 => {
|
|
115
135
|
let {
|
|
116
136
|
theme,
|
|
117
137
|
showSeparator,
|
|
118
138
|
tabType
|
|
119
139
|
} = _ref14;
|
|
120
|
-
return showSeparator ?
|
|
140
|
+
return showSeparator ? `
|
|
141
|
+
&:not(:last-of-type):before
|
|
142
|
+
{
|
|
143
|
+
content: "";
|
|
144
|
+
position: absolute;
|
|
145
|
+
width: 1px;
|
|
146
|
+
right: -16px;
|
|
147
|
+
top: 50%;
|
|
148
|
+
transform: translateY(-50%);
|
|
149
|
+
height: ${tabType === constants.TabTypes.SUBTABS ? `10px` : `16px`};
|
|
150
|
+
background: ${theme.colors.neutral[400]};
|
|
151
|
+
}` : ``;
|
|
121
152
|
}, _ref15 => {
|
|
122
153
|
let {
|
|
123
154
|
theme,
|
|
@@ -125,7 +156,38 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
|
|
|
125
156
|
tabType,
|
|
126
157
|
isActive
|
|
127
158
|
} = _ref15;
|
|
128
|
-
return !isDSMobile ?
|
|
159
|
+
return !isDSMobile ? `
|
|
160
|
+
&:focus {
|
|
161
|
+
outline: none;
|
|
162
|
+
&:after {
|
|
163
|
+
position: absolute;
|
|
164
|
+
content: '';
|
|
165
|
+
top: 0;
|
|
166
|
+
left: -16px;
|
|
167
|
+
width: calc(100% + 32px);
|
|
168
|
+
height: 100%;
|
|
169
|
+
z-index: 5;
|
|
170
|
+
border-radius: 2px;
|
|
171
|
+
border: 2px solid ${theme.colors.brand[700]};
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
${tabType !== constants.TabTypes.SUBTABS && isActive ? `
|
|
175
|
+
&:before {
|
|
176
|
+
position: absolute;
|
|
177
|
+
content: '';
|
|
178
|
+
left: -16px;
|
|
179
|
+
right: 0;
|
|
180
|
+
top: calc(100% - 2px);
|
|
181
|
+
transform: none;
|
|
182
|
+
width: calc(100% + 32px);
|
|
183
|
+
height: 2px;
|
|
184
|
+
z-index: 10;
|
|
185
|
+
background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);
|
|
186
|
+
}
|
|
187
|
+
` : ``}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
` : ``;
|
|
129
191
|
}, _ref16 => {
|
|
130
192
|
let {
|
|
131
193
|
theme,
|
|
@@ -133,7 +195,44 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
|
|
|
133
195
|
disabled,
|
|
134
196
|
isDSMobile
|
|
135
197
|
} = _ref16;
|
|
136
|
-
return isDSMobile ?
|
|
198
|
+
return isDSMobile ? `
|
|
199
|
+
height: 40px;
|
|
200
|
+
color: ${theme.colors.brand[600]};
|
|
201
|
+
font-weight: ${theme.fontWeights.regular};
|
|
202
|
+
padding: 0;
|
|
203
|
+
font-size: 13px;
|
|
204
|
+
line-height: 1.3;
|
|
205
|
+
${dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}
|
|
206
|
+
|
|
207
|
+
&:focus {
|
|
208
|
+
font-weight: ${theme.fontWeights.regular};
|
|
209
|
+
font-size: 13px;
|
|
210
|
+
${dsSystem.safariAndFirefoxBold('#006AA9')}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
${isActive ? `
|
|
214
|
+
font-weight: ${theme.fontWeights.regular};
|
|
215
|
+
font-size: 13px;
|
|
216
|
+
${dsSystem.safariAndFirefoxBold('#006AA9')}
|
|
217
|
+
` : ``}
|
|
218
|
+
|
|
219
|
+
${isActive && !disabled ? `
|
|
220
|
+
font-size: 13px;
|
|
221
|
+
color: ${theme.colors.brand[700]};
|
|
222
|
+
line-height: 1.3;
|
|
223
|
+
font-weight: ${theme.fontWeights.regular};
|
|
224
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
|
225
|
+
-webkit-text-stroke: 0.4px ${theme.colors.brand[700]};` : ``}
|
|
226
|
+
|
|
227
|
+
${!disabled ? `
|
|
228
|
+
&:hover,
|
|
229
|
+
&:focus {
|
|
230
|
+
outline: none;
|
|
231
|
+
color: ${theme.colors.brand[700]};
|
|
232
|
+
${dsSystem.safariAndFirefoxBold('#006AA9')}
|
|
233
|
+
}` : ``}
|
|
234
|
+
|
|
235
|
+
` : ``;
|
|
137
236
|
});
|
|
138
237
|
const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
139
238
|
componentId: "sc-3hla56-3"
|
|
@@ -150,31 +249,59 @@ const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
150
249
|
withCarousel,
|
|
151
250
|
isDSMobile
|
|
152
251
|
} = _ref18;
|
|
153
|
-
return withCarousel && !isDSMobile ?
|
|
252
|
+
return withCarousel && !isDSMobile ? `max-width: 100%;` : '';
|
|
154
253
|
}, _ref19 => {
|
|
155
254
|
let {
|
|
156
255
|
theme,
|
|
157
256
|
isDSMobile,
|
|
158
257
|
tabType
|
|
159
258
|
} = _ref19;
|
|
160
|
-
return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ?
|
|
259
|
+
return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
|
|
260
|
+
&:after {
|
|
261
|
+
content: '';
|
|
262
|
+
position: absolute;
|
|
263
|
+
width: 100%;
|
|
264
|
+
height: 1px;
|
|
265
|
+
box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};
|
|
266
|
+
pointer-events: none;
|
|
267
|
+
bottom: 0px;
|
|
268
|
+
}
|
|
269
|
+
` : ``;
|
|
161
270
|
}, StyledTabButton, _ref20 => {
|
|
162
271
|
let {
|
|
163
272
|
theme,
|
|
164
273
|
isDSMobile
|
|
165
274
|
} = _ref20;
|
|
166
|
-
return isDSMobile ?
|
|
275
|
+
return isDSMobile ? `
|
|
276
|
+
|
|
277
|
+
background: ${theme.colors.brand[200]};` : ``;
|
|
167
278
|
}, mobileGradientsSettings, _ref21 => {
|
|
168
279
|
let {
|
|
169
280
|
isDSMobile,
|
|
170
281
|
fixedTabsHeaders
|
|
171
282
|
} = _ref21;
|
|
172
|
-
return isDSMobile ?
|
|
283
|
+
return isDSMobile ? `
|
|
284
|
+
${!fixedTabsHeaders ? `
|
|
285
|
+
z-index: 0;
|
|
286
|
+
overflow-x: auto;
|
|
287
|
+
overflow-y: hidden;
|
|
288
|
+
scrollbar-width: thin;
|
|
289
|
+
&::-webkit-scrollbar {
|
|
290
|
+
display: none;
|
|
291
|
+
}` : `
|
|
292
|
+
display: flex;
|
|
293
|
+
${StyledTabButton} {
|
|
294
|
+
flex: 1;
|
|
295
|
+
overflow-x: hidden;
|
|
296
|
+
}`}` : ``;
|
|
173
297
|
}, StyledSelectionIndicator, _ref22 => {
|
|
174
298
|
let {
|
|
175
299
|
indicatorStyle
|
|
176
300
|
} = _ref22;
|
|
177
|
-
return
|
|
301
|
+
return `
|
|
302
|
+
width: ${indicatorStyle.width};
|
|
303
|
+
left: ${indicatorStyle.left};
|
|
304
|
+
`;
|
|
178
305
|
}, StyledSelectionIndicator, _ref23 => {
|
|
179
306
|
let {
|
|
180
307
|
theme,
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var useResizeObserver = require('@react-hook/resize-observer');
|
|
8
7
|
var helpers = require('../../utils/helpers.js');
|
|
@@ -13,6 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
12
|
|
|
14
13
|
var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
|
|
15
14
|
|
|
15
|
+
/* eslint-disable max-statements */
|
|
16
16
|
const useTabBar = () => {
|
|
17
17
|
const {
|
|
18
18
|
actualActiveTab,
|
|
@@ -41,10 +41,10 @@ const useTabBar = () => {
|
|
|
41
41
|
// behavior that adds scroll to the tabList
|
|
42
42
|
|
|
43
43
|
const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
|
|
44
|
-
const backgroundWithTransparent =
|
|
44
|
+
const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2 ${tabClientWidth - 16}px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;
|
|
45
45
|
return {
|
|
46
|
-
left:
|
|
47
|
-
width:
|
|
46
|
+
left: `${position}px`,
|
|
47
|
+
width: `${tabClientWidth}px`,
|
|
48
48
|
backgroundWithTransparent
|
|
49
49
|
};
|
|
50
50
|
}
|
|
@@ -45,12 +45,10 @@ const TabsPanels = () => {
|
|
|
45
45
|
const offset = index - indexLatest;
|
|
46
46
|
|
|
47
47
|
if (focusableTabsRef.current) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
const currentIndexFocusable = (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : _focusableTabsRef$cur.findIndex(el => el.dataset.tabId === actualActiveTab);
|
|
48
|
+
const currentIndexFocusable = focusableTabsRef.current?.findIndex(el => el.dataset.tabId === actualActiveTab);
|
|
51
49
|
const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
|
|
52
|
-
if (newFocusableIndex < 0 || newFocusableIndex >
|
|
53
|
-
handleOnTabChange(
|
|
50
|
+
if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex]) return;
|
|
51
|
+
handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId); // swiping does not trigger centerTab function inside handleOnTabChange because there is no event
|
|
54
52
|
// by clicking we are manually forcing to center the tab
|
|
55
53
|
|
|
56
54
|
focusableTabsRef.current[newFocusableIndex].click();
|
|
@@ -74,7 +72,7 @@ const TabsPanels = () => {
|
|
|
74
72
|
if (disabled) return null;
|
|
75
73
|
return shouldRender && /*#__PURE__*/_jsx__default["default"](styles.StyledPanelContainer, {
|
|
76
74
|
id: panelId,
|
|
77
|
-
"aria-labelledby":
|
|
75
|
+
"aria-labelledby": `${panelId}-label`,
|
|
78
76
|
"aria-hidden": !isActive,
|
|
79
77
|
"data-panel-id": panelId,
|
|
80
78
|
"data-testid": "ds-tabs-tab-panel",
|
|
@@ -19,7 +19,7 @@ const StyledPanelContainer = /*#__PURE__*/styled__default["default"].div.withCon
|
|
|
19
19
|
let {
|
|
20
20
|
isDSMobile
|
|
21
21
|
} = _ref2;
|
|
22
|
-
return isDSMobile ?
|
|
22
|
+
return isDSMobile ? `padding-top: 0;` : ``;
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.StyledPanelContainer = StyledPanelContainer;
|
package/cjs/utils/helpers.js
CHANGED
|
@@ -34,10 +34,10 @@ const centerTab = _ref => {
|
|
|
34
34
|
if (listRef.current) {
|
|
35
35
|
const {
|
|
36
36
|
offsetLeft
|
|
37
|
-
} = e
|
|
37
|
+
} = e?.target;
|
|
38
38
|
const {
|
|
39
39
|
width: tabWidth
|
|
40
|
-
} = (e
|
|
40
|
+
} = (e?.target).getBoundingClientRect();
|
|
41
41
|
const {
|
|
42
42
|
width: listWidth
|
|
43
43
|
} = listRef.current.getBoundingClientRect();
|
|
@@ -49,7 +49,7 @@ const centerTab = _ref => {
|
|
|
49
49
|
left: centeredLeftOffset,
|
|
50
50
|
behavior: 'smooth'
|
|
51
51
|
});
|
|
52
|
-
e
|
|
52
|
+
e?.preventDefault();
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
55
|
const getVisibleDimensions = (node, referenceNode) => {
|
|
@@ -16,41 +16,33 @@ const useKeyboardNavigation = () => {
|
|
|
16
16
|
} = React.useContext(DSTabsCTX.DSTabsCrossRefContext);
|
|
17
17
|
const handleOnKeyDown = React.useCallback(e => {
|
|
18
18
|
if (e.key === 'ArrowRight' && focusableTabsRef.current) {
|
|
19
|
-
var _focusableTabsRef$cur, _focusableTabsRef$cur2;
|
|
20
|
-
|
|
21
19
|
e.preventDefault();
|
|
22
20
|
e.stopPropagation();
|
|
23
|
-
const nextTab = focusableTabsRef.current[
|
|
21
|
+
const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
|
|
24
22
|
if (nextTab) nextTab.focus();
|
|
25
23
|
if (!nextTab) return;
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
if (e.key === 'ArrowLeft' && focusableTabsRef.current) {
|
|
29
|
-
var _focusableTabsRef$cur3, _focusableTabsRef$cur4;
|
|
30
|
-
|
|
31
27
|
e.preventDefault();
|
|
32
28
|
e.stopPropagation();
|
|
33
|
-
const prevTab = focusableTabsRef.current[
|
|
29
|
+
const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
|
|
34
30
|
if (prevTab) prevTab.focus();
|
|
35
31
|
if (!prevTab) return;
|
|
36
32
|
}
|
|
37
33
|
|
|
38
34
|
if (e.key === 'ArrowDown') {
|
|
39
|
-
var _firstSubtabInternalR;
|
|
40
|
-
|
|
41
35
|
e.preventDefault();
|
|
42
36
|
e.stopPropagation();
|
|
43
|
-
const canFocusCrossTabs =
|
|
44
|
-
if (canFocusCrossTabs)
|
|
37
|
+
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
38
|
+
if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();
|
|
45
39
|
}
|
|
46
40
|
|
|
47
41
|
if (e.key === 'ArrowUp') {
|
|
48
|
-
var _lastTabInternalRef$c;
|
|
49
|
-
|
|
50
42
|
e.preventDefault();
|
|
51
43
|
e.stopPropagation();
|
|
52
|
-
const canFocusCrossTabs =
|
|
53
|
-
if (canFocusCrossTabs)
|
|
44
|
+
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
45
|
+
if (canFocusCrossTabs) lastTabInternalRef.current?.focus();
|
|
54
46
|
}
|
|
55
47
|
}, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
|
|
56
48
|
return {
|
package/esm/config/useTabs.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
1
|
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
3
2
|
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
4
3
|
import 'core-js/modules/esnext.iterator.find.js';
|
|
@@ -23,14 +22,12 @@ const useTabs = props => {
|
|
|
23
22
|
return internalActiveTab;
|
|
24
23
|
}, [activeTab, internalActiveTab]);
|
|
25
24
|
useEffect(() => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
|
|
25
|
+
actualActiveTabRef.current = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab) ?? null;
|
|
29
26
|
}, [actualActiveTab]);
|
|
30
27
|
useEffect(() => {
|
|
31
28
|
if (activeTab === undefined) {
|
|
32
29
|
const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
|
|
33
|
-
setInternalActiveTab(
|
|
30
|
+
setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');
|
|
34
31
|
}
|
|
35
32
|
}, [activeTab]);
|
|
36
33
|
const ctx = useMemo(() => ({
|
|
@@ -32,7 +32,7 @@ const StyledCarouselButtonWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
32
32
|
let {
|
|
33
33
|
right
|
|
34
34
|
} = _ref4;
|
|
35
|
-
return right ? 'right: 0;' :
|
|
35
|
+
return right ? 'right: 0;' : `left: 0;`;
|
|
36
36
|
}, _ref5 => {
|
|
37
37
|
let {
|
|
38
38
|
tabType
|
|
@@ -48,7 +48,9 @@ const StyledCarouselButtonWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
48
48
|
theme,
|
|
49
49
|
tabType
|
|
50
50
|
} = _ref7;
|
|
51
|
-
return tabType === TabTypes.NORMAL ?
|
|
51
|
+
return tabType === TabTypes.NORMAL ? `
|
|
52
|
+
background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );
|
|
53
|
+
` : ``;
|
|
52
54
|
});
|
|
53
55
|
|
|
54
56
|
export { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap };
|
|
@@ -36,7 +36,7 @@ const useCarouselCallbacks = _ref => {
|
|
|
36
36
|
const tabList = carouselOnlyListRef.current;
|
|
37
37
|
const tabButton = target;
|
|
38
38
|
const tabButtonDimensions = tabButton.getBoundingClientRect();
|
|
39
|
-
const tabListDimensions = tabList
|
|
39
|
+
const tabListDimensions = tabList?.getBoundingClientRect();
|
|
40
40
|
const tabButtonIndex = tabButton.dataset.index;
|
|
41
41
|
const lastItemIndex = focusableTabsRef.current.length.toString();
|
|
42
42
|
const magicNumber = 34;
|
|
@@ -84,7 +84,7 @@ const TabBar = () => {
|
|
|
84
84
|
"aria-controls": tabId,
|
|
85
85
|
"aria-selected": actualActiveTab === tabId,
|
|
86
86
|
"aria-disabled": disabled,
|
|
87
|
-
"aria-labelledby":
|
|
87
|
+
"aria-labelledby": `${tabId}-label`,
|
|
88
88
|
isDSMobile: isDSMobile,
|
|
89
89
|
fixedTabsHeaders: fixedTabsHeaders,
|
|
90
90
|
tabType: type,
|
|
@@ -97,7 +97,7 @@ const TabBar = () => {
|
|
|
97
97
|
disabled: disabled,
|
|
98
98
|
showSeparator: showSeparator && type !== TabTypes.NORMAL,
|
|
99
99
|
"data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
|
|
100
|
-
id:
|
|
100
|
+
id: `${tabId}-label`,
|
|
101
101
|
onClick: e => {
|
|
102
102
|
if (!disabled) {
|
|
103
103
|
handleOnTabChange(tabId, e);
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
|
|
2
1
|
import styled from 'styled-components';
|
|
3
2
|
import { css, onlySafariAndFirefox, safariAndFirefoxBold } from '@elliemae/ds-system';
|
|
4
3
|
import { TabTypes } from '../../utils/constants.js';
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
/* eslint-disable indent */
|
|
7
6
|
const StyledSelectionIndicator = /*#__PURE__*/styled.div.withConfig({
|
|
8
7
|
componentId: "sc-3hla56-0"
|
|
9
8
|
})(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
|
|
@@ -11,9 +10,9 @@ const StyledSelectionIndicator = /*#__PURE__*/styled.div.withConfig({
|
|
|
11
10
|
tabType,
|
|
12
11
|
isDSMobile
|
|
13
12
|
} = _ref;
|
|
14
|
-
if (isDSMobile) return
|
|
15
|
-
if (tabType === TabTypes.NORMAL_SMALL) return
|
|
16
|
-
return
|
|
13
|
+
if (isDSMobile) return `35px`;
|
|
14
|
+
if (tabType === TabTypes.NORMAL_SMALL) return `15px`;
|
|
15
|
+
return `25px`;
|
|
17
16
|
}, _ref2 => {
|
|
18
17
|
let {
|
|
19
18
|
theme
|
|
@@ -23,9 +22,13 @@ const StyledSelectionIndicator = /*#__PURE__*/styled.div.withConfig({
|
|
|
23
22
|
let {
|
|
24
23
|
isDSMobile
|
|
25
24
|
} = _ref3;
|
|
26
|
-
return isDSMobile ?
|
|
25
|
+
return isDSMobile ? `
|
|
26
|
+
margin-left: 0;
|
|
27
|
+
margin-top: 3px;
|
|
28
|
+
` : ``;
|
|
27
29
|
});
|
|
28
|
-
const mobileGradientsSettings = css
|
|
30
|
+
const mobileGradientsSettings = css`
|
|
31
|
+
${_ref4 => {
|
|
29
32
|
let {
|
|
30
33
|
theme,
|
|
31
34
|
mobileGradients,
|
|
@@ -34,13 +37,14 @@ const mobileGradientsSettings = css(_templateObject || (_templateObject = _tagge
|
|
|
34
37
|
} = _ref4;
|
|
35
38
|
|
|
36
39
|
if (isDSMobile && !fixedTabsHeaders) {
|
|
37
|
-
if (mobileGradients.right && mobileGradients.left) return
|
|
38
|
-
if (mobileGradients.right) return
|
|
39
|
-
if (mobileGradients.left) return
|
|
40
|
+
if (mobileGradients.right && mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
|
|
41
|
+
if (mobileGradients.right) return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
|
|
42
|
+
if (mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
|
-
return
|
|
43
|
-
}
|
|
45
|
+
return ``;
|
|
46
|
+
}}
|
|
47
|
+
`;
|
|
44
48
|
const StyledTabWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
45
49
|
componentId: "sc-3hla56-1"
|
|
46
50
|
})(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
|
|
@@ -54,7 +58,7 @@ const StyledTabWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
54
58
|
theme,
|
|
55
59
|
isDSMobile
|
|
56
60
|
} = _ref6;
|
|
57
|
-
return isDSMobile ?
|
|
61
|
+
return isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``;
|
|
58
62
|
});
|
|
59
63
|
const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
|
|
60
64
|
componentId: "sc-3hla56-2"
|
|
@@ -62,7 +66,7 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
62
66
|
let {
|
|
63
67
|
tabType
|
|
64
68
|
} = _ref7;
|
|
65
|
-
return tabType === TabTypes.SUBTABS ?
|
|
69
|
+
return tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`;
|
|
66
70
|
}, _ref8 => {
|
|
67
71
|
let {
|
|
68
72
|
fixedTabsHeaders,
|
|
@@ -88,27 +92,55 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
88
92
|
let {
|
|
89
93
|
tabType
|
|
90
94
|
} = _ref11;
|
|
91
|
-
return tabType === TabTypes.NORMAL ?
|
|
95
|
+
return tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`;
|
|
92
96
|
}, _ref12 => {
|
|
93
97
|
let {
|
|
94
98
|
theme,
|
|
95
99
|
isActive,
|
|
96
100
|
disabled
|
|
97
101
|
} = _ref12;
|
|
98
|
-
return isActive && !disabled ?
|
|
102
|
+
return isActive && !disabled ? `
|
|
103
|
+
font-weight: ${theme.fontWeights.semibold};
|
|
104
|
+
${safariAndFirefoxBold(`#353C46`)}
|
|
105
|
+
|
|
106
|
+
&:hover {
|
|
107
|
+
${safariAndFirefoxBold(`#1E79C2`)}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
` : `
|
|
111
|
+
|
|
112
|
+
`;
|
|
99
113
|
}, _ref13 => {
|
|
100
114
|
let {
|
|
101
115
|
theme,
|
|
102
116
|
disabled
|
|
103
117
|
} = _ref13;
|
|
104
|
-
return disabled ?
|
|
118
|
+
return disabled ? `
|
|
119
|
+
color: ${theme.colors.neutral[500]};
|
|
120
|
+
cursor: not-allowed;
|
|
121
|
+
` : `
|
|
122
|
+
&:hover {
|
|
123
|
+
color: ${theme.colors.brand[600]};
|
|
124
|
+
}
|
|
125
|
+
`;
|
|
105
126
|
}, _ref14 => {
|
|
106
127
|
let {
|
|
107
128
|
theme,
|
|
108
129
|
showSeparator,
|
|
109
130
|
tabType
|
|
110
131
|
} = _ref14;
|
|
111
|
-
return showSeparator ?
|
|
132
|
+
return showSeparator ? `
|
|
133
|
+
&:not(:last-of-type):before
|
|
134
|
+
{
|
|
135
|
+
content: "";
|
|
136
|
+
position: absolute;
|
|
137
|
+
width: 1px;
|
|
138
|
+
right: -16px;
|
|
139
|
+
top: 50%;
|
|
140
|
+
transform: translateY(-50%);
|
|
141
|
+
height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};
|
|
142
|
+
background: ${theme.colors.neutral[400]};
|
|
143
|
+
}` : ``;
|
|
112
144
|
}, _ref15 => {
|
|
113
145
|
let {
|
|
114
146
|
theme,
|
|
@@ -116,7 +148,38 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
116
148
|
tabType,
|
|
117
149
|
isActive
|
|
118
150
|
} = _ref15;
|
|
119
|
-
return !isDSMobile ?
|
|
151
|
+
return !isDSMobile ? `
|
|
152
|
+
&:focus {
|
|
153
|
+
outline: none;
|
|
154
|
+
&:after {
|
|
155
|
+
position: absolute;
|
|
156
|
+
content: '';
|
|
157
|
+
top: 0;
|
|
158
|
+
left: -16px;
|
|
159
|
+
width: calc(100% + 32px);
|
|
160
|
+
height: 100%;
|
|
161
|
+
z-index: 5;
|
|
162
|
+
border-radius: 2px;
|
|
163
|
+
border: 2px solid ${theme.colors.brand[700]};
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
${tabType !== TabTypes.SUBTABS && isActive ? `
|
|
167
|
+
&:before {
|
|
168
|
+
position: absolute;
|
|
169
|
+
content: '';
|
|
170
|
+
left: -16px;
|
|
171
|
+
right: 0;
|
|
172
|
+
top: calc(100% - 2px);
|
|
173
|
+
transform: none;
|
|
174
|
+
width: calc(100% + 32px);
|
|
175
|
+
height: 2px;
|
|
176
|
+
z-index: 10;
|
|
177
|
+
background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);
|
|
178
|
+
}
|
|
179
|
+
` : ``}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
` : ``;
|
|
120
183
|
}, _ref16 => {
|
|
121
184
|
let {
|
|
122
185
|
theme,
|
|
@@ -124,7 +187,44 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
124
187
|
disabled,
|
|
125
188
|
isDSMobile
|
|
126
189
|
} = _ref16;
|
|
127
|
-
return isDSMobile ?
|
|
190
|
+
return isDSMobile ? `
|
|
191
|
+
height: 40px;
|
|
192
|
+
color: ${theme.colors.brand[600]};
|
|
193
|
+
font-weight: ${theme.fontWeights.regular};
|
|
194
|
+
padding: 0;
|
|
195
|
+
font-size: 13px;
|
|
196
|
+
line-height: 1.3;
|
|
197
|
+
${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}
|
|
198
|
+
|
|
199
|
+
&:focus {
|
|
200
|
+
font-weight: ${theme.fontWeights.regular};
|
|
201
|
+
font-size: 13px;
|
|
202
|
+
${safariAndFirefoxBold('#006AA9')}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
${isActive ? `
|
|
206
|
+
font-weight: ${theme.fontWeights.regular};
|
|
207
|
+
font-size: 13px;
|
|
208
|
+
${safariAndFirefoxBold('#006AA9')}
|
|
209
|
+
` : ``}
|
|
210
|
+
|
|
211
|
+
${isActive && !disabled ? `
|
|
212
|
+
font-size: 13px;
|
|
213
|
+
color: ${theme.colors.brand[700]};
|
|
214
|
+
line-height: 1.3;
|
|
215
|
+
font-weight: ${theme.fontWeights.regular};
|
|
216
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
|
217
|
+
-webkit-text-stroke: 0.4px ${theme.colors.brand[700]};` : ``}
|
|
218
|
+
|
|
219
|
+
${!disabled ? `
|
|
220
|
+
&:hover,
|
|
221
|
+
&:focus {
|
|
222
|
+
outline: none;
|
|
223
|
+
color: ${theme.colors.brand[700]};
|
|
224
|
+
${safariAndFirefoxBold('#006AA9')}
|
|
225
|
+
}` : ``}
|
|
226
|
+
|
|
227
|
+
` : ``;
|
|
128
228
|
});
|
|
129
229
|
const StyledSubTabsList = /*#__PURE__*/styled.div.withConfig({
|
|
130
230
|
componentId: "sc-3hla56-3"
|
|
@@ -141,31 +241,59 @@ const StyledTabList = /*#__PURE__*/styled.div.withConfig({
|
|
|
141
241
|
withCarousel,
|
|
142
242
|
isDSMobile
|
|
143
243
|
} = _ref18;
|
|
144
|
-
return withCarousel && !isDSMobile ?
|
|
244
|
+
return withCarousel && !isDSMobile ? `max-width: 100%;` : '';
|
|
145
245
|
}, _ref19 => {
|
|
146
246
|
let {
|
|
147
247
|
theme,
|
|
148
248
|
isDSMobile,
|
|
149
249
|
tabType
|
|
150
250
|
} = _ref19;
|
|
151
|
-
return tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ?
|
|
251
|
+
return tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ? `
|
|
252
|
+
&:after {
|
|
253
|
+
content: '';
|
|
254
|
+
position: absolute;
|
|
255
|
+
width: 100%;
|
|
256
|
+
height: 1px;
|
|
257
|
+
box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};
|
|
258
|
+
pointer-events: none;
|
|
259
|
+
bottom: 0px;
|
|
260
|
+
}
|
|
261
|
+
` : ``;
|
|
152
262
|
}, StyledTabButton, _ref20 => {
|
|
153
263
|
let {
|
|
154
264
|
theme,
|
|
155
265
|
isDSMobile
|
|
156
266
|
} = _ref20;
|
|
157
|
-
return isDSMobile ?
|
|
267
|
+
return isDSMobile ? `
|
|
268
|
+
|
|
269
|
+
background: ${theme.colors.brand[200]};` : ``;
|
|
158
270
|
}, mobileGradientsSettings, _ref21 => {
|
|
159
271
|
let {
|
|
160
272
|
isDSMobile,
|
|
161
273
|
fixedTabsHeaders
|
|
162
274
|
} = _ref21;
|
|
163
|
-
return isDSMobile ?
|
|
275
|
+
return isDSMobile ? `
|
|
276
|
+
${!fixedTabsHeaders ? `
|
|
277
|
+
z-index: 0;
|
|
278
|
+
overflow-x: auto;
|
|
279
|
+
overflow-y: hidden;
|
|
280
|
+
scrollbar-width: thin;
|
|
281
|
+
&::-webkit-scrollbar {
|
|
282
|
+
display: none;
|
|
283
|
+
}` : `
|
|
284
|
+
display: flex;
|
|
285
|
+
${StyledTabButton} {
|
|
286
|
+
flex: 1;
|
|
287
|
+
overflow-x: hidden;
|
|
288
|
+
}`}` : ``;
|
|
164
289
|
}, StyledSelectionIndicator, _ref22 => {
|
|
165
290
|
let {
|
|
166
291
|
indicatorStyle
|
|
167
292
|
} = _ref22;
|
|
168
|
-
return
|
|
293
|
+
return `
|
|
294
|
+
width: ${indicatorStyle.width};
|
|
295
|
+
left: ${indicatorStyle.left};
|
|
296
|
+
`;
|
|
169
297
|
}, StyledSelectionIndicator, _ref23 => {
|
|
170
298
|
let {
|
|
171
299
|
theme,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
1
|
import { useContext, useState, useCallback, useLayoutEffect } from 'react';
|
|
3
2
|
import useResizeObserver from '@react-hook/resize-observer';
|
|
4
3
|
import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';
|
|
5
4
|
import { DSTabsContext } from '../../DSTabsCTX.js';
|
|
6
5
|
import { defaultIndicatorStyles } from '../../utils/constants.js';
|
|
7
6
|
|
|
7
|
+
/* eslint-disable max-statements */
|
|
8
8
|
const useTabBar = () => {
|
|
9
9
|
const {
|
|
10
10
|
actualActiveTab,
|
|
@@ -33,10 +33,10 @@ const useTabBar = () => {
|
|
|
33
33
|
// behavior that adds scroll to the tabList
|
|
34
34
|
|
|
35
35
|
const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
|
|
36
|
-
const backgroundWithTransparent =
|
|
36
|
+
const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2 ${tabClientWidth - 16}px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;
|
|
37
37
|
return {
|
|
38
|
-
left:
|
|
39
|
-
width:
|
|
38
|
+
left: `${position}px`,
|
|
39
|
+
width: `${tabClientWidth}px`,
|
|
40
40
|
backgroundWithTransparent
|
|
41
41
|
};
|
|
42
42
|
}
|
|
@@ -35,12 +35,10 @@ const TabsPanels = () => {
|
|
|
35
35
|
const offset = index - indexLatest;
|
|
36
36
|
|
|
37
37
|
if (focusableTabsRef.current) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const currentIndexFocusable = (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : _focusableTabsRef$cur.findIndex(el => el.dataset.tabId === actualActiveTab);
|
|
38
|
+
const currentIndexFocusable = focusableTabsRef.current?.findIndex(el => el.dataset.tabId === actualActiveTab);
|
|
41
39
|
const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
|
|
42
|
-
if (newFocusableIndex < 0 || newFocusableIndex >
|
|
43
|
-
handleOnTabChange(
|
|
40
|
+
if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex]) return;
|
|
41
|
+
handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId); // swiping does not trigger centerTab function inside handleOnTabChange because there is no event
|
|
44
42
|
// by clicking we are manually forcing to center the tab
|
|
45
43
|
|
|
46
44
|
focusableTabsRef.current[newFocusableIndex].click();
|
|
@@ -64,7 +62,7 @@ const TabsPanels = () => {
|
|
|
64
62
|
if (disabled) return null;
|
|
65
63
|
return shouldRender && /*#__PURE__*/_jsx(StyledPanelContainer, {
|
|
66
64
|
id: panelId,
|
|
67
|
-
"aria-labelledby":
|
|
65
|
+
"aria-labelledby": `${panelId}-label`,
|
|
68
66
|
"aria-hidden": !isActive,
|
|
69
67
|
"data-panel-id": panelId,
|
|
70
68
|
"data-testid": "ds-tabs-tab-panel",
|
package/esm/utils/helpers.js
CHANGED
|
@@ -30,10 +30,10 @@ const centerTab = _ref => {
|
|
|
30
30
|
if (listRef.current) {
|
|
31
31
|
const {
|
|
32
32
|
offsetLeft
|
|
33
|
-
} = e
|
|
33
|
+
} = e?.target;
|
|
34
34
|
const {
|
|
35
35
|
width: tabWidth
|
|
36
|
-
} = (e
|
|
36
|
+
} = (e?.target).getBoundingClientRect();
|
|
37
37
|
const {
|
|
38
38
|
width: listWidth
|
|
39
39
|
} = listRef.current.getBoundingClientRect();
|
|
@@ -45,7 +45,7 @@ const centerTab = _ref => {
|
|
|
45
45
|
left: centeredLeftOffset,
|
|
46
46
|
behavior: 'smooth'
|
|
47
47
|
});
|
|
48
|
-
e
|
|
48
|
+
e?.preventDefault();
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
const getVisibleDimensions = (node, referenceNode) => {
|
|
@@ -12,41 +12,33 @@ const useKeyboardNavigation = () => {
|
|
|
12
12
|
} = useContext(DSTabsCrossRefContext);
|
|
13
13
|
const handleOnKeyDown = useCallback(e => {
|
|
14
14
|
if (e.key === 'ArrowRight' && focusableTabsRef.current) {
|
|
15
|
-
var _focusableTabsRef$cur, _focusableTabsRef$cur2;
|
|
16
|
-
|
|
17
15
|
e.preventDefault();
|
|
18
16
|
e.stopPropagation();
|
|
19
|
-
const nextTab = focusableTabsRef.current[
|
|
17
|
+
const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
|
|
20
18
|
if (nextTab) nextTab.focus();
|
|
21
19
|
if (!nextTab) return;
|
|
22
20
|
}
|
|
23
21
|
|
|
24
22
|
if (e.key === 'ArrowLeft' && focusableTabsRef.current) {
|
|
25
|
-
var _focusableTabsRef$cur3, _focusableTabsRef$cur4;
|
|
26
|
-
|
|
27
23
|
e.preventDefault();
|
|
28
24
|
e.stopPropagation();
|
|
29
|
-
const prevTab = focusableTabsRef.current[
|
|
25
|
+
const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
|
|
30
26
|
if (prevTab) prevTab.focus();
|
|
31
27
|
if (!prevTab) return;
|
|
32
28
|
}
|
|
33
29
|
|
|
34
30
|
if (e.key === 'ArrowDown') {
|
|
35
|
-
var _firstSubtabInternalR;
|
|
36
|
-
|
|
37
31
|
e.preventDefault();
|
|
38
32
|
e.stopPropagation();
|
|
39
|
-
const canFocusCrossTabs =
|
|
40
|
-
if (canFocusCrossTabs)
|
|
33
|
+
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
34
|
+
if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();
|
|
41
35
|
}
|
|
42
36
|
|
|
43
37
|
if (e.key === 'ArrowUp') {
|
|
44
|
-
var _lastTabInternalRef$c;
|
|
45
|
-
|
|
46
38
|
e.preventDefault();
|
|
47
39
|
e.stopPropagation();
|
|
48
|
-
const canFocusCrossTabs =
|
|
49
|
-
if (canFocusCrossTabs)
|
|
40
|
+
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
41
|
+
if (canFocusCrossTabs) lastTabInternalRef.current?.focus();
|
|
50
42
|
}
|
|
51
43
|
}, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
|
|
52
44
|
return {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.3-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -124,11 +124,11 @@
|
|
|
124
124
|
"build": "node ../../scripts/build/build.js"
|
|
125
125
|
},
|
|
126
126
|
"dependencies": {
|
|
127
|
-
"@elliemae/ds-button": "2.4.
|
|
128
|
-
"@elliemae/ds-icon": "2.4.
|
|
129
|
-
"@elliemae/ds-icons": "2.4.
|
|
130
|
-
"@elliemae/ds-props-helpers": "2.4.
|
|
131
|
-
"@elliemae/ds-system": "2.4.
|
|
127
|
+
"@elliemae/ds-button": "2.4.3-rc.2",
|
|
128
|
+
"@elliemae/ds-icon": "2.4.3-rc.2",
|
|
129
|
+
"@elliemae/ds-icons": "2.4.3-rc.2",
|
|
130
|
+
"@elliemae/ds-props-helpers": "2.4.3-rc.2",
|
|
131
|
+
"@elliemae/ds-system": "2.4.3-rc.2",
|
|
132
132
|
"@react-hook/resize-observer": "~1.2.5",
|
|
133
133
|
"prop-types": "~15.7.2",
|
|
134
134
|
"react-desc": "~4.1.3",
|