@elliemae/ds-tabs 2.0.0-rc.13 → 2.0.0-rc.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cjs/parts/carousel/useCarousel.js +8 -21
  2. package/cjs/parts/tabBar/TabBar.js +1 -1
  3. package/cjs/parts/tabBar/styles.js +1 -1
  4. package/cjs/parts/tabsPanel/styles.js +4 -9
  5. package/esm/parts/carousel/useCarousel.js +5 -22
  6. package/esm/parts/tabBar/TabBar.js +1 -1
  7. package/esm/parts/tabBar/styles.js +1 -1
  8. package/esm/parts/tabsPanel/styles.js +4 -9
  9. package/package.json +6 -10
  10. package/cjs/utils/hooks/useResize.js +0 -28
  11. package/esm/utils/hooks/useResize.js +0 -24
  12. package/types/utils/hooks/useResize.d.ts +0 -2
package/cjs/parts/carousel/useCarousel.js CHANGED
@@ -7,23 +7,22 @@ require('core-js/modules/esnext.async-iterator.reduce.js');
7
7
  require('core-js/modules/esnext.iterator.constructor.js');
8
8
  require('core-js/modules/esnext.iterator.reduce.js');
9
9
  var React = require('react');
10
+ var useResizeObserver = require('@react-hook/resize-observer');
10
11
  var DSTabsCTX = require('../../DSTabsCTX.js');
11
12
  var helpers = require('../../utils/helpers.js');
12
- var useResize = require('../../utils/hooks/useResize.js');
13
13
  var useCarouselCallbacks = require('./useCarouselCallbacks.js');
14
14
 
15
- const useCarousel = _ref => {
16
- var _carouselOnlyListRef$, _carouselOnlyListRef$2, _carouselOnlyListRef$3;
15
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
+
17
+ var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
17
18
 
19
+ const useCarousel = _ref => {
18
20
  let {
19
21
  updateIndicatorStyle
20
22
  } = _ref;
21
23
  const {
22
24
  carouselOnlyListRef
23
25
  } = React.useContext(DSTabsCTX.DSTabsContext);
24
- const carouselListScrollLeft = carouselOnlyListRef === null || carouselOnlyListRef === void 0 ? void 0 : (_carouselOnlyListRef$ = carouselOnlyListRef.current) === null || _carouselOnlyListRef$ === void 0 ? void 0 : _carouselOnlyListRef$.scrollLeft;
25
- const carouselListClientWidth = carouselOnlyListRef === null || carouselOnlyListRef === void 0 ? void 0 : (_carouselOnlyListRef$2 = carouselOnlyListRef.current) === null || _carouselOnlyListRef$2 === void 0 ? void 0 : _carouselOnlyListRef$2.clientWidth;
26
- const carouselListScrollWidth = carouselOnlyListRef === null || carouselOnlyListRef === void 0 ? void 0 : (_carouselOnlyListRef$3 = carouselOnlyListRef.current) === null || _carouselOnlyListRef$3 === void 0 ? void 0 : _carouselOnlyListRef$3.scrollWidth;
27
26
  const [showChevrons, setShowChevrons] = React.useState({
28
27
  right: false,
29
28
  left: false
@@ -31,14 +30,8 @@ const useCarousel = _ref => {
31
30
  const {
32
31
  tabsRefAsArray
33
32
  } = React.useContext(DSTabsCTX.DSTabsContext);
34
- const shouldShowLeft = React.useCallback(() => {
35
- if (typeof carouselListScrollLeft === 'number') return carouselListScrollLeft > 0;
36
- return false;
37
- }, [carouselListScrollLeft]);
38
- const shouldShowRight = React.useCallback(() => {
39
- if (typeof carouselListScrollLeft === 'number' && typeof carouselListClientWidth === 'number' && typeof carouselListScrollWidth === 'number') return carouselListScrollLeft < carouselListScrollWidth - carouselListClientWidth;
40
- return false;
41
- }, [carouselListClientWidth, carouselListScrollLeft, carouselListScrollWidth]);
33
+ const shouldShowLeft = React.useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false, [carouselOnlyListRef]);
34
+ const shouldShowRight = React.useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false, [carouselOnlyListRef]);
42
35
  const recalcChevrons = React.useCallback(() => {
43
36
  setShowChevrons({
44
37
  right: shouldShowRight(),
@@ -62,13 +55,7 @@ const useCarousel = _ref => {
62
55
 
63
56
  return 0;
64
57
  }, [tabsRefAsArray, carouselOnlyListRef]);
65
- React.useEffect(() => {
66
- recalcChevrons(); // this can cause optimization problems but for now it's good enough
67
- }, [recalcChevrons]);
68
- useResize.useResize({
69
- ref: carouselOnlyListRef,
70
- callback: recalcChevrons
71
- });
58
+ useResizeObserver__default["default"](carouselOnlyListRef, recalcChevrons);
72
59
  const {
73
60
  leftButtonOnClick,
74
61
  rightButtonOnClick,
package/cjs/parts/tabBar/TabBar.js CHANGED
@@ -80,7 +80,7 @@ const TabBar = () => {
80
80
  firstSubtabInternalRef.current = t;
81
81
  }
82
82
 
83
- if (type === constants.TabTypes.NORMAL && index === availableTabIndexes[availableTabIndexes.length - 1]) {
83
+ if (type !== constants.TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
84
84
  lastTabInternalRef.current = t;
85
85
  }
86
86
 
package/cjs/parts/tabBar/styles.js CHANGED
@@ -65,7 +65,7 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
65
65
  let {
66
66
  tabType
67
67
  } = _ref6;
68
- return tabType === constants.TabTypes.NORMAL ? "uppercase" : "capitalize";
68
+ return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
69
69
  }, _ref7 => {
70
70
  let {
71
71
  fixedTabsHeaders,
package/cjs/parts/tabsPanel/styles.js CHANGED
@@ -10,20 +10,15 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
10
 
11
11
  const StyledPanelContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
12
12
  componentId: "sc-oxw5jq-0"
13
- })(["padding-top:", ";&:focus{outline:none;}", " ", ""], _ref => {
14
- let {
15
- theme
16
- } = _ref;
17
- return theme.space.xs;
18
- }, _ref2 => {
13
+ })(["padding-top:8px;&:focus{outline:none;}", " ", ""], _ref => {
19
14
  let {
20
15
  hidden
21
- } = _ref2;
16
+ } = _ref;
22
17
  return hidden ? 'visibility: hidden;' : '';
23
- }, _ref3 => {
18
+ }, _ref2 => {
24
19
  let {
25
20
  isDSMobile
26
- } = _ref3;
21
+ } = _ref2;
27
22
  return isDSMobile ? "padding-top: 0;" : "";
28
23
  });
29
24
 
package/esm/parts/carousel/useCarousel.js CHANGED
@@ -2,24 +2,19 @@ import 'core-js/modules/web.dom-collections.iterator.js';
2
2
  import 'core-js/modules/esnext.async-iterator.reduce.js';
3
3
  import 'core-js/modules/esnext.iterator.constructor.js';
4
4
  import 'core-js/modules/esnext.iterator.reduce.js';
5
- import { useContext, useState, useCallback, useEffect } from 'react';
5
+ import { useContext, useState, useCallback } from 'react';
6
+ import useResizeObserver from '@react-hook/resize-observer';
6
7
  import { DSTabsContext } from '../../DSTabsCTX.js';
7
8
  import { isElementVisibleCarousel } from '../../utils/helpers.js';
8
- import { useResize } from '../../utils/hooks/useResize.js';
9
9
  import { useCarouselCallbacks } from './useCarouselCallbacks.js';
10
10
 
11
11
  const useCarousel = _ref => {
12
- var _carouselOnlyListRef$, _carouselOnlyListRef$2, _carouselOnlyListRef$3;
13
-
14
12
  let {
15
13
  updateIndicatorStyle
16
14
  } = _ref;
17
15
  const {
18
16
  carouselOnlyListRef
19
17
  } = useContext(DSTabsContext);
20
- const carouselListScrollLeft = carouselOnlyListRef === null || carouselOnlyListRef === void 0 ? void 0 : (_carouselOnlyListRef$ = carouselOnlyListRef.current) === null || _carouselOnlyListRef$ === void 0 ? void 0 : _carouselOnlyListRef$.scrollLeft;
21
- const carouselListClientWidth = carouselOnlyListRef === null || carouselOnlyListRef === void 0 ? void 0 : (_carouselOnlyListRef$2 = carouselOnlyListRef.current) === null || _carouselOnlyListRef$2 === void 0 ? void 0 : _carouselOnlyListRef$2.clientWidth;
22
- const carouselListScrollWidth = carouselOnlyListRef === null || carouselOnlyListRef === void 0 ? void 0 : (_carouselOnlyListRef$3 = carouselOnlyListRef.current) === null || _carouselOnlyListRef$3 === void 0 ? void 0 : _carouselOnlyListRef$3.scrollWidth;
23
18
  const [showChevrons, setShowChevrons] = useState({
24
19
  right: false,
25
20
  left: false
@@ -27,14 +22,8 @@ const useCarousel = _ref => {
27
22
  const {
28
23
  tabsRefAsArray
29
24
  } = useContext(DSTabsContext);
30
- const shouldShowLeft = useCallback(() => {
31
- if (typeof carouselListScrollLeft === 'number') return carouselListScrollLeft > 0;
32
- return false;
33
- }, [carouselListScrollLeft]);
34
- const shouldShowRight = useCallback(() => {
35
- if (typeof carouselListScrollLeft === 'number' && typeof carouselListClientWidth === 'number' && typeof carouselListScrollWidth === 'number') return carouselListScrollLeft < carouselListScrollWidth - carouselListClientWidth;
36
- return false;
37
- }, [carouselListClientWidth, carouselListScrollLeft, carouselListScrollWidth]);
25
+ const shouldShowLeft = useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false, [carouselOnlyListRef]);
26
+ const shouldShowRight = useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false, [carouselOnlyListRef]);
38
27
  const recalcChevrons = useCallback(() => {
39
28
  setShowChevrons({
40
29
  right: shouldShowRight(),
@@ -58,13 +47,7 @@ const useCarousel = _ref => {
58
47
 
59
48
  return 0;
60
49
  }, [tabsRefAsArray, carouselOnlyListRef]);
61
- useEffect(() => {
62
- recalcChevrons(); // this can cause optimization problems but for now it's good enough
63
- }, [recalcChevrons]);
64
- useResize({
65
- ref: carouselOnlyListRef,
66
- callback: recalcChevrons
67
- });
50
+ useResizeObserver(carouselOnlyListRef, recalcChevrons);
68
51
  const {
69
52
  leftButtonOnClick,
70
53
  rightButtonOnClick,
package/esm/parts/tabBar/TabBar.js CHANGED
@@ -71,7 +71,7 @@ const TabBar = () => {
71
71
  firstSubtabInternalRef.current = t;
72
72
  }
73
73
 
74
- if (type === TabTypes.NORMAL && index === availableTabIndexes[availableTabIndexes.length - 1]) {
74
+ if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
75
75
  lastTabInternalRef.current = t;
76
76
  }
77
77
 
package/esm/parts/tabBar/styles.js CHANGED
@@ -56,7 +56,7 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
56
56
  let {
57
57
  tabType
58
58
  } = _ref6;
59
- return tabType === TabTypes.NORMAL ? "uppercase" : "capitalize";
59
+ return tabType === TabTypes.SUBTABS ? "capitalize" : "uppercase";
60
60
  }, _ref7 => {
61
61
  let {
62
62
  fixedTabsHeaders,
package/esm/parts/tabsPanel/styles.js CHANGED
@@ -2,20 +2,15 @@ import styled from 'styled-components';
2
2
 
3
3
  const StyledPanelContainer = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "sc-oxw5jq-0"
5
- })(["padding-top:", ";&:focus{outline:none;}", " ", ""], _ref => {
6
- let {
7
- theme
8
- } = _ref;
9
- return theme.space.xs;
10
- }, _ref2 => {
5
+ })(["padding-top:8px;&:focus{outline:none;}", " ", ""], _ref => {
11
6
  let {
12
7
  hidden
13
- } = _ref2;
8
+ } = _ref;
14
9
  return hidden ? 'visibility: hidden;' : '';
15
- }, _ref3 => {
10
+ }, _ref2 => {
16
11
  let {
17
12
  isDSMobile
18
- } = _ref3;
13
+ } = _ref2;
19
14
  return isDSMobile ? "padding-top: 0;" : "";
20
15
  });
21
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "2.0.0-rc.13",
3
+ "version": "2.0.0-rc.17",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "module": "./esm/index.js",
@@ -15,10 +15,6 @@
15
15
  "import": "./esm/utils/hooks/useTabsCallbacks.js",
16
16
  "require": "./cjs/utils/hooks/useTabsCallbacks.js"
17
17
  },
18
- "./utils/hooks/useResize": {
19
- "import": "./esm/utils/hooks/useResize.js",
20
- "require": "./cjs/utils/hooks/useResize.js"
21
- },
22
18
  "./utils/hooks/useKeyboardNavigation": {
23
19
  "import": "./esm/utils/hooks/useKeyboardNavigation.js",
24
20
  "require": "./cjs/utils/hooks/useKeyboardNavigation.js"
@@ -132,11 +128,11 @@
132
128
  "build": "node ../../scripts/build/build.js"
133
129
  },
134
130
  "dependencies": {
135
- "@elliemae/ds-button": "2.0.0-rc.13",
136
- "@elliemae/ds-icon": "2.0.0-rc.13",
137
- "@elliemae/ds-icons": "2.0.0-rc.13",
138
- "@elliemae/ds-props-helpers": "2.0.0-rc.13",
139
- "@elliemae/ds-system": "2.0.0-rc.13",
131
+ "@elliemae/ds-button": "2.0.0-rc.17",
132
+ "@elliemae/ds-icon": "2.0.0-rc.17",
133
+ "@elliemae/ds-icons": "2.0.0-rc.17",
134
+ "@elliemae/ds-props-helpers": "2.0.0-rc.17",
135
+ "@elliemae/ds-system": "2.0.0-rc.17",
140
136
  "@react-hook/resize-observer": "~1.2.5",
141
137
  "prop-types": "~15.7.2",
142
138
  "react-desc": "~4.1.3",
package/cjs/utils/hooks/useResize.js DELETED
@@ -1,28 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var lodash = require('lodash');
7
-
8
- const useResize = _ref => {
9
- var _ref$current;
10
-
11
- let {
12
- ref,
13
- callback
14
- } = _ref;
15
- const {
16
- right,
17
- left
18
- } = (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect()) || {
19
- right: null,
20
- left: null
21
- };
22
- const handleResize = React.useCallback(() => lodash.debounce(callback, 300), [callback]);
23
- React.useLayoutEffect(() => {
24
- handleResize();
25
- }, [right, left, handleResize]);
26
- };
27
-
28
- exports.useResize = useResize;
package/esm/utils/hooks/useResize.js DELETED
@@ -1,24 +0,0 @@
1
- import { useCallback, useLayoutEffect } from 'react';
2
- import { debounce } from 'lodash';
3
-
4
- const useResize = _ref => {
5
- var _ref$current;
6
-
7
- let {
8
- ref,
9
- callback
10
- } = _ref;
11
- const {
12
- right,
13
- left
14
- } = (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect()) || {
15
- right: null,
16
- left: null
17
- };
18
- const handleResize = useCallback(() => debounce(callback, 300), [callback]);
19
- useLayoutEffect(() => {
20
- handleResize();
21
- }, [right, left, handleResize]);
22
- };
23
-
24
- export { useResize };
package/types/utils/hooks/useResize.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import type { UseRezisePropsT } from '../../DSTabsTypes';
2
- export declare const useResize: ({ ref, callback }: UseRezisePropsT) => void;