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

package/esm/parts/tabBar/useTabBar.js

@@ -0,0 +1,90 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+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';
+import { defaultIndicatorStyles } from '../../utils/constants.js';
+
+const useTabBar = () => {
+  const {
+    actualActiveTab,
+    actualActiveTabRef,
+    tabsListRef,
+    props: {
+      showSelectionIndicator,
+      isDSMobile,
+      fixedTabsHeaders
+    }
+  } = useContext(DSTabsContext);
+  const [mobileGradients, setMobileGradients] = useState({
+    left: false,
+    right: false
+  });
+  const [indicatorStyle, setIndicatorStyle] = useState(defaultIndicatorStyles);
+  const getIndicatorStyles = useCallback(() => {
+    if (tabsListRef.current) {
+      const tabList = tabsListRef.current;
+      const activeTabButton = actualActiveTabRef.current;
+      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles; // The missingMargins are to make the selection indicator white marks work properly in desktop, we need
+      // the full width of the tab button with margins.
+
+      const missingMargins = isDSMobile ? 0 : 16;
+      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2; // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)
+      // behavior that adds scroll to the tabList
+
+      const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
+      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 )");
+      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 )");
+      return {
+        left: "".concat(position, "px"),
+        width: "".concat(tabClientWidth, "px"),
+        backgroundWithTransparentAndWhite,
+        backgroundWithTransparent
+      };
+    }
+
+    return defaultIndicatorStyles;
+  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
+  const updateIndicatorStyle = useCallback(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
+  useResizeObserver(tabsListRef, updateIndicatorStyle);
+  const updateMobileGradients = useCallback(() => {
+    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
+      const {
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = tabsListRef.current;
+      setMobileGradients({
+        left: shouldHaveLeftGradient(scrollLeft),
+        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
+      });
+    }
+  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
+  useEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
+  useLayoutEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  return {
+    updateIndicatorStyle,
+    setIndicatorStyle,
+    indicatorStyle,
+    mobileGradients,
+    updateMobileGradients
+  };
+};
+
+export { useTabBar };

package/esm/parts/tabsContent/TabsContent.js

@@ -0,0 +1,40 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { TabsPanels } from '../tabsPanel/TabsPanels.js';
+import { TabBar } from '../tabBar/TabBar.js';
+import { StyledTabBarContainer } from './styles.js';
+import { DSTabsContext } from '../../DSTabsCTX.js';
+import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _TabBar, _TabsPanels;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const TabsContent = () => {
+  const {
+    props: {
+      containerProps,
+      innerRef,
+      tabsListAriaLabel,
+      tabBarExtraContent
+    }
+  } = useContext(DSTabsContext);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    ref: innerRef,
+    "data-testid": DSTabsDatatestid.TABS_CONTAINER,
+    children: [/*#__PURE__*/_jsx(StyledTabBarContainer, {
+      "aria-label": tabsListAriaLabel,
+      role: "tablist"
+    }, void 0, _TabBar || (_TabBar = /*#__PURE__*/_jsx(TabBar, {})), tabBarExtraContent), _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx(TabsPanels, {}))]
+  }));
+};
+
+export { TabsContent };

package/esm/parts/tabsContent/styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledTabBarContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-vm3k1y-0"
+})(["display:flex;overflow-x:hidden;"]);
+
+export { StyledTabBarContainer };

package/esm/parts/tabsPanel/TabsPanels.js

@@ -0,0 +1,67 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const TabsPanels = () => {
+  const {
+    actualActiveTab,
+    focusableTabsRef,
+    props: {
+      animated,
+      enableMouseEvents,
+      onlyRenderActiveTab,
+      children: tabs,
+      isDSMobile
+    }
+  } = useContext(DSTabsContext);
+  const {
+    handleOnTabChange,
+    handleOnMouseDown
+  } = useTabsCallbacks();
+  const handleOnChangeIndex = useCallback(index => {
+    handleOnTabChange(getIdByIndex(tabs, index));
+    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
+  }, [focusableTabsRef, handleOnTabChange, tabs]);
+  const panels = useMemo(() => React.Children.map(tabs, tab => {
+    const {
+      tabId: panelId = '',
+      style,
+      children: content
+    } = tab.props;
+    const isActive = actualActiveTab === panelId;
+    const shouldRender = !onlyRenderActiveTab || isActive;
+    return shouldRender && /*#__PURE__*/_jsx(StyledPanelContainer, {
+      id: panelId,
+      "aria-labelledby": "".concat(panelId, "-label"),
+      "aria-hidden": !isActive,
+      "data-panel-id": panelId,
+      "data-testid": "ds-tabs-tab-panel",
+      hidden: !isActive,
+      onMouseDown: handleOnMouseDown,
+      role: "tabpanel",
+      style: style,
+      isDSMobile: isDSMobile
+    }, panelId, content);
+  }), [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]);
+
+  if (animated) {
+    return /*#__PURE__*/_jsx(SwipeableViews, {
+      enableMouseEvents: enableMouseEvents,
+      index: getIndexById(tabs, actualActiveTab),
+      onChangeIndex: handleOnChangeIndex
+    }, void 0, panels);
+  }
+
+  return /*#__PURE__*/jsx(Fragment, {
+    children: panels
+  });
+};
+
+export { TabsPanels };

package/esm/parts/tabsPanel/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+const StyledPanelContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-oxw5jq-0"
+})(["padding-top:", ";&:focus{outline:none;}", " ", ""], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.xs;
+}, _ref2 => {
+  let {
+    hidden
+  } = _ref2;
+  return hidden ? 'visibility: hidden;' : '';
+}, _ref3 => {
+  let {
+    isDSMobile
+  } = _ref3;
+  return isDSMobile ? "padding-top: 0;" : "";
+});
+
+export { StyledPanelContainer };

package/esm/propTypes.js

@@ -0,0 +1,28 @@
+import { PropTypes } from 'react-desc';
+import { TabTypesValuesAsArray } from './utils/constants.js';
+
+const tabPropTypes = {
+  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),
+  title: PropTypes.string.description('Tab title.').defaultValue(''),
+  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),
+  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false)
+};
+const tabsPropTypes = {
+  animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),
+  enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),
+  allowTextSelection: PropTypes.bool.description('Allows text selection when mouse drag events are active.').defaultValue(false),
+  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),
+  type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),
+  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),
+  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),
+  withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),
+  activeTab: PropTypes.string.description('Passing a value makes DSTabs a controlled component.').defaultValue('First DSTab children.'),
+  children: PropTypes.node.description('Use DSTab component as children.').isRequired,
+  tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),
+  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('Ref to the container.').defaultValue(undefined)
+};
+
+export { tabPropTypes, tabsPropTypes };

package/esm/utils/constants.js

@@ -0,0 +1,21 @@
+const TabTypes = {
+  NORMAL: 'normal',
+  NORMAL_SMALL: 'normal_small',
+  SUBTABS: 'subtabs'
+};
+const TabTypesValuesAsArray = Object.values(TabTypes);
+const MOBILE_GRADIENT_WIDTH = 24;
+const defaultIndicatorStyles = {
+  left: '0px',
+  width: '0px',
+  backgroundWithTransparentAndWhite: '',
+  backgroundWithTransparent: ''
+};
+const gradientOffsetsAccordingType = {
+  normal_small: 14,
+  normal: 16,
+  subtabs: 16,
+  fixedTabsHeaders: 0
+};
+
+export { MOBILE_GRADIENT_WIDTH, TabTypes, TabTypesValuesAsArray, defaultIndicatorStyles, gradientOffsetsAccordingType };

package/esm/utils/helpers.js

@@ -0,0 +1,37 @@
+import { MOBILE_GRADIENT_WIDTH } from './constants.js';
+
+const isElementVisible = (tab, tabList) => {
+  const tabDimensions = tab.getBoundingClientRect();
+  const tabListDimensions = tabList.getBoundingClientRect();
+  return tabDimensions.left <= tabListDimensions.left ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;
+};
+const isElementVisibleCarousel = function (tab, tabContainer) {
+  let firstOrLastItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  if (tab && tabContainer) {
+    const tabDimensions = tab.getBoundingClientRect();
+    const tabContainerDimensions = tabContainer.getBoundingClientRect();
+    const offset = firstOrLastItem ? 16 : 32;
+    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);
+    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);
+    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);
+    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);
+    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;
+  }
+
+  return false;
+};
+const getVisibleDimensions = (node, referenceNode) => {
+  const nodeDimensions = node.getBoundingClientRect();
+  const referenceNodeDimensions = referenceNode.getBoundingClientRect();
+  return {
+    width: Math.min(node.clientWidth, referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left, node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left)),
+    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 { getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };

package/esm/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,57 @@
+import { useContext, useCallback } from 'react';
+import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
+
+/* eslint-disable max-statements */
+const useKeyboardNavigation = () => {
+  const {
+    focusableTabsRef
+  } = useContext(DSTabsContext);
+  const {
+    firstSubtabInternalRef,
+    lastTabInternalRef
+  } = useContext(DSTabsCrossRefContext);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.key === 'ArrowRight' && focusableTabsRef.current) {
+      var _focusableTabsRef$cur, _focusableTabsRef$cur2;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const nextTab = focusableTabsRef.current[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : (_focusableTabsRef$cur2 = _focusableTabsRef$cur.indexOf) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.call(_focusableTabsRef$cur, e.target)) + 1];
+      if (nextTab) nextTab.focus();
+      if (!nextTab) return;
+    }
+
+    if (e.key === 'ArrowLeft' && focusableTabsRef.current) {
+      var _focusableTabsRef$cur3, _focusableTabsRef$cur4;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const prevTab = focusableTabsRef.current[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur3 = focusableTabsRef.current) === null || _focusableTabsRef$cur3 === void 0 ? void 0 : (_focusableTabsRef$cur4 = _focusableTabsRef$cur3.indexOf) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.call(_focusableTabsRef$cur3, e.target)) - 1];
+      if (prevTab) prevTab.focus();
+      if (!prevTab) return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      var _firstSubtabInternalR;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const canFocusCrossTabs = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
+      if (canFocusCrossTabs) (_firstSubtabInternalR = firstSubtabInternalRef.current) === null || _firstSubtabInternalR === void 0 ? void 0 : _firstSubtabInternalR.focus();
+    }
+
+    if (e.key === 'ArrowUp') {
+      var _lastTabInternalRef$c;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const canFocusCrossTabs = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
+      if (canFocusCrossTabs) (_lastTabInternalRef$c = lastTabInternalRef.current) === null || _lastTabInternalRef$c === void 0 ? void 0 : _lastTabInternalRef$c.focus();
+    }
+  }, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
+  return {
+    handleOnKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/esm/{useResize.js → utils/hooks/useResize.js}

@@ -1,9 +1,13 @@
-import { useLayoutEffect } from 'react';
+import { useCallback, useLayoutEffect } from 'react';
 import { debounce } from 'lodash';
 
-function useResize(ref, callback) {
+const useResize = _ref => {
   var _ref$current;
 
+  let {
+    ref,
+    callback
+  } = _ref;
   const {
     right,
     left
@@ -11,10 +15,10 @@ function useResize(ref, callback) {
     right: null,
     left: null
   };
-  const handleResize = debounce(callback, 300);
+  const handleResize = useCallback(() => debounce(callback, 300), [callback]);
   useLayoutEffect(() => {
     handleResize();
-  }, [right, left]);
-}
+  }, [right, left, handleResize]);
+};
 
 export { useResize };

package/esm/utils/hooks/useTabsCallbacks.js

@@ -0,0 +1,55 @@
+import { useContext, useCallback } from 'react';
+import { DSTabsContext } from '../../DSTabsCTX.js';
+
+const useTabsCallbacks = () => {
+  const {
+    setInternalActiveTab,
+    tabsListRef,
+    props: {
+      onTabChange,
+      isDSMobile,
+      allowTextSelection,
+      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);
+    }
+  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  const handleOnMouseDown = useCallback(e => {
+    const role = e.target.getAttribute('role');
+    if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
+  }, [allowTextSelection]);
+  return {
+    handleOnTabChange,
+    handleOnMouseDown
+  };
+};
+
+export { useTabsCallbacks };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -11,45 +11,105 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
-    "./useResize": {
-      "import": "./esm/useResize.js",
-      "require": "./cjs/useResize.js"
+    "./utils/hooks/useTabsCallbacks": {
+      "import": "./esm/utils/hooks/useTabsCallbacks.js",
+      "require": "./cjs/utils/hooks/useTabsCallbacks.js"
     },
-    "./TabTypes": {
-      "import": "./esm/TabTypes.js",
-      "require": "./cjs/TabTypes.js"
+    "./utils/hooks/useResize": {
+      "import": "./esm/utils/hooks/useResize.js",
+      "require": "./cjs/utils/hooks/useResize.js"
     },
-    "./TabsPanels": {
-      "import": "./esm/TabsPanels.js",
-      "require": "./cjs/TabsPanels.js"
+    "./utils/hooks/useKeyboardNavigation": {
+      "import": "./esm/utils/hooks/useKeyboardNavigation.js",
+      "require": "./cjs/utils/hooks/useKeyboardNavigation.js"
     },
-    "./TabsImpl": {
-      "import": "./esm/TabsImpl.js",
-      "require": "./cjs/TabsImpl.js"
+    "./utils/helpers": {
+      "import": "./esm/utils/helpers.js",
+      "require": "./cjs/utils/helpers.js"
     },
-    "./TabBar": {
-      "import": "./esm/TabBar.js",
-      "require": "./cjs/TabBar.js"
+    "./utils/constants": {
+      "import": "./esm/utils/constants.js",
+      "require": "./cjs/utils/constants.js"
     },
-    "./SubTabBar": {
-      "import": "./esm/SubTabBar.js",
-      "require": "./cjs/SubTabBar.js"
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
-    "./PanelContainer": {
-      "import": "./esm/PanelContainer.js",
-      "require": "./cjs/PanelContainer.js"
+    "./parts/tabsPanel/TabsPanels": {
+      "import": "./esm/parts/tabsPanel/TabsPanels.js",
+      "require": "./cjs/parts/tabsPanel/TabsPanels.js"
+    },
+    "./parts/tabsPanel/styles": {
+      "import": "./esm/parts/tabsPanel/styles.js",
+      "require": "./cjs/parts/tabsPanel/styles.js"
+    },
+    "./parts/tabsContent/TabsContent": {
+      "import": "./esm/parts/tabsContent/TabsContent.js",
+      "require": "./cjs/parts/tabsContent/TabsContent.js"
+    },
+    "./parts/tabsContent/styles": {
+      "import": "./esm/parts/tabsContent/styles.js",
+      "require": "./cjs/parts/tabsContent/styles.js"
+    },
+    "./parts/tabBar/useTabBar": {
+      "import": "./esm/parts/tabBar/useTabBar.js",
+      "require": "./cjs/parts/tabBar/useTabBar.js"
+    },
+    "./parts/tabBar/TabBar": {
+      "import": "./esm/parts/tabBar/TabBar.js",
+      "require": "./cjs/parts/tabBar/TabBar.js"
+    },
+    "./parts/tabBar/styles": {
+      "import": "./esm/parts/tabBar/styles.js",
+      "require": "./cjs/parts/tabBar/styles.js"
+    },
+    "./parts/carousel/useCarouselCallbacks": {
+      "import": "./esm/parts/carousel/useCarouselCallbacks.js",
+      "require": "./cjs/parts/carousel/useCarouselCallbacks.js"
+    },
+    "./parts/carousel/useCarousel": {
+      "import": "./esm/parts/carousel/useCarousel.js",
+      "require": "./cjs/parts/carousel/useCarousel.js"
+    },
+    "./parts/carousel/styles": {
+      "import": "./esm/parts/carousel/styles.js",
+      "require": "./cjs/parts/carousel/styles.js"
+    },
+    "./parts/carousel/Carousel": {
+      "import": "./esm/parts/carousel/Carousel.js",
+      "require": "./cjs/parts/carousel/Carousel.js"
+    },
+    "./exportsRelated/DSTab": {
+      "import": "./esm/exportsRelated/DSTab.js",
+      "require": "./cjs/exportsRelated/DSTab.js"
+    },
+    "./DSTabsTypes": {
+      "import": "./esm/DSTabsTypes.js",
+      "require": "./cjs/DSTabsTypes.js"
+    },
+    "./DSTabsDatatestid": {
+      "import": "./esm/DSTabsDatatestid.js",
+      "require": "./cjs/DSTabsDatatestid.js"
+    },
+    "./DSTabsCTX": {
+      "import": "./esm/DSTabsCTX.js",
+      "require": "./cjs/DSTabsCTX.js"
     },
     "./DSTabs": {
       "import": "./esm/DSTabs.js",
       "require": "./cjs/DSTabs.js"
     },
-    "./DSTab": {
-      "import": "./esm/DSTab.js",
-      "require": "./cjs/DSTab.js"
+    "./defaultProps": {
+      "import": "./esm/defaultProps.js",
+      "require": "./cjs/defaultProps.js"
     },
-    "./Carousel": {
-      "import": "./esm/Carousel.js",
-      "require": "./cjs/Carousel.js"
+    "./config/useTabs": {
+      "import": "./esm/config/useTabs.js",
+      "require": "./cjs/config/useTabs.js"
+    },
+    "./config/useCrossRef": {
+      "import": "./esm/config/useCrossRef.js",
+      "require": "./cjs/config/useCrossRef.js"
     }
   },
   "sideEffects": [
@@ -72,20 +132,27 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-classnames": "2.0.0-rc.1",
-    "@elliemae/ds-form": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
-    "memoize-one": "~5.1.1",
+    "@elliemae/ds-button": "2.0.0-rc.13",
+    "@elliemae/ds-icon": "2.0.0-rc.13",
+    "@elliemae/ds-icons": "2.0.0-rc.13",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.13",
+    "@elliemae/ds-system": "2.0.0-rc.13",
+    "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
-    "react-swipeable-views": "~0.13.9",
-    "resize-observer": "~1.0.2"
+    "react-swipeable-views": "~0.13.9"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",