@elliemae/ds-tabs 3.57.0-next.50 → 3.57.0-next.52
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 +2 -41
- package/dist/cjs/config/useTabs.js.map +2 -2
- package/dist/cjs/parts/carousel/Carousel.js +2 -4
- package/dist/cjs/parts/carousel/Carousel.js.map +2 -2
- package/dist/cjs/parts/carousel/useCarousel.js +2 -3
- package/dist/cjs/parts/carousel/useCarousel.js.map +2 -2
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js +2 -5
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBar.js +2 -6
- package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js +4 -2
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/cjs/parts/tabBar/styles.js +29 -20
- package/dist/cjs/parts/tabBar/styles.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/utils/helpers.js +17 -14
- package/dist/cjs/utils/helpers.js.map +2 -2
- package/dist/esm/config/useTabs.js +3 -42
- package/dist/esm/config/useTabs.js.map +2 -2
- package/dist/esm/parts/carousel/Carousel.js +2 -4
- package/dist/esm/parts/carousel/Carousel.js.map +2 -2
- package/dist/esm/parts/carousel/useCarousel.js +2 -3
- package/dist/esm/parts/carousel/useCarousel.js.map +2 -2
- package/dist/esm/parts/carousel/useCarouselCallbacks.js +3 -6
- package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBar.js +3 -13
- package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js +11 -3
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/esm/parts/tabBar/styles.js +29 -20
- package/dist/esm/parts/tabBar/styles.js.map +2 -2
- package/dist/esm/utils/helpers.js +17 -14
- package/dist/esm/utils/helpers.js.map +2 -2
- package/dist/types/parts/carousel/Carousel.d.ts +1 -2
- package/dist/types/parts/carousel/useCarousel.d.ts +1 -4
- package/dist/types/parts/carousel/useCarouselCallbacks.d.ts +1 -2
- package/dist/types/parts/tabBar/styles.d.ts +0 -1
- package/dist/types/sharedTypes.d.ts +0 -7
- package/package.json +11 -11
|
@@ -2,8 +2,11 @@ import * as React from "react";
|
|
|
2
2
|
import { styled, safariAndFirefoxBold, onlySafariAndFirefox, th, css } from "@elliemae/ds-system";
|
|
3
3
|
import { DSTabsName, TABS_SLOTS, TAB_TYPES } from "../../constants/index.js";
|
|
4
4
|
const StyledSelectionIndicator = styled.div`
|
|
5
|
+
pointer-events: none;
|
|
5
6
|
position: absolute;
|
|
6
7
|
height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
|
|
8
|
+
width: ${({ isDSMobile }) => isDSMobile ? "100%" : "calc(100% + 32px)"};
|
|
9
|
+
left: ${({ isDSMobile }) => isDSMobile ? "0" : "-16px"};
|
|
7
10
|
top: ${({ tabType, isDSMobile }) => {
|
|
8
11
|
if (isDSMobile) return `35px`;
|
|
9
12
|
if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;
|
|
@@ -17,7 +20,15 @@ const StyledSelectionIndicator = styled.div`
|
|
|
17
20
|
${({ isDSMobile }) => isDSMobile ? `
|
|
18
21
|
margin-left: 0;
|
|
19
22
|
margin-top: 3px;
|
|
23
|
+
|
|
20
24
|
` : ``}
|
|
25
|
+
|
|
26
|
+
background: ${(props) => {
|
|
27
|
+
const { theme, isDSMobile } = props;
|
|
28
|
+
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color("brand-600")(
|
|
29
|
+
props
|
|
30
|
+
)} 16px, ${th.color("brand-600")(props)} calc(100% - 16px), transparent calc(100% - 16px), transparent 100% )` : theme.colors.brand[600];
|
|
31
|
+
}};
|
|
21
32
|
`;
|
|
22
33
|
const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }) => ({
|
|
23
34
|
style: { left: left - 10, maxWidth: width - left }
|
|
@@ -75,14 +86,28 @@ const baseButtonStyles = css`
|
|
|
75
86
|
|
|
76
87
|
${({ tabType }) => tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`}
|
|
77
88
|
|
|
78
|
-
${({ theme, isActive, disabled }) => isActive && !disabled ? `
|
|
89
|
+
${({ theme, isActive, disabled, isDSMobile, tabType }) => isActive && !disabled ? `
|
|
79
90
|
font-weight: ${theme.fontWeights.semibold};
|
|
80
91
|
${safariAndFirefoxBold(`#353C46`)}
|
|
81
92
|
|
|
82
93
|
&:hover {
|
|
83
94
|
${safariAndFirefoxBold(`#1E79C2`)}
|
|
84
95
|
}
|
|
85
|
-
|
|
96
|
+
|
|
97
|
+
&:after: {
|
|
98
|
+
content: '';
|
|
99
|
+
position: absolute;
|
|
100
|
+
background: ${theme.colors.brand[600]};
|
|
101
|
+
height: ${isDSMobile ? "2px" : "3px"};
|
|
102
|
+
width: ${isDSMobile ? "100%" : "calc(100% + 32px)"};
|
|
103
|
+
left: ${isDSMobile ? "0" : "-16px"};
|
|
104
|
+
bottom: ${(() => {
|
|
105
|
+
if (isDSMobile) return "-2px";
|
|
106
|
+
if (tabType === TAB_TYPES.NORMAL_SMALL) return "0";
|
|
107
|
+
return "-10px";
|
|
108
|
+
})()};
|
|
109
|
+
z-index: 1;
|
|
110
|
+
}
|
|
86
111
|
` : `
|
|
87
112
|
|
|
88
113
|
`}
|
|
@@ -225,9 +250,9 @@ const StyledTabList = styled("div", { name: DSTabsName, slot: TABS_SLOTS.TAB_LIS
|
|
|
225
250
|
position: absolute;
|
|
226
251
|
width: 100%;
|
|
227
252
|
height: 1px;
|
|
228
|
-
|
|
253
|
+
background:${theme.colors.neutral[400]};
|
|
229
254
|
pointer-events: none;
|
|
230
|
-
bottom:
|
|
255
|
+
bottom: 1px;
|
|
231
256
|
}
|
|
232
257
|
` : ``}
|
|
233
258
|
|
|
@@ -253,22 +278,6 @@ const StyledTabList = styled("div", { name: DSTabsName, slot: TABS_SLOTS.TAB_LIS
|
|
|
253
278
|
flex: 1;
|
|
254
279
|
overflow-x: hidden;
|
|
255
280
|
}`}` : ``}
|
|
256
|
-
|
|
257
|
-
${StyledSelectionIndicator} {
|
|
258
|
-
${({ indicatorStyle }) => `
|
|
259
|
-
width: ${indicatorStyle.width}px;
|
|
260
|
-
left: ${indicatorStyle.left}px;
|
|
261
|
-
`}
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
${StyledSelectionIndicator} {
|
|
265
|
-
background: ${(props) => {
|
|
266
|
-
const { theme, indicatorStyle, isDSMobile } = props;
|
|
267
|
-
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color("brand-600")(
|
|
268
|
-
props
|
|
269
|
-
)} 16px, ${th.color("brand-600")(props)} ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width}px )` : theme.colors.brand[600];
|
|
270
|
-
}};
|
|
271
|
-
}
|
|
272
281
|
`;
|
|
273
282
|
const StyledRequiredMark = styled.span`
|
|
274
283
|
color: ${({ theme }) => theme.colors.danger[900]};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\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 position: absolute;\n height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\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\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 }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\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 box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\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 ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, 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)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,sBAAsB,sBAAsB,IAAI,WAAW;AAG5E,SAAS,YAAY,YAAY,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,20 +19,23 @@ const isElementVisibleCarousel = (tab, tabContainer, firstOrLastItem = true) =>
|
|
|
19
19
|
return false;
|
|
20
20
|
};
|
|
21
21
|
const centerTab = ({ e, listRef }) => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
22
|
+
e?.persist();
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
if (listRef.current) {
|
|
25
|
+
const { offsetLeft } = e?.target;
|
|
26
|
+
const { width: tabWidth } = (e?.target).getBoundingClientRect();
|
|
27
|
+
const { width: listWidth } = listRef.current.getBoundingClientRect();
|
|
28
|
+
const extraSideSpace = listWidth - tabWidth;
|
|
29
|
+
const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
|
|
30
|
+
const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
|
|
31
|
+
listRef.current.scrollTo({
|
|
32
|
+
top: 0,
|
|
33
|
+
left: centeredLeftOffset,
|
|
34
|
+
behavior: "smooth"
|
|
35
|
+
});
|
|
36
|
+
e?.preventDefault();
|
|
37
|
+
}
|
|
38
|
+
}, 100);
|
|
36
39
|
};
|
|
37
40
|
const getVisibleDimensions = (node, referenceNode) => {
|
|
38
41
|
const nodeDimensions = node.getBoundingClientRect();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from '../constants/index.js';\n\ninterface VisibleDimensionsT {\n width: number;\n height: number;\n}\n\ninterface CenterTabPropsT {\n e?: React.MouseEvent | React.FocusEvent;\n listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n const tabDimensions = tab.getBoundingClientRect();\n const tabListDimensions = tabList.getBoundingClientRect();\n\n return tabDimensions.left <= tabListDimensions.left\n ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n tab: HTMLElement | null,\n tabContainer: HTMLDivElement | null,\n firstOrLastItem = true,\n): boolean => {\n if (tab && tabContainer) {\n const tabDimensions = tab.getBoundingClientRect();\n const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n const offset = firstOrLastItem ? 16 : 32;\n const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n }\n return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n if (listRef.current) {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,6BAA6B;AAY/B,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI,sBAAsB;AAChD,QAAM,oBAAoB,QAAQ,sBAAsB;AAExD,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AACrE;AAEO,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI,sBAAsB;AAChD,UAAM,yBAAyB,aAAa,sBAAsB;AAElE,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO,MAAM;AAChE,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ,MAAM;AAElE,UAAM,6BAA6B,KAAK,MAAM,uBAAuB,IAAI;AACzE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB,KAAK;AAE3E,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA,EAClF;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,EAAE,GAAG,QAAQ,MAAuB;AAC5D,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from '../constants/index.js';\n\ninterface VisibleDimensionsT {\n width: number;\n height: number;\n}\n\ninterface CenterTabPropsT {\n e?: React.MouseEvent | React.FocusEvent;\n listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n const tabDimensions = tab.getBoundingClientRect();\n const tabListDimensions = tabList.getBoundingClientRect();\n\n return tabDimensions.left <= tabListDimensions.left\n ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n tab: HTMLElement | null,\n tabContainer: HTMLDivElement | null,\n firstOrLastItem = true,\n): boolean => {\n if (tab && tabContainer) {\n const tabDimensions = tab.getBoundingClientRect();\n const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n const offset = firstOrLastItem ? 16 : 32;\n const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n }\n return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n e?.persist();\n setTimeout(() => {\n if (listRef.current) {\n const { offsetLeft } = e?.target as HTMLButtonElement;\n const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n const { width: listWidth } = listRef.current.getBoundingClientRect();\n const extraSideSpace = listWidth - tabWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n listRef.current.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n\n e?.preventDefault();\n }\n }, 100);\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n const nodeDimensions = node.getBoundingClientRect();\n const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n ),\n height: Math.min(\n node.clientHeight,\n referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n ),\n };\n};\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,6BAA6B;AAY/B,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI,sBAAsB;AAChD,QAAM,oBAAoB,QAAQ,sBAAsB;AAExD,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AACrE;AAEO,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI,sBAAsB;AAChD,UAAM,yBAAyB,aAAa,sBAAsB;AAElE,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO,MAAM;AAChE,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ,MAAM;AAElE,UAAM,6BAA6B,KAAK,MAAM,uBAAuB,IAAI;AACzE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB,KAAK;AAE3E,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA,EAClF;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,EAAE,GAAG,QAAQ,MAAuB;AAC5D,KAAG,QAAQ;AACX,aAAW,MAAM;AACf,QAAI,QAAQ,SAAS;AACnB,YAAM,EAAE,WAAW,IAAI,GAAG;AAC1B,YAAM,EAAE,OAAO,SAAS,KAAK,GAAG,QAA6B,sBAAsB;AACnF,YAAM,EAAE,OAAO,UAAU,IAAI,QAAQ,QAAQ,sBAAsB;AACnE,YAAM,iBAAiB,YAAY;AACnC,YAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,YAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,cAAQ,QAAQ,SAAS;AAAA,QACvB,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,MACZ,CAAC;AAED,SAAG,eAAe;AAAA,IACpB;AAAA,EACF,GAAG,GAAG;AACR;AAEO,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK,sBAAsB;AAClD,QAAM,0BAA0B,cAAc,sBAAsB;AAEpE,SAAO;AAAA,IACL,OAAO,KAAK;AAAA,MACV,KAAK;AAAA,MACL,wBAAwB,OAAO,cAAc,cAAc,eAAe;AAAA,MAC1E,KAAK,eAAe,wBAAwB,OAAO,eAAe;AAAA,IACpE;AAAA,IACA,QAAQ,KAAK;AAAA,MACX,KAAK;AAAA,MACL,wBAAwB,MAAM,cAAc,eAAe,eAAe;AAAA,MAC1E,KAAK,gBAAgB,wBAAwB,MAAM,eAAe;AAAA,IACpE;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,UAAU,IAAI;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,UAAU,KAAK,eAAe,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
interface CarouselPropsT {
|
|
2
2
|
children: React.ReactNode;
|
|
3
|
-
updateIndicatorStyle?: () => void;
|
|
4
3
|
}
|
|
5
|
-
export declare const Carousel: ({ children
|
|
4
|
+
export declare const Carousel: ({ children }: CarouselPropsT) => JSX.Element;
|
|
6
5
|
export {};
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import type { DSTabsInternalsT } from '../../sharedTypes.js';
|
|
2
|
-
interface UseCarouselPropsT {
|
|
3
|
-
updateIndicatorStyle?: () => void;
|
|
4
|
-
}
|
|
5
2
|
interface UseCarouselReturnTypeT {
|
|
6
3
|
showChevrons: DSTabsInternalsT.ShowChevronsT;
|
|
7
4
|
leftButtonOnClick: () => void;
|
|
@@ -9,5 +6,5 @@ interface UseCarouselReturnTypeT {
|
|
|
9
6
|
handleOnClick: (e: React.MouseEvent) => void;
|
|
10
7
|
handleOnScroll: (e: React.UIEvent) => void;
|
|
11
8
|
}
|
|
12
|
-
export declare const useCarousel: (
|
|
9
|
+
export declare const useCarousel: () => UseCarouselReturnTypeT;
|
|
13
10
|
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
interface UseCarouselCallbacksPropsT {
|
|
2
2
|
getVisibleItemsOffset: () => number;
|
|
3
3
|
recalcChevrons: () => void;
|
|
4
|
-
updateIndicatorStyle?: () => void;
|
|
5
4
|
}
|
|
6
5
|
interface UseCarouselCallbacksReturnTypeT {
|
|
7
6
|
leftButtonOnClick: () => void;
|
|
@@ -9,5 +8,5 @@ interface UseCarouselCallbacksReturnTypeT {
|
|
|
9
8
|
handleOnClick: (e: React.MouseEvent) => void;
|
|
10
9
|
handleOnScroll: (e: React.UIEvent) => void;
|
|
11
10
|
}
|
|
12
|
-
export declare const useCarouselCallbacks: ({ getVisibleItemsOffset,
|
|
11
|
+
export declare const useCarouselCallbacks: ({ getVisibleItemsOffset, recalcChevrons, }: UseCarouselCallbacksPropsT) => UseCarouselCallbacksReturnTypeT;
|
|
13
12
|
export {};
|
|
@@ -20,7 +20,6 @@ interface StyledTabListPropsT {
|
|
|
20
20
|
isDSMobile: boolean;
|
|
21
21
|
fixedTabsHeaders: boolean;
|
|
22
22
|
mobileGradients: DSTabsInternalsT.MobileGradientsT;
|
|
23
|
-
indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
|
|
24
23
|
tabType: DSTabsInternalsT.TabTypesT;
|
|
25
24
|
}
|
|
26
25
|
interface StyledMobileGradientPropsT {
|
|
@@ -6,10 +6,6 @@ export declare namespace DSTabsInternalsT {
|
|
|
6
6
|
right: boolean;
|
|
7
7
|
left: boolean;
|
|
8
8
|
}
|
|
9
|
-
interface IndicatorStyleT {
|
|
10
|
-
left: number;
|
|
11
|
-
width: number;
|
|
12
|
-
}
|
|
13
9
|
interface ShowChevronsT {
|
|
14
10
|
right: boolean;
|
|
15
11
|
left: boolean;
|
|
@@ -30,10 +26,7 @@ export declare namespace DSTabsInternalsT {
|
|
|
30
26
|
setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;
|
|
31
27
|
actualActiveTab: string;
|
|
32
28
|
globalClickHandler: (data: GlobalClickHandlerT) => void;
|
|
33
|
-
updateIndicatorStyle: () => void;
|
|
34
29
|
updateMobileGradients: () => void;
|
|
35
|
-
setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;
|
|
36
|
-
indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
|
|
37
30
|
mobileGradients: DSTabsInternalsT.MobileGradientsT;
|
|
38
31
|
userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;
|
|
39
32
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.57.0-next.
|
|
3
|
+
"version": "3.57.0-next.52",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@elliemae/ds-button-v2": "3.57.0-next.
|
|
49
|
-
"@elliemae/ds-icon": "3.57.0-next.
|
|
50
|
-
"@elliemae/ds-icons": "3.57.0-next.
|
|
51
|
-
"@elliemae/ds-props-helpers": "3.57.0-next.
|
|
52
|
-
"@elliemae/ds-swipe-card": "3.57.0-next.
|
|
53
|
-
"@elliemae/ds-system": "3.57.0-next.
|
|
54
|
-
"@elliemae/ds-typescript-helpers": "3.57.0-next.
|
|
48
|
+
"@elliemae/ds-button-v2": "3.57.0-next.52",
|
|
49
|
+
"@elliemae/ds-icon": "3.57.0-next.52",
|
|
50
|
+
"@elliemae/ds-icons": "3.57.0-next.52",
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.57.0-next.52",
|
|
52
|
+
"@elliemae/ds-swipe-card": "3.57.0-next.52",
|
|
53
|
+
"@elliemae/ds-system": "3.57.0-next.52",
|
|
54
|
+
"@elliemae/ds-typescript-helpers": "3.57.0-next.52",
|
|
55
55
|
"@react-hook/resize-observer": "catalog:"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@elliemae/ds-monorepo-devops": "3.57.0-next.
|
|
59
|
-
"@elliemae/ds-test-utils": "3.57.0-next.
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-next.52",
|
|
59
|
+
"@elliemae/ds-test-utils": "3.57.0-next.52",
|
|
60
60
|
"@elliemae/pui-cli": "catalog:",
|
|
61
61
|
"jest": "catalog:",
|
|
62
62
|
"styled-components": "catalog:"
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"access": "public",
|
|
72
72
|
"typeSafety": true
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "350e64703d3a7890e731b43e7948331e7ecdfd39"
|
|
75
75
|
}
|