@elliemae/ds-tabs 2.1.0-rc.6 → 2.1.0

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.
Files changed (15) hide show
  1. package/cjs/config/useTabs.js +2 -2
  2. package/cjs/parts/carousel/Carousel.js +2 -4
  3. package/cjs/parts/carousel/styles.js +15 -10
  4. package/cjs/parts/tabBar/styles.js +47 -46
  5. package/cjs/parts/tabBar/useTabBar.js +0 -2
  6. package/cjs/utils/constants.js +0 -1
  7. package/esm/config/useTabs.js +2 -2
  8. package/esm/parts/carousel/Carousel.js +3 -5
  9. package/esm/parts/carousel/styles.js +15 -10
  10. package/esm/parts/tabBar/styles.js +47 -46
  11. package/esm/parts/tabBar/useTabBar.js +0 -2
  12. package/esm/utils/constants.js +0 -1
  13. package/package.json +6 -6
  14. package/types/DSTabsTypes.d.ts +0 -1
  15. package/types/utils/constants.d.ts +0 -1
package/cjs/config/useTabs.js CHANGED
@@ -32,8 +32,8 @@ const useTabs = props => {
32
32
  React.useEffect(() => {
33
33
  var _focusableTabsRef$cur;
34
34
 
35
- actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === internalActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
36
- }, [internalActiveTab]);
35
+ actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
36
+ }, [actualActiveTab]);
37
37
  const ctx = React.useMemo(() => ({
38
38
  props: propsWithDefaults,
39
39
  tabsRef,
package/cjs/parts/carousel/Carousel.js CHANGED
@@ -46,8 +46,7 @@ const Carousel = _ref => {
46
46
  "data-testid": DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
47
47
  buttonType: dsButton.BUTTON_TYPES.ICON
48
48
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
49
- size: dsIcon.DSIconSizes.S,
50
- color: dsIcon.DSIconColors.PRIMARY
49
+ size: dsIcon.DSIconSizes.S
51
50
  }))), showChevrons.right && /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselButtonWrapper, {
52
51
  tabType: type,
53
52
  right: showChevrons.right
@@ -58,8 +57,7 @@ const Carousel = _ref => {
58
57
  "data-testid": DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
59
58
  buttonType: dsButton.BUTTON_TYPES.ICON
60
59
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
61
- size: dsIcon.DSIconSizes.S,
62
- color: dsIcon.DSIconColors.PRIMARY
60
+ size: dsIcon.DSIconSizes.S
63
61
  }))), /*#__PURE__*/jsxRuntime.jsx(styles.StyledChildrenWrap, {
64
62
  ref: carouselOnlyListRef,
65
63
  onClick: handleOnClick,
package/cjs/parts/carousel/styles.js CHANGED
@@ -12,7 +12,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  const StyledCarouselBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
14
14
  componentId: "sc-prv5a7-0"
15
- })(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;"], _ref => {
15
+ })(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;& .em-ds-icon svg{fill:", ";}"], _ref => {
16
16
  let {
17
17
  theme
18
18
  } = _ref;
@@ -22,6 +22,11 @@ const StyledCarouselBtn = /*#__PURE__*/styled__default["default"](dsButton.DSBut
22
22
  theme
23
23
  } = _ref2;
24
24
  return theme.space.xs;
25
+ }, _ref3 => {
26
+ let {
27
+ theme
28
+ } = _ref3;
29
+ return theme.colors.brand[600];
25
30
  });
26
31
  const StyledCarouselWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
27
32
  componentId: "sc-prv5a7-1"
@@ -31,27 +36,27 @@ const StyledChildrenWrap = /*#__PURE__*/styled__default["default"].div.withConfi
31
36
  })(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
32
37
  const StyledCarouselButtonWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
33
38
  componentId: "sc-prv5a7-3"
34
- })(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background-color:white;", ";"], _ref3 => {
39
+ })(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background:white;", ";"], _ref4 => {
35
40
  let {
36
41
  right
37
- } = _ref3;
42
+ } = _ref4;
38
43
  return right ? 'right: 0;' : "left: 0;";
39
- }, _ref4 => {
44
+ }, _ref5 => {
40
45
  let {
41
46
  tabType
42
- } = _ref4;
47
+ } = _ref5;
43
48
  return tabType === constants.TabTypes.NORMAL ? '32px' : '22px';
44
- }, _ref5 => {
49
+ }, _ref6 => {
45
50
  let {
46
51
  tabType
47
- } = _ref5;
52
+ } = _ref6;
48
53
  return tabType === constants.TabTypes.NORMAL ? '5px' : '0px';
49
- }, _ref6 => {
54
+ }, _ref7 => {
50
55
  let {
51
56
  theme,
52
57
  tabType
53
- } = _ref6;
54
- return tabType === constants.TabTypes.NORMAL ? "\n border-bottom: 1px solid ".concat(theme.colors.neutral[200], ";") : "";
58
+ } = _ref7;
59
+ return tabType === constants.TabTypes.NORMAL ? "\n background: linear-gradient(to bottom, white 0px, white 30px, ".concat(theme.colors.neutral[400], " 30px, ").concat(theme.colors.neutral[400], " 31px, white 31px , white 32px );\n ") : "";
55
60
  });
56
61
 
57
62
  exports.StyledCarouselBtn = StyledCarouselBtn;
package/cjs/parts/tabBar/styles.js CHANGED
@@ -20,7 +20,7 @@ const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.wit
20
20
  tabType,
21
21
  isDSMobile
22
22
  } = _ref;
23
- if (isDSMobile) return "34px";
23
+ if (isDSMobile) return "35px";
24
24
  if (tabType === constants.TabTypes.NORMAL_SMALL) return "15px";
25
25
  return "25px";
26
26
  }, _ref2 => {
@@ -52,135 +52,136 @@ const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject
52
52
  });
53
53
  const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
54
54
  componentId: "sc-3hla56-1"
55
- })(["display:flex;flex:1;flex-wrap:nowrap;", ""], _ref5 => {
55
+ })(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
56
56
  let {
57
57
  fixedTabsHeaders,
58
58
  isDSMobile
59
59
  } = _ref5;
60
60
  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
61
+ }, _ref6 => {
62
+ let {
63
+ theme,
64
+ isDSMobile
65
+ } = _ref6;
66
+ return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";") : "";
61
67
  });
62
68
  const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfig({
63
69
  componentId: "sc-3hla56-2"
64
- })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref6 => {
70
+ })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
65
71
  let {
66
72
  tabType
67
- } = _ref6;
73
+ } = _ref7;
68
74
  return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
69
- }, _ref7 => {
75
+ }, _ref8 => {
70
76
  let {
71
77
  fixedTabsHeaders,
72
78
  isDSMobile
73
- } = _ref7;
79
+ } = _ref8;
74
80
  if (fixedTabsHeaders) return '0px';
75
81
  if (!fixedTabsHeaders && isDSMobile) return '14px';
76
82
  return '16px';
77
- }, _ref8 => {
83
+ }, _ref9 => {
78
84
  let {
79
85
  fixedTabsHeaders,
80
86
  isDSMobile
81
- } = _ref8;
87
+ } = _ref9;
82
88
  if (fixedTabsHeaders) return '0px';
83
89
  if (!fixedTabsHeaders && isDSMobile) return '14px';
84
90
  return '16px';
85
- }, _ref9 => {
91
+ }, _ref10 => {
86
92
  let {
87
93
  theme
88
- } = _ref9;
94
+ } = _ref10;
89
95
  return theme.colors.neutral[700];
90
- }, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref10 => {
96
+ }, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
91
97
  let {
92
98
  tabType
93
- } = _ref10;
94
- return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
95
- }, _ref11 => {
96
- let {
97
- theme,
98
- isActive,
99
- disabled
100
99
  } = _ref11;
101
- return isActive && !disabled ? "\n font-weight: ".concat(theme.fontWeights.semibold, ";\n ").concat(dsSystem.safariAndFirefoxBold("#353C46"), "\n\n &:hover {\n ").concat(dsSystem.safariAndFirefoxBold("#1E79C2"), "\n }\n \n ") : "\n \n ";
100
+ return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
102
101
  }, _ref12 => {
103
102
  let {
104
103
  theme,
104
+ isActive,
105
105
  disabled
106
106
  } = _ref12;
107
- return disabled ? "\n color: ".concat(theme.colors.neutral[500], ";\n cursor: not-allowed;\n ") : "\n &:hover {\n color: ".concat(theme.colors.brand[600], ";\n }\n ");
107
+ return isActive && !disabled ? "\n font-weight: ".concat(theme.fontWeights.semibold, ";\n ").concat(dsSystem.safariAndFirefoxBold("#353C46"), "\n\n &:hover {\n ").concat(dsSystem.safariAndFirefoxBold("#1E79C2"), "\n }\n \n ") : "\n \n ";
108
108
  }, _ref13 => {
109
109
  let {
110
110
  theme,
111
- isDSMobile
111
+ disabled
112
112
  } = _ref13;
113
- return !isDSMobile ? "\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 ".concat(theme.colors.brand[600], ";\n }\n }\n \n ") : "";
113
+ return disabled ? "\n color: ".concat(theme.colors.neutral[500], ";\n cursor: not-allowed;\n ") : "\n &:hover {\n color: ".concat(theme.colors.brand[600], ";\n }\n ");
114
114
  }, _ref14 => {
115
115
  let {
116
116
  theme,
117
117
  showSeparator,
118
118
  tabType
119
119
  } = _ref14;
120
- return showSeparator ? "\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -17px;\n top: 50%;\n transform: translateY(-50%);\n height: ".concat(tabType === constants.TabTypes.NORMAL_SMALL ? "10px" : "16px", ";\n background-color: ").concat(theme.colors.neutral[400], ";\n }") : "";
120
+ return showSeparator ? "\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: ".concat(tabType === constants.TabTypes.SUBTABS ? "10px" : "16px", ";\n background: ").concat(theme.colors.neutral[400], ";\n }") : "";
121
121
  }, _ref15 => {
122
+ let {
123
+ theme,
124
+ isDSMobile,
125
+ tabType,
126
+ isActive
127
+ } = _ref15;
128
+ return !isDSMobile ? "\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 ".concat(theme.colors.brand[700], ";\n }\n\n ").concat(tabType !== constants.TabTypes.SUBTABS && isActive ? "\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 ") : "";
129
+ }, _ref16 => {
122
130
  let {
123
131
  theme,
124
132
  isActive,
125
133
  disabled,
126
134
  isDSMobile
127
- } = _ref15;
135
+ } = _ref16;
128
136
  return isDSMobile ? "\n height: 40px;\n color: ".concat(theme.colors.brand[600], ";\n font-weight: ").concat(theme.fontWeights.regular, ";\n padding: 0;\n font-size: 13px;\n line-height: 1.3;\n ").concat(dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), " \n\n &:focus {\n font-weight: ").concat(theme.fontWeights.regular, ";\n font-size: 13px;\n ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n }\n\n ").concat(isActive ? "\n font-weight: ".concat(theme.fontWeights.regular, ";\n font-size: 13px;\n ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n ") : "", "\n\n ").concat(isActive && !disabled ? "\n font-size: 13px;\n color: ".concat(theme.colors.brand[700], ";\n line-height: 1.3;\n font-weight: ").concat(theme.fontWeights.regular, ";\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ").concat(theme.colors.brand[700], ";") : "", "\n\n ").concat(!disabled ? "\n &:hover,\n &:focus {\n outline: none;\n color: ".concat(theme.colors.brand[700], ";\n ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n }") : "", "\n\n ") : "";
129
137
  });
130
138
  const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
131
139
  componentId: "sc-3hla56-3"
132
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref16 => {
140
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
133
141
  let {
134
142
  withCarousel
135
- } = _ref16;
143
+ } = _ref17;
136
144
  return withCarousel ? 'max-width: 100%;' : '';
137
145
  });
138
146
  const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
139
147
  componentId: "sc-3hla56-4"
140
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}&:not(:focus-within){", "{background:", ";}}&:focus-within{", "{background:", "}"], _ref17 => {
148
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
141
149
  let {
142
150
  withCarousel,
143
151
  isDSMobile
144
- } = _ref17;
152
+ } = _ref18;
145
153
  return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
146
- }, _ref18 => {
154
+ }, _ref19 => {
147
155
  let {
148
156
  theme,
149
157
  isDSMobile,
150
158
  tabType
151
- } = _ref18;
152
- return tabType !== constants.TabTypes.NORMAL_SMALL ? "\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: ".concat(isDSMobile ? theme.colors.brand[200] : theme.colors.neutral[200], ";\n pointer-events: none;\n }\n ") : "";
153
- }, StyledTabButton, _ref19 => {
159
+ } = _ref19;
160
+ return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? "\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ".concat(theme.colors.neutral[400], ";\n pointer-events: none;\n bottom: 0px;\n }\n ") : "";
161
+ }, StyledTabButton, _ref20 => {
154
162
  let {
155
163
  theme,
156
164
  isDSMobile
157
- } = _ref19;
158
- return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";\n background: ").concat(theme.colors.brand[200], ";") : "";
159
- }, mobileGradientsSettings, _ref20 => {
165
+ } = _ref20;
166
+ return isDSMobile ? "\n \n background: ".concat(theme.colors.brand[200], ";") : "";
167
+ }, mobileGradientsSettings, _ref21 => {
160
168
  let {
161
169
  isDSMobile,
162
170
  fixedTabsHeaders
163
- } = _ref20;
164
- return isDSMobile ? "\n ".concat(!fixedTabsHeaders ? "\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }" : "\n display: flex;\n ".concat(StyledTabButton, " {\n flex: 1;\n overflow-x: hidden;\n }")) : "";
165
- }, StyledSelectionIndicator, _ref21 => {
166
- let {
167
- indicatorStyle
168
171
  } = _ref21;
169
- return "\n width: ".concat(indicatorStyle.width, ";\n left: ").concat(indicatorStyle.left, ";\n ");
172
+ return isDSMobile ? "\n ".concat(!fixedTabsHeaders ? "\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }" : "\n display: flex;\n ".concat(StyledTabButton, " {\n flex: 1;\n overflow-x: hidden;\n }")) : "";
170
173
  }, StyledSelectionIndicator, _ref22 => {
171
174
  let {
172
- theme,
173
- indicatorStyle,
174
- isDSMobile
175
+ indicatorStyle
175
176
  } = _ref22;
176
- return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
177
+ return "\n width: ".concat(indicatorStyle.width, ";\n left: ").concat(indicatorStyle.left, ";\n ");
177
178
  }, StyledSelectionIndicator, _ref23 => {
178
179
  let {
179
180
  theme,
180
181
  indicatorStyle,
181
182
  isDSMobile
182
183
  } = _ref23;
183
- return !isDSMobile ? indicatorStyle.backgroundWithTransparentAndWhite : theme.colors.brand[600];
184
+ return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
184
185
  });
185
186
  const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
186
187
  componentId: "sc-3hla56-5"
package/cjs/parts/tabBar/useTabBar.js CHANGED
@@ -41,12 +41,10 @@ const useTabBar = () => {
41
41
  // behavior that adds scroll to the tabList
42
42
 
43
43
  const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
44
- const backgroundWithTransparentAndWhite = "linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, #1E79C2 16px, #1E79C2 ".concat(tabClientWidth - 16, "px,white ").concat(tabClientWidth - 16, "px,white ").concat(tabClientWidth - 12, "px,transparent ").concat(tabClientWidth - 12, "px,transparent ").concat(tabClientWidth, "px )");
45
44
  const backgroundWithTransparent = "linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2 ".concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth, "px )");
46
45
  return {
47
46
  left: "".concat(position, "px"),
48
47
  width: "".concat(tabClientWidth, "px"),
49
- backgroundWithTransparentAndWhite,
50
48
  backgroundWithTransparent
51
49
  };
52
50
  }
package/cjs/utils/constants.js CHANGED
@@ -12,7 +12,6 @@ const MOBILE_GRADIENT_WIDTH = 24;
12
12
  const defaultIndicatorStyles = {
13
13
  left: '0px',
14
14
  width: '0px',
15
- backgroundWithTransparentAndWhite: '',
16
15
  backgroundWithTransparent: ''
17
16
  };
18
17
  const gradientOffsetsAccordingType = {
package/esm/config/useTabs.js CHANGED
@@ -28,8 +28,8 @@ const useTabs = props => {
28
28
  useEffect(() => {
29
29
  var _focusableTabsRef$cur;
30
30
 
31
- actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === internalActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
32
- }, [internalActiveTab]);
31
+ actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
32
+ }, [actualActiveTab]);
33
33
  const ctx = useMemo(() => ({
34
34
  props: propsWithDefaults,
35
35
  tabsRef,
package/esm/parts/carousel/Carousel.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import { useContext } from 'react';
3
- import { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';
3
+ import { DSIconSizes } from '@elliemae/ds-icon';
4
4
  import { BUTTON_TYPES } from '@elliemae/ds-button';
5
5
  import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
6
6
  import { StyledCarouselWrapper, StyledCarouselButtonWrapper, StyledCarouselBtn, StyledChildrenWrap } from './styles.js';
@@ -38,8 +38,7 @@ const Carousel = _ref => {
38
38
  "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
39
39
  buttonType: BUTTON_TYPES.ICON
40
40
  }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
41
- size: DSIconSizes.S,
42
- color: DSIconColors.PRIMARY
41
+ size: DSIconSizes.S
43
42
  }))), showChevrons.right && /*#__PURE__*/_jsx(StyledCarouselButtonWrapper, {
44
43
  tabType: type,
45
44
  right: showChevrons.right
@@ -50,8 +49,7 @@ const Carousel = _ref => {
50
49
  "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
51
50
  buttonType: BUTTON_TYPES.ICON
52
51
  }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
53
- size: DSIconSizes.S,
54
- color: DSIconColors.PRIMARY
52
+ size: DSIconSizes.S
55
53
  }))), /*#__PURE__*/jsx(StyledChildrenWrap, {
56
54
  ref: carouselOnlyListRef,
57
55
  onClick: handleOnClick,
package/esm/parts/carousel/styles.js CHANGED
@@ -4,7 +4,7 @@ import { TabTypes } from '../../utils/constants.js';
4
4
 
5
5
  const StyledCarouselBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
6
6
  componentId: "sc-prv5a7-0"
7
- })(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;"], _ref => {
7
+ })(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;& .em-ds-icon svg{fill:", ";}"], _ref => {
8
8
  let {
9
9
  theme
10
10
  } = _ref;
@@ -14,6 +14,11 @@ const StyledCarouselBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
14
14
  theme
15
15
  } = _ref2;
16
16
  return theme.space.xs;
17
+ }, _ref3 => {
18
+ let {
19
+ theme
20
+ } = _ref3;
21
+ return theme.colors.brand[600];
17
22
  });
18
23
  const StyledCarouselWrapper = /*#__PURE__*/styled.span.withConfig({
19
24
  componentId: "sc-prv5a7-1"
@@ -23,27 +28,27 @@ const StyledChildrenWrap = /*#__PURE__*/styled.div.withConfig({
23
28
  })(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
24
29
  const StyledCarouselButtonWrapper = /*#__PURE__*/styled.div.withConfig({
25
30
  componentId: "sc-prv5a7-3"
26
- })(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background-color:white;", ";"], _ref3 => {
31
+ })(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background:white;", ";"], _ref4 => {
27
32
  let {
28
33
  right
29
- } = _ref3;
34
+ } = _ref4;
30
35
  return right ? 'right: 0;' : "left: 0;";
31
- }, _ref4 => {
36
+ }, _ref5 => {
32
37
  let {
33
38
  tabType
34
- } = _ref4;
39
+ } = _ref5;
35
40
  return tabType === TabTypes.NORMAL ? '32px' : '22px';
36
- }, _ref5 => {
41
+ }, _ref6 => {
37
42
  let {
38
43
  tabType
39
- } = _ref5;
44
+ } = _ref6;
40
45
  return tabType === TabTypes.NORMAL ? '5px' : '0px';
41
- }, _ref6 => {
46
+ }, _ref7 => {
42
47
  let {
43
48
  theme,
44
49
  tabType
45
- } = _ref6;
46
- return tabType === TabTypes.NORMAL ? "\n border-bottom: 1px solid ".concat(theme.colors.neutral[200], ";") : "";
50
+ } = _ref7;
51
+ return tabType === TabTypes.NORMAL ? "\n background: linear-gradient(to bottom, white 0px, white 30px, ".concat(theme.colors.neutral[400], " 30px, ").concat(theme.colors.neutral[400], " 31px, white 31px , white 32px );\n ") : "";
47
52
  });
48
53
 
49
54
  export { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap };
package/esm/parts/tabBar/styles.js CHANGED
@@ -11,7 +11,7 @@ const StyledSelectionIndicator = /*#__PURE__*/styled.div.withConfig({
11
11
  tabType,
12
12
  isDSMobile
13
13
  } = _ref;
14
- if (isDSMobile) return "34px";
14
+ if (isDSMobile) return "35px";
15
15
  if (tabType === TabTypes.NORMAL_SMALL) return "15px";
16
16
  return "25px";
17
17
  }, _ref2 => {
@@ -43,135 +43,136 @@ const mobileGradientsSettings = css(_templateObject || (_templateObject = _tagge
43
43
  });
44
44
  const StyledTabWrapper = /*#__PURE__*/styled.div.withConfig({
45
45
  componentId: "sc-3hla56-1"
46
- })(["display:flex;flex:1;flex-wrap:nowrap;", ""], _ref5 => {
46
+ })(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
47
47
  let {
48
48
  fixedTabsHeaders,
49
49
  isDSMobile
50
50
  } = _ref5;
51
51
  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
52
+ }, _ref6 => {
53
+ let {
54
+ theme,
55
+ isDSMobile
56
+ } = _ref6;
57
+ return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";") : "";
52
58
  });
53
59
  const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
54
60
  componentId: "sc-3hla56-2"
55
- })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref6 => {
61
+ })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
56
62
  let {
57
63
  tabType
58
- } = _ref6;
64
+ } = _ref7;
59
65
  return tabType === TabTypes.SUBTABS ? "capitalize" : "uppercase";
60
- }, _ref7 => {
66
+ }, _ref8 => {
61
67
  let {
62
68
  fixedTabsHeaders,
63
69
  isDSMobile
64
- } = _ref7;
70
+ } = _ref8;
65
71
  if (fixedTabsHeaders) return '0px';
66
72
  if (!fixedTabsHeaders && isDSMobile) return '14px';
67
73
  return '16px';
68
- }, _ref8 => {
74
+ }, _ref9 => {
69
75
  let {
70
76
  fixedTabsHeaders,
71
77
  isDSMobile
72
- } = _ref8;
78
+ } = _ref9;
73
79
  if (fixedTabsHeaders) return '0px';
74
80
  if (!fixedTabsHeaders && isDSMobile) return '14px';
75
81
  return '16px';
76
- }, _ref9 => {
82
+ }, _ref10 => {
77
83
  let {
78
84
  theme
79
- } = _ref9;
85
+ } = _ref10;
80
86
  return theme.colors.neutral[700];
81
- }, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref10 => {
87
+ }, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
82
88
  let {
83
89
  tabType
84
- } = _ref10;
85
- return tabType === TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
86
- }, _ref11 => {
87
- let {
88
- theme,
89
- isActive,
90
- disabled
91
90
  } = _ref11;
92
- return isActive && !disabled ? "\n font-weight: ".concat(theme.fontWeights.semibold, ";\n ").concat(safariAndFirefoxBold("#353C46"), "\n\n &:hover {\n ").concat(safariAndFirefoxBold("#1E79C2"), "\n }\n \n ") : "\n \n ";
91
+ return tabType === TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
93
92
  }, _ref12 => {
94
93
  let {
95
94
  theme,
95
+ isActive,
96
96
  disabled
97
97
  } = _ref12;
98
- return disabled ? "\n color: ".concat(theme.colors.neutral[500], ";\n cursor: not-allowed;\n ") : "\n &:hover {\n color: ".concat(theme.colors.brand[600], ";\n }\n ");
98
+ return isActive && !disabled ? "\n font-weight: ".concat(theme.fontWeights.semibold, ";\n ").concat(safariAndFirefoxBold("#353C46"), "\n\n &:hover {\n ").concat(safariAndFirefoxBold("#1E79C2"), "\n }\n \n ") : "\n \n ";
99
99
  }, _ref13 => {
100
100
  let {
101
101
  theme,
102
- isDSMobile
102
+ disabled
103
103
  } = _ref13;
104
- return !isDSMobile ? "\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 ".concat(theme.colors.brand[600], ";\n }\n }\n \n ") : "";
104
+ return disabled ? "\n color: ".concat(theme.colors.neutral[500], ";\n cursor: not-allowed;\n ") : "\n &:hover {\n color: ".concat(theme.colors.brand[600], ";\n }\n ");
105
105
  }, _ref14 => {
106
106
  let {
107
107
  theme,
108
108
  showSeparator,
109
109
  tabType
110
110
  } = _ref14;
111
- return showSeparator ? "\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -17px;\n top: 50%;\n transform: translateY(-50%);\n height: ".concat(tabType === TabTypes.NORMAL_SMALL ? "10px" : "16px", ";\n background-color: ").concat(theme.colors.neutral[400], ";\n }") : "";
111
+ return showSeparator ? "\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: ".concat(tabType === TabTypes.SUBTABS ? "10px" : "16px", ";\n background: ").concat(theme.colors.neutral[400], ";\n }") : "";
112
112
  }, _ref15 => {
113
+ let {
114
+ theme,
115
+ isDSMobile,
116
+ tabType,
117
+ isActive
118
+ } = _ref15;
119
+ return !isDSMobile ? "\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 ".concat(theme.colors.brand[700], ";\n }\n\n ").concat(tabType !== TabTypes.SUBTABS && isActive ? "\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 ") : "";
120
+ }, _ref16 => {
113
121
  let {
114
122
  theme,
115
123
  isActive,
116
124
  disabled,
117
125
  isDSMobile
118
- } = _ref15;
126
+ } = _ref16;
119
127
  return isDSMobile ? "\n height: 40px;\n color: ".concat(theme.colors.brand[600], ";\n font-weight: ").concat(theme.fontWeights.regular, ";\n padding: 0;\n font-size: 13px;\n line-height: 1.3;\n ").concat(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), " \n\n &:focus {\n font-weight: ").concat(theme.fontWeights.regular, ";\n font-size: 13px;\n ").concat(safariAndFirefoxBold('#006AA9'), "\n }\n\n ").concat(isActive ? "\n font-weight: ".concat(theme.fontWeights.regular, ";\n font-size: 13px;\n ").concat(safariAndFirefoxBold('#006AA9'), "\n ") : "", "\n\n ").concat(isActive && !disabled ? "\n font-size: 13px;\n color: ".concat(theme.colors.brand[700], ";\n line-height: 1.3;\n font-weight: ").concat(theme.fontWeights.regular, ";\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ").concat(theme.colors.brand[700], ";") : "", "\n\n ").concat(!disabled ? "\n &:hover,\n &:focus {\n outline: none;\n color: ".concat(theme.colors.brand[700], ";\n ").concat(safariAndFirefoxBold('#006AA9'), "\n }") : "", "\n\n ") : "";
120
128
  });
121
129
  const StyledSubTabsList = /*#__PURE__*/styled.div.withConfig({
122
130
  componentId: "sc-3hla56-3"
123
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref16 => {
131
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
124
132
  let {
125
133
  withCarousel
126
- } = _ref16;
134
+ } = _ref17;
127
135
  return withCarousel ? 'max-width: 100%;' : '';
128
136
  });
129
137
  const StyledTabList = /*#__PURE__*/styled.div.withConfig({
130
138
  componentId: "sc-3hla56-4"
131
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}&:not(:focus-within){", "{background:", ";}}&:focus-within{", "{background:", "}"], _ref17 => {
139
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
132
140
  let {
133
141
  withCarousel,
134
142
  isDSMobile
135
- } = _ref17;
143
+ } = _ref18;
136
144
  return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
137
- }, _ref18 => {
145
+ }, _ref19 => {
138
146
  let {
139
147
  theme,
140
148
  isDSMobile,
141
149
  tabType
142
- } = _ref18;
143
- return tabType !== TabTypes.NORMAL_SMALL ? "\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: ".concat(isDSMobile ? theme.colors.brand[200] : theme.colors.neutral[200], ";\n pointer-events: none;\n }\n ") : "";
144
- }, StyledTabButton, _ref19 => {
150
+ } = _ref19;
151
+ return tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ? "\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ".concat(theme.colors.neutral[400], ";\n pointer-events: none;\n bottom: 0px;\n }\n ") : "";
152
+ }, StyledTabButton, _ref20 => {
145
153
  let {
146
154
  theme,
147
155
  isDSMobile
148
- } = _ref19;
149
- return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";\n background: ").concat(theme.colors.brand[200], ";") : "";
150
- }, mobileGradientsSettings, _ref20 => {
156
+ } = _ref20;
157
+ return isDSMobile ? "\n \n background: ".concat(theme.colors.brand[200], ";") : "";
158
+ }, mobileGradientsSettings, _ref21 => {
151
159
  let {
152
160
  isDSMobile,
153
161
  fixedTabsHeaders
154
- } = _ref20;
155
- return isDSMobile ? "\n ".concat(!fixedTabsHeaders ? "\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }" : "\n display: flex;\n ".concat(StyledTabButton, " {\n flex: 1;\n overflow-x: hidden;\n }")) : "";
156
- }, StyledSelectionIndicator, _ref21 => {
157
- let {
158
- indicatorStyle
159
162
  } = _ref21;
160
- return "\n width: ".concat(indicatorStyle.width, ";\n left: ").concat(indicatorStyle.left, ";\n ");
163
+ return isDSMobile ? "\n ".concat(!fixedTabsHeaders ? "\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }" : "\n display: flex;\n ".concat(StyledTabButton, " {\n flex: 1;\n overflow-x: hidden;\n }")) : "";
161
164
  }, StyledSelectionIndicator, _ref22 => {
162
165
  let {
163
- theme,
164
- indicatorStyle,
165
- isDSMobile
166
+ indicatorStyle
166
167
  } = _ref22;
167
- return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
168
+ return "\n width: ".concat(indicatorStyle.width, ";\n left: ").concat(indicatorStyle.left, ";\n ");
168
169
  }, StyledSelectionIndicator, _ref23 => {
169
170
  let {
170
171
  theme,
171
172
  indicatorStyle,
172
173
  isDSMobile
173
174
  } = _ref23;
174
- return !isDSMobile ? indicatorStyle.backgroundWithTransparentAndWhite : theme.colors.brand[600];
175
+ return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
175
176
  });
176
177
  const StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
177
178
  componentId: "sc-3hla56-5"
package/esm/parts/tabBar/useTabBar.js CHANGED
@@ -33,12 +33,10 @@ const useTabBar = () => {
33
33
  // behavior that adds scroll to the tabList
34
34
 
35
35
  const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
36
- const backgroundWithTransparentAndWhite = "linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, #1E79C2 16px, #1E79C2 ".concat(tabClientWidth - 16, "px,white ").concat(tabClientWidth - 16, "px,white ").concat(tabClientWidth - 12, "px,transparent ").concat(tabClientWidth - 12, "px,transparent ").concat(tabClientWidth, "px )");
37
36
  const backgroundWithTransparent = "linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2 ".concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth, "px )");
38
37
  return {
39
38
  left: "".concat(position, "px"),
40
39
  width: "".concat(tabClientWidth, "px"),
41
- backgroundWithTransparentAndWhite,
42
40
  backgroundWithTransparent
43
41
  };
44
42
  }
package/esm/utils/constants.js CHANGED
@@ -8,7 +8,6 @@ const MOBILE_GRADIENT_WIDTH = 24;
8
8
  const defaultIndicatorStyles = {
9
9
  left: '0px',
10
10
  width: '0px',
11
- backgroundWithTransparentAndWhite: '',
12
11
  backgroundWithTransparent: ''
13
12
  };
14
13
  const gradientOffsetsAccordingType = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "2.1.0-rc.6",
3
+ "version": "2.1.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "module": "./esm/index.js",
@@ -128,11 +128,11 @@
128
128
  "build": "node ../../scripts/build/build.js"
129
129
  },
130
130
  "dependencies": {
131
- "@elliemae/ds-button": "2.1.0-rc.6",
132
- "@elliemae/ds-icon": "2.1.0-rc.6",
133
- "@elliemae/ds-icons": "2.1.0-rc.6",
134
- "@elliemae/ds-props-helpers": "2.1.0-rc.6",
135
- "@elliemae/ds-system": "2.1.0-rc.6",
131
+ "@elliemae/ds-button": "2.1.0",
132
+ "@elliemae/ds-icon": "2.1.0",
133
+ "@elliemae/ds-icons": "2.1.0",
134
+ "@elliemae/ds-props-helpers": "2.1.0",
135
+ "@elliemae/ds-system": "2.1.0",
136
136
  "@react-hook/resize-observer": "~1.2.5",
137
137
  "prop-types": "~15.7.2",
138
138
  "react-desc": "~4.1.3",
package/types/DSTabsTypes.d.ts CHANGED
@@ -124,7 +124,6 @@ export interface MobileGradientsT {
124
124
  export interface IndicatorStyleT {
125
125
  left: string;
126
126
  width: string;
127
- backgroundWithTransparentAndWhite: string;
128
127
  backgroundWithTransparent: string;
129
128
  }
130
129
  export interface UseCarouselReturnTypeT {
package/types/utils/constants.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare const MOBILE_GRADIENT_WIDTH = 24;
8
8
  export declare const defaultIndicatorStyles: {
9
9
  left: string;
10
10
  width: string;
11
- backgroundWithTransparentAndWhite: string;
12
11
  backgroundWithTransparent: string;
13
12
  };
14
13
  export declare const gradientOffsetsAccordingType: {