@elliemae/ds-tabs 2.3.0-next.3 → 3.0.0-alpha.0

package/cjs/parts/tabBar/styles.js

@@ -1,200 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('styled-components');
-var dsSystem = require('@elliemae/ds-system');
-var constants = require('../../utils/constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
-const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-0"
-})(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
-  let {
-    tabType,
-    isDSMobile
-  } = _ref;
-  if (isDSMobile) return "35px";
-  if (tabType === constants.TabTypes.NORMAL_SMALL) return "15px";
-  return "25px";
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space.xxxs;
-}, _ref3 => {
-  let {
-    isDSMobile
-  } = _ref3;
-  return isDSMobile ? " \n  margin-left: 0;\n  margin-top: 3px;\n  " : "";
-});
-const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref4 => {
-  let {
-    theme,
-    mobileGradients,
-    isDSMobile,
-    fixedTabsHeaders
-  } = _ref4;
-
-  if (isDSMobile && !fixedTabsHeaders) {
-    if (mobileGradients.right && mobileGradients.left) return "background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ".concat(theme.colors.brand[200], " 20%, ").concat(theme.colors.brand[200], " 80%, rgba(238,238,238,0) 100%);");
-    if (mobileGradients.right) return "background: linear-gradient(90deg, ".concat(theme.colors.brand[200], " 0%, ").concat(theme.colors.brand[200], " 80%, rgba(238,238,238,0) 100%);");
-    if (mobileGradients.left) return "background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  ".concat(theme.colors.brand[200], " 20%, ").concat(theme.colors.brand[200], " 100%);");
-  }
-
-  return "";
-});
-const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-1"
-})(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
-  let {
-    fixedTabsHeaders,
-    isDSMobile
-  } = _ref5;
-  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
-}, _ref6 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref6;
-  return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";") : "";
-});
-const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfig({
-  componentId: "sc-3hla56-2"
-})(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
-  let {
-    tabType
-  } = _ref7;
-  return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
-}, _ref8 => {
-  let {
-    fixedTabsHeaders,
-    isDSMobile
-  } = _ref8;
-  if (fixedTabsHeaders) return '0px';
-  if (!fixedTabsHeaders && isDSMobile) return '14px';
-  return '16px';
-}, _ref9 => {
-  let {
-    fixedTabsHeaders,
-    isDSMobile
-  } = _ref9;
-  if (fixedTabsHeaders) return '0px';
-  if (!fixedTabsHeaders && isDSMobile) return '14px';
-  return '16px';
-}, _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral[700];
-}, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
-  let {
-    tabType
-  } = _ref11;
-  return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
-}, _ref12 => {
-  let {
-    theme,
-    isActive,
-    disabled
-  } = _ref12;
-  return isActive && !disabled ? "\n          font-weight:  ".concat(theme.fontWeights.semibold, ";\n          ").concat(dsSystem.safariAndFirefoxBold("#353C46"), "\n\n          &:hover {\n            ").concat(dsSystem.safariAndFirefoxBold("#1E79C2"), "\n          }\n          \n        ") : "\n      \n      ";
-}, _ref13 => {
-  let {
-    theme,
-    disabled
-  } = _ref13;
-  return disabled ? "\n          color: ".concat(theme.colors.neutral[500], ";\n          cursor: not-allowed;\n        ") : "\n      &:hover {\n        color: ".concat(theme.colors.brand[600], ";\n      }\n          ");
-}, _ref14 => {
-  let {
-    theme,
-    showSeparator,
-    tabType
-  } = _ref14;
-  return showSeparator ? "\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ".concat(tabType === constants.TabTypes.SUBTABS ? "10px" : "16px", ";\n              background: ").concat(theme.colors.neutral[400], ";\n            }") : "";
-}, _ref15 => {
-  let {
-    theme,
-    isDSMobile,
-    tabType,
-    isActive
-  } = _ref15;
-  return !isDSMobile ? "\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ".concat(theme.colors.brand[700], ";\n    }\n\n    ").concat(tabType !== constants.TabTypes.SUBTABS && isActive ? "\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    " : "", "\n  }\n  \n  ") : "";
-}, _ref16 => {
-  let {
-    theme,
-    isActive,
-    disabled,
-    isDSMobile
-  } = _ref16;
-  return isDSMobile ? "\n    height:  40px;\n    color: ".concat(theme.colors.brand[600], ";\n    font-weight: ").concat(theme.fontWeights.regular, ";\n    padding: 0;\n    font-size: 13px;\n    line-height: 1.3;\n    ").concat(dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), " \n\n    &:focus {\n      font-weight: ").concat(theme.fontWeights.regular, ";\n      font-size: 13px;\n      ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n    }\n\n    ").concat(isActive ? "\n        font-weight: ".concat(theme.fontWeights.regular, ";\n        font-size: 13px;\n        ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n        ") : "", "\n\n    ").concat(isActive && !disabled ? "\n        font-size: 13px;\n        color:  ".concat(theme.colors.brand[700], ";\n        line-height: 1.3;\n        font-weight: ").concat(theme.fontWeights.regular, ";\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ").concat(theme.colors.brand[700], ";") : "", "\n\n    ").concat(!disabled ? "\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ".concat(theme.colors.brand[700], ";\n          ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n        }") : "", "\n\n    ") : "";
-});
-const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-3"
-})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
-  let {
-    withCarousel
-  } = _ref17;
-  return withCarousel ? 'max-width: 100%;' : '';
-});
-const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-4"
-})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
-  let {
-    withCarousel,
-    isDSMobile
-  } = _ref18;
-  return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
-}, _ref19 => {
-  let {
-    theme,
-    isDSMobile,
-    tabType
-  } = _ref19;
-  return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? "\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ".concat(theme.colors.neutral[400], ";\n    pointer-events: none;\n    bottom: 0px;\n  }\n  ") : "";
-}, StyledTabButton, _ref20 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref20;
-  return isDSMobile ? "\n        \n         background: ".concat(theme.colors.brand[200], ";") : "";
-}, mobileGradientsSettings, _ref21 => {
-  let {
-    isDSMobile,
-    fixedTabsHeaders
-  } = _ref21;
-  return isDSMobile ? "\n      ".concat(!fixedTabsHeaders ? "\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-width: thin;\n          &::-webkit-scrollbar {\n            display: none;\n          }" : "\n         display: flex;\n        ".concat(StyledTabButton, " {\n          flex: 1;\n          overflow-x: hidden;\n        }")) : "";
-}, StyledSelectionIndicator, _ref22 => {
-  let {
-    indicatorStyle
-  } = _ref22;
-  return "\n        width: ".concat(indicatorStyle.width, ";\n        left: ").concat(indicatorStyle.left, ";\n        ");
-}, StyledSelectionIndicator, _ref23 => {
-  let {
-    theme,
-    indicatorStyle,
-    isDSMobile
-  } = _ref23;
-  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
-});
-const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-3hla56-5"
-})(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.colors.danger[900];
-});
-
-exports.StyledRequiredMark = StyledRequiredMark;
-exports.StyledSelectionIndicator = StyledSelectionIndicator;
-exports.StyledSubTabsList = StyledSubTabsList;
-exports.StyledTabButton = StyledTabButton;
-exports.StyledTabList = StyledTabList;
-exports.StyledTabWrapper = StyledTabWrapper;

package/cjs/parts/tabBar/useTabBar.js

@@ -1,87 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-var useResizeObserver = require('@react-hook/resize-observer');
-var helpers = require('../../utils/helpers.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-var constants = require('../../utils/constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
-
-const useTabBar = () => {
-  const {
-    actualActiveTab,
-    actualActiveTabRef,
-    tabsListRef,
-    props: {
-      showSelectionIndicator,
-      isDSMobile,
-      fixedTabsHeaders
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  const [mobileGradients, setMobileGradients] = React.useState({
-    left: false,
-    right: false
-  });
-  const [indicatorStyle, setIndicatorStyle] = React.useState(constants.defaultIndicatorStyles);
-  const getIndicatorStyles = React.useCallback(() => {
-    if (tabsListRef.current) {
-      const tabList = tabsListRef.current;
-      const activeTabButton = actualActiveTabRef.current;
-      if (!activeTabButton || !helpers.isElementVisible(activeTabButton, tabList)) return constants.defaultIndicatorStyles; // The missingMargins are to make the selection indicator white marks work properly in desktop, we need
-      // the full width of the tab button with margins.
-
-      const missingMargins = isDSMobile ? 0 : 16;
-      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2; // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)
-      // behavior that adds scroll to the tabList
-
-      const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
-      const backgroundWithTransparent = "linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ".concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth, "px )");
-      return {
-        left: "".concat(position, "px"),
-        width: "".concat(tabClientWidth, "px"),
-        backgroundWithTransparent
-      };
-    }
-
-    return constants.defaultIndicatorStyles;
-  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
-  const updateIndicatorStyle = React.useCallback(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
-  useResizeObserver__default["default"](tabsListRef, updateIndicatorStyle);
-  const updateMobileGradients = React.useCallback(() => {
-    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
-      const {
-        scrollLeft,
-        scrollWidth,
-        clientWidth
-      } = tabsListRef.current;
-      setMobileGradients({
-        left: helpers.shouldHaveLeftGradient(scrollLeft),
-        right: helpers.shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
-      });
-    }
-  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  React.useLayoutEffect(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
-  return {
-    updateIndicatorStyle,
-    setIndicatorStyle,
-    indicatorStyle,
-    mobileGradients,
-    updateMobileGradients
-  };
-};
-
-exports.useTabBar = useTabBar;

package/cjs/parts/tabsContent/TabsContent.js

@@ -1,49 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var TabsPanels = require('../tabsPanel/TabsPanels.js');
-var TabBar = require('../tabBar/TabBar.js');
-var styles = require('./styles.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-var _TabBar, _TabsPanels;
-
-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__default["default"](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 TabsContent = () => {
-  const {
-    props: {
-      containerProps,
-      innerRef,
-      tabsListAriaLabel,
-      tabBarExtraContent
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-    ref: innerRef,
-    "data-testid": DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER,
-    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTabBarContainer, {
-      "aria-label": tabsListAriaLabel,
-      role: "tablist"
-    }, void 0, _TabBar || (_TabBar = /*#__PURE__*/_jsx__default["default"](TabBar.TabBar, {})), tabBarExtraContent), _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx__default["default"](TabsPanels.TabsPanels, {}))]
-  }));
-};
-
-exports.TabsContent = TabsContent;

package/cjs/parts/tabsContent/styles.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledTabBarContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-vm3k1y-0"
-})(["display:flex;overflow-x:hidden;"]);
-
-exports.StyledTabBarContainer = StyledTabBarContainer;

package/cjs/parts/tabsPanel/TabsPanels.js

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-var React = require('react');
-var SwipeableViews = require('react-swipeable-views');
-var helpers = require('../../utils/helpers.js');
-var styles = require('./styles.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var SwipeableViews__default = /*#__PURE__*/_interopDefaultLegacy(SwipeableViews);
-
-const TabsPanels = () => {
-  const {
-    actualActiveTab,
-    focusableTabsRef,
-    props: {
-      animated,
-      enableMouseEvents,
-      onlyRenderActiveTab,
-      children: tabs,
-      isDSMobile
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  const {
-    handleOnTabChange,
-    handleOnMouseDown
-  } = useTabsCallbacks.useTabsCallbacks();
-  const handleOnChangeIndex = React.useCallback(index => {
-    handleOnTabChange(helpers.getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
-  }, [focusableTabsRef, handleOnTabChange, tabs]);
-  const panels = React.useMemo(() => React__default["default"].Children.map(tabs, tab => {
-    const {
-      tabId: panelId = '',
-      style,
-      children: content
-    } = tab.props;
-    const isActive = actualActiveTab === panelId;
-    const shouldRender = !onlyRenderActiveTab || isActive;
-    return shouldRender && /*#__PURE__*/_jsx__default["default"](styles.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__default["default"](SwipeableViews__default["default"], {
-      enableMouseEvents: enableMouseEvents,
-      index: helpers.getIndexById(tabs, actualActiveTab),
-      onChangeIndex: handleOnChangeIndex
-    }, void 0, panels);
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: panels
-  });
-};
-
-exports.TabsPanels = TabsPanels;

package/cjs/parts/tabsPanel/styles.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledPanelContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-oxw5jq-0"
-})(["padding-top:8px;&:focus{outline:none;}", " ", ""], _ref => {
-  let {
-    hidden
-  } = _ref;
-  return hidden ? 'visibility: hidden;' : '';
-}, _ref2 => {
-  let {
-    isDSMobile
-  } = _ref2;
-  return isDSMobile ? "padding-top: 0;" : "";
-});
-
-exports.StyledPanelContainer = StyledPanelContainer;

package/cjs/propTypes.js

@@ -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,75 +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 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

@@ -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;