@elliemae/ds-tabs 2.2.2-rc.1 → 2.3.0-alpha.10

package/esm/parts/tabsContent/TabsContent.js

@@ -1,40 +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 _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); 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 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

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

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

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

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

@@ -1,20 +0,0 @@
-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
-};
-
-export { MOBILE_GRADIENT_WIDTH, TabTypes, TabTypesValuesAsArray, defaultIndicatorStyles, gradientOffsetsAccordingType };

package/esm/utils/hooks/useKeyboardNavigation.js

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

@@ -1,37 +0,0 @@
-import { useContext, useCallback } from 'react';
-import { centerTab } from '../helpers.js';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-
-const useTabsCallbacks = () => {
-  const {
-    setInternalActiveTab,
-    tabsListRef,
-    props: {
-      onTabChange,
-      isDSMobile,
-      allowTextSelection,
-      fixedTabsHeaders
-    }
-  } = useContext(DSTabsContext);
-  const handleOnTabChange = useCallback((tabId, e) => {
-    setInternalActiveTab(tabId);
-    onTabChange(tabId, e);
-
-    if (isDSMobile && !fixedTabsHeaders && e) {
-      centerTab({
-        e,
-        listRef: tabsListRef
-      });
-    }
-  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
-  const handleOnMouseDown = useCallback(e => {
-    const role = e.target.getAttribute('role');
-    if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
-  }, [allowTextSelection]);
-  return {
-    handleOnTabChange,
-    handleOnMouseDown
-  };
-};
-
-export { useTabsCallbacks };