@elliemae/ds-tabs 3.4.2 → 3.4.3

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 (88) hide show
  1. package/dist/cjs/DSTabs.js +16 -10
  2. package/dist/cjs/DSTabs.js.map +1 -1
  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 +6 -2
  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 +42 -27
  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 +42 -23
  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 +20 -8
  30. package/dist/cjs/parts/tabsContent/TabsContent.js.map +1 -1
  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 +50 -37
  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 +12 -9
  50. package/dist/esm/DSTabs.js.map +1 -1
  51. package/dist/esm/DSTabsCTX.js.map +1 -1
  52. package/dist/esm/DSTabsDatatestid.js.map +1 -1
  53. package/dist/esm/config/useCrossRef.js +7 -4
  54. package/dist/esm/config/useCrossRef.js.map +1 -1
  55. package/dist/esm/config/useTabs.js +14 -11
  56. package/dist/esm/config/useTabs.js.map +1 -1
  57. package/dist/esm/exported-related/DSTab.js +2 -1
  58. package/dist/esm/exported-related/DSTab.js.map +2 -2
  59. package/dist/esm/index.js.map +1 -1
  60. package/dist/esm/parts/carousel/Carousel.js +38 -26
  61. package/dist/esm/parts/carousel/Carousel.js.map +1 -1
  62. package/dist/esm/parts/carousel/styles.js.map +1 -1
  63. package/dist/esm/parts/carousel/useCarousel.js +8 -2
  64. package/dist/esm/parts/carousel/useCarousel.js.map +1 -1
  65. package/dist/esm/parts/carousel/useCarouselCallbacks.js +25 -22
  66. package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +1 -1
  67. package/dist/esm/parts/tabBar/TabBar.js +38 -22
  68. package/dist/esm/parts/tabBar/TabBar.js.map +2 -2
  69. package/dist/esm/parts/tabBar/styles.js +3 -1
  70. package/dist/esm/parts/tabBar/styles.js.map +1 -1
  71. package/dist/esm/parts/tabBar/useTabBar.js +4 -1
  72. package/dist/esm/parts/tabBar/useTabBar.js.map +1 -1
  73. package/dist/esm/parts/tabsContent/TabsContent.js +16 -7
  74. package/dist/esm/parts/tabsContent/TabsContent.js.map +1 -1
  75. package/dist/esm/parts/tabsContent/styles.js.map +1 -1
  76. package/dist/esm/parts/tabsPanel/TabsPanels.js +46 -36
  77. package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
  78. package/dist/esm/parts/tabsPanel/styles.js.map +1 -1
  79. package/dist/esm/propTypes.js.map +1 -1
  80. package/dist/esm/sharedTypes.js.map +1 -1
  81. package/dist/esm/utils/constants.js.map +1 -1
  82. package/dist/esm/utils/helpers.js +10 -2
  83. package/dist/esm/utils/helpers.js.map +1 -1
  84. package/dist/esm/utils/hooks/useKeyboardNavigation.js +37 -34
  85. package/dist/esm/utils/hooks/useKeyboardNavigation.js.map +1 -1
  86. package/dist/esm/utils/hooks/useTabsCallbacks.js +18 -12
  87. package/dist/esm/utils/hooks/useTabsCallbacks.js.map +1 -1
  88. package/package.json +6 -6
@@ -23,30 +23,33 @@ const useCarouselCallbacks = ({
23
23
  if (updateIndicatorStyle)
24
24
  updateIndicatorStyle();
25
25
  }, [recalcChevrons, updateIndicatorStyle]);
26
- const handleOnClick = useCallback(({ target }) => {
27
- if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
28
- const tabList = carouselOnlyListRef.current;
29
- const tabButton = target;
30
- const tabButtonDimensions = tabButton.getBoundingClientRect();
31
- const tabListDimensions = tabList?.getBoundingClientRect();
32
- const tabButtonIndex = tabButton.dataset.index;
33
- const lastItemIndex = focusableTabsRef.current.length.toString();
34
- const magicNumber = 34;
35
- const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
36
- if (!isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
37
- const containerWidth = tabListDimensions.width;
38
- const halfContainer = containerWidth / 2;
39
- const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
40
- const positionInContainer = elementScrollPosition % containerWidth;
41
- const width = tabButton.offsetWidth + magicNumber;
42
- if (positionInContainer > halfContainer) {
43
- carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
44
- } else {
45
- carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
26
+ const handleOnClick = useCallback(
27
+ ({ target }) => {
28
+ if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
29
+ const tabList = carouselOnlyListRef.current;
30
+ const tabButton = target;
31
+ const tabButtonDimensions = tabButton.getBoundingClientRect();
32
+ const tabListDimensions = tabList?.getBoundingClientRect();
33
+ const tabButtonIndex = tabButton.dataset.index;
34
+ const lastItemIndex = focusableTabsRef.current.length.toString();
35
+ const magicNumber = 34;
36
+ const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
37
+ if (!isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
38
+ const containerWidth = tabListDimensions.width;
39
+ const halfContainer = containerWidth / 2;
40
+ const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
41
+ const positionInContainer = elementScrollPosition % containerWidth;
42
+ const width = tabButton.offsetWidth + magicNumber;
43
+ if (positionInContainer > halfContainer) {
44
+ carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
45
+ } else {
46
+ carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
47
+ }
46
48
  }
47
49
  }
48
- }
49
- }, [focusableTabsRef, carouselOnlyListRef]);
50
+ },
51
+ [focusableTabsRef, carouselOnlyListRef]
52
+ );
50
53
  return {
51
54
  handleOnClick,
52
55
  rightButtonOnClick,
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\n\ninterface UseCarouselCallbacksPropsT {\n getVisibleItemsOffset: () => number;\n recalcChevrons: () => void;\n updateIndicatorStyle?: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n getVisibleItemsOffset,\n updateIndicatorStyle,\n recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n const rightButtonOnClick = useCallback(() => {\n if (carouselOnlyListRef.current) {\n carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n }\n }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n const leftButtonOnClick = useCallback(() => {\n if (carouselOnlyListRef.current) {\n carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n }\n }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n const handleOnScroll = useCallback(() => {\n recalcChevrons();\n if (updateIndicatorStyle) updateIndicatorStyle();\n }, [recalcChevrons, updateIndicatorStyle]);\n\n const handleOnClick = useCallback(\n ({ target }: MouseEvent) => {\n if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n const tabList = carouselOnlyListRef.current;\n const tabButton = target as HTMLButtonElement;\n const tabButtonDimensions = tabButton.getBoundingClientRect();\n const tabListDimensions = tabList?.getBoundingClientRect();\n const tabButtonIndex = tabButton.dataset.index as string;\n const lastItemIndex = focusableTabsRef.current.length.toString();\n const magicNumber = 34;\n\n const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n if (\n !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n tabListDimensions &&\n carouselOnlyListRef.current\n ) {\n const containerWidth = tabListDimensions.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = tabButton.offsetWidth + magicNumber;\n\n if (positionInContainer > halfContainer) {\n carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n }\n }\n }\n },\n [focusableTabsRef, carouselOnlyListRef],\n );\n\n return {\n handleOnClick,\n rightButtonOnClick,\n leftButtonOnClick,\n handleOnScroll,\n };\n};\n"],
5
- "mappings": "AAAA;ACCA;AAEA;AACA;AAcO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,kBAAkB,wBAAwB,WAAW,aAAa;AAE1E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,iBAAiB,YAAY,MAAM;AACvC,mBAAe;AACf,QAAI;AAAsB,2BAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,gBAAgB,YACpB,CAAC,EAAE,aAAyB;AAC1B,QAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,YAAM,UAAU,oBAAoB;AACpC,YAAM,YAAY;AAClB,YAAM,sBAAsB,UAAU,sBAAsB;AAC5D,YAAM,oBAAoB,SAAS,sBAAsB;AACzD,YAAM,iBAAiB,UAAU,QAAQ;AACzC,YAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,YAAM,cAAc;AAEpB,YAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,UACE,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,cAAM,iBAAiB,kBAAkB;AACzC,cAAM,gBAAgB,iBAAiB;AACvC,cAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,cAAM,sBAAsB,wBAAwB;AACpD,cAAM,QAAQ,UAAU,cAAc;AAEtC,YAAI,sBAAsB,eAAe;AACvC,8BAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,QAC1E,OAAO;AACL,8BAAoB,QAAQ,cAAc,sBAAsB;AAAA,QAClE;AAAA,MACF;AAAA,IACF;AAAA,EACF,GACA,CAAC,kBAAkB,mBAAmB,CACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,WAAW,aAAa;AAE1E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,iBAAiB,YAAY,MAAM;AACvC,mBAAe;AACf,QAAI;AAAsB,2BAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import React2, { useMemo, useContext } from "react";
3
4
  import { Carousel } from "../carousel/Carousel";
4
5
  import { useTabBar } from "./useTabBar";
@@ -37,8 +38,7 @@ const TabBar = () => {
37
38
  const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
38
39
  if (!disabled)
39
40
  availableTabIndexes.push(index);
40
- return /* @__PURE__ */ React2.createElement(StyledTabButton, {
41
- key: tabId,
41
+ return /* @__PURE__ */ jsxs(StyledTabButton, {
42
42
  role: "tab",
43
43
  ref: (tabButtonRef) => {
44
44
  if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
@@ -94,8 +94,14 @@ const TabBar = () => {
94
94
  if (onKeyDown && !disabled)
95
95
  onKeyDown(e);
96
96
  },
97
- style
98
- }, title, required && /* @__PURE__ */ React2.createElement(StyledRequiredMark, null, "\u25CF"));
97
+ style,
98
+ children: [
99
+ title,
100
+ required && /* @__PURE__ */ jsx(StyledRequiredMark, {
101
+ children: "\u25CF"
102
+ })
103
+ ]
104
+ }, tabId);
99
105
  });
100
106
  }, [
101
107
  tabs,
@@ -116,14 +122,17 @@ const TabBar = () => {
116
122
  handleOnKeyDown
117
123
  ]);
118
124
  if (type === TabTypes.SUBTABS && !isDSMobile) {
119
- return /* @__PURE__ */ React2.createElement(StyledSubTabsList, {
125
+ return /* @__PURE__ */ jsx(StyledSubTabsList, {
120
126
  withCarousel,
121
127
  "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
122
128
  ref: tabsListRef,
123
- role: "tablist"
124
- }, withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, null, renderTabs) : renderTabs);
129
+ role: "tablist",
130
+ children: withCarousel ? /* @__PURE__ */ jsx(Carousel, {
131
+ children: renderTabs
132
+ }) : renderTabs
133
+ });
125
134
  }
126
- return /* @__PURE__ */ React2.createElement(StyledTabList, {
135
+ return /* @__PURE__ */ jsxs(StyledTabList, {
127
136
  withCarousel,
128
137
  ref: tabsListRef,
129
138
  role: "tablist",
@@ -133,20 +142,27 @@ const TabBar = () => {
133
142
  mobileGradients,
134
143
  onScroll: updateMobileGradients,
135
144
  indicatorStyle,
136
- tabType: type
137
- }, /* @__PURE__ */ React2.createElement(StyledTabWrapper, {
138
- isDSMobile,
139
- fixedTabsHeaders
140
- }, !isDSMobile && withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, {
141
- updateIndicatorStyle
142
- }, renderTabs) : renderTabs), /* @__PURE__ */ React2.createElement(StyledSelectionIndicator, {
143
- isDSMobile,
144
- tabType: type
145
- }), isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ React2.createElement(StyledMobileGradient, {
146
- mobileGradients,
147
- left: tabsListRef.current?.scrollLeft,
148
- width: tabsListRef.current?.scrollWidth
149
- }));
145
+ tabType: type,
146
+ children: [
147
+ /* @__PURE__ */ jsx(StyledTabWrapper, {
148
+ isDSMobile,
149
+ fixedTabsHeaders,
150
+ children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, {
151
+ updateIndicatorStyle,
152
+ children: renderTabs
153
+ }) : renderTabs
154
+ }),
155
+ /* @__PURE__ */ jsx(StyledSelectionIndicator, {
156
+ isDSMobile,
157
+ tabType: type
158
+ }),
159
+ isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ jsx(StyledMobileGradient, {
160
+ mobileGradients,
161
+ left: tabsListRef.current?.scrollLeft,
162
+ width: tabsListRef.current?.scrollWidth
163
+ })
164
+ ]
165
+ });
150
166
  };
151
167
  export {
152
168
  TabBar
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { centerTab } from '../../utils/helpers';\nimport { TabTypes } from '../../utils/constants';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnTabChange } = useTabsCallbacks();\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\n ref={(tabButtonRef: HTMLButtonElement) => {\n if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n tabsRefAsArray.current[index] = tabButtonRef;\n if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n focusableTabsRef.current.push(tabButtonRef);\n tabsRef.current[index] = tabButtonRef;\n if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n lastTabInternalRef.current = tabButtonRef;\n }\n if (ref) ref.current = tabButtonRef;\n }\n }}\n type=\"button\"\n aria-controls={tabId}\n aria-selected={actualActiveTab === tabId}\n aria-disabled={disabled}\n aria-labelledby={`${tabId}-label`}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n title={title}\n data-required={required}\n data-tab-id={tabId}\n data-index={index}\n withCarousel={withCarousel}\n isActive={actualActiveTab === tabId}\n disabled={disabled}\n showSeparator={showSeparator && type !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') e.stopPropagation();\n if (!disabled) handleOnKeyDown(e);\n if (onKeyDown && !disabled) onKeyDown(e);\n }}\n style={style}\n >\n {title}\n {required && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n ref={tabsListRef}\n role=\"tablist\"\n >\n {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n withCarousel={withCarousel}\n ref={tabsListRef}\n role=\"tablist\"\n data-testid={DSTabsDatatestid.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n indicatorStyle={indicatorStyle}\n tabType={type}\n >\n <StyledTabWrapper isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n ) : (\n renderTabs\n )}\n </StyledTabWrapper>\n <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n {isDSMobile && !fixedTabsHeaders && (\n <StyledMobileGradient\n mobileGradients={mobileGradients}\n left={tabsListRef.current?.scrollLeft}\n width={tabsListRef.current?.scrollWidth}\n />\n )}\n </StyledTabList>\n );\n};\n"],
5
- "mappings": "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",
6
- "names": []
5
+ "mappings": "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",
6
+ "names": ["React"]
7
7
  }
@@ -32,7 +32,9 @@ const selectionIndicatorSettingsFromParent = css`
32
32
  ${StyledSelectionIndicator} {
33
33
  background: ${(props) => {
34
34
  const { theme, indicatorStyle, isDSMobile } = props;
35
- return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color("brand-600")(props)} 16px, ${th.color("brand-600")(props)} ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width}px )` : theme.colors.brand[600];
35
+ return !isDSMobile ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color("brand-600")(
36
+ props
37
+ )} 16px, ${th.color("brand-600")(props)} ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width - 16}px, transparent ${indicatorStyle.width}px )` : theme.colors.brand[600];
36
38
  }};
37
39
  }
38
40
  `;
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, css, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n position: absolute;\n height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\n/** CSS Setters */\n\nconst selectionIndicatorSettingsFromParent = css<StyledTabListPropsT>`\n ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\n }};\n }\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: absolute;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: calc(100% - 1px);\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType, isDSMobile }) => {\n if (tabType === TabTypes.SUBTABS) return 'capitalize';\n return isDSMobile ? 'none' : 'uppercase';\n }};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n \n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TabTypes.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 16px;\n line-height: 1.3;\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n z-index: 0;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.neutral['000']};`\n : ``}\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n\n ${selectionIndicatorSettingsFromParent}\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -32,7 +32,10 @@ const useTabBar = () => {
32
32
  }
33
33
  return defaultIndicatorStyles;
34
34
  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
35
- const updateIndicatorStyle = useCallback(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
35
+ const updateIndicatorStyle = useCallback(
36
+ () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
37
+ [getIndicatorStyles, setIndicatorStyle]
38
+ );
36
39
  useResizeObserver(tabsListRef, updateIndicatorStyle);
37
40
  const updateMobileGradients = useCallback(() => {
38
41
  if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useTabBar.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { defaultIndicatorStyles } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface UseTabBarReturnTypeT {\n updateIndicatorStyle: () => void;\n updateMobileGradients: () => void;\n setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n const {\n actualActiveTab,\n actualActiveTabRef,\n tabsListRef,\n props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n } = useContext(DSTabsContext);\n\n const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n left: false,\n right: false,\n });\n const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(defaultIndicatorStyles);\n\n const getIndicatorStyles = useCallback(() => {\n if (tabsListRef.current) {\n const tabList = tabsListRef.current;\n const activeTabButton = actualActiveTabRef.current;\n\n if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n // the full width of the tab button with margins.\n const missingMargins = isDSMobile ? 0 : 16;\n\n const tabClientWidth =\n isDSMobile && !fixedTabsHeaders\n ? activeTabButton.clientWidth\n : activeTabButton.clientWidth + missingMargins * 2;\n\n // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n // behavior that adds scroll to the tabList\n const position =\n isDSMobile && !fixedTabsHeaders\n ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n return {\n left: Math.round(position),\n width: Math.round(tabClientWidth),\n };\n }\n return defaultIndicatorStyles;\n }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n const updateIndicatorStyle = useCallback(\n () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n [getIndicatorStyles, setIndicatorStyle],\n );\n\n useResizeObserver(tabsListRef, updateIndicatorStyle);\n\n const updateMobileGradients = useCallback(() => {\n if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n setMobileGradients({\n left: shouldHaveLeftGradient(scrollLeft),\n right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n });\n }\n }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n useLayoutEffect(() => {\n if (showSelectionIndicator) {\n updateIndicatorStyle();\n }\n if (isDSMobile && !fixedTabsHeaders) {\n updateMobileGradients();\n }\n }, [\n updateMobileGradients,\n showSelectionIndicator,\n updateIndicatorStyle,\n isDSMobile,\n fixedTabsHeaders,\n actualActiveTab,\n ]);\n\n return {\n updateIndicatorStyle,\n setIndicatorStyle,\n indicatorStyle,\n mobileGradients,\n updateMobileGradients,\n };\n};\n"],
5
- "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAWO,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY;AAAA,MAC3C,WAAW,aAAa;AAE5B,QAAM,CAAC,iBAAiB,sBAAsB,SAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,qBAAqB,SAA2C,sBAAsB;AAE7G,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,iBAAiB,iBAAiB,OAAO;AAAG,eAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,uBAAuB,YAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG,GACnE,CAAC,oBAAoB,iBAAiB,CACxC;AAEA,oBAAkB,aAAa,oBAAoB;AAEnD,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,uBAAuB,UAAU;AAAA,QACvC,OAAO,wBAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,kBAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB,UAAU,kBAAkB;AACnE,OAAO,uBAAuB;AAC9B,SAAS,kBAAkB,wBAAwB,+BAA+B;AAClF,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,IAAI,WAAW,aAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA2C,sBAAsB;AAE7G,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,iBAAiB,iBAAiB,OAAO;AAAG,eAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,uBAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,oBAAkB,aAAa,oBAAoB;AAEnD,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,uBAAuB,UAAU;AAAA,QACvC,OAAO,wBAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,kBAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- import React2, { useContext } from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useContext } from "react";
3
4
  import { TabsPanels } from "../tabsPanel/TabsPanels";
4
5
  import { TabBar } from "../tabBar/TabBar";
5
6
  import { StyledTabBarContainer } from "./styles";
@@ -9,14 +10,22 @@ const TabsContent = () => {
9
10
  const {
10
11
  props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
11
12
  } = useContext(DSTabsContext);
12
- return /* @__PURE__ */ React2.createElement("div", {
13
+ return /* @__PURE__ */ jsxs("div", {
13
14
  ...containerProps,
14
15
  ref: innerRef,
15
- "data-testid": DSTabsDatatestid.TABS_CONTAINER
16
- }, /* @__PURE__ */ React2.createElement(StyledTabBarContainer, {
17
- "aria-label": tabsListAriaLabel,
18
- role: "tablist"
19
- }, /* @__PURE__ */ React2.createElement(TabBar, null), tabBarExtraContent), /* @__PURE__ */ React2.createElement(TabsPanels, null));
16
+ "data-testid": DSTabsDatatestid.TABS_CONTAINER,
17
+ children: [
18
+ /* @__PURE__ */ jsxs(StyledTabBarContainer, {
19
+ "aria-label": tabsListAriaLabel,
20
+ role: "tablist",
21
+ children: [
22
+ /* @__PURE__ */ jsx(TabBar, {}),
23
+ tabBarExtraContent
24
+ ]
25
+ }),
26
+ /* @__PURE__ */ jsx(TabsPanels, {})
27
+ ]
28
+ });
20
29
  };
21
30
  export {
22
31
  TabsContent
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {tabBarExtraContent}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB;AAAA,MACpD,WAAW,aAAa;AAE5B,SACE,qCAAC;AAAA,IAAK,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,eAAa,iBAAiB;AAAA,KACpE,qCAAC;AAAA,IAAsB,cAAY;AAAA,IAAmB,MAAK;AAAA,KACzD,qCAAC,YAAO,GACP,kBACH,GACA,qCAAC,gBAAW,CACd;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC;AAAA,IAAK,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,eAAa,iBAAiB;AAAA,IACpE;AAAA,2BAAC;AAAA,QAAsB,cAAY;AAAA,QAAmB,MAAK;AAAA,QACzD;AAAA,8BAAC,UAAO;AAAA,UACP;AAAA;AAAA,OACH;AAAA,MACA,oBAAC,cAAW;AAAA;AAAA,GACd;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/styles.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledTabBarContainer = styled.div`\n display: flex;\n overflow-x: hidden;\n`;\n"],
5
- "mappings": "AAAA;ACAA;AAEO,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import { Fragment, jsx } from "react/jsx-runtime";
2
3
  import React2, { useMemo, useContext, useCallback } from "react";
3
4
  import SwipeableViews from "react-swipeable-views";
4
5
  import { StyledPanelContainer } from "./styles";
@@ -11,19 +12,22 @@ const TabsPanels = () => {
11
12
  props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile }
12
13
  } = useContext(DSTabsContext);
13
14
  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();
14
- const handleOnChangeIndex = useCallback((index, indexLatest) => {
15
- if (!focusableTabsRef.current)
16
- return;
17
- const offset = index - indexLatest;
18
- if (focusableTabsRef.current) {
19
- const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);
20
- const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
21
- if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex])
15
+ const handleOnChangeIndex = useCallback(
16
+ (index, indexLatest) => {
17
+ if (!focusableTabsRef.current)
22
18
  return;
23
- handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId);
24
- focusableTabsRef.current[newFocusableIndex].click();
25
- }
26
- }, [actualActiveTab, focusableTabsRef, handleOnTabChange]);
19
+ const offset = index - indexLatest;
20
+ if (focusableTabsRef.current) {
21
+ const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);
22
+ const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
23
+ if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex])
24
+ return;
25
+ handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId);
26
+ focusableTabsRef.current[newFocusableIndex].click();
27
+ }
28
+ },
29
+ [actualActiveTab, focusableTabsRef, handleOnTabChange]
30
+ );
27
31
  const firstSlideToShow = useMemo(() => {
28
32
  const childrenArray = React2.Children.toArray(tabs);
29
33
  const index = childrenArray.filter((tab) => tab.props.disabled !== true).findIndex((tab) => tab.props.tabId === actualActiveTab);
@@ -31,34 +35,40 @@ const TabsPanels = () => {
31
35
  return 0;
32
36
  return index;
33
37
  }, [actualActiveTab, tabs]);
34
- const panels = useMemo(() => React2.Children.map(tabs, (tab) => {
35
- const { tabId: panelId = "", style, children: content, disabled } = tab.props;
36
- const isActive = actualActiveTab === panelId;
37
- const shouldRender = !onlyRenderActiveTab || isActive;
38
- if (disabled)
39
- return null;
40
- return shouldRender && /* @__PURE__ */ React2.createElement(StyledPanelContainer, {
41
- key: panelId,
42
- id: panelId,
43
- "aria-labelledby": `${panelId}-label`,
44
- "aria-hidden": !isActive,
45
- "data-panel-id": panelId,
46
- "data-testid": "ds-tabs-tab-panel",
47
- hidden: !isActive,
48
- onMouseDown: handleOnMouseDown,
49
- role: "tabpanel",
50
- style,
51
- isDSMobile
52
- }, content);
53
- }), [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]);
38
+ const panels = useMemo(
39
+ () => React2.Children.map(tabs, (tab) => {
40
+ const { tabId: panelId = "", style, children: content, disabled } = tab.props;
41
+ const isActive = actualActiveTab === panelId;
42
+ const shouldRender = !onlyRenderActiveTab || isActive;
43
+ if (disabled)
44
+ return null;
45
+ return shouldRender && /* @__PURE__ */ jsx(StyledPanelContainer, {
46
+ id: panelId,
47
+ "aria-labelledby": `${panelId}-label`,
48
+ "aria-hidden": !isActive,
49
+ "data-panel-id": panelId,
50
+ "data-testid": "ds-tabs-tab-panel",
51
+ hidden: !isActive,
52
+ onMouseDown: handleOnMouseDown,
53
+ role: "tabpanel",
54
+ style,
55
+ isDSMobile,
56
+ children: content
57
+ }, panelId);
58
+ }),
59
+ [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]
60
+ );
54
61
  if (animated) {
55
- return /* @__PURE__ */ React2.createElement(SwipeableViews, {
62
+ return /* @__PURE__ */ jsx(SwipeableViews, {
56
63
  enableMouseEvents,
57
64
  index: firstSlideToShow,
58
- onChangeIndex: handleOnChangeIndex
59
- }, panels);
65
+ onChangeIndex: handleOnChangeIndex,
66
+ children: panels
67
+ });
60
68
  }
61
- return /* @__PURE__ */ React2.createElement(React2.Fragment, null, panels);
69
+ return /* @__PURE__ */ jsx(Fragment, {
70
+ children: panels
71
+ });
62
72
  };
63
73
  export {
64
74
  TabsPanels
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const firstSlideToShow = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray\n .filter((tab) => tab.props.disabled !== true)\n .findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n const panels = useMemo(\n () =>\n React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n\n if (disabled) return null;\n return (\n shouldRender && (\n <StyledPanelContainer\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hidden={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={style}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n )\n );\n }),\n [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs],\n );\n\n if (animated) {\n return (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={firstSlideToShow}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </SwipeableViews>\n );\n }\n\n return <>{panels}</>;\n};\n"],
5
- "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAGO,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM;AAAA,MACzE,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,sBAAsB,iBAAiB;AAElE,QAAM,sBAAsB,YAC1B,CAAC,OAAe,gBAAwB;AACtC,QAAI,CAAC,iBAAiB;AAAS;AAE/B,UAAM,SAAS,QAAQ;AAEvB,QAAI,iBAAiB,SAAS;AAC5B,YAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,YAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,UACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU;AAE5B;AACF,wBAAkB,iBAAiB,QAAQ,mBAAmB,SAAS,KAAe;AAKtF,uBAAiB,QAAQ,mBAAmB,MAAM;AAAA,IACpD;AAAA,EACF,GACA,CAAC,iBAAiB,kBAAkB,iBAAiB,CACvD;AAEA,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,gBAAgB,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cACX,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAC3C,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAEzD,QAAI,UAAU;AAAI,aAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,SAAS,QACb,MACE,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AAClE,UAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,aAAa,IAAI;AACxE,UAAM,WAAW,oBAAoB;AACrC,UAAM,eAAe,CAAC,uBAAuB;AAE7C,QAAI;AAAU,aAAO;AACrB,WACE,gBACE,qCAAC;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,mBAAiB,GAAG;AAAA,MACpB,eAAa,CAAC;AAAA,MACd,iBAAe;AAAA,MACf,eAAY;AAAA,MACZ,QAAQ,CAAC;AAAA,MACT,aAAa;AAAA,MACb,MAAK;AAAA,MACL;AAAA,MACA;AAAA,OAEC,OACH;AAAA,EAGN,CAAC,GACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,IAAI,CAC5E;AAEA,MAAI,UAAU;AACZ,WACE,qCAAC;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,eAAe;AAAA,OAEd,MACH;AAAA,EAEJ;AAEA,SAAO,4DAAG,MAAO;AACnB;",
6
- "names": []
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM,WAAW;AAAA,EACxF,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AAElE,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB;AAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU;AAE5B;AACF,0BAAkB,iBAAiB,QAAQ,mBAAmB,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,mBAAmB,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cACX,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAC3C,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAEzD,QAAI,UAAU;AAAI,aAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,SAAS;AAAA,IACb,MACEA,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AAClE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI;AAAU,eAAO;AACrB,aACE,gBACE,oBAAC;AAAA,QAEC,IAAI;AAAA,QACJ,mBAAiB,GAAG;AAAA,QACpB,eAAa,CAAC;AAAA,QACd,iBAAe;AAAA,QACf,eAAY;AAAA,QACZ,QAAQ,CAAC;AAAA,QACT,aAAa;AAAA,QACb,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QAEC;AAAA,SAZI,OAaP;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,IAAI;AAAA,EAC5E;AAEA,MAAI,UAAU;AACZ,WACE,oBAAC;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,eAAe;AAAA,MAEd;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AAAA,IAAG;AAAA,GAAO;AACnB;",
6
+ "names": ["React"]
7
7
  }
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\ninterface StyledPanelContainerPropsT {\n hidden: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ hidden }) => (hidden ? 'visibility: hidden;' : '')}\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
5
- "mappings": "AAAA;ACAA;AAOO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,aAAc,SAAS,wBAAwB;AAAA;AAAA,IAElD,CAAC,EAAE,iBAAkB,aAAa,oBAAoB;AAAA;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAOhB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,OAAO,MAAO,SAAS,wBAAwB;AAAA;AAAA,IAElD,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB;AAAA;",
6
6
  "names": []
7
7
  }
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\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"],
5
- "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,OAAO,MAAY;AAAC;AAoDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,UAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,UAAU,MAAM,qBAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAsB,EAAE;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,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,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,6BAA6B;AAGhD,MAAM,OAAO,MAAY;AAAC;AAoDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,UAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,UAAU,MAAM,qBAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAsB,EAAE;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,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,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
6
6
  "names": []
7
7
  }
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "AAAA;",
5
+ "mappings": "AAAA,YAAY,WAAW;",
6
6
  "names": []
7
7
  }
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TabTypes = {\n NORMAL: 'normal' as const,\n NORMAL_SMALL: 'normal_small' as const,\n SUBTABS: 'subtabs' as const,\n};\n\nexport const TabTypesValuesAsArray = Object.values(TabTypes);\n\nexport const MOBILE_GRADIENT_WIDTH = 24;\n\nexport const defaultIndicatorStyles = {\n left: 0,\n width: 0,\n};\n\nexport const gradientOffsetsAccordingType = {\n normal_small: 14,\n normal: 16,\n subtabs: 16,\n fixedTabsHeaders: 0,\n};\n"],
5
- "mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AACX;AAEO,MAAM,wBAAwB,OAAO,OAAO,QAAQ;AAEpD,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,+BAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,kBAAkB;AACpB;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,WAAW;AAAA,EACtB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AACX;AAEO,MAAM,wBAAwB,OAAO,OAAO,QAAQ;AAEpD,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,+BAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,kBAAkB;AACpB;",
6
6
  "names": []
7
7
  }
@@ -38,8 +38,16 @@ const getVisibleDimensions = (node, referenceNode) => {
38
38
  const nodeDimensions = node.getBoundingClientRect();
39
39
  const referenceNodeDimensions = referenceNode.getBoundingClientRect();
40
40
  return {
41
- width: Math.min(node.clientWidth, referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left, node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left)),
42
- height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
41
+ width: Math.min(
42
+ node.clientWidth,
43
+ referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,
44
+ node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left)
45
+ ),
46
+ height: Math.min(
47
+ node.clientHeight,
48
+ referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,
49
+ node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top)
50
+ )
43
51
  };
44
52
  };
45
53
  const shouldHaveLeftGradient = (scrollLeft) => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;
@@ -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
  }