@elliemae/ds-tabs 2.1.0 → 2.2.0-alpha.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 +58 -40
- package/cjs/DSTabs.js.map +7 -0
- package/cjs/DSTabsCTX.js +51 -25
- package/cjs/DSTabsCTX.js.map +7 -0
- package/cjs/DSTabsDatatestid.js +42 -14
- package/cjs/DSTabsDatatestid.js.map +7 -0
- package/cjs/DSTabsTypes.js +27 -2
- package/cjs/DSTabsTypes.js.map +7 -0
- package/cjs/config/useCrossRef.js +38 -11
- package/cjs/config/useCrossRef.js.map +7 -0
- package/cjs/config/useTabs.js +53 -36
- package/cjs/config/useTabs.js.map +7 -0
- package/cjs/defaultProps.js +39 -13
- package/cjs/defaultProps.js.map +7 -0
- package/cjs/exportsRelated/DSTab.js +46 -32
- package/cjs/exportsRelated/DSTab.js.map +7 -0
- package/cjs/index.js +38 -17
- package/cjs/index.js.map +7 -0
- package/cjs/parts/carousel/Carousel.js +61 -53
- package/cjs/parts/carousel/Carousel.js.map +7 -0
- package/cjs/parts/carousel/styles.js +77 -63
- package/cjs/parts/carousel/styles.js.map +7 -0
- package/cjs/parts/carousel/useCarousel.js +51 -49
- package/cjs/parts/carousel/useCarousel.js.map +7 -0
- package/cjs/parts/carousel/useCarouselCallbacks.js +53 -36
- package/cjs/parts/carousel/useCarouselCallbacks.js.map +7 -0
- package/cjs/parts/tabBar/TabBar.js +124 -120
- package/cjs/parts/tabBar/TabBar.js.map +7 -0
- package/cjs/parts/tabBar/styles.js +289 -195
- package/cjs/parts/tabBar/styles.js.map +7 -0
- package/cjs/parts/tabBar/useTabBar.js +67 -55
- package/cjs/parts/tabBar/useTabBar.js.map +7 -0
- package/cjs/parts/tabsContent/TabsContent.js +49 -45
- package/cjs/parts/tabsContent/TabsContent.js.map +7 -0
- package/cjs/parts/tabsContent/styles.js +39 -15
- package/cjs/parts/tabsContent/styles.js.map +7 -0
- package/cjs/parts/tabsPanel/TabsPanels.js +60 -58
- package/cjs/parts/tabsPanel/TabsPanels.js.map +7 -0
- package/cjs/parts/tabsPanel/styles.js +43 -23
- package/cjs/parts/tabsPanel/styles.js.map +7 -0
- package/cjs/propTypes.js +54 -29
- package/cjs/propTypes.js.map +7 -0
- package/cjs/utils/constants.js +44 -16
- package/cjs/utils/constants.js.map +7 -0
- package/cjs/utils/helpers.js +46 -22
- package/cjs/utils/helpers.js.map +7 -0
- package/cjs/utils/hooks/useKeyboardNavigation.js +59 -43
- package/cjs/utils/hooks/useKeyboardNavigation.js.map +7 -0
- package/cjs/utils/hooks/useTabsCallbacks.js +49 -33
- package/cjs/utils/hooks/useTabsCallbacks.js.map +7 -0
- package/esm/DSTabs.js +24 -25
- package/esm/DSTabs.js.map +7 -0
- package/esm/DSTabsCTX.js +22 -20
- package/esm/DSTabsCTX.js.map +7 -0
- package/esm/DSTabsDatatestid.js +13 -10
- package/esm/DSTabsDatatestid.js.map +7 -0
- package/esm/DSTabsTypes.js +2 -1
- package/esm/DSTabsTypes.js.map +7 -0
- package/esm/config/useCrossRef.js +6 -4
- package/esm/config/useCrossRef.js.map +7 -0
- package/esm/config/useTabs.js +14 -22
- package/esm/config/useTabs.js.map +7 -0
- package/esm/defaultProps.js +9 -8
- package/esm/defaultProps.js.map +7 -0
- package/esm/exportsRelated/DSTab.js +15 -19
- package/esm/exportsRelated/DSTab.js.map +7 -0
- package/esm/index.js +9 -4
- package/esm/index.js.map +7 -0
- package/esm/parts/carousel/Carousel.js +25 -38
- package/esm/parts/carousel/Carousel.js.map +7 -0
- package/esm/parts/carousel/styles.js +48 -52
- package/esm/parts/carousel/styles.js.map +7 -0
- package/esm/parts/carousel/useCarousel.js +15 -34
- package/esm/parts/carousel/useCarousel.js.map +7 -0
- package/esm/parts/carousel/useCarouselCallbacks.js +20 -28
- package/esm/parts/carousel/useCarouselCallbacks.js.map +7 -0
- package/esm/parts/tabBar/TabBar.js +93 -102
- package/esm/parts/tabBar/TabBar.js.map +7 -0
- package/esm/parts/tabBar/styles.js +262 -183
- package/esm/parts/tabBar/styles.js.map +7 -0
- package/esm/parts/tabBar/useTabBar.js +27 -36
- package/esm/parts/tabBar/useTabBar.js.map +7 -0
- package/esm/parts/tabsContent/TabsContent.js +19 -35
- package/esm/parts/tabsContent/TabsContent.js.map +7 -0
- package/esm/parts/tabsContent/styles.js +10 -7
- package/esm/parts/tabsContent/styles.js.map +7 -0
- package/esm/parts/tabsPanel/TabsPanels.js +28 -45
- package/esm/parts/tabsPanel/TabsPanels.js.map +7 -0
- package/esm/parts/tabsPanel/styles.js +14 -15
- package/esm/parts/tabsPanel/styles.js.map +7 -0
- package/esm/propTypes.js +25 -24
- package/esm/propTypes.js.map +7 -0
- package/esm/utils/constants.js +15 -8
- package/esm/utils/constants.js.map +7 -0
- package/esm/utils/helpers.js +16 -11
- package/esm/utils/helpers.js.map +7 -0
- package/esm/utils/hooks/useKeyboardNavigation.js +30 -39
- package/esm/utils/hooks/useKeyboardNavigation.js.map +7 -0
- package/esm/utils/hooks/useTabsCallbacks.js +18 -27
- package/esm/utils/hooks/useTabsCallbacks.js.map +7 -0
- package/package.json +6 -6
- package/types/DSTabs.d.ts +2 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useTabsCallbacks.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport type { UseTabsCallbacksReturnTypeT } from '../../DSTabsTypes';\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n const {\n setInternalActiveTab,\n tabsListRef,\n props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n } = useContext(DSTabsContext);\n\n const centerTabWhenTabChangeMobile = useCallback(\n (e?: React.MouseEvent) => {\n if (tabsListRef.current) {\n const { offsetLeft } = e?.target as HTMLButtonElement;\n const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n const { width: listWidth } = tabsListRef.current.getBoundingClientRect();\n const extraSideSpace = listWidth - tabWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n tabsListRef.current.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n\n e?.preventDefault();\n }\n },\n [tabsListRef],\n );\n\n const handleOnTabChange = useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTabWhenTabChangeMobile(e);\n }\n },\n [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab],\n );\n\n const handleOnMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const role = (e.target as HTMLElement).getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n },\n [allowTextSelection],\n );\n\n return {\n handleOnTabChange,\n handleOnMouseDown,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAGO,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB;AAAA,MACpD,WAAW;AAEf,QAAM,+BAA+B,YACnC,CAAC,MAAyB;AACxB,QAAI,YAAY,SAAS;AACvB,YAAM,EAAE,eAAe,GAAG;AAC1B,YAAM,EAAE,OAAO,aAAc,IAAG,QAA6B;AAC7D,YAAM,EAAE,OAAO,cAAc,YAAY,QAAQ;AACjD,YAAM,iBAAiB,YAAY;AACnC,YAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,YAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,kBAAY,QAAQ,SAAS;AAAA,QAC3B,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA;AAGZ,SAAG;AAAA;AAAA,KAGP,CAAC;AAGH,QAAM,oBAAoB,YACxB,CAAC,OAAe,MAAyB;AACvC,yBAAqB;AACrB,gBAAY,OAAO;AACnB,QAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,mCAA6B;AAAA;AAAA,KAGjC,CAAC,8BAA8B,kBAAkB,YAAY,aAAa;AAG5E,QAAM,oBAAoB,YACxB,CAAC,MAAwB;AACvB,UAAM,OAAQ,EAAE,OAAuB,aAAa;AACpD,QAAI,SAAS,cAAc;AAAoB,QAAE;AAAA,KAEnD,CAAC;AAGH,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-alpha.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -128,11 +128,11 @@
|
|
|
128
128
|
"build": "node ../../scripts/build/build.js"
|
|
129
129
|
},
|
|
130
130
|
"dependencies": {
|
|
131
|
-
"@elliemae/ds-button": "2.
|
|
132
|
-
"@elliemae/ds-icon": "2.
|
|
133
|
-
"@elliemae/ds-icons": "2.
|
|
134
|
-
"@elliemae/ds-props-helpers": "2.
|
|
135
|
-
"@elliemae/ds-system": "2.
|
|
131
|
+
"@elliemae/ds-button": "2.2.0-alpha.3",
|
|
132
|
+
"@elliemae/ds-icon": "2.2.0-alpha.3",
|
|
133
|
+
"@elliemae/ds-icons": "2.2.0-alpha.3",
|
|
134
|
+
"@elliemae/ds-props-helpers": "2.2.0-alpha.3",
|
|
135
|
+
"@elliemae/ds-system": "2.2.0-alpha.3",
|
|
136
136
|
"@react-hook/resize-observer": "~1.2.5",
|
|
137
137
|
"prop-types": "~15.7.2",
|
|
138
138
|
"react-desc": "~4.1.3",
|
package/types/DSTabs.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
import
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import type { DSTabsPropsT } from './DSTabsTypes';
|
|
4
4
|
declare const DSTabs: {
|
|
5
5
|
(props: DSTabsPropsT): JSX.Element;
|
|
6
|
-
propTypes: WeakValidationMap<unknown>;
|
|
6
|
+
propTypes: React.WeakValidationMap<unknown>;
|
|
7
7
|
};
|
|
8
8
|
declare const DSTabsWithSchema: {
|
|
9
9
|
(props?: DSTabsPropsT | undefined): JSX.Element;
|