@elliemae/ds-tabs 2.3.0-alpha.9 → 2.3.0-next.3
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/cjs/DSTabs.js +45 -0
- package/cjs/DSTabsCTX.js +30 -0
- package/cjs/DSTabsDatatestid.js +18 -0
- package/cjs/DSTabsTypes.js +2 -0
- package/cjs/config/useCrossRef.js +17 -0
- package/cjs/config/useTabs.js +51 -0
- package/cjs/defaultProps.js +27 -0
- package/cjs/exportsRelated/DSTab.js +32 -0
- package/cjs/index.js +17 -0
- package/cjs/parts/carousel/Carousel.js +69 -0
- package/cjs/parts/carousel/styles.js +65 -0
- package/cjs/parts/carousel/useCarousel.js +78 -0
- package/cjs/parts/carousel/useCarouselCallbacks.js +72 -0
- package/cjs/parts/tabBar/TabBar.js +168 -0
- package/cjs/parts/tabBar/styles.js +200 -0
- package/cjs/parts/tabBar/useTabBar.js +87 -0
- package/cjs/parts/tabsContent/TabsContent.js +49 -0
- package/cjs/parts/tabsContent/styles.js +15 -0
- package/cjs/parts/tabsPanel/TabsPanels.js +77 -0
- package/cjs/parts/tabsPanel/styles.js +25 -0
- package/cjs/propTypes.js +33 -0
- package/cjs/utils/constants.js +28 -0
- package/cjs/utils/helpers.js +75 -0
- package/cjs/utils/hooks/useKeyboardNavigation.js +61 -0
- package/cjs/utils/hooks/useTabsCallbacks.js +41 -0
- package/esm/DSTabs.js +35 -0
- package/esm/DSTabsCTX.js +25 -0
- package/esm/DSTabsDatatestid.js +14 -0
- package/esm/DSTabsTypes.js +1 -0
- package/{dist/esm → esm}/config/useCrossRef.js +4 -6
- package/esm/config/useTabs.js +47 -0
- package/{dist/esm → esm}/defaultProps.js +8 -9
- package/esm/exportsRelated/DSTab.js +21 -0
- package/esm/index.js +4 -0
- package/esm/parts/carousel/Carousel.js +61 -0
- package/esm/parts/carousel/styles.js +54 -0
- package/{dist/esm → esm}/parts/carousel/useCarousel.js +34 -15
- package/{dist/esm → esm}/parts/carousel/useCarouselCallbacks.js +28 -20
- package/esm/parts/tabBar/TabBar.js +159 -0
- package/esm/parts/tabBar/styles.js +186 -0
- package/{dist/esm → esm}/parts/tabBar/useTabBar.js +35 -27
- package/esm/parts/tabsContent/TabsContent.js +40 -0
- package/esm/parts/tabsContent/styles.js +7 -0
- package/esm/parts/tabsPanel/TabsPanels.js +67 -0
- package/esm/parts/tabsPanel/styles.js +17 -0
- package/esm/propTypes.js +28 -0
- package/esm/utils/constants.js +20 -0
- package/{dist/esm → esm}/utils/helpers.js +28 -23
- package/esm/utils/hooks/useKeyboardNavigation.js +57 -0
- package/esm/utils/hooks/useTabsCallbacks.js +37 -0
- package/package.json +70 -72
- package/{dist/types → types}/DSTabs.d.ts +2 -2
- package/{dist/types → types}/DSTabsCTX.d.ts +0 -0
- package/{dist/types → types}/DSTabsDatatestid.d.ts +0 -0
- package/{dist/types → types}/DSTabsTypes.d.ts +0 -0
- package/{dist/types → types}/config/useCrossRef.d.ts +0 -0
- package/{dist/types → types}/config/useTabs.d.ts +0 -0
- package/{dist/types → types}/defaultProps.d.ts +0 -0
- package/{dist/types → types}/exportsRelated/DSTab.d.ts +0 -0
- package/{dist/types → types}/index.d.ts +0 -0
- package/{dist/types → types}/parts/carousel/Carousel.d.ts +0 -0
- package/{dist/types → types}/parts/carousel/styles.d.ts +1 -1
- package/{dist/types → types}/parts/carousel/useCarousel.d.ts +0 -0
- package/{dist/types → types}/parts/carousel/useCarouselCallbacks.d.ts +0 -0
- package/{dist/types → types}/parts/tabBar/TabBar.d.ts +0 -0
- package/{dist/types → types}/parts/tabBar/styles.d.ts +0 -0
- package/{dist/types → types}/parts/tabBar/useTabBar.d.ts +0 -0
- package/{dist/types → types}/parts/tabsContent/TabsContent.d.ts +0 -0
- package/{dist/types → types}/parts/tabsContent/styles.d.ts +0 -0
- package/{dist/types → types}/parts/tabsPanel/TabsPanels.d.ts +0 -0
- package/{dist/types → types}/parts/tabsPanel/styles.d.ts +0 -0
- package/{dist/types → types}/propTypes.d.ts +0 -0
- package/{dist/types → types}/tests/DSTabs.callbacks.test.d.ts +0 -0
- package/{dist/types → types}/tests/DSTabs.func.test.d.ts +0 -0
- package/{dist/types → types}/tests/DSTabs.keyboard.test.d.ts +0 -0
- package/{dist/types → types}/tests/DSTabs.test.d.ts +0 -0
- package/{dist/types → types}/utils/constants.d.ts +0 -0
- package/{dist/types → types}/utils/helpers.d.ts +0 -0
- package/{dist/types → types}/utils/hooks/useKeyboardNavigation.d.ts +0 -0
- package/{dist/types → types}/utils/hooks/useTabsCallbacks.d.ts +0 -0
- package/dist/cjs/DSTabs.js +0 -63
- package/dist/cjs/DSTabs.js.map +0 -7
- package/dist/cjs/DSTabsCTX.js +0 -56
- package/dist/cjs/DSTabsCTX.js.map +0 -7
- package/dist/cjs/DSTabsDatatestid.js +0 -46
- package/dist/cjs/DSTabsDatatestid.js.map +0 -7
- package/dist/cjs/DSTabsTypes.js +0 -27
- package/dist/cjs/DSTabsTypes.js.map +0 -7
- package/dist/cjs/config/useCrossRef.js +0 -44
- package/dist/cjs/config/useCrossRef.js.map +0 -7
- package/dist/cjs/config/useTabs.js +0 -68
- package/dist/cjs/config/useTabs.js.map +0 -7
- package/dist/cjs/defaultProps.js +0 -53
- package/dist/cjs/defaultProps.js.map +0 -7
- package/dist/cjs/exportsRelated/DSTab.js +0 -46
- package/dist/cjs/exportsRelated/DSTab.js.map +0 -7
- package/dist/cjs/index.js +0 -38
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/parts/carousel/Carousel.js +0 -77
- package/dist/cjs/parts/carousel/Carousel.js.map +0 -7
- package/dist/cjs/parts/carousel/styles.js +0 -79
- package/dist/cjs/parts/carousel/styles.js.map +0 -7
- package/dist/cjs/parts/carousel/useCarousel.js +0 -80
- package/dist/cjs/parts/carousel/useCarousel.js.map +0 -7
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js +0 -89
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map +0 -7
- package/dist/cjs/parts/tabBar/TabBar.js +0 -171
- package/dist/cjs/parts/tabBar/TabBar.js.map +0 -7
- package/dist/cjs/parts/tabBar/styles.js +0 -294
- package/dist/cjs/parts/tabBar/styles.js.map +0 -7
- package/dist/cjs/parts/tabBar/useTabBar.js +0 -100
- package/dist/cjs/parts/tabBar/useTabBar.js.map +0 -7
- package/dist/cjs/parts/tabsContent/TabsContent.js +0 -53
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +0 -7
- package/dist/cjs/parts/tabsContent/styles.js +0 -39
- package/dist/cjs/parts/tabsContent/styles.js.map +0 -7
- package/dist/cjs/parts/tabsPanel/TabsPanels.js +0 -79
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +0 -7
- package/dist/cjs/parts/tabsPanel/styles.js +0 -45
- package/dist/cjs/parts/tabsPanel/styles.js.map +0 -7
- package/dist/cjs/propTypes.js +0 -58
- package/dist/cjs/propTypes.js.map +0 -7
- package/dist/cjs/utils/constants.js +0 -56
- package/dist/cjs/utils/constants.js.map +0 -7
- package/dist/cjs/utils/helpers.js +0 -88
- package/dist/cjs/utils/helpers.js.map +0 -7
- package/dist/cjs/utils/hooks/useKeyboardNavigation.js +0 -77
- package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map +0 -7
- package/dist/cjs/utils/hooks/useTabsCallbacks.js +0 -60
- package/dist/cjs/utils/hooks/useTabsCallbacks.js.map +0 -7
- package/dist/esm/DSTabs.js +0 -34
- package/dist/esm/DSTabs.js.map +0 -7
- package/dist/esm/DSTabsCTX.js +0 -27
- package/dist/esm/DSTabsCTX.js.map +0 -7
- package/dist/esm/DSTabsDatatestid.js +0 -17
- package/dist/esm/DSTabsDatatestid.js.map +0 -7
- package/dist/esm/DSTabsTypes.js +0 -2
- package/dist/esm/DSTabsTypes.js.map +0 -7
- package/dist/esm/config/useCrossRef.js.map +0 -7
- package/dist/esm/config/useTabs.js +0 -39
- package/dist/esm/config/useTabs.js.map +0 -7
- package/dist/esm/defaultProps.js.map +0 -7
- package/dist/esm/exportsRelated/DSTab.js +0 -17
- package/dist/esm/exportsRelated/DSTab.js.map +0 -7
- package/dist/esm/index.js +0 -9
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/parts/carousel/Carousel.js +0 -48
- package/dist/esm/parts/carousel/Carousel.js.map +0 -7
- package/dist/esm/parts/carousel/styles.js +0 -50
- package/dist/esm/parts/carousel/styles.js.map +0 -7
- package/dist/esm/parts/carousel/useCarousel.js.map +0 -7
- package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +0 -7
- package/dist/esm/parts/tabBar/TabBar.js +0 -149
- package/dist/esm/parts/tabBar/TabBar.js.map +0 -7
- package/dist/esm/parts/tabBar/styles.js +0 -265
- package/dist/esm/parts/tabBar/styles.js.map +0 -7
- package/dist/esm/parts/tabBar/useTabBar.js.map +0 -7
- package/dist/esm/parts/tabsContent/TabsContent.js +0 -24
- package/dist/esm/parts/tabsContent/TabsContent.js.map +0 -7
- package/dist/esm/parts/tabsContent/styles.js +0 -10
- package/dist/esm/parts/tabsContent/styles.js.map +0 -7
- package/dist/esm/parts/tabsPanel/TabsPanels.js +0 -50
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +0 -7
- package/dist/esm/parts/tabsPanel/styles.js +0 -16
- package/dist/esm/parts/tabsPanel/styles.js.map +0 -7
- package/dist/esm/propTypes.js +0 -29
- package/dist/esm/propTypes.js.map +0 -7
- package/dist/esm/utils/constants.js +0 -27
- package/dist/esm/utils/constants.js.map +0 -7
- package/dist/esm/utils/helpers.js.map +0 -7
- package/dist/esm/utils/hooks/useKeyboardNavigation.js +0 -48
- package/dist/esm/utils/hooks/useKeyboardNavigation.js.map +0 -7
- package/dist/esm/utils/hooks/useTabsCallbacks.js +0 -31
- package/dist/esm/utils/hooks/useTabsCallbacks.js.map +0 -7
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useRef, useState, useMemo, useEffect } from "react";
|
|
3
|
-
import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import { tabsDefaultProps } from "../defaultProps";
|
|
5
|
-
const useTabs = (props) => {
|
|
6
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
|
|
7
|
-
const { activeTab, children } = propsWithDefaults;
|
|
8
|
-
const tabsRef = useRef({});
|
|
9
|
-
const tabsRefAsArray = useRef([]);
|
|
10
|
-
const focusableTabsRef = useRef([]);
|
|
11
|
-
const carouselOnlyListRef = useRef(null);
|
|
12
|
-
const tabsListRef = useRef(null);
|
|
13
|
-
const actualActiveTabRef = useRef(null);
|
|
14
|
-
const [internalActiveTab, setInternalActiveTab] = useState(children?.[0]?.props?.tabId);
|
|
15
|
-
const actualActiveTab = useMemo(() => {
|
|
16
|
-
if (activeTab !== void 0)
|
|
17
|
-
return activeTab;
|
|
18
|
-
return internalActiveTab;
|
|
19
|
-
}, [activeTab, internalActiveTab]);
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;
|
|
22
|
-
}, [actualActiveTab]);
|
|
23
|
-
const ctx = useMemo(() => ({
|
|
24
|
-
props: propsWithDefaults,
|
|
25
|
-
tabsRef,
|
|
26
|
-
focusableTabsRef,
|
|
27
|
-
tabsListRef,
|
|
28
|
-
tabsRefAsArray,
|
|
29
|
-
setInternalActiveTab,
|
|
30
|
-
actualActiveTab,
|
|
31
|
-
actualActiveTabRef,
|
|
32
|
-
carouselOnlyListRef
|
|
33
|
-
}), [actualActiveTab, propsWithDefaults]);
|
|
34
|
-
return ctx;
|
|
35
|
-
};
|
|
36
|
-
export {
|
|
37
|
-
useTabs
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=useTabs.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../defaultProps';\nimport type { DSTabsPropsT, DSTabsUseTabsContextT, DSTabsPropsWithDefaultsT } from '../DSTabsTypes';\n\nexport const useTabs = (props: DSTabsPropsT): DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps) as DSTabsPropsWithDefaultsT;\n\n const { activeTab, children } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>(children?.[0]?.props?.tabId);\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n }),\n [actualActiveTab, propsWithDefaults],\n );\n\n return ctx;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,UAAU,CAAC,UAA+C;AACrE,QAAM,oBAAoB,6BAA6B,OAAO;AAE9D,QAAM,EAAE,WAAW,aAAa;AAEhC,QAAM,UAAU,OAA0C;AAC1D,QAAM,iBAAiB,OAA4B;AACnD,QAAM,mBAAmB,OAA4B;AACrD,QAAM,sBAAsB,OAA8B;AAC1D,QAAM,cAAc,OAA8B;AAClD,QAAM,qBAAqB,OAAiC;AAE5D,QAAM,CAAC,mBAAmB,wBAAwB,SAAiB,WAAW,IAAI,OAAO;AAEzF,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc;AAAW,aAAO;AACpC,WAAO;AAAA,KACN,CAAC,WAAW;AAEf,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,oBAAoB;AAAA,KAC3G,CAAC;AAEJ,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,iBAAiB;AAGpB,SAAO;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { TabTypes } from './utils/constants';\nimport type { DSTabsDefaultPropsT } from './DSTabsTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const tabsDefaultProps: DSTabsDefaultPropsT = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAIA,MAAM,OAAO,MAAY;AAAA;AAElB,MAAM,mBAAwC;AAAA,EACnD,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,SAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { tabPropTypes } from "../propTypes";
|
|
5
|
-
const DSTab = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, {
|
|
6
|
-
...props
|
|
7
|
-
});
|
|
8
|
-
DSTab.propTypes = tabPropTypes;
|
|
9
|
-
const DSTabWithSchema = describe(DSTab);
|
|
10
|
-
DSTabWithSchema.propTypes = tabPropTypes;
|
|
11
|
-
var DSTab_default = DSTab;
|
|
12
|
-
export {
|
|
13
|
-
DSTab,
|
|
14
|
-
DSTabWithSchema,
|
|
15
|
-
DSTab_default as default
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=DSTab.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exportsRelated/DSTab.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabPropsT } from '../DSTabsTypes';\n\nconst DSTab = (props: DSTabPropsT): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabPropsT>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AACA;AAGA,MAAM,QAAQ,CAAC,UAAoC,qCAAC,OAAM,UAAP;AAAA,KAAoB;AAAA;AAEvE,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAsB;AAC9C,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/index.js
DELETED
package/dist/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exportsRelated/DSTab';\nexport * from './DSTabs';\nexport { TabTypes } from './utils/constants';\nexport * from './DSTabsDatatestid';\n\nexport type { DSTabsPropsT, DSTabPropsT } from './DSTabsTypes';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useContext } from "react";
|
|
3
|
-
import { DSIconSizes } from "@elliemae/ds-icon";
|
|
4
|
-
import { BUTTON_TYPES } from "@elliemae/ds-button";
|
|
5
|
-
import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
|
|
6
|
-
import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles";
|
|
7
|
-
import { useCarousel } from "./useCarousel";
|
|
8
|
-
import { DSTabsContext } from "../../DSTabsCTX";
|
|
9
|
-
import { DSTabsDatatestid } from "../../DSTabsDatatestid";
|
|
10
|
-
const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
11
|
-
const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({
|
|
12
|
-
updateIndicatorStyle
|
|
13
|
-
});
|
|
14
|
-
const {
|
|
15
|
-
carouselOnlyListRef,
|
|
16
|
-
props: { type }
|
|
17
|
-
} = useContext(DSTabsContext);
|
|
18
|
-
return /* @__PURE__ */ React.createElement(StyledCarouselWrapper, null, showChevrons.left && /* @__PURE__ */ React.createElement(StyledCarouselButtonWrapper, {
|
|
19
|
-
tabType: type
|
|
20
|
-
}, /* @__PURE__ */ React.createElement(StyledCarouselBtn, {
|
|
21
|
-
size: "s",
|
|
22
|
-
onClick: leftButtonOnClick,
|
|
23
|
-
tabIndex: -1,
|
|
24
|
-
"data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
|
|
25
|
-
buttonType: BUTTON_TYPES.ICON
|
|
26
|
-
}, /* @__PURE__ */ React.createElement(ChevronLeft, {
|
|
27
|
-
size: DSIconSizes.S
|
|
28
|
-
}))), showChevrons.right && /* @__PURE__ */ React.createElement(StyledCarouselButtonWrapper, {
|
|
29
|
-
tabType: type,
|
|
30
|
-
right: showChevrons.right
|
|
31
|
-
}, /* @__PURE__ */ React.createElement(StyledCarouselBtn, {
|
|
32
|
-
size: "s",
|
|
33
|
-
onClick: rightButtonOnClick,
|
|
34
|
-
tabIndex: -1,
|
|
35
|
-
"data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
|
|
36
|
-
buttonType: BUTTON_TYPES.ICON
|
|
37
|
-
}, /* @__PURE__ */ React.createElement(ChevronRight, {
|
|
38
|
-
size: DSIconSizes.S
|
|
39
|
-
}))), /* @__PURE__ */ React.createElement(StyledChildrenWrap, {
|
|
40
|
-
ref: carouselOnlyListRef,
|
|
41
|
-
onClick: handleOnClick,
|
|
42
|
-
onScroll: handleOnScroll
|
|
43
|
-
}, children));
|
|
44
|
-
};
|
|
45
|
-
export {
|
|
46
|
-
Carousel
|
|
47
|
-
};
|
|
48
|
-
//# sourceMappingURL=Carousel.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles';\nimport { useCarousel } from './useCarousel';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { CarouselPropsT } from '../../DSTabsTypes';\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,WAAW,CAAC,EAAE,UAAU,2BAAwD;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,mBAAmB,YAAY;AAAA,IACzG;AAAA;AAGF,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE;AAAA,MACP,WAAW;AAEf,SACE,oCAAC,uBAAD,MACG,aAAa,QACZ,oCAAC,6BAAD;AAAA,IAA6B,SAAS;AAAA,KACpC,oCAAC,mBAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,iBAAiB,SAAS;AAAA,IACvC,YAAY,aAAa;AAAA,KAEzB,oCAAC,aAAD;AAAA,IAAa,MAAM,YAAY;AAAA,QAIpC,aAAa,SACZ,oCAAC,6BAAD;AAAA,IAA6B,SAAS;AAAA,IAAM,OAAO,aAAa;AAAA,KAC9D,oCAAC,mBAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,iBAAiB,SAAS;AAAA,IACvC,YAAY,aAAa;AAAA,KAEzB,oCAAC,cAAD;AAAA,IAAc,MAAM,YAAY;AAAA,QAItC,oCAAC,oBAAD;AAAA,IAAoB,KAAK;AAAA,IAAqB,SAAS;AAAA,IAAe,UAAU;AAAA,KAC7E;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
|
-
import { TabTypes } from "../../utils/constants";
|
|
5
|
-
const StyledCarouselBtn = styled(DSButtonV2)`
|
|
6
|
-
margin: 0;
|
|
7
|
-
min-width: ${({ theme }) => theme.space.xs};
|
|
8
|
-
width: ${({ theme }) => theme.space.xs};
|
|
9
|
-
|
|
10
|
-
&:hover:not(:disabled) {
|
|
11
|
-
background-color: transparent;
|
|
12
|
-
}
|
|
13
|
-
background-color: transparent;
|
|
14
|
-
border-radius: 0px;
|
|
15
|
-
|
|
16
|
-
& .em-ds-icon svg {
|
|
17
|
-
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
const StyledCarouselWrapper = styled.span`
|
|
21
|
-
position: relative;
|
|
22
|
-
width: 100%;
|
|
23
|
-
display: flex;
|
|
24
|
-
`;
|
|
25
|
-
const StyledChildrenWrap = styled.div`
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-wrap: nowrap;
|
|
28
|
-
flex: 1;
|
|
29
|
-
overflow-x: hidden;
|
|
30
|
-
`;
|
|
31
|
-
const StyledCarouselButtonWrapper = styled.div`
|
|
32
|
-
max-width: 16px;
|
|
33
|
-
position: absolute;
|
|
34
|
-
z-index: 200;
|
|
35
|
-
${({ right }) => right ? "right: 0;" : `left: 0;`}
|
|
36
|
-
width: 16px;
|
|
37
|
-
height: ${({ tabType }) => tabType === TabTypes.NORMAL ? "32px" : "22px"};
|
|
38
|
-
padding-top: ${({ tabType }) => tabType === TabTypes.NORMAL ? "5px" : "0px"};
|
|
39
|
-
background: white;
|
|
40
|
-
${({ theme, tabType }) => tabType === TabTypes.NORMAL ? `
|
|
41
|
-
background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );
|
|
42
|
-
` : ``};
|
|
43
|
-
`;
|
|
44
|
-
export {
|
|
45
|
-
StyledCarouselBtn,
|
|
46
|
-
StyledCarouselButtonWrapper,
|
|
47
|
-
StyledCarouselWrapper,
|
|
48
|
-
StyledChildrenWrap
|
|
49
|
-
};
|
|
50
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { TabTypes } from '../../utils/constants';\nimport type { StyledCarouselButtonWrapperPropsT } from '../../DSTabsTypes';\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TabTypes.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,oBAAoB,OAAO;AAAA;AAAA,eAEzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAIvC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,YAAa,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,cAAe,YAAY,SAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,cAAe,YAAY,SAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,cACV,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,cAAc,MAAM,OAAO,QAAQ;AAAA,KAEtH;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { useCarouselCallbacks } from './useCarouselCallbacks';\nimport type { UseCarouselPropsT, UseCarouselReturnTypeT, ShowChevronsT } from '../../DSTabsTypes';\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n const [showChevrons, setShowChevrons] = useState<ShowChevronsT>({\n right: false,\n left: false,\n });\n\n const { tabsRefAsArray } = useContext(DSTabsContext);\n\n const shouldShowLeft = useCallback(\n () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n [carouselOnlyListRef],\n );\n\n const shouldShowRight = useCallback(\n () =>\n carouselOnlyListRef.current\n ? carouselOnlyListRef.current.scrollLeft <\n carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n : false,\n [carouselOnlyListRef],\n );\n\n const recalcChevrons = useCallback(() => {\n setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n }, [shouldShowLeft, shouldShowRight]);\n\n const getVisibleItemsOffset = useCallback(() => {\n if (tabsRefAsArray.current) {\n const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.clientWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n return scroll - 16;\n }\n return 0;\n }, [tabsRefAsArray, carouselOnlyListRef]);\n\n useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n getVisibleItemsOffset,\n recalcChevrons,\n updateIndicatorStyle,\n });\n\n return {\n showChevrons,\n leftButtonOnClick,\n rightButtonOnClick,\n handleOnClick,\n handleOnScroll,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAGO,MAAM,cAAc,CAAC,EAAE,2BAAsE;AAClG,QAAM,EAAE,wBAAwB,WAAW;AAE3C,QAAM,CAAC,cAAc,mBAAmB,SAAwB;AAAA,IAC9D,OAAO;AAAA,IACP,MAAM;AAAA;AAGR,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,iBAAiB,YACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI,OAElF,CAAC;AAGH,QAAM,kBAAkB,YACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE,OACN,CAAC;AAGH,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,mBAAmB,MAAM;AAAA,KACjD,CAAC,gBAAgB;AAEpB,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,yBAAyB,GAAG,oBAAoB,UAAU;AAC5D,gBAAM,SAAS,OAAO,iBAAiB;AACvC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,cAAc,WAAW,OAAO;AAEjE,iBAAO,MAAO,SAAQ;AAAA;AAExB,eAAO;AAAA,SACN;AAEH,aAAO,SAAS;AAAA;AAElB,WAAO;AAAA,KACN,CAAC,gBAAgB;AAEpB,oBAAkB,qBAAqB;AAEvC,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,mBAAmB,qBAAqB;AAAA,IACpG;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport type { UseCarouselCallbacksPropsT, UseCarouselCallbacksReturnTypeT } from '../../DSTabsTypes';\n\nexport const useCarouselCallbacks = ({\n getVisibleItemsOffset,\n updateIndicatorStyle,\n recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n const rightButtonOnClick = useCallback(() => {\n if (carouselOnlyListRef.current) {\n carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n }\n }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n const leftButtonOnClick = useCallback(() => {\n if (carouselOnlyListRef.current) {\n carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n }\n }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n const handleOnScroll = useCallback(() => {\n recalcChevrons();\n if (updateIndicatorStyle) updateIndicatorStyle();\n }, [recalcChevrons, updateIndicatorStyle]);\n\n const handleOnClick = useCallback(\n ({ target }: MouseEvent) => {\n if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n const tabList = carouselOnlyListRef.current;\n const tabButton = target as HTMLButtonElement;\n const tabButtonDimensions = tabButton.getBoundingClientRect();\n const tabListDimensions = tabList?.getBoundingClientRect();\n const tabButtonIndex = tabButton.dataset.index as string;\n const lastItemIndex = focusableTabsRef.current.length.toString();\n const magicNumber = 34;\n\n const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n if (\n !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n tabListDimensions &&\n carouselOnlyListRef.current\n ) {\n const containerWidth = tabListDimensions.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = tabButton.offsetWidth + magicNumber;\n\n if (positionInContainer > halfContainer) {\n carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n }\n }\n }\n },\n [focusableTabsRef, carouselOnlyListRef],\n );\n\n return {\n handleOnClick,\n rightButtonOnClick,\n leftButtonOnClick,\n handleOnScroll,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AAEA;AACA;AAGO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,kBAAkB,wBAAwB,WAAW;AAE7D,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc;AAAA;AAAA,KAE3C,CAAC,uBAAuB;AAE3B,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc;AAAA;AAAA,KAE3C,CAAC,uBAAuB;AAE3B,QAAM,iBAAiB,YAAY,MAAM;AACvC;AACA,QAAI;AAAsB;AAAA,KACzB,CAAC,gBAAgB;AAEpB,QAAM,gBAAgB,YACpB,CAAC,EAAE,aAAyB;AAC1B,QAAI,iBAAiB,WAAY,OAA6B,aAAa,YAAY,OAAO;AAC5F,YAAM,UAAU,oBAAoB;AACpC,YAAM,YAAY;AAClB,YAAM,sBAAsB,UAAU;AACtC,YAAM,oBAAoB,SAAS;AACnC,YAAM,iBAAiB,UAAU,QAAQ;AACzC,YAAM,gBAAgB,iBAAiB,QAAQ,OAAO;AACtD,YAAM,cAAc;AAEpB,YAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,UACE,CAAC,yBAAyB,WAAW,SAAS,oBAC9C,qBACA,oBAAoB,SACpB;AACA,cAAM,iBAAiB,kBAAkB;AACzC,cAAM,gBAAgB,iBAAiB;AACvC,cAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,cAAM,sBAAsB,wBAAwB;AACpD,cAAM,QAAQ,UAAU,cAAc;AAEtC,YAAI,sBAAsB,eAAe;AACvC,8BAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,eACnE;AACL,8BAAoB,QAAQ,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,KAKxE,CAAC,kBAAkB;AAGrB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useMemo, useContext } from "react";
|
|
3
|
-
import { Carousel } from "../carousel/Carousel";
|
|
4
|
-
import { useTabBar } from "./useTabBar";
|
|
5
|
-
import {
|
|
6
|
-
StyledTabButton,
|
|
7
|
-
StyledTabList,
|
|
8
|
-
StyledTabWrapper,
|
|
9
|
-
StyledSelectionIndicator,
|
|
10
|
-
StyledSubTabsList,
|
|
11
|
-
StyledRequiredMark
|
|
12
|
-
} from "./styles";
|
|
13
|
-
import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
|
|
14
|
-
import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation";
|
|
15
|
-
import { centerTab } from "../../utils/helpers";
|
|
16
|
-
import { TabTypes } from "../../utils/constants";
|
|
17
|
-
import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks";
|
|
18
|
-
import { DSTabsDatatestid } from "../../DSTabsDatatestid";
|
|
19
|
-
const TabBar = () => {
|
|
20
|
-
const {
|
|
21
|
-
tabsRef,
|
|
22
|
-
focusableTabsRef,
|
|
23
|
-
tabsListRef,
|
|
24
|
-
tabsRefAsArray,
|
|
25
|
-
carouselOnlyListRef,
|
|
26
|
-
actualActiveTab,
|
|
27
|
-
props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
|
|
28
|
-
} = useContext(DSTabsContext);
|
|
29
|
-
const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);
|
|
30
|
-
const { handleOnTabChange } = useTabsCallbacks();
|
|
31
|
-
const { handleOnKeyDown } = useKeyboardNavigation();
|
|
32
|
-
const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();
|
|
33
|
-
const renderTabs = useMemo(() => {
|
|
34
|
-
const availableTabIndexes = [];
|
|
35
|
-
return React2.Children.map(tabs, (tab, index) => {
|
|
36
|
-
const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
|
|
37
|
-
if (!disabled)
|
|
38
|
-
availableTabIndexes.push(index);
|
|
39
|
-
return /* @__PURE__ */ React2.createElement(StyledTabButton, {
|
|
40
|
-
key: tabId,
|
|
41
|
-
role: "tab",
|
|
42
|
-
ref: (t) => {
|
|
43
|
-
if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
|
|
44
|
-
tabsRefAsArray.current[index] = t;
|
|
45
|
-
if (!disabled && !focusableTabsRef.current.includes(t))
|
|
46
|
-
focusableTabsRef.current.push(t);
|
|
47
|
-
tabsRef.current[index] = t;
|
|
48
|
-
if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
|
|
49
|
-
firstSubtabInternalRef.current = t;
|
|
50
|
-
}
|
|
51
|
-
if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
|
|
52
|
-
lastTabInternalRef.current = t;
|
|
53
|
-
}
|
|
54
|
-
if (ref)
|
|
55
|
-
ref.current = t;
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
type: "button",
|
|
59
|
-
"aria-controls": tabId,
|
|
60
|
-
"aria-selected": actualActiveTab === tabId,
|
|
61
|
-
"aria-disabled": disabled,
|
|
62
|
-
"aria-labelledby": `${tabId}-label`,
|
|
63
|
-
isDSMobile,
|
|
64
|
-
fixedTabsHeaders,
|
|
65
|
-
tabType: type,
|
|
66
|
-
title,
|
|
67
|
-
"data-required": required,
|
|
68
|
-
"data-tab-id": tabId,
|
|
69
|
-
"data-index": index,
|
|
70
|
-
withCarousel,
|
|
71
|
-
isActive: actualActiveTab === tabId,
|
|
72
|
-
disabled,
|
|
73
|
-
showSeparator: showSeparator && type !== TabTypes.NORMAL,
|
|
74
|
-
"data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
|
|
75
|
-
id: `${tabId}-label`,
|
|
76
|
-
onClick: (e) => {
|
|
77
|
-
if (!disabled) {
|
|
78
|
-
handleOnTabChange(tabId, e);
|
|
79
|
-
updateIndicatorStyle();
|
|
80
|
-
}
|
|
81
|
-
if (onClick && !disabled)
|
|
82
|
-
onClick(tabId, e);
|
|
83
|
-
},
|
|
84
|
-
onFocus: (e) => {
|
|
85
|
-
if (withCarousel)
|
|
86
|
-
centerTab({ e, listRef: carouselOnlyListRef });
|
|
87
|
-
},
|
|
88
|
-
onKeyDown: (e) => {
|
|
89
|
-
if (e.key === "Enter")
|
|
90
|
-
e.stopPropagation();
|
|
91
|
-
if (!disabled)
|
|
92
|
-
handleOnKeyDown(e);
|
|
93
|
-
if (onKeyDown && !disabled)
|
|
94
|
-
onKeyDown(e);
|
|
95
|
-
},
|
|
96
|
-
style
|
|
97
|
-
}, title, required && /* @__PURE__ */ React2.createElement(StyledRequiredMark, null, "\u25CF"));
|
|
98
|
-
});
|
|
99
|
-
}, [
|
|
100
|
-
tabs,
|
|
101
|
-
actualActiveTab,
|
|
102
|
-
isDSMobile,
|
|
103
|
-
fixedTabsHeaders,
|
|
104
|
-
type,
|
|
105
|
-
withCarousel,
|
|
106
|
-
showSeparator,
|
|
107
|
-
tabsRefAsArray,
|
|
108
|
-
focusableTabsRef,
|
|
109
|
-
tabsRef,
|
|
110
|
-
firstSubtabInternalRef,
|
|
111
|
-
lastTabInternalRef,
|
|
112
|
-
handleOnTabChange,
|
|
113
|
-
updateIndicatorStyle,
|
|
114
|
-
carouselOnlyListRef,
|
|
115
|
-
handleOnKeyDown
|
|
116
|
-
]);
|
|
117
|
-
if (type === TabTypes.SUBTABS && !isDSMobile) {
|
|
118
|
-
return /* @__PURE__ */ React2.createElement(StyledSubTabsList, {
|
|
119
|
-
withCarousel,
|
|
120
|
-
"data-testid": DSTabsDatatestid.SUB_TAB_LIST,
|
|
121
|
-
ref: tabsListRef,
|
|
122
|
-
role: "tablist"
|
|
123
|
-
}, withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, null, renderTabs) : renderTabs);
|
|
124
|
-
}
|
|
125
|
-
return /* @__PURE__ */ React2.createElement(StyledTabList, {
|
|
126
|
-
withCarousel,
|
|
127
|
-
ref: tabsListRef,
|
|
128
|
-
role: "tablist",
|
|
129
|
-
"data-testid": DSTabsDatatestid.TAB_LIST,
|
|
130
|
-
isDSMobile,
|
|
131
|
-
fixedTabsHeaders,
|
|
132
|
-
mobileGradients,
|
|
133
|
-
onScroll: updateMobileGradients,
|
|
134
|
-
indicatorStyle,
|
|
135
|
-
tabType: type
|
|
136
|
-
}, /* @__PURE__ */ React2.createElement(StyledTabWrapper, {
|
|
137
|
-
isDSMobile,
|
|
138
|
-
fixedTabsHeaders
|
|
139
|
-
}, !isDSMobile && withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, {
|
|
140
|
-
updateIndicatorStyle
|
|
141
|
-
}, renderTabs) : renderTabs), /* @__PURE__ */ React2.createElement(StyledSelectionIndicator, {
|
|
142
|
-
isDSMobile,
|
|
143
|
-
tabType: type
|
|
144
|
-
}));
|
|
145
|
-
};
|
|
146
|
-
export {
|
|
147
|
-
TabBar
|
|
148
|
-
};
|
|
149
|
-
//# sourceMappingURL=TabBar.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n StyledTabButton,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { centerTab } from '../../utils/helpers';\nimport { TabTypes } from '../../utils/constants';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { DSTabPropsWithDefaultT } from '../../DSTabsTypes';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs: React.ReactNode[] = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabPropsWithDefaultT>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\n ref={(t: HTMLButtonElement) => {\n if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n tabsRefAsArray.current[index] = t;\n if (!disabled && !focusableTabsRef.current.includes(t)) focusableTabsRef.current.push(t);\n tabsRef.current[index] = t;\n if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = t;\n }\n if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n lastTabInternalRef.current = t;\n }\n if (ref) ref.current = t;\n }\n }}\n type=\"button\"\n aria-controls={tabId}\n aria-selected={actualActiveTab === tabId}\n aria-disabled={disabled}\n aria-labelledby={`${tabId}-label`}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n title={title}\n data-required={required}\n data-tab-id={tabId}\n data-index={index}\n withCarousel={withCarousel}\n isActive={actualActiveTab === tabId}\n disabled={disabled}\n showSeparator={showSeparator && type !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') e.stopPropagation();\n if (!disabled) handleOnKeyDown(e);\n if (onKeyDown && !disabled) onKeyDown(e);\n }}\n style={style}\n >\n {title}\n {required && <StyledRequiredMark>●</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n ref={tabsListRef}\n role=\"tablist\"\n >\n {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n withCarousel={withCarousel}\n ref={tabsListRef}\n role=\"tablist\"\n data-testid={DSTabsDatatestid.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n indicatorStyle={indicatorStyle}\n tabType={type}\n >\n <StyledTabWrapper isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n ) : (\n renderTabs\n )}\n </StyledTabWrapper>\n <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n </StyledTabList>\n );\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|