@elliemae/ds-tabs 3.4.2 → 3.4.3

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

@@ -4,40 +4,43 @@ 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]);
+  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
   };

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

@@ -2,6 +2,6 @@
   "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';\n\ninterface UseKeyboardNavigationReturnTypeT {\n  handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\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;AAMO,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,qBAAqB,WAAW,aAAa;AACrD,QAAM,EAAE,wBAAwB,uBAAuB,WAAW,qBAAqB;AAEvF,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI;AACjG,UAAI;AAAS,gBAAQ,MAAM;AAC3B,UAAI,CAAC;AAAS;AAAA,IAChB;AAEA,QAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI;AACjG,UAAI;AAAS,gBAAQ,MAAM;AAC3B,UAAI,CAAC;AAAS;AAAA,IAChB;AAEA,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,+BAAuB,SAAS,MAAM;AAAA,IAC/D;AAEA,QAAI,EAAE,QAAQ,WAAW;AACvB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,2BAAmB,SAAS,MAAM;AAAA,IAC3D;AAAA,EACF,GACA,CAAC,wBAAwB,oBAAoB,gBAAgB,CAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,eAAe,6BAA6B;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,iBAAiB,IAAI,WAAW,aAAa;AACrD,QAAM,EAAE,wBAAwB,mBAAmB,IAAI,WAAW,qBAAqB;AAEvF,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI;AACjG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI;AACjG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,iCAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,6BAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,gBAAgB;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -8,18 +8,24 @@ const useTabsCallbacks = () => {
     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]);
+  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

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

@@ -2,6 +2,6 @@
   "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';\n\ninterface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\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;AAOO,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB;AAAA,MACpD,WAAW,aAAa;AAE5B,QAAM,oBAAoB,YACxB,CAAC,OAAe,MAAyB;AACvC,yBAAqB,KAAK;AAC1B,gBAAY,OAAO,CAAC;AACpB,QAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,gBAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,IACvC;AAAA,EACF,GACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW,CAC/E;AAEA,QAAM,oBAAoB,YACxB,CAAC,MAAwB;AACvB,UAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,QAAI,SAAS,cAAc;AAAoB,QAAE,gBAAgB;AAAA,EACnE,GACA,CAAC,kBAAkB,CACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,IAAI,WAAW,aAAa;AAE5B,QAAM,oBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,kBAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc;AAAoB,UAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -131,11 +131,11 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.4.2",
-    "@elliemae/ds-icon": "3.4.2",
-    "@elliemae/ds-icons": "3.4.2",
-    "@elliemae/ds-system": "3.4.2",
-    "@elliemae/ds-utilities": "3.4.2",
+    "@elliemae/ds-button": "3.4.3",
+    "@elliemae/ds-icon": "3.4.3",
+    "@elliemae/ds-icons": "3.4.3",
+    "@elliemae/ds-system": "3.4.3",
+    "@elliemae/ds-utilities": "3.4.3",
     "@react-hook/resize-observer": "~1.2.5",
     "react-swipeable-views": "~0.14.0"
   },