@elliemae/ds-tabs 3.25.0-next.2 → 3.25.0-next.4
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/parts/carousel/Carousel.js +12 -1
- package/dist/cjs/parts/carousel/Carousel.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBar.js +2 -2
- package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
- package/dist/cjs/parts/tabsContent/TabsContent.js +1 -1
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/parts/carousel/Carousel.js +12 -1
- package/dist/esm/parts/carousel/Carousel.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBar.js +2 -2
- package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
- package/dist/esm/parts/tabsContent/TabsContent.js +1 -1
- package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/types/parts/carousel/styles.d.ts +1 -1
- package/package.json +8 -8
|
@@ -58,6 +58,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
58
58
|
tabIndex: -1,
|
|
59
59
|
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
|
|
60
60
|
buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
|
|
61
|
+
"aria-label": "Scroll Left",
|
|
61
62
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
|
|
62
63
|
}
|
|
63
64
|
) }),
|
|
@@ -69,10 +70,20 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
69
70
|
tabIndex: -1,
|
|
70
71
|
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
|
|
71
72
|
buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
|
|
73
|
+
"aria-label": "Scroll Right",
|
|
72
74
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })
|
|
73
75
|
}
|
|
74
76
|
) }),
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
|
+
import_styles.StyledChildrenWrap,
|
|
79
|
+
{
|
|
80
|
+
role: "tablist",
|
|
81
|
+
innerRef: carouselOnlyListRef,
|
|
82
|
+
onClick: handleOnClick,
|
|
83
|
+
onScroll: handleOnScroll,
|
|
84
|
+
children
|
|
85
|
+
}
|
|
86
|
+
)
|
|
76
87
|
] });
|
|
77
88
|
};
|
|
78
89
|
//# sourceMappingURL=Carousel.js.map
|
|
@@ -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 { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,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,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,
|
|
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 { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\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;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,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,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QAEX,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,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QAEX,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
|
}
|
|
@@ -152,8 +152,8 @@ const TabBar = () => {
|
|
|
152
152
|
{
|
|
153
153
|
withCarousel,
|
|
154
154
|
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.SUB_TAB_LIST,
|
|
155
|
+
role: withCarousel ? void 0 : "tablist",
|
|
155
156
|
innerRef: tabsListRef,
|
|
156
|
-
role: "tablist",
|
|
157
157
|
children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { children: renderTabs }) : renderTabs
|
|
158
158
|
}
|
|
159
159
|
);
|
|
@@ -162,8 +162,8 @@ const TabBar = () => {
|
|
|
162
162
|
import_styles.StyledTabList,
|
|
163
163
|
{
|
|
164
164
|
withCarousel,
|
|
165
|
+
role: withCarousel ? void 0 : "tablist",
|
|
165
166
|
innerRef: tabsListRef,
|
|
166
|
-
role: "tablist",
|
|
167
167
|
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TAB_LIST,
|
|
168
168
|
isDSMobile,
|
|
169
169
|
fixedTabsHeaders,
|
|
@@ -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, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.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}\n aria-disabled={disabled}\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={actualActiveTab === tabId}\n disabled={disabled}\n showSeparator={showSeparator && type !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\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 && <StyledRequiredMark>●</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.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}\n aria-disabled={disabled}\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={actualActiveTab === tabId}\n disabled={disabled}\n showSeparator={showSeparator && type !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\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 && <StyledRequiredMark>●</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n >\n {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n withCarousel={withCarousel}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n data-testid={DSTabsDatatestid.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n indicatorStyle={indicatorStyle}\n tabType={type}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n ) : (\n renderTabs\n )}\n </StyledTabWrapper>\n <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\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;AD6Cf;AA5CR,mBAA2C;AAC3C,sBAAyB;AACzB,uBAA0B;AAC1B,oBAQO;AACP,uBAAqD;AACrD,mCAAsC;AACtC,qBAA0B;AAC1B,uBAAyB;AACzB,8BAAiC;AACjC,8BAAiC;AAG1B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,YAAY,eAAe,UAAU,KAAK;AAAA,EAC3F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,oBAAoB,uBAAuB,QAAI,yBAAW,sCAAqB;AACvF,QAAM,EAAE,kBAAkB,QAAI,0CAAiB;AAC/C,QAAM,EAAE,gBAAgB,QAAI,oDAAsB;AAElD,QAAM,EAAE,gBAAgB,iBAAiB,uBAAuB,qBAAqB,QAAI,4BAAU;AAEnG,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,sBAAgC,CAAC;AAEvC,WAAO,aAAAA,QAAM,SAAS,IAAI,MAAM,CAAC,KAAuC,UAAU;AAChF,YAAM,EAAE,QAAQ,IAAI,QAAQ,IAAI,OAAO,WAAW,OAAO,WAAW,OAAO,KAAK,SAAS,UAAU,IAAI,IAAI;AAC3G,UAAI,CAAC;AAAU,4BAAoB,KAAK,KAAK;AAC7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU,CAAC,iBAAoC;AAC7C,gBAAI,gBAAgB,eAAe,WAAW,iBAAiB,WAAW,QAAQ,SAAS;AACzF,6BAAe,QAAQ,KAAK,IAAI;AAChC,kBAAI,CAAC,YAAY,CAAC,iBAAiB,QAAQ,SAAS,YAAY;AAC9D,iCAAiB,QAAQ,KAAK,YAAY;AAC5C,sBAAQ,QAAQ,KAAK,IAAI;AACzB,kBAAI,SAAS,0BAAS,WAAW,0BAA0B,UAAU,oBAAoB,CAAC,GAAG;AAC3F,uCAAuB,UAAU;AAAA,cACnC;AACA,kBAAI,SAAS,0BAAS,WAAW,UAAU,oBAAoB,oBAAoB,SAAS,CAAC,GAAG;AAC9F,mCAAmB,UAAU;AAAA,cAC/B;AACA,kBAAI;AAAK,oBAAI,UAAU;AAAA,YACzB;AAAA,UACF;AAAA,UACA,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe,oBAAoB;AAAA,UACnC,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,iBAAe;AAAA,UACf,eAAa;AAAA,UACb,cAAY;AAAA,UACZ;AAAA,UACA,UAAU,oBAAoB;AAAA,UAC9B;AAAA,UACA,eAAe,iBAAiB,SAAS,0BAAS;AAAA,UAClD,eAAa,SAAS,0BAAS,SAAS,yCAAiB,aAAa,yCAAiB;AAAA,UACvF,IAAI,GAAG;AAAA,UACP,SAAS,CAAC,MAAM;AACd,gBAAI,CAAC,UAAU;AACb,gCAAkB,OAAO,CAAC;AAC1B,mCAAqB;AAAA,YACvB;AACA,gBAAI,WAAW,CAAC;AAAU,sBAAQ,OAAO,CAAC;AAAA,UAC5C;AAAA,UACA,SAAS,CAAC,MAAM;AACd,gBAAI;AAAc,4CAAU,EAAE,GAAG,SAAS,oBAAoB,CAAC;AAAA,UACjE;AAAA,UACA,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ;AAAS,gBAAE,gBAAgB;AACzC,gBAAI,CAAC;AAAU,8BAAgB,CAAC;AAChC,gBAAI,aAAa,CAAC;AAAU,wBAAU,CAAC;AAAA,UACzC;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,YACA,YAAY,4CAAC,oCAAmB,oBAAO;AAAA;AAAA;AAAA,QAnDnC;AAAA,MAoDP;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,SAAS,0BAAS,WAAW,CAAC,YAAY;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa,yCAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBAAe,4CAAC,4BAAU,sBAAW,IAAc;AAAA;AAAA,IACtD;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,yCAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MAET;AAAA,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BAAS,sBAA6C,sBAAW,IAElE,YAEJ;AAAA,QACA,4CAAC,0CAAyB,YAAwB,SAAS,MAAM;AAAA,QAChE,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": ["React"]
|
|
7
7
|
}
|
|
@@ -56,7 +56,7 @@ const TabsContent = () => {
|
|
|
56
56
|
ref: innerRef,
|
|
57
57
|
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER,
|
|
58
58
|
children: [
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel,
|
|
59
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
|
|
60
60
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
|
|
61
61
|
TabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBarExtraContent, {}) : null,
|
|
62
62
|
tabBarExtraContent ? tabBarExtraContent : null
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,0BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,4CAAuB,KAAK;AAChD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,yCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,0BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,4CAAuB,KAAK;AAChD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,yCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,qBAAqB,qBAAqB;AAAA,WAC7C;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
25
25
|
tabIndex: -1,
|
|
26
26
|
"data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
|
|
27
27
|
buttonType: BUTTON_TYPES.ICON,
|
|
28
|
+
"aria-label": "Scroll Left",
|
|
28
29
|
children: /* @__PURE__ */ jsx(ChevronLeft, { size: DSIconSizes.S })
|
|
29
30
|
}
|
|
30
31
|
) }),
|
|
@@ -36,10 +37,20 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
36
37
|
tabIndex: -1,
|
|
37
38
|
"data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
|
|
38
39
|
buttonType: BUTTON_TYPES.ICON,
|
|
40
|
+
"aria-label": "Scroll Right",
|
|
39
41
|
children: /* @__PURE__ */ jsx(ChevronRight, { size: DSIconSizes.S })
|
|
40
42
|
}
|
|
41
43
|
) }),
|
|
42
|
-
/* @__PURE__ */ jsx(
|
|
44
|
+
/* @__PURE__ */ jsx(
|
|
45
|
+
StyledChildrenWrap,
|
|
46
|
+
{
|
|
47
|
+
role: "tablist",
|
|
48
|
+
innerRef: carouselOnlyListRef,
|
|
49
|
+
onClick: handleOnClick,
|
|
50
|
+
onScroll: handleOnScroll,
|
|
51
|
+
children
|
|
52
|
+
}
|
|
53
|
+
)
|
|
43
54
|
] });
|
|
44
55
|
};
|
|
45
56
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyBnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBnB,SAWQ,KAXR;AAzBJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mBAAmB,6BAA6B,uBAAuB,0BAA0B;AAC1G,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QAEX,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QAEX,8BAAC,gBAAa,MAAM,YAAY,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
|
}
|
|
@@ -127,8 +127,8 @@ const TabBar = () => {
|
|
|
127
127
|
{
|
|
128
128
|
withCarousel,
|
|
129
129
|
"data-testid": DSTabsDatatestid.SUB_TAB_LIST,
|
|
130
|
+
role: withCarousel ? void 0 : "tablist",
|
|
130
131
|
innerRef: tabsListRef,
|
|
131
|
-
role: "tablist",
|
|
132
132
|
children: withCarousel ? /* @__PURE__ */ jsx(Carousel, { children: renderTabs }) : renderTabs
|
|
133
133
|
}
|
|
134
134
|
);
|
|
@@ -137,8 +137,8 @@ const TabBar = () => {
|
|
|
137
137
|
StyledTabList,
|
|
138
138
|
{
|
|
139
139
|
withCarousel,
|
|
140
|
+
role: withCarousel ? void 0 : "tablist",
|
|
140
141
|
innerRef: tabsListRef,
|
|
141
|
-
role: "tablist",
|
|
142
142
|
"data-testid": DSTabsDatatestid.TAB_LIST,
|
|
143
143
|
isDSMobile,
|
|
144
144
|
fixedTabsHeaders,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.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}\n aria-disabled={disabled}\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={actualActiveTab === tabId}\n disabled={disabled}\n showSeparator={showSeparator && type !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\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 && <StyledRequiredMark>●</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.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}\n aria-disabled={disabled}\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={actualActiveTab === tabId}\n disabled={disabled}\n showSeparator={showSeparator && type !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\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 && <StyledRequiredMark>●</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n >\n {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n withCarousel={withCarousel}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n data-testid={DSTabsDatatestid.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n indicatorStyle={indicatorStyle}\n tabType={type}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n ) : (\n renderTabs\n )}\n </StyledTabWrapper>\n <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -23,7 +23,7 @@ const TabsContent = () => {
|
|
|
23
23
|
ref: innerRef,
|
|
24
24
|
"data-testid": DSTabsDatatestid.TABS_CONTAINER,
|
|
25
25
|
children: [
|
|
26
|
-
/* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel,
|
|
26
|
+
/* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
|
|
27
27
|
/* @__PURE__ */ jsx(TabBar, {}),
|
|
28
28
|
TabBarExtraContent ? /* @__PURE__ */ jsx(TabBarExtraContent, {}) : null,
|
|
29
29
|
tabBarExtraContent ? tabBarExtraContent : null
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyBjB,SACE,KADF;AAzBN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAE9B;AAAA,6BAAC,yBAAsB,cAAY,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBjB,SACE,KADF;AAzBN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAE9B;AAAA,6BAAC,yBAAsB,cAAY,mBACjC;AAAA,8BAAC,UAAO;AAAA,UACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,UAC9C,qBAAqB,qBAAqB;AAAA,WAC7C;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ interface StyledCarouselButtonWrapperPropsT {
|
|
|
4
4
|
right?: boolean;
|
|
5
5
|
tabType: DSTabsInternalsT.TabTypesT;
|
|
6
6
|
}
|
|
7
|
-
export declare const StyledCarouselBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").
|
|
7
|
+
export declare const StyledCarouselBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
8
8
|
export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
9
9
|
export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
10
10
|
export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCarouselButtonWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.25.0-next.
|
|
3
|
+
"version": "3.25.0-next.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -133,17 +133,17 @@
|
|
|
133
133
|
"dependencies": {
|
|
134
134
|
"@react-hook/resize-observer": "~1.2.6",
|
|
135
135
|
"react-swipeable-views": "~0.14.0",
|
|
136
|
-
"@elliemae/ds-button-v2": "3.25.0-next.
|
|
137
|
-
"@elliemae/ds-icon": "3.25.0-next.
|
|
138
|
-
"@elliemae/ds-props-helpers": "3.25.0-next.
|
|
139
|
-
"@elliemae/ds-icons": "3.25.0-next.
|
|
140
|
-
"@elliemae/ds-
|
|
141
|
-
"@elliemae/ds-
|
|
136
|
+
"@elliemae/ds-button-v2": "3.25.0-next.4",
|
|
137
|
+
"@elliemae/ds-icon": "3.25.0-next.4",
|
|
138
|
+
"@elliemae/ds-props-helpers": "3.25.0-next.4",
|
|
139
|
+
"@elliemae/ds-icons": "3.25.0-next.4",
|
|
140
|
+
"@elliemae/ds-system": "3.25.0-next.4",
|
|
141
|
+
"@elliemae/ds-utilities": "3.25.0-next.4"
|
|
142
142
|
},
|
|
143
143
|
"devDependencies": {
|
|
144
144
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
145
145
|
"styled-components": "~5.3.9",
|
|
146
|
-
"@elliemae/ds-monorepo-devops": "3.25.0-next.
|
|
146
|
+
"@elliemae/ds-monorepo-devops": "3.25.0-next.4"
|
|
147
147
|
},
|
|
148
148
|
"peerDependencies": {
|
|
149
149
|
"lodash": "^4.17.21",
|