@elliemae/ds-tabs 2.2.3-rc.1 → 2.2.3

package/cjs/config/useTabs.js

@@ -11,12 +11,9 @@ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var defaultProps = require('../defaultProps.js');
 
 const useTabs = props => {
-  var _children$, _children$$props;
-
   const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.tabsDefaultProps);
   const {
-    activeTab,
-    children
+    activeTab
   } = propsWithDefaults;
   const tabsRef = React.useRef({});
   const tabsRefAsArray = React.useRef([]);
@@ -24,7 +21,7 @@ const useTabs = props => {
   const carouselOnlyListRef = React.useRef(null);
   const tabsListRef = React.useRef(null);
   const actualActiveTabRef = React.useRef(null);
-  const [internalActiveTab, setInternalActiveTab] = React.useState(children === null || children === void 0 ? void 0 : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.tabId);
+  const [internalActiveTab, setInternalActiveTab] = React.useState('');
   const actualActiveTab = React.useMemo(() => {
     if (activeTab !== undefined) return activeTab;
     return internalActiveTab;
@@ -34,6 +31,12 @@ const useTabs = props => {
 
     actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
   }, [actualActiveTab]);
+  React.useEffect(() => {
+    if (activeTab === undefined) {
+      const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
+      setInternalActiveTab((firstAvailableTab === null || firstAvailableTab === void 0 ? void 0 : firstAvailableTab.dataset.tabId) || '');
+    }
+  }, [activeTab]);
   const ctx = React.useMemo(() => ({
     props: propsWithDefaults,
     tabsRef,

package/cjs/parts/tabBar/TabBar.js

@@ -72,21 +72,21 @@ const TabBar = () => {
       if (!disabled) availableTabIndexes.push(index);
       return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledTabButton, {
         role: "tab",
-        ref: t => {
-          if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
-            tabsRefAsArray.current[index] = t;
-            if (!disabled && !focusableTabsRef.current.includes(t)) focusableTabsRef.current.push(t);
-            tabsRef.current[index] = t;
+        ref: tabButtonRef => {
+          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
+            tabsRefAsArray.current[index] = tabButtonRef;
+            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef)) focusableTabsRef.current.push(tabButtonRef);
+            tabsRef.current[index] = tabButtonRef;
 
             if (type === constants.TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-              firstSubtabInternalRef.current = t;
+              firstSubtabInternalRef.current = tabButtonRef;
             }
 
             if (type !== constants.TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
-              lastTabInternalRef.current = t;
+              lastTabInternalRef.current = tabButtonRef;
             }
 
-            if (ref) ref.current = t;
+            if (ref) ref.current = tabButtonRef;
           }
         },
         type: "button",

package/cjs/parts/tabsPanel/TabsPanels.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var SwipeableViews = require('react-swipeable-views');
-var helpers = require('../../utils/helpers.js');
 var styles = require('./styles.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
@@ -35,18 +40,38 @@ const TabsPanels = () => {
     handleOnTabChange,
     handleOnMouseDown
   } = useTabsCallbacks.useTabsCallbacks();
-  const handleOnChangeIndex = React.useCallback(index => {
-    handleOnTabChange(helpers.getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
-  }, [focusableTabsRef, handleOnTabChange, tabs]);
+  const handleOnChangeIndex = React.useCallback((index, indexLatest) => {
+    if (!focusableTabsRef.current) return;
+    const offset = index - indexLatest;
+
+    if (focusableTabsRef.current) {
+      var _focusableTabsRef$cur, _focusableTabsRef$cur2, _focusableTabsRef$cur3, _focusableTabsRef$cur4;
+
+      const currentIndexFocusable = (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : _focusableTabsRef$cur.findIndex(el => el.dataset.tabId === actualActiveTab);
+      const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
+      if (newFocusableIndex < 0 || newFocusableIndex > ((_focusableTabsRef$cur2 = focusableTabsRef.current) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.length) || !((_focusableTabsRef$cur3 = focusableTabsRef.current) !== null && _focusableTabsRef$cur3 !== void 0 && _focusableTabsRef$cur3[newFocusableIndex])) return;
+      handleOnTabChange((_focusableTabsRef$cur4 = focusableTabsRef.current[newFocusableIndex].dataset) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.tabId); // swiping does not trigger centerTab function inside handleOnTabChange because there is no event
+      // by clicking we are manually forcing to center the tab
+
+      focusableTabsRef.current[newFocusableIndex].click();
+    }
+  }, [actualActiveTab, focusableTabsRef, handleOnTabChange]);
+  const firstSlideToShow = React.useMemo(() => {
+    const childrenArray = React__default["default"].Children.toArray(tabs);
+    const index = childrenArray.filter(tab => tab.props.disabled !== true).findIndex(tab => tab.props.tabId === actualActiveTab);
+    if (index === -1) return 0;
+    return index;
+  }, [actualActiveTab, tabs]);
   const panels = React.useMemo(() => React__default["default"].Children.map(tabs, tab => {
     const {
       tabId: panelId = '',
       style,
-      children: content
+      children: content,
+      disabled
     } = tab.props;
     const isActive = actualActiveTab === panelId;
     const shouldRender = !onlyRenderActiveTab || isActive;
+    if (disabled) return null;
     return shouldRender && /*#__PURE__*/_jsx__default["default"](styles.StyledPanelContainer, {
       id: panelId,
       "aria-labelledby": "".concat(panelId, "-label"),
@@ -64,7 +89,7 @@ const TabsPanels = () => {
   if (animated) {
     return /*#__PURE__*/_jsx__default["default"](SwipeableViews__default["default"], {
       enableMouseEvents: enableMouseEvents,
-      index: helpers.getIndexById(tabs, actualActiveTab),
+      index: firstSlideToShow,
       onChangeIndex: handleOnChangeIndex
     }, void 0, panels);
   }

package/cjs/utils/helpers.js

@@ -60,14 +60,10 @@ const getVisibleDimensions = (node, referenceNode) => {
     height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
   };
 };
-const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
-const getIdByIndex = (children, index) => children && children[index].props.tabId || '';
 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;
 exports.isElementVisible = isElementVisible;
 exports.isElementVisibleCarousel = isElementVisibleCarousel;

package/esm/config/useTabs.js

@@ -7,12 +7,9 @@ import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
 import { tabsDefaultProps } from '../defaultProps.js';
 
 const useTabs = props => {
-  var _children$, _children$$props;
-
   const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
   const {
-    activeTab,
-    children
+    activeTab
   } = propsWithDefaults;
   const tabsRef = useRef({});
   const tabsRefAsArray = useRef([]);
@@ -20,7 +17,7 @@ const useTabs = props => {
   const carouselOnlyListRef = useRef(null);
   const tabsListRef = useRef(null);
   const actualActiveTabRef = useRef(null);
-  const [internalActiveTab, setInternalActiveTab] = useState(children === null || children === void 0 ? void 0 : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.tabId);
+  const [internalActiveTab, setInternalActiveTab] = useState('');
   const actualActiveTab = useMemo(() => {
     if (activeTab !== undefined) return activeTab;
     return internalActiveTab;
@@ -30,6 +27,12 @@ const useTabs = props => {
 
     actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
   }, [actualActiveTab]);
+  useEffect(() => {
+    if (activeTab === undefined) {
+      const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
+      setInternalActiveTab((firstAvailableTab === null || firstAvailableTab === void 0 ? void 0 : firstAvailableTab.dataset.tabId) || '');
+    }
+  }, [activeTab]);
   const ctx = useMemo(() => ({
     props: propsWithDefaults,
     tabsRef,

package/esm/parts/tabBar/TabBar.js

@@ -63,21 +63,21 @@ const TabBar = () => {
       if (!disabled) availableTabIndexes.push(index);
       return /*#__PURE__*/jsxs(StyledTabButton, {
         role: "tab",
-        ref: t => {
-          if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
-            tabsRefAsArray.current[index] = t;
-            if (!disabled && !focusableTabsRef.current.includes(t)) focusableTabsRef.current.push(t);
-            tabsRef.current[index] = t;
+        ref: tabButtonRef => {
+          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
+            tabsRefAsArray.current[index] = tabButtonRef;
+            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef)) focusableTabsRef.current.push(tabButtonRef);
+            tabsRef.current[index] = tabButtonRef;
 
             if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-              firstSubtabInternalRef.current = t;
+              firstSubtabInternalRef.current = tabButtonRef;
             }
 
             if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
-              lastTabInternalRef.current = t;
+              lastTabInternalRef.current = tabButtonRef;
             }
 
-            if (ref) ref.current = t;
+            if (ref) ref.current = tabButtonRef;
           }
         },
         type: "button",

package/esm/parts/tabsPanel/TabsPanels.js

@@ -1,9 +1,14 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import React, { useContext, useCallback, useMemo } from 'react';
 import SwipeableViews from 'react-swipeable-views';
-import { getIdByIndex, getIndexById } from '../../utils/helpers.js';
 import { StyledPanelContainer } from './styles.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
 import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
@@ -25,18 +30,38 @@ const TabsPanels = () => {
     handleOnTabChange,
     handleOnMouseDown
   } = useTabsCallbacks();
-  const handleOnChangeIndex = useCallback(index => {
-    handleOnTabChange(getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
-  }, [focusableTabsRef, handleOnTabChange, tabs]);
+  const handleOnChangeIndex = useCallback((index, indexLatest) => {
+    if (!focusableTabsRef.current) return;
+    const offset = index - indexLatest;
+
+    if (focusableTabsRef.current) {
+      var _focusableTabsRef$cur, _focusableTabsRef$cur2, _focusableTabsRef$cur3, _focusableTabsRef$cur4;
+
+      const currentIndexFocusable = (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : _focusableTabsRef$cur.findIndex(el => el.dataset.tabId === actualActiveTab);
+      const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
+      if (newFocusableIndex < 0 || newFocusableIndex > ((_focusableTabsRef$cur2 = focusableTabsRef.current) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.length) || !((_focusableTabsRef$cur3 = focusableTabsRef.current) !== null && _focusableTabsRef$cur3 !== void 0 && _focusableTabsRef$cur3[newFocusableIndex])) return;
+      handleOnTabChange((_focusableTabsRef$cur4 = focusableTabsRef.current[newFocusableIndex].dataset) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.tabId); // swiping does not trigger centerTab function inside handleOnTabChange because there is no event
+      // by clicking we are manually forcing to center the tab
+
+      focusableTabsRef.current[newFocusableIndex].click();
+    }
+  }, [actualActiveTab, focusableTabsRef, handleOnTabChange]);
+  const firstSlideToShow = useMemo(() => {
+    const childrenArray = React.Children.toArray(tabs);
+    const index = childrenArray.filter(tab => tab.props.disabled !== true).findIndex(tab => tab.props.tabId === actualActiveTab);
+    if (index === -1) return 0;
+    return index;
+  }, [actualActiveTab, tabs]);
   const panels = useMemo(() => React.Children.map(tabs, tab => {
     const {
       tabId: panelId = '',
       style,
-      children: content
+      children: content,
+      disabled
     } = tab.props;
     const isActive = actualActiveTab === panelId;
     const shouldRender = !onlyRenderActiveTab || isActive;
+    if (disabled) return null;
     return shouldRender && /*#__PURE__*/_jsx(StyledPanelContainer, {
       id: panelId,
       "aria-labelledby": "".concat(panelId, "-label"),
@@ -54,7 +79,7 @@ const TabsPanels = () => {
   if (animated) {
     return /*#__PURE__*/_jsx(SwipeableViews, {
       enableMouseEvents: enableMouseEvents,
-      index: getIndexById(tabs, actualActiveTab),
+      index: firstSlideToShow,
       onChangeIndex: handleOnChangeIndex
     }, void 0, panels);
   }

package/esm/utils/helpers.js

@@ -56,9 +56,7 @@ const getVisibleDimensions = (node, referenceNode) => {
     height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
   };
 };
-const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
-const getIdByIndex = (children, index) => children && children[index].props.tabId || '';
 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 { centerTab, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.2.3-rc.1",
+  "version": "2.2.3",
   "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.3-rc.1",
-    "@elliemae/ds-icon": "2.2.3-rc.1",
-    "@elliemae/ds-icons": "2.2.3-rc.1",
-    "@elliemae/ds-props-helpers": "2.2.3-rc.1",
-    "@elliemae/ds-system": "2.2.3-rc.1",
+    "@elliemae/ds-button": "2.2.3",
+    "@elliemae/ds-icon": "2.2.3",
+    "@elliemae/ds-icons": "2.2.3",
+    "@elliemae/ds-props-helpers": "2.2.3",
+    "@elliemae/ds-system": "2.2.3",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/types/utils/helpers.d.ts

@@ -1,9 +1,7 @@
-import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+import type { CenterTabPropsT, 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;
 export declare const shouldHaveLeftGradient: (scrollLeft: number) => boolean;
 export declare const shouldHaveRightGradient: (scrollLeft: number, clientWidth: number, scrollWidth: number) => boolean;