@elliemae/ds-tabs 1.60.0 → 2.0.0-alpha.12

package/cjs/parts/tabsPanel/styles.js

@@ -0,0 +1,25 @@
+'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:8px;&:focus{outline:none;}", " ", ""], _ref => {
+  let {
+    hidden
+  } = _ref;
+  return hidden ? 'visibility: hidden;' : '';
+}, _ref2 => {
+  let {
+    isDSMobile
+  } = _ref2;
+  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/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,156 +1,35 @@
-import React from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { TabTypes } from './TabTypes.js';
-import TabsImpl from './TabsImpl.js';
-import { DSTab } from './DSTab.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'prop-types';
-import '@elliemae/ds-classnames';
-import './TabsPanels.js';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import 'memoize-one';
-import 'react-swipeable-views';
-import './PanelContainer.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import './TabBar.js';
-import '@babel/runtime/helpers/esm/assertThisInitialized';
-import 'lodash';
-import '@elliemae/ds-form/RequiredMark';
-import 'resize-observer';
-import 'styled-components';
-import './Carousel.js';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import './useResize.js';
-import './SubTabBar.js';
-
-/* eslint-disable react/no-unused-prop-types */
-
-var DSTabs = function DSTabs(_ref) {
-  var _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      innerRef = _ref.innerRef,
-      _ref$animated = _ref.animated,
-      animated = _ref$animated === void 0 ? true : _ref$animated,
-      _ref$enableMouseEvent = _ref.enableMouseEvents,
-      enableMouseEvents = _ref$enableMouseEvent === void 0 ? false : _ref$enableMouseEvent,
-      _ref$allowTextSelecti = _ref.allowTextSelection,
-      allowTextSelection = _ref$allowTextSelecti === void 0 ? false : _ref$allowTextSelecti,
-      _ref$onTabChange = _ref.onTabChange,
-      onTabChange = _ref$onTabChange === void 0 ? function () {
-    return null;
-  } : _ref$onTabChange,
-      _ref$tabsListAriaLabe = _ref.tabsListAriaLabel,
-      tabsListAriaLabel = _ref$tabsListAriaLabe === void 0 ? 'Tab list' : _ref$tabsListAriaLabe,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? TabTypes.NORMAL : _ref$type,
-      _ref$tabBarExtraConte = _ref.tabBarExtraContent,
-      tabBarExtraContent = _ref$tabBarExtraConte === void 0 ? undefined : _ref$tabBarExtraConte,
-      tabs = _ref.children,
-      _ref$onlyRenderActive = _ref.onlyRenderActiveTab,
-      onlyRenderActiveTab = _ref$onlyRenderActive === void 0 ? false : _ref$onlyRenderActive,
-      activeTab = _ref.activeTab,
-      _ref$withCarousel = _ref.withCarousel,
-      withCarousel = _ref$withCarousel === void 0 ? false : _ref$withCarousel,
-      firstSubtabRef = _ref.firstSubtabRef,
-      lastTabRef = _ref.lastTabRef,
-      flexibleTabsHeaders = _ref.flexibleTabsHeaders,
-      fixedTabsHeaders = _ref.fixedTabsHeaders,
-      _ref$isDSMobile = _ref.isDSMobile,
-      isDSMobile = _ref$isDSMobile === void 0 ? false : _ref$isDSMobile;
-  return /*#__PURE__*/React.createElement(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
-  }, tabs);
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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, {}))));
 };
 
-var 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')
-};
-DSTabs.propTypes = props;
-var DSTabsWithSchema = describe(DSTabs);
-DSTabsWithSchema.propTypes = props;
+const DSTabsWithSchema = describe(DSTabs);
+DSTabsWithSchema.propTypes = tabsPropTypes;
 
 export { DSTabs, DSTabsWithSchema, DSTabs as default };
-//# sourceMappingURL=DSTabs.js.map

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/exportsRelated/DSTab.js

@@ -0,0 +1,21 @@
+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 { describe } from 'react-desc';
+import { tabPropTypes } from '../propTypes.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 DSTab = props => /*#__PURE__*/jsx(React.Fragment, _objectSpread({}, props));
+
+const DSTabWithSchema = describe(DSTab);
+DSTabWithSchema.propTypes = tabPropTypes;
+
+export { DSTab, DSTabWithSchema, DSTab as default };

package/esm/index.js

@@ -1,33 +1,4 @@
-export { DSTab, DSTabWithSchema } from './DSTab.js';
-export { DSTabs, DSTabsWithSchema, DSTabs as default } from './DSTabs.js';
-export { TabTypes, getTabTypes } from './TabTypes.js';
-import 'react';
-import 'react-desc';
-import './TabsImpl.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'prop-types';
-import '@elliemae/ds-classnames';
-import './TabsPanels.js';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import 'memoize-one';
-import 'react-swipeable-views';
-import './PanelContainer.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import './TabBar.js';
-import '@babel/runtime/helpers/esm/assertThisInitialized';
-import 'lodash';
-import '@elliemae/ds-form/RequiredMark';
-import 'resize-observer';
-import 'styled-components';
-import './Carousel.js';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import './useResize.js';
-import './SubTabBar.js';
-//# sourceMappingURL=index.js.map
+export { DSTab, DSTabWithSchema } from './exportsRelated/DSTab.js';
+export { DSTabs, DSTabsWithSchema } from './DSTabs.js';
+export { TabTypes } from './utils/constants.js';
+export { DSTabsDatatestid } from './DSTabsDatatestid.js';