@elliemae/ds-tabs 2.3.0-next.13 → 2.3.0-next.17
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/DSTabsCTX.js +2 -2
- package/cjs/config/useTabs.js +2 -2
- package/cjs/{exportsRelated → exported-related}/DSTab.js +0 -0
- package/cjs/index.js +1 -1
- package/cjs/propTypes.js +19 -0
- package/cjs/sharedTypes.js +7 -0
- package/esm/DSTabsCTX.js +1 -1
- package/esm/config/useTabs.js +1 -1
- package/esm/{exportsRelated → exported-related}/DSTab.js +0 -0
- package/esm/index.js +1 -1
- package/esm/propTypes.js +20 -2
- package/esm/sharedTypes.js +5 -0
- package/package.json +13 -17
- package/types/DSTabs.d.ts +3 -3
- package/types/DSTabsCTX.d.ts +3 -3
- package/types/config/useCrossRef.d.ts +2 -2
- package/types/config/useTabs.d.ts +3 -2
- package/types/{exportsRelated → exported-related}/DSTab.d.ts +3 -3
- package/types/index.d.ts +2 -2
- package/types/parts/carousel/Carousel.d.ts +5 -1
- package/types/parts/carousel/styles.d.ts +7 -2
- package/types/parts/carousel/useCarousel.d.ts +13 -1
- package/types/parts/carousel/useCarouselCallbacks.d.ts +13 -1
- package/types/parts/tabBar/styles.d.ts +30 -1
- package/types/parts/tabBar/useTabBar.d.ts +10 -1
- package/types/parts/tabsPanel/styles.d.ts +5 -1
- package/types/propTypes.d.ts +49 -0
- package/types/sharedTypes.d.ts +34 -0
- package/types/utils/helpers.d.ts +10 -1
- package/types/utils/hooks/useKeyboardNavigation.d.ts +5 -1
- package/types/utils/hooks/useTabsCallbacks.d.ts +6 -1
- package/cjs/DSTabsTypes.js +0 -2
- package/cjs/defaultProps.js +0 -27
- package/esm/DSTabsTypes.js +0 -1
- package/esm/defaultProps.js +0 -23
- package/types/DSTabsTypes.d.ts +0 -205
- package/types/defaultProps.d.ts +0 -2
package/cjs/DSTabsCTX.js
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var propTypes = require('./propTypes.js');
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
9
9
|
const noop = () => {};
|
|
10
10
|
|
|
11
11
|
const defaultContext = {
|
|
12
|
-
props:
|
|
12
|
+
props: propTypes.tabsDefaultProps,
|
|
13
13
|
tabsRef: /*#__PURE__*/React.createRef(),
|
|
14
14
|
tabsListRef: /*#__PURE__*/React.createRef(),
|
|
15
15
|
carouselOnlyListRef: /*#__PURE__*/React.createRef(),
|
package/cjs/config/useTabs.js
CHANGED
|
@@ -8,10 +8,10 @@ require('core-js/modules/esnext.iterator.constructor.js');
|
|
|
8
8
|
require('core-js/modules/esnext.iterator.find.js');
|
|
9
9
|
var React = require('react');
|
|
10
10
|
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
11
|
-
var
|
|
11
|
+
var propTypes = require('../propTypes.js');
|
|
12
12
|
|
|
13
13
|
const useTabs = props => {
|
|
14
|
-
const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props,
|
|
14
|
+
const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props, propTypes.tabsDefaultProps);
|
|
15
15
|
const {
|
|
16
16
|
activeTab
|
|
17
17
|
} = propsWithDefaults;
|
|
File without changes
|
package/cjs/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var DSTab = require('./
|
|
5
|
+
var DSTab = require('./exported-related/DSTab.js');
|
|
6
6
|
var DSTabs = require('./DSTabs.js');
|
|
7
7
|
var constants = require('./utils/constants.js');
|
|
8
8
|
var DSTabsDatatestid = require('./DSTabsDatatestid.js');
|
package/cjs/propTypes.js
CHANGED
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
6
|
var constants = require('./utils/constants.js');
|
|
7
7
|
|
|
8
|
+
const noop = () => {};
|
|
9
|
+
|
|
8
10
|
const tabPropTypes = {
|
|
9
11
|
tabId: reactDesc.PropTypes.string.description('Unique Tab id.').defaultValue(''),
|
|
10
12
|
title: reactDesc.PropTypes.string.description('Tab title.').defaultValue(''),
|
|
@@ -28,6 +30,23 @@ const tabsPropTypes = {
|
|
|
28
30
|
current: reactDesc.PropTypes.any
|
|
29
31
|
})]).description('Ref to the container.').defaultValue(undefined)
|
|
30
32
|
};
|
|
33
|
+
const tabsDefaultProps = {
|
|
34
|
+
containerProps: {},
|
|
35
|
+
animated: true,
|
|
36
|
+
enableMouseEvents: false,
|
|
37
|
+
allowTextSelection: false,
|
|
38
|
+
onTabChange: noop,
|
|
39
|
+
tabsListAriaLabel: 'Tab list',
|
|
40
|
+
type: constants.TabTypes.NORMAL,
|
|
41
|
+
onlyRenderActiveTab: false,
|
|
42
|
+
withCarousel: false,
|
|
43
|
+
isDSMobile: false,
|
|
44
|
+
showSelectionIndicator: true,
|
|
45
|
+
children: [],
|
|
46
|
+
fixedTabsHeaders: false,
|
|
47
|
+
showSeparator: true
|
|
48
|
+
};
|
|
31
49
|
|
|
32
50
|
exports.tabPropTypes = tabPropTypes;
|
|
51
|
+
exports.tabsDefaultProps = tabsDefaultProps;
|
|
33
52
|
exports.tabsPropTypes = tabsPropTypes;
|
package/esm/DSTabsCTX.js
CHANGED
package/esm/config/useTabs.js
CHANGED
|
@@ -4,7 +4,7 @@ import 'core-js/modules/esnext.iterator.constructor.js';
|
|
|
4
4
|
import 'core-js/modules/esnext.iterator.find.js';
|
|
5
5
|
import { useRef, useState, useMemo, useEffect } from 'react';
|
|
6
6
|
import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
|
|
7
|
-
import { tabsDefaultProps } from '../
|
|
7
|
+
import { tabsDefaultProps } from '../propTypes.js';
|
|
8
8
|
|
|
9
9
|
const useTabs = props => {
|
|
10
10
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
|
|
File without changes
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { DSTab, DSTabWithSchema } from './
|
|
1
|
+
export { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';
|
|
2
2
|
export { DSTabs, DSTabsWithSchema } from './DSTabs.js';
|
|
3
3
|
export { TabTypes } from './utils/constants.js';
|
|
4
4
|
export { DSTabsDatatestid } from './DSTabsDatatestid.js';
|
package/esm/propTypes.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { PropTypes } from 'react-desc';
|
|
2
|
-
import { TabTypesValuesAsArray } from './utils/constants.js';
|
|
2
|
+
import { TabTypesValuesAsArray, TabTypes } from './utils/constants.js';
|
|
3
|
+
|
|
4
|
+
const noop = () => {};
|
|
3
5
|
|
|
4
6
|
const tabPropTypes = {
|
|
5
7
|
tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),
|
|
@@ -24,5 +26,21 @@ const tabsPropTypes = {
|
|
|
24
26
|
current: PropTypes.any
|
|
25
27
|
})]).description('Ref to the container.').defaultValue(undefined)
|
|
26
28
|
};
|
|
29
|
+
const tabsDefaultProps = {
|
|
30
|
+
containerProps: {},
|
|
31
|
+
animated: true,
|
|
32
|
+
enableMouseEvents: false,
|
|
33
|
+
allowTextSelection: false,
|
|
34
|
+
onTabChange: noop,
|
|
35
|
+
tabsListAriaLabel: 'Tab list',
|
|
36
|
+
type: TabTypes.NORMAL,
|
|
37
|
+
onlyRenderActiveTab: false,
|
|
38
|
+
withCarousel: false,
|
|
39
|
+
isDSMobile: false,
|
|
40
|
+
showSelectionIndicator: true,
|
|
41
|
+
children: [],
|
|
42
|
+
fixedTabsHeaders: false,
|
|
43
|
+
showSeparator: true
|
|
44
|
+
};
|
|
27
45
|
|
|
28
|
-
export { tabPropTypes, tabsPropTypes };
|
|
46
|
+
export { tabPropTypes, tabsDefaultProps, tabsPropTypes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "2.3.0-next.
|
|
3
|
+
"version": "2.3.0-next.17",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -27,6 +27,10 @@
|
|
|
27
27
|
"import": "./esm/utils/constants.js",
|
|
28
28
|
"require": "./cjs/utils/constants.js"
|
|
29
29
|
},
|
|
30
|
+
"./sharedTypes": {
|
|
31
|
+
"import": "./esm/sharedTypes.js",
|
|
32
|
+
"require": "./cjs/sharedTypes.js"
|
|
33
|
+
},
|
|
30
34
|
"./propTypes": {
|
|
31
35
|
"import": "./esm/propTypes.js",
|
|
32
36
|
"require": "./cjs/propTypes.js"
|
|
@@ -75,13 +79,9 @@
|
|
|
75
79
|
"import": "./esm/parts/carousel/Carousel.js",
|
|
76
80
|
"require": "./cjs/parts/carousel/Carousel.js"
|
|
77
81
|
},
|
|
78
|
-
"./
|
|
79
|
-
"import": "./esm/
|
|
80
|
-
"require": "./cjs/
|
|
81
|
-
},
|
|
82
|
-
"./DSTabsTypes": {
|
|
83
|
-
"import": "./esm/DSTabsTypes.js",
|
|
84
|
-
"require": "./cjs/DSTabsTypes.js"
|
|
82
|
+
"./exported-related/DSTab": {
|
|
83
|
+
"import": "./esm/exported-related/DSTab.js",
|
|
84
|
+
"require": "./cjs/exported-related/DSTab.js"
|
|
85
85
|
},
|
|
86
86
|
"./DSTabsDatatestid": {
|
|
87
87
|
"import": "./esm/DSTabsDatatestid.js",
|
|
@@ -95,10 +95,6 @@
|
|
|
95
95
|
"import": "./esm/DSTabs.js",
|
|
96
96
|
"require": "./cjs/DSTabs.js"
|
|
97
97
|
},
|
|
98
|
-
"./defaultProps": {
|
|
99
|
-
"import": "./esm/defaultProps.js",
|
|
100
|
-
"require": "./cjs/defaultProps.js"
|
|
101
|
-
},
|
|
102
98
|
"./config/useTabs": {
|
|
103
99
|
"import": "./esm/config/useTabs.js",
|
|
104
100
|
"require": "./cjs/config/useTabs.js"
|
|
@@ -128,11 +124,11 @@
|
|
|
128
124
|
"build": "node ../../scripts/build/build.js"
|
|
129
125
|
},
|
|
130
126
|
"dependencies": {
|
|
131
|
-
"@elliemae/ds-button": "2.3.0-next.
|
|
132
|
-
"@elliemae/ds-icon": "2.3.0-next.
|
|
133
|
-
"@elliemae/ds-icons": "2.3.0-next.
|
|
134
|
-
"@elliemae/ds-props-helpers": "2.3.0-next.
|
|
135
|
-
"@elliemae/ds-system": "2.3.0-next.
|
|
127
|
+
"@elliemae/ds-button": "2.3.0-next.17",
|
|
128
|
+
"@elliemae/ds-icon": "2.3.0-next.17",
|
|
129
|
+
"@elliemae/ds-icons": "2.3.0-next.17",
|
|
130
|
+
"@elliemae/ds-props-helpers": "2.3.0-next.17",
|
|
131
|
+
"@elliemae/ds-system": "2.3.0-next.17",
|
|
136
132
|
"@react-hook/resize-observer": "~1.2.5",
|
|
137
133
|
"prop-types": "~15.7.2",
|
|
138
134
|
"react-desc": "~4.1.3",
|
package/types/DSTabs.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
2
|
import type { WeakValidationMap } from 'react';
|
|
3
|
-
import type {
|
|
3
|
+
import type { DSTabsT } from './propTypes';
|
|
4
4
|
declare const DSTabs: {
|
|
5
|
-
(props:
|
|
5
|
+
(props: DSTabsT.Props): JSX.Element;
|
|
6
6
|
propTypes: WeakValidationMap<unknown>;
|
|
7
7
|
};
|
|
8
8
|
declare const DSTabsWithSchema: {
|
|
9
|
-
(props?:
|
|
9
|
+
(props?: DSTabsT.Props | undefined): JSX.Element;
|
|
10
10
|
propTypes: unknown;
|
|
11
11
|
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
12
12
|
};
|
package/types/DSTabsCTX.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type {
|
|
3
|
-
export declare const DSTabsContext: import("react").Context<DSTabsUseTabsContextT>;
|
|
4
|
-
export declare const DSTabsCrossRefContext: import("react").Context<DSTabsUseCrossRefContextT>;
|
|
2
|
+
import type { DSTabsInternalsT } from './sharedTypes';
|
|
3
|
+
export declare const DSTabsContext: import("react").Context<DSTabsInternalsT.DSTabsUseTabsContextT>;
|
|
4
|
+
export declare const DSTabsCrossRefContext: import("react").Context<DSTabsInternalsT.DSTabsUseCrossRefContextT>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare const useCrossRef: () => DSTabsUseCrossRefContextT;
|
|
1
|
+
import type { DSTabsInternalsT } from '../sharedTypes';
|
|
2
|
+
export declare const useCrossRef: () => DSTabsInternalsT.DSTabsUseCrossRefContextT;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { DSTabsT } from '../propTypes';
|
|
2
|
+
import type { DSTabsInternalsT } from '../sharedTypes';
|
|
3
|
+
export declare const useTabs: (props: DSTabsT.Props) => DSTabsInternalsT.DSTabsUseTabsContextT;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type {
|
|
3
|
+
import type { DSTabT } from '../propTypes';
|
|
4
4
|
declare const DSTab: {
|
|
5
|
-
(props:
|
|
5
|
+
(props: DSTabT.Props): JSX.Element;
|
|
6
6
|
propTypes: React.WeakValidationMap<unknown>;
|
|
7
7
|
};
|
|
8
8
|
declare const DSTabWithSchema: {
|
|
9
|
-
(props?:
|
|
9
|
+
(props?: DSTabT.Props | undefined): JSX.Element;
|
|
10
10
|
propTypes: unknown;
|
|
11
11
|
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
12
12
|
};
|
package/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './exported-related/DSTab';
|
|
2
2
|
export * from './DSTabs';
|
|
3
3
|
export { TabTypes } from './utils/constants';
|
|
4
4
|
export * from './DSTabsDatatestid';
|
|
5
|
-
export type {
|
|
5
|
+
export type { DSTabT, DSTabsT } from './propTypes';
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
interface CarouselPropsT {
|
|
3
|
+
children: React.ReactNode[];
|
|
4
|
+
updateIndicatorStyle?: () => void;
|
|
5
|
+
}
|
|
3
6
|
export declare const Carousel: ({ children, updateIndicatorStyle }: CarouselPropsT) => JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type {
|
|
3
|
-
|
|
2
|
+
import type { DSTabsInternalsT } from '../../sharedTypes';
|
|
3
|
+
interface StyledCarouselButtonWrapperPropsT {
|
|
4
|
+
right?: boolean;
|
|
5
|
+
tabType: DSTabsInternalsT.TabTypesT;
|
|
6
|
+
}
|
|
7
|
+
export declare const StyledCarouselBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
8
|
export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
5
9
|
export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
10
|
export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledCarouselButtonWrapperPropsT, never>;
|
|
11
|
+
export {};
|
|
@@ -1,2 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { DSTabsInternalsT } from '../../sharedTypes';
|
|
3
|
+
interface UseCarouselPropsT {
|
|
4
|
+
updateIndicatorStyle?: () => void;
|
|
5
|
+
}
|
|
6
|
+
interface UseCarouselReturnTypeT {
|
|
7
|
+
showChevrons: DSTabsInternalsT.ShowChevronsT;
|
|
8
|
+
leftButtonOnClick: () => void;
|
|
9
|
+
rightButtonOnClick: () => void;
|
|
10
|
+
handleOnClick: (e: React.MouseEvent) => void;
|
|
11
|
+
handleOnScroll: (e: React.UIEvent) => void;
|
|
12
|
+
}
|
|
2
13
|
export declare const useCarousel: ({ updateIndicatorStyle }: UseCarouselPropsT) => UseCarouselReturnTypeT;
|
|
14
|
+
export {};
|
|
@@ -1,2 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface UseCarouselCallbacksPropsT {
|
|
3
|
+
getVisibleItemsOffset: () => number;
|
|
4
|
+
recalcChevrons: () => void;
|
|
5
|
+
updateIndicatorStyle?: () => void;
|
|
6
|
+
}
|
|
7
|
+
interface UseCarouselCallbacksReturnTypeT {
|
|
8
|
+
leftButtonOnClick: () => void;
|
|
9
|
+
rightButtonOnClick: () => void;
|
|
10
|
+
handleOnClick: (e: React.MouseEvent) => void;
|
|
11
|
+
handleOnScroll: (e: React.UIEvent) => void;
|
|
12
|
+
}
|
|
2
13
|
export declare const useCarouselCallbacks: ({ getVisibleItemsOffset, updateIndicatorStyle, recalcChevrons, }: UseCarouselCallbacksPropsT) => UseCarouselCallbacksReturnTypeT;
|
|
14
|
+
export {};
|
|
@@ -1,7 +1,36 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DSTabsInternalsT } from '../../sharedTypes';
|
|
2
|
+
interface StyledSelectionIndicatoPropsT {
|
|
3
|
+
isDSMobile: boolean;
|
|
4
|
+
tabType: DSTabsInternalsT.TabTypesT;
|
|
5
|
+
}
|
|
6
|
+
interface StyledSubTabsListPropsT {
|
|
7
|
+
withCarousel: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface StyledTabButtonPropsT {
|
|
10
|
+
isActive: boolean;
|
|
11
|
+
disabled: boolean;
|
|
12
|
+
showSeparator: boolean;
|
|
13
|
+
isDSMobile: boolean;
|
|
14
|
+
fixedTabsHeaders: boolean;
|
|
15
|
+
withCarousel: boolean;
|
|
16
|
+
tabType: DSTabsInternalsT.TabTypesT;
|
|
17
|
+
}
|
|
18
|
+
interface StyledTabListPropsT {
|
|
19
|
+
withCarousel: boolean;
|
|
20
|
+
isDSMobile: boolean;
|
|
21
|
+
fixedTabsHeaders: boolean;
|
|
22
|
+
mobileGradients: DSTabsInternalsT.MobileGradientsT;
|
|
23
|
+
indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
|
|
24
|
+
tabType: DSTabsInternalsT.TabTypesT;
|
|
25
|
+
}
|
|
26
|
+
interface StyledTabWrapperPropsT {
|
|
27
|
+
isDSMobile: boolean;
|
|
28
|
+
fixedTabsHeaders: boolean;
|
|
29
|
+
}
|
|
2
30
|
export declare const StyledSelectionIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledSelectionIndicatoPropsT, never>;
|
|
3
31
|
export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTabWrapperPropsT, never>;
|
|
4
32
|
export declare const StyledTabButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledTabButtonPropsT, never>;
|
|
5
33
|
export declare const StyledSubTabsList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledSubTabsListPropsT, never>;
|
|
6
34
|
export declare const StyledTabList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTabListPropsT, never>;
|
|
7
35
|
export declare const StyledRequiredMark: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
36
|
+
export {};
|
|
@@ -1,2 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { DSTabsInternalsT } from '../../sharedTypes';
|
|
3
|
+
interface UseTabBarReturnTypeT {
|
|
4
|
+
updateIndicatorStyle: () => void;
|
|
5
|
+
updateMobileGradients: () => void;
|
|
6
|
+
setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;
|
|
7
|
+
indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
|
|
8
|
+
mobileGradients: DSTabsInternalsT.MobileGradientsT;
|
|
9
|
+
}
|
|
2
10
|
export declare const useTabBar: () => UseTabBarReturnTypeT;
|
|
11
|
+
export {};
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
interface StyledPanelContainerPropsT {
|
|
2
|
+
hidden: boolean;
|
|
3
|
+
isDSMobile: boolean;
|
|
4
|
+
}
|
|
2
5
|
export declare const StyledPanelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledPanelContainerPropsT, never>;
|
|
6
|
+
export {};
|
package/types/propTypes.d.ts
CHANGED
|
@@ -1,4 +1,52 @@
|
|
|
1
1
|
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import type { DSTabsInternalsT } from './sharedTypes';
|
|
4
|
+
export declare namespace DSTabT {
|
|
5
|
+
interface PropsOptional {
|
|
6
|
+
style?: Record<string, unknown>;
|
|
7
|
+
title?: string;
|
|
8
|
+
required?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
ref?: React.MutableRefObject<HTMLButtonElement>;
|
|
11
|
+
onClick?: (tabId: string, e: React.MouseEvent) => null | void;
|
|
12
|
+
onKeyDown?: (e: React.KeyboardEvent) => null | void;
|
|
13
|
+
}
|
|
14
|
+
interface PropsRequired {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
tabId: string;
|
|
17
|
+
}
|
|
18
|
+
interface Props extends PropsOptional, PropsRequired {
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
export declare namespace DSTabsT {
|
|
22
|
+
interface DefaultProps {
|
|
23
|
+
containerProps: Record<string, unknown>;
|
|
24
|
+
animated: boolean;
|
|
25
|
+
enableMouseEvents: boolean;
|
|
26
|
+
allowTextSelection: boolean;
|
|
27
|
+
onTabChange: (tabId: string, e?: React.MouseEvent) => void;
|
|
28
|
+
tabsListAriaLabel: string;
|
|
29
|
+
type: DSTabsInternalsT.TabTypesT;
|
|
30
|
+
children: React.ReactElement<DSTabT.Props>[];
|
|
31
|
+
onlyRenderActiveTab: boolean;
|
|
32
|
+
fixedTabsHeaders: boolean;
|
|
33
|
+
withCarousel: boolean;
|
|
34
|
+
isDSMobile: boolean;
|
|
35
|
+
showSelectionIndicator: boolean;
|
|
36
|
+
showSeparator: boolean;
|
|
37
|
+
}
|
|
38
|
+
interface PropsOptional {
|
|
39
|
+
firstSubtabRef?: React.MutableRefObject<HTMLElement>;
|
|
40
|
+
lastTabRef?: React.MutableRefObject<HTMLElement>;
|
|
41
|
+
tabBarExtraContent?: React.ReactNode;
|
|
42
|
+
activeTab?: string;
|
|
43
|
+
innerRef?: React.MutableRefObject<HTMLDivElement>;
|
|
44
|
+
}
|
|
45
|
+
interface Props extends Partial<DefaultProps>, PropsOptional {
|
|
46
|
+
}
|
|
47
|
+
interface InternalProps extends DefaultProps, PropsOptional {
|
|
48
|
+
}
|
|
49
|
+
}
|
|
2
50
|
export declare const tabPropTypes: {
|
|
3
51
|
tabId: {
|
|
4
52
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
@@ -52,3 +100,4 @@ export declare const tabsPropTypes: {
|
|
|
52
100
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
53
101
|
};
|
|
54
102
|
};
|
|
103
|
+
export declare const tabsDefaultProps: DSTabsT.DefaultProps;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TabTypes } from './utils/constants';
|
|
3
|
+
import type { DSTabsT } from './propTypes';
|
|
4
|
+
export declare namespace DSTabsInternalsT {
|
|
5
|
+
type TabTypesT = typeof TabTypes[keyof typeof TabTypes];
|
|
6
|
+
interface MobileGradientsT {
|
|
7
|
+
right: boolean;
|
|
8
|
+
left: boolean;
|
|
9
|
+
}
|
|
10
|
+
interface IndicatorStyleT {
|
|
11
|
+
left: string;
|
|
12
|
+
width: string;
|
|
13
|
+
backgroundWithTransparent: string;
|
|
14
|
+
}
|
|
15
|
+
interface ShowChevronsT {
|
|
16
|
+
right: boolean;
|
|
17
|
+
left: boolean;
|
|
18
|
+
}
|
|
19
|
+
interface DSTabsUseTabsContextT {
|
|
20
|
+
props: DSTabsT.InternalProps;
|
|
21
|
+
tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;
|
|
22
|
+
focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;
|
|
23
|
+
tabsListRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
24
|
+
tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;
|
|
25
|
+
actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
26
|
+
carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
27
|
+
setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;
|
|
28
|
+
actualActiveTab: string;
|
|
29
|
+
}
|
|
30
|
+
interface DSTabsUseCrossRefContextT {
|
|
31
|
+
lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
|
|
32
|
+
firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
|
|
33
|
+
}
|
|
34
|
+
}
|
package/types/utils/helpers.d.ts
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface VisibleDimensionsT {
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
}
|
|
6
|
+
interface CenterTabPropsT {
|
|
7
|
+
e?: React.MouseEvent | React.FocusEvent;
|
|
8
|
+
listRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
9
|
+
}
|
|
2
10
|
export declare const isElementVisible: (tab: HTMLElement, tabList: HTMLElement) => boolean;
|
|
3
11
|
export declare const isElementVisibleCarousel: (tab: HTMLElement | null, tabContainer: HTMLDivElement | null, firstOrLastItem?: boolean) => boolean;
|
|
4
12
|
export declare const centerTab: ({ e, listRef }: CenterTabPropsT) => void;
|
|
5
13
|
export declare const getVisibleDimensions: (node: HTMLElement, referenceNode: HTMLElement) => VisibleDimensionsT;
|
|
6
14
|
export declare const shouldHaveLeftGradient: (scrollLeft: number) => boolean;
|
|
7
15
|
export declare const shouldHaveRightGradient: (scrollLeft: number, clientWidth: number, scrollWidth: number) => boolean;
|
|
16
|
+
export {};
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface UseKeyboardNavigationReturnTypeT {
|
|
3
|
+
handleOnKeyDown: (e: React.KeyboardEvent) => void;
|
|
4
|
+
}
|
|
2
5
|
export declare const useKeyboardNavigation: () => UseKeyboardNavigationReturnTypeT;
|
|
6
|
+
export {};
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface UseTabsCallbacksReturnTypeT {
|
|
3
|
+
handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;
|
|
4
|
+
handleOnMouseDown: (e: React.MouseEvent) => void;
|
|
5
|
+
}
|
|
2
6
|
export declare const useTabsCallbacks: () => UseTabsCallbacksReturnTypeT;
|
|
7
|
+
export {};
|
package/cjs/DSTabsTypes.js
DELETED
package/cjs/defaultProps.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var constants = require('./utils/constants.js');
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
8
|
-
const noop = () => {};
|
|
9
|
-
|
|
10
|
-
const tabsDefaultProps = {
|
|
11
|
-
containerProps: {},
|
|
12
|
-
animated: true,
|
|
13
|
-
enableMouseEvents: false,
|
|
14
|
-
allowTextSelection: false,
|
|
15
|
-
onTabChange: noop,
|
|
16
|
-
tabsListAriaLabel: 'Tab list',
|
|
17
|
-
type: constants.TabTypes.NORMAL,
|
|
18
|
-
onlyRenderActiveTab: false,
|
|
19
|
-
withCarousel: false,
|
|
20
|
-
isDSMobile: false,
|
|
21
|
-
showSelectionIndicator: true,
|
|
22
|
-
children: [],
|
|
23
|
-
fixedTabsHeaders: false,
|
|
24
|
-
showSeparator: true
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
exports.tabsDefaultProps = tabsDefaultProps;
|
package/esm/DSTabsTypes.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/esm/defaultProps.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { TabTypes } from './utils/constants.js';
|
|
2
|
-
|
|
3
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4
|
-
const noop = () => {};
|
|
5
|
-
|
|
6
|
-
const tabsDefaultProps = {
|
|
7
|
-
containerProps: {},
|
|
8
|
-
animated: true,
|
|
9
|
-
enableMouseEvents: false,
|
|
10
|
-
allowTextSelection: false,
|
|
11
|
-
onTabChange: noop,
|
|
12
|
-
tabsListAriaLabel: 'Tab list',
|
|
13
|
-
type: TabTypes.NORMAL,
|
|
14
|
-
onlyRenderActiveTab: false,
|
|
15
|
-
withCarousel: false,
|
|
16
|
-
isDSMobile: false,
|
|
17
|
-
showSelectionIndicator: true,
|
|
18
|
-
children: [],
|
|
19
|
-
fixedTabsHeaders: false,
|
|
20
|
-
showSeparator: true
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export { tabsDefaultProps };
|
package/types/DSTabsTypes.d.ts
DELETED
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import { TabTypes } from './utils/constants';
|
|
3
|
-
declare type TabTypesT = typeof TabTypes[keyof typeof TabTypes];
|
|
4
|
-
export interface DSTabsPropsT {
|
|
5
|
-
containerProps?: Record<string, unknown>;
|
|
6
|
-
innerRef?: React.MutableRefObject<HTMLDivElement>;
|
|
7
|
-
animated?: boolean;
|
|
8
|
-
enableMouseEvents?: boolean;
|
|
9
|
-
allowTextSelection?: boolean;
|
|
10
|
-
onTabChange?: (tabId: string, e?: React.MouseEvent) => void;
|
|
11
|
-
tabsListAriaLabel?: string;
|
|
12
|
-
type?: TabTypesT;
|
|
13
|
-
tabBarExtraContent?: React.ReactNode;
|
|
14
|
-
children: React.ReactElement<DSTabPropsWithDefaultT>[];
|
|
15
|
-
onlyRenderActiveTab?: boolean;
|
|
16
|
-
activeTab?: string;
|
|
17
|
-
withCarousel?: boolean;
|
|
18
|
-
firstSubtabRef?: React.MutableRefObject<HTMLElement>;
|
|
19
|
-
lastTabRef?: React.MutableRefObject<HTMLElement>;
|
|
20
|
-
fixedTabsHeaders?: boolean;
|
|
21
|
-
isDSMobile?: boolean;
|
|
22
|
-
showSelectionIndicator?: boolean;
|
|
23
|
-
showSeparator?: boolean;
|
|
24
|
-
}
|
|
25
|
-
export interface DSTabsPropsWithDefaultsT {
|
|
26
|
-
containerProps: Record<string, unknown>;
|
|
27
|
-
innerRef?: React.MutableRefObject<HTMLDivElement>;
|
|
28
|
-
animated: boolean;
|
|
29
|
-
enableMouseEvents: boolean;
|
|
30
|
-
allowTextSelection: boolean;
|
|
31
|
-
onTabChange: (tabId: string, e?: React.MouseEvent) => void;
|
|
32
|
-
tabsListAriaLabel: string;
|
|
33
|
-
type: TabTypesT;
|
|
34
|
-
tabBarExtraContent?: React.ReactNode;
|
|
35
|
-
children: React.ReactElement<DSTabPropsWithDefaultT>[];
|
|
36
|
-
onlyRenderActiveTab: boolean;
|
|
37
|
-
activeTab?: string;
|
|
38
|
-
withCarousel: boolean;
|
|
39
|
-
firstSubtabRef?: React.MutableRefObject<HTMLElement>;
|
|
40
|
-
lastTabRef?: React.MutableRefObject<HTMLElement>;
|
|
41
|
-
fixedTabsHeaders: boolean;
|
|
42
|
-
isDSMobile: boolean;
|
|
43
|
-
showSelectionIndicator: boolean;
|
|
44
|
-
showSeparator: boolean;
|
|
45
|
-
}
|
|
46
|
-
export interface DSTabsDefaultPropsT {
|
|
47
|
-
containerProps: Record<string, unknown>;
|
|
48
|
-
animated: boolean;
|
|
49
|
-
enableMouseEvents: boolean;
|
|
50
|
-
allowTextSelection: boolean;
|
|
51
|
-
onTabChange: (tabId: string, e?: React.MouseEvent) => void;
|
|
52
|
-
tabsListAriaLabel: string;
|
|
53
|
-
type: TabTypesT;
|
|
54
|
-
onlyRenderActiveTab: boolean;
|
|
55
|
-
fixedTabsHeaders: boolean;
|
|
56
|
-
children: React.ReactElement<DSTabPropsWithDefaultT>[];
|
|
57
|
-
withCarousel: boolean;
|
|
58
|
-
isDSMobile: boolean;
|
|
59
|
-
showSelectionIndicator: boolean;
|
|
60
|
-
showSeparator: boolean;
|
|
61
|
-
}
|
|
62
|
-
export interface CarouselPropsT {
|
|
63
|
-
children: React.ReactNode[];
|
|
64
|
-
updateIndicatorStyle?: () => void;
|
|
65
|
-
}
|
|
66
|
-
export interface DSTabPropsT {
|
|
67
|
-
tabId: string;
|
|
68
|
-
title?: string;
|
|
69
|
-
required?: boolean;
|
|
70
|
-
children?: React.ReactNode;
|
|
71
|
-
style?: Record<string, unknown>;
|
|
72
|
-
disabled?: boolean;
|
|
73
|
-
ref?: React.MutableRefObject<HTMLButtonElement>;
|
|
74
|
-
onClick?: (tabId: string, e: React.MouseEvent) => null | void;
|
|
75
|
-
onKeyDown?: (e: React.KeyboardEvent) => null | void;
|
|
76
|
-
}
|
|
77
|
-
export interface DSTabPropsWithDefaultT {
|
|
78
|
-
tabId: string;
|
|
79
|
-
title: string;
|
|
80
|
-
required: boolean;
|
|
81
|
-
children?: React.ReactNode;
|
|
82
|
-
style?: Record<string, unknown>;
|
|
83
|
-
disabled: boolean;
|
|
84
|
-
ref?: React.MutableRefObject<HTMLButtonElement>;
|
|
85
|
-
onClick?: (tabId: string, e: React.MouseEvent) => null | void;
|
|
86
|
-
onKeyDown?: (e: React.KeyboardEvent) => null | void;
|
|
87
|
-
}
|
|
88
|
-
export interface CarouselButtonsPropsT {
|
|
89
|
-
leftButtonOnClick: () => void;
|
|
90
|
-
rightButtonOnClick: () => void;
|
|
91
|
-
showChevrons: ShowChevronsT;
|
|
92
|
-
type: TabTypesT;
|
|
93
|
-
}
|
|
94
|
-
export interface DSTabsUseCrossRefContextT {
|
|
95
|
-
lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
|
|
96
|
-
firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
|
|
97
|
-
}
|
|
98
|
-
export interface DSTabsUseTabsContextT {
|
|
99
|
-
props: DSTabsPropsWithDefaultsT;
|
|
100
|
-
tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;
|
|
101
|
-
focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;
|
|
102
|
-
tabsListRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
103
|
-
tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;
|
|
104
|
-
actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
105
|
-
carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
106
|
-
setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;
|
|
107
|
-
actualActiveTab: string;
|
|
108
|
-
}
|
|
109
|
-
export interface UseRezisePropsT {
|
|
110
|
-
ref: React.MutableRefObject<HTMLDivElement | null>;
|
|
111
|
-
callback: () => void;
|
|
112
|
-
}
|
|
113
|
-
export interface UseCarouselPropsT {
|
|
114
|
-
updateIndicatorStyle?: () => void;
|
|
115
|
-
}
|
|
116
|
-
export interface ShowChevronsT {
|
|
117
|
-
right: boolean;
|
|
118
|
-
left: boolean;
|
|
119
|
-
}
|
|
120
|
-
export interface MobileGradientsT {
|
|
121
|
-
right: boolean;
|
|
122
|
-
left: boolean;
|
|
123
|
-
}
|
|
124
|
-
export interface IndicatorStyleT {
|
|
125
|
-
left: string;
|
|
126
|
-
width: string;
|
|
127
|
-
backgroundWithTransparent: string;
|
|
128
|
-
}
|
|
129
|
-
export interface UseCarouselReturnTypeT {
|
|
130
|
-
showChevrons: ShowChevronsT;
|
|
131
|
-
leftButtonOnClick: () => void;
|
|
132
|
-
rightButtonOnClick: () => void;
|
|
133
|
-
handleOnClick: (e: React.MouseEvent) => void;
|
|
134
|
-
handleOnScroll: (e: React.UIEvent) => void;
|
|
135
|
-
}
|
|
136
|
-
export interface UseCarouselCallbacksPropsT {
|
|
137
|
-
getVisibleItemsOffset: () => number;
|
|
138
|
-
recalcChevrons: () => void;
|
|
139
|
-
updateIndicatorStyle?: () => void;
|
|
140
|
-
}
|
|
141
|
-
export interface UseCarouselCallbacksReturnTypeT {
|
|
142
|
-
leftButtonOnClick: () => void;
|
|
143
|
-
rightButtonOnClick: () => void;
|
|
144
|
-
handleOnClick: (e: React.MouseEvent) => void;
|
|
145
|
-
handleOnScroll: (e: React.UIEvent) => void;
|
|
146
|
-
}
|
|
147
|
-
export interface UseKeyboardNavigationReturnTypeT {
|
|
148
|
-
handleOnKeyDown: (e: React.KeyboardEvent) => void;
|
|
149
|
-
}
|
|
150
|
-
export interface UseTabsCallbacksReturnTypeT {
|
|
151
|
-
handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;
|
|
152
|
-
handleOnMouseDown: (e: React.MouseEvent) => void;
|
|
153
|
-
}
|
|
154
|
-
export interface UseTabBarReturnTypeT {
|
|
155
|
-
updateIndicatorStyle: () => void;
|
|
156
|
-
updateMobileGradients: () => void;
|
|
157
|
-
setIndicatorStyle: React.Dispatch<React.SetStateAction<IndicatorStyleT>>;
|
|
158
|
-
indicatorStyle: IndicatorStyleT;
|
|
159
|
-
mobileGradients: MobileGradientsT;
|
|
160
|
-
}
|
|
161
|
-
export interface VisibleDimensionsT {
|
|
162
|
-
width: number;
|
|
163
|
-
height: number;
|
|
164
|
-
}
|
|
165
|
-
export interface CenterTabPropsT {
|
|
166
|
-
e?: React.MouseEvent | React.FocusEvent;
|
|
167
|
-
listRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
168
|
-
}
|
|
169
|
-
export interface StyledTabWrapperPropsT {
|
|
170
|
-
isDSMobile: boolean;
|
|
171
|
-
fixedTabsHeaders: boolean;
|
|
172
|
-
}
|
|
173
|
-
export interface StyledTabListPropsT {
|
|
174
|
-
withCarousel: boolean;
|
|
175
|
-
isDSMobile: boolean;
|
|
176
|
-
fixedTabsHeaders: boolean;
|
|
177
|
-
mobileGradients: MobileGradientsT;
|
|
178
|
-
indicatorStyle: IndicatorStyleT;
|
|
179
|
-
tabType: TabTypesT;
|
|
180
|
-
}
|
|
181
|
-
export interface StyledSubTabsListPropsT {
|
|
182
|
-
withCarousel: boolean;
|
|
183
|
-
}
|
|
184
|
-
export interface StyledTabButtonPropsT {
|
|
185
|
-
isActive: boolean;
|
|
186
|
-
disabled: boolean;
|
|
187
|
-
showSeparator: boolean;
|
|
188
|
-
isDSMobile: boolean;
|
|
189
|
-
fixedTabsHeaders: boolean;
|
|
190
|
-
withCarousel: boolean;
|
|
191
|
-
tabType: TabTypesT;
|
|
192
|
-
}
|
|
193
|
-
export interface StyledCarouselButtonWrapperPropsT {
|
|
194
|
-
right?: boolean;
|
|
195
|
-
tabType: TabTypesT;
|
|
196
|
-
}
|
|
197
|
-
export interface StyledPanelContainerPropsT {
|
|
198
|
-
hidden: boolean;
|
|
199
|
-
isDSMobile: boolean;
|
|
200
|
-
}
|
|
201
|
-
export interface StyledSelectionIndicatoPropsT {
|
|
202
|
-
isDSMobile: boolean;
|
|
203
|
-
tabType: TabTypesT;
|
|
204
|
-
}
|
|
205
|
-
export {};
|
package/types/defaultProps.d.ts
DELETED