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

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,17 @@
+import styled from 'styled-components';
+
+const StyledPanelContainer = /*#__PURE__*/styled.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;" : "";
+});
+
+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/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-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -11,45 +11,101 @@
       "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/useKeyboardNavigation": {
+      "import": "./esm/utils/hooks/useKeyboardNavigation.js",
+      "require": "./cjs/utils/hooks/useKeyboardNavigation.js"
     },
-    "./TabsPanels": {
-      "import": "./esm/TabsPanels.js",
-      "require": "./cjs/TabsPanels.js"
+    "./utils/helpers": {
+      "import": "./esm/utils/helpers.js",
+      "require": "./cjs/utils/helpers.js"
     },
-    "./TabsImpl": {
-      "import": "./esm/TabsImpl.js",
-      "require": "./cjs/TabsImpl.js"
+    "./utils/constants": {
+      "import": "./esm/utils/constants.js",
+      "require": "./cjs/utils/constants.js"
     },
-    "./TabBar": {
-      "import": "./esm/TabBar.js",
-      "require": "./cjs/TabBar.js"
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
-    "./SubTabBar": {
-      "import": "./esm/SubTabBar.js",
-      "require": "./cjs/SubTabBar.js"
+    "./parts/tabsPanel/TabsPanels": {
+      "import": "./esm/parts/tabsPanel/TabsPanels.js",
+      "require": "./cjs/parts/tabsPanel/TabsPanels.js"
     },
-    "./PanelContainer": {
-      "import": "./esm/PanelContainer.js",
-      "require": "./cjs/PanelContainer.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"
+    },
+    "./config/useTabs": {
+      "import": "./esm/config/useTabs.js",
+      "require": "./cjs/config/useTabs.js"
     },
-    "./Carousel": {
-      "import": "./esm/Carousel.js",
-      "require": "./cjs/Carousel.js"
+    "./config/useCrossRef": {
+      "import": "./esm/config/useCrossRef.js",
+      "require": "./cjs/config/useCrossRef.js"
     }
   },
   "sideEffects": [
@@ -72,20 +128,27 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-alpha.1",
-    "@elliemae/ds-classnames": "2.0.0-alpha.1",
-    "@elliemae/ds-form": "2.0.0-alpha.1",
-    "@elliemae/ds-icons": "2.0.0-alpha.1",
-    "memoize-one": "~5.1.1",
+    "@elliemae/ds-button": "2.0.0-alpha.13",
+    "@elliemae/ds-icon": "2.0.0-alpha.13",
+    "@elliemae/ds-icons": "2.0.0-alpha.13",
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.13",
+    "@elliemae/ds-system": "2.0.0-alpha.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-desc": "~4.1.3",
+    "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",

package/types/DSTabs.d.ts

@@ -1,64 +1,14 @@
-/// <reference types="react" />
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+import type { WeakValidationMap } from 'react';
+import type { DSTabsPropsT } from './DSTabsTypes';
 declare const DSTabs: {
-    ({ containerProps, innerRef, animated, enableMouseEvents, allowTextSelection, onTabChange, tabsListAriaLabel, type, tabBarExtraContent, children: tabs, onlyRenderActiveTab, activeTab, withCarousel, firstSubtabRef, lastTabRef, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, }: {
-        containerProps?: {} | undefined;
-        innerRef: any;
-        animated?: boolean | undefined;
-        enableMouseEvents?: boolean | undefined;
-        allowTextSelection?: boolean | undefined;
-        onTabChange?: (() => null) | undefined;
-        tabsListAriaLabel?: string | undefined;
-        type?: string | undefined;
-        tabBarExtraContent?: undefined;
-        children: any;
-        onlyRenderActiveTab?: boolean | undefined;
-        activeTab: any;
-        withCarousel?: boolean | undefined;
-        firstSubtabRef: any;
-        lastTabRef: any;
-        flexibleTabsHeaders: any;
-        fixedTabsHeaders: any;
-        isDSMobile?: boolean | undefined;
-    }): JSX.Element;
-    propTypes: {
-        /** Whether the tab transition should animate or not */
-        animated: any;
-        /** Enables tab transition with mouse drag events */
-        enableMouseEvents: any;
-        /** Allow text selection when mouse drag events are active */
-        allowTextSelection: any;
-        /** Handler when a user clicks on a different tab */
-        onTabChange: any;
-        /** Tab type */
-        type: any;
-        /** Extra content next to the tabs pills */
-        tabBarExtraContent: any;
-        /** Only renders the active tab in the DOM */
-        onlyRenderActiveTab: any;
-        /** Mobile only flexible tabs mode */
-        flexibleTabsHeaders: any;
-        /** Mobile only fixed tabs mode */
-        fixedTabsHeaders: any;
-        /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
-        /** Activate carousel behavior */
-        withCarousel: any;
-        /** The active tabId */
-        activeTab: any;
-        /** tabs children */
-        children: any;
-        /** Aria label for the list */
-        tabsListAriaLabel: any;
-        /** Additional properties for the container */
-        containerProps: any;
-        /** REF */
-        innerRef: any;
-        /** internal ref to handle keyboard a11y behavior */
-        firstSubtabRef: any;
-        /** internal ref to handle keyboard a11y behavior */
-        lastTabRef: any;
-    };
+    (props: DSTabsPropsT): JSX.Element;
+    propTypes: WeakValidationMap<unknown>;
+};
+declare const DSTabsWithSchema: {
+    (props?: DSTabsPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
 };
-declare const DSTabsWithSchema: any;
 export { DSTabs, DSTabsWithSchema };
 export default DSTabs;

package/types/DSTabsCTX.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { DSTabsUseCrossRefContextT, DSTabsUseTabsContextT } from './DSTabsTypes';
+export declare const DSTabsContext: import("react").Context<DSTabsUseTabsContextT>;
+export declare const DSTabsCrossRefContext: import("react").Context<DSTabsUseCrossRefContextT>;

package/types/DSTabsDatatestid.d.ts

@@ -0,0 +1,12 @@
+export declare const DSTabsDatatestid: {
+    TABS_CONTAINER: string;
+    TAB_BUTTON: string;
+    SUBTAB_BUTTON: string;
+    TAB_PANEL: string;
+    SUB_TAB_LIST: string;
+    TAB_LIST: string;
+    CAROUSEL: {
+        BUTTON_RIGHT: string;
+        BUTTON_LEFT: string;
+    };
+};