@elliemae/ds-tabs 2.3.1 → 3.0.0-alpha.3

package/cjs/propTypes.js

@@ -1,33 +0,0 @@
-'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

@@ -1,28 +0,0 @@
-'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',
-  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

@@ -1,71 +0,0 @@
-'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 centerTab = _ref => {
-  let {
-    e,
-    listRef
-  } = _ref;
-
-  if (listRef.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
-    } = listRef.current.getBoundingClientRect();
-    const extraSideSpace = listWidth - tabWidth;
-    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-    listRef.current.scrollTo({
-      top: 0,
-      left: centeredLeftOffset,
-      behavior: 'smooth'
-    });
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-  }
-};
-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 shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) > constants.MOBILE_GRADIENT_WIDTH;
-const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + constants.MOBILE_GRADIENT_WIDTH);
-
-exports.centerTab = centerTab;
-exports.getVisibleDimensions = getVisibleDimensions;
-exports.isElementVisible = isElementVisible;
-exports.isElementVisibleCarousel = isElementVisibleCarousel;
-exports.shouldHaveLeftGradient = shouldHaveLeftGradient;
-exports.shouldHaveRightGradient = shouldHaveRightGradient;

package/cjs/utils/hooks/useKeyboardNavigation.js

@@ -1,61 +0,0 @@
-'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

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var helpers = require('../helpers.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-
-const useTabsCallbacks = () => {
-  const {
-    setInternalActiveTab,
-    tabsListRef,
-    props: {
-      onTabChange,
-      isDSMobile,
-      allowTextSelection,
-      fixedTabsHeaders
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  const handleOnTabChange = React.useCallback((tabId, e) => {
-    setInternalActiveTab(tabId);
-    onTabChange(tabId, e);
-
-    if (isDSMobile && !fixedTabsHeaders && e) {
-      helpers.centerTab({
-        e,
-        listRef: tabsListRef
-      });
-    }
-  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
-  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,35 +0,0 @@
-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, {}))));
-};
-
-const DSTabsWithSchema = describe(DSTabs);
-DSTabsWithSchema.propTypes = tabsPropTypes;
-
-export { DSTabs, DSTabsWithSchema, DSTabs as default };

package/esm/DSTabsCTX.js

@@ -1,25 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1 +0,0 @@
-

package/esm/config/useTabs.js

@@ -1,50 +0,0 @@
-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 => {
-  const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
-  const {
-    activeTab
-  } = 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('');
-  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 === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
-  }, [actualActiveTab]);
-  useEffect(() => {
-    if (activeTab === undefined) {
-      const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
-      setInternalActiveTab((firstAvailableTab === null || firstAvailableTab === void 0 ? void 0 : firstAvailableTab.dataset.tabId) || '');
-    }
-  }, [activeTab]);
-  const ctx = useMemo(() => ({
-    props: propsWithDefaults,
-    tabsRef,
-    focusableTabsRef,
-    tabsListRef,
-    tabsRefAsArray,
-    setInternalActiveTab,
-    actualActiveTab,
-    actualActiveTabRef,
-    carouselOnlyListRef
-  }), [actualActiveTab, propsWithDefaults]);
-  return ctx;
-};
-
-export { useTabs };

package/esm/exportsRelated/DSTab.js

@@ -1,21 +0,0 @@
-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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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,4 +0,0 @@
-export { DSTab, DSTabWithSchema } from './exportsRelated/DSTab.js';
-export { DSTabs, DSTabsWithSchema } from './DSTabs.js';
-export { TabTypes } from './utils/constants.js';
-export { DSTabsDatatestid } from './DSTabsDatatestid.js';

package/esm/parts/carousel/Carousel.js

@@ -1,61 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import { DSIconSizes } from '@elliemae/ds-icon';
-import { BUTTON_TYPES } from '@elliemae/ds-button';
-import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
-import { StyledCarouselWrapper, StyledCarouselButtonWrapper, StyledCarouselBtn, StyledChildrenWrap } from './styles.js';
-import { useCarousel } from './useCarousel.js';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
-import { jsx } from 'react/jsx-runtime';
-
-const Carousel = _ref => {
-  let {
-    children,
-    updateIndicatorStyle
-  } = _ref;
-  const {
-    showChevrons,
-    leftButtonOnClick,
-    rightButtonOnClick,
-    handleOnClick,
-    handleOnScroll
-  } = useCarousel({
-    updateIndicatorStyle
-  });
-  const {
-    carouselOnlyListRef,
-    props: {
-      type
-    }
-  } = useContext(DSTabsContext);
-  return /*#__PURE__*/_jsx(StyledCarouselWrapper, {}, void 0, showChevrons.left && /*#__PURE__*/_jsx(StyledCarouselButtonWrapper, {
-    tabType: type
-  }, void 0, /*#__PURE__*/_jsx(StyledCarouselBtn, {
-    size: "s",
-    onClick: leftButtonOnClick,
-    tabIndex: -1,
-    "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
-    buttonType: BUTTON_TYPES.ICON
-  }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
-    size: DSIconSizes.S
-  }))), showChevrons.right && /*#__PURE__*/_jsx(StyledCarouselButtonWrapper, {
-    tabType: type,
-    right: showChevrons.right
-  }, void 0, /*#__PURE__*/_jsx(StyledCarouselBtn, {
-    size: "s",
-    onClick: rightButtonOnClick,
-    tabIndex: -1,
-    "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
-    buttonType: BUTTON_TYPES.ICON
-  }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
-    size: DSIconSizes.S
-  }))), /*#__PURE__*/jsx(StyledChildrenWrap, {
-    ref: carouselOnlyListRef,
-    onClick: handleOnClick,
-    onScroll: handleOnScroll,
-    children: children
-  }));
-};
-
-export { Carousel };

package/esm/parts/carousel/styles.js

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import { DSButtonV2 } from '@elliemae/ds-button';
-import { TabTypes } from '../../utils/constants.js';
-
-const StyledCarouselBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-prv5a7-0"
-})(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;& .em-ds-icon svg{fill:", ";}"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space.xs;
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space.xs;
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.brand[600];
-});
-const StyledCarouselWrapper = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-prv5a7-1"
-})(["position:relative;width:100%;display:flex;"]);
-const StyledChildrenWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-prv5a7-2"
-})(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
-const StyledCarouselButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-prv5a7-3"
-})(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background:white;", ";"], _ref4 => {
-  let {
-    right
-  } = _ref4;
-  return right ? 'right: 0;' : "left: 0;";
-}, _ref5 => {
-  let {
-    tabType
-  } = _ref5;
-  return tabType === TabTypes.NORMAL ? '32px' : '22px';
-}, _ref6 => {
-  let {
-    tabType
-  } = _ref6;
-  return tabType === TabTypes.NORMAL ? '5px' : '0px';
-}, _ref7 => {
-  let {
-    theme,
-    tabType
-  } = _ref7;
-  return tabType === TabTypes.NORMAL ? "\n      background: linear-gradient(to bottom, white 0px, white 30px, ".concat(theme.colors.neutral[400], " 30px, ").concat(theme.colors.neutral[400], " 31px, white 31px , white 32px );\n ") : "";
-});
-
-export { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap };

package/esm/parts/tabBar/TabBar.js

@@ -1,159 +0,0 @@
-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, useMemo } from 'react';
-import { Carousel } from '../carousel/Carousel.js';
-import { useTabBar } from './useTabBar.js';
-import { StyledTabButton, StyledRequiredMark, StyledSubTabsList, StyledTabList, StyledTabWrapper, StyledSelectionIndicator } from './styles.js';
-import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
-import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
-import { centerTab } from '../../utils/helpers.js';
-import { TabTypes } from '../../utils/constants.js';
-import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
-import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var _StyledRequiredMark;
-const TabBar = () => {
-  const {
-    tabsRef,
-    focusableTabsRef,
-    tabsListRef,
-    tabsRefAsArray,
-    carouselOnlyListRef,
-    actualActiveTab,
-    props: {
-      type,
-      fixedTabsHeaders,
-      withCarousel,
-      isDSMobile,
-      showSeparator,
-      children: tabs
-    }
-  } = useContext(DSTabsContext);
-  const {
-    lastTabInternalRef,
-    firstSubtabInternalRef
-  } = useContext(DSTabsCrossRefContext);
-  const {
-    handleOnTabChange
-  } = useTabsCallbacks();
-  const {
-    handleOnKeyDown
-  } = useKeyboardNavigation();
-  const {
-    indicatorStyle,
-    mobileGradients,
-    updateMobileGradients,
-    updateIndicatorStyle
-  } = useTabBar();
-  const renderTabs = useMemo(() => {
-    const availableTabIndexes = [];
-    return React.Children.map(tabs, (tab, index) => {
-      const {
-        tabId = '',
-        title = '',
-        style,
-        required = false,
-        disabled = false,
-        ref,
-        onClick,
-        onKeyDown
-      } = tab.props;
-      if (!disabled) availableTabIndexes.push(index);
-      return /*#__PURE__*/jsxs(StyledTabButton, {
-        role: "tab",
-        ref: tabButtonRef => {
-          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
-            tabsRefAsArray.current[index] = tabButtonRef;
-            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef)) focusableTabsRef.current.push(tabButtonRef);
-            tabsRef.current[index] = tabButtonRef;
-
-            if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-              firstSubtabInternalRef.current = tabButtonRef;
-            }
-
-            if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
-              lastTabInternalRef.current = tabButtonRef;
-            }
-
-            if (ref) ref.current = tabButtonRef;
-          }
-        },
-        type: "button",
-        "aria-controls": tabId,
-        "aria-selected": actualActiveTab === tabId,
-        "aria-disabled": disabled,
-        "aria-labelledby": "".concat(tabId, "-label"),
-        isDSMobile: isDSMobile,
-        fixedTabsHeaders: fixedTabsHeaders,
-        tabType: type,
-        title: title,
-        "data-required": required,
-        "data-tab-id": tabId,
-        "data-index": index,
-        withCarousel: withCarousel,
-        isActive: actualActiveTab === tabId,
-        disabled: disabled,
-        showSeparator: showSeparator && type !== TabTypes.NORMAL,
-        "data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
-        id: "".concat(tabId, "-label"),
-        onClick: e => {
-          if (!disabled) {
-            handleOnTabChange(tabId, e);
-            updateIndicatorStyle();
-          }
-
-          if (onClick && !disabled) onClick(tabId, e);
-        },
-        onFocus: e => {
-          if (withCarousel) centerTab({
-            e,
-            listRef: carouselOnlyListRef
-          });
-        },
-        onKeyDown: e => {
-          if (e.key === 'Enter') e.stopPropagation();
-          if (!disabled) handleOnKeyDown(e);
-          if (onKeyDown && !disabled) onKeyDown(e);
-        },
-        style: style,
-        children: [title, required && (_StyledRequiredMark || (_StyledRequiredMark = /*#__PURE__*/_jsx(StyledRequiredMark, {}, void 0, "\u25CF")))]
-      }, tabId);
-    });
-  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, carouselOnlyListRef, handleOnKeyDown]);
-
-  if (type === TabTypes.SUBTABS && !isDSMobile) {
-    return /*#__PURE__*/jsx(StyledSubTabsList, {
-      withCarousel: withCarousel,
-      "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
-      ref: tabsListRef,
-      role: "tablist",
-      children: withCarousel ? /*#__PURE__*/_jsx(Carousel, {}, void 0, renderTabs) : renderTabs
-    });
-  }
-
-  return /*#__PURE__*/jsxs(StyledTabList, {
-    withCarousel: withCarousel,
-    ref: tabsListRef,
-    role: "tablist",
-    "data-testid": DSTabsDatatestid.TAB_LIST,
-    isDSMobile: isDSMobile,
-    fixedTabsHeaders: fixedTabsHeaders,
-    mobileGradients: mobileGradients,
-    onScroll: updateMobileGradients,
-    indicatorStyle: indicatorStyle,
-    tabType: type,
-    children: [/*#__PURE__*/_jsx(StyledTabWrapper, {
-      isDSMobile: isDSMobile,
-      fixedTabsHeaders: fixedTabsHeaders
-    }, void 0, !isDSMobile && withCarousel ? /*#__PURE__*/_jsx(Carousel, {
-      updateIndicatorStyle: updateIndicatorStyle
-    }, void 0, renderTabs) : renderTabs), /*#__PURE__*/_jsx(StyledSelectionIndicator, {
-      isDSMobile: isDSMobile,
-      tabType: type
-    })]
-  });
-};
-
-export { TabBar };