@elliemae/ds-tabs 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/utils/constants.js

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

@@ -0,0 +1,75 @@
+'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 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.centerTab = centerTab;
+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,41 @@
+'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

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

@@ -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/{dist/esm → esm}/config/useCrossRef.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { useRef, useMemo } from "react";
+import { useRef, useMemo } from 'react';
+
 const useCrossRef = () => {
   const firstSubtabInternalRef = useRef();
   const lastTabInternalRef = useRef();
@@ -9,7 +9,5 @@ const useCrossRef = () => {
   }), []);
   return ctx;
 };
-export {
-  useCrossRef
-};
-//# sourceMappingURL=useCrossRef.js.map
+
+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 === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
+  }, [actualActiveTab]);
+  const ctx = useMemo(() => ({
+    props: propsWithDefaults,
+    tabsRef,
+    focusableTabsRef,
+    tabsListRef,
+    tabsRefAsArray,
+    setInternalActiveTab,
+    actualActiveTab,
+    actualActiveTabRef,
+    carouselOnlyListRef
+  }), [actualActiveTab, propsWithDefaults]);
+  return ctx;
+};
+
+export { useTabs };

package/{dist/esm → esm}/defaultProps.js

@@ -1,14 +1,15 @@
-import * as React from "react";
-import { TabTypes } from "./utils/constants";
-const noop = () => {
-};
+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",
+  tabsListAriaLabel: 'Tab list',
   type: TabTypes.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
@@ -18,7 +19,5 @@ const tabsDefaultProps = {
   fixedTabsHeaders: false,
   showSeparator: true
 };
-export {
-  tabsDefaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+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); 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

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

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

@@ -0,0 +1,54 @@
+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/{dist/esm → esm}/parts/carousel/useCarousel.js

@@ -1,20 +1,34 @@
-import * as React from "react";
-import { useCallback, useState, useContext } from "react";
-import useResizeObserver from "@react-hook/resize-observer";
-import { DSTabsContext } from "../../DSTabsCTX";
-import { isElementVisibleCarousel } from "../../utils/helpers";
-import { useCarouselCallbacks } from "./useCarouselCallbacks";
-const useCarousel = ({ updateIndicatorStyle }) => {
-  const { carouselOnlyListRef } = useContext(DSTabsContext);
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { useContext, useState, useCallback } from 'react';
+import useResizeObserver from '@react-hook/resize-observer';
+import { DSTabsContext } from '../../DSTabsCTX.js';
+import { isElementVisibleCarousel } from '../../utils/helpers.js';
+import { useCarouselCallbacks } from './useCarouselCallbacks.js';
+
+const useCarousel = _ref => {
+  let {
+    updateIndicatorStyle
+  } = _ref;
+  const {
+    carouselOnlyListRef
+  } = useContext(DSTabsContext);
   const [showChevrons, setShowChevrons] = useState({
     right: false,
     left: false
   });
-  const { tabsRefAsArray } = useContext(DSTabsContext);
+  const {
+    tabsRefAsArray
+  } = useContext(DSTabsContext);
   const shouldShowLeft = useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false, [carouselOnlyListRef]);
   const shouldShowRight = useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false, [carouselOnlyListRef]);
   const recalcChevrons = useCallback(() => {
-    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });
+    setShowChevrons({
+      right: shouldShowRight(),
+      left: shouldShowLeft()
+    });
   }, [shouldShowLeft, shouldShowRight]);
   const getVisibleItemsOffset = useCallback(() => {
     if (tabsRefAsArray.current) {
@@ -25,14 +39,21 @@ const useCarousel = ({ updateIndicatorStyle }) => {
           const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
           return acc + (width + margin);
         }
+
         return acc;
       }, 0);
       return scroll - 16;
     }
+
     return 0;
   }, [tabsRefAsArray, carouselOnlyListRef]);
   useResizeObserver(carouselOnlyListRef, recalcChevrons);
-  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({
+  const {
+    leftButtonOnClick,
+    rightButtonOnClick,
+    handleOnClick,
+    handleOnScroll
+  } = useCarouselCallbacks({
     getVisibleItemsOffset,
     recalcChevrons,
     updateIndicatorStyle
@@ -45,7 +66,5 @@ const useCarousel = ({ updateIndicatorStyle }) => {
     handleOnScroll
   };
 };
-export {
-  useCarousel
-};
-//# sourceMappingURL=useCarousel.js.map
+
+export { useCarousel };