@elliemae/ds-tabs 2.2.0 → 2.3.0-alpha.3

package/esm/utils/hooks/useTabsCallbacks.js

@@ -1,55 +1,31 @@
-import { useContext, useCallback } from 'react';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-
+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
-    }
+    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders }
   } = useContext(DSTabsContext);
-  const centerTabWhenTabChangeMobile = useCallback(e => {
-    if (tabsListRef.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
-      } = tabsListRef.current.getBoundingClientRect();
-      const extraSideSpace = listWidth - tabWidth;
-      const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-      const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-      tabsListRef.current.scrollTo({
-        top: 0,
-        left: centeredLeftOffset,
-        behavior: 'smooth'
-      });
-      e === null || e === void 0 ? void 0 : e.preventDefault();
-    }
-  }, [tabsListRef]);
   const handleOnTabChange = useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
-
     if (isDSMobile && !fixedTabsHeaders && e) {
-      centerTabWhenTabChangeMobile(e);
+      centerTab({ e, listRef: tabsListRef });
     }
-  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
-  const handleOnMouseDown = useCallback(e => {
-    const role = e.target.getAttribute('role');
-    if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
+  }, [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 };
+export {
+  useTabsCallbacks
+};
+//# sourceMappingURL=useTabsCallbacks.js.map

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -128,11 +128,11 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0",
-    "@elliemae/ds-icon": "2.2.0",
-    "@elliemae/ds-icons": "2.2.0",
-    "@elliemae/ds-props-helpers": "2.2.0",
-    "@elliemae/ds-system": "2.2.0",
+    "@elliemae/ds-button": "2.3.0-alpha.3",
+    "@elliemae/ds-icon": "2.3.0-alpha.3",
+    "@elliemae/ds-icons": "2.3.0-alpha.3",
+    "@elliemae/ds-props-helpers": "2.3.0-alpha.3",
+    "@elliemae/ds-system": "2.3.0-alpha.3",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/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/DSTabsTypes.d.ts

@@ -162,6 +162,10 @@ export interface VisibleDimensionsT {
     width: number;
     height: number;
 }
+export interface CenterTabPropsT {
+    e?: React.MouseEvent | React.FocusEvent;
+    listRef: React.MutableRefObject<HTMLDivElement | null>;
+}
 export interface StyledTabWrapperPropsT {
     isDSMobile: boolean;
     fixedTabsHeaders: boolean;

package/types/utils/helpers.d.ts

@@ -1,6 +1,7 @@
-import type { DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
 export declare const isElementVisible: (tab: HTMLElement, tabList: HTMLElement) => boolean;
 export declare const isElementVisibleCarousel: (tab: HTMLElement | null, tabContainer: HTMLDivElement | null, firstOrLastItem?: boolean) => boolean;
+export declare const centerTab: ({ e, listRef }: CenterTabPropsT) => void;
 export declare const getVisibleDimensions: (node: HTMLElement, referenceNode: HTMLElement) => VisibleDimensionsT;
 export declare const getIndexById: (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string | undefined) => number;
 export declare const getIdByIndex: (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number) => string;