@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
|
@@ -36,11 +36,9 @@ var import_react = __toESM(require("react"));
|
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
38
38
|
var import_helpers = require("../utils/helpers.js");
|
|
39
|
-
var import_useResizeObserver = require("./useResizeObserver.js");
|
|
40
|
-
var import_constants = require("../constants/index.js");
|
|
41
39
|
const useTabs = (props) => {
|
|
42
40
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSTabsDefaultProps);
|
|
43
|
-
const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders
|
|
41
|
+
const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;
|
|
44
42
|
const tabsRef = (0, import_react.useRef)({});
|
|
45
43
|
const tabsRefAsArray = (0, import_react.useRef)([]);
|
|
46
44
|
const focusableTabsRef = (0, import_react.useRef)([]);
|
|
@@ -71,28 +69,6 @@ const useTabs = (props) => {
|
|
|
71
69
|
left: false,
|
|
72
70
|
right: false
|
|
73
71
|
});
|
|
74
|
-
const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.DEFAULT_INDICATOR_STYLES);
|
|
75
|
-
const getIndicatorStyles = import_react.default.useCallback(() => {
|
|
76
|
-
if (tabsListRef.current && actualActiveTab) {
|
|
77
|
-
const tabList = tabsListRef.current;
|
|
78
|
-
const activeTabButton = actualActiveTabRef.current;
|
|
79
|
-
if (!activeTabButton || !(0, import_helpers.isElementVisible)(activeTabButton, tabList)) return import_constants.DEFAULT_INDICATOR_STYLES;
|
|
80
|
-
const missingMargins = isDSMobile ? 0 : 16;
|
|
81
|
-
const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
|
|
82
|
-
const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
|
|
83
|
-
return {
|
|
84
|
-
left: Math.round(position),
|
|
85
|
-
width: Math.round(tabClientWidth)
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
return import_constants.DEFAULT_INDICATOR_STYLES;
|
|
89
|
-
}, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef, actualActiveTab]);
|
|
90
|
-
const updateIndicatorStyle = import_react.default.useCallback(
|
|
91
|
-
() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
|
|
92
|
-
[getIndicatorStyles, setIndicatorStyle]
|
|
93
|
-
);
|
|
94
|
-
(0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, tabsListRef.current);
|
|
95
|
-
(0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, actualActiveTabRef.current);
|
|
96
72
|
const updateMobileGradients = import_react.default.useCallback(() => {
|
|
97
73
|
if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
|
|
98
74
|
const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
|
|
@@ -103,20 +79,10 @@ const useTabs = (props) => {
|
|
|
103
79
|
}
|
|
104
80
|
}, [fixedTabsHeaders, isDSMobile, tabsListRef]);
|
|
105
81
|
import_react.default.useLayoutEffect(() => {
|
|
106
|
-
if (showSelectionIndicator) {
|
|
107
|
-
updateIndicatorStyle();
|
|
108
|
-
}
|
|
109
82
|
if (isDSMobile && !fixedTabsHeaders) {
|
|
110
83
|
updateMobileGradients();
|
|
111
84
|
}
|
|
112
|
-
}, [
|
|
113
|
-
updateMobileGradients,
|
|
114
|
-
updateIndicatorStyle,
|
|
115
|
-
isDSMobile,
|
|
116
|
-
fixedTabsHeaders,
|
|
117
|
-
actualActiveTab,
|
|
118
|
-
showSelectionIndicator
|
|
119
|
-
]);
|
|
85
|
+
}, [updateMobileGradients, isDSMobile, fixedTabsHeaders, actualActiveTab]);
|
|
120
86
|
const userDidChangeTabAtleastOnceRef = (0, import_react.useRef)(false);
|
|
121
87
|
const handleOnTabChange = import_react.default.useCallback(
|
|
122
88
|
(tabId, e) => {
|
|
@@ -166,9 +132,6 @@ const useTabs = (props) => {
|
|
|
166
132
|
actualActiveTabRef,
|
|
167
133
|
carouselOnlyListRef,
|
|
168
134
|
globalClickHandler,
|
|
169
|
-
updateIndicatorStyle,
|
|
170
|
-
setIndicatorStyle,
|
|
171
|
-
indicatorStyle,
|
|
172
135
|
mobileGradients,
|
|
173
136
|
updateMobileGradients,
|
|
174
137
|
handleOnTabChange,
|
|
@@ -178,8 +141,6 @@ const useTabs = (props) => {
|
|
|
178
141
|
propsWithDefaults,
|
|
179
142
|
actualActiveTab,
|
|
180
143
|
globalClickHandler,
|
|
181
|
-
updateIndicatorStyle,
|
|
182
|
-
indicatorStyle,
|
|
183
144
|
mobileGradients,
|
|
184
145
|
updateMobileGradients,
|
|
185
146
|
handleOnTabChange,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useTabs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA4D;AAC5D,8BAA6C;AAC7C,mCAAmC;AAGnC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n // we can't activate disabled tabs, we search for the first activable tab\n const firstActivableTabId = useMemo(() => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n if (firstActivableTab === null) return '';\n return firstActivableTab.props.tabId ?? '';\n }, [children]);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n useEffect(() => {\n if (activeTab === undefined) {\n const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n }\n }, [activeTab]);\n\n const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n left: false,\n right: false,\n });\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Updates mobile gradient visibility. It:\n * 1. Calculates scroll position\n * 2. Updates gradient visibility based on scroll\n */\n const updateMobileGradients = React.useCallback(() => {\n if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n setMobileGradients({\n left: shouldHaveLeftGradient(scrollLeft),\n right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n });\n }\n }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n React.useLayoutEffect(() => {\n if (isDSMobile && !fixedTabsHeaders) {\n updateMobileGradients();\n }\n }, [updateMobileGradients, isDSMobile, fixedTabsHeaders, actualActiveTab]);\n\n // due to a bunch of reasons and the component being biting more than it can chew\n // optimizing renders to make the swipe-card work \"as expected\"(not animating on first render)\n // simply isn't feasible at this time.\n // how do we fix this anyway?\n // we track the first time a tab change triggered by the user happens\n // after the first user interaction we enable animations,\n // after that we give the animation handling control back to the swipe-card.\n const userDidChangeTabAtleastOnceRef = useRef(false);\n\n const handleOnTabChange = React.useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n userDidChangeTabAtleastOnceRef.current = true;\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTab({ e, listRef: tabsListRef });\n }\n },\n [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n );\n\n const globalClickHandler = React.useCallback(\n (data: DSTabsInternalsT.GlobalClickHandlerT): void => {\n if (data.target === 'panel') {\n // we need to allow the text selection in the panel\n // this enters on conflict with the SwipeableViews component\n if (propsWithDefaults.allowTextSelection) {\n data.event.stopPropagation();\n }\n }\n\n if (data.target === 'tabsList') {\n const target = data.event.target as HTMLButtonElement;\n const { dataset, ariaDisabled } = target;\n if (dataset.tabId && ariaDisabled !== 'true') {\n // handleOnTabChange(dataset.tabId, data.event);\n if (isDSMobile && !fixedTabsHeaders && data.event) {\n centerTab({ e: data.event, listRef: tabsListRef });\n }\n }\n }\n if (data.target === 'swipeableViews') {\n handleOnTabChange(data.tabId!);\n }\n if (data.target === 'tabItem' && data.tabId && !(data.event.currentTarget as HTMLButtonElement).disabled) {\n handleOnTabChange(data.tabId, data.event);\n }\n },\n [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile],\n );\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n }),\n [\n propsWithDefaults,\n actualActiveTab,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n ],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -42,10 +42,8 @@ var import_styles = require("./styles.js");
|
|
|
42
42
|
var import_useCarousel = require("./useCarousel.js");
|
|
43
43
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
44
44
|
var import_constants = require("../../constants/index.js");
|
|
45
|
-
const Carousel = ({ children
|
|
46
|
-
const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarousel.useCarousel)(
|
|
47
|
-
updateIndicatorStyle
|
|
48
|
-
});
|
|
45
|
+
const Carousel = ({ children }) => {
|
|
46
|
+
const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarousel.useCarousel)();
|
|
49
47
|
const {
|
|
50
48
|
carouselOnlyListRef,
|
|
51
49
|
props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n StyledCarouselBtnLeft,\n StyledCarouselBtnRight,\n StyledCarouselButtonWrapper,\n StyledCarouselWrapper,\n StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n StyledCarouselBtnLeft,\n StyledCarouselBtnRight,\n StyledCarouselButtonWrapper,\n StyledCarouselWrapper,\n StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel();\n\n const {\n carouselOnlyListRef,\n props,\n props: { type },\n } = useContext(DSTabsContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtnLeft\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n getOwnerProps={getOwnerProps}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtnLeft>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtnRight\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n getOwnerProps={getOwnerProps}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtnRight>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap\n role=\"tablist\"\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n onScroll={handleOnScroll}\n >\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AAhCJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,8BAA8B;AAC9B,oBAMO;AACP,yBAA4B;AAC5B,uBAA8B;AAC9B,uBAAiC;AAM1B,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAE3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAE7C,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
|
|
|
37
37
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
38
38
|
var import_helpers = require("../../utils/helpers.js");
|
|
39
39
|
var import_useCarouselCallbacks = require("./useCarouselCallbacks.js");
|
|
40
|
-
const useCarousel = (
|
|
40
|
+
const useCarousel = () => {
|
|
41
41
|
const { carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
42
42
|
const [showChevrons, setShowChevrons] = (0, import_react.useState)({
|
|
43
43
|
right: false,
|
|
@@ -73,8 +73,7 @@ const useCarousel = ({ updateIndicatorStyle }) => {
|
|
|
73
73
|
(0, import_resize_observer.default)(carouselOnlyListRef, recalcChevrons);
|
|
74
74
|
const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarouselCallbacks.useCarouselCallbacks)({
|
|
75
75
|
getVisibleItemsOffset,
|
|
76
|
-
recalcChevrons
|
|
77
|
-
updateIndicatorStyle
|
|
76
|
+
recalcChevrons
|
|
78
77
|
});
|
|
79
78
|
return {
|
|
80
79
|
showChevrons,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/useCarousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;
|
|
4
|
+
"sourcesContent": ["import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseCarouselReturnTypeT {\n showChevrons: DSTabsInternalsT.ShowChevronsT;\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = (): UseCarouselReturnTypeT => {\n const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n right: false,\n left: false,\n });\n\n const { tabsRefAsArray } = useContext(DSTabsContext);\n\n const shouldShowLeft = useCallback(\n () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n [carouselOnlyListRef],\n );\n\n const shouldShowRight = useCallback(\n () =>\n carouselOnlyListRef.current\n ? carouselOnlyListRef.current.scrollLeft <\n carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n : false,\n [carouselOnlyListRef],\n );\n\n const recalcChevrons = useCallback(() => {\n setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n }, [shouldShowLeft, shouldShowRight]);\n\n const getVisibleItemsOffset = useCallback(() => {\n if (tabsRefAsArray.current) {\n const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.clientWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n return scroll - 16;\n }\n return 0;\n }, [tabsRefAsArray, carouselOnlyListRef]);\n\n useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n getVisibleItemsOffset,\n recalcChevrons,\n });\n\n return {\n showChevrons,\n leftButtonOnClick,\n rightButtonOnClick,\n handleOnClick,\n handleOnScroll,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;AAW9B,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,oBAAoB,QAAI,yBAAW,8BAAa;AAExD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,QAAI,yBAAW,8BAAa;AAEnD,QAAM,qBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,qBAAiB,0BAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,gBAAI,yCAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,6BAAAA,SAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,kDAAqB;AAAA,IACpG;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["useResizeObserver"]
|
|
7
7
|
}
|
|
@@ -33,11 +33,11 @@ __export(useCarouselCallbacks_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useCarouselCallbacks_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
|
+
var import_lodash_es = require("lodash-es");
|
|
36
37
|
var import_helpers = require("../../utils/helpers.js");
|
|
37
38
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
38
39
|
const useCarouselCallbacks = ({
|
|
39
40
|
getVisibleItemsOffset,
|
|
40
|
-
updateIndicatorStyle,
|
|
41
41
|
recalcChevrons
|
|
42
42
|
}) => {
|
|
43
43
|
const { focusableTabsRef, carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
@@ -51,10 +51,7 @@ const useCarouselCallbacks = ({
|
|
|
51
51
|
carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();
|
|
52
52
|
}
|
|
53
53
|
}, [getVisibleItemsOffset, carouselOnlyListRef]);
|
|
54
|
-
const handleOnScroll = (0, import_react.
|
|
55
|
-
recalcChevrons();
|
|
56
|
-
if (updateIndicatorStyle) updateIndicatorStyle();
|
|
57
|
-
}, [recalcChevrons, updateIndicatorStyle]);
|
|
54
|
+
const handleOnScroll = (0, import_react.useMemo)(() => (0, import_lodash_es.debounce)(recalcChevrons, 200), [recalcChevrons]);
|
|
58
55
|
const handleOnClick = (0, import_react.useCallback)(
|
|
59
56
|
({ target }) => {
|
|
60
57
|
if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n getVisibleItemsOffset: () => number;\n recalcChevrons: () => void;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { debounce } from 'lodash-es';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n getVisibleItemsOffset: () => number;\n recalcChevrons: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n getVisibleItemsOffset,\n recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n const rightButtonOnClick = useCallback(() => {\n if (carouselOnlyListRef.current) {\n carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n }\n }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n const leftButtonOnClick = useCallback(() => {\n if (carouselOnlyListRef.current) {\n carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n }\n }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Scroll handler for carousel. It:\n * 1. Recalculates chevron visibility\n * 2. Updates indicator style\n * 3. May cause rerenders on every scroll event\n */\n const handleOnScroll = useMemo(() => debounce(recalcChevrons, 200), [recalcChevrons]);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Click handler for carousel tabs. It:\n * 1. Checks if clicked element is a tab\n * 2. Calculates scroll position to center the tab\n * 3. Updates scroll position with magic number adjustments\n * 4. May cause rerenders due to scroll position updates\n */\n const handleOnClick = useCallback(\n ({ target }: MouseEvent) => {\n if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n const tabList = carouselOnlyListRef.current;\n const tabButton = target as HTMLButtonElement;\n const tabButtonDimensions = tabButton.getBoundingClientRect();\n const tabListDimensions = tabList?.getBoundingClientRect();\n const tabButtonIndex = tabButton.dataset.index as string;\n const lastItemIndex = focusableTabsRef.current.length.toString();\n const magicNumber = 34;\n\n const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n if (\n !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n tabListDimensions &&\n carouselOnlyListRef.current\n ) {\n const containerWidth = tabListDimensions.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = tabButton.offsetWidth + magicNumber;\n\n if (positionInContainer > halfContainer) {\n carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n }\n }\n }\n },\n [focusableTabsRef, carouselOnlyListRef],\n );\n\n return {\n handleOnClick,\n rightButtonOnClick,\n leftButtonOnClick,\n handleOnScroll,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,uBAAyB;AAEzB,qBAAyC;AACzC,uBAA8B;AAavB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,QAAI,yBAAW,8BAAa;AAE1E,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAQ/C,QAAM,qBAAiB,sBAAQ,UAAM,2BAAS,gBAAgB,GAAG,GAAG,CAAC,cAAc,CAAC;AASpF,QAAM,oBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,KAAC,yCAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,10 +46,8 @@ const TabBar = () => {
|
|
|
46
46
|
props,
|
|
47
47
|
props: { type, fixedTabsHeaders, withCarousel, isDSMobile },
|
|
48
48
|
globalClickHandler,
|
|
49
|
-
indicatorStyle,
|
|
50
49
|
mobileGradients,
|
|
51
|
-
updateMobileGradients
|
|
52
|
-
updateIndicatorStyle
|
|
50
|
+
updateMobileGradients
|
|
53
51
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
54
52
|
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
55
53
|
if (type === import_constants.TAB_TYPES.SUBTABS && !isDSMobile) {
|
|
@@ -79,14 +77,12 @@ const TabBar = () => {
|
|
|
79
77
|
fixedTabsHeaders,
|
|
80
78
|
mobileGradients,
|
|
81
79
|
onScroll: updateMobileGradients,
|
|
82
|
-
indicatorStyle,
|
|
83
80
|
tabType: type,
|
|
84
81
|
onClick: (e) => {
|
|
85
82
|
globalClickHandler({ event: e, target: "tabsList" });
|
|
86
83
|
},
|
|
87
84
|
children: [
|
|
88
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, {
|
|
89
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSelectionIndicator, { isDSMobile, tabType: type }),
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }),
|
|
90
86
|
isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
87
|
import_styles.StyledMobileGradient,
|
|
92
88
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n } = useContext(DSTabsContext);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n >\n {withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n data-testid={TABS_DATA_TESTID.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n tabType={type}\n onClick={(e) => {\n globalClickHandler({ event: e, target: 'tabsList' });\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledTabWrapper>\n {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n />\n )}\n </StyledTabList>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAAkC;AAClC,8BAA8B;AAC9B,sBAAyB;AACzB,oBAAyF;AACzF,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,8BAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,MAAI,SAAS,2BAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,kCAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,kCAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -70,6 +70,7 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
|
|
|
70
70
|
const getOwnerPropsArguments = () => ({ tabId });
|
|
71
71
|
if (!disabled) availableTabIndexes.push(index);
|
|
72
72
|
const ButtonComponent = type === import_constants.TAB_TYPES.SUBTABS ? import_styles.StyledSubTabButton : import_styles.StyledTabButton;
|
|
73
|
+
const isActive = actualActiveTab === tabId;
|
|
73
74
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
74
75
|
ButtonComponent,
|
|
75
76
|
{
|
|
@@ -104,7 +105,7 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
|
|
|
104
105
|
"data-tab-id": tabId,
|
|
105
106
|
"data-index": index,
|
|
106
107
|
withCarousel,
|
|
107
|
-
isActive
|
|
108
|
+
isActive,
|
|
108
109
|
disabled,
|
|
109
110
|
showSeparator: showSeparator && type !== import_constants.TAB_TYPES.NORMAL,
|
|
110
111
|
"data-testid": type === import_constants.TAB_TYPES.NORMAL ? import_constants.TABS_DATA_TESTID.TAB_BUTTON : import_constants.TABS_DATA_TESTID.SUBTAB_BUTTON,
|
|
@@ -130,7 +131,8 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
|
|
|
130
131
|
required && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
131
132
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, { "aria-hidden": "true", children: "\u25CF" }),
|
|
132
133
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ScreenReaderOnly, { children: "Required" })
|
|
133
|
-
] })
|
|
134
|
+
] }),
|
|
135
|
+
isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSelectionIndicator, { "aria-hidden": "true", isDSMobile, tabType: type })
|
|
134
136
|
);
|
|
135
137
|
});
|
|
136
138
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/TabBarItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport {\n StyledTabButton,\n StyledRequiredMark,\n ScreenReaderOnly,\n StyledSubTabButton,\n StyledSelectionIndicator,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const {\n tabId = '',\n title = '',\n style,\n required = false,\n disabled = false,\n applyAriaDisabled = false,\n ref,\n onClick,\n onKeyDown,\n ...rest\n } = tab.props;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ tabId });\n\n if (!disabled) availableTabIndexes.push(index);\n const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n const isActive = actualActiveTab === tabId;\n\n return (\n <ButtonComponent\n {...rest}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n key={tabId}\n role=\"tab\"\n // eslint-disable-next-line complexity\n innerRef={(tabButtonRef: HTMLButtonElement) => {\n if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n tabsRefAsArray.current[index] = tabButtonRef;\n if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n focusableTabsRef.current.push(tabButtonRef);\n tabsRef.current[index] = tabButtonRef;\n if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n lastTabInternalRef.current = tabButtonRef;\n }\n if (ref) ref.current = tabButtonRef;\n }\n }}\n type=\"button\"\n aria-controls={tabId}\n aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n aria-disabled={disabled || applyAriaDisabled}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n data-required={required}\n data-tab-id={tabId}\n data-index={index}\n withCarousel={withCarousel}\n isActive={isActive}\n disabled={disabled}\n showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Click handler for tab buttons. It:\n * 1. Prevents tab change if aria-disabled is true\n * 2. Updates active tab and indicator style if not disabled\n * 3. Calls the user's onClick callback if provided\n */\n if (applyAriaDisabled) return;\n if (!disabled) {\n globalClickHandler({ event: e, target: 'tabItem', tabId });\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Focus handler for carousel tabs. It:\n * 1. Centers the focused tab in the carousel viewport\n * 2. Only applies when withCarousel prop is true\n */\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Keyboard navigation handler. It:\n * 1. Prevents Enter key propagation\n * 2. Handles keyboard navigation if not disabled\n * 3. Calls the user's onKeyDown callback if provided\n */\n if (e.key === 'Enter') e.stopPropagation();\n if (!disabled) handleOnKeyDown(e);\n if (onKeyDown && !disabled) onKeyDown(e);\n }}\n style={style}\n >\n {title}\n {required && (\n <>\n <StyledRequiredMark aria-hidden=\"true\">●</StyledRequiredMark>\n <ScreenReaderOnly>Required</ScreenReaderOnly>\n </>\n )}\n {isActive && <StyledSelectionIndicator aria-hidden=\"true\" isDSMobile={isDSMobile} tabType={type} />}\n </ButtonComponent>\n );\n });\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
|
@@ -43,8 +43,11 @@ var React = __toESM(require("react"));
|
|
|
43
43
|
var import_ds_system = require("@elliemae/ds-system");
|
|
44
44
|
var import_constants = require("../../constants/index.js");
|
|
45
45
|
const StyledSelectionIndicator = import_ds_system.styled.div`
|
|
46
|
+
pointer-events: none;
|
|
46
47
|
position: absolute;
|
|
47
48
|
height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
|
|
49
|
+
width: ${({ isDSMobile }) => isDSMobile ? "100%" : "calc(100% + 32px)"};
|
|
50
|
+
left: ${({ isDSMobile }) => isDSMobile ? "0" : "-16px"};
|
|
48
51
|
top: ${({ tabType, isDSMobile }) => {
|
|
49
52
|
if (isDSMobile) return `35px`;
|
|
50
53
|
if (tabType === import_constants.TAB_TYPES.NORMAL_SMALL) return `15px`;
|
|
@@ -58,7 +61,15 @@ const StyledSelectionIndicator = import_ds_system.styled.div`
|
|
|
58
61
|
${({ isDSMobile }) => isDSMobile ? `
|
|
59
62
|
margin-left: 0;
|
|
60
63
|
margin-top: 3px;
|
|
64
|
+
|
|
61
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
|
+
}};
|
|
62
73
|
`;
|
|
63
74
|
const StyledMobileGradient = import_ds_system.styled.div.attrs(({ left = 0, width = 0 }) => ({
|
|
64
75
|
style: { left: left - 10, maxWidth: width - left }
|
|
@@ -116,14 +127,28 @@ const baseButtonStyles = import_ds_system.css`
|
|
|
116
127
|
|
|
117
128
|
${({ tabType }) => tabType === import_constants.TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`}
|
|
118
129
|
|
|
119
|
-
${({ theme, isActive, disabled }) => isActive && !disabled ? `
|
|
130
|
+
${({ theme, isActive, disabled, isDSMobile, tabType }) => isActive && !disabled ? `
|
|
120
131
|
font-weight: ${theme.fontWeights.semibold};
|
|
121
132
|
${(0, import_ds_system.safariAndFirefoxBold)(`#353C46`)}
|
|
122
133
|
|
|
123
134
|
&:hover {
|
|
124
135
|
${(0, import_ds_system.safariAndFirefoxBold)(`#1E79C2`)}
|
|
125
136
|
}
|
|
126
|
-
|
|
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
|
+
}
|
|
127
152
|
` : `
|
|
128
153
|
|
|
129
154
|
`}
|
|
@@ -266,9 +291,9 @@ const StyledTabList = (0, import_ds_system.styled)("div", { name: import_constan
|
|
|
266
291
|
position: absolute;
|
|
267
292
|
width: 100%;
|
|
268
293
|
height: 1px;
|
|
269
|
-
|
|
294
|
+
background:${theme.colors.neutral[400]};
|
|
270
295
|
pointer-events: none;
|
|
271
|
-
bottom:
|
|
296
|
+
bottom: 1px;
|
|
272
297
|
}
|
|
273
298
|
` : ``}
|
|
274
299
|
|
|
@@ -294,22 +319,6 @@ const StyledTabList = (0, import_ds_system.styled)("div", { name: import_constan
|
|
|
294
319
|
flex: 1;
|
|
295
320
|
overflow-x: hidden;
|
|
296
321
|
}`}` : ``}
|
|
297
|
-
|
|
298
|
-
${StyledSelectionIndicator} {
|
|
299
|
-
${({ indicatorStyle }) => `
|
|
300
|
-
width: ${indicatorStyle.width}px;
|
|
301
|
-
left: ${indicatorStyle.left}px;
|
|
302
|
-
`}
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
${StyledSelectionIndicator} {
|
|
306
|
-
background: ${(props) => {
|
|
307
|
-
const { theme, indicatorStyle, isDSMobile } = props;
|
|
308
|
-
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${import_ds_system.th.color("brand-600")(
|
|
309
|
-
props
|
|
310
|
-
)} 16px, ${import_ds_system.th.color("brand-600")(props)} ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width}px )` : theme.colors.brand[600];
|
|
311
|
-
}};
|
|
312
|
-
}
|
|
313
322
|
`;
|
|
314
323
|
const StyledRequiredMark = import_ds_system.styled.span`
|
|
315
324
|
color: ${({ theme }) => theme.colors.danger[900]};
|
|
@@ -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 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAA4E;AAG5E,uBAAkD;
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|