@elliemae/ds-tabs 3.60.0-next.9 → 3.61.0-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/dist/cjs/config/useTabs.js +14 -3
- package/dist/cjs/config/useTabs.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/carousel/Carousel.js +14 -49
- package/dist/cjs/parts/carousel/Carousel.js.map +2 -2
- package/dist/cjs/parts/carousel/styles.js +7 -1
- package/dist/cjs/parts/carousel/styles.js.map +2 -2
- package/dist/cjs/parts/carousel/useCarousel.js +28 -43
- package/dist/cjs/parts/carousel/useCarousel.js.map +3 -3
- package/dist/cjs/parts/tabBar/TabBar.js +3 -1
- package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js +28 -20
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/cjs/parts/tabBar/styles.js +36 -200
- package/dist/cjs/parts/tabBar/styles.js.map +2 -2
- package/dist/cjs/parts/tabsContent/TabsContent.js +13 -5
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/TabsPanels.js +15 -1
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/styles.js +4 -4
- package/dist/cjs/parts/tabsPanel/styles.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/utils/hooks/useKeyboardNavigation.js +10 -4
- package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/config/useTabs.js +14 -3
- package/dist/esm/config/useTabs.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/carousel/Carousel.js +16 -57
- package/dist/esm/parts/carousel/Carousel.js.map +2 -2
- package/dist/esm/parts/carousel/styles.js +7 -1
- package/dist/esm/parts/carousel/styles.js.map +2 -2
- package/dist/esm/parts/carousel/useCarousel.js +29 -44
- package/dist/esm/parts/carousel/useCarousel.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBar.js +3 -1
- package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js +30 -28
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/esm/parts/tabBar/styles.js +37 -201
- package/dist/esm/parts/tabBar/styles.js.map +2 -2
- package/dist/esm/parts/tabsContent/TabsContent.js +13 -5
- package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/parts/tabsPanel/TabsPanels.js +15 -1
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/esm/parts/tabsPanel/styles.js +4 -4
- package/dist/esm/parts/tabsPanel/styles.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/utils/hooks/useKeyboardNavigation.js +10 -4
- package/dist/esm/utils/hooks/useKeyboardNavigation.js.map +2 -2
- package/dist/types/parts/carousel/useCarousel.d.ts +0 -5
- package/dist/types/parts/tabBar/styles.d.ts +7 -16
- package/dist/types/parts/tabsPanel/styles.d.ts +3 -2
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/dist/types/sharedTypes.d.ts +3 -0
- package/dist/types/tests/DSTabs.allDisabled.test.d.ts +1 -0
- package/dist/types/tests/DSTabs.roving-tabindex-PUI-17883.test.d.ts +1 -0
- package/package.json +27 -29
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js +0 -89
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map +0 -7
- package/dist/esm/parts/carousel/useCarouselCallbacks.js +0 -59
- package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +0 -7
- package/dist/types/parts/carousel/useCarouselCallbacks.d.ts +0 -12
|
@@ -31,7 +31,6 @@ __export(styles_exports, {
|
|
|
31
31
|
ScreenReaderOnly: () => ScreenReaderOnly,
|
|
32
32
|
StyledMobileGradient: () => StyledMobileGradient,
|
|
33
33
|
StyledRequiredMark: () => StyledRequiredMark,
|
|
34
|
-
StyledSelectionIndicator: () => StyledSelectionIndicator,
|
|
35
34
|
StyledSubTabButton: () => StyledSubTabButton,
|
|
36
35
|
StyledSubTabsList: () => StyledSubTabsList,
|
|
37
36
|
StyledTabButton: () => StyledTabButton,
|
|
@@ -41,36 +40,8 @@ __export(styles_exports, {
|
|
|
41
40
|
module.exports = __toCommonJS(styles_exports);
|
|
42
41
|
var React = __toESM(require("react"));
|
|
43
42
|
var import_ds_system = require("@elliemae/ds-system");
|
|
43
|
+
var import_ds_tab_button = require("@elliemae/ds-tab-button");
|
|
44
44
|
var import_constants = require("../../constants/index.js");
|
|
45
|
-
const StyledSelectionIndicator = import_ds_system.styled.div`
|
|
46
|
-
pointer-events: none;
|
|
47
|
-
position: absolute;
|
|
48
|
-
height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
|
|
49
|
-
width: ${({ isDSMobile }) => isDSMobile ? "100%" : "calc(100% + 32px)"};
|
|
50
|
-
left: ${({ isDSMobile }) => isDSMobile ? "0" : "-16px"};
|
|
51
|
-
top: ${({ tabType, isDSMobile }) => {
|
|
52
|
-
if (isDSMobile) return `35px`;
|
|
53
|
-
if (tabType === import_constants.TAB_TYPES.NORMAL_SMALL) return `15px`;
|
|
54
|
-
return `25px`;
|
|
55
|
-
}};
|
|
56
|
-
z-index: 1;
|
|
57
|
-
margin-top: ${({ theme }) => theme.space.xxxs};
|
|
58
|
-
pointer-events: none;
|
|
59
|
-
transition: 200ms cubic-bezier(0.36, 0, 1, 1);
|
|
60
|
-
|
|
61
|
-
${({ isDSMobile }) => isDSMobile ? `
|
|
62
|
-
margin-left: 0;
|
|
63
|
-
margin-top: 3px;
|
|
64
|
-
|
|
65
|
-
` : ``}
|
|
66
|
-
|
|
67
|
-
background: ${(props) => {
|
|
68
|
-
const { theme, isDSMobile } = props;
|
|
69
|
-
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${import_ds_system.th.color("brand-600")(
|
|
70
|
-
props
|
|
71
|
-
)} 16px, ${import_ds_system.th.color("brand-600")(props)} calc(100% - 16px), transparent calc(100% - 16px), transparent 100% )` : theme.colors.brand[600];
|
|
72
|
-
}};
|
|
73
|
-
`;
|
|
74
45
|
const StyledMobileGradient = import_ds_system.styled.div.attrs(({ left = 0, width = 0 }) => ({
|
|
75
46
|
style: { left: left - 10, maxWidth: width - left }
|
|
76
47
|
}))`
|
|
@@ -97,174 +68,6 @@ const StyledTabWrapper = import_ds_system.styled.div`
|
|
|
97
68
|
${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
|
|
98
69
|
${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
|
|
99
70
|
`;
|
|
100
|
-
const baseButtonStyles = import_ds_system.css`
|
|
101
|
-
position: relative;
|
|
102
|
-
background-color: transparent;
|
|
103
|
-
border: none;
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
transition: 100ms cubic-bezier(0, 0, 0.42, 1);
|
|
106
|
-
text-transform: ${({ tabType, isDSMobile }) => {
|
|
107
|
-
if (tabType === import_constants.TAB_TYPES.SUBTABS) return "capitalize";
|
|
108
|
-
return isDSMobile ? "none" : "uppercase";
|
|
109
|
-
}};
|
|
110
|
-
letter-spacing: 0px;
|
|
111
|
-
white-space: nowrap;
|
|
112
|
-
padding: 2px 0;
|
|
113
|
-
margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {
|
|
114
|
-
if (fixedTabsHeaders) return "0px";
|
|
115
|
-
if (!fixedTabsHeaders && isDSMobile) return "14px";
|
|
116
|
-
return "16px";
|
|
117
|
-
}};
|
|
118
|
-
|
|
119
|
-
margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {
|
|
120
|
-
if (fixedTabsHeaders) return "0px";
|
|
121
|
-
if (!fixedTabsHeaders && isDSMobile) return "14px";
|
|
122
|
-
return "16px";
|
|
123
|
-
}};
|
|
124
|
-
|
|
125
|
-
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
126
|
-
${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
|
|
127
|
-
|
|
128
|
-
${({ tabType }) => tabType === import_constants.TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`}
|
|
129
|
-
|
|
130
|
-
${({ theme, isActive, disabled, isDSMobile, tabType }) => isActive && !disabled ? `
|
|
131
|
-
font-weight: ${theme.fontWeights.semibold};
|
|
132
|
-
${(0, import_ds_system.safariAndFirefoxBold)(`#353C46`)}
|
|
133
|
-
|
|
134
|
-
&:hover {
|
|
135
|
-
${(0, import_ds_system.safariAndFirefoxBold)(`#1E79C2`)}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
&:after: {
|
|
139
|
-
content: '';
|
|
140
|
-
position: absolute;
|
|
141
|
-
background: ${theme.colors.brand[600]};
|
|
142
|
-
height: ${isDSMobile ? "2px" : "3px"};
|
|
143
|
-
width: ${isDSMobile ? "100%" : "calc(100% + 32px)"};
|
|
144
|
-
left: ${isDSMobile ? "0" : "-16px"};
|
|
145
|
-
bottom: ${(() => {
|
|
146
|
-
if (isDSMobile) return "-2px";
|
|
147
|
-
if (tabType === import_constants.TAB_TYPES.NORMAL_SMALL) return "0";
|
|
148
|
-
return "-10px";
|
|
149
|
-
})()};
|
|
150
|
-
z-index: 1;
|
|
151
|
-
}
|
|
152
|
-
` : `
|
|
153
|
-
|
|
154
|
-
`}
|
|
155
|
-
|
|
156
|
-
${({ theme, disabled }) => disabled ? `
|
|
157
|
-
color: ${theme.colors.neutral[500]};
|
|
158
|
-
cursor: not-allowed;
|
|
159
|
-
` : `
|
|
160
|
-
&:hover {
|
|
161
|
-
color: ${theme.colors.brand[600]};
|
|
162
|
-
}
|
|
163
|
-
`}
|
|
164
|
-
|
|
165
|
-
${({ theme }) => `
|
|
166
|
-
&[aria-disabled='true'] {
|
|
167
|
-
color: ${theme.colors.neutral[500]};
|
|
168
|
-
cursor: not-allowed;
|
|
169
|
-
}
|
|
170
|
-
`}
|
|
171
|
-
|
|
172
|
-
${({ theme, showSeparator, tabType }) => showSeparator ? `
|
|
173
|
-
&:not(:last-of-type):before
|
|
174
|
-
{
|
|
175
|
-
content: "";
|
|
176
|
-
position: absolute;
|
|
177
|
-
width: 1px;
|
|
178
|
-
right: -16px;
|
|
179
|
-
top: 50%;
|
|
180
|
-
transform: translateY(-50%);
|
|
181
|
-
height: ${tabType === import_constants.TAB_TYPES.SUBTABS ? `10px` : `16px`};
|
|
182
|
-
background: ${theme.colors.neutral[400]};
|
|
183
|
-
}` : ``}
|
|
184
|
-
|
|
185
|
-
${({ theme, isDSMobile, tabType, isActive }) => !isDSMobile ? `
|
|
186
|
-
&:focus {
|
|
187
|
-
outline: none;
|
|
188
|
-
&:after {
|
|
189
|
-
position: absolute;
|
|
190
|
-
content: '';
|
|
191
|
-
top: 0;
|
|
192
|
-
left: -16px;
|
|
193
|
-
width: calc(100% + 32px);
|
|
194
|
-
height: 100%;
|
|
195
|
-
z-index: 5;
|
|
196
|
-
border-radius: 2px;
|
|
197
|
-
border: 2px solid ${theme.colors.brand[700]};
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
${tabType !== import_constants.TAB_TYPES.SUBTABS && isActive ? `
|
|
201
|
-
&:before {
|
|
202
|
-
position: absolute;
|
|
203
|
-
content: '';
|
|
204
|
-
left: -16px;
|
|
205
|
-
right: 0;
|
|
206
|
-
top: calc(100% - 2px);
|
|
207
|
-
transform: none;
|
|
208
|
-
width: calc(100% + 32px);
|
|
209
|
-
height: 2px;
|
|
210
|
-
z-index: 10;
|
|
211
|
-
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%);
|
|
212
|
-
}
|
|
213
|
-
` : ``}
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
` : ``}
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
|
|
221
|
-
height: 40px;
|
|
222
|
-
color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
|
|
223
|
-
font-weight: ${theme.fontWeights.regular};
|
|
224
|
-
padding: 0;
|
|
225
|
-
font-size: 16px;
|
|
226
|
-
line-height: 1.3;
|
|
227
|
-
${String((0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;"))}
|
|
228
|
-
|
|
229
|
-
&:focus {
|
|
230
|
-
font-weight: ${theme.fontWeights.regular};
|
|
231
|
-
${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
${isActive ? `
|
|
235
|
-
font-weight: ${theme.fontWeights.regular};
|
|
236
|
-
${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
|
|
237
|
-
` : ``}
|
|
238
|
-
|
|
239
|
-
${isActive && !disabled ? `
|
|
240
|
-
color: ${theme.colors.brand[700]};
|
|
241
|
-
line-height: 1.3;
|
|
242
|
-
font-weight: ${theme.fontWeights.regular};
|
|
243
|
-
-webkit-font-smoothing: subpixel-antialiased;
|
|
244
|
-
-webkit-text-stroke: 0.4px ${theme.colors.brand[700]};` : ``}
|
|
245
|
-
|
|
246
|
-
${!disabled ? `
|
|
247
|
-
&:hover,
|
|
248
|
-
&:focus {
|
|
249
|
-
outline: none;
|
|
250
|
-
color: ${theme.colors.brand[700]};
|
|
251
|
-
${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
|
|
252
|
-
}` : ``}
|
|
253
|
-
|
|
254
|
-
` : ``}
|
|
255
|
-
`;
|
|
256
|
-
const StyledTabButton = (0, import_ds_system.styled)("button", {
|
|
257
|
-
name: import_constants.DSTabsName,
|
|
258
|
-
slot: import_constants.TABS_SLOTS.TAB_BUTTON
|
|
259
|
-
})`
|
|
260
|
-
${baseButtonStyles}
|
|
261
|
-
`;
|
|
262
|
-
const StyledSubTabButton = (0, import_ds_system.styled)("button", {
|
|
263
|
-
name: import_constants.DSTabsName,
|
|
264
|
-
slot: import_constants.TABS_SLOTS.SUBTAB_BUTTON
|
|
265
|
-
})`
|
|
266
|
-
${baseButtonStyles}
|
|
267
|
-
`;
|
|
268
71
|
const StyledSubTabsList = (0, import_ds_system.styled)("div", {
|
|
269
72
|
name: import_constants.DSTabsName,
|
|
270
73
|
slot: import_constants.TABS_SLOTS.SUB_TAB_LIST
|
|
@@ -297,7 +100,8 @@ const StyledTabList = (0, import_ds_system.styled)("div", { name: import_constan
|
|
|
297
100
|
}
|
|
298
101
|
` : ``}
|
|
299
102
|
|
|
300
|
-
|
|
103
|
+
|
|
104
|
+
button {
|
|
301
105
|
padding-bottom: 0;
|
|
302
106
|
padding-top: 0;
|
|
303
107
|
}
|
|
@@ -315,7 +119,7 @@ const StyledTabList = (0, import_ds_system.styled)("div", { name: import_constan
|
|
|
315
119
|
display: none;
|
|
316
120
|
}` : `
|
|
317
121
|
display: flex;
|
|
318
|
-
|
|
122
|
+
button {
|
|
319
123
|
flex: 1;
|
|
320
124
|
overflow-x: hidden;
|
|
321
125
|
}`}` : ``}
|
|
@@ -336,4 +140,36 @@ const ScreenReaderOnly = import_ds_system.styled.div`
|
|
|
336
140
|
white-space: nowrap;
|
|
337
141
|
width: 1px;
|
|
338
142
|
`;
|
|
143
|
+
const StyledTabButton = (0, import_ds_system.styled)(import_ds_tab_button.DSTabButton, {
|
|
144
|
+
name: import_constants.DSTabsName,
|
|
145
|
+
slot: import_constants.TABS_SLOTS.TAB_BUTTON
|
|
146
|
+
})`
|
|
147
|
+
${({ showSeparator, theme, tabType }) => showSeparator ? `
|
|
148
|
+
&:before {
|
|
149
|
+
content: "";
|
|
150
|
+
position: absolute;
|
|
151
|
+
width: 1px;
|
|
152
|
+
right: 0;
|
|
153
|
+
top: 50%;
|
|
154
|
+
transform: translateY(-50%);
|
|
155
|
+
height: ${tabType === import_constants.TAB_TYPES.SUBTABS ? `10px` : `16px`};
|
|
156
|
+
background: ${theme.colors.neutral[400]};
|
|
157
|
+
}` : ""}
|
|
158
|
+
`;
|
|
159
|
+
const StyledSubTabButton = (0, import_ds_system.styled)(import_ds_tab_button.DSTabButton, {
|
|
160
|
+
name: import_constants.DSTabsName,
|
|
161
|
+
slot: import_constants.TABS_SLOTS.SUBTAB_BUTTON
|
|
162
|
+
})`
|
|
163
|
+
${({ showSeparator, theme, tabType }) => showSeparator ? `
|
|
164
|
+
&:before {
|
|
165
|
+
content: "";
|
|
166
|
+
position: absolute;
|
|
167
|
+
width: 1px;
|
|
168
|
+
right: 0;
|
|
169
|
+
top: 50%;
|
|
170
|
+
transform: translateY(-50%);
|
|
171
|
+
height: ${tabType === import_constants.TAB_TYPES.SUBTABS ? `10px` : `16px`};
|
|
172
|
+
background: ${theme.colors.neutral[400]};
|
|
173
|
+
}` : ""}
|
|
174
|
+
`;
|
|
339
175
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th, css } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n pointer-events: none;\n position: absolute;\n height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n width: ${({ isDSMobile }) => (isDSMobile ? '100%' : 'calc(100% + 32px)')};\n left: ${({ isDSMobile }) => (isDSMobile ? '0' : '-16px')};\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n \n `\n : ``}\n\n background: ${(props) => {\n const { theme, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} calc(100% - 16px), transparent calc(100% - 16px), transparent 100% )`\n : theme.colors.brand[600];\n }};\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: fixed;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: 40px;\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nconst baseButtonStyles = css<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType, isDSMobile }) => {\n if (tabType === TAB_TYPES.SUBTABS) return 'capitalize';\n return isDSMobile ? 'none' : 'uppercase';\n }};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled, isDSMobile, tabType }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n\n &:after: {\n content: '';\n position: absolute;\n background: ${theme.colors.brand[600]};\n height: ${isDSMobile ? '2px' : '3px'};\n width: ${isDSMobile ? '100%' : 'calc(100% + 32px)'};\n left: ${isDSMobile ? '0' : '-16px'};\n bottom: ${(() => {\n if (isDSMobile) return '-2px';\n if (tabType === TAB_TYPES.NORMAL_SMALL) return '0';\n return '-10px';\n })()};\n z-index: 1;\n }\n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n ${({ theme }) => `\n &[aria-disabled='true'] {\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n }\n `}\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TAB_TYPES.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n 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%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 16px;\n line-height: 1.3;\n ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledTabButton = styled('button', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_BUTTON,\n})<StyledTabButtonPropsT>`\n ${baseButtonStyles}\n`;\nexport const StyledSubTabButton = styled('button', {\n name: DSTabsName,\n slot: TABS_SLOTS.SUBTAB_BUTTON,\n})<StyledTabButtonPropsT>`\n ${baseButtonStyles}\n`;\n\nexport const StyledSubTabsList = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.SUB_TAB_LIST,\n})<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TAB_LIST })<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n z-index: 0;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n background:${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 1px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.neutral['000']};`\n : ``}\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabButton } from '@elliemae/ds-tab-button';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: fixed;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: 40px;\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledSubTabsList = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.SUB_TAB_LIST,\n})<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TAB_LIST })<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n z-index: 0;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n background:${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 1px;\n }\n `\n : ``}\n\n\n button {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.neutral['000']};`\n : ``}\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n button {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n\ninterface StyledTabButtonPropsT {\n showSeparator: boolean;\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledTabButton = styled(DSTabButton, {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_BUTTON,\n})<StyledTabButtonPropsT>`\n ${({ showSeparator, theme, tabType }) =>\n showSeparator\n ? `\n &:before {\n content: \"\";\n position: absolute;\n width: 1px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ''}\n`;\nexport const StyledSubTabButton = styled(DSTabButton, {\n name: DSTabsName,\n slot: TABS_SLOTS.SUBTAB_BUTTON,\n})<StyledTabButtonPropsT>`\n ${({ showSeparator, theme, tabType }) =>\n showSeparator\n ? `\n &:before {\n content: \"\";\n position: absolute;\n width: 1px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ''}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -57,11 +57,19 @@ const TabsContent = () => {
|
|
|
57
57
|
getOwnerProps,
|
|
58
58
|
getOwnerPropsArguments,
|
|
59
59
|
children: [
|
|
60
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
61
|
+
import_styles.StyledTabBarContainer,
|
|
62
|
+
{
|
|
63
|
+
"aria-label": tabsListAriaLabel,
|
|
64
|
+
getOwnerProps,
|
|
65
|
+
getOwnerPropsArguments,
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
|
|
68
|
+
TabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBarExtraContent, {}) : null,
|
|
69
|
+
tabBarExtraContent || null
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
),
|
|
65
73
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsPanels.TabsPanels, {})
|
|
66
74
|
]
|
|
67
75
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledTabsContainer\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n innerRef={innerRef}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTabBarContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAkC;AAClC,8BAA0E;AAC1E,wBAA2B;AAC3B,oBAAuB;AACvB,oBAA2D;AAC3D,uBAA8B;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledTabsContainer\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n innerRef={innerRef}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTabBarContainer\n aria-label={tabsListAriaLabel}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent || null}\n </StyledTabBarContainer>\n <TabsPanels />\n </StyledTabsContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAkC;AAClC,8BAA0E;AAC1E,wBAA2B;AAC3B,oBAAuB;AACvB,oBAA2D;AAC3D,uBAA8B;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,wBAAO;AAAA,cACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,cAC9C,sBAAsB;AAAA;AAAA;AAAA,QACzB;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,7 +38,19 @@ var import_react = __toESM(require("react"));
|
|
|
38
38
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
39
39
|
var import_styles = require("./styles.js");
|
|
40
40
|
const CardRender = (props) => {
|
|
41
|
-
const {
|
|
41
|
+
const {
|
|
42
|
+
content,
|
|
43
|
+
tabPanelsProps,
|
|
44
|
+
isDSMobile,
|
|
45
|
+
hide,
|
|
46
|
+
style,
|
|
47
|
+
role,
|
|
48
|
+
tabId,
|
|
49
|
+
renderKey,
|
|
50
|
+
getOwnerProps,
|
|
51
|
+
getOwnerPropsArguments,
|
|
52
|
+
...rest
|
|
53
|
+
} = props;
|
|
42
54
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
55
|
import_styles.StyledPanelContainer,
|
|
44
56
|
{
|
|
@@ -49,6 +61,8 @@ const CardRender = (props) => {
|
|
|
49
61
|
hide,
|
|
50
62
|
style,
|
|
51
63
|
role,
|
|
64
|
+
getOwnerProps,
|
|
65
|
+
getOwnerPropsArguments,
|
|
52
66
|
children: content
|
|
53
67
|
}
|
|
54
68
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport type { PanelDescriptor } from './styles.js';\nimport { StyledDSSwipeCard, StyledPanelContainer } from './styles.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport type { PanelDescriptor } from './styles.js';\nimport { StyledDSSwipeCard, StyledPanelContainer } from './styles.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n const {\n content,\n tabPanelsProps,\n isDSMobile,\n hide,\n style,\n role,\n tabId,\n renderKey,\n getOwnerProps,\n getOwnerPropsArguments,\n ...rest\n } = props;\n\n // We pass through all attributes, including accessibility and dataset attributes.\n return (\n <StyledPanelContainer\n id={tabId}\n {...tabPanelsProps}\n {...rest}\n // Styled component specific props\n isDSMobile={isDSMobile}\n hide={hide}\n style={style}\n role={role}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {content}\n </StyledPanelContainer>\n );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props,\n props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n globalClickHandler,\n userDidChangeTabAtleastOnceRef,\n } = useContext(DSTabsContext);\n\n const { getOwnerProps: getTabPanelsOwnerProps, getOwnerPropsArguments: getTabPanelsOwnerPropsArguments } =\n useOwnerProps(props);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n globalClickHandler({\n event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n target: 'swipeableViews',\n tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n });\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, globalClickHandler],\n );\n\n const panels: PanelDescriptor[] = useMemo(() => {\n // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n // instead of null when a panel should not be rendered. This keeps array length stable.\n const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ panelId });\n\n const baseDescriptor: PanelDescriptor = {\n index,\n tabId: panelId,\n isActive: Boolean(isActive),\n isDSMobile: Boolean(isDSMobile),\n content: shouldRender && !disabled ? content : null,\n style: {\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n } as React.CSSProperties,\n tabPanelsProps,\n 'aria-hidden': !(isActive && !applyAriaDisabled),\n 'data-panel-id': panelId,\n 'data-testid': 'ds-tabs-tab-panel',\n hide: !isActive,\n onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n role: 'tabpanel',\n getOwnerProps,\n getOwnerPropsArguments,\n };\n\n return baseDescriptor;\n });\n\n // Children.map can return null if there are no children; ensure an array is returned\n return mapResult || [];\n }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n // Safely compute the active slide index. Default to 0 when none found.\n const idx = panels.findIndex((panel) => panel.isActive);\n const activeSlide = idx >= 0 ? idx : 0;\n const handleOnSlide = React.useCallback(\n (index: number) => {\n handleOnChangeIndex(index, activeSlide);\n },\n [handleOnChangeIndex, activeSlide],\n );\n\n return (\n <StyledDSSwipeCard\n activeSlide={activeSlide}\n onSwipe={handleOnSlide}\n enableTouch\n enableAnimation={userDidChangeTabAtleastOnceRef.current && animated}\n CardRender={CardRender}\n slidesProps={panels}\n getOwnerProps={getTabPanelsOwnerProps}\n getOwnerPropsArguments={getTabPanelsOwnerPropsArguments}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,11 +43,11 @@ const StyledPanelContainer = (0, import_ds_system.styled)("div", {
|
|
|
43
43
|
flex: 1 1 auto;
|
|
44
44
|
min-height: 0;
|
|
45
45
|
padding-top: 8px;
|
|
46
|
-
&:focus {
|
|
47
|
-
outline: none;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
46
|
${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
|
|
47
|
+
&:focus-visible {
|
|
48
|
+
outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
49
|
+
outline-offset: -2px;
|
|
50
|
+
}
|
|
51
51
|
`;
|
|
52
52
|
const StyledDSSwipeCard = (0, import_ds_system.styled)(import_ds_swipe_card.DSSwipeCard, {
|
|
53
53
|
name: import_constants.DSTabsName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,2BAA4B;AAC5B,uBAAuB;AACvB,uBAAuC;
|
|
4
|
+
"sourcesContent": ["import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n flex: 1 1 auto;\n min-height: 0;\n padding-top: 8px;\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n }\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n name: DSTabsName,\n slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,2BAA4B;AAC5B,uBAAuB;AACvB,uBAAuC;AAuBhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAAA,yBAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,wBAAoB,yBAAO,kCAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,6 +49,7 @@ const DSTabPropTypes = {
|
|
|
49
49
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
50
50
|
).defaultValue(false),
|
|
51
51
|
style: import_ds_props_helpers.PropTypes.object.description("Custom styles for the tab.").defaultValue({}),
|
|
52
|
+
RenderBadge: import_ds_props_helpers.PropTypes.node.description("Additional content rendered inside the tab button (e.g. badges, icons).").defaultValue(void 0),
|
|
52
53
|
ref: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the tab element.").defaultValue(void 0),
|
|
53
54
|
onClick: import_ds_props_helpers.PropTypes.func.description("Click handler for the tab.").defaultValue(void 0),
|
|
54
55
|
onKeyDown: import_ds_props_helpers.PropTypes.func.description("Keydown handler for the tab.").defaultValue(void 0),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: object;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool\n .description('Enables Tab transition with mouse drag events.')\n .defaultValue(false)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue(undefined)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAIP,uBAA6E;AAE7E,MAAM,OAAO,MAAY;AAAC;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n RenderBadge?: React.ComponentType;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: object;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n RenderBadge: PropTypes.node\n .description('Additional content rendered inside the tab button (e.g. badges, icons).')\n .defaultValue(undefined),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool\n .description('Enables Tab transition with mouse drag events.')\n .defaultValue(false)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue(undefined)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n export interface MobileGradientsT {\n right: boolean;\n left: boolean;\n }\n\n export interface ShowChevronsT {\n right: boolean;\n left: boolean;\n }\n export interface GlobalClickHandlerT {\n event: React.MouseEvent;\n target: 'panel' | 'tabItem' | 'tabsList' | 'swipeableViews';\n tabId?: string;\n }\n\n export interface DSTabsUseTabsContextT {\n props: DSTabsT.InternalProps;\n tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n actualActiveTab: string;\n globalClickHandler: (data: GlobalClickHandlerT) => void;\n updateMobileGradients: () => void;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;\n }\n\n export interface DSTabsUseCrossRefContextT {\n lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n export interface MobileGradientsT {\n right: boolean;\n left: boolean;\n }\n\n export interface ShowChevronsT {\n right: boolean;\n left: boolean;\n }\n export interface GlobalClickHandlerT {\n event: React.MouseEvent;\n target: 'panel' | 'tabItem' | 'tabsList' | 'swipeableViews';\n tabId?: string;\n }\n\n export interface DSTabsUseTabsContextT {\n props: DSTabsT.InternalProps;\n tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n actualActiveTab: string;\n globalClickHandler: (data: GlobalClickHandlerT) => void;\n updateMobileGradients: () => void;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;\n firstActivableTabId: string;\n focusedTabId: string;\n setFocusedTabId: React.Dispatch<React.SetStateAction<string>>;\n }\n\n export interface DSTabsUseCrossRefContextT {\n lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
37
37
|
const useKeyboardNavigation = () => {
|
|
38
|
-
const { focusableTabsRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
38
|
+
const { focusableTabsRef, setFocusedTabId } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
39
39
|
const { firstSubtabInternalRef, lastTabInternalRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsCrossRefContext);
|
|
40
40
|
const handleOnKeyDown = (0, import_react.useCallback)(
|
|
41
41
|
(e) => {
|
|
@@ -43,14 +43,20 @@ const useKeyboardNavigation = () => {
|
|
|
43
43
|
e.preventDefault();
|
|
44
44
|
e.stopPropagation();
|
|
45
45
|
const nextTab = focusableTabsRef.current[(focusableTabsRef?.current?.indexOf?.(e.target) ?? 0) + 1];
|
|
46
|
-
if (nextTab)
|
|
46
|
+
if (nextTab) {
|
|
47
|
+
nextTab.focus();
|
|
48
|
+
setFocusedTabId(nextTab.dataset.tabId || "");
|
|
49
|
+
}
|
|
47
50
|
if (!nextTab) return;
|
|
48
51
|
}
|
|
49
52
|
if (e.key === "ArrowLeft" && focusableTabsRef.current) {
|
|
50
53
|
e.preventDefault();
|
|
51
54
|
e.stopPropagation();
|
|
52
55
|
const prevTab = focusableTabsRef.current[(focusableTabsRef?.current?.indexOf?.(e.target) ?? 0) - 1];
|
|
53
|
-
if (prevTab)
|
|
56
|
+
if (prevTab) {
|
|
57
|
+
prevTab.focus();
|
|
58
|
+
setFocusedTabId(prevTab.dataset.tabId || "");
|
|
59
|
+
}
|
|
54
60
|
if (!prevTab) return;
|
|
55
61
|
}
|
|
56
62
|
if (e.key === "ArrowDown") {
|
|
@@ -66,7 +72,7 @@ const useKeyboardNavigation = () => {
|
|
|
66
72
|
if (canFocusCrossTabs) lastTabInternalRef.current?.focus();
|
|
67
73
|
}
|
|
68
74
|
},
|
|
69
|
-
[firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]
|
|
75
|
+
[firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef, setFocusedTabId]
|
|
70
76
|
);
|
|
71
77
|
return {
|
|
72
78
|
handleOnKeyDown
|