@elliemae/ds-tabs 3.22.0-next.25 → 3.22.0-next.27

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 (53) hide show
  1. package/dist/cjs/DSTabs.js.map +1 -1
  2. package/dist/cjs/DSTabsCTX.js.map +1 -1
  3. package/dist/cjs/DSTabsDatatestid.js.map +1 -1
  4. package/dist/cjs/config/useCrossRef.js.map +1 -1
  5. package/dist/cjs/config/useTabs.js.map +1 -1
  6. package/dist/cjs/exported-related/DSTab.js.map +1 -1
  7. package/dist/cjs/index.js.map +1 -1
  8. package/dist/cjs/parts/carousel/Carousel.js.map +1 -1
  9. package/dist/cjs/parts/carousel/styles.js.map +1 -1
  10. package/dist/cjs/parts/carousel/useCarousel.js.map +1 -1
  11. package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map +1 -1
  12. package/dist/cjs/parts/tabBar/TabBar.js.map +1 -1
  13. package/dist/cjs/parts/tabBar/styles.js.map +1 -1
  14. package/dist/cjs/parts/tabBar/useTabBar.js.map +1 -1
  15. package/dist/cjs/parts/tabsContent/TabsContent.js.map +1 -1
  16. package/dist/cjs/parts/tabsContent/styles.js.map +1 -1
  17. package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +1 -1
  18. package/dist/cjs/parts/tabsPanel/styles.js.map +1 -1
  19. package/dist/cjs/propTypes.js.map +2 -2
  20. package/dist/cjs/sharedTypes.js.map +1 -1
  21. package/dist/cjs/utils/constants.js.map +1 -1
  22. package/dist/cjs/utils/helpers.js.map +1 -1
  23. package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map +1 -1
  24. package/dist/cjs/utils/hooks/useTabsCallbacks.js.map +1 -1
  25. package/dist/esm/DSTabs.js.map +1 -1
  26. package/dist/esm/DSTabsCTX.js.map +1 -1
  27. package/dist/esm/DSTabsDatatestid.js.map +1 -1
  28. package/dist/esm/config/useCrossRef.js.map +1 -1
  29. package/dist/esm/config/useTabs.js.map +1 -1
  30. package/dist/esm/exported-related/DSTab.js.map +1 -1
  31. package/dist/esm/index.js.map +1 -1
  32. package/dist/esm/parts/carousel/Carousel.js.map +1 -1
  33. package/dist/esm/parts/carousel/styles.js.map +1 -1
  34. package/dist/esm/parts/carousel/useCarousel.js.map +1 -1
  35. package/dist/esm/parts/carousel/useCarouselCallbacks.js.map +1 -1
  36. package/dist/esm/parts/tabBar/TabBar.js.map +1 -1
  37. package/dist/esm/parts/tabBar/styles.js.map +1 -1
  38. package/dist/esm/parts/tabBar/useTabBar.js.map +1 -1
  39. package/dist/esm/parts/tabsContent/TabsContent.js.map +1 -1
  40. package/dist/esm/parts/tabsContent/styles.js.map +1 -1
  41. package/dist/esm/parts/tabsPanel/TabsPanels.js.map +1 -1
  42. package/dist/esm/parts/tabsPanel/styles.js.map +1 -1
  43. package/dist/esm/propTypes.js.map +2 -2
  44. package/dist/esm/sharedTypes.js.map +1 -1
  45. package/dist/esm/utils/constants.js.map +1 -1
  46. package/dist/esm/utils/helpers.js.map +1 -1
  47. package/dist/esm/utils/hooks/useKeyboardNavigation.js.map +1 -1
  48. package/dist/esm/utils/hooks/useTabsCallbacks.js.map +1 -1
  49. package/dist/types/parts/tabBar/TabBar.d.ts +1 -0
  50. package/dist/types/parts/tabsContent/TabsContent.d.ts +1 -0
  51. package/dist/types/parts/tabsPanel/TabsPanels.d.ts +1 -0
  52. package/dist/types/propTypes.d.ts +1 -1
  53. package/package.json +13 -13
package/dist/cjs/DSTabs.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/DSTabs.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/DSTabs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { tabsPropTypes } from './propTypes.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';\nimport { TabsContent } from './parts/tabsContent/TabsContent.js';\nimport { useTabs } from './config/useTabs.js';\nimport { useCrossRef } from './config/useCrossRef.js';\nimport { TabTypes } from './utils/constants.js';\nimport type { DSTabsT } from './propTypes.js';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n const ctx = useTabs(props);\n const crossRefsCtx = useCrossRef();\n\n const { type } = props;\n\n if (type === TabTypes.SUBTABS) {\n return (\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n );\n }\n\n return (\n <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n </DSTabsCrossRefContext.Provider>\n );\n};\n\nDSTabs.displayName = 'DSTabs';\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBf;AAlBR,8BAAyB;AACzB,uBAA8B;AAC9B,uBAAqD;AACrD,yBAA4B;AAC5B,qBAAwB;AACxB,yBAA4B;AAC5B,uBAAyB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,UAAM,wBAAQ,KAAK;AACzB,QAAM,mBAAe,gCAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,0BAAS,SAAS;AAC7B,WACE,4CAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf;AAAA,EAEJ;AAEA,SACE,4CAAC,uCAAsB,UAAtB,EAA+B,OAAO,cACrC,sDAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf,GACF;AAEJ;AAEA,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,MAAM,uBAAmB,kCAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
6
6
  "names": []
package/dist/cjs/DSTabsCTX.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/DSTabsCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/DSTabsCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { tabsDefaultProps as defaultProps } from './propTypes.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n props: defaultProps,\n tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n tabsListRef: createRef<HTMLDivElement | null>(),\n carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n setInternalActiveTab: noop,\n actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,uBAAiD;AAIjD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO,iBAAAA;AAAA,EACP,aAAS,wBAAoD;AAAA,EAC7D,iBAAa,wBAAiC;AAAA,EAC9C,yBAAqB,wBAAiC;AAAA,EACtD,sBAAkB,wBAAsC;AAAA,EACxD,oBAAgB,wBAAsC;AAAA,EACtD,wBAAoB,wBAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB,4BAAsD,cAAc;AAC1F,MAAM,4BAAwB,4BAA0D,uBAAuB;",
6
6
  "names": ["defaultProps"]
package/dist/cjs/DSTabsDatatestid.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/DSTabsDatatestid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/DSTabsDatatestid.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["export const DSTabsDatatestid = {\n TABS_CONTAINER: 'ds-tabs-container',\n TAB_BUTTON: 'ds-tabs-tab-button',\n SUBTAB_BUTTON: 'ds-tabs-subtab-button',\n TAB_PANEL: 'ds-tabs-tab-panel',\n SUB_TAB_LIST: 'subtabs-list',\n TAB_LIST: 'tab-list',\n CAROUSEL: {\n BUTTON_RIGHT: 'chevron-right',\n BUTTON_LEFT: 'chevron-left',\n },\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;",
6
6
  "names": []
package/dist/cjs/config/useCrossRef.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/config/useCrossRef.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/config/useCrossRef.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useRef, useMemo } from 'react';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useCrossRef = (): DSTabsInternalsT.DSTabsUseCrossRefContextT => {\n const firstSubtabInternalRef = useRef<HTMLButtonElement>();\n const lastTabInternalRef = useRef<HTMLButtonElement>();\n\n const ctx = useMemo(\n () => ({\n firstSubtabInternalRef,\n lastTabInternalRef,\n }),\n [],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAGzB,MAAM,cAAc,MAAkD;AAC3E,QAAM,6BAAyB,qBAA0B;AACzD,QAAM,yBAAqB,qBAA0B;AAErD,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
6
6
  "names": []
package/dist/cjs/config/useTabs.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/config/useTabs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/config/useTabs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../propTypes.js';\nimport type { DSTabsT } from '../propTypes.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>('');\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n useEffect(() => {\n if (activeTab === undefined) {\n const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n }\n }, [activeTab]);\n\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n }),\n [actualActiveTab, propsWithDefaults],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,8BAA6C;AAC7C,uBAAiC;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,sDAAoD,OAAO,iCAAgB;AAErG,QAAM,EAAE,UAAU,IAAI;AAEtB,QAAM,cAAU,qBAA0C,CAAC,CAAC;AAC5D,QAAM,qBAAiB,qBAA4B,CAAC,CAAC;AACrD,QAAM,uBAAmB,qBAA4B,CAAC,CAAC;AACvD,QAAM,0BAAsB,qBAA8B,IAAI;AAC9D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,yBAAqB,qBAAiC,IAAI;AAEhE,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAiB,EAAE;AAErE,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,QAAI,cAAc;AAAW,aAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,8BAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
6
6
  "names": []
package/dist/cjs/exported-related/DSTab.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/exported-related/DSTab.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/exported-related/DSTab.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { tabPropTypes } from '../propTypes.js';\nimport type { DSTabT } from '../propTypes.js';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.displayName = 'DSTab';\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADM6B;AANpD,mBAAkB;AAElB,8BAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAqC,4CAAC,aAAAA,QAAM,UAAN,EAAgB,GAAG,OAAO;AAE/E,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,sBAAkB,kCAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
6
6
  "names": ["React"]
package/dist/cjs/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["export * from './exported-related/DSTab.js';\nexport * from './DSTabs.js';\nexport { TabTypes } from './utils/constants.js';\nexport * from './DSTabsDatatestid.js';\nexport type { DSTabT, DSTabsT } from './propTypes.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,wCAAd;AACA,wBAAc,wBADd;AAEA,uBAAyB;AACzB,wBAAc,kCAHd;",
6
6
  "names": []
package/dist/cjs/parts/carousel/Carousel.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,QAEzB,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,QAEzB,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF,4CAAC,oCAAmB,KAAK,qBAAqB,SAAS,eAAe,UAAU,gBAC7E,UACH;AAAA,KACF;AAEJ;",
6
6
  "names": []
package/dist/cjs/parts/carousel/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TabTypes.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,uBAAyB;AAQlB,MAAM,wBAAoB,yBAAO,8BAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI1C,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,QAAQ,MAAO,YAAY,0BAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,QAAQ,MAAO,YAAY,0BAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,0BAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,WAAW,MAAM,OAAO,QAAQ,GAAG;AAAA,KAEzH;AAAA;",
6
6
  "names": []
package/dist/cjs/parts/carousel/useCarousel.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/carousel/useCarousel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/carousel/useCarousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseCarouselPropsT {\n updateIndicatorStyle?: () => void;\n}\n\ninterface UseCarouselReturnTypeT {\n showChevrons: DSTabsInternalsT.ShowChevronsT;\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n right: false,\n left: false,\n });\n\n const { tabsRefAsArray } = useContext(DSTabsContext);\n\n const shouldShowLeft = useCallback(\n () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n [carouselOnlyListRef],\n );\n\n const shouldShowRight = useCallback(\n () =>\n carouselOnlyListRef.current\n ? carouselOnlyListRef.current.scrollLeft <\n carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n : false,\n [carouselOnlyListRef],\n );\n\n const recalcChevrons = useCallback(() => {\n setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n }, [shouldShowLeft, shouldShowRight]);\n\n const getVisibleItemsOffset = useCallback(() => {\n if (tabsRefAsArray.current) {\n const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.clientWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n return scroll - 16;\n }\n return 0;\n }, [tabsRefAsArray, carouselOnlyListRef]);\n\n useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n getVisibleItemsOffset,\n recalcChevrons,\n updateIndicatorStyle,\n });\n\n return {\n showChevrons,\n leftButtonOnClick,\n rightButtonOnClick,\n handleOnClick,\n handleOnScroll,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;AAe9B,MAAM,cAAc,CAAC,EAAE,qBAAqB,MAAiD;AAClG,QAAM,EAAE,oBAAoB,QAAI,yBAAW,8BAAa;AAExD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,QAAI,yBAAW,8BAAa;AAEnD,QAAM,qBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,qBAAiB,0BAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,gBAAI,yCAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,6BAAAA,SAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,kDAAqB;AAAA,IACpG;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": ["useResizeObserver"]
package/dist/cjs/parts/carousel/useCarouselCallbacks.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AAExC,qBAAyC;AACzC,uBAA8B;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,QAAI,yBAAW,8BAAa;AAE1E,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,qBAAiB,0BAAY,MAAM;AACvC,mBAAe;AACf,QAAI;AAAsB,2BAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,oBAAgB;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,KAAC,yCAAyB,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": []
package/dist/cjs/parts/tabBar/TabBar.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\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 isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\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 data-testid=\"tab-wrapper\" 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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": ["React"]
package/dist/cjs/parts/tabBar/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, css, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
package/dist/cjs/parts/tabBar/useTabBar.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabBar/useTabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabBar/useTabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from '@elliemae/ds-utilities';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { defaultIndicatorStyles } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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(updateIndicatorStyle, tabsListRef.current);\n useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,0BAAkC;AAClC,qBAAkF;AAClF,uBAA8B;AAC9B,uBAAuC;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA2C,uCAAsB;AAE7G,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,KAAC,iCAAiB,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,2BAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,6CAAkB,sBAAsB,YAAY,OAAO;AAC3D,6CAAkB,sBAAsB,mBAAmB,OAAO;AAElE,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,UAAM,uCAAuB,UAAU;AAAA,QACvC,WAAO,wCAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,oCAAgB,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": []
package/dist/cjs/parts/tabsContent/TabsContent.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,0BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,4CAAuB,KAAK;AAChD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,yCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,qBAAqB,qBAAqB;AAAA,WAC7C;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
6
6
  "names": []
package/dist/cjs/parts/tabsContent/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabsContent/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabsContent/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledTabBarContainer = styled.div`\n display: flex;\n overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;",
6
6
  "names": []
package/dist/cjs/parts/tabsPanel/TabsPanels.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { default as SwipeableViews } from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\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 {...tabPanelsProps}\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 hide={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={{\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n }}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n )\n );\n }),\n [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs, tabPanelsProps],\n );\n\n if (animated) {\n const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n return (\n <Comp\n {...(swipeableViewsContainerProps as any)}\n style={{\n overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n ...(swipeableViewsContainerProps?.style || {}),\n }}\n enableMouseEvents={enableMouseEvents}\n index={firstSlideToShow}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </Comp>\n );\n }\n\n return <>{panels}</>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqGjB;AA5BM;AAxEZ,IAAAA,gBAAwD;AACxD,mCAA0C;AAC1C,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,QAAI,0BAAW,8BAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,QAAI,0CAAiB;AAElE,QAAM,0BAAsB;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,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,uBAAmB,uBAAQ,MAAM;AACrC,UAAM,gBAAgB,cAAAC,QAAM,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,aAAS;AAAA,IACb,MACE,cAAAA,QAAM,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;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG;AAAA,UACpB,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,MAAM,cAAc;AAAA,EAC5F;AAEA,MAAI,UAAU;AACZ,UAAM,OAAQ,6BAAAC,SAAwB,WAAW,6BAAAA;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO,2EAAG,kBAAO;AACnB;",
6
6
  "names": ["import_react", "React", "SwipeableViews"]
package/dist/cjs/parts/tabsPanel/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ hide }) => (hide ? 'visibility: hidden; position: absolute;' : '')}\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAOhB,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,KAAK,MAAO,OAAO,4CAA4C;AAAA;AAAA,IAElE,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB;AAAA;",
6
6
  "names": []
package/dist/cjs/propTypes.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\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 tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional | keyof DefaultProps>,\n XstyledProps {}\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 ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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 TabBarExtraContent: PropTypes.func\n .description('Extra content next to the Tab Bar as a react component instead of JSX')\n .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 tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\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 tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
3
+ "sources": ["../../src/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\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 tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional>,\n XstyledProps {}\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 ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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 TabBarExtraContent: PropTypes.func\n .description('Extra content next to the Tab Bar as a react component instead of JSX')\n .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 tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\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 tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AACvE,uBAAgD;AAKhD,MAAM,OAAO,MAAY;AAAC;AA2DnB,MAAM,eAAe;AAAA,EAC1B,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,kCAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,kCAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,kCAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,kCAAU,MAAM,sCAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,uCAAsB,CAAC,CAAC;AAAA,EAC3G,oBAAoB,kCAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,oBAAoB,kCAAU,KAC3B,YAAY,uEAAuE,EACnF,aAAa,MAAS;AAAA,EACzB,qBAAqB,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,kCAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAAA,EACzB,gBAAgB,kCAAU,MAAM,iDAAyB,EACtD,YAAY,8CAA8C,EAC1D,aAAa,CAAC,CAAC;AAAA,EAClB,8BAA8B,kCAAU,OACrC,YAAY,oDAAoD,EAChE,aAAa,CAAC,CAAC;AACpB;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,0BAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AACjC;",
6
6
  "names": []
7
7
  }
package/dist/cjs/sharedTypes.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import type { TabTypes } from './utils/constants.js';\nimport type { DSTabsT } from './propTypes.js';\n\nexport namespace DSTabsInternalsT {\n export type TabTypesT = (typeof TabTypes)[keyof typeof TabTypes];\n\n export interface MobileGradientsT {\n right: boolean;\n left: boolean;\n }\n\n export interface IndicatorStyleT {\n left: number;\n width: number;\n }\n\n export interface ShowChevronsT {\n right: boolean;\n left: boolean;\n }\n\n export interface DSTabsUseTabsContextT {\n props: DSTabsT.InternalProps;\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\n export interface DSTabsUseCrossRefContextT {\n lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
6
6
  "names": []
package/dist/cjs/utils/constants.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/utils/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/utils/constants.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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": []
package/dist/cjs/utils/helpers.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/utils/helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/utils/helpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from './constants.js';\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAsC;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": []
package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/utils/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/utils/hooks/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwC;AACxC,uBAAqD;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,iBAAiB,QAAI,yBAAW,8BAAa;AACrD,QAAM,EAAE,wBAAwB,mBAAmB,QAAI,yBAAW,sCAAqB;AAEvF,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI,CAAC;AAClG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI,CAAC;AAClG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,iCAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,6BAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,gBAAgB;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
6
6
  "names": []
package/dist/cjs/utils/hooks/useTabsCallbacks.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/utils/hooks/useTabsCallbacks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../src/utils/hooks/useTabsCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AACxC,qBAA0B;AAC1B,uBAA8B;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,wBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,sCAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc;AAAoB,UAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
package/dist/esm/DSTabs.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabs.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabs.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { tabsPropTypes } from './propTypes.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';\nimport { TabsContent } from './parts/tabsContent/TabsContent.js';\nimport { useTabs } from './config/useTabs.js';\nimport { useCrossRef } from './config/useCrossRef.js';\nimport { TabTypes } from './utils/constants.js';\nimport type { DSTabsT } from './propTypes.js';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n const ctx = useTabs(props);\n const crossRefsCtx = useCrossRef();\n\n const { type } = props;\n\n if (type === TabTypes.SUBTABS) {\n return (\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n );\n }\n\n return (\n <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n </DSTabsCrossRefContext.Provider>\n );\n};\n\nDSTabs.displayName = 'DSTabs';\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACoBf;AAlBR,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,SAAS,SAAS;AAC7B,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf;AAAA,EAEJ;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf,GACF;AAEJ;AAEA,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,MAAM,mBAAmB,SAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
6
6
  "names": []
package/dist/esm/DSTabsCTX.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabsCTX.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabsCTX.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { tabsDefaultProps as defaultProps } from './propTypes.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n props: defaultProps,\n tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n tabsListRef: createRef<HTMLDivElement | null>(),\n carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n setInternalActiveTab: noop,\n actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAS,oBAAoB,oBAAoB;AAIjD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,SAAS,UAAoD;AAAA,EAC7D,aAAa,UAAiC;AAAA,EAC9C,qBAAqB,UAAiC;AAAA,EACtD,kBAAkB,UAAsC;AAAA,EACxD,gBAAgB,UAAsC;AAAA,EACtD,oBAAoB,UAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,oBAAoB,UAAoC;AAAA,EACxD,wBAAwB,UAAoC;AAC9D;AAEO,MAAM,gBAAgB,cAAsD,cAAc;AAC1F,MAAM,wBAAwB,cAA0D,uBAAuB;",
6
6
  "names": []
package/dist/esm/DSTabsDatatestid.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabsDatatestid.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabsDatatestid.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSTabsDatatestid = {\n TABS_CONTAINER: 'ds-tabs-container',\n TAB_BUTTON: 'ds-tabs-tab-button',\n SUBTAB_BUTTON: 'ds-tabs-subtab-button',\n TAB_PANEL: 'ds-tabs-tab-panel',\n SUB_TAB_LIST: 'subtabs-list',\n TAB_LIST: 'tab-list',\n CAROUSEL: {\n BUTTON_RIGHT: 'chevron-right',\n BUTTON_LEFT: 'chevron-left',\n },\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,mBAAmB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;",
6
6
  "names": []
package/dist/esm/config/useCrossRef.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCrossRef.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCrossRef.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useMemo } from 'react';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useCrossRef = (): DSTabsInternalsT.DSTabsUseCrossRefContextT => {\n const firstSubtabInternalRef = useRef<HTMLButtonElement>();\n const lastTabInternalRef = useRef<HTMLButtonElement>();\n\n const ctx = useMemo(\n () => ({\n firstSubtabInternalRef,\n lastTabInternalRef,\n }),\n [],\n );\n\n return ctx;\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,eAAe;AAGzB,MAAM,cAAc,MAAkD;AAC3E,QAAM,yBAAyB,OAA0B;AACzD,QAAM,qBAAqB,OAA0B;AAErD,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
6
6
  "names": []
package/dist/esm/config/useTabs.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../propTypes.js';\nimport type { DSTabsT } from '../propTypes.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>('');\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n useEffect(() => {\n if (activeTab === undefined) {\n const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n }\n }, [activeTab]);\n\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n }),\n [actualActiveTab, propsWithDefaults],\n );\n\n return ctx;\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,UAAU,SAAS,iBAAiB;AACrD,SAAS,oCAAoC;AAC7C,SAAS,wBAAwB;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,gBAAgB;AAErG,QAAM,EAAE,UAAU,IAAI;AAEtB,QAAM,UAAU,OAA0C,CAAC,CAAC;AAC5D,QAAM,iBAAiB,OAA4B,CAAC,CAAC;AACrD,QAAM,mBAAmB,OAA4B,CAAC,CAAC;AACvD,QAAM,sBAAsB,OAA8B,IAAI;AAC9D,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,qBAAqB,OAAiC,IAAI;AAEhE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB,EAAE;AAErE,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc;AAAW,aAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
6
6
  "names": []
package/dist/esm/exported-related/DSTab.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSTab.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSTab.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { tabPropTypes } from '../propTypes.js';\nimport type { DSTabT } from '../propTypes.js';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.displayName = 'DSTab';\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACM6B;AANpD,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAG7B,MAAM,QAAQ,CAAC,UAAqC,oBAACA,OAAM,UAAN,EAAgB,GAAG,OAAO;AAE/E,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
6
6
  "names": ["React"]
package/dist/esm/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exported-related/DSTab.js';\nexport * from './DSTabs.js';\nexport { TabTypes } from './utils/constants.js';\nexport * from './DSTabsDatatestid.js';\nexport type { DSTabT, DSTabsT } from './propTypes.js';\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB;AACzB,cAAc;",
6
6
  "names": []
package/dist/esm/parts/carousel/Carousel.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode[];\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAUQ,KAVR;AAzBJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mBAAmB,6BAA6B,uBAAuB,0BAA0B;AAC1G,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QAEzB,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QAEzB,8BAAC,gBAAa,MAAM,YAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF,oBAAC,sBAAmB,KAAK,qBAAqB,SAAS,eAAe,UAAU,gBAC7E,UACH;AAAA,KACF;AAEJ;",
6
6
  "names": []
package/dist/esm/parts/carousel/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TabTypes.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAQlB,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI1C,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,WAAW,MAAM,OAAO,QAAQ,GAAG;AAAA,KAEzH;AAAA;",
6
6
  "names": []
package/dist/esm/parts/carousel/useCarousel.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseCarouselPropsT {\n updateIndicatorStyle?: () => void;\n}\n\ninterface UseCarouselReturnTypeT {\n showChevrons: DSTabsInternalsT.ShowChevronsT;\n leftButtonOnClick: () => void;\n rightButtonOnClick: () => void;\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n right: false,\n left: false,\n });\n\n const { tabsRefAsArray } = useContext(DSTabsContext);\n\n const shouldShowLeft = useCallback(\n () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n [carouselOnlyListRef],\n );\n\n const shouldShowRight = useCallback(\n () =>\n carouselOnlyListRef.current\n ? carouselOnlyListRef.current.scrollLeft <\n carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n : false,\n [carouselOnlyListRef],\n );\n\n const recalcChevrons = useCallback(() => {\n setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n }, [shouldShowLeft, shouldShowRight]);\n\n const getVisibleItemsOffset = useCallback(() => {\n if (tabsRefAsArray.current) {\n const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.clientWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n return scroll - 16;\n }\n return 0;\n }, [tabsRefAsArray, carouselOnlyListRef]);\n\n useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n getVisibleItemsOffset,\n recalcChevrons,\n updateIndicatorStyle,\n });\n\n return {\n showChevrons,\n leftButtonOnClick,\n rightButtonOnClick,\n handleOnClick,\n handleOnScroll,\n };\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,UAAU,kBAAkB;AAClD,OAAO,uBAAuB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AAe9B,MAAM,cAAc,CAAC,EAAE,qBAAqB,MAAiD;AAClG,QAAM,EAAE,oBAAoB,IAAI,WAAW,aAAa;AAExD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,IAAI,WAAW,aAAa;AAEnD,QAAM,iBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,yBAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,oBAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,qBAAqB;AAAA,IACpG;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": []
package/dist/esm/parts/carousel/useCarouselCallbacks.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
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.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\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
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": []
package/dist/esm/parts/tabBar/TabBar.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
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.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\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 isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\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 data-testid=\"tab-wrapper\" 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
5
  "mappings": "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",
6
6
  "names": ["React"]
package/dist/esm/parts/tabBar/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
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.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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
5
  "mappings": "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",
6
6
  "names": []
package/dist/esm/parts/tabBar/useTabBar.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useTabBar.tsx"],
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 '@elliemae/ds-utilities';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { defaultIndicatorStyles } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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(updateIndicatorStyle, tabsListRef.current);\n useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\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
5
  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB,UAAU,kBAAkB;AACnE,SAAS,yBAAyB;AAClC,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,sBAAsB,YAAY,OAAO;AAC3D,oBAAkB,sBAAsB,mBAAmB,OAAO;AAElE,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": []
package/dist/esm/parts/tabsContent/TabsContent.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
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 { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACyBjB,SACE,KADF;AAzBN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAE9B;AAAA,6BAAC,yBAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,8BAAC,UAAO;AAAA,UACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,UAC9C,qBAAqB,qBAAqB;AAAA,WAC7C;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
6
6
  "names": []
package/dist/esm/parts/tabsContent/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/styles.tsx"],
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
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;",
6
6
  "names": []
package/dist/esm/parts/tabsPanel/TabsPanels.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
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 { default as SwipeableViews } from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\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 {...tabPanelsProps}\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 hide={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={{\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n }}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n )\n );\n }),\n [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs, tabPanelsProps],\n );\n\n if (animated) {\n const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n return (\n <Comp\n {...(swipeableViewsContainerProps as any)}\n style={{\n overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n ...(swipeableViewsContainerProps?.style || {}),\n }}\n enableMouseEvents={enableMouseEvents}\n index={firstSlideToShow}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </Comp>\n );\n }\n\n return <>{panels}</>;\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACqGjB,SAeG,UAfH;AA5BM;AAxEZ,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,SAAS,WAAW,sBAAsB;AAC1C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,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,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,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;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG;AAAA,UACpB,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,MAAM,cAAc;AAAA,EAC5F;AAEA,MAAI,UAAU;AACZ,UAAM,OAAQ,gBAAwB,WAAW;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO,gCAAG,kBAAO;AACnB;",
6
6
  "names": ["React"]
package/dist/esm/parts/tabsPanel/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
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 hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ hide }) => (hide ? 'visibility: hidden; position: absolute;' : '')}\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAOhB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,KAAK,MAAO,OAAO,4CAA4C;AAAA;AAAA,IAElE,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB;AAAA;",
6
6
  "names": []
package/dist/esm/propTypes.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\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 tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional | keyof DefaultProps>,\n XstyledProps {}\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 ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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 TabBarExtraContent: PropTypes.func\n .description('Extra content next to the Tab Bar as a react component instead of JSX')\n .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 tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\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 tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\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 tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional>,\n XstyledProps {}\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 ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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 TabBarExtraContent: PropTypes.func\n .description('Extra content next to the Tab Bar as a react component instead of JSX')\n .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 tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\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 tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,UAAU,6BAA6B;AAKhD,MAAM,OAAO,MAAY;AAAC;AA2DnB,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,GAAG;AAAA,EACH,GAAG;AAAA,EACH,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,CAAC,CAAC;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,oBAAoB,UAAU,KAC3B,YAAY,uEAAuE,EACnF,aAAa,MAAS;AAAA,EACzB,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;AAAA,EACzB,gBAAgB,UAAU,MAAM,yBAAyB,EACtD,YAAY,8CAA8C,EAC1D,aAAa,CAAC,CAAC;AAAA,EAClB,8BAA8B,UAAU,OACrC,YAAY,oDAAoD,EAChE,aAAa,CAAC,CAAC;AACpB;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;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AACjC;",
6
6
  "names": []
7
7
  }
package/dist/esm/sharedTypes.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;",
6
6
  "names": []
package/dist/esm/utils/constants.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
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
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": []
package/dist/esm/utils/helpers.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from './constants.js';\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
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": []
package/dist/esm/utils/hooks/useKeyboardNavigation.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useKeyboardNavigation.tsx"],
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useKeyboardNavigation.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\n\ninterface UseKeyboardNavigationReturnTypeT {\n handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n const { focusableTabsRef } = useContext(DSTabsContext);\n const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n e.preventDefault();\n e.stopPropagation();\n const nextTab =\n focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n if (nextTab) nextTab.focus();\n if (!nextTab) return;\n }\n\n if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n e.preventDefault();\n e.stopPropagation();\n const prevTab =\n focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n if (prevTab) prevTab.focus();\n if (!prevTab) return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n }\n },\n [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n );\n\n return {\n handleOnKeyDown,\n };\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,eAAe,6BAA6B;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,iBAAiB,IAAI,WAAW,aAAa;AACrD,QAAM,EAAE,wBAAwB,mBAAmB,IAAI,WAAW,qBAAqB;AAEvF,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI,CAAC;AAClG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI,CAAC;AAClG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,iCAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,6BAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,gBAAgB;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
6
6
  "names": []
package/dist/esm/utils/hooks/useTabsCallbacks.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useTabsCallbacks.tsx"],
3
+ "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useTabsCallbacks.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseTabsCallbacksReturnTypeT {\n handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n const {\n setInternalActiveTab,\n tabsListRef,\n props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n } = useContext(DSTabsContext);\n\n const handleOnTabChange = useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTab({ e, listRef: tabsListRef });\n }\n },\n [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n );\n\n const handleOnMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const role = (e.target as HTMLElement).getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n },\n [allowTextSelection],\n );\n\n return {\n handleOnTabChange,\n handleOnMouseDown,\n };\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,IAAI,WAAW,aAAa;AAE5B,QAAM,oBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,kBAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc;AAAoB,UAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
package/dist/types/parts/tabBar/TabBar.d.ts CHANGED
@@ -1 +1,2 @@
1
+ /// <reference types="react" />
1
2
  export declare const TabBar: () => JSX.Element;
package/dist/types/parts/tabsContent/TabsContent.d.ts CHANGED
@@ -1 +1,2 @@
1
+ /// <reference types="react" />
1
2
  export declare const TabsContent: () => JSX.Element;
package/dist/types/parts/tabsPanel/TabsPanels.d.ts CHANGED
@@ -1 +1,2 @@
1
+ /// <reference types="react" />
1
2
  export declare const TabsPanels: () => JSX.Element;
package/dist/types/propTypes.d.ts CHANGED
@@ -46,7 +46,7 @@ export declare namespace DSTabsT {
46
46
  activeTab?: string;
47
47
  innerRef?: React.MutableRefObject<HTMLDivElement>;
48
48
  }
49
- interface Props extends Partial<DefaultProps>, PropsOptional, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional | keyof DefaultProps>, XstyledProps {
49
+ interface Props extends Partial<DefaultProps>, PropsOptional, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional>, XstyledProps {
50
50
  }
51
51
  interface InternalProps extends DefaultProps, PropsOptional {
52
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.22.0-next.25",
3
+ "version": "3.22.0-next.27",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -133,12 +133,12 @@
133
133
  "dependencies": {
134
134
  "@react-hook/resize-observer": "~1.2.6",
135
135
  "react-swipeable-views": "~0.14.0",
136
- "@elliemae/ds-icon": "3.22.0-next.25",
137
- "@elliemae/ds-button-v2": "3.22.0-next.25",
138
- "@elliemae/ds-props-helpers": "3.22.0-next.25",
139
- "@elliemae/ds-icons": "3.22.0-next.25",
140
- "@elliemae/ds-system": "3.22.0-next.25",
141
- "@elliemae/ds-utilities": "3.22.0-next.25"
136
+ "@elliemae/ds-button-v2": "3.22.0-next.27",
137
+ "@elliemae/ds-props-helpers": "3.22.0-next.27",
138
+ "@elliemae/ds-system": "3.22.0-next.27",
139
+ "@elliemae/ds-utilities": "3.22.0-next.27",
140
+ "@elliemae/ds-icon": "3.22.0-next.27",
141
+ "@elliemae/ds-icons": "3.22.0-next.27"
142
142
  },
143
143
  "devDependencies": {
144
144
  "@elliemae/pui-cli": "~9.0.0-next.22",
@@ -146,7 +146,7 @@
146
146
  "@testing-library/react": "~12.1.3",
147
147
  "@testing-library/user-event": "~13.5.0",
148
148
  "styled-components": "~5.3.9",
149
- "@elliemae/ds-monorepo-devops": "3.22.0-next.25"
149
+ "@elliemae/ds-monorepo-devops": "3.22.0-next.27"
150
150
  },
151
151
  "peerDependencies": {
152
152
  "lodash": "^4.17.21",
@@ -159,12 +159,12 @@
159
159
  "typeSafety": false
160
160
  },
161
161
  "scripts": {
162
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
162
+ "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
163
163
  "test": "pui-cli test --passWithNoTests",
164
- "lint": "node ../../scripts/lint.mjs",
165
- "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
166
- "dts": "node ../../scripts/dts.mjs",
167
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
164
+ "lint": "node ../../../scripts/lint.mjs",
165
+ "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
166
+ "dts": "node ../../../scripts/dts.mjs",
167
+ "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
168
168
  "dev:build": "pnpm --filter {.}... build",
169
169
  "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
170
170
  "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""