@elliemae/ds-tabs 3.5.0-rc.3 → 3.5.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/dist/cjs/DSTabs.js +4 -1
  2. package/dist/cjs/DSTabs.js.map +2 -2
  3. package/dist/cjs/DSTabsCTX.js +4 -1
  4. package/dist/cjs/DSTabsCTX.js.map +2 -2
  5. package/dist/cjs/DSTabsDatatestid.js +4 -1
  6. package/dist/cjs/DSTabsDatatestid.js.map +1 -1
  7. package/dist/cjs/config/useCrossRef.js +11 -5
  8. package/dist/cjs/config/useCrossRef.js.map +1 -1
  9. package/dist/cjs/config/useTabs.js +18 -12
  10. package/dist/cjs/config/useTabs.js.map +1 -1
  11. package/dist/cjs/exported-related/DSTab.js +4 -1
  12. package/dist/cjs/exported-related/DSTab.js.map +2 -2
  13. package/dist/cjs/index.js +4 -1
  14. package/dist/cjs/index.js.map +1 -1
  15. package/dist/cjs/parts/carousel/Carousel.js +4 -1
  16. package/dist/cjs/parts/carousel/Carousel.js.map +1 -1
  17. package/dist/cjs/parts/carousel/styles.js +4 -1
  18. package/dist/cjs/parts/carousel/styles.js.map +1 -1
  19. package/dist/cjs/parts/carousel/useCarousel.js +12 -3
  20. package/dist/cjs/parts/carousel/useCarousel.js.map +2 -2
  21. package/dist/cjs/parts/carousel/useCarouselCallbacks.js +29 -23
  22. package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map +1 -1
  23. package/dist/cjs/parts/tabBar/TabBar.js +4 -1
  24. package/dist/cjs/parts/tabBar/TabBar.js.map +2 -2
  25. package/dist/cjs/parts/tabBar/styles.js +7 -2
  26. package/dist/cjs/parts/tabBar/styles.js.map +1 -1
  27. package/dist/cjs/parts/tabBar/useTabBar.js +8 -2
  28. package/dist/cjs/parts/tabBar/useTabBar.js.map +2 -2
  29. package/dist/cjs/parts/tabsContent/TabsContent.js +4 -1
  30. package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
  31. package/dist/cjs/parts/tabsContent/styles.js +4 -1
  32. package/dist/cjs/parts/tabsContent/styles.js.map +1 -1
  33. package/dist/cjs/parts/tabsPanel/TabsPanels.js +42 -33
  34. package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +2 -2
  35. package/dist/cjs/parts/tabsPanel/styles.js +4 -1
  36. package/dist/cjs/parts/tabsPanel/styles.js.map +1 -1
  37. package/dist/cjs/propTypes.js +4 -1
  38. package/dist/cjs/propTypes.js.map +1 -1
  39. package/dist/cjs/sharedTypes.js +4 -1
  40. package/dist/cjs/sharedTypes.js.map +1 -1
  41. package/dist/cjs/utils/constants.js +4 -1
  42. package/dist/cjs/utils/constants.js.map +1 -1
  43. package/dist/cjs/utils/helpers.js +14 -3
  44. package/dist/cjs/utils/helpers.js.map +1 -1
  45. package/dist/cjs/utils/hooks/useKeyboardNavigation.js +41 -35
  46. package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map +1 -1
  47. package/dist/cjs/utils/hooks/useTabsCallbacks.js +22 -13
  48. package/dist/cjs/utils/hooks/useTabsCallbacks.js.map +1 -1
  49. package/dist/esm/DSTabs.js.map +2 -2
  50. package/dist/esm/DSTabsCTX.js.map +1 -1
  51. package/dist/esm/DSTabsDatatestid.js.map +1 -1
  52. package/dist/esm/config/useCrossRef.js +7 -4
  53. package/dist/esm/config/useCrossRef.js.map +1 -1
  54. package/dist/esm/config/useTabs.js +14 -11
  55. package/dist/esm/config/useTabs.js.map +1 -1
  56. package/dist/esm/exported-related/DSTab.js.map +2 -2
  57. package/dist/esm/index.js.map +1 -1
  58. package/dist/esm/parts/carousel/Carousel.js.map +1 -1
  59. package/dist/esm/parts/carousel/styles.js.map +1 -1
  60. package/dist/esm/parts/carousel/useCarousel.js +8 -2
  61. package/dist/esm/parts/carousel/useCarousel.js.map +1 -1
  62. package/dist/esm/parts/carousel/useCarouselCallbacks.js +25 -22
  63. package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +1 -1
  64. package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
  65. package/dist/esm/parts/tabBar/styles.js +3 -1
  66. package/dist/esm/parts/tabBar/styles.js.map +1 -1
  67. package/dist/esm/parts/tabBar/useTabBar.js +4 -1
  68. package/dist/esm/parts/tabBar/useTabBar.js.map +1 -1
  69. package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
  70. package/dist/esm/parts/tabsContent/styles.js.map +1 -1
  71. package/dist/esm/parts/tabsPanel/TabsPanels.js +38 -32
  72. package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
  73. package/dist/esm/parts/tabsPanel/styles.js.map +1 -1
  74. package/dist/esm/propTypes.js.map +1 -1
  75. package/dist/esm/sharedTypes.js.map +1 -1
  76. package/dist/esm/utils/constants.js.map +1 -1
  77. package/dist/esm/utils/helpers.js +10 -2
  78. package/dist/esm/utils/helpers.js.map +1 -1
  79. package/dist/esm/utils/hooks/useKeyboardNavigation.js +37 -34
  80. package/dist/esm/utils/hooks/useKeyboardNavigation.js.map +1 -1
  81. package/dist/esm/utils/hooks/useTabsCallbacks.js +18 -12
  82. package/dist/esm/utils/hooks/useTabsCallbacks.js.map +1 -1
  83. package/package.json +6 -6
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from './constants';\n\ninterface VisibleDimensionsT {\n width: number;\n height: number;\n}\n\ninterface CenterTabPropsT {\n e?: React.MouseEvent | React.FocusEvent;\n listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\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 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"],
5
- "mappings": "AAAA;ACCA;AAYO,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI,sBAAsB;AAChD,QAAM,oBAAoB,QAAQ,sBAAsB;AAExD,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AACrE;AAEO,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI,sBAAsB;AAChD,UAAM,yBAAyB,aAAa,sBAAsB;AAElE,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO,MAAM;AAChE,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ,MAAM;AAElE,UAAM,6BAA6B,KAAK,MAAM,uBAAuB,IAAI;AACzE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB,KAAK;AAE3E,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA,EAClF;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,EAAE,GAAG,cAA+B;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,eAAe,GAAG;AAC1B,UAAM,EAAE,OAAO,aAAc,IAAG,QAA6B,sBAAsB;AACnF,UAAM,EAAE,OAAO,cAAc,QAAQ,QAAQ,sBAAsB;AACnE,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,IACZ,CAAC;AAED,OAAG,eAAe;AAAA,EACpB;AACF;AAEO,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK,sBAAsB;AAClD,QAAM,0BAA0B,cAAc,sBAAsB;AAEpE,SAAO;AAAA,IACL,OAAO,KAAK,IACV,KAAK,aACL,wBAAwB,OAAO,cAAc,cAAc,eAAe,MAC1E,KAAK,cAAe,yBAAwB,OAAO,eAAe,KACpE;AAAA,IACA,QAAQ,KAAK,IACX,KAAK,cACL,wBAAwB,MAAM,cAAc,eAAe,eAAe,KAC1E,KAAK,eAAgB,yBAAwB,MAAM,eAAe,IACpE;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,UAAU,IAAI;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,UAAU,KAAK,cAAe,eAAc;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,6BAA6B;AAY/B,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI,sBAAsB;AAChD,QAAM,oBAAoB,QAAQ,sBAAsB;AAExD,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AACrE;AAEO,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI,sBAAsB;AAChD,UAAM,yBAAyB,aAAa,sBAAsB;AAElE,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO,MAAM;AAChE,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ,MAAM;AAElE,UAAM,6BAA6B,KAAK,MAAM,uBAAuB,IAAI;AACzE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB,KAAK;AAE3E,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA,EAClF;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,EAAE,GAAG,QAAQ,MAAuB;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,WAAW,IAAI,GAAG;AAC1B,UAAM,EAAE,OAAO,SAAS,KAAK,GAAG,QAA6B,sBAAsB;AACnF,UAAM,EAAE,OAAO,UAAU,IAAI,QAAQ,QAAQ,sBAAsB;AACnE,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,IACZ,CAAC;AAED,OAAG,eAAe;AAAA,EACpB;AACF;AAEO,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK,sBAAsB;AAClD,QAAM,0BAA0B,cAAc,sBAAsB;AAEpE,SAAO;AAAA,IACL,OAAO,KAAK;AAAA,MACV,KAAK;AAAA,MACL,wBAAwB,OAAO,cAAc,cAAc,eAAe;AAAA,MAC1E,KAAK,eAAe,wBAAwB,OAAO,eAAe;AAAA,IACpE;AAAA,IACA,QAAQ,KAAK;AAAA,MACX,KAAK;AAAA,MACL,wBAAwB,MAAM,cAAc,eAAe,eAAe;AAAA,MAC1E,KAAK,gBAAgB,wBAAwB,MAAM,eAAe;AAAA,IACpE;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,UAAU,IAAI;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,UAAU,KAAK,eAAe,cAAc;",
6
6
  "names": []
7
7
  }
@@ -4,40 +4,43 @@ import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
4
4
  const useKeyboardNavigation = () => {
5
5
  const { focusableTabsRef } = useContext(DSTabsContext);
6
6
  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);
7
- const handleOnKeyDown = useCallback((e) => {
8
- if (e.key === "ArrowRight" && focusableTabsRef.current) {
9
- e.preventDefault();
10
- e.stopPropagation();
11
- const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
12
- if (nextTab)
13
- nextTab.focus();
14
- if (!nextTab)
15
- return;
16
- }
17
- if (e.key === "ArrowLeft" && focusableTabsRef.current) {
18
- e.preventDefault();
19
- e.stopPropagation();
20
- const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
21
- if (prevTab)
22
- prevTab.focus();
23
- if (!prevTab)
24
- return;
25
- }
26
- if (e.key === "ArrowDown") {
27
- e.preventDefault();
28
- e.stopPropagation();
29
- const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
30
- if (canFocusCrossTabs)
31
- firstSubtabInternalRef.current?.focus();
32
- }
33
- if (e.key === "ArrowUp") {
34
- e.preventDefault();
35
- e.stopPropagation();
36
- const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
37
- if (canFocusCrossTabs)
38
- lastTabInternalRef.current?.focus();
39
- }
40
- }, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
7
+ const handleOnKeyDown = useCallback(
8
+ (e) => {
9
+ if (e.key === "ArrowRight" && focusableTabsRef.current) {
10
+ e.preventDefault();
11
+ e.stopPropagation();
12
+ const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
13
+ if (nextTab)
14
+ nextTab.focus();
15
+ if (!nextTab)
16
+ return;
17
+ }
18
+ if (e.key === "ArrowLeft" && focusableTabsRef.current) {
19
+ e.preventDefault();
20
+ e.stopPropagation();
21
+ const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
22
+ if (prevTab)
23
+ prevTab.focus();
24
+ if (!prevTab)
25
+ return;
26
+ }
27
+ if (e.key === "ArrowDown") {
28
+ e.preventDefault();
29
+ e.stopPropagation();
30
+ const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
31
+ if (canFocusCrossTabs)
32
+ firstSubtabInternalRef.current?.focus();
33
+ }
34
+ if (e.key === "ArrowUp") {
35
+ e.preventDefault();
36
+ e.stopPropagation();
37
+ const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
38
+ if (canFocusCrossTabs)
39
+ lastTabInternalRef.current?.focus();
40
+ }
41
+ },
42
+ [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]
43
+ );
41
44
  return {
42
45
  handleOnKeyDown
43
46
  };
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useKeyboardNavigation.tsx"],
4
4
  "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"],
5
- "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;",
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -8,18 +8,24 @@ const useTabsCallbacks = () => {
8
8
  tabsListRef,
9
9
  props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders }
10
10
  } = useContext(DSTabsContext);
11
- const handleOnTabChange = useCallback((tabId, e) => {
12
- setInternalActiveTab(tabId);
13
- onTabChange(tabId, e);
14
- if (isDSMobile && !fixedTabsHeaders && e) {
15
- centerTab({ e, listRef: tabsListRef });
16
- }
17
- }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
18
- const handleOnMouseDown = useCallback((e) => {
19
- const role = e.target.getAttribute("role");
20
- if (role !== "tabpanel" && allowTextSelection)
21
- e.stopPropagation();
22
- }, [allowTextSelection]);
11
+ const handleOnTabChange = useCallback(
12
+ (tabId, e) => {
13
+ setInternalActiveTab(tabId);
14
+ onTabChange(tabId, e);
15
+ if (isDSMobile && !fixedTabsHeaders && e) {
16
+ centerTab({ e, listRef: tabsListRef });
17
+ }
18
+ },
19
+ [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]
20
+ );
21
+ const handleOnMouseDown = useCallback(
22
+ (e) => {
23
+ const role = e.target.getAttribute("role");
24
+ if (role !== "tabpanel" && allowTextSelection)
25
+ e.stopPropagation();
26
+ },
27
+ [allowTextSelection]
28
+ );
23
29
  return {
24
30
  handleOnTabChange,
25
31
  handleOnMouseDown
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useTabsCallbacks.tsx"],
4
4
  "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"],
5
- "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;",
5
+ "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;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.5.0-rc.3",
3
+ "version": "3.5.0-rc.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -131,11 +131,11 @@
131
131
  "indent": 4
132
132
  },
133
133
  "dependencies": {
134
- "@elliemae/ds-button": "3.5.0-rc.3",
135
- "@elliemae/ds-icon": "3.5.0-rc.3",
136
- "@elliemae/ds-icons": "3.5.0-rc.3",
137
- "@elliemae/ds-system": "3.5.0-rc.3",
138
- "@elliemae/ds-utilities": "3.5.0-rc.3",
134
+ "@elliemae/ds-button": "3.5.0-rc.6",
135
+ "@elliemae/ds-icon": "3.5.0-rc.6",
136
+ "@elliemae/ds-icons": "3.5.0-rc.6",
137
+ "@elliemae/ds-system": "3.5.0-rc.6",
138
+ "@elliemae/ds-utilities": "3.5.0-rc.6",
139
139
  "@react-hook/resize-observer": "~1.2.5",
140
140
  "react-swipeable-views": "~0.14.0"
141
141
  },