@elliemae/ds-tabs 2.2.0-next.5 → 2.2.0

package/cjs/parts/tabBar/TabBar.js

@@ -11,7 +11,6 @@ var useTabBar = require('./useTabBar.js');
 var styles = require('./styles.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 var useKeyboardNavigation = require('../../utils/hooks/useKeyboardNavigation.js');
-var helpers = require('../../utils/helpers.js');
 var constants = require('../../utils/constants.js');
 var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
 var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
@@ -29,7 +28,6 @@ const TabBar = () => {
     focusableTabsRef,
     tabsListRef,
     tabsRefAsArray,
-    carouselOnlyListRef,
     actualActiveTab,
     props: {
       type,
@@ -115,12 +113,6 @@ const TabBar = () => {
 
           if (onClick && !disabled) onClick(tabId, e);
         },
-        onFocus: e => {
-          if (withCarousel) helpers.centerTab({
-            e,
-            listRef: carouselOnlyListRef
-          });
-        },
         onKeyDown: e => {
           if (e.key === 'Enter') e.stopPropagation();
           if (!disabled) handleOnKeyDown(e);
@@ -130,7 +122,7 @@ const TabBar = () => {
         children: [title, required && (_StyledRequiredMark || (_StyledRequiredMark = /*#__PURE__*/_jsx__default["default"](styles.StyledRequiredMark, {}, void 0, "\u25CF")))]
       }, tabId);
     });
-  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, carouselOnlyListRef, handleOnKeyDown]);
+  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, handleOnKeyDown]);
 
   if (type === constants.TabTypes.SUBTABS && !isDSMobile) {
     return /*#__PURE__*/jsxRuntime.jsx(styles.StyledSubTabsList, {

package/cjs/parts/tabBar/useTabBar.js

@@ -66,6 +66,15 @@ const useTabBar = () => {
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
+  React.useEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
   React.useLayoutEffect(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
@@ -74,7 +83,7 @@ const useTabBar = () => {
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,

package/cjs/utils/helpers.js

@@ -25,33 +25,6 @@ const isElementVisibleCarousel = function (tab, tabContainer) {
 
   return false;
 };
-const centerTab = _ref => {
-  let {
-    e,
-    listRef
-  } = _ref;
-
-  if (listRef.current) {
-    const {
-      offsetLeft
-    } = e === null || e === void 0 ? void 0 : e.target;
-    const {
-      width: tabWidth
-    } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-    const {
-      width: listWidth
-    } = listRef.current.getBoundingClientRect();
-    const extraSideSpace = listWidth - tabWidth;
-    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-    listRef.current.scrollTo({
-      top: 0,
-      left: centeredLeftOffset,
-      behavior: 'smooth'
-    });
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-  }
-};
 const getVisibleDimensions = (node, referenceNode) => {
   const nodeDimensions = node.getBoundingClientRect();
   const referenceNodeDimensions = referenceNode.getBoundingClientRect();
@@ -65,7 +38,6 @@ const getIdByIndex = (children, index) => children && children[index].props.tabI
 const shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) > constants.MOBILE_GRADIENT_WIDTH;
 const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + constants.MOBILE_GRADIENT_WIDTH);
 
-exports.centerTab = centerTab;
 exports.getIdByIndex = getIdByIndex;
 exports.getIndexById = getIndexById;
 exports.getVisibleDimensions = getVisibleDimensions;

package/cjs/utils/hooks/useTabsCallbacks.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var helpers = require('../helpers.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 
 const useTabsCallbacks = () => {
@@ -17,17 +16,36 @@ const useTabsCallbacks = () => {
       fixedTabsHeaders
     }
   } = React.useContext(DSTabsCTX.DSTabsContext);
+  const centerTabWhenTabChangeMobile = React.useCallback(e => {
+    if (tabsListRef.current) {
+      const {
+        offsetLeft
+      } = e === null || e === void 0 ? void 0 : e.target;
+      const {
+        width: tabWidth
+      } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
+      const {
+        width: listWidth
+      } = tabsListRef.current.getBoundingClientRect();
+      const extraSideSpace = listWidth - tabWidth;
+      const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
+      const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
+      tabsListRef.current.scrollTo({
+        top: 0,
+        left: centeredLeftOffset,
+        behavior: 'smooth'
+      });
+      e === null || e === void 0 ? void 0 : e.preventDefault();
+    }
+  }, [tabsListRef]);
   const handleOnTabChange = React.useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
 
     if (isDSMobile && !fixedTabsHeaders && e) {
-      helpers.centerTab({
-        e,
-        listRef: tabsListRef
-      });
+      centerTabWhenTabChangeMobile(e);
     }
-  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
+  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
   const handleOnMouseDown = React.useCallback(e => {
     const role = e.target.getAttribute('role');
     if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();

package/esm/parts/tabBar/TabBar.js

@@ -7,7 +7,6 @@ import { useTabBar } from './useTabBar.js';
 import { StyledTabButton, StyledRequiredMark, StyledSubTabsList, StyledTabList, StyledTabWrapper, StyledSelectionIndicator } from './styles.js';
 import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
 import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
-import { centerTab } from '../../utils/helpers.js';
 import { TabTypes } from '../../utils/constants.js';
 import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
 import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
@@ -20,7 +19,6 @@ const TabBar = () => {
     focusableTabsRef,
     tabsListRef,
     tabsRefAsArray,
-    carouselOnlyListRef,
     actualActiveTab,
     props: {
       type,
@@ -106,12 +104,6 @@ const TabBar = () => {
 
           if (onClick && !disabled) onClick(tabId, e);
         },
-        onFocus: e => {
-          if (withCarousel) centerTab({
-            e,
-            listRef: carouselOnlyListRef
-          });
-        },
         onKeyDown: e => {
           if (e.key === 'Enter') e.stopPropagation();
           if (!disabled) handleOnKeyDown(e);
@@ -121,7 +113,7 @@ const TabBar = () => {
         children: [title, required && (_StyledRequiredMark || (_StyledRequiredMark = /*#__PURE__*/_jsx(StyledRequiredMark, {}, void 0, "\u25CF")))]
       }, tabId);
     });
-  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, carouselOnlyListRef, handleOnKeyDown]);
+  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, handleOnKeyDown]);
 
   if (type === TabTypes.SUBTABS && !isDSMobile) {
     return /*#__PURE__*/jsx(StyledSubTabsList, {

package/esm/parts/tabBar/useTabBar.js

@@ -1,5 +1,5 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useContext, useState, useCallback, useLayoutEffect } from 'react';
+import { useContext, useState, useCallback, useEffect, useLayoutEffect } from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
 import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
@@ -58,6 +58,15 @@ const useTabBar = () => {
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
+  useEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
   useLayoutEffect(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
@@ -66,7 +75,7 @@ const useTabBar = () => {
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,

package/esm/utils/helpers.js

@@ -21,33 +21,6 @@ const isElementVisibleCarousel = function (tab, tabContainer) {
 
   return false;
 };
-const centerTab = _ref => {
-  let {
-    e,
-    listRef
-  } = _ref;
-
-  if (listRef.current) {
-    const {
-      offsetLeft
-    } = e === null || e === void 0 ? void 0 : e.target;
-    const {
-      width: tabWidth
-    } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-    const {
-      width: listWidth
-    } = listRef.current.getBoundingClientRect();
-    const extraSideSpace = listWidth - tabWidth;
-    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-    listRef.current.scrollTo({
-      top: 0,
-      left: centeredLeftOffset,
-      behavior: 'smooth'
-    });
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-  }
-};
 const getVisibleDimensions = (node, referenceNode) => {
   const nodeDimensions = node.getBoundingClientRect();
   const referenceNodeDimensions = referenceNode.getBoundingClientRect();
@@ -61,4 +34,4 @@ const getIdByIndex = (children, index) => children && children[index].props.tabI
 const shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;
 const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);
 
-export { centerTab, getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };
+export { getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };

package/esm/utils/hooks/useTabsCallbacks.js

@@ -1,5 +1,4 @@
 import { useContext, useCallback } from 'react';
-import { centerTab } from '../helpers.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
 
 const useTabsCallbacks = () => {
@@ -13,17 +12,36 @@ const useTabsCallbacks = () => {
       fixedTabsHeaders
     }
   } = useContext(DSTabsContext);
+  const centerTabWhenTabChangeMobile = useCallback(e => {
+    if (tabsListRef.current) {
+      const {
+        offsetLeft
+      } = e === null || e === void 0 ? void 0 : e.target;
+      const {
+        width: tabWidth
+      } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
+      const {
+        width: listWidth
+      } = tabsListRef.current.getBoundingClientRect();
+      const extraSideSpace = listWidth - tabWidth;
+      const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
+      const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
+      tabsListRef.current.scrollTo({
+        top: 0,
+        left: centeredLeftOffset,
+        behavior: 'smooth'
+      });
+      e === null || e === void 0 ? void 0 : e.preventDefault();
+    }
+  }, [tabsListRef]);
   const handleOnTabChange = useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
 
     if (isDSMobile && !fixedTabsHeaders && e) {
-      centerTab({
-        e,
-        listRef: tabsListRef
-      });
+      centerTabWhenTabChangeMobile(e);
     }
-  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
+  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
   const handleOnMouseDown = useCallback(e => {
     const role = e.target.getAttribute('role');
     if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.2.0-next.5",
+  "version": "2.2.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -128,11 +128,11 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-next.5",
-    "@elliemae/ds-icon": "2.2.0-next.5",
-    "@elliemae/ds-icons": "2.2.0-next.5",
-    "@elliemae/ds-props-helpers": "2.2.0-next.5",
-    "@elliemae/ds-system": "2.2.0-next.5",
+    "@elliemae/ds-button": "2.2.0",
+    "@elliemae/ds-icon": "2.2.0",
+    "@elliemae/ds-icons": "2.2.0",
+    "@elliemae/ds-props-helpers": "2.2.0",
+    "@elliemae/ds-system": "2.2.0",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/types/DSTabsTypes.d.ts

@@ -162,10 +162,6 @@ export interface VisibleDimensionsT {
     width: number;
     height: number;
 }
-export interface CenterTabPropsT {
-    e?: React.MouseEvent | React.FocusEvent;
-    listRef: React.MutableRefObject<HTMLDivElement | null>;
-}
 export interface StyledTabWrapperPropsT {
     isDSMobile: boolean;
     fixedTabsHeaders: boolean;

package/types/utils/helpers.d.ts

@@ -1,7 +1,6 @@
-import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+import type { DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
 export declare const isElementVisible: (tab: HTMLElement, tabList: HTMLElement) => boolean;
 export declare const isElementVisibleCarousel: (tab: HTMLElement | null, tabContainer: HTMLDivElement | null, firstOrLastItem?: boolean) => boolean;
-export declare const centerTab: ({ e, listRef }: CenterTabPropsT) => void;
 export declare const getVisibleDimensions: (node: HTMLElement, referenceNode: HTMLElement) => VisibleDimensionsT;
 export declare const getIndexById: (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string | undefined) => number;
 export declare const getIdByIndex: (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number) => string;