@elliemae/ds-tabs 2.3.0-alpha.8 → 2.3.0-next.2
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/types/DSTabs.d.ts +14 -0
- package/types/DSTabsCTX.d.ts +4 -0
- package/types/DSTabsDatatestid.d.ts +12 -0
- package/types/DSTabsTypes.d.ts +205 -0
- package/types/config/useCrossRef.d.ts +2 -0
- package/types/config/useTabs.d.ts +2 -0
- package/types/defaultProps.d.ts +2 -0
- package/types/exportsRelated/DSTab.d.ts +14 -0
- package/types/index.d.ts +5 -0
- package/types/parts/carousel/Carousel.d.ts +3 -0
- package/types/parts/carousel/styles.d.ts +9 -0
- package/types/parts/carousel/useCarousel.d.ts +2 -0
- package/types/parts/carousel/useCarouselCallbacks.d.ts +2 -0
- package/types/parts/tabBar/TabBar.d.ts +2 -0
- package/types/parts/tabBar/styles.d.ts +7 -0
- package/types/parts/tabBar/useTabBar.d.ts +2 -0
- package/types/parts/tabsContent/TabsContent.d.ts +2 -0
- package/types/parts/tabsContent/styles.d.ts +1 -0
- package/types/parts/tabsPanel/TabsPanels.d.ts +2 -0
- package/types/parts/tabsPanel/styles.d.ts +2 -0
- package/types/propTypes.d.ts +54 -0
- package/types/tests/DSTabs.callbacks.test.d.ts +1 -0
- package/types/tests/DSTabs.func.test.d.ts +1 -0
- package/types/tests/DSTabs.keyboard.test.d.ts +1 -0
- package/types/tests/DSTabs.test.d.ts +1 -0
- package/types/utils/constants.d.ts +18 -0
- package/types/utils/helpers.d.ts +9 -0
- package/types/utils/hooks/useKeyboardNavigation.d.ts +2 -0
- package/types/utils/hooks/useTabsCallbacks.d.ts +2 -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
package/dist/esm/propTypes.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "react-desc";
|
|
3
|
-
import { TabTypesValuesAsArray } from "./utils/constants";
|
|
4
|
-
const tabPropTypes = {
|
|
5
|
-
tabId: PropTypes.string.description("Unique Tab id.").defaultValue(""),
|
|
6
|
-
title: PropTypes.string.description("Tab title.").defaultValue(""),
|
|
7
|
-
required: PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
|
|
8
|
-
disabled: PropTypes.bool.description("Disables Tab.").defaultValue(false)
|
|
9
|
-
};
|
|
10
|
-
const tabsPropTypes = {
|
|
11
|
-
animated: PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
|
|
12
|
-
enableMouseEvents: PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
|
|
13
|
-
allowTextSelection: PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
|
|
14
|
-
onTabChange: PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
|
|
15
|
-
type: PropTypes.oneOf(TabTypesValuesAsArray).description("Tab type.").defaultValue(TabTypesValuesAsArray[0]),
|
|
16
|
-
tabBarExtraContent: PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
|
|
17
|
-
onlyRenderActiveTab: PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
|
|
18
|
-
withCarousel: PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
|
|
19
|
-
activeTab: PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
|
|
20
|
-
children: PropTypes.node.description("Use DSTab component as children.").isRequired,
|
|
21
|
-
tabsListAriaLabel: PropTypes.string.description("Aria label for the list.").defaultValue("Tab list."),
|
|
22
|
-
containerProps: PropTypes.object.description("Additional properties for the container.").defaultValue({}),
|
|
23
|
-
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
|
|
24
|
-
};
|
|
25
|
-
export {
|
|
26
|
-
tabPropTypes,
|
|
27
|
-
tabsPropTypes
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { TabTypesValuesAsArray } from './utils/constants';\n\nexport const tabPropTypes = {\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,OAAO,YAAY,kBAAkB,aAAa;AAAA,EACnE,OAAO,UAAU,OAAO,YAAY,cAAc,aAAa;AAAA,EAC/D,UAAU,UAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,iBAAiB,aAAa;AAAA;AAG9D,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,qDAAqD,aAAa;AAAA,EACvG,mBAAmB,UAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EAC7G,oBAAoB,UAAU,KAC3B,YAAY,4DACZ,aAAa;AAAA,EAChB,aAAa,UAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EACvG,MAAM,UAAU,MAAM,uBAAuB,YAAY,aAAa,aAAa,sBAAsB;AAAA,EACzG,oBAAoB,UAAU,QAAQ,YAAY,sCAAsC,aAAa;AAAA,EACrG,qBAAqB,UAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EACxG,cAAc,UAAU,KAAK,YAAY,+BAA+B,aAAa;AAAA,EACrF,WAAW,UAAU,OAClB,YAAY,wDACZ,aAAa;AAAA,EAChB,UAAU,UAAU,KAAK,YAAY,oCAAoC;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,4BAA4B,aAAa;AAAA,EACzF,gBAAgB,UAAU,OAAO,YAAY,4CAA4C,aAAa;AAAA,EACtG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,SACjF,YAAY,yBACZ,aAAa;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const TabTypes = {
|
|
3
|
-
NORMAL: "normal",
|
|
4
|
-
NORMAL_SMALL: "normal_small",
|
|
5
|
-
SUBTABS: "subtabs"
|
|
6
|
-
};
|
|
7
|
-
const TabTypesValuesAsArray = Object.values(TabTypes);
|
|
8
|
-
const MOBILE_GRADIENT_WIDTH = 24;
|
|
9
|
-
const defaultIndicatorStyles = {
|
|
10
|
-
left: "0px",
|
|
11
|
-
width: "0px",
|
|
12
|
-
backgroundWithTransparent: ""
|
|
13
|
-
};
|
|
14
|
-
const gradientOffsetsAccordingType = {
|
|
15
|
-
normal_small: 14,
|
|
16
|
-
normal: 16,
|
|
17
|
-
subtabs: 16,
|
|
18
|
-
fixedTabsHeaders: 0
|
|
19
|
-
};
|
|
20
|
-
export {
|
|
21
|
-
MOBILE_GRADIENT_WIDTH,
|
|
22
|
-
TabTypes,
|
|
23
|
-
TabTypesValuesAsArray,
|
|
24
|
-
defaultIndicatorStyles,
|
|
25
|
-
gradientOffsetsAccordingType
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=constants.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TabTypes = {\n NORMAL: 'normal' as const,\n NORMAL_SMALL: 'normal_small' as const,\n SUBTABS: 'subtabs' as const,\n};\n\nexport const TabTypesValuesAsArray = Object.values(TabTypes);\n\nexport const MOBILE_GRADIENT_WIDTH = 24;\n\nexport const defaultIndicatorStyles = {\n left: '0px',\n width: '0px',\n backgroundWithTransparent: '',\n};\n\nexport const gradientOffsetsAccordingType = {\n normal_small: 14,\n normal: 16,\n subtabs: 16,\n fixedTabsHeaders: 0,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AAAA;AAGJ,MAAM,wBAAwB,OAAO,OAAO;AAE5C,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,2BAA2B;AAAA;AAGtB,MAAM,+BAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,kBAAkB;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';\nimport { MOBILE_GRADIENT_WIDTH } from './constants';\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n const tabDimensions = tab.getBoundingClientRect();\n const tabListDimensions = tabList.getBoundingClientRect();\n\n return tabDimensions.left <= tabListDimensions.left\n ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n tab: HTMLElement | null,\n tabContainer: HTMLDivElement | null,\n firstOrLastItem = true,\n): boolean => {\n if (tab && tabContainer) {\n const tabDimensions = tab.getBoundingClientRect();\n const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n const offset = firstOrLastItem ? 16 : 32;\n const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n }\n return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n if (listRef.current) {\n const { offsetLeft } = e?.target as HTMLButtonElement;\n const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n const { width: listWidth } = listRef.current.getBoundingClientRect();\n const extraSideSpace = listWidth - tabWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n listRef.current.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n\n e?.preventDefault();\n }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n const nodeDimensions = node.getBoundingClientRect();\n const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n ),\n height: Math.min(\n node.clientHeight,\n referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n ),\n };\n};\n\nexport const getIndexById = (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string): number =>\n children && children.findIndex((item: React.ReactElement<DSTabPropsWithDefaultT>) => item.props.tabId === activeId);\n\nexport const getIdByIndex = (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number): string =>\n (children && children[index].props.tabId) || '';\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AAEO,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI;AAC1B,QAAM,oBAAoB,QAAQ;AAElC,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AAAA;AAG9D,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI;AAC1B,UAAM,yBAAyB,aAAa;AAE5C,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO;AAC1D,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ;AAE5D,UAAM,6BAA6B,KAAK,MAAM,uBAAuB;AACrE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB;AAEtE,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA;AAElF,SAAO;AAAA;AAGF,MAAM,YAAY,CAAC,EAAE,GAAG,cAA+B;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,eAAe,GAAG;AAC1B,UAAM,EAAE,OAAO,aAAc,IAAG,QAA6B;AAC7D,UAAM,EAAE,OAAO,cAAc,QAAQ,QAAQ;AAC7C,UAAM,iBAAiB,YAAY;AACnC,UAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,UAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,YAAQ,QAAQ,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAGZ,OAAG;AAAA;AAAA;AAIA,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK;AAC5B,QAAM,0BAA0B,cAAc;AAE9C,SAAO;AAAA,IACL,OAAO,KAAK,IACV,KAAK,aACL,wBAAwB,OAAO,cAAc,cAAc,eAAe,MAC1E,KAAK,cAAe,yBAAwB,OAAO,eAAe;AAAA,IAEpE,QAAQ,KAAK,IACX,KAAK,cACL,wBAAwB,MAAM,cAAc,eAAe,eAAe,KAC1E,KAAK,eAAgB,yBAAwB,MAAM,eAAe;AAAA;AAAA;AAKjE,MAAM,eAAe,CAAC,UAAwD,aACnF,YAAY,SAAS,UAAU,CAAC,SAAqD,KAAK,MAAM,UAAU;AAErG,MAAM,eAAe,CAAC,UAAwD,UAClF,YAAY,SAAS,OAAO,MAAM,SAAU;AAExC,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,cAAc;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,eAAe,cAAe,eAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useCallback, useContext } from "react";
|
|
3
|
-
import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
|
|
4
|
-
const useKeyboardNavigation = () => {
|
|
5
|
-
const { focusableTabsRef } = useContext(DSTabsContext);
|
|
6
|
-
const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);
|
|
7
|
-
const handleOnKeyDown = useCallback((e) => {
|
|
8
|
-
if (e.key === "ArrowRight" && focusableTabsRef.current) {
|
|
9
|
-
e.preventDefault();
|
|
10
|
-
e.stopPropagation();
|
|
11
|
-
const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
|
|
12
|
-
if (nextTab)
|
|
13
|
-
nextTab.focus();
|
|
14
|
-
if (!nextTab)
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
if (e.key === "ArrowLeft" && focusableTabsRef.current) {
|
|
18
|
-
e.preventDefault();
|
|
19
|
-
e.stopPropagation();
|
|
20
|
-
const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
|
|
21
|
-
if (prevTab)
|
|
22
|
-
prevTab.focus();
|
|
23
|
-
if (!prevTab)
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
if (e.key === "ArrowDown") {
|
|
27
|
-
e.preventDefault();
|
|
28
|
-
e.stopPropagation();
|
|
29
|
-
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
30
|
-
if (canFocusCrossTabs)
|
|
31
|
-
firstSubtabInternalRef.current?.focus();
|
|
32
|
-
}
|
|
33
|
-
if (e.key === "ArrowUp") {
|
|
34
|
-
e.preventDefault();
|
|
35
|
-
e.stopPropagation();
|
|
36
|
-
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
37
|
-
if (canFocusCrossTabs)
|
|
38
|
-
lastTabInternalRef.current?.focus();
|
|
39
|
-
}
|
|
40
|
-
}, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
|
|
41
|
-
return {
|
|
42
|
-
handleOnKeyDown
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
export {
|
|
46
|
-
useKeyboardNavigation
|
|
47
|
-
};
|
|
48
|
-
//# sourceMappingURL=useKeyboardNavigation.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useKeyboardNavigation.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport type { UseKeyboardNavigationReturnTypeT } from '../../DSTabsTypes';\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n const { focusableTabsRef } = useContext(DSTabsContext);\n const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n e.preventDefault();\n e.stopPropagation();\n const nextTab =\n focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n if (nextTab) nextTab.focus();\n if (!nextTab) return;\n }\n\n if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n e.preventDefault();\n e.stopPropagation();\n const prevTab =\n focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n if (prevTab) prevTab.focus();\n if (!prevTab) return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n }\n },\n [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n );\n\n return {\n handleOnKeyDown,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AAGO,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,qBAAqB,WAAW;AACxC,QAAM,EAAE,wBAAwB,uBAAuB,WAAW;AAElE,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,+BAAuB,SAAS;AAAA;AAGzD,QAAI,EAAE,QAAQ,WAAW;AACvB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,2BAAmB,SAAS;AAAA;AAAA,KAGvD,CAAC,wBAAwB,oBAAoB;AAG/C,SAAO;AAAA,IACL;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useCallback, useContext } from "react";
|
|
3
|
-
import { centerTab } from "../helpers";
|
|
4
|
-
import { DSTabsContext } from "../../DSTabsCTX";
|
|
5
|
-
const useTabsCallbacks = () => {
|
|
6
|
-
const {
|
|
7
|
-
setInternalActiveTab,
|
|
8
|
-
tabsListRef,
|
|
9
|
-
props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders }
|
|
10
|
-
} = useContext(DSTabsContext);
|
|
11
|
-
const handleOnTabChange = useCallback((tabId, e) => {
|
|
12
|
-
setInternalActiveTab(tabId);
|
|
13
|
-
onTabChange(tabId, e);
|
|
14
|
-
if (isDSMobile && !fixedTabsHeaders && e) {
|
|
15
|
-
centerTab({ e, listRef: tabsListRef });
|
|
16
|
-
}
|
|
17
|
-
}, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
|
|
18
|
-
const handleOnMouseDown = useCallback((e) => {
|
|
19
|
-
const role = e.target.getAttribute("role");
|
|
20
|
-
if (role !== "tabpanel" && allowTextSelection)
|
|
21
|
-
e.stopPropagation();
|
|
22
|
-
}, [allowTextSelection]);
|
|
23
|
-
return {
|
|
24
|
-
handleOnTabChange,
|
|
25
|
-
handleOnMouseDown
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
export {
|
|
29
|
-
useTabsCallbacks
|
|
30
|
-
};
|
|
31
|
-
//# sourceMappingURL=useTabsCallbacks.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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 { centerTab } from '../helpers';\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 handleOnTabChange = useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTab({ e, listRef: tabsListRef });\n }\n },\n [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\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;AACA;AAGO,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB;AAAA,MACpD,WAAW;AAEf,QAAM,oBAAoB,YACxB,CAAC,OAAe,MAAyB;AACvC,yBAAqB;AACrB,gBAAY,OAAO;AACnB,QAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,gBAAU,EAAE,GAAG,SAAS;AAAA;AAAA,KAG5B,CAAC,kBAAkB,YAAY,aAAa,sBAAsB;AAGpE,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
|
-
}
|