@elliemae/ds-tabs 3.53.0-next.5 → 3.53.0-next.6
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/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/carousel/Carousel.js +3 -1
- package/dist/cjs/parts/carousel/Carousel.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBar.js +7 -0
- package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js +6 -1
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/cjs/parts/tabBar/styles.js +19 -3
- package/dist/cjs/parts/tabBar/styles.js.map +2 -2
- package/dist/cjs/parts/tabsContent/TabsContent.js +5 -4
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/cjs/parts/tabsContent/styles.js +4 -1
- package/dist/cjs/parts/tabsContent/styles.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/TabsPanels.js +4 -0
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/styles.js +5 -1
- package/dist/cjs/parts/tabsPanel/styles.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/index.js +3 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/carousel/Carousel.js +3 -1
- package/dist/esm/parts/carousel/Carousel.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBar.js +7 -0
- package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js +7 -2
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/esm/parts/tabBar/styles.js +21 -5
- package/dist/esm/parts/tabBar/styles.js.map +2 -2
- package/dist/esm/parts/tabsContent/TabsContent.js +7 -6
- package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/parts/tabsContent/styles.js +4 -1
- package/dist/esm/parts/tabsContent/styles.js.map +2 -2
- package/dist/esm/parts/tabsPanel/TabsPanels.js +4 -0
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/esm/parts/tabsPanel/styles.js +5 -1
- package/dist/esm/parts/tabsPanel/styles.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/parts/tabBar/styles.d.ts +1 -0
- package/dist/types/parts/tabsContent/styles.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +4 -0
- package/package.json +8 -8
package/dist/cjs/index.js
CHANGED
|
@@ -32,6 +32,7 @@ __export(index_exports, {
|
|
|
32
32
|
DSTabWithSchema: () => import_DSTab.DSTabWithSchema,
|
|
33
33
|
DSTabs: () => import_DSTabs.DSTabs,
|
|
34
34
|
DSTabsDatatestid: () => import_constants.TABS_DATA_TESTID,
|
|
35
|
+
DSTabsName: () => import_constants.DSTabsName,
|
|
35
36
|
DSTabsWithSchema: () => import_DSTabs.DSTabsWithSchema,
|
|
36
37
|
TABS_DATA_TESTID: () => import_constants.TABS_DATA_TESTID,
|
|
37
38
|
TABS_SLOTS: () => import_constants.TABS_SLOTS,
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DSTabs, DSTabsWithSchema } from './DSTabs.js';\nexport type { DSTabT, DSTabsT } from './react-desc-prop-types.js';\nexport {\n TABS_SLOTS,\n TABS_DATA_TESTID,\n TABS_DATA_TESTID as DSTabsDatatestid,\n TAB_TYPES,\n TAB_TYPES as TabTypes,\n} from './constants/index.js';\nexport { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';\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;ADAvB,oBAAyC;AAEzC,
|
|
4
|
+
"sourcesContent": ["export { DSTabs, DSTabsWithSchema } from './DSTabs.js';\nexport type { DSTabT, DSTabsT } from './react-desc-prop-types.js';\nexport {\n TABS_SLOTS,\n TABS_DATA_TESTID,\n TABS_DATA_TESTID as DSTabsDatatestid,\n TAB_TYPES,\n TAB_TYPES as TabTypes,\n DSTabsName,\n} from './constants/index.js';\nexport { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAyC;AAEzC,uBAOO;AACP,mBAAuC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -47,7 +47,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
47
47
|
});
|
|
48
48
|
const {
|
|
49
49
|
carouselOnlyListRef,
|
|
50
|
-
props: { type }
|
|
50
|
+
props: { type, carouselChevronProps }
|
|
51
51
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
52
52
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledCarouselWrapper, { children: [
|
|
53
53
|
showChevrons.left && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -59,6 +59,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
59
59
|
"data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
|
|
60
60
|
buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
|
|
61
61
|
"aria-label": "Scroll Left",
|
|
62
|
+
...carouselChevronProps && carouselChevronProps({ isLeftChevron: true }),
|
|
62
63
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
|
|
63
64
|
}
|
|
64
65
|
) }),
|
|
@@ -71,6 +72,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
71
72
|
"data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
|
|
72
73
|
buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
|
|
73
74
|
"aria-label": "Scroll Right",
|
|
75
|
+
...carouselChevronProps && carouselChevronProps({ isLeftChevron: false }),
|
|
74
76
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })
|
|
75
77
|
}
|
|
76
78
|
) }),
|
|
@@ -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 { TABS_DATA_TESTID } from '../../constants/index.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={TABS_DATA_TESTID.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={TABS_DATA_TESTID.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,uBAAiC;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,
|
|
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 { TABS_DATA_TESTID } from '../../constants/index.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, carouselChevronProps },\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={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: true }))}\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={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: false }))}\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,uBAAiC;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,MAAM,qBAAqB;AAAA,EACtC,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,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,KAAK,CAAC;AAAA,QAEzE,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,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,MAAM,CAAC;AAAA,QAE1E,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
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(TabBar_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
38
|
var import_Carousel = require("../carousel/Carousel.js");
|
|
38
39
|
var import_useTabBar = require("./useTabBar.js");
|
|
39
40
|
var import_styles = require("./styles.js");
|
|
@@ -44,14 +45,18 @@ var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
|
|
|
44
45
|
const TabBar = () => {
|
|
45
46
|
const {
|
|
46
47
|
tabsListRef,
|
|
48
|
+
props,
|
|
47
49
|
props: { type, fixedTabsHeaders, withCarousel, isDSMobile }
|
|
48
50
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
49
51
|
const { handleOnTabChange } = (0, import_useTabsCallbacks.useTabsCallbacks)();
|
|
50
52
|
const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = (0, import_useTabBar.useTabBar)();
|
|
53
|
+
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
51
54
|
if (type === import_constants.TAB_TYPES.SUBTABS && !isDSMobile) {
|
|
52
55
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
56
|
import_styles.StyledSubTabsList,
|
|
54
57
|
{
|
|
58
|
+
getOwnerProps,
|
|
59
|
+
getOwnerPropsArguments,
|
|
55
60
|
withCarousel,
|
|
56
61
|
"data-testid": import_constants.TABS_DATA_TESTID.SUB_TAB_LIST,
|
|
57
62
|
role: withCarousel ? void 0 : "tablist",
|
|
@@ -63,6 +68,8 @@ const TabBar = () => {
|
|
|
63
68
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
64
69
|
import_styles.StyledTabList,
|
|
65
70
|
{
|
|
71
|
+
getOwnerProps,
|
|
72
|
+
getOwnerPropsArguments,
|
|
66
73
|
withCarousel,
|
|
67
74
|
role: withCarousel ? void 0 : "tablist",
|
|
68
75
|
innerRef: tabsListRef,
|
|
@@ -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 { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n} 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';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange } = useTabsCallbacks();\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\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 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 indicatorStyle={indicatorStyle}\n tabType={type}\n onMouseDown={(e) => {\n /**\n * [PUI-15396](https://jira.elliemae.io/browse/PUI-15396)\n * This is a workaround for an issue where clicks on tab buttons within a carousel\n * sometimes fail to trigger state updates. The problem occurs because:\n *\n * 1. When clicking on certain tabs, the click event reaches the tablist\n * wrapper instead of the tab button\n * 2. The carousel's scroll logic interferes with the normal event propagation\n * 3. This prevents the tab's onClick handler from being called consistently\n *\n * By adding an onMouseDown handler at the tablist level, we can:\n * - Capture the event earlier in the event cycle (before onClick)\n * - Check if the clicked element has a tab ID (data-tab-id attribute)\n * - Directly call handleOnTabChange with the appropriate tab ID\n *\n * This ensures the tab state updates correctly regardless of event bubbling issues\n * or interference from the carousel's scroll behavior.\n */\n const target = e.target as HTMLElement;\n const { dataset, ariaDisabled } = target;\n if (dataset.tabId && ariaDisabled !== 'true') {\n handleOnTabChange(dataset.tabId, e);\n updateIndicatorStyle();\n }\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\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;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n} 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';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange } = useTabsCallbacks();\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\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 indicatorStyle={indicatorStyle}\n tabType={type}\n onMouseDown={(e) => {\n /**\n * [PUI-15396](https://jira.elliemae.io/browse/PUI-15396)\n * This is a workaround for an issue where clicks on tab buttons within a carousel\n * sometimes fail to trigger state updates. The problem occurs because:\n *\n * 1. When clicking on certain tabs, the click event reaches the tablist\n * wrapper instead of the tab button\n * 2. The carousel's scroll logic interferes with the normal event propagation\n * 3. This prevents the tab's onClick handler from being called consistently\n *\n * By adding an onMouseDown handler at the tablist level, we can:\n * - Capture the event earlier in the event cycle (before onClick)\n * - Check if the clicked element has a tab ID (data-tab-id attribute)\n * - Directly call handleOnTabChange with the appropriate tab ID\n *\n * This ensures the tab state updates correctly regardless of event bubbling issues\n * or interference from the carousel's scroll behavior.\n */\n const target = e.target as HTMLElement;\n const { dataset, ariaDisabled } = target;\n if (dataset.tabId && ariaDisabled !== 'true') {\n handleOnTabChange(dataset.tabId, e);\n updateIndicatorStyle();\n }\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\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;AD0CX;AAzCZ,mBAAkC;AAClC,8BAA8B;AAC9B,sBAAyB;AACzB,uBAA0B;AAC1B,oBAMO;AACP,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AACnC,8BAAiC;AAE1B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,EAC5D,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,kBAAkB,QAAI,0CAAiB;AAC/C,QAAM,EAAE,gBAAgB,iBAAiB,uBAAuB,qBAAqB,QAAI,4BAAU;AACnG,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;AAAA,MACA,SAAS;AAAA,MACT,aAAa,CAAC,MAAM;AAmBlB,cAAM,SAAS,EAAE;AACjB,cAAM,EAAE,SAAS,aAAa,IAAI;AAClC,YAAI,QAAQ,SAAS,iBAAiB,QAAQ;AAC5C,4BAAkB,QAAQ,OAAO,CAAC;AAClC,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,MAEA;AAAA,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BAAS,sBACR,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB,GAExB;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": []
|
|
7
7
|
}
|
|
@@ -69,11 +69,16 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
|
|
|
69
69
|
onKeyDown,
|
|
70
70
|
...rest
|
|
71
71
|
} = tab.props;
|
|
72
|
+
const getOwnerProps = () => tab.props;
|
|
73
|
+
const getOwnerPropsArguments = () => ({ tabId });
|
|
72
74
|
if (!disabled) availableTabIndexes.push(index);
|
|
75
|
+
const ButtonComponent = type === import_constants.TAB_TYPES.SUBTABS ? import_styles.StyledSubTabButton : import_styles.StyledTabButton;
|
|
73
76
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
74
|
-
|
|
77
|
+
ButtonComponent,
|
|
75
78
|
{
|
|
76
79
|
...rest,
|
|
80
|
+
getOwnerProps,
|
|
81
|
+
getOwnerPropsArguments,
|
|
77
82
|
key: tabId,
|
|
78
83
|
role: "tab",
|
|
79
84
|
innerRef: (tabButtonRef) => {
|
|
@@ -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';\n\nimport { useTabBar } from './useTabBar.js';\nimport { StyledTabButton, StyledRequiredMark, ScreenReaderOnly } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\n\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\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 } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { updateIndicatorStyle } = useTabBar();\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 if (!disabled) availableTabIndexes.push(index);\n return (\n <
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\n\nimport { useTabBar } from './useTabBar.js';\nimport { StyledTabButton, StyledRequiredMark, ScreenReaderOnly, StyledSubTabButton } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\n\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\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 } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { updateIndicatorStyle } = useTabBar();\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 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={actualActiveTab === tabId}\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 handleOnTabChange(tabId, e);\n updateIndicatorStyle();\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 </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
|
}
|
|
@@ -32,6 +32,7 @@ __export(styles_exports, {
|
|
|
32
32
|
StyledMobileGradient: () => StyledMobileGradient,
|
|
33
33
|
StyledRequiredMark: () => StyledRequiredMark,
|
|
34
34
|
StyledSelectionIndicator: () => StyledSelectionIndicator,
|
|
35
|
+
StyledSubTabButton: () => StyledSubTabButton,
|
|
35
36
|
StyledSubTabsList: () => StyledSubTabsList,
|
|
36
37
|
StyledTabButton: () => StyledTabButton,
|
|
37
38
|
StyledTabList: () => StyledTabList,
|
|
@@ -85,7 +86,7 @@ const StyledTabWrapper = import_ds_system.styled.div`
|
|
|
85
86
|
${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
|
|
86
87
|
${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
|
|
87
88
|
`;
|
|
88
|
-
const
|
|
89
|
+
const baseButtonStyles = import_ds_system.css`
|
|
89
90
|
position: relative;
|
|
90
91
|
background-color: transparent;
|
|
91
92
|
border: none;
|
|
@@ -227,7 +228,22 @@ ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
|
|
|
227
228
|
|
|
228
229
|
` : ``}
|
|
229
230
|
`;
|
|
230
|
-
const
|
|
231
|
+
const StyledTabButton = (0, import_ds_system.styled)("button", {
|
|
232
|
+
name: import_constants.DSTabsName,
|
|
233
|
+
slot: import_constants.TABS_SLOTS.TAB_BUTTON
|
|
234
|
+
})`
|
|
235
|
+
${baseButtonStyles}
|
|
236
|
+
`;
|
|
237
|
+
const StyledSubTabButton = (0, import_ds_system.styled)("button", {
|
|
238
|
+
name: import_constants.DSTabsName,
|
|
239
|
+
slot: import_constants.TABS_SLOTS.SUBTAB_BUTTON
|
|
240
|
+
})`
|
|
241
|
+
${baseButtonStyles}
|
|
242
|
+
`;
|
|
243
|
+
const StyledSubTabsList = (0, import_ds_system.styled)("div", {
|
|
244
|
+
name: import_constants.DSTabsName,
|
|
245
|
+
slot: import_constants.TABS_SLOTS.SUB_TAB_LIST
|
|
246
|
+
})`
|
|
231
247
|
position: relative;
|
|
232
248
|
display: flex;
|
|
233
249
|
flex-wrap: nowrap;
|
|
@@ -235,7 +251,7 @@ const StyledSubTabsList = import_ds_system.styled.div`
|
|
|
235
251
|
width: 100%;
|
|
236
252
|
${({ withCarousel }) => withCarousel ? "max-width: 100%;" : ""}
|
|
237
253
|
`;
|
|
238
|
-
const StyledTabList = import_ds_system.styled.
|
|
254
|
+
const StyledTabList = (0, import_ds_system.styled)("div", { name: import_constants.DSTabsName, slot: import_constants.TABS_SLOTS.TAB_LIST })`
|
|
239
255
|
position: relative;
|
|
240
256
|
display: flex;
|
|
241
257
|
flex-wrap: nowrap;
|
|
@@ -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 } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { 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\nexport const StyledTabButton = styled.button<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 StyledSubTabsList = styled.div<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<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;ACAA,YAAuB;ADEvB,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,6 @@ var import_TabsPanels = require("../tabsPanel/TabsPanels.js");
|
|
|
39
39
|
var import_TabBar = require("../tabBar/TabBar.js");
|
|
40
40
|
var import_styles = require("./styles.js");
|
|
41
41
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
42
|
-
var import_constants = require("../../constants/index.js");
|
|
43
42
|
const TabsContent = () => {
|
|
44
43
|
const {
|
|
45
44
|
props,
|
|
@@ -47,14 +46,16 @@ const TabsContent = () => {
|
|
|
47
46
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
48
47
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
49
48
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
49
|
+
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
50
50
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
51
|
-
|
|
51
|
+
import_styles.StyledTabsContainer,
|
|
52
52
|
{
|
|
53
53
|
...globalProps,
|
|
54
54
|
...xstyledProps,
|
|
55
55
|
...containerProps,
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
innerRef,
|
|
57
|
+
getOwnerProps,
|
|
58
|
+
getOwnerPropsArguments,
|
|
58
59
|
children: [
|
|
59
60
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
|
|
60
61
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
|
|
@@ -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-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledTabsContainer\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n innerRef={innerRef}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent || null}\n </StyledTabBarContainer>\n <TabsPanels />\n </StyledTabsContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAkC;AAClC,8BAA0E;AAC1E,wBAA2B;AAC3B,oBAAuB;AACvB,oBAA2D;AAC3D,uBAA8B;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,11 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var styles_exports = {};
|
|
30
30
|
__export(styles_exports, {
|
|
31
|
-
StyledTabBarContainer: () => StyledTabBarContainer
|
|
31
|
+
StyledTabBarContainer: () => StyledTabBarContainer,
|
|
32
|
+
StyledTabsContainer: () => StyledTabsContainer
|
|
32
33
|
});
|
|
33
34
|
module.exports = __toCommonJS(styles_exports);
|
|
34
35
|
var React = __toESM(require("react"));
|
|
35
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
+
var import_constants = require("../../constants/index.js");
|
|
38
|
+
const StyledTabsContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSTabsName, slot: import_constants.TABS_SLOTS.TABS_CONTAINER })``;
|
|
36
39
|
const StyledTabBarContainer = import_ds_system.styled.div`
|
|
37
40
|
display: flex;
|
|
38
41
|
overflow-x: hidden;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsContent/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledTabBarContainer = styled.div`\n display: flex;\n overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\nexport const StyledTabsContainer = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })``;\nexport const StyledTabBarContainer = styled.div`\n display: flex;\n overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAEhC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,6BAAY,MAAM,4BAAW,eAAe,CAAC;AAC/F,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -75,12 +75,16 @@ const TabsPanels = () => {
|
|
|
75
75
|
const { tabId: panelId = "", style, children: content, disabled } = tab.props;
|
|
76
76
|
const isActive = actualActiveTab === panelId;
|
|
77
77
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
78
|
+
const getOwnerProps = () => tab.props;
|
|
79
|
+
const getOwnerPropsArguments = () => ({ panelId });
|
|
78
80
|
if (disabled) return emptyPanelRender;
|
|
79
81
|
if (!shouldRender) return emptyPanelRender;
|
|
80
82
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
81
83
|
import_styles.StyledPanelContainer,
|
|
82
84
|
{
|
|
83
85
|
...tabPanelsProps,
|
|
86
|
+
getOwnerProps,
|
|
87
|
+
getOwnerPropsArguments,
|
|
84
88
|
key: panelId,
|
|
85
89
|
id: panelId,
|
|
86
90
|
"aria-labelledby": `${panelId}-label`,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const panels = useMemo(() => {\n // this component is based on React.children, swipeable views want an index in the array, not a tabId\n // two bad patterns relying on each others results in:\n // - because of react.children,\n // to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n //\n // when not using swipeable views, we don't need to find the index based on tabId\n // so even if we return null the variable\n // indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n // (which will be calculating the wrong index)\n // will have no impact on the rendering\n // https://react.dev/reference/react/Children#children-toarray-caveats\n // Caveats\n // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n //\n // So, long story short,\n // 1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n // 2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n const emptyPanelRender = animated ? <div /> : null;\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n\n if (disabled) return emptyPanelRender;\n if (!shouldRender) return emptyPanelRender;\n return (\n <StyledPanelContainer\n {...tabPanelsProps}\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hide={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={{\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n }}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n );\n });\n }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n if (animated) {\n // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n return (\n <Comp\n {...swipeableViewsContainerProps}\n style={{\n overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n ...(swipeableViewsContainerProps?.style || {}),\n }}\n enableMouseEvents={enableMouseEvents}\n index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </Comp>\n );\n }\n\n return panels;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EiB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const panels = useMemo(() => {\n // this component is based on React.children, swipeable views want an index in the array, not a tabId\n // two bad patterns relying on each others results in:\n // - because of react.children,\n // to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n //\n // when not using swipeable views, we don't need to find the index based on tabId\n // so even if we return null the variable\n // indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n // (which will be calculating the wrong index)\n // will have no impact on the rendering\n // https://react.dev/reference/react/Children#children-toarray-caveats\n // Caveats\n // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n //\n // So, long story short,\n // 1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n // 2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n const emptyPanelRender = animated ? <div /> : null;\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ panelId });\n\n if (disabled) return emptyPanelRender;\n if (!shouldRender) return emptyPanelRender;\n return (\n <StyledPanelContainer\n {...tabPanelsProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hide={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={{\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n }}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n );\n });\n }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n if (animated) {\n // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n return (\n <Comp\n {...swipeableViewsContainerProps}\n style={{\n overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n ...(swipeableViewsContainerProps?.style || {}),\n }}\n enableMouseEvents={enableMouseEvents}\n index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </Comp>\n );\n }\n\n return panels;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "React", "SwipeableViews"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,11 @@ __export(styles_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(styles_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
-
|
|
36
|
+
var import_constants = require("../../constants/index.js");
|
|
37
|
+
const StyledPanelContainer = (0, import_ds_system.styled)("div", {
|
|
38
|
+
name: import_constants.DSTabsName,
|
|
39
|
+
slot: import_constants.TABS_SLOTS.TAB_PANEL
|
|
40
|
+
})`
|
|
37
41
|
padding-top: 8px;
|
|
38
42
|
&:focus {
|
|
39
43
|
outline: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ hide }) => (hide ? 'visibility: hidden; position: absolute;' : '')}\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAOhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,KAAK,MAAO,OAAO,4CAA4C,EAAG;AAAA;AAAA,IAErE,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -79,7 +79,8 @@ const DSTabsPropTypes = {
|
|
|
79
79
|
firstSubtabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the first subtab element.").defaultValue(void 0),
|
|
80
80
|
lastTabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the last tab element.").defaultValue(void 0),
|
|
81
81
|
TabBarExtraContent: import_ds_props_helpers.PropTypes.element.description("Additional content to display in the tab bar."),
|
|
82
|
-
tabBarExtraContent: import_ds_props_helpers.PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0)
|
|
82
|
+
tabBarExtraContent: import_ds_props_helpers.PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0),
|
|
83
|
+
carouselChevronProps: import_ds_props_helpers.PropTypes.func.description("Function to get props for the carousel chevron buttons.").defaultValue(() => ({}))
|
|
83
84
|
};
|
|
84
85
|
const DSTabsDefaultProps = {
|
|
85
86
|
containerProps: {},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n carouselChevronProps?: ({ isLeftChevron }: { isLeftChevron: boolean }) => Partial<DSButtonV2T.Props>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n carouselChevronProps: PropTypes.func\n .description('Function to get props for the carousel chevron buttons.')\n .defaultValue(() => ({})),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|