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

package/{esm → dist/esm}/utils/helpers.js

@@ -1,13 +1,11 @@
-import { MOBILE_GRADIENT_WIDTH } from './constants.js';
-
+import * as React from "react";
+import { MOBILE_GRADIENT_WIDTH } from "./constants";
 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;
-
+const isElementVisibleCarousel = (tab, tabContainer, firstOrLastItem = true) => {
   if (tab && tabContainer) {
     const tabDimensions = tab.getBoundingClientRect();
     const tabContainerDimensions = tabContainer.getBoundingClientRect();
@@ -18,34 +16,22 @@ const isElementVisibleCarousel = function (tab, tabContainer) {
     const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);
     return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;
   }
-
   return false;
 };
-const centerTab = _ref => {
-  let {
-    e,
-    listRef
-  } = _ref;
-
+const centerTab = ({ e, listRef }) => {
   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 { offsetLeft } = e?.target;
+    const { width: tabWidth } = (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 === null || e === void 0 ? void 0 : e.preventDefault();
+    e?.preventDefault();
   }
 };
 const getVisibleDimensions = (node, referenceNode) => {
@@ -56,9 +42,18 @@ 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 };
+export {
+  centerTab,
+  getIdByIndex,
+  getIndexById,
+  getVisibleDimensions,
+  isElementVisible,
+  isElementVisibleCarousel,
+  shouldHaveLeftGradient,
+  shouldHaveRightGradient
+};
+//# sourceMappingURL=helpers.js.map

package/dist/esm/utils/helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';\nimport { MOBILE_GRADIENT_WIDTH } from './constants';\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n  const tabDimensions = tab.getBoundingClientRect();\n  const tabListDimensions = tabList.getBoundingClientRect();\n\n  return tabDimensions.left <= tabListDimensions.left\n    ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n    : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n  tab: HTMLElement | null,\n  tabContainer: HTMLDivElement | null,\n  firstOrLastItem = true,\n): boolean => {\n  if (tab && tabContainer) {\n    const tabDimensions = tab.getBoundingClientRect();\n    const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n    const offset = firstOrLastItem ? 16 : 32;\n    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n  }\n  return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n  if (listRef.current) {\n    const { offsetLeft } = e?.target as HTMLButtonElement;\n    const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n    const { width: listWidth } = listRef.current.getBoundingClientRect();\n    const extraSideSpace = listWidth - tabWidth;\n    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n    listRef.current.scrollTo({\n      top: 0,\n      left: centeredLeftOffset,\n      behavior: 'smooth',\n    });\n\n    e?.preventDefault();\n  }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n  const nodeDimensions = node.getBoundingClientRect();\n  const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n  return {\n    width: Math.min(\n      node.clientWidth,\n      referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n      node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n    ),\n    height: Math.min(\n      node.clientHeight,\n      referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n      node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n    ),\n  };\n};\n\nexport const getIndexById = (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string): number =>\n  children && children.findIndex((item: React.ReactElement<DSTabPropsWithDefaultT>) => item.props.tabId === activeId);\n\nexport const getIdByIndex = (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number): string =>\n  (children && children[index].props.tabId) || '';\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n  Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n"],
+  "mappings": "AAAA;ACCA;AAEO,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI;AAC1B,QAAM,oBAAoB,QAAQ;AAElC,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AAAA;AAG9D,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI;AAC1B,UAAM,yBAAyB,aAAa;AAE5C,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO;AAC1D,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ;AAE5D,UAAM,6BAA6B,KAAK,MAAM,uBAAuB;AACrE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB;AAEtE,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA;AAElF,SAAO;AAAA;AAGF,MAAM,YAAY,CAAC,EAAE,GAAG,cAA+B;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,eAAe,GAAG;AAC1B,UAAM,EAAE,OAAO,aAAc,IAAG,QAA6B;AAC7D,UAAM,EAAE,OAAO,cAAc,QAAQ,QAAQ;AAC7C,UAAM,iBAAiB,YAAY;AACnC,UAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,UAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,YAAQ,QAAQ,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAGZ,OAAG;AAAA;AAAA;AAIA,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK;AAC5B,QAAM,0BAA0B,cAAc;AAE9C,SAAO;AAAA,IACL,OAAO,KAAK,IACV,KAAK,aACL,wBAAwB,OAAO,cAAc,cAAc,eAAe,MAC1E,KAAK,cAAe,yBAAwB,OAAO,eAAe;AAAA,IAEpE,QAAQ,KAAK,IACX,KAAK,cACL,wBAAwB,MAAM,cAAc,eAAe,eAAe,KAC1E,KAAK,eAAgB,yBAAwB,MAAM,eAAe;AAAA;AAAA;AAKjE,MAAM,eAAe,CAAC,UAAwD,aACnF,YAAY,SAAS,UAAU,CAAC,SAAqD,KAAK,MAAM,UAAU;AAErG,MAAM,eAAe,CAAC,UAAwD,UAClF,YAAY,SAAS,OAAO,MAAM,SAAU;AAExC,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,cAAc;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,eAAe,cAAe,eAAc;",
+  "names": []
+}

package/dist/esm/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useCallback, useContext } from "react";
+import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
+const useKeyboardNavigation = () => {
+  const { focusableTabsRef } = useContext(DSTabsContext);
+  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.key === "ArrowRight" && focusableTabsRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
+      if (nextTab)
+        nextTab.focus();
+      if (!nextTab)
+        return;
+    }
+    if (e.key === "ArrowLeft" && focusableTabsRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
+      if (prevTab)
+        prevTab.focus();
+      if (!prevTab)
+        return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
+      if (canFocusCrossTabs)
+        firstSubtabInternalRef.current?.focus();
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
+      if (canFocusCrossTabs)
+        lastTabInternalRef.current?.focus();
+    }
+  }, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
+  return {
+    handleOnKeyDown
+  };
+};
+export {
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/esm/utils/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useKeyboardNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport type { UseKeyboardNavigationReturnTypeT } from '../../DSTabsTypes';\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n  const { focusableTabsRef } = useContext(DSTabsContext);\n  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const nextTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n        if (nextTab) nextTab.focus();\n        if (!nextTab) return;\n      }\n\n      if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const prevTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n        if (prevTab) prevTab.focus();\n        if (!prevTab) return;\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n      }\n    },\n    [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n  );\n\n  return {\n    handleOnKeyDown,\n  };\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AAGO,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,qBAAqB,WAAW;AACxC,QAAM,EAAE,wBAAwB,uBAAuB,WAAW;AAElE,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,+BAAuB,SAAS;AAAA;AAGzD,QAAI,EAAE,QAAQ,WAAW;AACvB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,2BAAmB,SAAS;AAAA;AAAA,KAGvD,CAAC,wBAAwB,oBAAoB;AAG/C,SAAO;AAAA,IACL;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/utils/hooks/useTabsCallbacks.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { useCallback, useContext } from "react";
+import { centerTab } from "../helpers";
+import { DSTabsContext } from "../../DSTabsCTX";
+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
+};
+//# sourceMappingURL=useTabsCallbacks.js.map

package/dist/esm/utils/hooks/useTabsCallbacks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useTabsCallbacks.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport type { UseTabsCallbacksReturnTypeT } from '../../DSTabsTypes';\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n  const {\n    setInternalActiveTab,\n    tabsListRef,\n    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const handleOnMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const role = (e.target as HTMLElement).getAttribute('role');\n      if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n    },\n    [allowTextSelection],\n  );\n\n  return {\n    handleOnTabChange,\n    handleOnMouseDown,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB;AAAA,MACpD,WAAW;AAEf,QAAM,oBAAoB,YACxB,CAAC,OAAe,MAAyB;AACvC,yBAAqB;AACrB,gBAAY,OAAO;AACnB,QAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,gBAAU,EAAE,GAAG,SAAS;AAAA;AAAA,KAG5B,CAAC,kBAAkB,YAAY,aAAa,sBAAsB;AAGpE,QAAM,oBAAoB,YACxB,CAAC,MAAwB;AACvB,UAAM,OAAQ,EAAE,OAAuB,aAAa;AACpD,QAAI,SAAS,cAAc;AAAoB,QAAE;AAAA,KAEnD,CAAC;AAGH,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/{types → dist/types}/DSTabs.d.ts

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

package/{types → dist/types}/parts/carousel/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { StyledCarouselButtonWrapperPropsT } from '../../DSTabsTypes';
 export declare const StyledCarouselBtn: import("styled-components").StyledComponent<{
-    (props: import("@elliemae/ds-button/types/v2/propTypes").DSButtonPropsT): JSX.Element;
+    (props: import("@elliemae/ds-button/dist/types/v2/propTypes").DSButtonPropsT): JSX.Element;
     propTypes: import("react").WeakValidationMap<unknown>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/package.json

@@ -1,111 +1,114 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.3.0-next.3",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./utils/hooks/useTabsCallbacks": {
-      "import": "./esm/utils/hooks/useTabsCallbacks.js",
-      "require": "./cjs/utils/hooks/useTabsCallbacks.js"
+      "import": "./dist/esm/utils/hooks/useTabsCallbacks.js",
+      "require": "./dist/cjs/utils/hooks/useTabsCallbacks.js"
     },
     "./utils/hooks/useKeyboardNavigation": {
-      "import": "./esm/utils/hooks/useKeyboardNavigation.js",
-      "require": "./cjs/utils/hooks/useKeyboardNavigation.js"
+      "import": "./dist/esm/utils/hooks/useKeyboardNavigation.js",
+      "require": "./dist/cjs/utils/hooks/useKeyboardNavigation.js"
     },
     "./utils/helpers": {
-      "import": "./esm/utils/helpers.js",
-      "require": "./cjs/utils/helpers.js"
+      "import": "./dist/esm/utils/helpers.js",
+      "require": "./dist/cjs/utils/helpers.js"
     },
     "./utils/constants": {
-      "import": "./esm/utils/constants.js",
-      "require": "./cjs/utils/constants.js"
+      "import": "./dist/esm/utils/constants.js",
+      "require": "./dist/cjs/utils/constants.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./parts/tabsPanel/TabsPanels": {
-      "import": "./esm/parts/tabsPanel/TabsPanels.js",
-      "require": "./cjs/parts/tabsPanel/TabsPanels.js"
+      "import": "./dist/esm/parts/tabsPanel/TabsPanels.js",
+      "require": "./dist/cjs/parts/tabsPanel/TabsPanels.js"
     },
     "./parts/tabsPanel/styles": {
-      "import": "./esm/parts/tabsPanel/styles.js",
-      "require": "./cjs/parts/tabsPanel/styles.js"
+      "import": "./dist/esm/parts/tabsPanel/styles.js",
+      "require": "./dist/cjs/parts/tabsPanel/styles.js"
     },
     "./parts/tabsContent/TabsContent": {
-      "import": "./esm/parts/tabsContent/TabsContent.js",
-      "require": "./cjs/parts/tabsContent/TabsContent.js"
+      "import": "./dist/esm/parts/tabsContent/TabsContent.js",
+      "require": "./dist/cjs/parts/tabsContent/TabsContent.js"
     },
     "./parts/tabsContent/styles": {
-      "import": "./esm/parts/tabsContent/styles.js",
-      "require": "./cjs/parts/tabsContent/styles.js"
+      "import": "./dist/esm/parts/tabsContent/styles.js",
+      "require": "./dist/cjs/parts/tabsContent/styles.js"
     },
     "./parts/tabBar/useTabBar": {
-      "import": "./esm/parts/tabBar/useTabBar.js",
-      "require": "./cjs/parts/tabBar/useTabBar.js"
+      "import": "./dist/esm/parts/tabBar/useTabBar.js",
+      "require": "./dist/cjs/parts/tabBar/useTabBar.js"
     },
     "./parts/tabBar/TabBar": {
-      "import": "./esm/parts/tabBar/TabBar.js",
-      "require": "./cjs/parts/tabBar/TabBar.js"
+      "import": "./dist/esm/parts/tabBar/TabBar.js",
+      "require": "./dist/cjs/parts/tabBar/TabBar.js"
     },
     "./parts/tabBar/styles": {
-      "import": "./esm/parts/tabBar/styles.js",
-      "require": "./cjs/parts/tabBar/styles.js"
+      "import": "./dist/esm/parts/tabBar/styles.js",
+      "require": "./dist/cjs/parts/tabBar/styles.js"
     },
     "./parts/carousel/useCarouselCallbacks": {
-      "import": "./esm/parts/carousel/useCarouselCallbacks.js",
-      "require": "./cjs/parts/carousel/useCarouselCallbacks.js"
+      "import": "./dist/esm/parts/carousel/useCarouselCallbacks.js",
+      "require": "./dist/cjs/parts/carousel/useCarouselCallbacks.js"
     },
     "./parts/carousel/useCarousel": {
-      "import": "./esm/parts/carousel/useCarousel.js",
-      "require": "./cjs/parts/carousel/useCarousel.js"
+      "import": "./dist/esm/parts/carousel/useCarousel.js",
+      "require": "./dist/cjs/parts/carousel/useCarousel.js"
     },
     "./parts/carousel/styles": {
-      "import": "./esm/parts/carousel/styles.js",
-      "require": "./cjs/parts/carousel/styles.js"
+      "import": "./dist/esm/parts/carousel/styles.js",
+      "require": "./dist/cjs/parts/carousel/styles.js"
     },
     "./parts/carousel/Carousel": {
-      "import": "./esm/parts/carousel/Carousel.js",
-      "require": "./cjs/parts/carousel/Carousel.js"
+      "import": "./dist/esm/parts/carousel/Carousel.js",
+      "require": "./dist/cjs/parts/carousel/Carousel.js"
     },
     "./exportsRelated/DSTab": {
-      "import": "./esm/exportsRelated/DSTab.js",
-      "require": "./cjs/exportsRelated/DSTab.js"
+      "import": "./dist/esm/exportsRelated/DSTab.js",
+      "require": "./dist/cjs/exportsRelated/DSTab.js"
     },
     "./DSTabsTypes": {
-      "import": "./esm/DSTabsTypes.js",
-      "require": "./cjs/DSTabsTypes.js"
+      "import": "./dist/esm/DSTabsTypes.js",
+      "require": "./dist/cjs/DSTabsTypes.js"
     },
     "./DSTabsDatatestid": {
-      "import": "./esm/DSTabsDatatestid.js",
-      "require": "./cjs/DSTabsDatatestid.js"
+      "import": "./dist/esm/DSTabsDatatestid.js",
+      "require": "./dist/cjs/DSTabsDatatestid.js"
     },
     "./DSTabsCTX": {
-      "import": "./esm/DSTabsCTX.js",
-      "require": "./cjs/DSTabsCTX.js"
+      "import": "./dist/esm/DSTabsCTX.js",
+      "require": "./dist/cjs/DSTabsCTX.js"
     },
     "./DSTabs": {
-      "import": "./esm/DSTabs.js",
-      "require": "./cjs/DSTabs.js"
+      "import": "./dist/esm/DSTabs.js",
+      "require": "./dist/cjs/DSTabs.js"
     },
     "./defaultProps": {
-      "import": "./esm/defaultProps.js",
-      "require": "./cjs/defaultProps.js"
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
     },
     "./config/useTabs": {
-      "import": "./esm/config/useTabs.js",
-      "require": "./cjs/config/useTabs.js"
+      "import": "./dist/esm/config/useTabs.js",
+      "require": "./dist/cjs/config/useTabs.js"
     },
     "./config/useCrossRef": {
-      "import": "./esm/config/useCrossRef.js",
-      "require": "./cjs/config/useCrossRef.js"
+      "import": "./dist/esm/config/useCrossRef.js",
+      "require": "./dist/cjs/config/useCrossRef.js"
     }
   },
   "sideEffects": [
@@ -117,29 +120,29 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "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"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-next.3",
-    "@elliemae/ds-icon": "2.3.0-next.3",
-    "@elliemae/ds-icons": "2.3.0-next.3",
-    "@elliemae/ds-props-helpers": "2.3.0-next.3",
-    "@elliemae/ds-system": "2.3.0-next.1",
+    "@elliemae/ds-button": "3.0.0-alpha.0",
+    "@elliemae/ds-icon": "3.0.0-alpha.0",
+    "@elliemae/ds-icons": "3.0.0-alpha.0",
+    "@elliemae/ds-props-helpers": "3.0.0-alpha.0",
+    "@elliemae/ds-system": "3.0.0-alpha.0",
     "@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.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
@@ -152,7 +155,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/DSTabs.js

@@ -1,45 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var reactDesc = require('react-desc');
-var propTypes = require('./propTypes.js');
-var DSTabsCTX = require('./DSTabsCTX.js');
-var TabsContent = require('./parts/tabsContent/TabsContent.js');
-var useTabs = require('./config/useTabs.js');
-var useCrossRef = require('./config/useCrossRef.js');
-var constants = require('./utils/constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-var _TabsContent, _TabsContent2;
-
-const DSTabs = props => {
-  const ctx = useTabs.useTabs(props);
-  const crossRefsCtx = useCrossRef.useCrossRef();
-  const {
-    type
-  } = props;
-
-  if (type === constants.TabTypes.SUBTABS) {
-    return /*#__PURE__*/_jsx__default["default"](DSTabsCTX.DSTabsContext.Provider, {
-      value: ctx
-    }, void 0, _TabsContent || (_TabsContent = /*#__PURE__*/_jsx__default["default"](TabsContent.TabsContent, {})));
-  }
-
-  return /*#__PURE__*/_jsx__default["default"](DSTabsCTX.DSTabsCrossRefContext.Provider, {
-    value: crossRefsCtx
-  }, void 0, /*#__PURE__*/_jsx__default["default"](DSTabsCTX.DSTabsContext.Provider, {
-    value: ctx
-  }, void 0, _TabsContent2 || (_TabsContent2 = /*#__PURE__*/_jsx__default["default"](TabsContent.TabsContent, {}))));
-};
-
-const DSTabsWithSchema = reactDesc.describe(DSTabs);
-DSTabsWithSchema.propTypes = propTypes.tabsPropTypes;
-
-exports.DSTabs = DSTabs;
-exports.DSTabsWithSchema = DSTabsWithSchema;
-exports["default"] = DSTabs;

package/cjs/DSTabsCTX.js

@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var defaultProps = require('./defaultProps.js');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
-const defaultContext = {
-  props: defaultProps.tabsDefaultProps,
-  tabsRef: /*#__PURE__*/React.createRef(),
-  tabsListRef: /*#__PURE__*/React.createRef(),
-  carouselOnlyListRef: /*#__PURE__*/React.createRef(),
-  focusableTabsRef: /*#__PURE__*/React.createRef(),
-  tabsRefAsArray: /*#__PURE__*/React.createRef(),
-  actualActiveTabRef: /*#__PURE__*/React.createRef(),
-  setInternalActiveTab: noop,
-  actualActiveTab: ''
-};
-const defaultCrossRefsContext = {
-  lastTabInternalRef: /*#__PURE__*/React.createRef(),
-  firstSubtabInternalRef: /*#__PURE__*/React.createRef()
-};
-const DSTabsContext = /*#__PURE__*/React.createContext(defaultContext);
-const DSTabsCrossRefContext = /*#__PURE__*/React.createContext(defaultCrossRefsContext);
-
-exports.DSTabsContext = DSTabsContext;
-exports.DSTabsCrossRefContext = DSTabsCrossRefContext;

package/cjs/DSTabsDatatestid.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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'
-  }
-};
-
-exports.DSTabsDatatestid = DSTabsDatatestid;

package/cjs/DSTabsTypes.js

@@ -1,2 +0,0 @@
-'use strict';
-