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

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,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,14 +1,126 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "1.60.0",
+  "version": "2.0.0-alpha.12",
   "license": "MIT",
-  "description": "Ellie Mae - Dim Sum - Tabs",
-  "module": "esm/index.js",
-  "main": "cjs/index.js",
+  "description": "ICE MT - Dimsum - Tabs",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./utils/hooks/useTabsCallbacks": {
+      "import": "./esm/utils/hooks/useTabsCallbacks.js",
+      "require": "./cjs/utils/hooks/useTabsCallbacks.js"
+    },
+    "./utils/hooks/useKeyboardNavigation": {
+      "import": "./esm/utils/hooks/useKeyboardNavigation.js",
+      "require": "./cjs/utils/hooks/useKeyboardNavigation.js"
+    },
+    "./utils/helpers": {
+      "import": "./esm/utils/helpers.js",
+      "require": "./cjs/utils/helpers.js"
+    },
+    "./utils/constants": {
+      "import": "./esm/utils/constants.js",
+      "require": "./cjs/utils/constants.js"
+    },
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.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"
+    },
+    "./defaultProps": {
+      "import": "./esm/defaultProps.js",
+      "require": "./cjs/defaultProps.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": [
     "*.css",
     "*.scss"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
     "prebuild": "exit 0",
@@ -16,27 +128,31 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "1.60.0",
-    "@elliemae/ds-classnames": "1.60.0",
-    "@elliemae/ds-form": "1.60.0",
-    "@elliemae/ds-icons": "1.60.0",
-    "memoize-one": "~5.1.1",
+    "@elliemae/ds-button": "2.0.0-alpha.12",
+    "@elliemae/ds-icon": "2.0.0-alpha.12",
+    "@elliemae/ds-icons": "2.0.0-alpha.12",
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.12",
+    "@elliemae/ds-system": "2.0.0-alpha.12",
+    "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
-    "react-desc": "^4.1.2",
-    "react-swipeable-views": "~0.13.9",
-    "resize-observer": "~1.0.0"
+    "react-desc": "~4.1.3",
+    "react-swipeable-views": "~0.13.9"
   },
   "devDependencies": {
-    "styled-components": "~5.3.0"
+    "@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.20",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "styled-components": "^5.3.0"
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSTabs.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+import type { WeakValidationMap } from 'react';
+import type { DSTabsPropsT } from './DSTabsTypes';
+declare const DSTabs: {
+    (props: DSTabsPropsT): JSX.Element;
+    propTypes: WeakValidationMap<unknown>;
+};
+declare const DSTabsWithSchema: {
+    (props?: DSTabsPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+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;
+    };
+};