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

package/esm/utils/hooks/useTabsCallbacks.js

@@ -1,37 +1,46 @@
-import { useContext, useCallback } from 'react';
-import { centerTab } from '../helpers.js';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-
+import * as React from "react";
+import { useCallback, useContext } from "react";
+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?.target;
+      const { width: tabWidth } = (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?.preventDefault();
+    }
+  }, [tabsListRef]);
   const handleOnTabChange = useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
-
     if (isDSMobile && !fixedTabsHeaders && e) {
-      centerTab({
-        e,
-        listRef: tabsListRef
-      });
+      centerTabWhenTabChangeMobile(e);
     }
-  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
-  const handleOnMouseDown = useCallback(e => {
-    const role = e.target.getAttribute('role');
-    if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
+  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  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 { 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 centerTabWhenTabChangeMobile = useCallback(\n    (e?: React.MouseEvent) => {\n      if (tabsListRef.current) {\n        const { offsetLeft } = e?.target as HTMLButtonElement;\n        const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n        const { width: listWidth } = tabsListRef.current.getBoundingClientRect();\n        const extraSideSpace = listWidth - tabWidth;\n        const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n        const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n        tabsListRef.current.scrollTo({\n          top: 0,\n          left: centeredLeftOffset,\n          behavior: 'smooth',\n        });\n\n        e?.preventDefault();\n      }\n    },\n    [tabsListRef],\n  );\n\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTabWhenTabChangeMobile(e);\n      }\n    },\n    [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab],\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;AAGO,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB;AAAA,MACpD,WAAW;AAEf,QAAM,+BAA+B,YACnC,CAAC,MAAyB;AACxB,QAAI,YAAY,SAAS;AACvB,YAAM,EAAE,eAAe,GAAG;AAC1B,YAAM,EAAE,OAAO,aAAc,IAAG,QAA6B;AAC7D,YAAM,EAAE,OAAO,cAAc,YAAY,QAAQ;AACjD,YAAM,iBAAiB,YAAY;AACnC,YAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,YAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,kBAAY,QAAQ,SAAS;AAAA,QAC3B,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA;AAGZ,SAAG;AAAA;AAAA,KAGP,CAAC;AAGH,QAAM,oBAAoB,YACxB,CAAC,OAAe,MAAyB;AACvC,yBAAqB;AACrB,gBAAY,OAAO;AACnB,QAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,mCAA6B;AAAA;AAAA,KAGjC,CAAC,8BAA8B,kBAAkB,YAAY,aAAa;AAG5E,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-next.4",
+  "version": "2.3.0-alpha.2",
   "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-next.4",
-    "@elliemae/ds-icon": "2.2.0-next.4",
-    "@elliemae/ds-icons": "2.2.0-next.4",
-    "@elliemae/ds-props-helpers": "2.2.0-next.4",
-    "@elliemae/ds-system": "2.2.0-next.4",
+    "@elliemae/ds-button": "2.3.0-alpha.2",
+    "@elliemae/ds-icon": "2.3.0-alpha.2",
+    "@elliemae/ds-icons": "2.3.0-alpha.2",
+    "@elliemae/ds-props-helpers": "2.3.0-alpha.2",
+    "@elliemae/ds-system": "2.3.0-alpha.2",
     "@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,10 +162,6 @@ 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,7 +1,6 @@
-import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+import type { 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;