@elliemae/ds-tabs 3.1.0-next.1 → 3.1.0-next.12
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 +2 -2
- package/dist/cjs/DSTabs.js.map +2 -2
- package/dist/cjs/exported-related/DSTab.js +2 -2
- package/dist/cjs/exported-related/DSTab.js.map +2 -2
- package/dist/cjs/parts/carousel/styles.js +5 -5
- package/dist/cjs/parts/carousel/styles.js.map +2 -2
- package/dist/cjs/parts/tabBar/styles.js +20 -18
- package/dist/cjs/parts/tabBar/styles.js.map +2 -2
- package/dist/cjs/parts/tabsContent/styles.js +2 -2
- package/dist/cjs/parts/tabsContent/styles.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/styles.js +2 -2
- package/dist/cjs/parts/tabsPanel/styles.js.map +2 -2
- package/dist/cjs/propTypes.js +18 -18
- package/dist/cjs/propTypes.js.map +2 -2
- package/dist/esm/DSTabs.js +1 -1
- package/dist/esm/DSTabs.js.map +1 -1
- package/dist/esm/exported-related/DSTab.js +1 -1
- package/dist/esm/exported-related/DSTab.js.map +1 -1
- package/dist/esm/parts/carousel/styles.js +1 -1
- package/dist/esm/parts/carousel/styles.js.map +1 -1
- package/dist/esm/parts/tabBar/styles.js +4 -2
- package/dist/esm/parts/tabBar/styles.js.map +2 -2
- package/dist/esm/parts/tabsContent/styles.js +1 -1
- package/dist/esm/parts/tabsContent/styles.js.map +1 -1
- package/dist/esm/parts/tabsPanel/styles.js +1 -1
- package/dist/esm/parts/tabsPanel/styles.js.map +1 -1
- package/dist/esm/propTypes.js +1 -1
- package/dist/esm/propTypes.js.map +1 -1
- package/package.json +15 -16
package/dist/cjs/DSTabs.js
CHANGED
|
@@ -27,7 +27,7 @@ __export(DSTabs_exports, {
|
|
|
27
27
|
module.exports = __toCommonJS(DSTabs_exports);
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
29
|
var import_react = __toESM(require("react"));
|
|
30
|
-
var
|
|
30
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
31
31
|
var import_propTypes = require("./propTypes");
|
|
32
32
|
var import_DSTabsCTX = require("./DSTabsCTX");
|
|
33
33
|
var import_TabsContent = require("./parts/tabsContent/TabsContent");
|
|
@@ -50,7 +50,7 @@ const DSTabs = (props) => {
|
|
|
50
50
|
}, /* @__PURE__ */ import_react.default.createElement(import_TabsContent.TabsContent, null)));
|
|
51
51
|
};
|
|
52
52
|
DSTabs.propTypes = import_propTypes.tabsPropTypes;
|
|
53
|
-
const DSTabsWithSchema = (0,
|
|
53
|
+
const DSTabsWithSchema = (0, import_ds_utilities.describe)(DSTabs);
|
|
54
54
|
DSTabsWithSchema.propTypes = import_propTypes.tabsPropTypes;
|
|
55
55
|
var DSTabs_default = DSTabs;
|
|
56
56
|
//# sourceMappingURL=DSTabs.js.map
|
package/dist/cjs/DSTabs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSTabs.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,
|
|
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": ";;;;;;;;;;;;;;;;;;;;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,MAAM,4BAAQ,KAAK;AACzB,QAAM,eAAe,oCAAY;AAEjC,QAAM,EAAE,SAAS;AAEjB,MAAI,SAAS,0BAAS,SAAS;AAC7B,WACE,mDAAC,+BAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,OAC7B,mDAAC,oCAAY,CACf;AAAA,EAEJ;AAEA,SACE,mDAAC,uCAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,mDAAC,+BAAc,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC7B,mDAAC,oCAAY,CACf,CACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,mBAAmB,kCAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,11 +41,11 @@ __export(DSTab_exports, {
|
|
|
41
41
|
module.exports = __toCommonJS(DSTab_exports);
|
|
42
42
|
var React = __toESM(require("react"));
|
|
43
43
|
var import_react = __toESM(require("react"));
|
|
44
|
-
var
|
|
44
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
45
45
|
var import_propTypes = require("../propTypes");
|
|
46
46
|
const DSTab = (props) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, __spreadValues({}, props));
|
|
47
47
|
DSTab.propTypes = import_propTypes.tabPropTypes;
|
|
48
|
-
const DSTabWithSchema = (0,
|
|
48
|
+
const DSTabWithSchema = (0, import_ds_utilities.describe)(DSTab);
|
|
49
49
|
DSTabWithSchema.propTypes = import_propTypes.tabPropTypes;
|
|
50
50
|
var DSTab_default = DSTab;
|
|
51
51
|
//# sourceMappingURL=DSTab.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/DSTab.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,0BAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAqC,mDAAC,qBAAM,UAAN,mBAAmB,MAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,kBAAkB,kCAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,10 +27,10 @@ __export(styles_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(styles_exports);
|
|
29
29
|
var React = __toESM(require("react"));
|
|
30
|
-
var
|
|
30
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
31
31
|
var import_ds_button = require("@elliemae/ds-button");
|
|
32
32
|
var import_constants = require("../../utils/constants");
|
|
33
|
-
const StyledCarouselBtn = (0,
|
|
33
|
+
const StyledCarouselBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2)`
|
|
34
34
|
margin: 0;
|
|
35
35
|
min-width: ${({ theme }) => theme.space.xs};
|
|
36
36
|
width: ${({ theme }) => theme.space.xs};
|
|
@@ -45,18 +45,18 @@ const StyledCarouselBtn = (0, import_styled_components.default)(import_ds_button
|
|
|
45
45
|
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
46
46
|
}
|
|
47
47
|
`;
|
|
48
|
-
const StyledCarouselWrapper =
|
|
48
|
+
const StyledCarouselWrapper = import_ds_system.styled.span`
|
|
49
49
|
position: relative;
|
|
50
50
|
width: 100%;
|
|
51
51
|
display: flex;
|
|
52
52
|
`;
|
|
53
|
-
const StyledChildrenWrap =
|
|
53
|
+
const StyledChildrenWrap = import_ds_system.styled.div`
|
|
54
54
|
display: flex;
|
|
55
55
|
flex-wrap: nowrap;
|
|
56
56
|
flex: 1;
|
|
57
57
|
overflow-x: hidden;
|
|
58
58
|
`;
|
|
59
|
-
const StyledCarouselButtonWrapper =
|
|
59
|
+
const StyledCarouselButtonWrapper = import_ds_system.styled.div`
|
|
60
60
|
max-width: 16px;
|
|
61
61
|
position: absolute;
|
|
62
62
|
z-index: 200;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAA2B;AAC3B,uBAAyB;AAQlB,MAAM,oBAAoB,6BAAO,2BAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAIvC,MAAM,wBAAwB,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,YAAa,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,cAAe,YAAY,0BAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,cAAe,YAAY,0BAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,cACV,YAAY,0BAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,cAAc,MAAM,OAAO,QAAQ;AAAA,KAEtH;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,10 +30,10 @@ __export(styles_exports, {
|
|
|
30
30
|
});
|
|
31
31
|
module.exports = __toCommonJS(styles_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
34
33
|
var import_ds_system = require("@elliemae/ds-system");
|
|
34
|
+
var import_ds_system2 = require("@elliemae/ds-system");
|
|
35
35
|
var import_constants = require("../../utils/constants");
|
|
36
|
-
const StyledSelectionIndicator =
|
|
36
|
+
const StyledSelectionIndicator = import_ds_system.styled.div`
|
|
37
37
|
position: absolute;
|
|
38
38
|
height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
|
|
39
39
|
top: ${({ tabType, isDSMobile }) => {
|
|
@@ -43,16 +43,17 @@ const StyledSelectionIndicator = import_styled_components.default.div`
|
|
|
43
43
|
return `15px`;
|
|
44
44
|
return `25px`;
|
|
45
45
|
}};
|
|
46
|
+
z-index: 1;
|
|
46
47
|
margin-top: ${({ theme }) => theme.space.xxxs};
|
|
47
48
|
pointer-events: none;
|
|
48
49
|
transition: 200ms cubic-bezier(0.36, 0, 1, 1);
|
|
49
|
-
|
|
50
|
+
|
|
50
51
|
${({ isDSMobile }) => isDSMobile ? `
|
|
51
52
|
margin-left: 0;
|
|
52
53
|
margin-top: 3px;
|
|
53
54
|
` : ``}
|
|
54
55
|
`;
|
|
55
|
-
const selectionIndicatorSettingsFromParent =
|
|
56
|
+
const selectionIndicatorSettingsFromParent = import_ds_system2.css`
|
|
56
57
|
${StyledSelectionIndicator} {
|
|
57
58
|
${({ indicatorStyle }) => `
|
|
58
59
|
width: ${indicatorStyle.width}px;
|
|
@@ -63,11 +64,11 @@ const selectionIndicatorSettingsFromParent = import_ds_system.css`
|
|
|
63
64
|
${StyledSelectionIndicator} {
|
|
64
65
|
background: ${(props) => {
|
|
65
66
|
const { theme, indicatorStyle, isDSMobile } = props;
|
|
66
|
-
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${
|
|
67
|
+
return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${import_ds_system2.th.color("brand-600")(props)} 16px, ${import_ds_system2.th.color("brand-600")(props)} ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width}px )` : theme.colors.brand[600];
|
|
67
68
|
}};
|
|
68
69
|
}
|
|
69
70
|
`;
|
|
70
|
-
const StyledMobileGradient =
|
|
71
|
+
const StyledMobileGradient = import_ds_system.styled.div.attrs(({ left = 0, width = 0 }) => ({
|
|
71
72
|
style: { left: left - 10, maxWidth: width - left }
|
|
72
73
|
}))`
|
|
73
74
|
position: absolute;
|
|
@@ -87,14 +88,14 @@ const StyledMobileGradient = import_styled_components.default.div.attrs(({ left
|
|
|
87
88
|
return "";
|
|
88
89
|
}};
|
|
89
90
|
`;
|
|
90
|
-
const StyledTabWrapper =
|
|
91
|
+
const StyledTabWrapper = import_ds_system.styled.div`
|
|
91
92
|
display: flex;
|
|
92
93
|
flex: 1;
|
|
93
94
|
flex-wrap: nowrap;
|
|
94
95
|
${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
|
|
95
96
|
${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
|
|
96
97
|
`;
|
|
97
|
-
const StyledTabButton =
|
|
98
|
+
const StyledTabButton = import_ds_system.styled.button`
|
|
98
99
|
position: relative;
|
|
99
100
|
background-color: transparent;
|
|
100
101
|
border: none;
|
|
@@ -125,16 +126,16 @@ const StyledTabButton = import_styled_components.default.button`
|
|
|
125
126
|
}};
|
|
126
127
|
|
|
127
128
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
128
|
-
${(0,
|
|
129
|
+
${(0, import_ds_system2.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
|
|
129
130
|
|
|
130
131
|
${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`}
|
|
131
132
|
|
|
132
133
|
${({ theme, isActive, disabled }) => isActive && !disabled ? `
|
|
133
134
|
font-weight: ${theme.fontWeights.semibold};
|
|
134
|
-
${(0,
|
|
135
|
+
${(0, import_ds_system2.safariAndFirefoxBold)(`#353C46`)}
|
|
135
136
|
|
|
136
137
|
&:hover {
|
|
137
|
-
${(0,
|
|
138
|
+
${(0, import_ds_system2.safariAndFirefoxBold)(`#1E79C2`)}
|
|
138
139
|
}
|
|
139
140
|
|
|
140
141
|
` : `
|
|
@@ -206,16 +207,16 @@ ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
|
|
|
206
207
|
padding: 0;
|
|
207
208
|
font-size: 16px;
|
|
208
209
|
line-height: 1.3;
|
|
209
|
-
${(0,
|
|
210
|
+
${(0, import_ds_system2.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
|
|
210
211
|
|
|
211
212
|
&:focus {
|
|
212
213
|
font-weight: ${theme.fontWeights.regular};
|
|
213
|
-
${(0,
|
|
214
|
+
${(0, import_ds_system2.safariAndFirefoxBold)("#006AA9")}
|
|
214
215
|
}
|
|
215
216
|
|
|
216
217
|
${isActive ? `
|
|
217
218
|
font-weight: ${theme.fontWeights.regular};
|
|
218
|
-
${(0,
|
|
219
|
+
${(0, import_ds_system2.safariAndFirefoxBold)("#006AA9")}
|
|
219
220
|
` : ``}
|
|
220
221
|
|
|
221
222
|
${isActive && !disabled ? `
|
|
@@ -230,12 +231,12 @@ ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
|
|
|
230
231
|
&:focus {
|
|
231
232
|
outline: none;
|
|
232
233
|
color: ${theme.colors.brand[700]};
|
|
233
|
-
${(0,
|
|
234
|
+
${(0, import_ds_system2.safariAndFirefoxBold)("#006AA9")}
|
|
234
235
|
}` : ``}
|
|
235
236
|
|
|
236
237
|
` : ``}
|
|
237
238
|
`;
|
|
238
|
-
const StyledSubTabsList =
|
|
239
|
+
const StyledSubTabsList = import_ds_system.styled.div`
|
|
239
240
|
position: relative;
|
|
240
241
|
display: flex;
|
|
241
242
|
flex-wrap: nowrap;
|
|
@@ -243,12 +244,13 @@ const StyledSubTabsList = import_styled_components.default.div`
|
|
|
243
244
|
width: 100%;
|
|
244
245
|
${({ withCarousel }) => withCarousel ? "max-width: 100%;" : ""}
|
|
245
246
|
`;
|
|
246
|
-
const StyledTabList =
|
|
247
|
+
const StyledTabList = import_ds_system.styled.div`
|
|
247
248
|
position: relative;
|
|
248
249
|
display: flex;
|
|
249
250
|
flex-wrap: nowrap;
|
|
250
251
|
flex: 1;
|
|
251
252
|
width: 100%;
|
|
253
|
+
z-index: 0;
|
|
252
254
|
${({ withCarousel, isDSMobile }) => withCarousel && !isDSMobile ? `max-width: 100%;` : ""}
|
|
253
255
|
|
|
254
256
|
${({ theme, isDSMobile, tabType }) => tabType !== import_constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
|
|
@@ -289,7 +291,7 @@ const StyledTabList = import_styled_components.default.div`
|
|
|
289
291
|
|
|
290
292
|
${selectionIndicatorSettingsFromParent}
|
|
291
293
|
`;
|
|
292
|
-
const StyledRequiredMark =
|
|
294
|
+
const StyledRequiredMark = import_ds_system.styled.span`
|
|
293
295
|
color: ${({ theme }) => theme.colors.danger[900]};
|
|
294
296
|
font-size: 6px;
|
|
295
297
|
margin-left: 2px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { 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, transparent 34px, transparent calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, transparent 0%, transparent calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, transparent 34px, transparent 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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,wBAAoE;AACpE,uBAAyB;AA0ClB,MAAM,2BAA2B,wBAAO;AAAA;AAAA,YAEnC,CAAC,EAAE,iBAAkB,aAAa,QAAQ;AAAA,SAC7C,CAAC,EAAE,SAAS,iBAAiB;AAClC,MAAI;AAAY,WAAO;AACvB,MAAI,YAAY,0BAAS;AAAc,WAAO;AAC9C,SAAO;AACT;AAAA;AAAA,gBAEc,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIvC,CAAC,EAAE,iBACH,aACI;AAAA;AAAA;AAAA,MAIA;AAAA;AAKR,MAAM,uCAAuC;AAAA,IACzC;AAAA,MACE,CAAC,EAAE,qBAAqB;AAAA,eACf,eAAe;AAAA,cAChB,eAAe;AAAA;AAAA;AAAA;AAAA,IAIzB;AAAA,kBACc,CAAC,UAAU;AACvB,QAAM,EAAE,OAAO,gBAAgB,eAAe;AAC9C,SAAO,CAAC,aACJ,gEAAgE,qBAAG,MAAM,WAAW,EAClF,KACF,WAAW,qBAAG,MAAM,WAAW,EAAE,KAAK,KAAK,eAAe,QAAQ,qBAChE,eAAe,QAAQ,qBACN,eAAe,cAClC,MAAM,OAAO,MAAM;AACzB;AAAA;AAAA;AAIG,MAAM,uBAAuB,wBAAO,IAAI,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,QAAqC;AAAA,EAC7G,OAAO,EAAE,MAAM,OAAO,IAAI,UAAU,QAAQ,KAAK;AACnD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQE,CAAC,EAAE,iBAAiB,EAAE,MAAM,cAAc;AAC1C,MAAI,SAAS;AACX,WAAO;AACT,MAAI;AACF,WAAO;AACT,MAAI;AAAM,WAAO;AACjB,SAAO;AACT;AAAA;AAKK,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,kBAAkB,iBAAkB,CAAC,oBAAoB,aAAa,KAAK;AAAA,IAC9E,CAAC,EAAE,OAAO,iBAAkB,aAAa,4BAA4B,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGjG,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMlB,CAAC,EAAE,SAAS,iBAAiB;AAC7C,MAAI,YAAY,0BAAS;AAAS,WAAO;AACzC,SAAO,aAAa,SAAS;AAC/B;AAAA;AAAA;AAAA;AAAA,kBAIgB,CAAC,EAAE,kBAAkB,iBAAiB;AACpD,MAAI;AAAkB,WAAO;AAC7B,MAAI,CAAC,oBAAoB;AAAY,WAAO;AAC5C,SAAO;AACT;AAAA;AAAA,iBAEe,CAAC,EAAE,kBAAkB,iBAAiB;AACnD,MAAI;AAAkB,WAAO;AAC7B,MAAI,CAAC,oBAAoB;AAAY,WAAO;AAC5C,SAAO;AACT;AAAA;AAAA,WAES,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC3C,4CAAqB,yCAAyC;AAAA;AAAA,IAE9D,CAAC,EAAE,cAAe,YAAY,0BAAS,SAAS,kBAAkB;AAAA;AAAA,IAElE,CAAC,EAAE,OAAO,UAAU,eACpB,YAAY,CAAC,WACT;AAAA,0BACkB,MAAM,YAAY;AAAA,YAChC,4CAAqB,SAAS;AAAA;AAAA;AAAA,cAG5B,4CAAqB,SAAS;AAAA;AAAA;AAAA,YAIpC;AAAA;AAAA;AAAA;AAAA,IAIJ,CAAC,EAAE,OAAO,eACV,WACI;AAAA,mBACW,MAAM,OAAO,QAAQ;AAAA;AAAA,YAGhC;AAAA;AAAA,iBAES,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhC,CAAC,EAAE,OAAO,eAAe,cACzB,gBACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASgB,YAAY,0BAAS,UAAU,SAAS;AAAA,4BACpC,MAAM,OAAO,QAAQ;AAAA,iBAEzC;AAAA;AAAA,IAEJ,CAAC,EAAE,OAAO,YAAY,SAAS,eAC/B,CAAC,aACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYkB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAIvC,YAAY,0BAAS,WAAW,WAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcA;AAAA;AAAA;AAAA,MAKF;AAAA;AAAA;AAAA;AAAA,EAIN,CAAC,EAAE,OAAO,UAAU,UAAU,iBAC5B,aACI;AAAA;AAAA,aAEK,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,mBACtD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,MAI/B,4CAAqB,yCAAyC;AAAA;AAAA;AAAA,qBAG/C,MAAM,YAAY;AAAA,QAC/B,4CAAqB,SAAS;AAAA;AAAA;AAAA,MAIhC,WACI;AAAA,uBACa,MAAM,YAAY;AAAA,UAC/B,4CAAqB,SAAS;AAAA,YAE9B;AAAA;AAAA,MAIJ,YAAY,CAAC,WACT;AAAA,kBACQ,MAAM,OAAO,MAAM;AAAA;AAAA,uBAEd,MAAM,YAAY;AAAA;AAAA,qCAEJ,MAAM,OAAO,MAAM,UAC9C;AAAA;AAAA,MAIJ,CAAC,WACG;AAAA;AAAA;AAAA;AAAA,mBAIS,MAAM,OAAO,MAAM;AAAA,YAC1B,4CAAqB,SAAS;AAAA,aAEhC;AAAA;AAAA,QAIF;AAAA;AAGD,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,EAAE,mBAAoB,eAAe,qBAAqB;AAAA;AAGxD,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,CAAC,EAAE,cAAc,iBAAkB,gBAAgB,CAAC,aAAa,qBAAqB;AAAA;AAAA,IAEtF,CAAC,EAAE,OAAO,YAAY,cACtB,YAAY,0BAAS,gBAAgB,CAAC,aAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAM0B,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAK/C;AAAA;AAAA,IAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,CAAC,EAAE,OAAO,iBACV,aACI;AAAA;AAAA,uBAEe,MAAM,OAAO,QAAQ,YACpC;AAAA;AAAA,IAEJ,CAAC,EAAE,YAAY,uBACf,aACI;AAAA,QAEA,CAAC,mBACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQA;AAAA;AAAA,UAEF;AAAA;AAAA;AAAA,eAKF;AAAA;AAAA,MAEF;AAAA;AAGC,MAAM,qBAAqB,wBAAO;AAAA,WAC9B,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,8 +24,8 @@ __export(styles_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(styles_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
|
-
var
|
|
28
|
-
const StyledTabBarContainer =
|
|
27
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
28
|
+
const StyledTabBarContainer = import_ds_system.styled.div`
|
|
29
29
|
display: flex;
|
|
30
30
|
overflow-x: hidden;
|
|
31
31
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsContent/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledTabBarContainer = styled.div`\n display: flex;\n overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,8 +24,8 @@ __export(styles_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(styles_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
|
-
var
|
|
28
|
-
const StyledPanelContainer =
|
|
27
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
28
|
+
const StyledPanelContainer = import_ds_system.styled.div`
|
|
29
29
|
padding-top: 8px;
|
|
30
30
|
&:focus {
|
|
31
31
|
outline: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledPanelContainerPropsT {\n hidden: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ hidden }) => (hidden ? 'visibility: hidden;' : '')}\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAOhB,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,aAAc,SAAS,wBAAwB;AAAA;AAAA,IAElD,CAAC,EAAE,iBAAkB,aAAa,oBAAoB;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -26,30 +26,30 @@ __export(propTypes_exports, {
|
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(propTypes_exports);
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
|
-
var
|
|
29
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
30
30
|
var import_constants = require("./utils/constants");
|
|
31
31
|
const noop = () => {
|
|
32
32
|
};
|
|
33
33
|
const tabPropTypes = {
|
|
34
|
-
tabId:
|
|
35
|
-
title:
|
|
36
|
-
required:
|
|
37
|
-
disabled:
|
|
34
|
+
tabId: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("Unique Tab id.").defaultValue(""),
|
|
35
|
+
title: import_ds_utilities.PropTypes.string.description("Tab title.").defaultValue(""),
|
|
36
|
+
required: import_ds_utilities.PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
|
|
37
|
+
disabled: import_ds_utilities.PropTypes.bool.description("Disables Tab.").defaultValue(false)
|
|
38
38
|
};
|
|
39
39
|
const tabsPropTypes = {
|
|
40
|
-
animated:
|
|
41
|
-
enableMouseEvents:
|
|
42
|
-
allowTextSelection:
|
|
43
|
-
onTabChange:
|
|
44
|
-
type:
|
|
45
|
-
tabBarExtraContent:
|
|
46
|
-
onlyRenderActiveTab:
|
|
47
|
-
withCarousel:
|
|
48
|
-
activeTab:
|
|
49
|
-
children:
|
|
50
|
-
tabsListAriaLabel:
|
|
51
|
-
containerProps:
|
|
52
|
-
innerRef:
|
|
40
|
+
animated: import_ds_utilities.PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
|
|
41
|
+
enableMouseEvents: import_ds_utilities.PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
|
|
42
|
+
allowTextSelection: import_ds_utilities.PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
|
|
43
|
+
onTabChange: import_ds_utilities.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
|
|
44
|
+
type: import_ds_utilities.PropTypes.oneOf(import_constants.TabTypesValuesAsArray).description("Tab type.").defaultValue(import_constants.TabTypesValuesAsArray[0]),
|
|
45
|
+
tabBarExtraContent: import_ds_utilities.PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
|
|
46
|
+
onlyRenderActiveTab: import_ds_utilities.PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
|
|
47
|
+
withCarousel: import_ds_utilities.PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
|
|
48
|
+
activeTab: import_ds_utilities.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
|
|
49
|
+
children: import_ds_utilities.PropTypes.node.description("Use DSTab component as children.").isRequired,
|
|
50
|
+
tabsListAriaLabel: import_ds_utilities.PropTypes.string.description("Aria label for the list.").defaultValue("Tab list."),
|
|
51
|
+
containerProps: import_ds_utilities.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
|
|
52
|
+
innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
|
|
53
53
|
};
|
|
54
54
|
const tabsDefaultProps = {
|
|
55
55
|
containerProps: {},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).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\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,uBAAgD;AAGhD,MAAM,OAAO,MAAY;AAAC;AAoDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,8BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,8BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,8BAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,8BAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,8BAAU,MAAM,sCAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,uCAAsB,EAAE;AAAA,EAC3G,oBAAoB,8BAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,qBAAqB,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,8BAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,8BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,8BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,8BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,0BAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSTabs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { describe } from "
|
|
3
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { tabsPropTypes } from "./propTypes";
|
|
5
5
|
import { DSTabsContext, DSTabsCrossRefContext } from "./DSTabsCTX";
|
|
6
6
|
import { TabsContent } from "./parts/tabsContent/TabsContent";
|
package/dist/esm/DSTabs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,SAAS;AAEjB,MAAI,SAAS,SAAS,SAAS;AAC7B,WACE,qCAAC,cAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,OAC7B,qCAAC,iBAAY,CACf;AAAA,EAEJ;AAEA,SACE,qCAAC,sBAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,qCAAC,cAAc,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC7B,qCAAC,iBAAY,CACf,CACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,mBAAmB,SAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,7 @@ var __spreadValues = (a, b) => {
|
|
|
16
16
|
};
|
|
17
17
|
import * as React from "react";
|
|
18
18
|
import React2 from "react";
|
|
19
|
-
import { describe } from "
|
|
19
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
20
20
|
import { tabPropTypes } from "../propTypes";
|
|
21
21
|
const DSTab = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, __spreadValues({}, props));
|
|
22
22
|
DSTab.propTypes = tabPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSTab.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AACA;AAGA,MAAM,QAAQ,CAAC,UAAqC,qCAAC,OAAM,UAAN,mBAAmB,MAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
4
|
import { TabTypes } from "../../utils/constants";
|
|
5
5
|
const StyledCarouselBtn = styled(DSButtonV2)`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AAQO,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAIvC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,YAAa,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,cAAe,YAAY,SAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,cAAe,YAAY,SAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,cACV,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,cAAc,MAAM,OAAO,QAAQ;AAAA,KAEtH;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { safariAndFirefoxBold, onlySafariAndFirefox, css, th } from "@elliemae/ds-system";
|
|
4
4
|
import { TabTypes } from "../../utils/constants";
|
|
5
5
|
const StyledSelectionIndicator = styled.div`
|
|
@@ -12,10 +12,11 @@ const StyledSelectionIndicator = styled.div`
|
|
|
12
12
|
return `15px`;
|
|
13
13
|
return `25px`;
|
|
14
14
|
}};
|
|
15
|
+
z-index: 1;
|
|
15
16
|
margin-top: ${({ theme }) => theme.space.xxxs};
|
|
16
17
|
pointer-events: none;
|
|
17
18
|
transition: 200ms cubic-bezier(0.36, 0, 1, 1);
|
|
18
|
-
|
|
19
|
+
|
|
19
20
|
${({ isDSMobile }) => isDSMobile ? `
|
|
20
21
|
margin-left: 0;
|
|
21
22
|
margin-top: 3px;
|
|
@@ -218,6 +219,7 @@ const StyledTabList = styled.div`
|
|
|
218
219
|
flex-wrap: nowrap;
|
|
219
220
|
flex: 1;
|
|
220
221
|
width: 100%;
|
|
222
|
+
z-index: 0;
|
|
221
223
|
${({ withCarousel, isDSMobile }) => withCarousel && !isDSMobile ? `max-width: 100%;` : ""}
|
|
222
224
|
|
|
223
225
|
${({ theme, isDSMobile, tabType }) => tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ? `
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from '
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AA0CO,MAAM,2BAA2B,OAAO;AAAA;AAAA,YAEnC,CAAC,EAAE,iBAAkB,aAAa,QAAQ;AAAA,SAC7C,CAAC,EAAE,SAAS,iBAAiB;AAClC,MAAI;AAAY,WAAO;AACvB,MAAI,YAAY,SAAS;AAAc,WAAO;AAC9C,SAAO;AACT;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { 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, transparent 34px, transparent calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, transparent 0%, transparent calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, transparent 34px, transparent 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledTabBarContainer = styled.div`\n display: flex;\n overflow-x: hidden;\n`;\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AAEO,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\ninterface StyledPanelContainerPropsT {\n hidden: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ hidden }) => (hidden ? 'visibility: hidden;' : '')}\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AAOO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,aAAc,SAAS,wBAAwB;AAAA;AAAA,IAElD,CAAC,EAAE,iBAAkB,aAAa,oBAAoB;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/propTypes.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).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\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AAGA,MAAM,OAAO,MAAY;AAAC;AAoDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,UAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,UAAU,MAAM,qBAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAsB,EAAE;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,SAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -130,22 +130,13 @@
|
|
|
130
130
|
"reportFile": "tests.xml",
|
|
131
131
|
"indent": 4
|
|
132
132
|
},
|
|
133
|
-
"scripts": {
|
|
134
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
135
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
136
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
137
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
138
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
139
|
-
},
|
|
140
133
|
"dependencies": {
|
|
141
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
142
|
-
"@elliemae/ds-icon": "3.1.0-next.
|
|
143
|
-
"@elliemae/ds-icons": "3.1.0-next.
|
|
144
|
-
"@elliemae/ds-system": "3.1.0-next.
|
|
145
|
-
"@elliemae/ds-utilities": "3.1.0-next.
|
|
134
|
+
"@elliemae/ds-button": "3.1.0-next.12",
|
|
135
|
+
"@elliemae/ds-icon": "3.1.0-next.12",
|
|
136
|
+
"@elliemae/ds-icons": "3.1.0-next.12",
|
|
137
|
+
"@elliemae/ds-system": "3.1.0-next.12",
|
|
138
|
+
"@elliemae/ds-utilities": "3.1.0-next.12",
|
|
146
139
|
"@react-hook/resize-observer": "~1.2.5",
|
|
147
|
-
"prop-types": "~15.8.1",
|
|
148
|
-
"react-desc": "~4.1.3",
|
|
149
140
|
"react-swipeable-views": "~0.13.9"
|
|
150
141
|
},
|
|
151
142
|
"devDependencies": {
|
|
@@ -163,5 +154,13 @@
|
|
|
163
154
|
"publishConfig": {
|
|
164
155
|
"access": "public",
|
|
165
156
|
"typeSafety": false
|
|
157
|
+
},
|
|
158
|
+
"scripts": {
|
|
159
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
160
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
161
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
162
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
163
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
164
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
166
165
|
}
|
|
167
|
-
}
|
|
166
|
+
}
|