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

package/esm/propTypes.js

@@ -0,0 +1,28 @@
+import { PropTypes } from 'react-desc';
+import { TabTypesValuesAsArray } from './utils/constants.js';
+
+const tabPropTypes = {
+  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),
+  title: PropTypes.string.description('Tab title.').defaultValue(''),
+  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),
+  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false)
+};
+const tabsPropTypes = {
+  animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),
+  enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),
+  allowTextSelection: PropTypes.bool.description('Allows text selection when mouse drag events are active.').defaultValue(false),
+  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),
+  type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),
+  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),
+  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),
+  withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),
+  activeTab: PropTypes.string.description('Passing a value makes DSTabs a controlled component.').defaultValue('First DSTab children.'),
+  children: PropTypes.node.description('Use DSTab component as children.').isRequired,
+  tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),
+  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('Ref to the container.').defaultValue(undefined)
+};
+
+export { tabPropTypes, tabsPropTypes };

package/esm/utils/constants.js

@@ -0,0 +1,20 @@
+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/{dist/esm → esm}/utils/helpers.js

@@ -1,11 +1,13 @@
-import * as React from "react";
-import { MOBILE_GRADIENT_WIDTH } from "./constants";
+import { MOBILE_GRADIENT_WIDTH } from './constants.js';
+
 const isElementVisible = (tab, tabList) => {
   const tabDimensions = tab.getBoundingClientRect();
   const tabListDimensions = tabList.getBoundingClientRect();
   return tabDimensions.left <= tabListDimensions.left ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;
 };
-const isElementVisibleCarousel = (tab, tabContainer, firstOrLastItem = true) => {
+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();
@@ -16,22 +18,34 @@ const isElementVisibleCarousel = (tab, tabContainer, firstOrLastItem = true) =>
     const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);
     return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;
   }
+
   return false;
 };
-const centerTab = ({ e, listRef }) => {
+const centerTab = _ref => {
+  let {
+    e,
+    listRef
+  } = _ref;
+
   if (listRef.current) {
-    const { offsetLeft } = e?.target;
-    const { width: tabWidth } = (e?.target).getBoundingClientRect();
-    const { width: listWidth } = listRef.current.getBoundingClientRect();
+    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"
+      behavior: 'smooth'
     });
-    e?.preventDefault();
+    e === null || e === void 0 ? void 0 : e.preventDefault();
   }
 };
 const getVisibleDimensions = (node, referenceNode) => {
@@ -42,18 +56,9 @@ const getVisibleDimensions = (node, referenceNode) => {
     height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
   };
 };
-const getIndexById = (children, activeId) => children && children.findIndex((item) => item.props.tabId === activeId);
-const getIdByIndex = (children, index) => children && children[index].props.tabId || "";
-const shouldHaveLeftGradient = (scrollLeft) => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;
+const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
+const getIdByIndex = (children, index) => children && children[index].props.tabId || '';
+const shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;
 const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);
-export {
-  centerTab,
-  getIdByIndex,
-  getIndexById,
-  getVisibleDimensions,
-  isElementVisible,
-  isElementVisibleCarousel,
-  shouldHaveLeftGradient,
-  shouldHaveRightGradient
-};
-//# sourceMappingURL=helpers.js.map
+
+export { centerTab, getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };

package/esm/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,57 @@
+import { useContext, useCallback } from 'react';
+import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
+
+/* eslint-disable max-statements */
+const useKeyboardNavigation = () => {
+  const {
+    focusableTabsRef
+  } = useContext(DSTabsContext);
+  const {
+    firstSubtabInternalRef,
+    lastTabInternalRef
+  } = useContext(DSTabsCrossRefContext);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.key === 'ArrowRight' && focusableTabsRef.current) {
+      var _focusableTabsRef$cur, _focusableTabsRef$cur2;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const nextTab = focusableTabsRef.current[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : (_focusableTabsRef$cur2 = _focusableTabsRef$cur.indexOf) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.call(_focusableTabsRef$cur, e.target)) + 1];
+      if (nextTab) nextTab.focus();
+      if (!nextTab) return;
+    }
+
+    if (e.key === 'ArrowLeft' && focusableTabsRef.current) {
+      var _focusableTabsRef$cur3, _focusableTabsRef$cur4;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const prevTab = focusableTabsRef.current[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur3 = focusableTabsRef.current) === null || _focusableTabsRef$cur3 === void 0 ? void 0 : (_focusableTabsRef$cur4 = _focusableTabsRef$cur3.indexOf) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.call(_focusableTabsRef$cur3, e.target)) - 1];
+      if (prevTab) prevTab.focus();
+      if (!prevTab) return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      var _firstSubtabInternalR;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const canFocusCrossTabs = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
+      if (canFocusCrossTabs) (_firstSubtabInternalR = firstSubtabInternalRef.current) === null || _firstSubtabInternalR === void 0 ? void 0 : _firstSubtabInternalR.focus();
+    }
+
+    if (e.key === 'ArrowUp') {
+      var _lastTabInternalRef$c;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const canFocusCrossTabs = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
+      if (canFocusCrossTabs) (_lastTabInternalRef$c = lastTabInternalRef.current) === null || _lastTabInternalRef$c === void 0 ? void 0 : _lastTabInternalRef$c.focus();
+    }
+  }, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
+  return {
+    handleOnKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/esm/utils/hooks/useTabsCallbacks.js

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

package/package.json

@@ -1,114 +1,111 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./utils/hooks/useTabsCallbacks": {
-      "import": "./dist/esm/utils/hooks/useTabsCallbacks.js",
-      "require": "./dist/cjs/utils/hooks/useTabsCallbacks.js"
+      "import": "./esm/utils/hooks/useTabsCallbacks.js",
+      "require": "./cjs/utils/hooks/useTabsCallbacks.js"
     },
     "./utils/hooks/useKeyboardNavigation": {
-      "import": "./dist/esm/utils/hooks/useKeyboardNavigation.js",
-      "require": "./dist/cjs/utils/hooks/useKeyboardNavigation.js"
+      "import": "./esm/utils/hooks/useKeyboardNavigation.js",
+      "require": "./cjs/utils/hooks/useKeyboardNavigation.js"
     },
     "./utils/helpers": {
-      "import": "./dist/esm/utils/helpers.js",
-      "require": "./dist/cjs/utils/helpers.js"
+      "import": "./esm/utils/helpers.js",
+      "require": "./cjs/utils/helpers.js"
     },
     "./utils/constants": {
-      "import": "./dist/esm/utils/constants.js",
-      "require": "./dist/cjs/utils/constants.js"
+      "import": "./esm/utils/constants.js",
+      "require": "./cjs/utils/constants.js"
     },
     "./propTypes": {
-      "import": "./dist/esm/propTypes.js",
-      "require": "./dist/cjs/propTypes.js"
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
     "./parts/tabsPanel/TabsPanels": {
-      "import": "./dist/esm/parts/tabsPanel/TabsPanels.js",
-      "require": "./dist/cjs/parts/tabsPanel/TabsPanels.js"
+      "import": "./esm/parts/tabsPanel/TabsPanels.js",
+      "require": "./cjs/parts/tabsPanel/TabsPanels.js"
     },
     "./parts/tabsPanel/styles": {
-      "import": "./dist/esm/parts/tabsPanel/styles.js",
-      "require": "./dist/cjs/parts/tabsPanel/styles.js"
+      "import": "./esm/parts/tabsPanel/styles.js",
+      "require": "./cjs/parts/tabsPanel/styles.js"
     },
     "./parts/tabsContent/TabsContent": {
-      "import": "./dist/esm/parts/tabsContent/TabsContent.js",
-      "require": "./dist/cjs/parts/tabsContent/TabsContent.js"
+      "import": "./esm/parts/tabsContent/TabsContent.js",
+      "require": "./cjs/parts/tabsContent/TabsContent.js"
     },
     "./parts/tabsContent/styles": {
-      "import": "./dist/esm/parts/tabsContent/styles.js",
-      "require": "./dist/cjs/parts/tabsContent/styles.js"
+      "import": "./esm/parts/tabsContent/styles.js",
+      "require": "./cjs/parts/tabsContent/styles.js"
     },
     "./parts/tabBar/useTabBar": {
-      "import": "./dist/esm/parts/tabBar/useTabBar.js",
-      "require": "./dist/cjs/parts/tabBar/useTabBar.js"
+      "import": "./esm/parts/tabBar/useTabBar.js",
+      "require": "./cjs/parts/tabBar/useTabBar.js"
     },
     "./parts/tabBar/TabBar": {
-      "import": "./dist/esm/parts/tabBar/TabBar.js",
-      "require": "./dist/cjs/parts/tabBar/TabBar.js"
+      "import": "./esm/parts/tabBar/TabBar.js",
+      "require": "./cjs/parts/tabBar/TabBar.js"
     },
     "./parts/tabBar/styles": {
-      "import": "./dist/esm/parts/tabBar/styles.js",
-      "require": "./dist/cjs/parts/tabBar/styles.js"
+      "import": "./esm/parts/tabBar/styles.js",
+      "require": "./cjs/parts/tabBar/styles.js"
     },
     "./parts/carousel/useCarouselCallbacks": {
-      "import": "./dist/esm/parts/carousel/useCarouselCallbacks.js",
-      "require": "./dist/cjs/parts/carousel/useCarouselCallbacks.js"
+      "import": "./esm/parts/carousel/useCarouselCallbacks.js",
+      "require": "./cjs/parts/carousel/useCarouselCallbacks.js"
     },
     "./parts/carousel/useCarousel": {
-      "import": "./dist/esm/parts/carousel/useCarousel.js",
-      "require": "./dist/cjs/parts/carousel/useCarousel.js"
+      "import": "./esm/parts/carousel/useCarousel.js",
+      "require": "./cjs/parts/carousel/useCarousel.js"
     },
     "./parts/carousel/styles": {
-      "import": "./dist/esm/parts/carousel/styles.js",
-      "require": "./dist/cjs/parts/carousel/styles.js"
+      "import": "./esm/parts/carousel/styles.js",
+      "require": "./cjs/parts/carousel/styles.js"
     },
     "./parts/carousel/Carousel": {
-      "import": "./dist/esm/parts/carousel/Carousel.js",
-      "require": "./dist/cjs/parts/carousel/Carousel.js"
+      "import": "./esm/parts/carousel/Carousel.js",
+      "require": "./cjs/parts/carousel/Carousel.js"
     },
     "./exportsRelated/DSTab": {
-      "import": "./dist/esm/exportsRelated/DSTab.js",
-      "require": "./dist/cjs/exportsRelated/DSTab.js"
+      "import": "./esm/exportsRelated/DSTab.js",
+      "require": "./cjs/exportsRelated/DSTab.js"
     },
     "./DSTabsTypes": {
-      "import": "./dist/esm/DSTabsTypes.js",
-      "require": "./dist/cjs/DSTabsTypes.js"
+      "import": "./esm/DSTabsTypes.js",
+      "require": "./cjs/DSTabsTypes.js"
     },
     "./DSTabsDatatestid": {
-      "import": "./dist/esm/DSTabsDatatestid.js",
-      "require": "./dist/cjs/DSTabsDatatestid.js"
+      "import": "./esm/DSTabsDatatestid.js",
+      "require": "./cjs/DSTabsDatatestid.js"
     },
     "./DSTabsCTX": {
-      "import": "./dist/esm/DSTabsCTX.js",
-      "require": "./dist/cjs/DSTabsCTX.js"
+      "import": "./esm/DSTabsCTX.js",
+      "require": "./cjs/DSTabsCTX.js"
     },
     "./DSTabs": {
-      "import": "./dist/esm/DSTabs.js",
-      "require": "./dist/cjs/DSTabs.js"
+      "import": "./esm/DSTabs.js",
+      "require": "./cjs/DSTabs.js"
     },
     "./defaultProps": {
-      "import": "./dist/esm/defaultProps.js",
-      "require": "./dist/cjs/defaultProps.js"
+      "import": "./esm/defaultProps.js",
+      "require": "./cjs/defaultProps.js"
     },
     "./config/useTabs": {
-      "import": "./dist/esm/config/useTabs.js",
-      "require": "./dist/cjs/config/useTabs.js"
+      "import": "./esm/config/useTabs.js",
+      "require": "./cjs/config/useTabs.js"
     },
     "./config/useCrossRef": {
-      "import": "./dist/esm/config/useCrossRef.js",
-      "require": "./dist/cjs/config/useCrossRef.js"
+      "import": "./esm/config/useCrossRef.js",
+      "require": "./cjs/config/useCrossRef.js"
     }
   },
   "sideEffects": [
@@ -120,23 +117,29 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.8",
-    "@elliemae/ds-icon": "2.3.0-alpha.8",
-    "@elliemae/ds-icons": "2.3.0-alpha.8",
-    "@elliemae/ds-props-helpers": "2.3.0-alpha.8",
-    "@elliemae/ds-system": "2.3.0-alpha.8",
+    "@elliemae/ds-button": "2.3.0-next.2",
+    "@elliemae/ds-icon": "2.3.0-next.2",
+    "@elliemae/ds-icons": "2.3.0-next.2",
+    "@elliemae/ds-props-helpers": "2.3.0-next.2",
+    "@elliemae/ds-system": "2.3.0-next.1",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-swipeable-views": "~0.13.9"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.1",
+    "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
@@ -149,12 +152,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSTabs.d.ts

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

package/types/DSTabsCTX.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { DSTabsUseCrossRefContextT, DSTabsUseTabsContextT } from './DSTabsTypes';
+export declare const DSTabsContext: import("react").Context<DSTabsUseTabsContextT>;
+export declare const DSTabsCrossRefContext: import("react").Context<DSTabsUseCrossRefContextT>;

package/types/DSTabsDatatestid.d.ts

@@ -0,0 +1,12 @@
+export declare const DSTabsDatatestid: {
+    TABS_CONTAINER: string;
+    TAB_BUTTON: string;
+    SUBTAB_BUTTON: string;
+    TAB_PANEL: string;
+    SUB_TAB_LIST: string;
+    TAB_LIST: string;
+    CAROUSEL: {
+        BUTTON_RIGHT: string;
+        BUTTON_LEFT: string;
+    };
+};