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

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

@@ -1,7 +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 React from 'react';\nimport type { CenterTabPropsT, 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 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;ACEA;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,yBAAyB,CAAC,eAAgC,KAAK,IAAI,cAAc;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,eAAe,cAAe,eAAc;",
+  "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"],
+  "mappings": "AAAA;ACCA;AAYO,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,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.map

@@ -1,7 +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;",
+  "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;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.map

@@ -1,7 +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;",
+  "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;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": "3.0.0-alpha.3",
+  "version": "3.0.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -131,11 +131,11 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.0.0-alpha.3",
-    "@elliemae/ds-icon": "3.0.0-alpha.3",
-    "@elliemae/ds-icons": "3.0.0-alpha.3",
-    "@elliemae/ds-props-helpers": "3.0.0-alpha.3",
-    "@elliemae/ds-system": "3.0.0-alpha.3",
+    "@elliemae/ds-button": "3.0.0-next.3",
+    "@elliemae/ds-icon": "3.0.0-next.3",
+    "@elliemae/ds-icons": "3.0.0-next.3",
+    "@elliemae/ds-props-helpers": "3.0.0-next.3",
+    "@elliemae/ds-system": "3.0.0-next.3",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/dist/cjs/DSTabsTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSTabsTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type React from 'react';\nimport { TabTypes } from './utils/constants';\n\n// **** **** **** **** **** **** **** ****  CONSTANT TYPES **** **** **** **** **** **** **** **** **** //\n\ntype TabTypesT = typeof TabTypes[keyof typeof TabTypes];\n\n// **** **** **** **** **** **** **** ****  COMPONENT TYPES **** **** **** **** **** **** **** **** **** //\n\nexport interface DSTabsPropsT {\n  containerProps?: Record<string, unknown>;\n  innerRef?: React.MutableRefObject<HTMLDivElement>;\n  animated?: boolean;\n  enableMouseEvents?: boolean;\n  allowTextSelection?: boolean;\n  onTabChange?: (tabId: string, e?: React.MouseEvent) => void;\n  tabsListAriaLabel?: string;\n  type?: TabTypesT;\n  tabBarExtraContent?: React.ReactNode;\n  children: React.ReactElement<DSTabPropsWithDefaultT>[];\n  onlyRenderActiveTab?: boolean;\n  activeTab?: string;\n  withCarousel?: boolean;\n  firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n  lastTabRef?: React.MutableRefObject<HTMLElement>;\n  fixedTabsHeaders?: boolean;\n  isDSMobile?: boolean;\n  showSelectionIndicator?: boolean;\n  showSeparator?: boolean;\n}\n\nexport interface DSTabsPropsWithDefaultsT {\n  containerProps: Record<string, unknown>;\n  innerRef?: React.MutableRefObject<HTMLDivElement>;\n  animated: boolean;\n  enableMouseEvents: boolean;\n  allowTextSelection: boolean;\n  onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  tabsListAriaLabel: string;\n  type: TabTypesT;\n  tabBarExtraContent?: React.ReactNode;\n  children: React.ReactElement<DSTabPropsWithDefaultT>[];\n  onlyRenderActiveTab: boolean;\n  activeTab?: string;\n  withCarousel: boolean;\n  firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n  lastTabRef?: React.MutableRefObject<HTMLElement>;\n  fixedTabsHeaders: boolean;\n  isDSMobile: boolean;\n  showSelectionIndicator: boolean;\n  showSeparator: boolean;\n}\n\nexport interface DSTabsDefaultPropsT {\n  containerProps: Record<string, unknown>;\n  animated: boolean;\n  enableMouseEvents: boolean;\n  allowTextSelection: boolean;\n  onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  tabsListAriaLabel: string;\n  type: TabTypesT;\n  onlyRenderActiveTab: boolean;\n  fixedTabsHeaders: boolean;\n  children: React.ReactElement<DSTabPropsWithDefaultT>[];\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  showSelectionIndicator: boolean;\n  showSeparator: boolean;\n}\n\nexport interface CarouselPropsT {\n  children: React.ReactNode[];\n  updateIndicatorStyle?: () => void;\n}\n\nexport interface DSTabPropsT {\n  tabId: string;\n  title?: string;\n  required?: boolean;\n  children?: React.ReactNode;\n  style?: Record<string, unknown>;\n  disabled?: boolean;\n  ref?: React.MutableRefObject<HTMLButtonElement>;\n  onClick?: (tabId: string, e: React.MouseEvent) => null | void;\n  onKeyDown?: (e: React.KeyboardEvent) => null | void;\n}\n\nexport interface DSTabPropsWithDefaultT {\n  tabId: string;\n  title: string;\n  required: boolean;\n  children?: React.ReactNode;\n  style?: Record<string, unknown>;\n  disabled: boolean;\n  ref?: React.MutableRefObject<HTMLButtonElement>;\n  onClick?: (tabId: string, e: React.MouseEvent) => null | void;\n  onKeyDown?: (e: React.KeyboardEvent) => null | void;\n}\n\nexport interface CarouselButtonsPropsT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  showChevrons: ShowChevronsT;\n  type: TabTypesT;\n}\n\n// **** **** **** **** **** **** **** ****  CONTEXT AND HOOK TYPES **** **** **** **** **** **** **** **** **** //\n\nexport interface DSTabsUseCrossRefContextT {\n  lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n}\n\nexport interface DSTabsUseTabsContextT {\n  props: DSTabsPropsWithDefaultsT;\n  tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n  focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n  tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n  tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n  actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n  carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n  setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n  actualActiveTab: string;\n}\n\nexport interface UseRezisePropsT {\n  ref: React.MutableRefObject<HTMLDivElement | null>;\n  callback: () => void;\n}\n\nexport interface UseCarouselPropsT {\n  updateIndicatorStyle?: () => void;\n}\n\nexport interface ShowChevronsT {\n  right: boolean;\n  left: boolean;\n}\n\nexport interface MobileGradientsT {\n  right: boolean;\n  left: boolean;\n}\n\nexport interface IndicatorStyleT {\n  left: string;\n  width: string;\n  backgroundWithTransparent: string;\n}\nexport interface UseCarouselReturnTypeT {\n  showChevrons: ShowChevronsT;\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport interface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n  updateIndicatorStyle?: () => void;\n}\n\nexport interface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport interface UseKeyboardNavigationReturnTypeT {\n  handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\n\nexport interface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport interface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<IndicatorStyleT>>;\n  indicatorStyle: IndicatorStyleT;\n  mobileGradients: MobileGradientsT;\n}\n\n// **** **** **** **** **** **** **** ****  HELPERS TYPES **** **** **** **** **** **** **** **** **** //\n\nexport interface VisibleDimensionsT {\n  width: number;\n  height: number;\n}\n\nexport interface CenterTabPropsT {\n  e?: React.MouseEvent | React.FocusEvent;\n  listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\n// **** **** **** **** **** **** **** ****  STYLED TYPES **** **** **** **** **** **** **** **** **** //\n\nexport interface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport interface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: MobileGradientsT;\n  indicatorStyle: IndicatorStyleT;\n  tabType: TabTypesT;\n}\n\nexport interface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\nexport interface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: TabTypesT;\n}\n\nexport interface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: TabTypesT;\n}\n\nexport interface StyledPanelContainerPropsT {\n  hidden: boolean;\n  isDSMobile: boolean;\n}\n\nexport interface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: TabTypesT;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
-  "names": []
-}

package/dist/cjs/defaultProps.js

@@ -1,53 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var defaultProps_exports = {};
-__export(defaultProps_exports, {
-  tabsDefaultProps: () => tabsDefaultProps
-});
-var React = __toESM(require("react"));
-var import_constants = require("./utils/constants");
-const noop = () => {
-};
-const tabsDefaultProps = {
-  containerProps: {},
-  animated: true,
-  enableMouseEvents: false,
-  allowTextSelection: false,
-  onTabChange: noop,
-  tabsListAriaLabel: "Tab list",
-  type: import_constants.TabTypes.NORMAL,
-  onlyRenderActiveTab: false,
-  withCarousel: false,
-  isDSMobile: false,
-  showSelectionIndicator: true,
-  children: [],
-  fixedTabsHeaders: false,
-  showSeparator: true
-};
-module.exports = __toCommonJS(defaultProps_exports);
-//# sourceMappingURL=defaultProps.js.map

package/dist/cjs/defaultProps.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { TabTypes } from './utils/constants';\nimport type { DSTabsDefaultPropsT } from './DSTabsTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const tabsDefaultProps: DSTabsDefaultPropsT = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: noop,\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAyB;AAIzB,MAAM,OAAO,MAAY;AAAA;AAElB,MAAM,mBAAwC;AAAA,EACnD,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,0BAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA;",
-  "names": []
-}

package/dist/cjs/exportsRelated/DSTab.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exportsRelated/DSTab.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabPropsT } from '../DSTabsTypes';\n\nconst DSTab = (props: DSTabPropsT): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabPropsT>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,wBAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAoC,mDAAC,qBAAM,UAAP,mBAAoB;AAEvE,MAAM,YAAY;AAClB,MAAM,kBAAkB,gCAAsB;AAC9C,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
-  "names": []
-}

package/dist/esm/DSTabsTypes.js

@@ -1,2 +0,0 @@
-import * as React from "react";
-//# sourceMappingURL=DSTabsTypes.js.map

package/dist/esm/defaultProps.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { TabTypes } from "./utils/constants";
-const noop = () => {
-};
-const tabsDefaultProps = {
-  containerProps: {},
-  animated: true,
-  enableMouseEvents: false,
-  allowTextSelection: false,
-  onTabChange: noop,
-  tabsListAriaLabel: "Tab list",
-  type: TabTypes.NORMAL,
-  onlyRenderActiveTab: false,
-  withCarousel: false,
-  isDSMobile: false,
-  showSelectionIndicator: true,
-  children: [],
-  fixedTabsHeaders: false,
-  showSeparator: true
-};
-export {
-  tabsDefaultProps
-};
-//# sourceMappingURL=defaultProps.js.map

package/dist/esm/defaultProps.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { TabTypes } from './utils/constants';\nimport type { DSTabsDefaultPropsT } from './DSTabsTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const tabsDefaultProps: DSTabsDefaultPropsT = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: noop,\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n};\n"],
-  "mappings": "AAAA;ACAA;AAIA,MAAM,OAAO,MAAY;AAAA;AAElB,MAAM,mBAAwC;AAAA,EACnD,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,SAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA;",
-  "names": []
-}

package/dist/esm/exportsRelated/DSTab.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exportsRelated/DSTab.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabPropsT } from '../DSTabsTypes';\n\nconst DSTab = (props: DSTabPropsT): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabPropsT>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AACA;AAGA,MAAM,QAAQ,CAAC,UAAoC,qCAAC,OAAM,UAAP,mBAAoB;AAEvE,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAsB;AAC9C,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
-  "names": []
-}