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

package/cjs/parts/tabsPanel/styles.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledPanelContainer = /*#__PURE__*/styled__default["default"].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;" : "";
+});
+
+exports.StyledPanelContainer = StyledPanelContainer;

package/cjs/propTypes.js

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

package/cjs/utils/constants.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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
+};
+
+exports.MOBILE_GRADIENT_WIDTH = MOBILE_GRADIENT_WIDTH;
+exports.TabTypes = TabTypes;
+exports.TabTypesValuesAsArray = TabTypesValuesAsArray;
+exports.defaultIndicatorStyles = defaultIndicatorStyles;
+exports.gradientOffsetsAccordingType = gradientOffsetsAccordingType;

package/cjs/utils/helpers.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants = require('./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) > constants.MOBILE_GRADIENT_WIDTH;
+const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + constants.MOBILE_GRADIENT_WIDTH);
+
+exports.getIdByIndex = getIdByIndex;
+exports.getIndexById = getIndexById;
+exports.getVisibleDimensions = getVisibleDimensions;
+exports.isElementVisible = isElementVisible;
+exports.isElementVisibleCarousel = isElementVisibleCarousel;
+exports.shouldHaveLeftGradient = shouldHaveLeftGradient;
+exports.shouldHaveRightGradient = shouldHaveRightGradient;

package/cjs/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var DSTabsCTX = require('../../DSTabsCTX.js');
+
+/* eslint-disable max-statements */
+const useKeyboardNavigation = () => {
+  const {
+    focusableTabsRef
+  } = React.useContext(DSTabsCTX.DSTabsContext);
+  const {
+    firstSubtabInternalRef,
+    lastTabInternalRef
+  } = React.useContext(DSTabsCTX.DSTabsCrossRefContext);
+  const handleOnKeyDown = React.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
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

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

@@ -5,9 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var lodash = require('lodash');
 
-function useResize(ref, callback) {
+const useResize = _ref => {
   var _ref$current;
 
+  let {
+    ref,
+    callback
+  } = _ref;
   const {
     right,
     left
@@ -15,10 +19,10 @@ function useResize(ref, callback) {
     right: null,
     left: null
   };
-  const handleResize = lodash.debounce(callback, 300);
+  const handleResize = React.useCallback(() => lodash.debounce(callback, 300), [callback]);
   React.useLayoutEffect(() => {
     handleResize();
-  }, [right, left]);
-}
+  }, [right, left, handleResize]);
+};
 
 exports.useResize = useResize;

package/cjs/utils/hooks/useTabsCallbacks.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var DSTabsCTX = require('../../DSTabsCTX.js');
+
+const useTabsCallbacks = () => {
+  const {
+    setInternalActiveTab,
+    tabsListRef,
+    props: {
+      onTabChange,
+      isDSMobile,
+      allowTextSelection,
+      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);
+    }
+  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  const handleOnMouseDown = React.useCallback(e => {
+    const role = e.target.getAttribute('role');
+    if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
+  }, [allowTextSelection]);
+  return {
+    handleOnTabChange,
+    handleOnMouseDown
+  };
+};
+
+exports.useTabsCallbacks = useTabsCallbacks;

package/esm/DSTabs.js

@@ -1,116 +1,35 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import { TabTypes } from './TabTypes.js';
-import TabsImpl from './TabsImpl.js';
-import { DSTab } from './DSTab.js';
-
-const DSTabs = _ref => {
-  let {
-    containerProps = {},
-    innerRef,
-    animated = true,
-    enableMouseEvents = false,
-    allowTextSelection = false,
-    onTabChange = () => null,
-    tabsListAriaLabel = 'Tab list',
-    type = TabTypes.NORMAL,
-    tabBarExtraContent = undefined,
-    children: tabs,
-    onlyRenderActiveTab = false,
-    activeTab,
-    withCarousel = false,
-    firstSubtabRef,
-    lastTabRef,
-    flexibleTabsHeaders,
-    fixedTabsHeaders,
-    isDSMobile = false
-  } = _ref;
-  return /*#__PURE__*/_jsx(TabsImpl, {
-    activeTab: activeTab,
-    firstSubtabRef: firstSubtabRef,
-    lastTabRef: lastTabRef,
-    allowTextSelection: allowTextSelection,
-    animated: animated,
-    containerProps: containerProps,
-    enableMouseEvents: enableMouseEvents,
-    innerRef: innerRef,
-    onlyRenderActiveTab: onlyRenderActiveTab,
-    onTabChange: onTabChange,
-    tabBarExtraContent: tabBarExtraContent,
-    tabsListAriaLabel: tabsListAriaLabel,
-    type: type,
-    withCarousel: withCarousel,
-    flexibleTabsHeaders: flexibleTabsHeaders,
-    fixedTabsHeaders: fixedTabsHeaders,
-    isDSMobile: isDSMobile
-  }, void 0, tabs);
+import { describe } from 'react-desc';
+import { tabsPropTypes } from './propTypes.js';
+import { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';
+import { TabsContent } from './parts/tabsContent/TabsContent.js';
+import { useTabs } from './config/useTabs.js';
+import { useCrossRef } from './config/useCrossRef.js';
+import { TabTypes } from './utils/constants.js';
+
+var _TabsContent, _TabsContent2;
+
+const DSTabs = props => {
+  const ctx = useTabs(props);
+  const crossRefsCtx = useCrossRef();
+  const {
+    type
+  } = props;
+
+  if (type === TabTypes.SUBTABS) {
+    return /*#__PURE__*/_jsx(DSTabsContext.Provider, {
+      value: ctx
+    }, void 0, _TabsContent || (_TabsContent = /*#__PURE__*/_jsx(TabsContent, {})));
+  }
+
+  return /*#__PURE__*/_jsx(DSTabsCrossRefContext.Provider, {
+    value: crossRefsCtx
+  }, void 0, /*#__PURE__*/_jsx(DSTabsContext.Provider, {
+    value: ctx
+  }, void 0, _TabsContent2 || (_TabsContent2 = /*#__PURE__*/_jsx(TabsContent, {}))));
 };
 
-const props = {
-  /** Whether the tab transition should animate or not */
-  animated: PropTypes.bool.description('Whether the tab transition should animate or not'),
-
-  /** Enables tab transition with mouse drag events */
-  enableMouseEvents: PropTypes.bool.description('Enables tab transition with mouse drag events'),
-
-  /** Allow text selection when mouse drag events are active */
-  allowTextSelection: PropTypes.bool.description('Allow text selection when mouse drag events are active'),
-
-  /** Handler when a user clicks on a different tab */
-  onTabChange: PropTypes.func.description('Handler when a user clicks on a different tab'),
-
-  /** Tab type */
-  type: PropTypes.oneOf(['normal', 'subtabs']).description('Tab type'),
-
-  /** Extra content next to the tabs pills */
-  tabBarExtraContent: PropTypes.element.description('Extra content next to the tabs pills'),
-
-  /** Only renders the active tab in the DOM */
-  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active tab in the DOM'),
-
-  /** Mobile only flexible tabs mode */
-  flexibleTabsHeaders: PropTypes.bool.description('Mobile only flexible tabs mode'),
-
-  /** Mobile only fixed tabs mode */
-  fixedTabsHeaders: PropTypes.bool.description('Mobile only fixed tabs mode'),
-
-  /** Whether or not it's a ds-tab from DSMobile tabs */
-  isDSMobile: PropTypes.bool.description("Whether or not it's a ds-tab from DSMobile tabs"),
-
-  /** Activate carousel behavior */
-  withCarousel: PropTypes.bool.description('Activate carousel behavior'),
-
-  /** The active tabId */
-  activeTab: PropTypes.string.description('The active tabId'),
-
-  /** tabs children */
-  children: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.instanceOf([PropTypes.instanceOf(DSTab), PropTypes.array])
-  })).isRequired.description('tabs children'),
-
-  /** Aria label for the list */
-  tabsListAriaLabel: PropTypes.string.description('Aria label for the list'),
-
-  /** Additional properties for the container */
-  containerProps: PropTypes.object.description('Additional properties for the container'),
-
-  /** REF */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('REF'),
-
-  /** internal ref to handle keyboard a11y behavior */
-  firstSubtabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('internal ref to handle keyboard a11y behavior'),
-
-  /** internal ref to handle keyboard a11y behavior */
-  lastTabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('internal ref to handle keyboard a11y behavior')
-};
 const DSTabsWithSchema = describe(DSTabs);
-DSTabsWithSchema.propTypes = props;
+DSTabsWithSchema.propTypes = tabsPropTypes;
 
 export { DSTabs, DSTabsWithSchema, DSTabs as default };

package/esm/DSTabsCTX.js

@@ -0,0 +1,25 @@
+import { createContext, createRef } from 'react';
+import { tabsDefaultProps } from './defaultProps.js';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultContext = {
+  props: tabsDefaultProps,
+  tabsRef: /*#__PURE__*/createRef(),
+  tabsListRef: /*#__PURE__*/createRef(),
+  carouselOnlyListRef: /*#__PURE__*/createRef(),
+  focusableTabsRef: /*#__PURE__*/createRef(),
+  tabsRefAsArray: /*#__PURE__*/createRef(),
+  actualActiveTabRef: /*#__PURE__*/createRef(),
+  setInternalActiveTab: noop,
+  actualActiveTab: ''
+};
+const defaultCrossRefsContext = {
+  lastTabInternalRef: /*#__PURE__*/createRef(),
+  firstSubtabInternalRef: /*#__PURE__*/createRef()
+};
+const DSTabsContext = /*#__PURE__*/createContext(defaultContext);
+const DSTabsCrossRefContext = /*#__PURE__*/createContext(defaultCrossRefsContext);
+
+export { DSTabsContext, DSTabsCrossRefContext };

package/esm/DSTabsDatatestid.js

@@ -0,0 +1,14 @@
+const DSTabsDatatestid = {
+  TABS_CONTAINER: 'ds-tabs-container',
+  TAB_BUTTON: 'ds-tabs-tab-button',
+  SUBTAB_BUTTON: 'ds-tabs-subtab-button',
+  TAB_PANEL: 'ds-tabs-tab-panel',
+  SUB_TAB_LIST: 'subtabs-list',
+  TAB_LIST: 'tab-list',
+  CAROUSEL: {
+    BUTTON_RIGHT: 'chevron-right',
+    BUTTON_LEFT: 'chevron-left'
+  }
+};
+
+export { DSTabsDatatestid };

package/esm/DSTabsTypes.js

@@ -0,0 +1 @@
+

package/esm/config/useCrossRef.js

@@ -0,0 +1,13 @@
+import { useRef, useMemo } from 'react';
+
+const useCrossRef = () => {
+  const firstSubtabInternalRef = useRef();
+  const lastTabInternalRef = useRef();
+  const ctx = useMemo(() => ({
+    firstSubtabInternalRef,
+    lastTabInternalRef
+  }), []);
+  return ctx;
+};
+
+export { useCrossRef };

package/esm/config/useTabs.js

@@ -0,0 +1,47 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useRef, useState, useMemo, useEffect } from 'react';
+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
+  } = propsWithDefaults;
+  const tabsRef = useRef({});
+  const tabsRefAsArray = useRef([]);
+  const focusableTabsRef = useRef([]);
+  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 actualActiveTab = useMemo(() => {
+    if (activeTab !== undefined) return activeTab;
+    return internalActiveTab;
+  }, [activeTab, internalActiveTab]);
+  useEffect(() => {
+    var _focusableTabsRef$cur;
+
+    actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === internalActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
+  }, [internalActiveTab]);
+  const ctx = useMemo(() => ({
+    props: propsWithDefaults,
+    tabsRef,
+    focusableTabsRef,
+    tabsListRef,
+    tabsRefAsArray,
+    setInternalActiveTab,
+    actualActiveTab,
+    actualActiveTabRef,
+    carouselOnlyListRef
+  }), [actualActiveTab, propsWithDefaults]);
+  return ctx;
+};
+
+export { useTabs };

package/esm/defaultProps.js

@@ -0,0 +1,23 @@
+import { TabTypes } from './utils/constants.js';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const tabsDefaultProps = {
+  containerProps: {},
+  animated: true,
+  enableMouseEvents: false,
+  allowTextSelection: false,
+  onTabChange: noop,
+  tabsListAriaLabel: 'Tab list',
+  type: TabTypes.NORMAL,
+  onlyRenderActiveTab: false,
+  withCarousel: false,
+  isDSMobile: false,
+  showSelectionIndicator: true,
+  children: [],
+  fixedTabsHeaders: false,
+  showSeparator: true
+};
+
+export { tabsDefaultProps };

package/esm/{PanelContainer.js → exportsRelated/DSTab.js}

@@ -1,40 +1,21 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
 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 React from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { describe } from 'react-desc';
+import { tabPropTypes } from '../propTypes.js';
 import { jsx } from 'react/jsx-runtime';
 
-const _excluded = ["children", "lastTabRef", "firstSubtabRef"];
-
 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 blockName = 'tabs-panels';
-const PC = aggregatedClasses('div')(blockName, 'panel');
 
-const PanelContainer = _ref => {
-  let {
-    children,
-    lastTabRef,
-    firstSubtabRef
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+const DSTab = props => /*#__PURE__*/jsx(React.Fragment, _objectSpread({}, props));
 
-  // inject ref to handle focus on first subtab child
-  const child = React.Children.map(children, (c, i) => i === 0 && c ? /*#__PURE__*/React.cloneElement(c, {
-    firstSubtabRef,
-    lastTabRef
-  }) : c);
-  return /*#__PURE__*/jsx(PC, _objectSpread(_objectSpread({}, rest), {}, {
-    children: child
-  }));
-};
+const DSTabWithSchema = describe(DSTab);
+DSTabWithSchema.propTypes = tabPropTypes;
 
-export { PanelContainer as default };
+export { DSTab, DSTabWithSchema, DSTab as default };

package/esm/index.js

@@ -1,3 +1,4 @@
-export { DSTab, DSTabWithSchema } from './DSTab.js';
-export { DSTabs, DSTabsWithSchema, DSTabs as default } from './DSTabs.js';
-export { TabTypes, getTabTypes } from './TabTypes.js';
+export { DSTab, DSTabWithSchema } from './exportsRelated/DSTab.js';
+export { DSTabs, DSTabsWithSchema } from './DSTabs.js';
+export { TabTypes } from './utils/constants.js';
+export { DSTabsDatatestid } from './DSTabsDatatestid.js';