@elliemae/ds-tabs 2.2.1 → 2.2.2-rc.0

package/cjs/parts/tabBar/TabBar.js

@@ -11,6 +11,7 @@ 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');
@@ -28,6 +29,7 @@ const TabBar = () => {
     focusableTabsRef,
     tabsListRef,
     tabsRefAsArray,
+    carouselOnlyListRef,
     actualActiveTab,
     props: {
       type,
@@ -113,6 +115,12 @@ 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);
@@ -122,7 +130,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, handleOnKeyDown]);
+  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, carouselOnlyListRef, handleOnKeyDown]);
 
   if (type === constants.TabTypes.SUBTABS && !isDSMobile) {
     return /*#__PURE__*/jsxRuntime.jsx(styles.StyledSubTabsList, {

package/cjs/parts/tabBar/useTabBar.js

@@ -66,15 +66,6 @@ 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();
@@ -83,7 +74,7 @@ const useTabBar = () => {
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,

package/cjs/utils/helpers.js

@@ -25,6 +25,33 @@ 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();
@@ -38,6 +65,7 @@ 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,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var helpers = require('../helpers.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 
 const useTabsCallbacks = () => {
@@ -16,36 +17,17 @@ 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) {
-      centerTabWhenTabChangeMobile(e);
+      helpers.centerTab({
+        e,
+        listRef: tabsListRef
+      });
     }
-  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
   const handleOnMouseDown = React.useCallback(e => {
     const role = e.target.getAttribute('role');
     if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();

package/esm/parts/tabBar/TabBar.js

@@ -7,6 +7,7 @@ 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';
@@ -19,6 +20,7 @@ const TabBar = () => {
     focusableTabsRef,
     tabsListRef,
     tabsRefAsArray,
+    carouselOnlyListRef,
     actualActiveTab,
     props: {
       type,
@@ -104,6 +106,12 @@ 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);
@@ -113,7 +121,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, handleOnKeyDown]);
+  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, carouselOnlyListRef, 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, useEffect, useLayoutEffect } from 'react';
+import { useContext, useState, useCallback, useLayoutEffect } from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
 import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
@@ -58,15 +58,6 @@ const useTabBar = () => {
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  useEffect(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
   useLayoutEffect(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
@@ -75,7 +66,7 @@ const useTabBar = () => {
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,

package/esm/utils/helpers.js

@@ -21,6 +21,33 @@ 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();
@@ -34,4 +61,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 { getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };
+export { centerTab, getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };

package/esm/utils/hooks/useTabsCallbacks.js

@@ -1,4 +1,5 @@
 import { useContext, useCallback } from 'react';
+import { centerTab } from '../helpers.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
 
 const useTabsCallbacks = () => {
@@ -12,36 +13,17 @@ 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) {
-      centerTabWhenTabChangeMobile(e);
+      centerTab({
+        e,
+        listRef: tabsListRef
+      });
     }
-  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
   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.1",
+  "version": "2.2.2-rc.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.1",
-    "@elliemae/ds-icon": "2.2.1",
-    "@elliemae/ds-icons": "2.2.1",
-    "@elliemae/ds-props-helpers": "2.2.1",
-    "@elliemae/ds-system": "2.2.1",
+    "@elliemae/ds-button": "2.2.2-rc.0",
+    "@elliemae/ds-icon": "2.2.2-rc.0",
+    "@elliemae/ds-icons": "2.2.2-rc.0",
+    "@elliemae/ds-props-helpers": "2.2.2-rc.0",
+    "@elliemae/ds-system": "2.2.2-rc.0",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/types/DSTabsTypes.d.ts

@@ -162,6 +162,10 @@ 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,6 +1,7 @@
-import type { DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+import type { CenterTabPropsT, 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;