@elliemae/ds-tabs 3.5.0-rc.4 → 3.5.0-rc.7
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/DSTabs.js +4 -1
- package/dist/cjs/DSTabs.js.map +2 -2
- package/dist/cjs/DSTabsCTX.js +4 -1
- package/dist/cjs/DSTabsCTX.js.map +2 -2
- package/dist/cjs/DSTabsDatatestid.js +4 -1
- package/dist/cjs/DSTabsDatatestid.js.map +1 -1
- package/dist/cjs/config/useCrossRef.js +11 -5
- package/dist/cjs/config/useCrossRef.js.map +1 -1
- package/dist/cjs/config/useTabs.js +18 -12
- package/dist/cjs/config/useTabs.js.map +1 -1
- package/dist/cjs/exported-related/DSTab.js +4 -1
- package/dist/cjs/exported-related/DSTab.js.map +2 -2
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/carousel/Carousel.js +4 -1
- package/dist/cjs/parts/carousel/Carousel.js.map +1 -1
- package/dist/cjs/parts/carousel/styles.js +4 -1
- package/dist/cjs/parts/carousel/styles.js.map +1 -1
- package/dist/cjs/parts/carousel/useCarousel.js +12 -3
- package/dist/cjs/parts/carousel/useCarousel.js.map +2 -2
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js +29 -23
- package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map +1 -1
- package/dist/cjs/parts/tabBar/TabBar.js +4 -1
- package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
- package/dist/cjs/parts/tabBar/styles.js +7 -2
- package/dist/cjs/parts/tabBar/styles.js.map +1 -1
- package/dist/cjs/parts/tabBar/useTabBar.js +8 -2
- package/dist/cjs/parts/tabBar/useTabBar.js.map +2 -2
- package/dist/cjs/parts/tabsContent/TabsContent.js +4 -1
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/cjs/parts/tabsContent/styles.js +4 -1
- package/dist/cjs/parts/tabsContent/styles.js.map +1 -1
- package/dist/cjs/parts/tabsPanel/TabsPanels.js +42 -33
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/styles.js +4 -1
- package/dist/cjs/parts/tabsPanel/styles.js.map +1 -1
- package/dist/cjs/propTypes.js +4 -1
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/cjs/sharedTypes.js +4 -1
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/utils/constants.js +4 -1
- package/dist/cjs/utils/constants.js.map +1 -1
- package/dist/cjs/utils/helpers.js +14 -3
- package/dist/cjs/utils/helpers.js.map +1 -1
- package/dist/cjs/utils/hooks/useKeyboardNavigation.js +41 -35
- package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/cjs/utils/hooks/useTabsCallbacks.js +22 -13
- package/dist/cjs/utils/hooks/useTabsCallbacks.js.map +1 -1
- package/dist/esm/DSTabs.js.map +2 -2
- package/dist/esm/DSTabsCTX.js.map +1 -1
- package/dist/esm/DSTabsDatatestid.js.map +1 -1
- package/dist/esm/config/useCrossRef.js +7 -4
- package/dist/esm/config/useCrossRef.js.map +1 -1
- package/dist/esm/config/useTabs.js +14 -11
- package/dist/esm/config/useTabs.js.map +1 -1
- package/dist/esm/exported-related/DSTab.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/carousel/Carousel.js.map +1 -1
- package/dist/esm/parts/carousel/styles.js.map +1 -1
- package/dist/esm/parts/carousel/useCarousel.js +8 -2
- package/dist/esm/parts/carousel/useCarousel.js.map +1 -1
- package/dist/esm/parts/carousel/useCarouselCallbacks.js +25 -22
- package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +1 -1
- package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
- package/dist/esm/parts/tabBar/styles.js +3 -1
- package/dist/esm/parts/tabBar/styles.js.map +1 -1
- package/dist/esm/parts/tabBar/useTabBar.js +4 -1
- package/dist/esm/parts/tabBar/useTabBar.js.map +1 -1
- package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/parts/tabsContent/styles.js.map +1 -1
- package/dist/esm/parts/tabsPanel/TabsPanels.js +38 -32
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/esm/parts/tabsPanel/styles.js.map +1 -1
- package/dist/esm/propTypes.js.map +1 -1
- package/dist/esm/sharedTypes.js.map +1 -1
- package/dist/esm/utils/constants.js.map +1 -1
- package/dist/esm/utils/helpers.js +10 -2
- package/dist/esm/utils/helpers.js.map +1 -1
- package/dist/esm/utils/hooks/useKeyboardNavigation.js +37 -34
- package/dist/esm/utils/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/utils/hooks/useTabsCallbacks.js +18 -12
- package/dist/esm/utils/hooks/useTabsCallbacks.js.map +1 -1
- package/package.json +6 -6
package/dist/cjs/DSTabs.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSTabs_exports = {};
|
|
23
26
|
__export(DSTabs_exports, {
|
package/dist/cjs/DSTabs.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSTabs.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabsPropTypes } from './propTypes';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX';\nimport { TabsContent } from './parts/tabsContent/TabsContent';\nimport { useTabs } from './config/useTabs';\nimport { useCrossRef } from './config/useCrossRef';\nimport { TabTypes } from './utils/constants';\nimport type { DSTabsT } from './propTypes';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n const ctx = useTabs(props);\n const crossRefsCtx = useCrossRef();\n\n const { type } = props;\n\n if (type === TabTypes.SUBTABS) {\n return (\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n );\n }\n\n return (\n <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n </DSTabsCrossRefContext.Provider>\n );\n};\n\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,0BAAyB;AACzB,uBAA8B;AAC9B,uBAAqD;AACrD,yBAA4B;AAC5B,qBAAwB;AACxB,yBAA4B;AAC5B,uBAAyB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,UAAM,wBAAQ,KAAK;AACzB,QAAM,mBAAe,gCAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,0BAAS,SAAS;AAC7B,WACE,6BAAAA,QAAA,cAAC,+BAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,OAC7B,6BAAAA,QAAA,cAAC,oCAAY,CACf;AAAA,EAEJ;AAEA,SACE,6BAAAA,QAAA,cAAC,uCAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,6BAAAA,QAAA,cAAC,+BAAc,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC7B,6BAAAA,QAAA,cAAC,oCAAY,CACf,CACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,uBAAmB,8BAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/DSTabsCTX.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSTabsCTX_exports = {};
|
|
23
26
|
__export(DSTabsCTX_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSTabsCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { createContext, createRef } from 'react';\nimport { tabsDefaultProps as defaultProps } from './propTypes';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n props: defaultProps,\n tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n tabsListRef: createRef<HTMLDivElement | null>(),\n carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n setInternalActiveTab: noop,\n actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,uBAAiD;AAIjD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO,iBAAAA;AAAA,EACP,aAAS,wBAAoD;AAAA,EAC7D,iBAAa,wBAAiC;AAAA,EAC9C,yBAAqB,wBAAiC;AAAA,EACtD,sBAAkB,wBAAsC;AAAA,EACxD,oBAAgB,wBAAsC;AAAA,EACtD,wBAAoB,wBAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB,4BAAsD,cAAc;AAC1F,MAAM,4BAAwB,4BAA0D,uBAAuB;",
|
|
6
|
+
"names": ["defaultProps"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSTabsDatatestid_exports = {};
|
|
23
26
|
__export(DSTabsDatatestid_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSTabsDatatestid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSTabsDatatestid = {\n TABS_CONTAINER: 'ds-tabs-container',\n TAB_BUTTON: 'ds-tabs-tab-button',\n SUBTAB_BUTTON: 'ds-tabs-subtab-button',\n TAB_PANEL: 'ds-tabs-tab-panel',\n SUB_TAB_LIST: 'subtabs-list',\n TAB_LIST: 'tab-list',\n CAROUSEL: {\n BUTTON_RIGHT: 'chevron-right',\n BUTTON_LEFT: 'chevron-left',\n },\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useCrossRef_exports = {};
|
|
23
26
|
__export(useCrossRef_exports, {
|
|
@@ -29,10 +32,13 @@ var import_react = require("react");
|
|
|
29
32
|
const useCrossRef = () => {
|
|
30
33
|
const firstSubtabInternalRef = (0, import_react.useRef)();
|
|
31
34
|
const lastTabInternalRef = (0, import_react.useRef)();
|
|
32
|
-
const ctx = (0, import_react.useMemo)(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
const ctx = (0, import_react.useMemo)(
|
|
36
|
+
() => ({
|
|
37
|
+
firstSubtabInternalRef,
|
|
38
|
+
lastTabInternalRef
|
|
39
|
+
}),
|
|
40
|
+
[]
|
|
41
|
+
);
|
|
36
42
|
return ctx;
|
|
37
43
|
};
|
|
38
44
|
//# sourceMappingURL=useCrossRef.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useCrossRef.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useRef, useMemo } from 'react';\nimport type { DSTabsInternalsT } from '../sharedTypes';\n\nexport const useCrossRef = (): DSTabsInternalsT.DSTabsUseCrossRefContextT => {\n const firstSubtabInternalRef = useRef<HTMLButtonElement>();\n const lastTabInternalRef = useRef<HTMLButtonElement>();\n\n const ctx = useMemo(\n () => ({\n firstSubtabInternalRef,\n lastTabInternalRef,\n }),\n [],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAGzB,MAAM,cAAc,MAAkD;AAC3E,QAAM,6BAAyB,qBAA0B;AACzD,QAAM,yBAAqB,qBAA0B;AAErD,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useTabs_exports = {};
|
|
23
26
|
__export(useTabs_exports, {
|
|
@@ -52,17 +55,20 @@ const useTabs = (props) => {
|
|
|
52
55
|
setInternalActiveTab(firstAvailableTab?.dataset.tabId || "");
|
|
53
56
|
}
|
|
54
57
|
}, [activeTab]);
|
|
55
|
-
const ctx = (0, import_react.useMemo)(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
const ctx = (0, import_react.useMemo)(
|
|
59
|
+
() => ({
|
|
60
|
+
props: propsWithDefaults,
|
|
61
|
+
tabsRef,
|
|
62
|
+
focusableTabsRef,
|
|
63
|
+
tabsListRef,
|
|
64
|
+
tabsRefAsArray,
|
|
65
|
+
setInternalActiveTab,
|
|
66
|
+
actualActiveTab,
|
|
67
|
+
actualActiveTabRef,
|
|
68
|
+
carouselOnlyListRef
|
|
69
|
+
}),
|
|
70
|
+
[actualActiveTab, propsWithDefaults]
|
|
71
|
+
);
|
|
66
72
|
return ctx;
|
|
67
73
|
};
|
|
68
74
|
//# sourceMappingURL=useTabs.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useTabs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { tabsDefaultProps } from '../propTypes';\nimport type { DSTabsT } from '../propTypes';\nimport type { DSTabsInternalsT } from '../sharedTypes';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab } = 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>('');\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n useEffect(() => {\n if (activeTab === undefined) {\n const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n }\n }, [activeTab]);\n\n const 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,0BAA6C;AAC7C,uBAAiC;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,kDAAoD,OAAO,iCAAgB;AAErG,QAAM,EAAE,UAAU,IAAI;AAEtB,QAAM,cAAU,qBAA0C,CAAC,CAAC;AAC5D,QAAM,qBAAiB,qBAA4B,CAAC,CAAC;AACrD,QAAM,uBAAmB,qBAA4B,CAAC,CAAC;AACvD,QAAM,0BAAsB,qBAA8B,IAAI;AAC9D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,yBAAqB,qBAAiC,IAAI;AAEhE,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAiB,EAAE;AAErE,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,QAAI,cAAc;AAAW,aAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,8BAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSTab_exports = {};
|
|
23
26
|
__export(DSTab_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/DSTab.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabT } from '../propTypes';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabT.Props>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,0BAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAqC,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN;AAAA,EAAgB,GAAG;AAAA,CAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,sBAAkB,8BAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,7 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
+
mod
|
|
24
|
+
));
|
|
22
25
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
26
|
var src_exports = {};
|
|
24
27
|
__export(src_exports, {
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './exported-related/DSTab';\nexport * from './DSTabs';\nexport { TabTypes } from './utils/constants';\nexport * from './DSTabsDatatestid';\nexport type { DSTabT, DSTabsT } from './propTypes';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,qCAAd;AACA,wBAAc,qBADd;AAEA,uBAAyB;AACzB,wBAAc,+BAHd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var Carousel_exports = {};
|
|
23
26
|
__export(Carousel_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2B;AAC3B,qBAA4B;AAC5B,uBAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,SACE,oCAAC,2CACE,aAAa,QACZ,oCAAC;AAAA,IAA4B,SAAS;AAAA,KACpC,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,yCAAiB,SAAS;AAAA,IACvC,YAAY,8BAAa;AAAA,KAEzB,oCAAC;AAAA,IAAY,MAAM,2BAAY;AAAA,GAAG,CACpC,CACF,GAED,aAAa,SACZ,oCAAC;AAAA,IAA4B,SAAS;AAAA,IAAM,OAAO,aAAa;AAAA,KAC9D,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,yCAAiB,SAAS;AAAA,IACvC,YAAY,8BAAa;AAAA,KAEzB,oCAAC;AAAA,IAAa,MAAM,2BAAY;AAAA,GAAG,CACrC,CACF,GAEF,oCAAC;AAAA,IAAmB,KAAK;AAAA,IAAqB,SAAS;AAAA,IAAe,UAAU;AAAA,KAC7E,QACH,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styles_exports = {};
|
|
23
26
|
__export(styles_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAA2B;AAC3B,uBAAyB;AAQlB,MAAM,wBAAoB,yBAAO,2BAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIvC,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,QAAQ,MAAO,YAAY,0BAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,QAAQ,MAAO,YAAY,0BAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,0BAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,cAAc,MAAM,OAAO,QAAQ;AAAA,KAEtH;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useCarousel_exports = {};
|
|
23
26
|
__export(useCarousel_exports, {
|
|
@@ -37,8 +40,14 @@ const useCarousel = ({ updateIndicatorStyle }) => {
|
|
|
37
40
|
left: false
|
|
38
41
|
});
|
|
39
42
|
const { tabsRefAsArray } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
40
|
-
const shouldShowLeft = (0, import_react.useCallback)(
|
|
41
|
-
|
|
43
|
+
const shouldShowLeft = (0, import_react.useCallback)(
|
|
44
|
+
() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false,
|
|
45
|
+
[carouselOnlyListRef]
|
|
46
|
+
);
|
|
47
|
+
const shouldShowRight = (0, import_react.useCallback)(
|
|
48
|
+
() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false,
|
|
49
|
+
[carouselOnlyListRef]
|
|
50
|
+
);
|
|
42
51
|
const recalcChevrons = (0, import_react.useCallback)(() => {
|
|
43
52
|
setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });
|
|
44
53
|
}, [shouldShowLeft, shouldShowRight]);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/useCarousel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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 { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface UseCarouselPropsT {\n updateIndicatorStyle?: () => void;\n}\n\ninterface UseCarouselReturnTypeT {\n showChevrons: DSTabsInternalsT.ShowChevronsT;\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n right: false,\n left: false,\n });\n\n const { tabsRefAsArray } = useContext(DSTabsContext);\n\n const shouldShowLeft = useCallback(\n () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n [carouselOnlyListRef],\n );\n\n const shouldShowRight = useCallback(\n () =>\n carouselOnlyListRef.current\n ? carouselOnlyListRef.current.scrollLeft <\n carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n : false,\n [carouselOnlyListRef],\n );\n\n const recalcChevrons = useCallback(() => {\n setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n }, [shouldShowLeft, shouldShowRight]);\n\n const getVisibleItemsOffset = useCallback(() => {\n if (tabsRefAsArray.current) {\n const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.clientWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n return scroll - 16;\n }\n return 0;\n }, [tabsRefAsArray, carouselOnlyListRef]);\n\n useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n getVisibleItemsOffset,\n recalcChevrons,\n updateIndicatorStyle,\n });\n\n return {\n showChevrons,\n leftButtonOnClick,\n rightButtonOnClick,\n handleOnClick,\n handleOnScroll,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;AAe9B,MAAM,cAAc,CAAC,EAAE,qBAAqB,MAAiD;AAClG,QAAM,EAAE,oBAAoB,QAAI,yBAAW,8BAAa;AAExD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,QAAI,yBAAW,8BAAa;AAEnD,QAAM,qBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,qBAAiB,0BAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,gBAAI,yCAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,6BAAAA,SAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,kDAAqB;AAAA,IACpG;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
|
+
"names": ["useResizeObserver"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useCarouselCallbacks_exports = {};
|
|
23
26
|
__export(useCarouselCallbacks_exports, {
|
|
@@ -49,30 +52,33 @@ const useCarouselCallbacks = ({
|
|
|
49
52
|
if (updateIndicatorStyle)
|
|
50
53
|
updateIndicatorStyle();
|
|
51
54
|
}, [recalcChevrons, updateIndicatorStyle]);
|
|
52
|
-
const handleOnClick = (0, import_react.useCallback)(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
55
|
+
const handleOnClick = (0, import_react.useCallback)(
|
|
56
|
+
({ target }) => {
|
|
57
|
+
if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
|
|
58
|
+
const tabList = carouselOnlyListRef.current;
|
|
59
|
+
const tabButton = target;
|
|
60
|
+
const tabButtonDimensions = tabButton.getBoundingClientRect();
|
|
61
|
+
const tabListDimensions = tabList?.getBoundingClientRect();
|
|
62
|
+
const tabButtonIndex = tabButton.dataset.index;
|
|
63
|
+
const lastItemIndex = focusableTabsRef.current.length.toString();
|
|
64
|
+
const magicNumber = 34;
|
|
65
|
+
const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
|
|
66
|
+
if (!(0, import_helpers.isElementVisibleCarousel)(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
|
|
67
|
+
const containerWidth = tabListDimensions.width;
|
|
68
|
+
const halfContainer = containerWidth / 2;
|
|
69
|
+
const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
|
|
70
|
+
const positionInContainer = elementScrollPosition % containerWidth;
|
|
71
|
+
const width = tabButton.offsetWidth + magicNumber;
|
|
72
|
+
if (positionInContainer > halfContainer) {
|
|
73
|
+
carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
|
|
74
|
+
} else {
|
|
75
|
+
carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
|
|
76
|
+
}
|
|
72
77
|
}
|
|
73
78
|
}
|
|
74
|
-
}
|
|
75
|
-
|
|
79
|
+
},
|
|
80
|
+
[focusableTabsRef, carouselOnlyListRef]
|
|
81
|
+
);
|
|
76
82
|
return {
|
|
77
83
|
handleOnClick,
|
|
78
84
|
rightButtonOnClick,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\n\ninterface UseCarouselCallbacksPropsT {\n getVisibleItemsOffset: () => number;\n recalcChevrons: () => void;\n updateIndicatorStyle?: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n getVisibleItemsOffset,\n 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AAExC,qBAAyC;AACzC,uBAA8B;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,QAAI,yBAAW,8BAAa;AAE1E,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,qBAAiB,0BAAY,MAAM;AACvC,mBAAe;AACf,QAAI;AAAsB,2BAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,oBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,KAAC,yCAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var TabBar_exports = {};
|
|
23
26
|
__export(TabBar_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n StyledTabButton,\n StyledMobileGradient,\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 { DSTabT } from '../../propTypes';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\n ref={(tabButtonRef: HTMLButtonElement) => {\n if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n tabsRefAsArray.current[index] = tabButtonRef;\n if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n focusableTabsRef.current.push(tabButtonRef);\n tabsRef.current[index] = tabButtonRef;\n if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n lastTabInternalRef.current = tabButtonRef;\n }\n if (ref) ref.current = tabButtonRef;\n }\n }}\n type=\"button\"\n aria-controls={tabId}\n aria-selected={actualActiveTab === tabId}\n aria-disabled={disabled}\n 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 {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n />\n )}\n </StyledTabList>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styles_exports = {};
|
|
23
26
|
__export(styles_exports, {
|
|
@@ -64,7 +67,9 @@ const selectionIndicatorSettingsFromParent = import_ds_system.css`
|
|
|
64
67
|
${StyledSelectionIndicator} {
|
|
65
68
|
background: ${(props) => {
|
|
66
69
|
const { theme, indicatorStyle, isDSMobile } = props;
|
|
67
|
-
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${import_ds_system.th.color("brand-600")(
|
|
70
|
+
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${import_ds_system.th.color("brand-600")(
|
|
71
|
+
props
|
|
72
|
+
)} 16px, ${import_ds_system.th.color("brand-600")(props)} ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width}px )` : theme.colors.brand[600];
|
|
68
73
|
}};
|
|
69
74
|
}
|
|
70
75
|
`;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, css, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n position: absolute;\n height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\n/** CSS Setters */\n\nconst selectionIndicatorSettingsFromParent = css<StyledTabListPropsT>`\n ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\n }};\n }\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: absolute;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: calc(100% - 1px);\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType, isDSMobile }) => {\n if (tabType === TabTypes.SUBTABS) return 'capitalize';\n return isDSMobile ? 'none' : 'uppercase';\n }};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n \n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TabTypes.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 16px;\n line-height: 1.3;\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n z-index: 0;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.neutral['000']};`\n : ``}\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n\n ${selectionIndicatorSettingsFromParent}\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useTabBar_exports = {};
|
|
23
26
|
__export(useTabBar_exports, {
|
|
@@ -58,7 +61,10 @@ const useTabBar = () => {
|
|
|
58
61
|
}
|
|
59
62
|
return import_constants.defaultIndicatorStyles;
|
|
60
63
|
}, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
|
|
61
|
-
const updateIndicatorStyle = (0, import_react.useCallback)(
|
|
64
|
+
const updateIndicatorStyle = (0, import_react.useCallback)(
|
|
65
|
+
() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
|
|
66
|
+
[getIndicatorStyles, setIndicatorStyle]
|
|
67
|
+
);
|
|
62
68
|
(0, import_resize_observer.default)(tabsListRef, updateIndicatorStyle);
|
|
63
69
|
const updateMobileGradients = (0, import_react.useCallback)(() => {
|
|
64
70
|
if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
|