@elliemae/ds-tabs 3.70.0-next.6 → 3.70.0-next.60
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/package.json +1 -4
- package/dist/cjs/parts/carousel/Carousel.js +2 -0
- package/dist/cjs/parts/carousel/Carousel.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBar.js +3 -1
- package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
- package/dist/cjs/parts/tabsContent/TabsContent.js +6 -14
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +3 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/carousel/Carousel.js +2 -0
- package/dist/esm/parts/carousel/Carousel.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBar.js +3 -1
- package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
- package/dist/esm/parts/tabsContent/TabsContent.js +6 -14
- package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +3 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/parts/tabsPanel/styles.d.ts +2 -2
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/package.json +15 -15
- package/dist/types/tests/DSTabs.PUI-15144.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.PUI-15145.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.PUI-16477.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.a11y.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.allDisabled.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.callbacks.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.data-testid.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.exports.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.func.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.get-owner-props.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.keyboard.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.roving-tabindex-PUI-17883.test.d.ts +0 -1
- package/dist/types/tests/DSTabs.test.d.ts +0 -1
- package/dist/types/tests/DStabs.default-props.test.d.ts +0 -1
- package/dist/types/tests/axe-tabs.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-tabs-valid.d.ts +0 -1
package/dist/cjs/package.json
CHANGED
|
@@ -41,11 +41,13 @@ var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
|
41
41
|
const Carousel = ({ children }) => {
|
|
42
42
|
const { handleOnClick } = (0, import_useCarousel.useCarousel)();
|
|
43
43
|
const { carouselOnlyListRef, props } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
44
|
+
const { tabsListAriaLabel } = props;
|
|
44
45
|
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
45
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
46
47
|
import_styles.StyledChildrenWrap,
|
|
47
48
|
{
|
|
48
49
|
role: "tablist",
|
|
50
|
+
"aria-label": tabsListAriaLabel,
|
|
49
51
|
innerRef: carouselOnlyListRef,
|
|
50
52
|
onClick: handleOnClick,
|
|
51
53
|
getOwnerProps,
|
|
@@ -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 { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n const { handleOnClick } = useCarousel();\n\n const { carouselOnlyListRef, props } = useContext(DSTabsContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledCarouselWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledChildrenWrap\n role=\"tablist\"\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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;
|
|
4
|
+
"sourcesContent": ["import { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n const { handleOnClick } = useCarousel();\n\n const { carouselOnlyListRef, props } = useContext(DSTabsContext);\n const { tabsListAriaLabel } = props;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledCarouselWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledChildrenWrap\n role=\"tablist\"\n aria-label={tabsListAriaLabel}\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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;ADoBjB;AApBN,mBAA2B;AAC3B,8BAA8B;AAC9B,oBAA0D;AAC1D,yBAA4B;AAC5B,uBAA8B;AAMvB,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,QAAI,gCAAY;AAEtC,QAAM,EAAE,qBAAqB,MAAM,QAAI,yBAAW,8BAAa;AAC/D,QAAM,EAAE,kBAAkB,IAAI;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,SACE,4CAAC,uCAAsB,eAA8B,wBACnD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ const TabBar = () => {
|
|
|
44
44
|
const {
|
|
45
45
|
tabsListRef,
|
|
46
46
|
props,
|
|
47
|
-
props: { type, fixedTabsHeaders, withCarousel, isDSMobile },
|
|
47
|
+
props: { type, fixedTabsHeaders, withCarousel, isDSMobile, tabsListAriaLabel },
|
|
48
48
|
globalClickHandler,
|
|
49
49
|
mobileGradients,
|
|
50
50
|
updateMobileGradients
|
|
@@ -59,6 +59,7 @@ const TabBar = () => {
|
|
|
59
59
|
withCarousel,
|
|
60
60
|
"data-testid": import_constants.TABS_DATA_TESTID.SUB_TAB_LIST,
|
|
61
61
|
role: withCarousel ? void 0 : "tablist",
|
|
62
|
+
"aria-label": withCarousel ? void 0 : tabsListAriaLabel,
|
|
62
63
|
innerRef: tabsListRef,
|
|
63
64
|
children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {})
|
|
64
65
|
}
|
|
@@ -71,6 +72,7 @@ const TabBar = () => {
|
|
|
71
72
|
getOwnerPropsArguments,
|
|
72
73
|
withCarousel,
|
|
73
74
|
role: withCarousel ? void 0 : "tablist",
|
|
75
|
+
"aria-label": withCarousel ? void 0 : tabsListAriaLabel,
|
|
74
76
|
innerRef: tabsListRef,
|
|
75
77
|
"data-testid": import_constants.TABS_DATA_TESTID.TAB_LIST,
|
|
76
78
|
isDSMobile,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n } = useContext(DSTabsContext);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n >\n {withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n data-testid={TABS_DATA_TESTID.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n tabType={type}\n onClick={(e) => {\n globalClickHandler({ event: e, target: 'tabsList' });\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledTabWrapper>\n {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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 { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, tabsListAriaLabel },\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n } = useContext(DSTabsContext);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n aria-label={withCarousel ? undefined : tabsListAriaLabel}\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 aria-label={withCarousel ? undefined : tabsListAriaLabel}\n innerRef={tabsListRef}\n data-testid={TABS_DATA_TESTID.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n tabType={type}\n onClick={(e) => {\n globalClickHandler({ event: e, target: 'tabsList' });\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledTabWrapper>\n {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledTabList>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCX;AAlCZ,mBAAkC;AAClC,8BAA8B;AAC9B,sBAAyB;AACzB,oBAAyF;AACzF,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,YAAY,kBAAkB;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,8BAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,MAAI,SAAS,2BAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,kCAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,cAAY,eAAe,SAAY;AAAA,QACvC,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,cAAY,eAAe,SAAY;AAAA,MACvC,UAAU;AAAA,MACV,eAAa,kCAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA,YAC5B;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,7 +42,7 @@ var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
|
42
42
|
const TabsContent = () => {
|
|
43
43
|
const {
|
|
44
44
|
props,
|
|
45
|
-
props: { containerProps, innerRef,
|
|
45
|
+
props: { containerProps, innerRef, tabBarExtraContent, TabBarExtraContent }
|
|
46
46
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
47
47
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
48
48
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
@@ -57,19 +57,11 @@ const TabsContent = () => {
|
|
|
57
57
|
getOwnerProps,
|
|
58
58
|
getOwnerPropsArguments,
|
|
59
59
|
children: [
|
|
60
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
getOwnerPropsArguments,
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
|
|
68
|
-
TabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBarExtraContent, {}) : null,
|
|
69
|
-
tabBarExtraContent || null
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
),
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { getOwnerProps, getOwnerPropsArguments, children: [
|
|
61
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
|
|
62
|
+
TabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBarExtraContent, {}) : null,
|
|
63
|
+
tabBarExtraContent || null
|
|
64
|
+
] }),
|
|
73
65
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsPanels.TabsPanels, {})
|
|
74
66
|
]
|
|
75
67
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef,
|
|
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,
|
|
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, 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 getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\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,oBAAoB,mBAAmB;AAAA,EAC5E,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,eAA8B,wBACnD;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
|
}
|
|
@@ -72,7 +72,9 @@ const DSTabsPropTypes = {
|
|
|
72
72
|
withCarousel: import_ds_props_helpers.PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
|
|
73
73
|
activeTab: import_ds_props_helpers.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
|
|
74
74
|
children: import_ds_props_helpers.PropTypes.node.description("Use DSTab component as children.").isRequired,
|
|
75
|
-
tabsListAriaLabel: import_ds_props_helpers.PropTypes.string.description(
|
|
75
|
+
tabsListAriaLabel: import_ds_props_helpers.PropTypes.string.description(
|
|
76
|
+
'Aria label for the tablist. Omitted by default so the tablist is named by its role; set it only when a meaningful, non-redundant name is required (avoid values like "Tab list" that duplicate the role).'
|
|
77
|
+
).defaultValue(void 0),
|
|
76
78
|
containerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
|
|
77
79
|
innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0),
|
|
78
80
|
tabPanelsProps: import_ds_props_helpers.PropTypes.shape(import_ds_props_helpers.globalAttributesPropTypes).description("Additional properties for the tab container.").defaultValue({}),
|
|
@@ -88,7 +90,6 @@ const DSTabsDefaultProps = {
|
|
|
88
90
|
enableMouseEvents: false,
|
|
89
91
|
allowTextSelection: false,
|
|
90
92
|
onTabChange: noop,
|
|
91
|
-
tabsListAriaLabel: "Tab list",
|
|
92
93
|
type: import_constants.TAB_TYPES.NORMAL,
|
|
93
94
|
onlyRenderActiveTab: false,
|
|
94
95
|
withCarousel: false,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n RenderBadge?: React.ComponentType;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAIP,uBAA6E;AAE7E,MAAM,OAAO,MAAY;AAAC;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n RenderBadge?: React.ComponentType;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: object;\n }\n\n export interface OptionalProps {\n tabsListAriaLabel?: string;\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\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n RenderBadge: PropTypes.node\n .description('Additional content rendered inside the tab button (e.g. badges, icons).')\n .defaultValue(undefined),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool\n .description('Enables Tab transition with mouse drag events.')\n .defaultValue(false)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string\n .description(\n 'Aria label for the tablist. Omitted by default so the tablist is named by its role; set it only when a meaningful, non-redundant name is required (avoid values like \"Tab list\" that duplicate the role).',\n )\n .defaultValue(undefined),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue(undefined)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n 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
|
}
|
package/dist/esm/package.json
CHANGED
|
@@ -8,11 +8,13 @@ import { DSTabsContext } from "../../DSTabsCTX.js";
|
|
|
8
8
|
const Carousel = ({ children }) => {
|
|
9
9
|
const { handleOnClick } = useCarousel();
|
|
10
10
|
const { carouselOnlyListRef, props } = useContext(DSTabsContext);
|
|
11
|
+
const { tabsListAriaLabel } = props;
|
|
11
12
|
const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
|
|
12
13
|
return /* @__PURE__ */ jsx(StyledCarouselWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
|
|
13
14
|
StyledChildrenWrap,
|
|
14
15
|
{
|
|
15
16
|
role: "tablist",
|
|
17
|
+
"aria-label": tabsListAriaLabel,
|
|
16
18
|
innerRef: carouselOnlyListRef,
|
|
17
19
|
onClick: handleOnClick,
|
|
18
20
|
getOwnerProps,
|
|
@@ -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 { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n const { handleOnClick } = useCarousel();\n\n const { carouselOnlyListRef, props } = useContext(DSTabsContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledCarouselWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledChildrenWrap\n role=\"tablist\"\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n const { handleOnClick } = useCarousel();\n\n const { carouselOnlyListRef, props } = useContext(DSTabsContext);\n const { tabsListAriaLabel } = props;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n return (\n <StyledCarouselWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledChildrenWrap\n role=\"tablist\"\n aria-label={tabsListAriaLabel}\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoBjB;AApBN,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,0BAA0B;AAC1D,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAMvB,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,IAAI,YAAY;AAEtC,QAAM,EAAE,qBAAqB,MAAM,IAAI,WAAW,aAAa;AAC/D,QAAM,EAAE,kBAAkB,IAAI;AAE9B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,SACE,oBAAC,yBAAsB,eAA8B,wBACnD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ const TabBar = () => {
|
|
|
11
11
|
const {
|
|
12
12
|
tabsListRef,
|
|
13
13
|
props,
|
|
14
|
-
props: { type, fixedTabsHeaders, withCarousel, isDSMobile },
|
|
14
|
+
props: { type, fixedTabsHeaders, withCarousel, isDSMobile, tabsListAriaLabel },
|
|
15
15
|
globalClickHandler,
|
|
16
16
|
mobileGradients,
|
|
17
17
|
updateMobileGradients
|
|
@@ -26,6 +26,7 @@ const TabBar = () => {
|
|
|
26
26
|
withCarousel,
|
|
27
27
|
"data-testid": TABS_DATA_TESTID.SUB_TAB_LIST,
|
|
28
28
|
role: withCarousel ? void 0 : "tablist",
|
|
29
|
+
"aria-label": withCarousel ? void 0 : tabsListAriaLabel,
|
|
29
30
|
innerRef: tabsListRef,
|
|
30
31
|
children: withCarousel ? /* @__PURE__ */ jsx(Carousel, { children: /* @__PURE__ */ jsx(TabBarItemRenderer, {}) }) : /* @__PURE__ */ jsx(TabBarItemRenderer, {})
|
|
31
32
|
}
|
|
@@ -38,6 +39,7 @@ const TabBar = () => {
|
|
|
38
39
|
getOwnerPropsArguments,
|
|
39
40
|
withCarousel,
|
|
40
41
|
role: withCarousel ? void 0 : "tablist",
|
|
42
|
+
"aria-label": withCarousel ? void 0 : tabsListAriaLabel,
|
|
41
43
|
innerRef: tabsListRef,
|
|
42
44
|
"data-testid": TABS_DATA_TESTID.TAB_LIST,
|
|
43
45
|
isDSMobile,
|
|
@@ -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, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n } = useContext(DSTabsContext);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n >\n {withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n role={withCarousel ? undefined : 'tablist'}\n innerRef={tabsListRef}\n data-testid={TABS_DATA_TESTID.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n tabType={type}\n onClick={(e) => {\n globalClickHandler({ event: e, target: 'tabsList' });\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledTabWrapper>\n {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledTabList>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsListRef,\n props,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, tabsListAriaLabel },\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n } = useContext(DSTabsContext);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n withCarousel={withCarousel}\n data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n role={withCarousel ? undefined : 'tablist'}\n aria-label={withCarousel ? undefined : tabsListAriaLabel}\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 aria-label={withCarousel ? undefined : tabsListAriaLabel}\n innerRef={tabsListRef}\n data-testid={TABS_DATA_TESTID.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n tabType={type}\n onClick={(e) => {\n globalClickHandler({ event: e, target: 'tabsList' });\n }}\n >\n <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel>\n <TabBarItemRenderer />\n </Carousel>\n ) : (\n <TabBarItemRenderer />\n )}\n </StyledTabWrapper>\n {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledTabList>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmCX,cAUR,YAVQ;AAlCZ,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB,eAAe,kBAAkB,yBAAyB;AACzF,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,YAAY,kBAAkB;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,aAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,iBAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,cAAY,eAAe,SAAY;AAAA,QACvC,UAAU;AAAA,QAET,yBACC,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MACvC,UAAU;AAAA,MACV,eAAa,iBAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA,YAC5B;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,7 @@ import { DSTabsContext } from "../../DSTabsCTX.js";
|
|
|
9
9
|
const TabsContent = () => {
|
|
10
10
|
const {
|
|
11
11
|
props,
|
|
12
|
-
props: { containerProps, innerRef,
|
|
12
|
+
props: { containerProps, innerRef, tabBarExtraContent, TabBarExtraContent }
|
|
13
13
|
} = useContext(DSTabsContext);
|
|
14
14
|
const globalProps = useGetGlobalAttributes(props);
|
|
15
15
|
const xstyledProps = useGetXstyledProps(props);
|
|
@@ -24,19 +24,11 @@ const TabsContent = () => {
|
|
|
24
24
|
getOwnerProps,
|
|
25
25
|
getOwnerPropsArguments,
|
|
26
26
|
children: [
|
|
27
|
-
/* @__PURE__ */ jsxs(
|
|
28
|
-
|
|
29
|
-
{
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
getOwnerPropsArguments,
|
|
33
|
-
children: [
|
|
34
|
-
/* @__PURE__ */ jsx(TabBar, {}),
|
|
35
|
-
TabBarExtraContent ? /* @__PURE__ */ jsx(TabBarExtraContent, {}) : null,
|
|
36
|
-
tabBarExtraContent || null
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
),
|
|
27
|
+
/* @__PURE__ */ jsxs(StyledTabBarContainer, { getOwnerProps, getOwnerPropsArguments, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(TabBar, {}),
|
|
29
|
+
TabBarExtraContent ? /* @__PURE__ */ jsx(TabBarExtraContent, {}) : null,
|
|
30
|
+
tabBarExtraContent || null
|
|
31
|
+
] }),
|
|
40
32
|
/* @__PURE__ */ jsx(TabsPanels, {})
|
|
41
33
|
]
|
|
42
34
|
}
|
|
@@ -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, 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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0BjB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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, 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 getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent || null}\n </StyledTabBarContainer>\n <TabsPanels />\n </StyledTabsContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0BjB,SACE,KADF;AA1BN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,uBAAuB,2BAA2B;AAC3D,SAAS,qBAAqB;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,oBAAoB,mBAAmB;AAAA,EAC5E,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,6BAAC,yBAAsB,eAA8B,wBACnD;AAAA,8BAAC,UAAO;AAAA,UACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,7 +42,9 @@ const DSTabsPropTypes = {
|
|
|
42
42
|
withCarousel: PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
|
|
43
43
|
activeTab: PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
|
|
44
44
|
children: PropTypes.node.description("Use DSTab component as children.").isRequired,
|
|
45
|
-
tabsListAriaLabel: PropTypes.string.description(
|
|
45
|
+
tabsListAriaLabel: PropTypes.string.description(
|
|
46
|
+
'Aria label for the tablist. Omitted by default so the tablist is named by its role; set it only when a meaningful, non-redundant name is required (avoid values like "Tab list" that duplicate the role).'
|
|
47
|
+
).defaultValue(void 0),
|
|
46
48
|
containerProps: PropTypes.object.description("Additional properties for the container.").defaultValue({}),
|
|
47
49
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description("Ref to the container.").defaultValue(void 0),
|
|
48
50
|
tabPanelsProps: PropTypes.shape(globalAttributesPropTypes).description("Additional properties for the tab container.").defaultValue({}),
|
|
@@ -58,7 +60,6 @@ const DSTabsDefaultProps = {
|
|
|
58
60
|
enableMouseEvents: false,
|
|
59
61
|
allowTextSelection: false,
|
|
60
62
|
onTabChange: noop,
|
|
61
|
-
tabsListAriaLabel: "Tab list",
|
|
62
63
|
type: TAB_TYPES.NORMAL,
|
|
63
64
|
onlyRenderActiveTab: false,
|
|
64
65
|
withCarousel: false,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n RenderBadge?: React.ComponentType;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,YAAY,YAAY,WAAW,iCAAiC;AAE7E,MAAM,OAAO,MAAY;AAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n RenderBadge?: React.ComponentType;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: object;\n }\n\n export interface OptionalProps {\n tabsListAriaLabel?: string;\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\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n RenderBadge: PropTypes.node\n .description('Additional content rendered inside the tab button (e.g. badges, icons).')\n .defaultValue(undefined),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool\n .description('Enables Tab transition with mouse drag events.')\n .defaultValue(false)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string\n .description(\n 'Aria label for the tablist. Omitted by default so the tablist is named by its role; set it only when a meaningful, non-redundant name is required (avoid values like \"Tab list\" that duplicate the role).',\n )\n .defaultValue(undefined),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue(undefined)\n .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,10 +21,10 @@ export interface PanelDescriptor extends Record<string, unknown>, ReturnType<typ
|
|
|
21
21
|
}
|
|
22
22
|
export declare const StyledPanelContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledPanelContainerPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
23
23
|
export declare const StyledDSSwipeCard: import("styled-components").StyledComponent<{
|
|
24
|
-
(props: import("@elliemae/ds-swipe-card").DSSwipeCardT.Props<PanelDescriptor>):
|
|
24
|
+
(props: import("@elliemae/ds-swipe-card").DSSwipeCardT.Props<PanelDescriptor>): React.JSX.Element;
|
|
25
25
|
displayName: string;
|
|
26
26
|
}, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<{
|
|
27
|
-
(props: import("@elliemae/ds-swipe-card").DSSwipeCardT.Props<PanelDescriptor>):
|
|
27
|
+
(props: import("@elliemae/ds-swipe-card").DSSwipeCardT.Props<PanelDescriptor>): React.JSX.Element;
|
|
28
28
|
displayName: string;
|
|
29
29
|
}>, never>;
|
|
30
30
|
export {};
|
|
@@ -29,7 +29,6 @@ export declare namespace DSTabsT {
|
|
|
29
29
|
enableMouseEvents: boolean;
|
|
30
30
|
allowTextSelection: boolean;
|
|
31
31
|
onTabChange: (tabId: string, e?: React.MouseEvent) => void;
|
|
32
|
-
tabsListAriaLabel: string;
|
|
33
32
|
type: DSTabsInternalsT.TabTypesT;
|
|
34
33
|
children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];
|
|
35
34
|
onlyRenderActiveTab: boolean;
|
|
@@ -42,6 +41,7 @@ export declare namespace DSTabsT {
|
|
|
42
41
|
swipeableViewsContainerProps: object;
|
|
43
42
|
}
|
|
44
43
|
interface OptionalProps {
|
|
44
|
+
tabsListAriaLabel?: string;
|
|
45
45
|
firstSubtabRef?: React.MutableRefObject<HTMLElement>;
|
|
46
46
|
lastTabRef?: React.MutableRefObject<HTMLElement>;
|
|
47
47
|
TabBarExtraContent?: React.ComponentType;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.60",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -36,26 +36,26 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
45
|
-
"@elliemae/ds-tab-button": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
39
|
+
"@elliemae/ds-button-v2": "3.70.0-next.60",
|
|
40
|
+
"@elliemae/ds-swipe-card": "3.70.0-next.60",
|
|
41
|
+
"@elliemae/ds-icons": "3.70.0-next.60",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.60",
|
|
43
|
+
"@elliemae/ds-icon": "3.70.0-next.60",
|
|
44
|
+
"@elliemae/ds-system": "3.70.0-next.60",
|
|
45
|
+
"@elliemae/ds-tab-button": "3.70.0-next.60",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.60"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"jest": "^30.0.0",
|
|
50
|
-
"styled-components": "~5.3.
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
52
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
50
|
+
"styled-components": "~5.3.11",
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.60",
|
|
52
|
+
"@elliemae/ds-test-utils": "3.70.0-next.60"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
|
-
"lodash-es": "^4.
|
|
55
|
+
"lodash-es": "^4.18.1",
|
|
56
56
|
"react": "^18.3.1",
|
|
57
57
|
"react-dom": "^18.3.1",
|
|
58
|
-
"styled-components": "~5.3.
|
|
58
|
+
"styled-components": "~5.3.11"
|
|
59
59
|
},
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public",
|
|
@@ -70,4 +70,4 @@
|
|
|
70
70
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
71
71
|
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
72
72
|
}
|
|
73
|
-
}
|
|
73
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|