@elliemae/ds-tabs 1.61.12 → 1.61.13
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.
- package/cjs/Carousel.js.map +1 -1
- package/cjs/DSTab.js.map +1 -1
- package/cjs/DSTabs.js.map +1 -1
- package/cjs/PanelContainer.js.map +1 -1
- package/cjs/SubTabBar.js.map +1 -1
- package/cjs/TabBar.js.map +1 -1
- package/cjs/TabTypes.js.map +1 -1
- package/cjs/TabsImpl.js.map +1 -1
- package/cjs/TabsPanels.js.map +1 -1
- package/cjs/useResize.js.map +1 -1
- package/esm/Carousel.js.map +1 -1
- package/esm/DSTab.js.map +1 -1
- package/esm/DSTabs.js.map +1 -1
- package/esm/PanelContainer.js.map +1 -1
- package/esm/SubTabBar.js.map +1 -1
- package/esm/TabBar.js.map +1 -1
- package/esm/TabTypes.js.map +1 -1
- package/esm/TabsImpl.js.map +1 -1
- package/esm/TabsPanels.js.map +1 -1
- package/esm/useResize.js.map +1 -1
- package/package.json +5 -5
package/cjs/Carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport { useResize } from './useResize';\n\nconst CarouselBtn = styled(DSButton)`\n position: absolute;\n z-index: 1;\n margin: 0;\n\n &:focus {\n & span {\n background-color: ${(props) => props.theme.colors.brand[200]};\n background-size: 90%;\n border-radius: 2px;\n border-color: transparent;\n }\n }\n\n && {\n width: 16px;\n // offset needed for svg gap caused by resizing icons and to\n // avoid covering blue active underline\n height: calc(100% - 2px);\n\n @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {\n height: calc(100% - 4px);\n &:focus {\n & span {\n background-color: unset;\n }\n }\n }\n }\n ${(props) => (props.right ? 'right: 0;' : 'left: 0;')}\n\n && .em-ds-icon {\n height: 16px;\n width: 16px;\n }\n`;\n\nconst CarouselWrapper = styled.span`\n position: relative;\n padding: 0 16px;\n width: 100%;\n`;\n\nconst ChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow: hidden;\n`;\n\nfunction isVisibleElement(el, container) {\n const rect = el.getBoundingClientRect();\n const cRect = container.getBoundingClientRect();\n const elemLeft = rect.left + 3;\n const elemRight = rect.right - 3;\n\n // Only completely visible elements return true:\n const isVisible = elemLeft >= cRect.left && elemRight <= cRect.right;\n return isVisible;\n}\n\nconst Carousel = ({ children, onScroll }) => {\n const itemsRef = useRef([]);\n const wrapRef = useRef(null);\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n\n const shouldShowLeft = () =>\n children &&\n children[0] &&\n wrapRef.current &&\n itemsRef.current[0] &&\n !isVisibleElement(itemsRef.current[0], wrapRef.current);\n const shouldShowRight = () =>\n children &&\n children[children.length - 1] &&\n wrapRef.current &&\n itemsRef.current[children.length - 1] &&\n !isVisibleElement(itemsRef.current[children.length - 1], wrapRef.current);\n\n const [{ right, left, CHEVRON_FOCUS_FLAG }, setShow] = useState({\n right: false,\n left: false,\n CHEVRON_FOCUS_FLAG: false, // flag to replace lack of callback in useState hook\n });\n const recalcChevrons = () => setShow({ right: shouldShowRight(), left: shouldShowLeft() });\n\n useEffect(() => {\n recalcChevrons();\n }, []);\n\n useEffect(() => {\n if (CHEVRON_FOCUS_FLAG) {\n // focus opposite chevron when current one hides\n if (!left && right && rightRef.current) {\n rightRef.current.focus();\n } else if (!right && left && leftRef.current) {\n leftRef.current.focus();\n }\n setShow({ right, left, CHEVRON_FOCUS_FLAG: false });\n }\n }, [CHEVRON_FOCUS_FLAG]);\n\n useResize(wrapRef, recalcChevrons);\n\n const getVisibleItemsOffset = () =>\n itemsRef.current.reduce((acc, c) => {\n if (isVisibleElement(c, wrapRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.offsetWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n const rightClick = () => {\n wrapRef.current.scrollLeft += getVisibleItemsOffset();\n };\n\n const leftClick = () => {\n wrapRef.current.scrollLeft -= getVisibleItemsOffset();\n };\n\n const handleScroll = (e) => {\n // forces render when element.scrollTop is changed (out of react flow)\n setShow({\n right: shouldShowRight(),\n left: shouldShowLeft(),\n // to trigger focus logic at effect above\n CHEVRON_FOCUS_FLAG: true,\n });\n onScroll(e);\n };\n\n const handleClick = (e, onClick = () => {}) => {\n const tabListDomEl = wrapRef.current;\n const el = e.target;\n const rect = el.getBoundingClientRect();\n const cRect = tabListDomEl.getBoundingClientRect();\n\n if (!isVisibleElement(el, tabListDomEl)) {\n const containerWidth = cRect.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = rect.left - cRect.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = el.offsetWidth;\n\n // align to right\n if (positionInContainer > halfContainer) {\n wrapRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n // align left\n wrapRef.current.scrollLeft += positionInContainer;\n }\n recalcChevrons();\n }\n onClick(e);\n };\n\n return (\n <CarouselWrapper>\n {left && (\n <CarouselBtn\n data-testid=\"chevron-left\"\n buttonType=\"link\"\n innerRef={leftRef}\n size=\"s\"\n icon={<ChevronLeft size=\"s\" color={['brand-primary', '600']} />}\n onClick={leftClick}\n tabIndex={-1}\n />\n )}\n {right && (\n <CarouselBtn\n data-testid=\"chevron-right\"\n innerRef={rightRef}\n right\n size=\"s\"\n buttonType=\"link\"\n icon={<ChevronRight size=\"s\" color={['brand-primary', '600']} />}\n onClick={rightClick}\n tabIndex={-1}\n />\n )}\n <ChildrenWrap onScroll={handleScroll} ref={wrapRef}>\n {React.Children.map(children, (child, idx) =>\n React.cloneElement(child, {\n onClick: (e) => handleClick(e, child.props?.onClick),\n key: 'carousel'.concat(idx),\n ref: (el) => {\n itemsRef.current[idx] = el;\n // keep old refs\n if (typeof child.ref === 'function') {\n child.ref(el);\n }\n },\n }),\n )}\n </ChildrenWrap>\n </CarouselWrapper>\n );\n};\n\nCarousel.defaultProps = {\n onScroll: () => null,\n};\n\nCarousel.propTypes = {\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n onScroll: PropTypes.func,\n};\n\nexport default Carousel;\n"],"names":["CarouselBtn","styled","DSButton","props","theme","colors","brand","breakpoints","medium","right","CarouselWrapper","span","ChildrenWrap","div","isVisibleElement","el","container","rect","getBoundingClientRect","cRect","elemLeft","left","elemRight","isVisible","Carousel","children","onScroll","itemsRef","useRef","wrapRef","leftRef","rightRef","shouldShowLeft","current","shouldShowRight","length","useState","CHEVRON_FOCUS_FLAG","setShow","recalcChevrons","useEffect","focus","useResize","getVisibleItemsOffset","reduce","acc","c","styles","window","getComputedStyle","width","offsetWidth","margin","parseFloat","marginLeft","marginRight","rightClick","scrollLeft","leftClick","handleScroll","e","handleClick","onClick","tabListDomEl","target","containerWidth","halfContainer","elementScrollPosition","positionInContainer","React","ChevronLeft","ChevronRight","Children","map","child","idx","cloneElement","key","concat","ref","defaultProps","propTypes","PropTypes","arrayOf","element","isRequired","func"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport { useResize } from './useResize';\n\nconst CarouselBtn = styled(DSButton)`\n position: absolute;\n z-index: 1;\n margin: 0;\n\n &:focus {\n & span {\n background-color: ${(props) => props.theme.colors.brand[200]};\n background-size: 90%;\n border-radius: 2px;\n border-color: transparent;\n }\n }\n\n && {\n width: 16px;\n // offset needed for svg gap caused by resizing icons and to\n // avoid covering blue active underline\n height: calc(100% - 2px);\n\n @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {\n height: calc(100% - 4px);\n &:focus {\n & span {\n background-color: unset;\n }\n }\n }\n }\n ${(props) => (props.right ? 'right: 0;' : 'left: 0;')}\n\n && .em-ds-icon {\n height: 16px;\n width: 16px;\n }\n`;\n\nconst CarouselWrapper = styled.span`\n position: relative;\n padding: 0 16px;\n width: 100%;\n`;\n\nconst ChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow: hidden;\n`;\n\nfunction isVisibleElement(el, container) {\n const rect = el.getBoundingClientRect();\n const cRect = container.getBoundingClientRect();\n const elemLeft = rect.left + 3;\n const elemRight = rect.right - 3;\n\n // Only completely visible elements return true:\n const isVisible = elemLeft >= cRect.left && elemRight <= cRect.right;\n return isVisible;\n}\n\nconst Carousel = ({ children, onScroll }) => {\n const itemsRef = useRef([]);\n const wrapRef = useRef(null);\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n\n const shouldShowLeft = () =>\n children &&\n children[0] &&\n wrapRef.current &&\n itemsRef.current[0] &&\n !isVisibleElement(itemsRef.current[0], wrapRef.current);\n const shouldShowRight = () =>\n children &&\n children[children.length - 1] &&\n wrapRef.current &&\n itemsRef.current[children.length - 1] &&\n !isVisibleElement(itemsRef.current[children.length - 1], wrapRef.current);\n\n const [{ right, left, CHEVRON_FOCUS_FLAG }, setShow] = useState({\n right: false,\n left: false,\n CHEVRON_FOCUS_FLAG: false, // flag to replace lack of callback in useState hook\n });\n const recalcChevrons = () => setShow({ right: shouldShowRight(), left: shouldShowLeft() });\n\n useEffect(() => {\n recalcChevrons();\n }, []);\n\n useEffect(() => {\n if (CHEVRON_FOCUS_FLAG) {\n // focus opposite chevron when current one hides\n if (!left && right && rightRef.current) {\n rightRef.current.focus();\n } else if (!right && left && leftRef.current) {\n leftRef.current.focus();\n }\n setShow({ right, left, CHEVRON_FOCUS_FLAG: false });\n }\n }, [CHEVRON_FOCUS_FLAG]);\n\n useResize(wrapRef, recalcChevrons);\n\n const getVisibleItemsOffset = () =>\n itemsRef.current.reduce((acc, c) => {\n if (isVisibleElement(c, wrapRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.offsetWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n const rightClick = () => {\n wrapRef.current.scrollLeft += getVisibleItemsOffset();\n };\n\n const leftClick = () => {\n wrapRef.current.scrollLeft -= getVisibleItemsOffset();\n };\n\n const handleScroll = (e) => {\n // forces render when element.scrollTop is changed (out of react flow)\n setShow({\n right: shouldShowRight(),\n left: shouldShowLeft(),\n // to trigger focus logic at effect above\n CHEVRON_FOCUS_FLAG: true,\n });\n onScroll(e);\n };\n\n const handleClick = (e, onClick = () => {}) => {\n const tabListDomEl = wrapRef.current;\n const el = e.target;\n const rect = el.getBoundingClientRect();\n const cRect = tabListDomEl.getBoundingClientRect();\n\n if (!isVisibleElement(el, tabListDomEl)) {\n const containerWidth = cRect.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = rect.left - cRect.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = el.offsetWidth;\n\n // align to right\n if (positionInContainer > halfContainer) {\n wrapRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n // align left\n wrapRef.current.scrollLeft += positionInContainer;\n }\n recalcChevrons();\n }\n onClick(e);\n };\n\n return (\n <CarouselWrapper>\n {left && (\n <CarouselBtn\n data-testid=\"chevron-left\"\n buttonType=\"link\"\n innerRef={leftRef}\n size=\"s\"\n icon={<ChevronLeft size=\"s\" color={['brand-primary', '600']} />}\n onClick={leftClick}\n tabIndex={-1}\n />\n )}\n {right && (\n <CarouselBtn\n data-testid=\"chevron-right\"\n innerRef={rightRef}\n right\n size=\"s\"\n buttonType=\"link\"\n icon={<ChevronRight size=\"s\" color={['brand-primary', '600']} />}\n onClick={rightClick}\n tabIndex={-1}\n />\n )}\n <ChildrenWrap onScroll={handleScroll} ref={wrapRef}>\n {React.Children.map(children, (child, idx) =>\n React.cloneElement(child, {\n onClick: (e) => handleClick(e, child.props?.onClick),\n key: 'carousel'.concat(idx),\n ref: (el) => {\n itemsRef.current[idx] = el;\n // keep old refs\n if (typeof child.ref === 'function') {\n child.ref(el);\n }\n },\n }),\n )}\n </ChildrenWrap>\n </CarouselWrapper>\n );\n};\n\nCarousel.defaultProps = {\n onScroll: () => null,\n};\n\nCarousel.propTypes = {\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n onScroll: PropTypes.func,\n};\n\nexport default Carousel;\n"],"names":["CarouselBtn","styled","DSButton","props","theme","colors","brand","breakpoints","medium","right","CarouselWrapper","span","ChildrenWrap","div","isVisibleElement","el","container","rect","getBoundingClientRect","cRect","elemLeft","left","elemRight","isVisible","Carousel","children","onScroll","itemsRef","useRef","wrapRef","leftRef","rightRef","shouldShowLeft","current","shouldShowRight","length","useState","CHEVRON_FOCUS_FLAG","setShow","recalcChevrons","useEffect","focus","useResize","getVisibleItemsOffset","reduce","acc","c","styles","window","getComputedStyle","width","offsetWidth","margin","parseFloat","marginLeft","marginRight","rightClick","scrollLeft","leftClick","handleScroll","e","handleClick","onClick","tabListDomEl","target","containerWidth","halfContainer","elementScrollPosition","positionInContainer","React","ChevronLeft","ChevronRight","Children","map","child","idx","cloneElement","key","concat","ref","defaultProps","propTypes","PropTypes","arrayOf","element","isRequired","func"],"mappings":"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"}
|
package/cjs/DSTab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSTab.js","sources":["../../src/DSTab.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\n\n// This component is for create a specific api for Tabs children\nconst DSTab = ({ tabId = '', title = '', required = false }) => (\n <div\n aria-labelledby={`${tabId}-label`}\n tabId={tabId}\n title={title}\n required={required}\n />\n);\n\nDSTab.displayName = 'DSTab';\nconst props = {\n /** unique id for tab */\n tabId: PropTypes.string.description('unique id for tab'),\n /** tab title */\n title: PropTypes.string.description('tab title'),\n /** Show a required mark next to the title */\n required: PropTypes.bool.description(\n 'Show a required mark next to the title',\n ),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n};\nDSTab.propTypes = props;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = props;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],"names":["DSTab","tabId","title","required","React","displayName","props","PropTypes","string","description","bool","isDSMobile","propTypes","DSTabWithSchema","describe"],"mappings":";;;;;;;;;;;AAAA;;IAKMA,KAAK,GAAG,SAARA,KAAQ;
|
|
1
|
+
{"version":3,"file":"DSTab.js","sources":["../../src/DSTab.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\n\n// This component is for create a specific api for Tabs children\nconst DSTab = ({ tabId = '', title = '', required = false }) => (\n <div\n aria-labelledby={`${tabId}-label`}\n tabId={tabId}\n title={title}\n required={required}\n />\n);\n\nDSTab.displayName = 'DSTab';\nconst props = {\n /** unique id for tab */\n tabId: PropTypes.string.description('unique id for tab'),\n /** tab title */\n title: PropTypes.string.description('tab title'),\n /** Show a required mark next to the title */\n required: PropTypes.bool.description(\n 'Show a required mark next to the title',\n ),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n};\nDSTab.propTypes = props;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = props;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],"names":["DSTab","tabId","title","required","React","displayName","props","PropTypes","string","description","bool","isDSMobile","propTypes","DSTabWithSchema","describe"],"mappings":";;;;;;;;;;;AAAA;;IAKMA,KAAK,GAAG,SAARA,KAAQ;EAAA,sBAAGC,KAAH;MAAGA,KAAH,2BAAW,EAAX;wBAAeC,KAAf;MAAeA,KAAf,2BAAuB,EAAvB;2BAA2BC,QAA3B;MAA2BA,QAA3B,8BAAsC,KAAtC;EAAA,oBACZC;IACE,6BAAoBH,KAApB,WADF;IAEE,KAAK,EAAEA,KAFT;IAGE,KAAK,EAAEC,KAHT;IAIE,QAAQ,EAAEC;IALA;AAAA;;AASdH,KAAK,CAACK,WAAN,GAAoB,OAApB;AACA,IAAMC,KAAK,GAAG;;EAEZL,KAAK,EAAEM,mBAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,mBAA7B,CAFK;;;EAIZP,KAAK,EAAEK,mBAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,WAA7B,CAJK;;;EAMZN,QAAQ,EAAEI,mBAAS,CAACG,IAAV,CAAeD,WAAf,CACR,wCADQ,CANE;;;EAUZE,UAAU,EAAEJ,mBAAS,CAACG,IAAV,CAAeD,WAAf,CACV,iDADU;AAVA,CAAd;AAcAT,KAAK,CAACY,SAAN,GAAkBN,KAAlB;IACMO,eAAe,GAAGC,kBAAQ,CAACd,KAAD;AAChCa,eAAe,CAACD,SAAhB,GAA4BN,KAA5B;;;;;;"}
|
package/cjs/DSTabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSTabs.js","sources":["../../src/DSTabs.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { TabTypes } from './TabTypes';\nimport TabsImpl from './TabsImpl';\nimport DSTab from './DSTab';\n\nconst DSTabs = ({\n containerProps = {},\n innerRef,\n animated = true,\n enableMouseEvents = false,\n allowTextSelection = false,\n onTabChange = () => null,\n tabsListAriaLabel = 'Tab list',\n type = TabTypes.NORMAL,\n tabBarExtraContent = undefined,\n children: tabs,\n onlyRenderActiveTab = false,\n activeTab,\n withCarousel = false,\n firstSubtabRef,\n lastTabRef,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile = false,\n}) => (\n <TabsImpl\n activeTab={activeTab}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRef}\n allowTextSelection={allowTextSelection}\n animated={animated}\n containerProps={containerProps}\n enableMouseEvents={enableMouseEvents}\n innerRef={innerRef}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={onTabChange}\n tabBarExtraContent={tabBarExtraContent}\n tabsListAriaLabel={tabsListAriaLabel}\n type={type}\n withCarousel={withCarousel}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n isDSMobile={isDSMobile}\n >\n {tabs}\n </TabsImpl>\n);\n\nconst props = {\n /** Whether the tab transition should animate or not */\n animated: PropTypes.bool.description(\n 'Whether the tab transition should animate or not',\n ),\n /** Enables tab transition with mouse drag events */\n enableMouseEvents: PropTypes.bool.description(\n 'Enables tab transition with mouse drag events',\n ),\n /** Allow text selection when mouse drag events are active */\n allowTextSelection: PropTypes.bool.description(\n 'Allow text selection when mouse drag events are active',\n ),\n /** Handler when a user clicks on a different tab */\n onTabChange: PropTypes.func.description(\n 'Handler when a user clicks on a different tab',\n ),\n /** Tab type */\n type: PropTypes.oneOf(['normal', 'subtabs']).description('Tab type'),\n /** Extra content next to the tabs pills */\n tabBarExtraContent: PropTypes.element.description(\n 'Extra content next to the tabs pills',\n ),\n /** Only renders the active tab in the DOM */\n onlyRenderActiveTab: PropTypes.bool.description(\n 'Only renders the active tab in the DOM',\n ),\n /** Mobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool.description(\n 'Mobile only flexible tabs mode',\n ),\n /** Mobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool.description('Mobile only fixed tabs mode'),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n /** Activate carousel behavior */\n withCarousel: PropTypes.bool.description('Activate carousel behavior'),\n /** The active tabId */\n activeTab: PropTypes.string.description('The active tabId'),\n /** tabs children */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.instanceOf([\n PropTypes.instanceOf(DSTab),\n PropTypes.array,\n ]),\n }),\n ).isRequired.description('tabs children'),\n /** Aria label for the list */\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list'),\n /** Additional properties for the container */\n containerProps: PropTypes.object.description(\n 'Additional properties for the container',\n ),\n /** REF */\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('REF'),\n /** internal ref to handle keyboard a11y behavior */\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n /** internal ref to handle keyboard a11y behavior */\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n};\n\nDSTabs.propTypes = props;\nconst DSTabsWithSchema = describe(DSTabs);\nDSTabsWithSchema.propTypes = props;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],"names":["DSTabs","containerProps","innerRef","animated","enableMouseEvents","allowTextSelection","onTabChange","tabsListAriaLabel","type","TabTypes","NORMAL","tabBarExtraContent","undefined","tabs","children","onlyRenderActiveTab","activeTab","withCarousel","firstSubtabRef","lastTabRef","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","React","props","PropTypes","bool","description","func","oneOf","element","string","arrayOf","shape","instanceOf","DSTab","array","isRequired","object","oneOfType","current","any","propTypes","DSTabsWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;IAOMA,MAAM,GAAG,SAATA,MAAS;
|
|
1
|
+
{"version":3,"file":"DSTabs.js","sources":["../../src/DSTabs.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { TabTypes } from './TabTypes';\nimport TabsImpl from './TabsImpl';\nimport DSTab from './DSTab';\n\nconst DSTabs = ({\n containerProps = {},\n innerRef,\n animated = true,\n enableMouseEvents = false,\n allowTextSelection = false,\n onTabChange = () => null,\n tabsListAriaLabel = 'Tab list',\n type = TabTypes.NORMAL,\n tabBarExtraContent = undefined,\n children: tabs,\n onlyRenderActiveTab = false,\n activeTab,\n withCarousel = false,\n firstSubtabRef,\n lastTabRef,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile = false,\n}) => (\n <TabsImpl\n activeTab={activeTab}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRef}\n allowTextSelection={allowTextSelection}\n animated={animated}\n containerProps={containerProps}\n enableMouseEvents={enableMouseEvents}\n innerRef={innerRef}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={onTabChange}\n tabBarExtraContent={tabBarExtraContent}\n tabsListAriaLabel={tabsListAriaLabel}\n type={type}\n withCarousel={withCarousel}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n isDSMobile={isDSMobile}\n >\n {tabs}\n </TabsImpl>\n);\n\nconst props = {\n /** Whether the tab transition should animate or not */\n animated: PropTypes.bool.description(\n 'Whether the tab transition should animate or not',\n ),\n /** Enables tab transition with mouse drag events */\n enableMouseEvents: PropTypes.bool.description(\n 'Enables tab transition with mouse drag events',\n ),\n /** Allow text selection when mouse drag events are active */\n allowTextSelection: PropTypes.bool.description(\n 'Allow text selection when mouse drag events are active',\n ),\n /** Handler when a user clicks on a different tab */\n onTabChange: PropTypes.func.description(\n 'Handler when a user clicks on a different tab',\n ),\n /** Tab type */\n type: PropTypes.oneOf(['normal', 'subtabs']).description('Tab type'),\n /** Extra content next to the tabs pills */\n tabBarExtraContent: PropTypes.element.description(\n 'Extra content next to the tabs pills',\n ),\n /** Only renders the active tab in the DOM */\n onlyRenderActiveTab: PropTypes.bool.description(\n 'Only renders the active tab in the DOM',\n ),\n /** Mobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool.description(\n 'Mobile only flexible tabs mode',\n ),\n /** Mobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool.description('Mobile only fixed tabs mode'),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n /** Activate carousel behavior */\n withCarousel: PropTypes.bool.description('Activate carousel behavior'),\n /** The active tabId */\n activeTab: PropTypes.string.description('The active tabId'),\n /** tabs children */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.instanceOf([\n PropTypes.instanceOf(DSTab),\n PropTypes.array,\n ]),\n }),\n ).isRequired.description('tabs children'),\n /** Aria label for the list */\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list'),\n /** Additional properties for the container */\n containerProps: PropTypes.object.description(\n 'Additional properties for the container',\n ),\n /** REF */\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('REF'),\n /** internal ref to handle keyboard a11y behavior */\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n /** internal ref to handle keyboard a11y behavior */\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n};\n\nDSTabs.propTypes = props;\nconst DSTabsWithSchema = describe(DSTabs);\nDSTabsWithSchema.propTypes = props;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],"names":["DSTabs","containerProps","innerRef","animated","enableMouseEvents","allowTextSelection","onTabChange","tabsListAriaLabel","type","TabTypes","NORMAL","tabBarExtraContent","undefined","tabs","children","onlyRenderActiveTab","activeTab","withCarousel","firstSubtabRef","lastTabRef","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","React","props","PropTypes","bool","description","func","oneOf","element","string","arrayOf","shape","instanceOf","DSTab","array","isRequired","object","oneOfType","current","any","propTypes","DSTabsWithSchema","describe"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelContainer.js","sources":["../../src/PanelContainer.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nconst blockName = 'tabs-panels';\n\nconst PC = aggregatedClasses('div')(blockName, 'panel');\n\nconst PanelContainer = ({ children, lastTabRef, firstSubtabRef, ...rest }) => {\n // inject ref to handle focus on first subtab child\n const child = React.Children.map(children, (c, i) =>\n i === 0 && c ? React.cloneElement(c, { firstSubtabRef, lastTabRef }) : c,\n );\n return <PC {...rest}>{child}</PC>;\n};\n\nPanelContainer.propTypes = {\n children: PropTypes.any,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default PanelContainer;\n"],"names":["blockName","PC","aggregatedClasses","PanelContainer","children","lastTabRef","firstSubtabRef","rest","child","React","Children","map","c","i","cloneElement","propTypes","PropTypes","any","oneOfType","func","shape","current"],"mappings":";;;;;;;;;;;;;;AAGA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,EAAE,GAAGC,8BAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,EAAoC,OAApC,CAAX;;IAEMG,cAAc,GAAG,SAAjBA,cAAiB,OAAuD;
|
|
1
|
+
{"version":3,"file":"PanelContainer.js","sources":["../../src/PanelContainer.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nconst blockName = 'tabs-panels';\n\nconst PC = aggregatedClasses('div')(blockName, 'panel');\n\nconst PanelContainer = ({ children, lastTabRef, firstSubtabRef, ...rest }) => {\n // inject ref to handle focus on first subtab child\n const child = React.Children.map(children, (c, i) =>\n i === 0 && c ? React.cloneElement(c, { firstSubtabRef, lastTabRef }) : c,\n );\n return <PC {...rest}>{child}</PC>;\n};\n\nPanelContainer.propTypes = {\n children: PropTypes.any,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default PanelContainer;\n"],"names":["blockName","PC","aggregatedClasses","PanelContainer","children","lastTabRef","firstSubtabRef","rest","child","React","Children","map","c","i","cloneElement","propTypes","PropTypes","any","oneOfType","func","shape","current"],"mappings":";;;;;;;;;;;;;;AAGA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,EAAE,GAAGC,8BAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,EAAoC,OAApC,CAAX;;IAEMG,cAAc,GAAG,SAAjBA,cAAiB,OAAuD;EAAA,IAApDC,QAAoD,QAApDA,QAAoD;MAA1CC,UAA0C,QAA1CA,UAA0C;MAA9BC,cAA8B,QAA9BA,cAA8B;MAAXC,IAAW;;;EAE5E,IAAMC,KAAK,GAAGC,yBAAK,CAACC,QAAN,CAAeC,GAAf,CAAmBP,QAAnB,EAA6B,UAACQ,CAAD,EAAIC,CAAJ;IAAA,OACzCA,CAAC,KAAK,CAAN,IAAWD,CAAX,gBAAeH,yBAAK,CAACK,YAAN,CAAmBF,CAAnB,EAAsB;MAAEN,cAAc,EAAdA,cAAF;MAAkBD,UAAU,EAAVA;KAAxC,CAAf,GAAuEO,CAD9B;GAA7B,CAAd;EAGA,oBAAOH,wCAAC,EAAD,EAAQF,IAAR,EAAeC,KAAf,CAAP;AACD;;AAEDL,cAAc,CAACY,SAAf,GAA2B;EACzBX,QAAQ,EAAEY,6BAAS,CAACC,GADK;EAEzBX,cAAc,EAAEU,6BAAS,CAACE,SAAV,CAAoB,CAClCF,6BAAS,CAACG,IADwB,EAElCH,6BAAS,CAACI,KAAV,CAAgB;IAAEC,OAAO,EAAEL,6BAAS,CAACC;GAArC,CAFkC,CAApB,CAFS;EAMzBZ,UAAU,EAAEW,6BAAS,CAACE,SAAV,CAAoB,CAC9BF,6BAAS,CAACG,IADoB,EAE9BH,6BAAS,CAACI,KAAV,CAAgB;IAAEC,OAAO,EAAEL,6BAAS,CAACC;GAArC,CAF8B,CAApB;AANa,CAA3B;;;;"}
|
package/cjs/SubTabBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubTabBar.js","sources":["../../src/SubTabBar.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabBar from './TabBar';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\n\nconst SubTabList = aggregatedClasses('div')(\n blockName,\n 'subtabs-list',\n ({ withCarousel }) => ({ carousel: withCarousel }),\n);\n\nconst SubTabBar = ({\n withCarousel,\n tabs = [],\n activeTab = '',\n onTabClick = () => null,\n firstSubtabRef,\n handleUpArrow,\n}) => (\n <TabBar\n activeTab={activeTab}\n onTabClick={onTabClick}\n handleUpArrow={handleUpArrow}\n firstSubtabRef={firstSubtabRef}\n renderCustomTabBar={({ tabsComponents, innerRef }) => (\n <SubTabList\n withCarousel={withCarousel}\n innerRef={innerRef}\n data-testid=\"subtabs-list\"\n >\n {withCarousel ? <Carousel>{tabsComponents}</Carousel> : tabsComponents}\n </SubTabList>\n )}\n showSelectionIndicator={false}\n showSeparator\n tabs={tabs}\n />\n);\n\nSubTabBar.propTypes = {\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n activeTab: PropTypes.string,\n onTabClick: PropTypes.func.isRequired,\n withCarousel: PropTypes.bool,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default SubTabBar;\n"],"names":["blockName","SubTabList","aggregatedClasses","withCarousel","carousel","SubTabBar","tabs","activeTab","onTabClick","firstSubtabRef","handleUpArrow","React","tabsComponents","innerRef","propTypes","PropTypes","arrayOf","element","isRequired","string","func","bool","oneOfType","shape","current","any"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,cAAlB;AAEA,IAAMC,UAAU,GAAGC,8BAAiB,CAAC,KAAD,CAAjB,CACjBF,SADiB,EAEjB,cAFiB,EAGjB;
|
|
1
|
+
{"version":3,"file":"SubTabBar.js","sources":["../../src/SubTabBar.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabBar from './TabBar';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\n\nconst SubTabList = aggregatedClasses('div')(\n blockName,\n 'subtabs-list',\n ({ withCarousel }) => ({ carousel: withCarousel }),\n);\n\nconst SubTabBar = ({\n withCarousel,\n tabs = [],\n activeTab = '',\n onTabClick = () => null,\n firstSubtabRef,\n handleUpArrow,\n}) => (\n <TabBar\n activeTab={activeTab}\n onTabClick={onTabClick}\n handleUpArrow={handleUpArrow}\n firstSubtabRef={firstSubtabRef}\n renderCustomTabBar={({ tabsComponents, innerRef }) => (\n <SubTabList\n withCarousel={withCarousel}\n innerRef={innerRef}\n data-testid=\"subtabs-list\"\n >\n {withCarousel ? <Carousel>{tabsComponents}</Carousel> : tabsComponents}\n </SubTabList>\n )}\n showSelectionIndicator={false}\n showSeparator\n tabs={tabs}\n />\n);\n\nSubTabBar.propTypes = {\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n activeTab: PropTypes.string,\n onTabClick: PropTypes.func.isRequired,\n withCarousel: PropTypes.bool,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default SubTabBar;\n"],"names":["blockName","SubTabList","aggregatedClasses","withCarousel","carousel","SubTabBar","tabs","activeTab","onTabClick","firstSubtabRef","handleUpArrow","React","tabsComponents","innerRef","propTypes","PropTypes","arrayOf","element","isRequired","string","func","bool","oneOfType","shape","current","any"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,cAAlB;AAEA,IAAMC,UAAU,GAAGC,8BAAiB,CAAC,KAAD,CAAjB,CACjBF,SADiB,EAEjB,cAFiB,EAGjB;EAAA,IAAGG,YAAH,QAAGA,YAAH;EAAA,OAAuB;IAAEC,QAAQ,EAAED;GAAnC;AAAA,CAHiB,CAAnB;;IAMME,SAAS,GAAG,SAAZA,SAAY;EAAA,IAChBF,YADgB,SAChBA,YADgB;yBAEhBG,IAFgB;MAEhBA,IAFgB,2BAET,EAFS;8BAGhBC,SAHgB;MAGhBA,SAHgB,gCAGJ,EAHI;+BAIhBC,UAJgB;MAIhBA,UAJgB,iCAIH;IAAA,OAAM,IAAN;GAJG;MAKhBC,cALgB,SAKhBA,cALgB;MAMhBC,aANgB,SAMhBA,aANgB;EAAA,oBAQhBC,wCAAC,MAAD;IACE,SAAS,EAAEJ,SADb;IAEE,UAAU,EAAEC,UAFd;IAGE,aAAa,EAAEE,aAHjB;IAIE,cAAc,EAAED,cAJlB;IAKE,kBAAkB,EAAE;MAAA,IAAGG,cAAH,SAAGA,cAAH;UAAmBC,QAAnB,SAAmBA,QAAnB;MAAA,oBAClBF,wCAAC,UAAD;QACE,YAAY,EAAER,YADhB;QAEE,QAAQ,EAAEU,QAFZ;QAGE,eAAY;SAEXV,YAAY,gBAAGQ,wCAAC,QAAD,QAAWC,cAAX,CAAH,GAA2CA,cAL1D,CADkB;KALtB;IAcE,sBAAsB,EAAE,KAd1B;IAeE,aAAa,MAff;IAgBE,IAAI,EAAEN;IAxBQ;AAAA;;AA4BlBD,SAAS,CAACS,SAAV,GAAsB;EACpBR,IAAI,EAAES,6BAAS,CAACC,OAAV,CAAkBD,6BAAS,CAACE,OAA5B,EAAqCC,UADvB;EAEpBX,SAAS,EAAEQ,6BAAS,CAACI,MAFD;EAGpBX,UAAU,EAAEO,6BAAS,CAACK,IAAV,CAAeF,UAHP;EAIpBf,YAAY,EAAEY,6BAAS,CAACM,IAJJ;EAKpBX,aAAa,EAAEK,6BAAS,CAACK,IALL;EAMpBX,cAAc,EAAEM,6BAAS,CAACO,SAAV,CAAoB,CAClCP,6BAAS,CAACK,IADwB,EAElCL,6BAAS,CAACQ,KAAV,CAAgB;IAAEC,OAAO,EAAET,6BAAS,CAACU;GAArC,CAFkC,CAApB;AANI,CAAtB;;;;"}
|
package/cjs/TabBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.js","sources":["../../src/TabBar.tsx"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { debounce } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport RequiredMark from '@elliemae/ds-form/RequiredMark';\nimport memoizeOne from 'memoize-one';\nimport { ResizeObserver } from 'resize-observer';\nimport styled from 'styled-components';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\nconst gradientWidth = 24;\n\nconst StyledTabWrapper = styled.div`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ flexibleTabsHeaders }) => (flexibleTabsHeaders ? '' : 'overflow-x: hidden')};\n`;\n\nconst StyledTabList = aggregatedClasses('div')(\n blockName,\n 'list',\n ({ withCarousel, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, withLeftGradients, withRightGradients }) => ({\n carousel: withCarousel,\n 'flexible-table-headers': isDSMobile && flexibleTabsHeaders,\n 'fixed-table-headers': isDSMobile && fixedTabsHeaders,\n 'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,\n 'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients,\n }),\n {\n propsToRemoveFromFinalElement: [\n 'withCarousel',\n 'flexibleTabsHeaders',\n 'fixedTabsHeaders',\n 'withLeftGradients',\n 'withRightGradients',\n 'isDSMobile',\n ],\n },\n);\nconst TabContainer = aggregatedClasses('button', {\n role: 'tab',\n})(blockName, 'tab', ({ isActive, showSeparator, disabled }) => ({\n active: isActive,\n separator: showSeparator,\n disabled,\n}));\nconst SelectionIndicator = aggregatedClasses('div')(blockName, 'selection-indicator');\n\nclass TabBar extends Component {\n constructor(props) {\n super(props);\n this.tabListRef = React.createRef();\n this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());\n this.state = {\n indicatorStyle: null,\n withLeftGradients: false,\n withRightGradients: false,\n };\n this.setIndicatorStyle = this.setIndicatorStyle.bind(this);\n this.getIndicatorStyles = this.getIndicatorStyles.bind(this);\n this.handleGradients = this.handleGradients.bind(this);\n this.handleTabsHeadersHorizontalScroll = this.handleTabsHeadersHorizontalScroll.bind(this);\n this.tabsRef = {};\n }\n\n componentDidMount() {\n const { showSelectionIndicator } = this.props;\n this.resizeObserver.observe(this.tabListRef.current);\n if (showSelectionIndicator) {\n this.setIndicatorStyle();\n }\n\n window.addEventListener('resize', this.handleGradients);\n window.addEventListener('orientationchange', this.handleGradients);\n this.handleGradients();\n }\n\n componentDidUpdate(prevProps) {\n const { activeTab, showSelectionIndicator } = this.props;\n\n if (showSelectionIndicator && prevProps.activeTab !== activeTab) {\n this.setIndicatorStyle(activeTab);\n }\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.tabListRef.current);\n window.removeEventListener('resize', this.handleGradients);\n window.removeEventListener('orientationchange', this.handleGradients);\n }\n\n handleGradients() {\n const { scrollLeft, scrollWidth, clientWidth } = this.tabListRef.current;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n this.setState({ withLeftGradients, withRightGradients });\n }\n\n shouldHaveLeftGradient(scrollLeft, gWidth) {\n return Math.abs(scrollLeft) > gWidth;\n }\n\n // eslint-disable-next-line max-params\n shouldHaveRightGradient(scrollLeft, gWidth, clientWidth, scrollWidth) {\n return Math.abs(scrollLeft) <= scrollWidth - (clientWidth + gWidth);\n }\n\n setIndicatorStyle() {\n const { activeTab } = this.props;\n setTimeout(\n () =>\n this.setState({\n indicatorStyle: this.getIndicatorStyles(activeTab),\n }),\n 100,\n );\n }\n\n getActiveTabElement(activeTab) {\n const tabListEl = this.tabListRef.current;\n\n const tabSelector = `[data-tab-id=\"${activeTab}\"]`;\n\n return tabListEl && tabListEl.querySelector(tabSelector);\n }\n\n isElementVisible(el, holder) {\n const { left, right, width } = el.getBoundingClientRect();\n const holderRect = holder.getBoundingClientRect();\n\n return left <= holderRect.left ? holderRect.left - left <= width : right - holderRect.right <= width;\n }\n\n getVisibleDimensions(node, referenceNode) {\n const pos = node.getBoundingClientRect();\n const referencePos = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referencePos.left + referenceNode.clientWidth - pos.left,\n node.clientWidth - (referencePos.left - pos.left),\n ),\n height: Math.min(\n node.clientHeight,\n referencePos.top + referenceNode.clientHeight - pos.top,\n node.clientHeight - (referencePos.top - pos.top),\n ),\n };\n }\n\n getIndicatorStyles(activeTab) {\n const tabListEl = this.tabListRef.current;\n const { withCarousel } = this.props;\n const activeTabEl = this.getActiveTabElement(activeTab);\n\n if (!activeTabEl || !this.isElementVisible(activeTabEl, tabListEl)) return null;\n\n const { clientHeight, clientWidth, offsetTop, offsetLeft } = activeTabEl;\n const { left } = activeTabEl.getBoundingClientRect();\n const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;\n const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width + 2 : clientWidth + 2;\n return {\n height: clientHeight,\n left: `${Math.floor(leftOff)}px`, // using left and top for ie compatibility\n top: `${Math.floor(offsetTop)}px`,\n width,\n };\n }\n\n handleTabClick = (tabId, e) => {\n const { tabListRef, props } = this;\n const { onTabClick, flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const el = e.target;\n const { offsetLeft } = el;\n const { width: elWidth } = el.getBoundingClientRect();\n const { width: listWidth } = tabListDomEl.getBoundingClientRect();\n const extraSideSpace = listWidth - elWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n tabListDomEl.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n }\n e.preventDefault();\n onTabClick(tabId);\n };\n\n handleKeyPress = (tabId, e, index) => {\n const {\n tabs,\n handleDownArrow,\n handleUpArrow,\n // onTabClick,\n } = this.props;\n if (e.keyCode === 39) {\n const nextTab = tabs[index + 1];\n if (!nextTab && handleDownArrow) handleDownArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index + 1]?.focus();\n }\n if (e.keyCode === 37) {\n const nextTab = tabs[index - 1];\n if (!nextTab && handleUpArrow) handleUpArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index - 1]?.focus();\n }\n\n if (e.keyCode === 40 && handleDownArrow) {\n handleDownArrow(e);\n }\n\n if (e.keyCode === 38 && handleUpArrow) {\n handleUpArrow(e);\n }\n };\n\n handleTabsHeadersHorizontalScroll = debounce(() => {\n const { tabListRef, props } = this;\n const { flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const { scrollLeft, scrollWidth, clientWidth } = tabListDomEl;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n\n this.setState({\n withLeftGradients,\n withRightGradients,\n });\n }\n }, 50);\n\n renderTabs = memoizeOne((activeTab, tabs) => {\n const { showSeparator } = this.props;\n return React.Children.map(\n tabs,\n (tab, index) => {\n const { tabId, title, style, required, disabled } = tab.props;\n const isActive = activeTab === tabId;\n return [\n <TabContainer\n key={tabId}\n // eslint-disable-next-line no-return-assign\n ref={(t) => {\n this.tabsRef[index] = t;\n if (index === 0 && this.props.firstSubtabRef) {\n this.props.firstSubtabRef.current = t;\n }\n if (index === tabs.length - 1 && this.props.lastTabRef) {\n this.props.lastTabRef.current = t;\n }\n }}\n aria-controls={tabId}\n aria-selected={isActive}\n aria-disabled={!!disabled}\n classProps={{ isActive, showSeparator, disabled }}\n data-tab-id={tabId}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) this.handleTabClick(tabId, e, index);\n }}\n onKeyDown={(e) => {\n if (!disabled) this.handleKeyPress(tabId, e, index);\n }}\n style={style}\n tabIndex={0}\n >\n {title}\n <RequiredMark required={required} />\n </TabContainer>,\n ];\n },\n null,\n );\n });\n\n render() {\n const { id, tabs, activeTab, renderCustomTabBar, withCarousel, isDSMobile, flexibleTabsHeaders, fixedTabsHeaders } =\n this.props;\n const { indicatorStyle, withLeftGradients, withRightGradients } = this.state;\n\n if (renderCustomTabBar) {\n return renderCustomTabBar({\n innerRef: this.tabListRef,\n withCarousel,\n tabsComponents: this.renderTabs(activeTab, tabs),\n });\n }\n\n const shouldUseCarousel = !isDSMobile && withCarousel;\n\n return (\n <>\n <StyledTabList\n withCarousel={withCarousel}\n aria-label={id}\n innerRef={this.tabListRef}\n role=\"tablist\"\n data-testid=\"tab-list\"\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n withLeftGradients={withLeftGradients}\n withRightGradients={withRightGradients}\n fixedTabsHeaders={fixedTabsHeaders}\n onScroll={this.handleTabsHeadersHorizontalScroll}\n style={{ width: '100%' }}\n >\n <StyledTabWrapper\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n >\n {shouldUseCarousel ? (\n <Carousel onScroll={this.setIndicatorStyle}>{this.renderTabs(activeTab, tabs)}</Carousel>\n ) : null}\n {!shouldUseCarousel ? this.renderTabs(activeTab, tabs) : null}\n <SelectionIndicator style={indicatorStyle} />\n </StyledTabWrapper>\n </StyledTabList>\n </>\n );\n }\n}\n\nTabBar.defaultProps = {\n showSelectionIndicator: true,\n showSeparator: false,\n isDSMobile: false,\n};\n\nTabBar.propTypes = {\n /** Separator between tabs */\n showSeparator: PropTypes.bool,\n /** Blue border under selected tab */\n showSelectionIndicator: PropTypes.bool,\n /** Tab list id */\n id: PropTypes.string,\n /** Array of tabs */\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Renders a custom tabbar */\n renderCustomTabBar: PropTypes.func,\n /** tabId of active tab */\n activeTab: PropTypes.string,\n /** on tab click callback */\n onTabClick: PropTypes.func,\n /** carousel behavior */\n withCarousel: PropTypes.bool,\n handleDownArrow: PropTypes.func,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n lastTabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n /** Whether we are in mobile mode or not */\n};\n\nexport default TabBar;\n"],"names":["blockName","gradientWidth","StyledTabWrapper","styled","div","flexibleTabsHeaders","StyledTabList","aggregatedClasses","withCarousel","fixedTabsHeaders","isDSMobile","withLeftGradients","withRightGradients","carousel","propsToRemoveFromFinalElement","TabContainer","role","isActive","showSeparator","disabled","active","separator","SelectionIndicator","TabBar","props","handleTabClick","tabId","e","tabListRef","onTabClick","tabListDomEl","current","el","target","offsetLeft","getBoundingClientRect","elWidth","width","listWidth","extraSideSpace","leftOffsetToCenter","centeredLeftOffset","scrollTo","top","left","behavior","preventDefault","handleKeyPress","index","tabs","handleDownArrow","handleUpArrow","keyCode","nextTab","tabsRef","focus","handleTabsHeadersHorizontalScroll","debounce","scrollLeft","scrollWidth","clientWidth","shouldHaveLeftGradient","shouldHaveRightGradient","setState","renderTabs","memoizeOne","activeTab","React","Children","map","tab","title","style","required","t","firstSubtabRef","length","lastTabRef","RequiredMark","createRef","resizeObserver","ResizeObserver","setIndicatorStyle","state","indicatorStyle","bind","getIndicatorStyles","handleGradients","showSelectionIndicator","observe","window","addEventListener","prevProps","unobserve","removeEventListener","gWidth","Math","abs","setTimeout","tabListEl","tabSelector","querySelector","holder","right","holderRect","node","referenceNode","pos","referencePos","min","height","clientHeight","activeTabEl","getActiveTabElement","isElementVisible","offsetTop","leftOff","max","getVisibleDimensions","floor","id","renderCustomTabBar","innerRef","tabsComponents","shouldUseCarousel","Component","defaultProps","propTypes","PropTypes","bool","string","arrayOf","element","isRequired","func","oneOfType","shape","any"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabBar.js","sources":["../../src/TabBar.tsx"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { debounce } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport RequiredMark from '@elliemae/ds-form/RequiredMark';\nimport memoizeOne from 'memoize-one';\nimport { ResizeObserver } from 'resize-observer';\nimport styled from 'styled-components';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\nconst gradientWidth = 24;\n\nconst StyledTabWrapper = styled.div`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ flexibleTabsHeaders }) => (flexibleTabsHeaders ? '' : 'overflow-x: hidden')};\n`;\n\nconst StyledTabList = aggregatedClasses('div')(\n blockName,\n 'list',\n ({ withCarousel, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, withLeftGradients, withRightGradients }) => ({\n carousel: withCarousel,\n 'flexible-table-headers': isDSMobile && flexibleTabsHeaders,\n 'fixed-table-headers': isDSMobile && fixedTabsHeaders,\n 'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,\n 'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients,\n }),\n {\n propsToRemoveFromFinalElement: [\n 'withCarousel',\n 'flexibleTabsHeaders',\n 'fixedTabsHeaders',\n 'withLeftGradients',\n 'withRightGradients',\n 'isDSMobile',\n ],\n },\n);\nconst TabContainer = aggregatedClasses('button', {\n role: 'tab',\n})(blockName, 'tab', ({ isActive, showSeparator, disabled }) => ({\n active: isActive,\n separator: showSeparator,\n disabled,\n}));\nconst SelectionIndicator = aggregatedClasses('div')(blockName, 'selection-indicator');\n\nclass TabBar extends Component {\n constructor(props) {\n super(props);\n this.tabListRef = React.createRef();\n this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());\n this.state = {\n indicatorStyle: null,\n withLeftGradients: false,\n withRightGradients: false,\n };\n this.setIndicatorStyle = this.setIndicatorStyle.bind(this);\n this.getIndicatorStyles = this.getIndicatorStyles.bind(this);\n this.handleGradients = this.handleGradients.bind(this);\n this.handleTabsHeadersHorizontalScroll = this.handleTabsHeadersHorizontalScroll.bind(this);\n this.tabsRef = {};\n }\n\n componentDidMount() {\n const { showSelectionIndicator } = this.props;\n this.resizeObserver.observe(this.tabListRef.current);\n if (showSelectionIndicator) {\n this.setIndicatorStyle();\n }\n\n window.addEventListener('resize', this.handleGradients);\n window.addEventListener('orientationchange', this.handleGradients);\n this.handleGradients();\n }\n\n componentDidUpdate(prevProps) {\n const { activeTab, showSelectionIndicator } = this.props;\n\n if (showSelectionIndicator && prevProps.activeTab !== activeTab) {\n this.setIndicatorStyle(activeTab);\n }\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.tabListRef.current);\n window.removeEventListener('resize', this.handleGradients);\n window.removeEventListener('orientationchange', this.handleGradients);\n }\n\n handleGradients() {\n const { scrollLeft, scrollWidth, clientWidth } = this.tabListRef.current;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n this.setState({ withLeftGradients, withRightGradients });\n }\n\n shouldHaveLeftGradient(scrollLeft, gWidth) {\n return Math.abs(scrollLeft) > gWidth;\n }\n\n // eslint-disable-next-line max-params\n shouldHaveRightGradient(scrollLeft, gWidth, clientWidth, scrollWidth) {\n return Math.abs(scrollLeft) <= scrollWidth - (clientWidth + gWidth);\n }\n\n setIndicatorStyle() {\n const { activeTab } = this.props;\n setTimeout(\n () =>\n this.setState({\n indicatorStyle: this.getIndicatorStyles(activeTab),\n }),\n 100,\n );\n }\n\n getActiveTabElement(activeTab) {\n const tabListEl = this.tabListRef.current;\n\n const tabSelector = `[data-tab-id=\"${activeTab}\"]`;\n\n return tabListEl && tabListEl.querySelector(tabSelector);\n }\n\n isElementVisible(el, holder) {\n const { left, right, width } = el.getBoundingClientRect();\n const holderRect = holder.getBoundingClientRect();\n\n return left <= holderRect.left ? holderRect.left - left <= width : right - holderRect.right <= width;\n }\n\n getVisibleDimensions(node, referenceNode) {\n const pos = node.getBoundingClientRect();\n const referencePos = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referencePos.left + referenceNode.clientWidth - pos.left,\n node.clientWidth - (referencePos.left - pos.left),\n ),\n height: Math.min(\n node.clientHeight,\n referencePos.top + referenceNode.clientHeight - pos.top,\n node.clientHeight - (referencePos.top - pos.top),\n ),\n };\n }\n\n getIndicatorStyles(activeTab) {\n const tabListEl = this.tabListRef.current;\n const { withCarousel } = this.props;\n const activeTabEl = this.getActiveTabElement(activeTab);\n\n if (!activeTabEl || !this.isElementVisible(activeTabEl, tabListEl)) return null;\n\n const { clientHeight, clientWidth, offsetTop, offsetLeft } = activeTabEl;\n const { left } = activeTabEl.getBoundingClientRect();\n const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;\n const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width + 2 : clientWidth + 2;\n return {\n height: clientHeight,\n left: `${Math.floor(leftOff)}px`, // using left and top for ie compatibility\n top: `${Math.floor(offsetTop)}px`,\n width,\n };\n }\n\n handleTabClick = (tabId, e) => {\n const { tabListRef, props } = this;\n const { onTabClick, flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const el = e.target;\n const { offsetLeft } = el;\n const { width: elWidth } = el.getBoundingClientRect();\n const { width: listWidth } = tabListDomEl.getBoundingClientRect();\n const extraSideSpace = listWidth - elWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n tabListDomEl.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n }\n e.preventDefault();\n onTabClick(tabId);\n };\n\n handleKeyPress = (tabId, e, index) => {\n const {\n tabs,\n handleDownArrow,\n handleUpArrow,\n // onTabClick,\n } = this.props;\n if (e.keyCode === 39) {\n const nextTab = tabs[index + 1];\n if (!nextTab && handleDownArrow) handleDownArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index + 1]?.focus();\n }\n if (e.keyCode === 37) {\n const nextTab = tabs[index - 1];\n if (!nextTab && handleUpArrow) handleUpArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index - 1]?.focus();\n }\n\n if (e.keyCode === 40 && handleDownArrow) {\n handleDownArrow(e);\n }\n\n if (e.keyCode === 38 && handleUpArrow) {\n handleUpArrow(e);\n }\n };\n\n handleTabsHeadersHorizontalScroll = debounce(() => {\n const { tabListRef, props } = this;\n const { flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const { scrollLeft, scrollWidth, clientWidth } = tabListDomEl;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n\n this.setState({\n withLeftGradients,\n withRightGradients,\n });\n }\n }, 50);\n\n renderTabs = memoizeOne((activeTab, tabs) => {\n const { showSeparator } = this.props;\n return React.Children.map(\n tabs,\n (tab, index) => {\n const { tabId, title, style, required, disabled } = tab.props;\n const isActive = activeTab === tabId;\n return [\n <TabContainer\n key={tabId}\n // eslint-disable-next-line no-return-assign\n ref={(t) => {\n this.tabsRef[index] = t;\n if (index === 0 && this.props.firstSubtabRef) {\n this.props.firstSubtabRef.current = t;\n }\n if (index === tabs.length - 1 && this.props.lastTabRef) {\n this.props.lastTabRef.current = t;\n }\n }}\n aria-controls={tabId}\n aria-selected={isActive}\n aria-disabled={!!disabled}\n classProps={{ isActive, showSeparator, disabled }}\n data-tab-id={tabId}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) this.handleTabClick(tabId, e, index);\n }}\n onKeyDown={(e) => {\n if (!disabled) this.handleKeyPress(tabId, e, index);\n }}\n style={style}\n tabIndex={0}\n >\n {title}\n <RequiredMark required={required} />\n </TabContainer>,\n ];\n },\n null,\n );\n });\n\n render() {\n const { id, tabs, activeTab, renderCustomTabBar, withCarousel, isDSMobile, flexibleTabsHeaders, fixedTabsHeaders } =\n this.props;\n const { indicatorStyle, withLeftGradients, withRightGradients } = this.state;\n\n if (renderCustomTabBar) {\n return renderCustomTabBar({\n innerRef: this.tabListRef,\n withCarousel,\n tabsComponents: this.renderTabs(activeTab, tabs),\n });\n }\n\n const shouldUseCarousel = !isDSMobile && withCarousel;\n\n return (\n <>\n <StyledTabList\n withCarousel={withCarousel}\n aria-label={id}\n innerRef={this.tabListRef}\n role=\"tablist\"\n data-testid=\"tab-list\"\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n withLeftGradients={withLeftGradients}\n withRightGradients={withRightGradients}\n fixedTabsHeaders={fixedTabsHeaders}\n onScroll={this.handleTabsHeadersHorizontalScroll}\n style={{ width: '100%' }}\n >\n <StyledTabWrapper\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n >\n {shouldUseCarousel ? (\n <Carousel onScroll={this.setIndicatorStyle}>{this.renderTabs(activeTab, tabs)}</Carousel>\n ) : null}\n {!shouldUseCarousel ? this.renderTabs(activeTab, tabs) : null}\n <SelectionIndicator style={indicatorStyle} />\n </StyledTabWrapper>\n </StyledTabList>\n </>\n );\n }\n}\n\nTabBar.defaultProps = {\n showSelectionIndicator: true,\n showSeparator: false,\n isDSMobile: false,\n};\n\nTabBar.propTypes = {\n /** Separator between tabs */\n showSeparator: PropTypes.bool,\n /** Blue border under selected tab */\n showSelectionIndicator: PropTypes.bool,\n /** Tab list id */\n id: PropTypes.string,\n /** Array of tabs */\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Renders a custom tabbar */\n renderCustomTabBar: PropTypes.func,\n /** tabId of active tab */\n activeTab: PropTypes.string,\n /** on tab click callback */\n onTabClick: PropTypes.func,\n /** carousel behavior */\n withCarousel: PropTypes.bool,\n handleDownArrow: PropTypes.func,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n lastTabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n /** Whether we are in mobile mode or not */\n};\n\nexport default TabBar;\n"],"names":["blockName","gradientWidth","StyledTabWrapper","styled","div","flexibleTabsHeaders","StyledTabList","aggregatedClasses","withCarousel","fixedTabsHeaders","isDSMobile","withLeftGradients","withRightGradients","carousel","propsToRemoveFromFinalElement","TabContainer","role","isActive","showSeparator","disabled","active","separator","SelectionIndicator","TabBar","props","_classCallCheck","handleTabClick","tabId","e","tabListRef","onTabClick","tabListDomEl","current","el","target","offsetLeft","getBoundingClientRect","elWidth","width","listWidth","extraSideSpace","leftOffsetToCenter","centeredLeftOffset","scrollTo","top","left","behavior","preventDefault","handleKeyPress","index","tabs","handleDownArrow","handleUpArrow","keyCode","nextTab","tabsRef","focus","handleTabsHeadersHorizontalScroll","debounce","scrollLeft","scrollWidth","clientWidth","shouldHaveLeftGradient","shouldHaveRightGradient","setState","renderTabs","memoizeOne","activeTab","React","Children","map","tab","title","style","required","t","firstSubtabRef","length","lastTabRef","RequiredMark","createRef","resizeObserver","ResizeObserver","setIndicatorStyle","state","indicatorStyle","bind","getIndicatorStyles","handleGradients","showSelectionIndicator","observe","window","addEventListener","prevProps","unobserve","removeEventListener","gWidth","Math","abs","setTimeout","tabListEl","tabSelector","querySelector","holder","right","holderRect","node","referenceNode","pos","referencePos","min","height","clientHeight","activeTabEl","getActiveTabElement","isElementVisible","offsetTop","leftOff","max","getVisibleDimensions","floor","id","renderCustomTabBar","innerRef","tabsComponents","shouldUseCarousel","Component","defaultProps","propTypes","PropTypes","bool","string","arrayOf","element","isRequired","func","oneOfType","shape","any"],"mappings":"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"}
|
package/cjs/TabTypes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabTypes.js","sources":["../../src/TabTypes.tsx"],"sourcesContent":["export const TabTypes = {\n NORMAL: 'normal',\n SUBTABS: 'subtabs',\n};\n\nexport const getTabTypes = () =>\n Object.keys(TabTypes).map((key) => TabTypes[key]);\n"],"names":["TabTypes","NORMAL","SUBTABS","getTabTypes","Object","keys","map","key"],"mappings":";;;;IAAaA,QAAQ,GAAG;
|
|
1
|
+
{"version":3,"file":"TabTypes.js","sources":["../../src/TabTypes.tsx"],"sourcesContent":["export const TabTypes = {\n NORMAL: 'normal',\n SUBTABS: 'subtabs',\n};\n\nexport const getTabTypes = () =>\n Object.keys(TabTypes).map((key) => TabTypes[key]);\n"],"names":["TabTypes","NORMAL","SUBTABS","getTabTypes","Object","keys","map","key"],"mappings":";;;;IAAaA,QAAQ,GAAG;EACtBC,MAAM,EAAE,QADc;EAEtBC,OAAO,EAAE;AAFa;IAKXC,WAAW,GAAG,SAAdA,WAAc;EAAA,OACzBC,MAAM,CAACC,IAAP,CAAYL,QAAZ,EAAsBM,GAAtB,CAA0B,UAACC,GAAD;IAAA,OAASP,QAAQ,CAACO,GAAD,CAAjB;GAA1B,CADyB;AAAA;;;;;"}
|
package/cjs/TabsImpl.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsImpl.js","sources":["../../src/TabsImpl.tsx"],"sourcesContent":["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport React, {\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabsPanels from './TabsPanels';\nimport TabBar from './TabBar';\nimport SubTabBar from './SubTabBar';\nimport { TabTypes } from './TabTypes';\n\nconst blockName = 'tabs';\n\nconst StyledTabsContainer = aggregatedClasses('div')(blockName);\nconst StyledTabBarContainer = aggregatedClasses('div')(\n blockName,\n 'tab-bar-container',\n);\n\nconst TabBarComponentsByType = {\n [TabTypes.NORMAL]: TabBar,\n [TabTypes.SUBTABS]: SubTabBar,\n};\n\nconst TabsImpl = (props) => {\n const {\n animated,\n children: tabs,\n type,\n tabBarExtraContent,\n onTabChange,\n enableMouseEvents,\n innerRef,\n onlyRenderActiveTab,\n containerProps,\n allowTextSelection,\n tabsListAriaLabel,\n activeTab,\n firstSubtabRef,\n lastTabRef,\n withCarousel,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile,\n } = props;\n const [actualActiveTab, setActualActiveTab] = useState(\n activeTab || tabs?.[0]?.props?.tabId,\n );\n const firstTabRefByParent = useRef(null);\n const lastTabRefByParent = useRef(null);\n\n useEffect(() => {\n if (activeTab) {\n setActualActiveTab(activeTab);\n }\n }, [activeTab]);\n\n const handleTabClick = useCallback(\n (tab) => {\n setActualActiveTab(tab);\n onTabChange(tab);\n },\n [onTabChange],\n );\n const handleDownArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (firstTabRefByParent?.current) firstTabRefByParent.current?.focus();\n },\n [firstTabRefByParent],\n );\n const handleUpArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (lastTabRef?.current) lastTabRef.current?.focus();\n },\n [lastTabRef],\n );\n\n const PureTabBarComponent = useMemo(() => {\n const TabBarComponent = TabBarComponentsByType[type] || TabBar;\n return (\n <TabBarComponent\n withCarousel={withCarousel}\n activeTab={actualActiveTab}\n onTabClick={handleTabClick}\n tabs={tabs}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRefByParent}\n handleDownArrow={handleDownArrow}\n handleUpArrow={handleUpArrow}\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n />\n );\n }, [\n type,\n withCarousel,\n actualActiveTab,\n handleTabClick,\n tabs,\n firstSubtabRef,\n lastTabRefByParent,\n handleDownArrow,\n handleUpArrow,\n isDSMobile,\n ]);\n const PureTabsPanels = useMemo(\n () => (\n <TabsPanels\n activeTab={actualActiveTab}\n allowTextSelection={allowTextSelection}\n animated={animated}\n enableMouseEvents={enableMouseEvents}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={handleTabClick}\n tabsComponents={tabs}\n lastTabRef={lastTabRefByParent}\n firstTabRefByParent={firstTabRefByParent}\n />\n ),\n [\n actualActiveTab,\n allowTextSelection,\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n handleTabClick,\n tabs,\n lastTabRefByParent,\n firstTabRefByParent,\n ],\n );\n const PureTabsImpl = useMemo(\n () => (\n <StyledTabsContainer\n {...containerProps}\n aria-label={tabsListAriaLabel}\n innerRef={innerRef}\n role=\"tablist\"\n >\n <StyledTabBarContainer>\n {PureTabBarComponent}\n {tabBarExtraContent}\n </StyledTabBarContainer>\n {PureTabsPanels}\n </StyledTabsContainer>\n ),\n [\n containerProps,\n tabsListAriaLabel,\n innerRef,\n PureTabBarComponent,\n tabBarExtraContent,\n PureTabsPanels,\n ],\n );\n return PureTabsImpl;\n};\n\nTabsImpl.propTypes = {\n animated: PropTypes.bool,\n enableMouseEvents: PropTypes.bool,\n allowTextSelection: PropTypes.bool,\n onTabChange: PropTypes.func,\n type: PropTypes.oneOf(['normal', 'subtabs']),\n tabBarExtraContent: PropTypes.element,\n onlyRenderActiveTab: PropTypes.bool,\n withCarousel: PropTypes.bool,\n activeTab: PropTypes.string,\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.any,\n }),\n ).isRequired,\n tabsListAriaLabel: PropTypes.string,\n containerProps: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n};\n\nexport default TabsImpl;\n"],"names":["blockName","StyledTabsContainer","aggregatedClasses","StyledTabBarContainer","TabBarComponentsByType","TabTypes","NORMAL","TabBar","SUBTABS","SubTabBar","TabsImpl","props","animated","tabs","children","type","tabBarExtraContent","onTabChange","enableMouseEvents","innerRef","onlyRenderActiveTab","containerProps","allowTextSelection","tabsListAriaLabel","activeTab","firstSubtabRef","lastTabRef","withCarousel","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","useState","tabId","actualActiveTab","setActualActiveTab","firstTabRefByParent","useRef","lastTabRefByParent","useEffect","handleTabClick","useCallback","tab","handleDownArrow","e","preventDefault","stopPropagation","current","focus","handleUpArrow","PureTabBarComponent","useMemo","TabBarComponent","React","PureTabsPanels","PureTabsImpl","propTypes","PropTypes","bool","func","oneOf","element","string","arrayOf","shape","any","isRequired","object","oneOfType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabsImpl.js","sources":["../../src/TabsImpl.tsx"],"sourcesContent":["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport React, {\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabsPanels from './TabsPanels';\nimport TabBar from './TabBar';\nimport SubTabBar from './SubTabBar';\nimport { TabTypes } from './TabTypes';\n\nconst blockName = 'tabs';\n\nconst StyledTabsContainer = aggregatedClasses('div')(blockName);\nconst StyledTabBarContainer = aggregatedClasses('div')(\n blockName,\n 'tab-bar-container',\n);\n\nconst TabBarComponentsByType = {\n [TabTypes.NORMAL]: TabBar,\n [TabTypes.SUBTABS]: SubTabBar,\n};\n\nconst TabsImpl = (props) => {\n const {\n animated,\n children: tabs,\n type,\n tabBarExtraContent,\n onTabChange,\n enableMouseEvents,\n innerRef,\n onlyRenderActiveTab,\n containerProps,\n allowTextSelection,\n tabsListAriaLabel,\n activeTab,\n firstSubtabRef,\n lastTabRef,\n withCarousel,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile,\n } = props;\n const [actualActiveTab, setActualActiveTab] = useState(\n activeTab || tabs?.[0]?.props?.tabId,\n );\n const firstTabRefByParent = useRef(null);\n const lastTabRefByParent = useRef(null);\n\n useEffect(() => {\n if (activeTab) {\n setActualActiveTab(activeTab);\n }\n }, [activeTab]);\n\n const handleTabClick = useCallback(\n (tab) => {\n setActualActiveTab(tab);\n onTabChange(tab);\n },\n [onTabChange],\n );\n const handleDownArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (firstTabRefByParent?.current) firstTabRefByParent.current?.focus();\n },\n [firstTabRefByParent],\n );\n const handleUpArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (lastTabRef?.current) lastTabRef.current?.focus();\n },\n [lastTabRef],\n );\n\n const PureTabBarComponent = useMemo(() => {\n const TabBarComponent = TabBarComponentsByType[type] || TabBar;\n return (\n <TabBarComponent\n withCarousel={withCarousel}\n activeTab={actualActiveTab}\n onTabClick={handleTabClick}\n tabs={tabs}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRefByParent}\n handleDownArrow={handleDownArrow}\n handleUpArrow={handleUpArrow}\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n />\n );\n }, [\n type,\n withCarousel,\n actualActiveTab,\n handleTabClick,\n tabs,\n firstSubtabRef,\n lastTabRefByParent,\n handleDownArrow,\n handleUpArrow,\n isDSMobile,\n ]);\n const PureTabsPanels = useMemo(\n () => (\n <TabsPanels\n activeTab={actualActiveTab}\n allowTextSelection={allowTextSelection}\n animated={animated}\n enableMouseEvents={enableMouseEvents}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={handleTabClick}\n tabsComponents={tabs}\n lastTabRef={lastTabRefByParent}\n firstTabRefByParent={firstTabRefByParent}\n />\n ),\n [\n actualActiveTab,\n allowTextSelection,\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n handleTabClick,\n tabs,\n lastTabRefByParent,\n firstTabRefByParent,\n ],\n );\n const PureTabsImpl = useMemo(\n () => (\n <StyledTabsContainer\n {...containerProps}\n aria-label={tabsListAriaLabel}\n innerRef={innerRef}\n role=\"tablist\"\n >\n <StyledTabBarContainer>\n {PureTabBarComponent}\n {tabBarExtraContent}\n </StyledTabBarContainer>\n {PureTabsPanels}\n </StyledTabsContainer>\n ),\n [\n containerProps,\n tabsListAriaLabel,\n innerRef,\n PureTabBarComponent,\n tabBarExtraContent,\n PureTabsPanels,\n ],\n );\n return PureTabsImpl;\n};\n\nTabsImpl.propTypes = {\n animated: PropTypes.bool,\n enableMouseEvents: PropTypes.bool,\n allowTextSelection: PropTypes.bool,\n onTabChange: PropTypes.func,\n type: PropTypes.oneOf(['normal', 'subtabs']),\n tabBarExtraContent: PropTypes.element,\n onlyRenderActiveTab: PropTypes.bool,\n withCarousel: PropTypes.bool,\n activeTab: PropTypes.string,\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.any,\n }),\n ).isRequired,\n tabsListAriaLabel: PropTypes.string,\n containerProps: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n};\n\nexport default TabsImpl;\n"],"names":["blockName","StyledTabsContainer","aggregatedClasses","StyledTabBarContainer","TabBarComponentsByType","TabTypes","NORMAL","TabBar","SUBTABS","SubTabBar","TabsImpl","props","animated","tabs","children","type","tabBarExtraContent","onTabChange","enableMouseEvents","innerRef","onlyRenderActiveTab","containerProps","allowTextSelection","tabsListAriaLabel","activeTab","firstSubtabRef","lastTabRef","withCarousel","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","useState","tabId","actualActiveTab","setActualActiveTab","firstTabRefByParent","useRef","lastTabRefByParent","useEffect","handleTabClick","useCallback","tab","handleDownArrow","e","preventDefault","stopPropagation","current","focus","handleUpArrow","PureTabBarComponent","useMemo","TabBarComponent","React","PureTabsPanels","PureTabsImpl","propTypes","PropTypes","bool","func","oneOf","element","string","arrayOf","shape","any","isRequired","object","oneOfType"],"mappings":"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"}
|
package/cjs/TabsPanels.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanels.js","sources":["../../src/TabsPanels.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport SwipeableViews from 'react-swipeable-views';\n// eslint-disable-next-line import/extensions\nimport PanelContainer from './PanelContainer';\n\nconst blockName = 'tabs-panels';\n\nconst Panels = aggregatedClasses('div')(blockName);\n\nconst getIndexById = (children, activeId) =>\n children && children.findIndex((item) => item.props.tabId === activeId);\nconst getIdByIndex = (children, index) =>\n children && children[index].props.tabId;\n\nexport default class TabsPanels extends Component {\n renderPanels = memoizeOne((activeTab, tabsComponents) => {\n const { animated, onlyRenderActiveTab, allowTextSelection } = this.props;\n return React.Children.map(\n tabsComponents,\n (tab) => {\n const { tabId: panelId, style, children: content } = tab.props;\n const isActive = activeTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n return (\n <PanelContainer\n key={panelId}\n aria-labelledby={`${panelId}-label`}\n lastTabRef={this.props.lastTabRef}\n firstSubtabRef={this.props.firstTabRefByParent}\n classProps={{ isActive }}\n data-panel-id={panelId}\n hidden={!animated && !isActive}\n onMouseDown={(e) => {\n const role = e.target.getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection)\n e.stopPropagation();\n }}\n role=\"tabpanel\"\n style={style}\n >\n {shouldRender && content}\n </PanelContainer>\n );\n },\n null,\n );\n });\n\n render() {\n const {\n activeTab,\n tabsComponents,\n animated,\n onTabChange,\n enableMouseEvents,\n } = this.props;\n const panels = animated ? (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={getIndexById(tabsComponents, activeTab)}\n onChangeIndex={(index) =>\n onTabChange(getIdByIndex(tabsComponents, index))\n }\n >\n {this.renderPanels(activeTab, tabsComponents)}\n </SwipeableViews>\n ) : (\n this.renderPanels(activeTab, tabsComponents)\n );\n return <Panels>{panels}</Panels>;\n }\n}\n"],"names":["blockName","Panels","aggregatedClasses","getIndexById","children","activeId","findIndex","item","props","tabId","getIdByIndex","index","TabsPanels","renderPanels","memoizeOne","activeTab","tabsComponents","animated","onlyRenderActiveTab","allowTextSelection","React","Children","map","tab","panelId","style","content","isActive","shouldRender","lastTabRef","firstTabRefByParent","e","role","target","getAttribute","stopPropagation","onTabChange","enableMouseEvents","panels","SwipeableViews","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,MAAM,GAAGC,8BAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,CAAf;;AAEA,IAAMG,YAAY,GAAG,SAAfA,YAAe,CAACC,QAAD,EAAWC,QAAX;
|
|
1
|
+
{"version":3,"file":"TabsPanels.js","sources":["../../src/TabsPanels.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport SwipeableViews from 'react-swipeable-views';\n// eslint-disable-next-line import/extensions\nimport PanelContainer from './PanelContainer';\n\nconst blockName = 'tabs-panels';\n\nconst Panels = aggregatedClasses('div')(blockName);\n\nconst getIndexById = (children, activeId) =>\n children && children.findIndex((item) => item.props.tabId === activeId);\nconst getIdByIndex = (children, index) =>\n children && children[index].props.tabId;\n\nexport default class TabsPanels extends Component {\n renderPanels = memoizeOne((activeTab, tabsComponents) => {\n const { animated, onlyRenderActiveTab, allowTextSelection } = this.props;\n return React.Children.map(\n tabsComponents,\n (tab) => {\n const { tabId: panelId, style, children: content } = tab.props;\n const isActive = activeTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n return (\n <PanelContainer\n key={panelId}\n aria-labelledby={`${panelId}-label`}\n lastTabRef={this.props.lastTabRef}\n firstSubtabRef={this.props.firstTabRefByParent}\n classProps={{ isActive }}\n data-panel-id={panelId}\n hidden={!animated && !isActive}\n onMouseDown={(e) => {\n const role = e.target.getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection)\n e.stopPropagation();\n }}\n role=\"tabpanel\"\n style={style}\n >\n {shouldRender && content}\n </PanelContainer>\n );\n },\n null,\n );\n });\n\n render() {\n const {\n activeTab,\n tabsComponents,\n animated,\n onTabChange,\n enableMouseEvents,\n } = this.props;\n const panels = animated ? (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={getIndexById(tabsComponents, activeTab)}\n onChangeIndex={(index) =>\n onTabChange(getIdByIndex(tabsComponents, index))\n }\n >\n {this.renderPanels(activeTab, tabsComponents)}\n </SwipeableViews>\n ) : (\n this.renderPanels(activeTab, tabsComponents)\n );\n return <Panels>{panels}</Panels>;\n }\n}\n"],"names":["blockName","Panels","aggregatedClasses","getIndexById","children","activeId","findIndex","item","props","tabId","getIdByIndex","index","TabsPanels","renderPanels","memoizeOne","activeTab","tabsComponents","animated","onlyRenderActiveTab","allowTextSelection","React","Children","map","tab","panelId","style","content","isActive","shouldRender","lastTabRef","firstTabRefByParent","e","role","target","getAttribute","stopPropagation","onTabChange","enableMouseEvents","panels","SwipeableViews","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,MAAM,GAAGC,8BAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,CAAf;;AAEA,IAAMG,YAAY,GAAG,SAAfA,YAAe,CAACC,QAAD,EAAWC,QAAX;EAAA,OACnBD,QAAQ,IAAIA,QAAQ,CAACE,SAAT,CAAmB,UAACC,IAAD;IAAA,OAAUA,IAAI,CAACC,KAAL,CAAWC,KAAX,KAAqBJ,QAA/B;GAAnB,CADO;AAAA,CAArB;;AAEA,IAAMK,YAAY,GAAG,SAAfA,YAAe,CAACN,QAAD,EAAWO,KAAX;EAAA,OACnBP,QAAQ,IAAIA,QAAQ,CAACO,KAAD,CAAR,CAAgBH,KAAhB,CAAsBC,KADf;AAAA,CAArB;;IAGqBG;;;;;;;;;;;;;;;UACnBC,eAAeC,8BAAU,CAAC,UAACC,SAAD,EAAYC,cAAZ,EAA+B;MACvD,kBAA8D,MAAKR,KAAnE;UAAQS,QAAR,eAAQA,QAAR;UAAkBC,mBAAlB,eAAkBA,mBAAlB;UAAuCC,kBAAvC,eAAuCA,kBAAvC;MACA,OAAOC,yBAAK,CAACC,QAAN,CAAeC,GAAf,CACLN,cADK,EAEL,UAACO,GAAD,EAAS;QACP,iBAAqDA,GAAG,CAACf,KAAzD;YAAegB,OAAf,cAAQf,KAAR;YAAwBgB,KAAxB,cAAwBA,KAAxB;YAAyCC,OAAzC,cAA+BtB,QAA/B;QACA,IAAMuB,QAAQ,GAAGZ,SAAS,KAAKS,OAA/B;QACA,IAAMI,YAAY,GAAG,CAACV,mBAAD,IAAwBS,QAA7C;QACA,oBACEP,wCAAC,cAAD;UACE,GAAG,EAAEI,OADP;UAEE,6BAAoBA,OAApB,WAFF;UAGE,UAAU,EAAE,MAAKhB,KAAL,CAAWqB,UAHzB;UAIE,cAAc,EAAE,MAAKrB,KAAL,CAAWsB,mBAJ7B;UAKE,UAAU,EAAE;YAAEH,QAAQ,EAARA;WALhB;UAME,iBAAeH,OANjB;UAOE,MAAM,EAAE,CAACP,QAAD,IAAa,CAACU,QAPxB;UAQE,WAAW,EAAE,qBAACI,CAAD,EAAO;YAClB,IAAMC,IAAI,GAAGD,CAAC,CAACE,MAAF,CAASC,YAAT,CAAsB,MAAtB,CAAb;YACA,IAAIF,IAAI,KAAK,UAAT,IAAuBb,kBAA3B,EACEY,CAAC,CAACI,eAAF;WAXN;UAaE,IAAI,EAAC,UAbP;UAcE,KAAK,EAAEV;WAENG,YAAY,IAAIF,OAhBnB,CADF;OANG,EA2BL,IA3BK,CAAP;KAFuB;;;;;;WAiCzB,kBAAS;MACP,mBAMI,KAAKlB,KANT;UACEO,SADF,gBACEA,SADF;UAEEC,cAFF,gBAEEA,cAFF;UAGEC,QAHF,gBAGEA,QAHF;UAIEmB,WAJF,gBAIEA,WAJF;UAKEC,iBALF,gBAKEA,iBALF;MAOA,IAAMC,MAAM,GAAGrB,QAAQ,gBACrBG,wCAACmB,kCAAD;QACE,iBAAiB,EAAEF,iBADrB;QAEE,KAAK,EAAElC,YAAY,CAACa,cAAD,EAAiBD,SAAjB,CAFrB;QAGE,aAAa,EAAE,uBAACJ,KAAD;UAAA,OACbyB,WAAW,CAAC1B,YAAY,CAACM,cAAD,EAAiBL,KAAjB,CAAb,CADE;;SAId,KAAKE,YAAL,CAAkBE,SAAlB,EAA6BC,cAA7B,CAPH,CADqB,GAWrB,KAAKH,YAAL,CAAkBE,SAAlB,EAA6BC,cAA7B,CAXF;MAaA,oBAAOI,wCAAC,MAAD,QAASkB,MAAT,CAAP;;;;;EAvDoCE;;;;"}
|
package/cjs/useResize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResize.js","sources":["../../src/useResize.tsx"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\n\nexport function useResize(ref, callback) {\n const { right, left } = ref?.current?.getBoundingClientRect() || {\n right: null,\n left: null,\n };\n const handleResize = debounce(callback, 300);\n\n useLayoutEffect(() => {\n handleResize();\n }, [right, left]);\n}\n"],"names":["useResize","ref","callback","current","getBoundingClientRect","right","left","handleResize","debounce","useLayoutEffect"],"mappings":";;;;;;;AAGO,SAASA,SAAT,CAAmBC,GAAnB,EAAwBC,QAAxB,EAAkC;
|
|
1
|
+
{"version":3,"file":"useResize.js","sources":["../../src/useResize.tsx"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\n\nexport function useResize(ref, callback) {\n const { right, left } = ref?.current?.getBoundingClientRect() || {\n right: null,\n left: null,\n };\n const handleResize = debounce(callback, 300);\n\n useLayoutEffect(() => {\n handleResize();\n }, [right, left]);\n}\n"],"names":["useResize","ref","callback","current","getBoundingClientRect","right","left","handleResize","debounce","useLayoutEffect"],"mappings":";;;;;;;AAGO,SAASA,SAAT,CAAmBC,GAAnB,EAAwBC,QAAxB,EAAkC;EAAA;;EACvC,WAAwB,CAAAD,GAAG,SAAH,IAAAA,GAAG,WAAH,4BAAAA,GAAG,CAAEE,OAAL,8DAAcC,qBAAd,OAAyC;IAC/DC,KAAK,EAAE,IADwD;IAE/DC,IAAI,EAAE;GAFR;MAAQD,KAAR,QAAQA,KAAR;MAAeC,IAAf,QAAeA,IAAf;;EAIA,IAAMC,YAAY,GAAGC,eAAQ,CAACN,QAAD,EAAW,GAAX,CAA7B;EAEAO,qBAAe,CAAC,YAAM;IACpBF,YAAY;GADC,EAEZ,CAACF,KAAD,EAAQC,IAAR,CAFY,CAAf;AAGD;;;;"}
|
package/esm/Carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport { useResize } from './useResize';\n\nconst CarouselBtn = styled(DSButton)`\n position: absolute;\n z-index: 1;\n margin: 0;\n\n &:focus {\n & span {\n background-color: ${(props) => props.theme.colors.brand[200]};\n background-size: 90%;\n border-radius: 2px;\n border-color: transparent;\n }\n }\n\n && {\n width: 16px;\n // offset needed for svg gap caused by resizing icons and to\n // avoid covering blue active underline\n height: calc(100% - 2px);\n\n @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {\n height: calc(100% - 4px);\n &:focus {\n & span {\n background-color: unset;\n }\n }\n }\n }\n ${(props) => (props.right ? 'right: 0;' : 'left: 0;')}\n\n && .em-ds-icon {\n height: 16px;\n width: 16px;\n }\n`;\n\nconst CarouselWrapper = styled.span`\n position: relative;\n padding: 0 16px;\n width: 100%;\n`;\n\nconst ChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow: hidden;\n`;\n\nfunction isVisibleElement(el, container) {\n const rect = el.getBoundingClientRect();\n const cRect = container.getBoundingClientRect();\n const elemLeft = rect.left + 3;\n const elemRight = rect.right - 3;\n\n // Only completely visible elements return true:\n const isVisible = elemLeft >= cRect.left && elemRight <= cRect.right;\n return isVisible;\n}\n\nconst Carousel = ({ children, onScroll }) => {\n const itemsRef = useRef([]);\n const wrapRef = useRef(null);\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n\n const shouldShowLeft = () =>\n children &&\n children[0] &&\n wrapRef.current &&\n itemsRef.current[0] &&\n !isVisibleElement(itemsRef.current[0], wrapRef.current);\n const shouldShowRight = () =>\n children &&\n children[children.length - 1] &&\n wrapRef.current &&\n itemsRef.current[children.length - 1] &&\n !isVisibleElement(itemsRef.current[children.length - 1], wrapRef.current);\n\n const [{ right, left, CHEVRON_FOCUS_FLAG }, setShow] = useState({\n right: false,\n left: false,\n CHEVRON_FOCUS_FLAG: false, // flag to replace lack of callback in useState hook\n });\n const recalcChevrons = () => setShow({ right: shouldShowRight(), left: shouldShowLeft() });\n\n useEffect(() => {\n recalcChevrons();\n }, []);\n\n useEffect(() => {\n if (CHEVRON_FOCUS_FLAG) {\n // focus opposite chevron when current one hides\n if (!left && right && rightRef.current) {\n rightRef.current.focus();\n } else if (!right && left && leftRef.current) {\n leftRef.current.focus();\n }\n setShow({ right, left, CHEVRON_FOCUS_FLAG: false });\n }\n }, [CHEVRON_FOCUS_FLAG]);\n\n useResize(wrapRef, recalcChevrons);\n\n const getVisibleItemsOffset = () =>\n itemsRef.current.reduce((acc, c) => {\n if (isVisibleElement(c, wrapRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.offsetWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n const rightClick = () => {\n wrapRef.current.scrollLeft += getVisibleItemsOffset();\n };\n\n const leftClick = () => {\n wrapRef.current.scrollLeft -= getVisibleItemsOffset();\n };\n\n const handleScroll = (e) => {\n // forces render when element.scrollTop is changed (out of react flow)\n setShow({\n right: shouldShowRight(),\n left: shouldShowLeft(),\n // to trigger focus logic at effect above\n CHEVRON_FOCUS_FLAG: true,\n });\n onScroll(e);\n };\n\n const handleClick = (e, onClick = () => {}) => {\n const tabListDomEl = wrapRef.current;\n const el = e.target;\n const rect = el.getBoundingClientRect();\n const cRect = tabListDomEl.getBoundingClientRect();\n\n if (!isVisibleElement(el, tabListDomEl)) {\n const containerWidth = cRect.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = rect.left - cRect.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = el.offsetWidth;\n\n // align to right\n if (positionInContainer > halfContainer) {\n wrapRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n // align left\n wrapRef.current.scrollLeft += positionInContainer;\n }\n recalcChevrons();\n }\n onClick(e);\n };\n\n return (\n <CarouselWrapper>\n {left && (\n <CarouselBtn\n data-testid=\"chevron-left\"\n buttonType=\"link\"\n innerRef={leftRef}\n size=\"s\"\n icon={<ChevronLeft size=\"s\" color={['brand-primary', '600']} />}\n onClick={leftClick}\n tabIndex={-1}\n />\n )}\n {right && (\n <CarouselBtn\n data-testid=\"chevron-right\"\n innerRef={rightRef}\n right\n size=\"s\"\n buttonType=\"link\"\n icon={<ChevronRight size=\"s\" color={['brand-primary', '600']} />}\n onClick={rightClick}\n tabIndex={-1}\n />\n )}\n <ChildrenWrap onScroll={handleScroll} ref={wrapRef}>\n {React.Children.map(children, (child, idx) =>\n React.cloneElement(child, {\n onClick: (e) => handleClick(e, child.props?.onClick),\n key: 'carousel'.concat(idx),\n ref: (el) => {\n itemsRef.current[idx] = el;\n // keep old refs\n if (typeof child.ref === 'function') {\n child.ref(el);\n }\n },\n }),\n )}\n </ChildrenWrap>\n </CarouselWrapper>\n );\n};\n\nCarousel.defaultProps = {\n onScroll: () => null,\n};\n\nCarousel.propTypes = {\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n onScroll: PropTypes.func,\n};\n\nexport default Carousel;\n"],"names":["CarouselBtn","styled","DSButton","props","theme","colors","brand","breakpoints","medium","right","CarouselWrapper","span","ChildrenWrap","div","isVisibleElement","el","container","rect","getBoundingClientRect","cRect","elemLeft","left","elemRight","isVisible","Carousel","children","onScroll","itemsRef","useRef","wrapRef","leftRef","rightRef","shouldShowLeft","current","shouldShowRight","length","useState","CHEVRON_FOCUS_FLAG","setShow","recalcChevrons","useEffect","focus","useResize","getVisibleItemsOffset","reduce","acc","c","styles","window","getComputedStyle","width","offsetWidth","margin","parseFloat","marginLeft","marginRight","rightClick","scrollLeft","leftClick","handleScroll","e","handleClick","onClick","tabListDomEl","target","containerWidth","halfContainer","elementScrollPosition","positionInContainer","React","Children","map","child","idx","cloneElement","key","concat","ref","defaultProps","propTypes","PropTypes","arrayOf","element","isRequired","func"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport { useResize } from './useResize';\n\nconst CarouselBtn = styled(DSButton)`\n position: absolute;\n z-index: 1;\n margin: 0;\n\n &:focus {\n & span {\n background-color: ${(props) => props.theme.colors.brand[200]};\n background-size: 90%;\n border-radius: 2px;\n border-color: transparent;\n }\n }\n\n && {\n width: 16px;\n // offset needed for svg gap caused by resizing icons and to\n // avoid covering blue active underline\n height: calc(100% - 2px);\n\n @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {\n height: calc(100% - 4px);\n &:focus {\n & span {\n background-color: unset;\n }\n }\n }\n }\n ${(props) => (props.right ? 'right: 0;' : 'left: 0;')}\n\n && .em-ds-icon {\n height: 16px;\n width: 16px;\n }\n`;\n\nconst CarouselWrapper = styled.span`\n position: relative;\n padding: 0 16px;\n width: 100%;\n`;\n\nconst ChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow: hidden;\n`;\n\nfunction isVisibleElement(el, container) {\n const rect = el.getBoundingClientRect();\n const cRect = container.getBoundingClientRect();\n const elemLeft = rect.left + 3;\n const elemRight = rect.right - 3;\n\n // Only completely visible elements return true:\n const isVisible = elemLeft >= cRect.left && elemRight <= cRect.right;\n return isVisible;\n}\n\nconst Carousel = ({ children, onScroll }) => {\n const itemsRef = useRef([]);\n const wrapRef = useRef(null);\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n\n const shouldShowLeft = () =>\n children &&\n children[0] &&\n wrapRef.current &&\n itemsRef.current[0] &&\n !isVisibleElement(itemsRef.current[0], wrapRef.current);\n const shouldShowRight = () =>\n children &&\n children[children.length - 1] &&\n wrapRef.current &&\n itemsRef.current[children.length - 1] &&\n !isVisibleElement(itemsRef.current[children.length - 1], wrapRef.current);\n\n const [{ right, left, CHEVRON_FOCUS_FLAG }, setShow] = useState({\n right: false,\n left: false,\n CHEVRON_FOCUS_FLAG: false, // flag to replace lack of callback in useState hook\n });\n const recalcChevrons = () => setShow({ right: shouldShowRight(), left: shouldShowLeft() });\n\n useEffect(() => {\n recalcChevrons();\n }, []);\n\n useEffect(() => {\n if (CHEVRON_FOCUS_FLAG) {\n // focus opposite chevron when current one hides\n if (!left && right && rightRef.current) {\n rightRef.current.focus();\n } else if (!right && left && leftRef.current) {\n leftRef.current.focus();\n }\n setShow({ right, left, CHEVRON_FOCUS_FLAG: false });\n }\n }, [CHEVRON_FOCUS_FLAG]);\n\n useResize(wrapRef, recalcChevrons);\n\n const getVisibleItemsOffset = () =>\n itemsRef.current.reduce((acc, c) => {\n if (isVisibleElement(c, wrapRef.current)) {\n const styles = window.getComputedStyle(c);\n const width = c.offsetWidth;\n const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n return acc + (width + margin);\n }\n return acc;\n }, 0);\n\n const rightClick = () => {\n wrapRef.current.scrollLeft += getVisibleItemsOffset();\n };\n\n const leftClick = () => {\n wrapRef.current.scrollLeft -= getVisibleItemsOffset();\n };\n\n const handleScroll = (e) => {\n // forces render when element.scrollTop is changed (out of react flow)\n setShow({\n right: shouldShowRight(),\n left: shouldShowLeft(),\n // to trigger focus logic at effect above\n CHEVRON_FOCUS_FLAG: true,\n });\n onScroll(e);\n };\n\n const handleClick = (e, onClick = () => {}) => {\n const tabListDomEl = wrapRef.current;\n const el = e.target;\n const rect = el.getBoundingClientRect();\n const cRect = tabListDomEl.getBoundingClientRect();\n\n if (!isVisibleElement(el, tabListDomEl)) {\n const containerWidth = cRect.width;\n const halfContainer = containerWidth / 2;\n const elementScrollPosition = rect.left - cRect.left;\n const positionInContainer = elementScrollPosition % containerWidth;\n const width = el.offsetWidth;\n\n // align to right\n if (positionInContainer > halfContainer) {\n wrapRef.current.scrollLeft += width + positionInContainer - containerWidth;\n } else {\n // align left\n wrapRef.current.scrollLeft += positionInContainer;\n }\n recalcChevrons();\n }\n onClick(e);\n };\n\n return (\n <CarouselWrapper>\n {left && (\n <CarouselBtn\n data-testid=\"chevron-left\"\n buttonType=\"link\"\n innerRef={leftRef}\n size=\"s\"\n icon={<ChevronLeft size=\"s\" color={['brand-primary', '600']} />}\n onClick={leftClick}\n tabIndex={-1}\n />\n )}\n {right && (\n <CarouselBtn\n data-testid=\"chevron-right\"\n innerRef={rightRef}\n right\n size=\"s\"\n buttonType=\"link\"\n icon={<ChevronRight size=\"s\" color={['brand-primary', '600']} />}\n onClick={rightClick}\n tabIndex={-1}\n />\n )}\n <ChildrenWrap onScroll={handleScroll} ref={wrapRef}>\n {React.Children.map(children, (child, idx) =>\n React.cloneElement(child, {\n onClick: (e) => handleClick(e, child.props?.onClick),\n key: 'carousel'.concat(idx),\n ref: (el) => {\n itemsRef.current[idx] = el;\n // keep old refs\n if (typeof child.ref === 'function') {\n child.ref(el);\n }\n },\n }),\n )}\n </ChildrenWrap>\n </CarouselWrapper>\n );\n};\n\nCarousel.defaultProps = {\n onScroll: () => null,\n};\n\nCarousel.propTypes = {\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n onScroll: PropTypes.func,\n};\n\nexport default Carousel;\n"],"names":["CarouselBtn","styled","DSButton","props","theme","colors","brand","breakpoints","medium","right","CarouselWrapper","span","ChildrenWrap","div","isVisibleElement","el","container","rect","getBoundingClientRect","cRect","elemLeft","left","elemRight","isVisible","Carousel","children","onScroll","itemsRef","useRef","wrapRef","leftRef","rightRef","shouldShowLeft","current","shouldShowRight","length","useState","CHEVRON_FOCUS_FLAG","setShow","recalcChevrons","useEffect","focus","useResize","getVisibleItemsOffset","reduce","acc","c","styles","window","getComputedStyle","width","offsetWidth","margin","parseFloat","marginLeft","marginRight","rightClick","scrollLeft","leftClick","handleScroll","e","handleClick","onClick","tabListDomEl","target","containerWidth","halfContainer","elementScrollPosition","positionInContainer","React","Children","map","child","idx","cloneElement","key","concat","ref","defaultProps","propTypes","PropTypes","arrayOf","element","isRequired","func"],"mappings":"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"}
|
package/esm/DSTab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSTab.js","sources":["../../src/DSTab.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\n\n// This component is for create a specific api for Tabs children\nconst DSTab = ({ tabId = '', title = '', required = false }) => (\n <div\n aria-labelledby={`${tabId}-label`}\n tabId={tabId}\n title={title}\n required={required}\n />\n);\n\nDSTab.displayName = 'DSTab';\nconst props = {\n /** unique id for tab */\n tabId: PropTypes.string.description('unique id for tab'),\n /** tab title */\n title: PropTypes.string.description('tab title'),\n /** Show a required mark next to the title */\n required: PropTypes.bool.description(\n 'Show a required mark next to the title',\n ),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n};\nDSTab.propTypes = props;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = props;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],"names":["DSTab","tabId","title","required","displayName","props","PropTypes","string","description","bool","isDSMobile","propTypes","DSTabWithSchema","describe"],"mappings":";;;AAAA;;IAKMA,KAAK,GAAG,SAARA,KAAQ;
|
|
1
|
+
{"version":3,"file":"DSTab.js","sources":["../../src/DSTab.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\n\n// This component is for create a specific api for Tabs children\nconst DSTab = ({ tabId = '', title = '', required = false }) => (\n <div\n aria-labelledby={`${tabId}-label`}\n tabId={tabId}\n title={title}\n required={required}\n />\n);\n\nDSTab.displayName = 'DSTab';\nconst props = {\n /** unique id for tab */\n tabId: PropTypes.string.description('unique id for tab'),\n /** tab title */\n title: PropTypes.string.description('tab title'),\n /** Show a required mark next to the title */\n required: PropTypes.bool.description(\n 'Show a required mark next to the title',\n ),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n};\nDSTab.propTypes = props;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = props;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],"names":["DSTab","tabId","title","required","displayName","props","PropTypes","string","description","bool","isDSMobile","propTypes","DSTabWithSchema","describe"],"mappings":";;;AAAA;;IAKMA,KAAK,GAAG,SAARA,KAAQ;EAAA,sBAAGC,KAAH;MAAGA,KAAH,2BAAW,EAAX;wBAAeC,KAAf;MAAeA,KAAf,2BAAuB,EAAvB;2BAA2BC,QAA3B;MAA2BA,QAA3B,8BAAsC,KAAtC;EAAA,oBACZ;IACE,6BAAoBF,KAApB,WADF;IAEE,KAAK,EAAEA,KAFT;IAGE,KAAK,EAAEC,KAHT;IAIE,QAAQ,EAAEC;IALA;AAAA;;AASdH,KAAK,CAACI,WAAN,GAAoB,OAApB;AACA,IAAMC,KAAK,GAAG;;EAEZJ,KAAK,EAAEK,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,mBAA7B,CAFK;;;EAIZN,KAAK,EAAEI,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,WAA7B,CAJK;;;EAMZL,QAAQ,EAAEG,SAAS,CAACG,IAAV,CAAeD,WAAf,CACR,wCADQ,CANE;;;EAUZE,UAAU,EAAEJ,SAAS,CAACG,IAAV,CAAeD,WAAf,CACV,iDADU;AAVA,CAAd;AAcAR,KAAK,CAACW,SAAN,GAAkBN,KAAlB;IACMO,eAAe,GAAGC,QAAQ,CAACb,KAAD;AAChCY,eAAe,CAACD,SAAhB,GAA4BN,KAA5B;;;;"}
|
package/esm/DSTabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSTabs.js","sources":["../../src/DSTabs.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { TabTypes } from './TabTypes';\nimport TabsImpl from './TabsImpl';\nimport DSTab from './DSTab';\n\nconst DSTabs = ({\n containerProps = {},\n innerRef,\n animated = true,\n enableMouseEvents = false,\n allowTextSelection = false,\n onTabChange = () => null,\n tabsListAriaLabel = 'Tab list',\n type = TabTypes.NORMAL,\n tabBarExtraContent = undefined,\n children: tabs,\n onlyRenderActiveTab = false,\n activeTab,\n withCarousel = false,\n firstSubtabRef,\n lastTabRef,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile = false,\n}) => (\n <TabsImpl\n activeTab={activeTab}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRef}\n allowTextSelection={allowTextSelection}\n animated={animated}\n containerProps={containerProps}\n enableMouseEvents={enableMouseEvents}\n innerRef={innerRef}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={onTabChange}\n tabBarExtraContent={tabBarExtraContent}\n tabsListAriaLabel={tabsListAriaLabel}\n type={type}\n withCarousel={withCarousel}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n isDSMobile={isDSMobile}\n >\n {tabs}\n </TabsImpl>\n);\n\nconst props = {\n /** Whether the tab transition should animate or not */\n animated: PropTypes.bool.description(\n 'Whether the tab transition should animate or not',\n ),\n /** Enables tab transition with mouse drag events */\n enableMouseEvents: PropTypes.bool.description(\n 'Enables tab transition with mouse drag events',\n ),\n /** Allow text selection when mouse drag events are active */\n allowTextSelection: PropTypes.bool.description(\n 'Allow text selection when mouse drag events are active',\n ),\n /** Handler when a user clicks on a different tab */\n onTabChange: PropTypes.func.description(\n 'Handler when a user clicks on a different tab',\n ),\n /** Tab type */\n type: PropTypes.oneOf(['normal', 'subtabs']).description('Tab type'),\n /** Extra content next to the tabs pills */\n tabBarExtraContent: PropTypes.element.description(\n 'Extra content next to the tabs pills',\n ),\n /** Only renders the active tab in the DOM */\n onlyRenderActiveTab: PropTypes.bool.description(\n 'Only renders the active tab in the DOM',\n ),\n /** Mobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool.description(\n 'Mobile only flexible tabs mode',\n ),\n /** Mobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool.description('Mobile only fixed tabs mode'),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n /** Activate carousel behavior */\n withCarousel: PropTypes.bool.description('Activate carousel behavior'),\n /** The active tabId */\n activeTab: PropTypes.string.description('The active tabId'),\n /** tabs children */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.instanceOf([\n PropTypes.instanceOf(DSTab),\n PropTypes.array,\n ]),\n }),\n ).isRequired.description('tabs children'),\n /** Aria label for the list */\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list'),\n /** Additional properties for the container */\n containerProps: PropTypes.object.description(\n 'Additional properties for the container',\n ),\n /** REF */\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('REF'),\n /** internal ref to handle keyboard a11y behavior */\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n /** internal ref to handle keyboard a11y behavior */\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n};\n\nDSTabs.propTypes = props;\nconst DSTabsWithSchema = describe(DSTabs);\nDSTabsWithSchema.propTypes = props;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],"names":["DSTabs","containerProps","innerRef","animated","enableMouseEvents","allowTextSelection","onTabChange","tabsListAriaLabel","type","TabTypes","NORMAL","tabBarExtraContent","undefined","tabs","children","onlyRenderActiveTab","activeTab","withCarousel","firstSubtabRef","lastTabRef","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","props","PropTypes","bool","description","func","oneOf","element","string","arrayOf","shape","instanceOf","DSTab","array","isRequired","object","oneOfType","current","any","propTypes","DSTabsWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;IAOMA,MAAM,GAAG,SAATA,MAAS;
|
|
1
|
+
{"version":3,"file":"DSTabs.js","sources":["../../src/DSTabs.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { TabTypes } from './TabTypes';\nimport TabsImpl from './TabsImpl';\nimport DSTab from './DSTab';\n\nconst DSTabs = ({\n containerProps = {},\n innerRef,\n animated = true,\n enableMouseEvents = false,\n allowTextSelection = false,\n onTabChange = () => null,\n tabsListAriaLabel = 'Tab list',\n type = TabTypes.NORMAL,\n tabBarExtraContent = undefined,\n children: tabs,\n onlyRenderActiveTab = false,\n activeTab,\n withCarousel = false,\n firstSubtabRef,\n lastTabRef,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile = false,\n}) => (\n <TabsImpl\n activeTab={activeTab}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRef}\n allowTextSelection={allowTextSelection}\n animated={animated}\n containerProps={containerProps}\n enableMouseEvents={enableMouseEvents}\n innerRef={innerRef}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={onTabChange}\n tabBarExtraContent={tabBarExtraContent}\n tabsListAriaLabel={tabsListAriaLabel}\n type={type}\n withCarousel={withCarousel}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n isDSMobile={isDSMobile}\n >\n {tabs}\n </TabsImpl>\n);\n\nconst props = {\n /** Whether the tab transition should animate or not */\n animated: PropTypes.bool.description(\n 'Whether the tab transition should animate or not',\n ),\n /** Enables tab transition with mouse drag events */\n enableMouseEvents: PropTypes.bool.description(\n 'Enables tab transition with mouse drag events',\n ),\n /** Allow text selection when mouse drag events are active */\n allowTextSelection: PropTypes.bool.description(\n 'Allow text selection when mouse drag events are active',\n ),\n /** Handler when a user clicks on a different tab */\n onTabChange: PropTypes.func.description(\n 'Handler when a user clicks on a different tab',\n ),\n /** Tab type */\n type: PropTypes.oneOf(['normal', 'subtabs']).description('Tab type'),\n /** Extra content next to the tabs pills */\n tabBarExtraContent: PropTypes.element.description(\n 'Extra content next to the tabs pills',\n ),\n /** Only renders the active tab in the DOM */\n onlyRenderActiveTab: PropTypes.bool.description(\n 'Only renders the active tab in the DOM',\n ),\n /** Mobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool.description(\n 'Mobile only flexible tabs mode',\n ),\n /** Mobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool.description('Mobile only fixed tabs mode'),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool.description(\n \"Whether or not it's a ds-tab from DSMobile tabs\",\n ),\n /** Activate carousel behavior */\n withCarousel: PropTypes.bool.description('Activate carousel behavior'),\n /** The active tabId */\n activeTab: PropTypes.string.description('The active tabId'),\n /** tabs children */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.instanceOf([\n PropTypes.instanceOf(DSTab),\n PropTypes.array,\n ]),\n }),\n ).isRequired.description('tabs children'),\n /** Aria label for the list */\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list'),\n /** Additional properties for the container */\n containerProps: PropTypes.object.description(\n 'Additional properties for the container',\n ),\n /** REF */\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('REF'),\n /** internal ref to handle keyboard a11y behavior */\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n /** internal ref to handle keyboard a11y behavior */\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]).description('internal ref to handle keyboard a11y behavior'),\n};\n\nDSTabs.propTypes = props;\nconst DSTabsWithSchema = describe(DSTabs);\nDSTabsWithSchema.propTypes = props;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],"names":["DSTabs","containerProps","innerRef","animated","enableMouseEvents","allowTextSelection","onTabChange","tabsListAriaLabel","type","TabTypes","NORMAL","tabBarExtraContent","undefined","tabs","children","onlyRenderActiveTab","activeTab","withCarousel","firstSubtabRef","lastTabRef","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","props","PropTypes","bool","description","func","oneOf","element","string","arrayOf","shape","instanceOf","DSTab","array","isRequired","object","oneOfType","current","any","propTypes","DSTabsWithSchema","describe"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelContainer.js","sources":["../../src/PanelContainer.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nconst blockName = 'tabs-panels';\n\nconst PC = aggregatedClasses('div')(blockName, 'panel');\n\nconst PanelContainer = ({ children, lastTabRef, firstSubtabRef, ...rest }) => {\n // inject ref to handle focus on first subtab child\n const child = React.Children.map(children, (c, i) =>\n i === 0 && c ? React.cloneElement(c, { firstSubtabRef, lastTabRef }) : c,\n );\n return <PC {...rest}>{child}</PC>;\n};\n\nPanelContainer.propTypes = {\n children: PropTypes.any,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default PanelContainer;\n"],"names":["blockName","PC","aggregatedClasses","PanelContainer","children","lastTabRef","firstSubtabRef","rest","child","React","Children","map","c","i","cloneElement","propTypes","PropTypes","any","oneOfType","func","shape","current"],"mappings":";;;;;;AAGA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,EAAE,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,EAAoC,OAApC,CAAX;;IAEMG,cAAc,GAAG,SAAjBA,cAAiB,OAAuD;
|
|
1
|
+
{"version":3,"file":"PanelContainer.js","sources":["../../src/PanelContainer.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nconst blockName = 'tabs-panels';\n\nconst PC = aggregatedClasses('div')(blockName, 'panel');\n\nconst PanelContainer = ({ children, lastTabRef, firstSubtabRef, ...rest }) => {\n // inject ref to handle focus on first subtab child\n const child = React.Children.map(children, (c, i) =>\n i === 0 && c ? React.cloneElement(c, { firstSubtabRef, lastTabRef }) : c,\n );\n return <PC {...rest}>{child}</PC>;\n};\n\nPanelContainer.propTypes = {\n children: PropTypes.any,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default PanelContainer;\n"],"names":["blockName","PC","aggregatedClasses","PanelContainer","children","lastTabRef","firstSubtabRef","rest","child","React","Children","map","c","i","cloneElement","propTypes","PropTypes","any","oneOfType","func","shape","current"],"mappings":";;;;;;AAGA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,EAAE,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,EAAoC,OAApC,CAAX;;IAEMG,cAAc,GAAG,SAAjBA,cAAiB,OAAuD;EAAA,IAApDC,QAAoD,QAApDA,QAAoD;MAA1CC,UAA0C,QAA1CA,UAA0C;MAA9BC,cAA8B,QAA9BA,cAA8B;MAAXC,IAAW;;;EAE5E,IAAMC,KAAK,GAAGC,KAAK,CAACC,QAAN,CAAeC,GAAf,CAAmBP,QAAnB,EAA6B,UAACQ,CAAD,EAAIC,CAAJ;IAAA,OACzCA,CAAC,KAAK,CAAN,IAAWD,CAAX,gBAAeH,KAAK,CAACK,YAAN,CAAmBF,CAAnB,EAAsB;MAAEN,cAAc,EAAdA,cAAF;MAAkBD,UAAU,EAAVA;KAAxC,CAAf,GAAuEO,CAD9B;GAA7B,CAAd;EAGA,oBAAO,oBAAC,EAAD,EAAQL,IAAR,EAAeC,KAAf,CAAP;AACD;;AAEDL,cAAc,CAACY,SAAf,GAA2B;EACzBX,QAAQ,EAAEY,SAAS,CAACC,GADK;EAEzBX,cAAc,EAAEU,SAAS,CAACE,SAAV,CAAoB,CAClCF,SAAS,CAACG,IADwB,EAElCH,SAAS,CAACI,KAAV,CAAgB;IAAEC,OAAO,EAAEL,SAAS,CAACC;GAArC,CAFkC,CAApB,CAFS;EAMzBZ,UAAU,EAAEW,SAAS,CAACE,SAAV,CAAoB,CAC9BF,SAAS,CAACG,IADoB,EAE9BH,SAAS,CAACI,KAAV,CAAgB;IAAEC,OAAO,EAAEL,SAAS,CAACC;GAArC,CAF8B,CAApB;AANa,CAA3B;;;;"}
|
package/esm/SubTabBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubTabBar.js","sources":["../../src/SubTabBar.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabBar from './TabBar';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\n\nconst SubTabList = aggregatedClasses('div')(\n blockName,\n 'subtabs-list',\n ({ withCarousel }) => ({ carousel: withCarousel }),\n);\n\nconst SubTabBar = ({\n withCarousel,\n tabs = [],\n activeTab = '',\n onTabClick = () => null,\n firstSubtabRef,\n handleUpArrow,\n}) => (\n <TabBar\n activeTab={activeTab}\n onTabClick={onTabClick}\n handleUpArrow={handleUpArrow}\n firstSubtabRef={firstSubtabRef}\n renderCustomTabBar={({ tabsComponents, innerRef }) => (\n <SubTabList\n withCarousel={withCarousel}\n innerRef={innerRef}\n data-testid=\"subtabs-list\"\n >\n {withCarousel ? <Carousel>{tabsComponents}</Carousel> : tabsComponents}\n </SubTabList>\n )}\n showSelectionIndicator={false}\n showSeparator\n tabs={tabs}\n />\n);\n\nSubTabBar.propTypes = {\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n activeTab: PropTypes.string,\n onTabClick: PropTypes.func.isRequired,\n withCarousel: PropTypes.bool,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default SubTabBar;\n"],"names":["blockName","SubTabList","aggregatedClasses","withCarousel","carousel","SubTabBar","tabs","activeTab","onTabClick","firstSubtabRef","handleUpArrow","tabsComponents","innerRef","propTypes","PropTypes","arrayOf","element","isRequired","string","func","bool","oneOfType","shape","current","any"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,cAAlB;AAEA,IAAMC,UAAU,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CACjBF,SADiB,EAEjB,cAFiB,EAGjB;
|
|
1
|
+
{"version":3,"file":"SubTabBar.js","sources":["../../src/SubTabBar.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabBar from './TabBar';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\n\nconst SubTabList = aggregatedClasses('div')(\n blockName,\n 'subtabs-list',\n ({ withCarousel }) => ({ carousel: withCarousel }),\n);\n\nconst SubTabBar = ({\n withCarousel,\n tabs = [],\n activeTab = '',\n onTabClick = () => null,\n firstSubtabRef,\n handleUpArrow,\n}) => (\n <TabBar\n activeTab={activeTab}\n onTabClick={onTabClick}\n handleUpArrow={handleUpArrow}\n firstSubtabRef={firstSubtabRef}\n renderCustomTabBar={({ tabsComponents, innerRef }) => (\n <SubTabList\n withCarousel={withCarousel}\n innerRef={innerRef}\n data-testid=\"subtabs-list\"\n >\n {withCarousel ? <Carousel>{tabsComponents}</Carousel> : tabsComponents}\n </SubTabList>\n )}\n showSelectionIndicator={false}\n showSeparator\n tabs={tabs}\n />\n);\n\nSubTabBar.propTypes = {\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n activeTab: PropTypes.string,\n onTabClick: PropTypes.func.isRequired,\n withCarousel: PropTypes.bool,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n};\n\nexport default SubTabBar;\n"],"names":["blockName","SubTabList","aggregatedClasses","withCarousel","carousel","SubTabBar","tabs","activeTab","onTabClick","firstSubtabRef","handleUpArrow","tabsComponents","innerRef","propTypes","PropTypes","arrayOf","element","isRequired","string","func","bool","oneOfType","shape","current","any"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,cAAlB;AAEA,IAAMC,UAAU,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CACjBF,SADiB,EAEjB,cAFiB,EAGjB;EAAA,IAAGG,YAAH,QAAGA,YAAH;EAAA,OAAuB;IAAEC,QAAQ,EAAED;GAAnC;AAAA,CAHiB,CAAnB;;IAMME,SAAS,GAAG,SAAZA,SAAY;EAAA,IAChBF,YADgB,SAChBA,YADgB;yBAEhBG,IAFgB;MAEhBA,IAFgB,2BAET,EAFS;8BAGhBC,SAHgB;MAGhBA,SAHgB,gCAGJ,EAHI;+BAIhBC,UAJgB;MAIhBA,UAJgB,iCAIH;IAAA,OAAM,IAAN;GAJG;MAKhBC,cALgB,SAKhBA,cALgB;MAMhBC,aANgB,SAMhBA,aANgB;EAAA,oBAQhB,oBAAC,MAAD;IACE,SAAS,EAAEH,SADb;IAEE,UAAU,EAAEC,UAFd;IAGE,aAAa,EAAEE,aAHjB;IAIE,cAAc,EAAED,cAJlB;IAKE,kBAAkB,EAAE;MAAA,IAAGE,cAAH,SAAGA,cAAH;UAAmBC,QAAnB,SAAmBA,QAAnB;MAAA,oBAClB,oBAAC,UAAD;QACE,YAAY,EAAET,YADhB;QAEE,QAAQ,EAAES,QAFZ;QAGE,eAAY;SAEXT,YAAY,gBAAG,oBAAC,QAAD,QAAWQ,cAAX,CAAH,GAA2CA,cAL1D,CADkB;KALtB;IAcE,sBAAsB,EAAE,KAd1B;IAeE,aAAa,MAff;IAgBE,IAAI,EAAEL;IAxBQ;AAAA;;AA4BlBD,SAAS,CAACQ,SAAV,GAAsB;EACpBP,IAAI,EAAEQ,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,OAA5B,EAAqCC,UADvB;EAEpBV,SAAS,EAAEO,SAAS,CAACI,MAFD;EAGpBV,UAAU,EAAEM,SAAS,CAACK,IAAV,CAAeF,UAHP;EAIpBd,YAAY,EAAEW,SAAS,CAACM,IAJJ;EAKpBV,aAAa,EAAEI,SAAS,CAACK,IALL;EAMpBV,cAAc,EAAEK,SAAS,CAACO,SAAV,CAAoB,CAClCP,SAAS,CAACK,IADwB,EAElCL,SAAS,CAACQ,KAAV,CAAgB;IAAEC,OAAO,EAAET,SAAS,CAACU;GAArC,CAFkC,CAApB;AANI,CAAtB;;;;"}
|
package/esm/TabBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.js","sources":["../../src/TabBar.tsx"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { debounce } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport RequiredMark from '@elliemae/ds-form/RequiredMark';\nimport memoizeOne from 'memoize-one';\nimport { ResizeObserver } from 'resize-observer';\nimport styled from 'styled-components';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\nconst gradientWidth = 24;\n\nconst StyledTabWrapper = styled.div`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ flexibleTabsHeaders }) => (flexibleTabsHeaders ? '' : 'overflow-x: hidden')};\n`;\n\nconst StyledTabList = aggregatedClasses('div')(\n blockName,\n 'list',\n ({ withCarousel, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, withLeftGradients, withRightGradients }) => ({\n carousel: withCarousel,\n 'flexible-table-headers': isDSMobile && flexibleTabsHeaders,\n 'fixed-table-headers': isDSMobile && fixedTabsHeaders,\n 'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,\n 'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients,\n }),\n {\n propsToRemoveFromFinalElement: [\n 'withCarousel',\n 'flexibleTabsHeaders',\n 'fixedTabsHeaders',\n 'withLeftGradients',\n 'withRightGradients',\n 'isDSMobile',\n ],\n },\n);\nconst TabContainer = aggregatedClasses('button', {\n role: 'tab',\n})(blockName, 'tab', ({ isActive, showSeparator, disabled }) => ({\n active: isActive,\n separator: showSeparator,\n disabled,\n}));\nconst SelectionIndicator = aggregatedClasses('div')(blockName, 'selection-indicator');\n\nclass TabBar extends Component {\n constructor(props) {\n super(props);\n this.tabListRef = React.createRef();\n this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());\n this.state = {\n indicatorStyle: null,\n withLeftGradients: false,\n withRightGradients: false,\n };\n this.setIndicatorStyle = this.setIndicatorStyle.bind(this);\n this.getIndicatorStyles = this.getIndicatorStyles.bind(this);\n this.handleGradients = this.handleGradients.bind(this);\n this.handleTabsHeadersHorizontalScroll = this.handleTabsHeadersHorizontalScroll.bind(this);\n this.tabsRef = {};\n }\n\n componentDidMount() {\n const { showSelectionIndicator } = this.props;\n this.resizeObserver.observe(this.tabListRef.current);\n if (showSelectionIndicator) {\n this.setIndicatorStyle();\n }\n\n window.addEventListener('resize', this.handleGradients);\n window.addEventListener('orientationchange', this.handleGradients);\n this.handleGradients();\n }\n\n componentDidUpdate(prevProps) {\n const { activeTab, showSelectionIndicator } = this.props;\n\n if (showSelectionIndicator && prevProps.activeTab !== activeTab) {\n this.setIndicatorStyle(activeTab);\n }\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.tabListRef.current);\n window.removeEventListener('resize', this.handleGradients);\n window.removeEventListener('orientationchange', this.handleGradients);\n }\n\n handleGradients() {\n const { scrollLeft, scrollWidth, clientWidth } = this.tabListRef.current;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n this.setState({ withLeftGradients, withRightGradients });\n }\n\n shouldHaveLeftGradient(scrollLeft, gWidth) {\n return Math.abs(scrollLeft) > gWidth;\n }\n\n // eslint-disable-next-line max-params\n shouldHaveRightGradient(scrollLeft, gWidth, clientWidth, scrollWidth) {\n return Math.abs(scrollLeft) <= scrollWidth - (clientWidth + gWidth);\n }\n\n setIndicatorStyle() {\n const { activeTab } = this.props;\n setTimeout(\n () =>\n this.setState({\n indicatorStyle: this.getIndicatorStyles(activeTab),\n }),\n 100,\n );\n }\n\n getActiveTabElement(activeTab) {\n const tabListEl = this.tabListRef.current;\n\n const tabSelector = `[data-tab-id=\"${activeTab}\"]`;\n\n return tabListEl && tabListEl.querySelector(tabSelector);\n }\n\n isElementVisible(el, holder) {\n const { left, right, width } = el.getBoundingClientRect();\n const holderRect = holder.getBoundingClientRect();\n\n return left <= holderRect.left ? holderRect.left - left <= width : right - holderRect.right <= width;\n }\n\n getVisibleDimensions(node, referenceNode) {\n const pos = node.getBoundingClientRect();\n const referencePos = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referencePos.left + referenceNode.clientWidth - pos.left,\n node.clientWidth - (referencePos.left - pos.left),\n ),\n height: Math.min(\n node.clientHeight,\n referencePos.top + referenceNode.clientHeight - pos.top,\n node.clientHeight - (referencePos.top - pos.top),\n ),\n };\n }\n\n getIndicatorStyles(activeTab) {\n const tabListEl = this.tabListRef.current;\n const { withCarousel } = this.props;\n const activeTabEl = this.getActiveTabElement(activeTab);\n\n if (!activeTabEl || !this.isElementVisible(activeTabEl, tabListEl)) return null;\n\n const { clientHeight, clientWidth, offsetTop, offsetLeft } = activeTabEl;\n const { left } = activeTabEl.getBoundingClientRect();\n const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;\n const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width + 2 : clientWidth + 2;\n return {\n height: clientHeight,\n left: `${Math.floor(leftOff)}px`, // using left and top for ie compatibility\n top: `${Math.floor(offsetTop)}px`,\n width,\n };\n }\n\n handleTabClick = (tabId, e) => {\n const { tabListRef, props } = this;\n const { onTabClick, flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const el = e.target;\n const { offsetLeft } = el;\n const { width: elWidth } = el.getBoundingClientRect();\n const { width: listWidth } = tabListDomEl.getBoundingClientRect();\n const extraSideSpace = listWidth - elWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n tabListDomEl.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n }\n e.preventDefault();\n onTabClick(tabId);\n };\n\n handleKeyPress = (tabId, e, index) => {\n const {\n tabs,\n handleDownArrow,\n handleUpArrow,\n // onTabClick,\n } = this.props;\n if (e.keyCode === 39) {\n const nextTab = tabs[index + 1];\n if (!nextTab && handleDownArrow) handleDownArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index + 1]?.focus();\n }\n if (e.keyCode === 37) {\n const nextTab = tabs[index - 1];\n if (!nextTab && handleUpArrow) handleUpArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index - 1]?.focus();\n }\n\n if (e.keyCode === 40 && handleDownArrow) {\n handleDownArrow(e);\n }\n\n if (e.keyCode === 38 && handleUpArrow) {\n handleUpArrow(e);\n }\n };\n\n handleTabsHeadersHorizontalScroll = debounce(() => {\n const { tabListRef, props } = this;\n const { flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const { scrollLeft, scrollWidth, clientWidth } = tabListDomEl;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n\n this.setState({\n withLeftGradients,\n withRightGradients,\n });\n }\n }, 50);\n\n renderTabs = memoizeOne((activeTab, tabs) => {\n const { showSeparator } = this.props;\n return React.Children.map(\n tabs,\n (tab, index) => {\n const { tabId, title, style, required, disabled } = tab.props;\n const isActive = activeTab === tabId;\n return [\n <TabContainer\n key={tabId}\n // eslint-disable-next-line no-return-assign\n ref={(t) => {\n this.tabsRef[index] = t;\n if (index === 0 && this.props.firstSubtabRef) {\n this.props.firstSubtabRef.current = t;\n }\n if (index === tabs.length - 1 && this.props.lastTabRef) {\n this.props.lastTabRef.current = t;\n }\n }}\n aria-controls={tabId}\n aria-selected={isActive}\n aria-disabled={!!disabled}\n classProps={{ isActive, showSeparator, disabled }}\n data-tab-id={tabId}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) this.handleTabClick(tabId, e, index);\n }}\n onKeyDown={(e) => {\n if (!disabled) this.handleKeyPress(tabId, e, index);\n }}\n style={style}\n tabIndex={0}\n >\n {title}\n <RequiredMark required={required} />\n </TabContainer>,\n ];\n },\n null,\n );\n });\n\n render() {\n const { id, tabs, activeTab, renderCustomTabBar, withCarousel, isDSMobile, flexibleTabsHeaders, fixedTabsHeaders } =\n this.props;\n const { indicatorStyle, withLeftGradients, withRightGradients } = this.state;\n\n if (renderCustomTabBar) {\n return renderCustomTabBar({\n innerRef: this.tabListRef,\n withCarousel,\n tabsComponents: this.renderTabs(activeTab, tabs),\n });\n }\n\n const shouldUseCarousel = !isDSMobile && withCarousel;\n\n return (\n <>\n <StyledTabList\n withCarousel={withCarousel}\n aria-label={id}\n innerRef={this.tabListRef}\n role=\"tablist\"\n data-testid=\"tab-list\"\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n withLeftGradients={withLeftGradients}\n withRightGradients={withRightGradients}\n fixedTabsHeaders={fixedTabsHeaders}\n onScroll={this.handleTabsHeadersHorizontalScroll}\n style={{ width: '100%' }}\n >\n <StyledTabWrapper\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n >\n {shouldUseCarousel ? (\n <Carousel onScroll={this.setIndicatorStyle}>{this.renderTabs(activeTab, tabs)}</Carousel>\n ) : null}\n {!shouldUseCarousel ? this.renderTabs(activeTab, tabs) : null}\n <SelectionIndicator style={indicatorStyle} />\n </StyledTabWrapper>\n </StyledTabList>\n </>\n );\n }\n}\n\nTabBar.defaultProps = {\n showSelectionIndicator: true,\n showSeparator: false,\n isDSMobile: false,\n};\n\nTabBar.propTypes = {\n /** Separator between tabs */\n showSeparator: PropTypes.bool,\n /** Blue border under selected tab */\n showSelectionIndicator: PropTypes.bool,\n /** Tab list id */\n id: PropTypes.string,\n /** Array of tabs */\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Renders a custom tabbar */\n renderCustomTabBar: PropTypes.func,\n /** tabId of active tab */\n activeTab: PropTypes.string,\n /** on tab click callback */\n onTabClick: PropTypes.func,\n /** carousel behavior */\n withCarousel: PropTypes.bool,\n handleDownArrow: PropTypes.func,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n lastTabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n /** Whether we are in mobile mode or not */\n};\n\nexport default TabBar;\n"],"names":["blockName","gradientWidth","StyledTabWrapper","styled","div","flexibleTabsHeaders","StyledTabList","aggregatedClasses","withCarousel","fixedTabsHeaders","isDSMobile","withLeftGradients","withRightGradients","carousel","propsToRemoveFromFinalElement","TabContainer","role","isActive","showSeparator","disabled","active","separator","SelectionIndicator","TabBar","props","handleTabClick","tabId","e","tabListRef","onTabClick","tabListDomEl","current","el","target","offsetLeft","getBoundingClientRect","elWidth","width","listWidth","extraSideSpace","leftOffsetToCenter","centeredLeftOffset","scrollTo","top","left","behavior","preventDefault","handleKeyPress","index","tabs","handleDownArrow","handleUpArrow","keyCode","nextTab","tabsRef","focus","handleTabsHeadersHorizontalScroll","debounce","scrollLeft","scrollWidth","clientWidth","shouldHaveLeftGradient","shouldHaveRightGradient","setState","renderTabs","memoizeOne","activeTab","React","Children","map","tab","title","style","required","t","firstSubtabRef","length","lastTabRef","createRef","resizeObserver","ResizeObserver","setIndicatorStyle","state","indicatorStyle","bind","getIndicatorStyles","handleGradients","showSelectionIndicator","observe","window","addEventListener","prevProps","unobserve","removeEventListener","gWidth","Math","abs","setTimeout","tabListEl","tabSelector","querySelector","holder","right","holderRect","node","referenceNode","pos","referencePos","min","height","clientHeight","activeTabEl","getActiveTabElement","isElementVisible","offsetTop","leftOff","max","getVisibleDimensions","floor","id","renderCustomTabBar","innerRef","tabsComponents","shouldUseCarousel","Component","defaultProps","propTypes","PropTypes","bool","string","arrayOf","element","isRequired","func","oneOfType","shape","any"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabBar.js","sources":["../../src/TabBar.tsx"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { debounce } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport RequiredMark from '@elliemae/ds-form/RequiredMark';\nimport memoizeOne from 'memoize-one';\nimport { ResizeObserver } from 'resize-observer';\nimport styled from 'styled-components';\nimport Carousel from './Carousel';\n\nconst blockName = 'tabs-tab-bar';\nconst gradientWidth = 24;\n\nconst StyledTabWrapper = styled.div`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ flexibleTabsHeaders }) => (flexibleTabsHeaders ? '' : 'overflow-x: hidden')};\n`;\n\nconst StyledTabList = aggregatedClasses('div')(\n blockName,\n 'list',\n ({ withCarousel, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, withLeftGradients, withRightGradients }) => ({\n carousel: withCarousel,\n 'flexible-table-headers': isDSMobile && flexibleTabsHeaders,\n 'fixed-table-headers': isDSMobile && fixedTabsHeaders,\n 'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,\n 'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients,\n }),\n {\n propsToRemoveFromFinalElement: [\n 'withCarousel',\n 'flexibleTabsHeaders',\n 'fixedTabsHeaders',\n 'withLeftGradients',\n 'withRightGradients',\n 'isDSMobile',\n ],\n },\n);\nconst TabContainer = aggregatedClasses('button', {\n role: 'tab',\n})(blockName, 'tab', ({ isActive, showSeparator, disabled }) => ({\n active: isActive,\n separator: showSeparator,\n disabled,\n}));\nconst SelectionIndicator = aggregatedClasses('div')(blockName, 'selection-indicator');\n\nclass TabBar extends Component {\n constructor(props) {\n super(props);\n this.tabListRef = React.createRef();\n this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());\n this.state = {\n indicatorStyle: null,\n withLeftGradients: false,\n withRightGradients: false,\n };\n this.setIndicatorStyle = this.setIndicatorStyle.bind(this);\n this.getIndicatorStyles = this.getIndicatorStyles.bind(this);\n this.handleGradients = this.handleGradients.bind(this);\n this.handleTabsHeadersHorizontalScroll = this.handleTabsHeadersHorizontalScroll.bind(this);\n this.tabsRef = {};\n }\n\n componentDidMount() {\n const { showSelectionIndicator } = this.props;\n this.resizeObserver.observe(this.tabListRef.current);\n if (showSelectionIndicator) {\n this.setIndicatorStyle();\n }\n\n window.addEventListener('resize', this.handleGradients);\n window.addEventListener('orientationchange', this.handleGradients);\n this.handleGradients();\n }\n\n componentDidUpdate(prevProps) {\n const { activeTab, showSelectionIndicator } = this.props;\n\n if (showSelectionIndicator && prevProps.activeTab !== activeTab) {\n this.setIndicatorStyle(activeTab);\n }\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.tabListRef.current);\n window.removeEventListener('resize', this.handleGradients);\n window.removeEventListener('orientationchange', this.handleGradients);\n }\n\n handleGradients() {\n const { scrollLeft, scrollWidth, clientWidth } = this.tabListRef.current;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n this.setState({ withLeftGradients, withRightGradients });\n }\n\n shouldHaveLeftGradient(scrollLeft, gWidth) {\n return Math.abs(scrollLeft) > gWidth;\n }\n\n // eslint-disable-next-line max-params\n shouldHaveRightGradient(scrollLeft, gWidth, clientWidth, scrollWidth) {\n return Math.abs(scrollLeft) <= scrollWidth - (clientWidth + gWidth);\n }\n\n setIndicatorStyle() {\n const { activeTab } = this.props;\n setTimeout(\n () =>\n this.setState({\n indicatorStyle: this.getIndicatorStyles(activeTab),\n }),\n 100,\n );\n }\n\n getActiveTabElement(activeTab) {\n const tabListEl = this.tabListRef.current;\n\n const tabSelector = `[data-tab-id=\"${activeTab}\"]`;\n\n return tabListEl && tabListEl.querySelector(tabSelector);\n }\n\n isElementVisible(el, holder) {\n const { left, right, width } = el.getBoundingClientRect();\n const holderRect = holder.getBoundingClientRect();\n\n return left <= holderRect.left ? holderRect.left - left <= width : right - holderRect.right <= width;\n }\n\n getVisibleDimensions(node, referenceNode) {\n const pos = node.getBoundingClientRect();\n const referencePos = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referencePos.left + referenceNode.clientWidth - pos.left,\n node.clientWidth - (referencePos.left - pos.left),\n ),\n height: Math.min(\n node.clientHeight,\n referencePos.top + referenceNode.clientHeight - pos.top,\n node.clientHeight - (referencePos.top - pos.top),\n ),\n };\n }\n\n getIndicatorStyles(activeTab) {\n const tabListEl = this.tabListRef.current;\n const { withCarousel } = this.props;\n const activeTabEl = this.getActiveTabElement(activeTab);\n\n if (!activeTabEl || !this.isElementVisible(activeTabEl, tabListEl)) return null;\n\n const { clientHeight, clientWidth, offsetTop, offsetLeft } = activeTabEl;\n const { left } = activeTabEl.getBoundingClientRect();\n const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;\n const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width + 2 : clientWidth + 2;\n return {\n height: clientHeight,\n left: `${Math.floor(leftOff)}px`, // using left and top for ie compatibility\n top: `${Math.floor(offsetTop)}px`,\n width,\n };\n }\n\n handleTabClick = (tabId, e) => {\n const { tabListRef, props } = this;\n const { onTabClick, flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const el = e.target;\n const { offsetLeft } = el;\n const { width: elWidth } = el.getBoundingClientRect();\n const { width: listWidth } = tabListDomEl.getBoundingClientRect();\n const extraSideSpace = listWidth - elWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n tabListDomEl.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n }\n e.preventDefault();\n onTabClick(tabId);\n };\n\n handleKeyPress = (tabId, e, index) => {\n const {\n tabs,\n handleDownArrow,\n handleUpArrow,\n // onTabClick,\n } = this.props;\n if (e.keyCode === 39) {\n const nextTab = tabs[index + 1];\n if (!nextTab && handleDownArrow) handleDownArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index + 1]?.focus();\n }\n if (e.keyCode === 37) {\n const nextTab = tabs[index - 1];\n if (!nextTab && handleUpArrow) handleUpArrow(e);\n if (!nextTab) return;\n // const { props } = nextTab\n // onTabClick(props.tabId)\n this.tabsRef[index - 1]?.focus();\n }\n\n if (e.keyCode === 40 && handleDownArrow) {\n handleDownArrow(e);\n }\n\n if (e.keyCode === 38 && handleUpArrow) {\n handleUpArrow(e);\n }\n };\n\n handleTabsHeadersHorizontalScroll = debounce(() => {\n const { tabListRef, props } = this;\n const { flexibleTabsHeaders, isDSMobile } = props;\n if (isDSMobile && flexibleTabsHeaders) {\n const tabListDomEl = tabListRef.current;\n const { scrollLeft, scrollWidth, clientWidth } = tabListDomEl;\n\n const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);\n\n const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);\n\n this.setState({\n withLeftGradients,\n withRightGradients,\n });\n }\n }, 50);\n\n renderTabs = memoizeOne((activeTab, tabs) => {\n const { showSeparator } = this.props;\n return React.Children.map(\n tabs,\n (tab, index) => {\n const { tabId, title, style, required, disabled } = tab.props;\n const isActive = activeTab === tabId;\n return [\n <TabContainer\n key={tabId}\n // eslint-disable-next-line no-return-assign\n ref={(t) => {\n this.tabsRef[index] = t;\n if (index === 0 && this.props.firstSubtabRef) {\n this.props.firstSubtabRef.current = t;\n }\n if (index === tabs.length - 1 && this.props.lastTabRef) {\n this.props.lastTabRef.current = t;\n }\n }}\n aria-controls={tabId}\n aria-selected={isActive}\n aria-disabled={!!disabled}\n classProps={{ isActive, showSeparator, disabled }}\n data-tab-id={tabId}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) this.handleTabClick(tabId, e, index);\n }}\n onKeyDown={(e) => {\n if (!disabled) this.handleKeyPress(tabId, e, index);\n }}\n style={style}\n tabIndex={0}\n >\n {title}\n <RequiredMark required={required} />\n </TabContainer>,\n ];\n },\n null,\n );\n });\n\n render() {\n const { id, tabs, activeTab, renderCustomTabBar, withCarousel, isDSMobile, flexibleTabsHeaders, fixedTabsHeaders } =\n this.props;\n const { indicatorStyle, withLeftGradients, withRightGradients } = this.state;\n\n if (renderCustomTabBar) {\n return renderCustomTabBar({\n innerRef: this.tabListRef,\n withCarousel,\n tabsComponents: this.renderTabs(activeTab, tabs),\n });\n }\n\n const shouldUseCarousel = !isDSMobile && withCarousel;\n\n return (\n <>\n <StyledTabList\n withCarousel={withCarousel}\n aria-label={id}\n innerRef={this.tabListRef}\n role=\"tablist\"\n data-testid=\"tab-list\"\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n withLeftGradients={withLeftGradients}\n withRightGradients={withRightGradients}\n fixedTabsHeaders={fixedTabsHeaders}\n onScroll={this.handleTabsHeadersHorizontalScroll}\n style={{ width: '100%' }}\n >\n <StyledTabWrapper\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n >\n {shouldUseCarousel ? (\n <Carousel onScroll={this.setIndicatorStyle}>{this.renderTabs(activeTab, tabs)}</Carousel>\n ) : null}\n {!shouldUseCarousel ? this.renderTabs(activeTab, tabs) : null}\n <SelectionIndicator style={indicatorStyle} />\n </StyledTabWrapper>\n </StyledTabList>\n </>\n );\n }\n}\n\nTabBar.defaultProps = {\n showSelectionIndicator: true,\n showSeparator: false,\n isDSMobile: false,\n};\n\nTabBar.propTypes = {\n /** Separator between tabs */\n showSeparator: PropTypes.bool,\n /** Blue border under selected tab */\n showSelectionIndicator: PropTypes.bool,\n /** Tab list id */\n id: PropTypes.string,\n /** Array of tabs */\n tabs: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Renders a custom tabbar */\n renderCustomTabBar: PropTypes.func,\n /** tabId of active tab */\n activeTab: PropTypes.string,\n /** on tab click callback */\n onTabClick: PropTypes.func,\n /** carousel behavior */\n withCarousel: PropTypes.bool,\n handleDownArrow: PropTypes.func,\n handleUpArrow: PropTypes.func,\n firstSubtabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n lastTabRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n /** Whether we are in mobile mode or not */\n};\n\nexport default TabBar;\n"],"names":["blockName","gradientWidth","StyledTabWrapper","styled","div","flexibleTabsHeaders","StyledTabList","aggregatedClasses","withCarousel","fixedTabsHeaders","isDSMobile","withLeftGradients","withRightGradients","carousel","propsToRemoveFromFinalElement","TabContainer","role","isActive","showSeparator","disabled","active","separator","SelectionIndicator","TabBar","props","handleTabClick","tabId","e","tabListRef","onTabClick","tabListDomEl","current","el","target","offsetLeft","getBoundingClientRect","elWidth","width","listWidth","extraSideSpace","leftOffsetToCenter","centeredLeftOffset","scrollTo","top","left","behavior","preventDefault","handleKeyPress","index","tabs","handleDownArrow","handleUpArrow","keyCode","nextTab","tabsRef","focus","handleTabsHeadersHorizontalScroll","debounce","scrollLeft","scrollWidth","clientWidth","shouldHaveLeftGradient","shouldHaveRightGradient","setState","renderTabs","memoizeOne","activeTab","React","Children","map","tab","title","style","required","t","firstSubtabRef","length","lastTabRef","createRef","resizeObserver","ResizeObserver","setIndicatorStyle","state","indicatorStyle","bind","getIndicatorStyles","handleGradients","showSelectionIndicator","observe","window","addEventListener","prevProps","unobserve","removeEventListener","gWidth","Math","abs","setTimeout","tabListEl","tabSelector","querySelector","holder","right","holderRect","node","referenceNode","pos","referencePos","min","height","clientHeight","activeTabEl","getActiveTabElement","isElementVisible","offsetTop","leftOff","max","getVisibleDimensions","floor","id","renderCustomTabBar","innerRef","tabsComponents","shouldUseCarousel","Component","defaultProps","propTypes","PropTypes","bool","string","arrayOf","element","isRequired","func","oneOfType","shape","any"],"mappings":"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"}
|
package/esm/TabTypes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabTypes.js","sources":["../../src/TabTypes.tsx"],"sourcesContent":["export const TabTypes = {\n NORMAL: 'normal',\n SUBTABS: 'subtabs',\n};\n\nexport const getTabTypes = () =>\n Object.keys(TabTypes).map((key) => TabTypes[key]);\n"],"names":["TabTypes","NORMAL","SUBTABS","getTabTypes","Object","keys","map","key"],"mappings":"IAAaA,QAAQ,GAAG;
|
|
1
|
+
{"version":3,"file":"TabTypes.js","sources":["../../src/TabTypes.tsx"],"sourcesContent":["export const TabTypes = {\n NORMAL: 'normal',\n SUBTABS: 'subtabs',\n};\n\nexport const getTabTypes = () =>\n Object.keys(TabTypes).map((key) => TabTypes[key]);\n"],"names":["TabTypes","NORMAL","SUBTABS","getTabTypes","Object","keys","map","key"],"mappings":"IAAaA,QAAQ,GAAG;EACtBC,MAAM,EAAE,QADc;EAEtBC,OAAO,EAAE;AAFa;IAKXC,WAAW,GAAG,SAAdA,WAAc;EAAA,OACzBC,MAAM,CAACC,IAAP,CAAYL,QAAZ,EAAsBM,GAAtB,CAA0B,UAACC,GAAD;IAAA,OAASP,QAAQ,CAACO,GAAD,CAAjB;GAA1B,CADyB;AAAA;;;;"}
|
package/esm/TabsImpl.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsImpl.js","sources":["../../src/TabsImpl.tsx"],"sourcesContent":["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport React, {\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabsPanels from './TabsPanels';\nimport TabBar from './TabBar';\nimport SubTabBar from './SubTabBar';\nimport { TabTypes } from './TabTypes';\n\nconst blockName = 'tabs';\n\nconst StyledTabsContainer = aggregatedClasses('div')(blockName);\nconst StyledTabBarContainer = aggregatedClasses('div')(\n blockName,\n 'tab-bar-container',\n);\n\nconst TabBarComponentsByType = {\n [TabTypes.NORMAL]: TabBar,\n [TabTypes.SUBTABS]: SubTabBar,\n};\n\nconst TabsImpl = (props) => {\n const {\n animated,\n children: tabs,\n type,\n tabBarExtraContent,\n onTabChange,\n enableMouseEvents,\n innerRef,\n onlyRenderActiveTab,\n containerProps,\n allowTextSelection,\n tabsListAriaLabel,\n activeTab,\n firstSubtabRef,\n lastTabRef,\n withCarousel,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile,\n } = props;\n const [actualActiveTab, setActualActiveTab] = useState(\n activeTab || tabs?.[0]?.props?.tabId,\n );\n const firstTabRefByParent = useRef(null);\n const lastTabRefByParent = useRef(null);\n\n useEffect(() => {\n if (activeTab) {\n setActualActiveTab(activeTab);\n }\n }, [activeTab]);\n\n const handleTabClick = useCallback(\n (tab) => {\n setActualActiveTab(tab);\n onTabChange(tab);\n },\n [onTabChange],\n );\n const handleDownArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (firstTabRefByParent?.current) firstTabRefByParent.current?.focus();\n },\n [firstTabRefByParent],\n );\n const handleUpArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (lastTabRef?.current) lastTabRef.current?.focus();\n },\n [lastTabRef],\n );\n\n const PureTabBarComponent = useMemo(() => {\n const TabBarComponent = TabBarComponentsByType[type] || TabBar;\n return (\n <TabBarComponent\n withCarousel={withCarousel}\n activeTab={actualActiveTab}\n onTabClick={handleTabClick}\n tabs={tabs}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRefByParent}\n handleDownArrow={handleDownArrow}\n handleUpArrow={handleUpArrow}\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n />\n );\n }, [\n type,\n withCarousel,\n actualActiveTab,\n handleTabClick,\n tabs,\n firstSubtabRef,\n lastTabRefByParent,\n handleDownArrow,\n handleUpArrow,\n isDSMobile,\n ]);\n const PureTabsPanels = useMemo(\n () => (\n <TabsPanels\n activeTab={actualActiveTab}\n allowTextSelection={allowTextSelection}\n animated={animated}\n enableMouseEvents={enableMouseEvents}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={handleTabClick}\n tabsComponents={tabs}\n lastTabRef={lastTabRefByParent}\n firstTabRefByParent={firstTabRefByParent}\n />\n ),\n [\n actualActiveTab,\n allowTextSelection,\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n handleTabClick,\n tabs,\n lastTabRefByParent,\n firstTabRefByParent,\n ],\n );\n const PureTabsImpl = useMemo(\n () => (\n <StyledTabsContainer\n {...containerProps}\n aria-label={tabsListAriaLabel}\n innerRef={innerRef}\n role=\"tablist\"\n >\n <StyledTabBarContainer>\n {PureTabBarComponent}\n {tabBarExtraContent}\n </StyledTabBarContainer>\n {PureTabsPanels}\n </StyledTabsContainer>\n ),\n [\n containerProps,\n tabsListAriaLabel,\n innerRef,\n PureTabBarComponent,\n tabBarExtraContent,\n PureTabsPanels,\n ],\n );\n return PureTabsImpl;\n};\n\nTabsImpl.propTypes = {\n animated: PropTypes.bool,\n enableMouseEvents: PropTypes.bool,\n allowTextSelection: PropTypes.bool,\n onTabChange: PropTypes.func,\n type: PropTypes.oneOf(['normal', 'subtabs']),\n tabBarExtraContent: PropTypes.element,\n onlyRenderActiveTab: PropTypes.bool,\n withCarousel: PropTypes.bool,\n activeTab: PropTypes.string,\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.any,\n }),\n ).isRequired,\n tabsListAriaLabel: PropTypes.string,\n containerProps: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n};\n\nexport default TabsImpl;\n"],"names":["blockName","StyledTabsContainer","aggregatedClasses","StyledTabBarContainer","TabBarComponentsByType","TabTypes","NORMAL","TabBar","SUBTABS","SubTabBar","TabsImpl","props","animated","tabs","children","type","tabBarExtraContent","onTabChange","enableMouseEvents","innerRef","onlyRenderActiveTab","containerProps","allowTextSelection","tabsListAriaLabel","activeTab","firstSubtabRef","lastTabRef","withCarousel","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","useState","tabId","actualActiveTab","setActualActiveTab","firstTabRefByParent","useRef","lastTabRefByParent","useEffect","handleTabClick","useCallback","tab","handleDownArrow","e","preventDefault","stopPropagation","current","focus","handleUpArrow","PureTabBarComponent","useMemo","TabBarComponent","PureTabsPanels","PureTabsImpl","propTypes","PropTypes","bool","func","oneOf","element","string","arrayOf","shape","any","isRequired","object","oneOfType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabsImpl.js","sources":["../../src/TabsImpl.tsx"],"sourcesContent":["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport React, {\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport TabsPanels from './TabsPanels';\nimport TabBar from './TabBar';\nimport SubTabBar from './SubTabBar';\nimport { TabTypes } from './TabTypes';\n\nconst blockName = 'tabs';\n\nconst StyledTabsContainer = aggregatedClasses('div')(blockName);\nconst StyledTabBarContainer = aggregatedClasses('div')(\n blockName,\n 'tab-bar-container',\n);\n\nconst TabBarComponentsByType = {\n [TabTypes.NORMAL]: TabBar,\n [TabTypes.SUBTABS]: SubTabBar,\n};\n\nconst TabsImpl = (props) => {\n const {\n animated,\n children: tabs,\n type,\n tabBarExtraContent,\n onTabChange,\n enableMouseEvents,\n innerRef,\n onlyRenderActiveTab,\n containerProps,\n allowTextSelection,\n tabsListAriaLabel,\n activeTab,\n firstSubtabRef,\n lastTabRef,\n withCarousel,\n flexibleTabsHeaders,\n fixedTabsHeaders,\n isDSMobile,\n } = props;\n const [actualActiveTab, setActualActiveTab] = useState(\n activeTab || tabs?.[0]?.props?.tabId,\n );\n const firstTabRefByParent = useRef(null);\n const lastTabRefByParent = useRef(null);\n\n useEffect(() => {\n if (activeTab) {\n setActualActiveTab(activeTab);\n }\n }, [activeTab]);\n\n const handleTabClick = useCallback(\n (tab) => {\n setActualActiveTab(tab);\n onTabChange(tab);\n },\n [onTabChange],\n );\n const handleDownArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (firstTabRefByParent?.current) firstTabRefByParent.current?.focus();\n },\n [firstTabRefByParent],\n );\n const handleUpArrow = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (lastTabRef?.current) lastTabRef.current?.focus();\n },\n [lastTabRef],\n );\n\n const PureTabBarComponent = useMemo(() => {\n const TabBarComponent = TabBarComponentsByType[type] || TabBar;\n return (\n <TabBarComponent\n withCarousel={withCarousel}\n activeTab={actualActiveTab}\n onTabClick={handleTabClick}\n tabs={tabs}\n firstSubtabRef={firstSubtabRef}\n lastTabRef={lastTabRefByParent}\n handleDownArrow={handleDownArrow}\n handleUpArrow={handleUpArrow}\n isDSMobile={isDSMobile}\n flexibleTabsHeaders={flexibleTabsHeaders}\n fixedTabsHeaders={fixedTabsHeaders}\n />\n );\n }, [\n type,\n withCarousel,\n actualActiveTab,\n handleTabClick,\n tabs,\n firstSubtabRef,\n lastTabRefByParent,\n handleDownArrow,\n handleUpArrow,\n isDSMobile,\n ]);\n const PureTabsPanels = useMemo(\n () => (\n <TabsPanels\n activeTab={actualActiveTab}\n allowTextSelection={allowTextSelection}\n animated={animated}\n enableMouseEvents={enableMouseEvents}\n onlyRenderActiveTab={onlyRenderActiveTab}\n onTabChange={handleTabClick}\n tabsComponents={tabs}\n lastTabRef={lastTabRefByParent}\n firstTabRefByParent={firstTabRefByParent}\n />\n ),\n [\n actualActiveTab,\n allowTextSelection,\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n handleTabClick,\n tabs,\n lastTabRefByParent,\n firstTabRefByParent,\n ],\n );\n const PureTabsImpl = useMemo(\n () => (\n <StyledTabsContainer\n {...containerProps}\n aria-label={tabsListAriaLabel}\n innerRef={innerRef}\n role=\"tablist\"\n >\n <StyledTabBarContainer>\n {PureTabBarComponent}\n {tabBarExtraContent}\n </StyledTabBarContainer>\n {PureTabsPanels}\n </StyledTabsContainer>\n ),\n [\n containerProps,\n tabsListAriaLabel,\n innerRef,\n PureTabBarComponent,\n tabBarExtraContent,\n PureTabsPanels,\n ],\n );\n return PureTabsImpl;\n};\n\nTabsImpl.propTypes = {\n animated: PropTypes.bool,\n enableMouseEvents: PropTypes.bool,\n allowTextSelection: PropTypes.bool,\n onTabChange: PropTypes.func,\n type: PropTypes.oneOf(['normal', 'subtabs']),\n tabBarExtraContent: PropTypes.element,\n onlyRenderActiveTab: PropTypes.bool,\n withCarousel: PropTypes.bool,\n activeTab: PropTypes.string,\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.any,\n }),\n ).isRequired,\n tabsListAriaLabel: PropTypes.string,\n containerProps: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n firstSubtabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n lastTabRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any }),\n ]),\n /** Whether or not it's a ds-tab from DSMobile tabs */\n isDSMobile: PropTypes.bool,\n /** DSMobile only flexible tabs mode */\n flexibleTabsHeaders: PropTypes.bool,\n /** DSMobile only fixed tabs mode */\n fixedTabsHeaders: PropTypes.bool,\n};\n\nexport default TabsImpl;\n"],"names":["blockName","StyledTabsContainer","aggregatedClasses","StyledTabBarContainer","TabBarComponentsByType","TabTypes","NORMAL","TabBar","SUBTABS","SubTabBar","TabsImpl","props","animated","tabs","children","type","tabBarExtraContent","onTabChange","enableMouseEvents","innerRef","onlyRenderActiveTab","containerProps","allowTextSelection","tabsListAriaLabel","activeTab","firstSubtabRef","lastTabRef","withCarousel","flexibleTabsHeaders","fixedTabsHeaders","isDSMobile","useState","tabId","actualActiveTab","setActualActiveTab","firstTabRefByParent","useRef","lastTabRefByParent","useEffect","handleTabClick","useCallback","tab","handleDownArrow","e","preventDefault","stopPropagation","current","focus","handleUpArrow","PureTabBarComponent","useMemo","TabBarComponent","PureTabsPanels","PureTabsImpl","propTypes","PropTypes","bool","func","oneOf","element","string","arrayOf","shape","any","isRequired","object","oneOfType"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,SAAS,GAAG,MAAlB;AAEA,IAAMC,mBAAmB,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,CAA5B;AACA,IAAMG,qBAAqB,GAAGD,iBAAiB,CAAC,KAAD,CAAjB,CAC5BF,SAD4B,EAE5B,mBAF4B,CAA9B;AAKA,IAAMI,sBAAsB,uEACzBC,QAAQ,CAACC,MADgB,EACPC,MADO,0CAEzBF,QAAQ,CAACG,OAFgB,EAENC,SAFM,yBAA5B;;IAKMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAW;EAAA;;EAC1B,IACEC,QADF,GAmBID,KAnBJ,CACEC,QADF;MAEYC,IAFZ,GAmBIF,KAnBJ,CAEEG,QAFF;MAGEC,IAHF,GAmBIJ,KAnBJ,CAGEI,IAHF;MAIEC,kBAJF,GAmBIL,KAnBJ,CAIEK,kBAJF;MAKEC,WALF,GAmBIN,KAnBJ,CAKEM,WALF;MAMEC,iBANF,GAmBIP,KAnBJ,CAMEO,iBANF;MAOEC,QAPF,GAmBIR,KAnBJ,CAOEQ,QAPF;MAQEC,mBARF,GAmBIT,KAnBJ,CAQES,mBARF;MASEC,cATF,GAmBIV,KAnBJ,CASEU,cATF;MAUEC,kBAVF,GAmBIX,KAnBJ,CAUEW,kBAVF;MAWEC,iBAXF,GAmBIZ,KAnBJ,CAWEY,iBAXF;MAYEC,SAZF,GAmBIb,KAnBJ,CAYEa,SAZF;MAaEC,cAbF,GAmBId,KAnBJ,CAaEc,cAbF;MAcEC,UAdF,GAmBIf,KAnBJ,CAcEe,UAdF;MAeEC,YAfF,GAmBIhB,KAnBJ,CAeEgB,YAfF;MAgBEC,mBAhBF,GAmBIjB,KAnBJ,CAgBEiB,mBAhBF;MAiBEC,gBAjBF,GAmBIlB,KAnBJ,CAiBEkB,gBAjBF;MAkBEC,UAlBF,GAmBInB,KAnBJ,CAkBEmB,UAlBF;;EAoBA,gBAA8CC,QAAQ,CACpDP,SAAS,KAAIX,IAAJ,aAAIA,IAAJ,iCAAIA,IAAI,CAAG,CAAH,CAAR,2DAAI,OAAWF,KAAf,iDAAI,aAAkBqB,KAAtB,CAD2C,CAAtD;;MAAOC,eAAP;MAAwBC,kBAAxB;;EAGA,IAAMC,mBAAmB,GAAGC,MAAM,CAAC,IAAD,CAAlC;EACA,IAAMC,kBAAkB,GAAGD,MAAM,CAAC,IAAD,CAAjC;EAEAE,SAAS,CAAC,YAAM;IACd,IAAId,SAAJ,EAAe;MACbU,kBAAkB,CAACV,SAAD,CAAlB;;GAFK,EAIN,CAACA,SAAD,CAJM,CAAT;EAMA,IAAMe,cAAc,GAAGC,WAAW,CAChC,UAACC,GAAD,EAAS;IACPP,kBAAkB,CAACO,GAAD,CAAlB;IACAxB,WAAW,CAACwB,GAAD,CAAX;GAH8B,EAKhC,CAACxB,WAAD,CALgC,CAAlC;EAOA,IAAMyB,eAAe,GAAGF,WAAW,CACjC,UAACG,CAAD,EAAO;IAAA;;IACLA,CAAC,CAACC,cAAF;IACAD,CAAC,CAACE,eAAF;IACA,IAAIV,mBAAJ,aAAIA,mBAAJ,eAAIA,mBAAmB,CAAEW,OAAzB,EAAkC,yBAAAX,mBAAmB,CAACW,OAApB,gFAA6BC,KAA7B;GAJH,EAMjC,CAACZ,mBAAD,CANiC,CAAnC;EAQA,IAAMa,aAAa,GAAGR,WAAW,CAC/B,UAACG,CAAD,EAAO;IAAA;;IACLA,CAAC,CAACC,cAAF;IACAD,CAAC,CAACE,eAAF;IACA,IAAInB,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEoB,OAAhB,EAAyB,uBAAApB,UAAU,CAACoB,OAAX,4EAAoBC,KAApB;GAJI,EAM/B,CAACrB,UAAD,CAN+B,CAAjC;EASA,IAAMuB,mBAAmB,GAAGC,OAAO,CAAC,YAAM;IACxC,IAAMC,eAAe,GAAG/C,sBAAsB,CAACW,IAAD,CAAtB,IAAgCR,MAAxD;IACA,oBACE,oBAAC,eAAD;MACE,YAAY,EAAEoB,YADhB;MAEE,SAAS,EAAEM,eAFb;MAGE,UAAU,EAAEM,cAHd;MAIE,IAAI,EAAE1B,IAJR;MAKE,cAAc,EAAEY,cALlB;MAME,UAAU,EAAEY,kBANd;MAOE,eAAe,EAAEK,eAPnB;MAQE,aAAa,EAAEM,aARjB;MASE,UAAU,EAAElB,UATd;MAUE,mBAAmB,EAAEF,mBAVvB;MAWE,gBAAgB,EAAEC;MAZtB;GAFiC,EAiBhC,CACDd,IADC,EAEDY,YAFC,EAGDM,eAHC,EAIDM,cAJC,EAKD1B,IALC,EAMDY,cANC,EAODY,kBAPC,EAQDK,eARC,EASDM,aATC,EAUDlB,UAVC,CAjBgC,CAAnC;EA6BA,IAAMsB,cAAc,GAAGF,OAAO,CAC5B;IAAA,oBACE,oBAAC,UAAD;MACE,SAAS,EAAEjB,eADb;MAEE,kBAAkB,EAAEX,kBAFtB;MAGE,QAAQ,EAAEV,QAHZ;MAIE,iBAAiB,EAAEM,iBAJrB;MAKE,mBAAmB,EAAEE,mBALvB;MAME,WAAW,EAAEmB,cANf;MAOE,cAAc,EAAE1B,IAPlB;MAQE,UAAU,EAAEwB,kBARd;MASE,mBAAmB,EAAEF;MAVzB;GAD4B,EAc5B,CACEF,eADF,EAEEX,kBAFF,EAGEV,QAHF,EAIEM,iBAJF,EAKEE,mBALF,EAMEmB,cANF,EAOE1B,IAPF,EAQEwB,kBARF,EASEF,mBATF,CAd4B,CAA9B;EA0BA,IAAMkB,YAAY,GAAGH,OAAO,CAC1B;IAAA,oBACE,oBAAC,mBAAD,eACM7B,cADN;MAEE,cAAYE,iBAFd;MAGE,QAAQ,EAAEJ,QAHZ;MAIE,IAAI,EAAC;qBAEL,oBAAC,qBAAD,QACG8B,mBADH,EAEGjC,kBAFH,CANF,EAUGoC,cAVH,CADF;GAD0B,EAe1B,CACE/B,cADF,EAEEE,iBAFF,EAGEJ,QAHF,EAIE8B,mBAJF,EAKEjC,kBALF,EAMEoC,cANF,CAf0B,CAA5B;EAwBA,OAAOC,YAAP;AACD;;AAED3C,QAAQ,CAAC4C,SAAT,GAAqB;EACnB1C,QAAQ,EAAE2C,SAAS,CAACC,IADD;EAEnBtC,iBAAiB,EAAEqC,SAAS,CAACC,IAFV;EAGnBlC,kBAAkB,EAAEiC,SAAS,CAACC,IAHX;EAInBvC,WAAW,EAAEsC,SAAS,CAACE,IAJJ;EAKnB1C,IAAI,EAAEwC,SAAS,CAACG,KAAV,CAAgB,CAAC,QAAD,EAAW,SAAX,CAAhB,CALa;EAMnB1C,kBAAkB,EAAEuC,SAAS,CAACI,OANX;EAOnBvC,mBAAmB,EAAEmC,SAAS,CAACC,IAPZ;EAQnB7B,YAAY,EAAE4B,SAAS,CAACC,IARL;EASnBhC,SAAS,EAAE+B,SAAS,CAACK,MATF;EAUnB9C,QAAQ,EAAEyC,SAAS,CAACM,OAAV,CACRN,SAAS,CAACO,KAAV,CAAgB;IACd/C,IAAI,EAAEwC,SAAS,CAACQ;GADlB,CADQ,EAIRC,UAdiB;EAenBzC,iBAAiB,EAAEgC,SAAS,CAACK,MAfV;EAgBnBvC,cAAc,EAAEkC,SAAS,CAACU,MAhBP;EAiBnB9C,QAAQ,EAAEoC,SAAS,CAACW,SAAV,CAAoB,CAC5BX,SAAS,CAACE,IADkB,EAE5BF,SAAS,CAACO,KAAV,CAAgB;IAAEhB,OAAO,EAAES,SAAS,CAACQ;GAArC,CAF4B,CAApB,CAjBS;EAqBnBtC,cAAc,EAAE8B,SAAS,CAACW,SAAV,CAAoB,CAClCX,SAAS,CAACE,IADwB,EAElCF,SAAS,CAACO,KAAV,CAAgB;IAAEhB,OAAO,EAAES,SAAS,CAACQ;GAArC,CAFkC,CAApB,CArBG;EAyBnBrC,UAAU,EAAE6B,SAAS,CAACW,SAAV,CAAoB,CAC9BX,SAAS,CAACE,IADoB,EAE9BF,SAAS,CAACO,KAAV,CAAgB;IAAEhB,OAAO,EAAES,SAAS,CAACQ;GAArC,CAF8B,CAApB,CAzBO;;;EA8BnBjC,UAAU,EAAEyB,SAAS,CAACC,IA9BH;;;EAgCnB5B,mBAAmB,EAAE2B,SAAS,CAACC,IAhCZ;;;EAkCnB3B,gBAAgB,EAAE0B,SAAS,CAACC;AAlCT,CAArB;;;;"}
|
package/esm/TabsPanels.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanels.js","sources":["../../src/TabsPanels.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport SwipeableViews from 'react-swipeable-views';\n// eslint-disable-next-line import/extensions\nimport PanelContainer from './PanelContainer';\n\nconst blockName = 'tabs-panels';\n\nconst Panels = aggregatedClasses('div')(blockName);\n\nconst getIndexById = (children, activeId) =>\n children && children.findIndex((item) => item.props.tabId === activeId);\nconst getIdByIndex = (children, index) =>\n children && children[index].props.tabId;\n\nexport default class TabsPanels extends Component {\n renderPanels = memoizeOne((activeTab, tabsComponents) => {\n const { animated, onlyRenderActiveTab, allowTextSelection } = this.props;\n return React.Children.map(\n tabsComponents,\n (tab) => {\n const { tabId: panelId, style, children: content } = tab.props;\n const isActive = activeTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n return (\n <PanelContainer\n key={panelId}\n aria-labelledby={`${panelId}-label`}\n lastTabRef={this.props.lastTabRef}\n firstSubtabRef={this.props.firstTabRefByParent}\n classProps={{ isActive }}\n data-panel-id={panelId}\n hidden={!animated && !isActive}\n onMouseDown={(e) => {\n const role = e.target.getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection)\n e.stopPropagation();\n }}\n role=\"tabpanel\"\n style={style}\n >\n {shouldRender && content}\n </PanelContainer>\n );\n },\n null,\n );\n });\n\n render() {\n const {\n activeTab,\n tabsComponents,\n animated,\n onTabChange,\n enableMouseEvents,\n } = this.props;\n const panels = animated ? (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={getIndexById(tabsComponents, activeTab)}\n onChangeIndex={(index) =>\n onTabChange(getIdByIndex(tabsComponents, index))\n }\n >\n {this.renderPanels(activeTab, tabsComponents)}\n </SwipeableViews>\n ) : (\n this.renderPanels(activeTab, tabsComponents)\n );\n return <Panels>{panels}</Panels>;\n }\n}\n"],"names":["blockName","Panels","aggregatedClasses","getIndexById","children","activeId","findIndex","item","props","tabId","getIdByIndex","index","TabsPanels","renderPanels","memoizeOne","activeTab","tabsComponents","animated","onlyRenderActiveTab","allowTextSelection","React","Children","map","tab","panelId","style","content","isActive","shouldRender","lastTabRef","firstTabRefByParent","e","role","target","getAttribute","stopPropagation","onTabChange","enableMouseEvents","panels","Component"],"mappings":";;;;;;;;;;;;;;;;AAQA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,MAAM,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,CAAf;;AAEA,IAAMG,YAAY,GAAG,SAAfA,YAAe,CAACC,QAAD,EAAWC,QAAX;
|
|
1
|
+
{"version":3,"file":"TabsPanels.js","sources":["../../src/TabsPanels.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport SwipeableViews from 'react-swipeable-views';\n// eslint-disable-next-line import/extensions\nimport PanelContainer from './PanelContainer';\n\nconst blockName = 'tabs-panels';\n\nconst Panels = aggregatedClasses('div')(blockName);\n\nconst getIndexById = (children, activeId) =>\n children && children.findIndex((item) => item.props.tabId === activeId);\nconst getIdByIndex = (children, index) =>\n children && children[index].props.tabId;\n\nexport default class TabsPanels extends Component {\n renderPanels = memoizeOne((activeTab, tabsComponents) => {\n const { animated, onlyRenderActiveTab, allowTextSelection } = this.props;\n return React.Children.map(\n tabsComponents,\n (tab) => {\n const { tabId: panelId, style, children: content } = tab.props;\n const isActive = activeTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n return (\n <PanelContainer\n key={panelId}\n aria-labelledby={`${panelId}-label`}\n lastTabRef={this.props.lastTabRef}\n firstSubtabRef={this.props.firstTabRefByParent}\n classProps={{ isActive }}\n data-panel-id={panelId}\n hidden={!animated && !isActive}\n onMouseDown={(e) => {\n const role = e.target.getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection)\n e.stopPropagation();\n }}\n role=\"tabpanel\"\n style={style}\n >\n {shouldRender && content}\n </PanelContainer>\n );\n },\n null,\n );\n });\n\n render() {\n const {\n activeTab,\n tabsComponents,\n animated,\n onTabChange,\n enableMouseEvents,\n } = this.props;\n const panels = animated ? (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={getIndexById(tabsComponents, activeTab)}\n onChangeIndex={(index) =>\n onTabChange(getIdByIndex(tabsComponents, index))\n }\n >\n {this.renderPanels(activeTab, tabsComponents)}\n </SwipeableViews>\n ) : (\n this.renderPanels(activeTab, tabsComponents)\n );\n return <Panels>{panels}</Panels>;\n }\n}\n"],"names":["blockName","Panels","aggregatedClasses","getIndexById","children","activeId","findIndex","item","props","tabId","getIdByIndex","index","TabsPanels","renderPanels","memoizeOne","activeTab","tabsComponents","animated","onlyRenderActiveTab","allowTextSelection","React","Children","map","tab","panelId","style","content","isActive","shouldRender","lastTabRef","firstTabRefByParent","e","role","target","getAttribute","stopPropagation","onTabChange","enableMouseEvents","panels","Component"],"mappings":";;;;;;;;;;;;;;;;AAQA,IAAMA,SAAS,GAAG,aAAlB;AAEA,IAAMC,MAAM,GAAGC,iBAAiB,CAAC,KAAD,CAAjB,CAAyBF,SAAzB,CAAf;;AAEA,IAAMG,YAAY,GAAG,SAAfA,YAAe,CAACC,QAAD,EAAWC,QAAX;EAAA,OACnBD,QAAQ,IAAIA,QAAQ,CAACE,SAAT,CAAmB,UAACC,IAAD;IAAA,OAAUA,IAAI,CAACC,KAAL,CAAWC,KAAX,KAAqBJ,QAA/B;GAAnB,CADO;AAAA,CAArB;;AAEA,IAAMK,YAAY,GAAG,SAAfA,YAAe,CAACN,QAAD,EAAWO,KAAX;EAAA,OACnBP,QAAQ,IAAIA,QAAQ,CAACO,KAAD,CAAR,CAAgBH,KAAhB,CAAsBC,KADf;AAAA,CAArB;;IAGqBG;;;;;;;;;;;;;;;UACnBC,eAAeC,UAAU,CAAC,UAACC,SAAD,EAAYC,cAAZ,EAA+B;MACvD,kBAA8D,MAAKR,KAAnE;UAAQS,QAAR,eAAQA,QAAR;UAAkBC,mBAAlB,eAAkBA,mBAAlB;UAAuCC,kBAAvC,eAAuCA,kBAAvC;MACA,OAAOC,KAAK,CAACC,QAAN,CAAeC,GAAf,CACLN,cADK,EAEL,UAACO,GAAD,EAAS;QACP,iBAAqDA,GAAG,CAACf,KAAzD;YAAegB,OAAf,cAAQf,KAAR;YAAwBgB,KAAxB,cAAwBA,KAAxB;YAAyCC,OAAzC,cAA+BtB,QAA/B;QACA,IAAMuB,QAAQ,GAAGZ,SAAS,KAAKS,OAA/B;QACA,IAAMI,YAAY,GAAG,CAACV,mBAAD,IAAwBS,QAA7C;QACA,oBACE,oBAAC,cAAD;UACE,GAAG,EAAEH,OADP;UAEE,6BAAoBA,OAApB,WAFF;UAGE,UAAU,EAAE,MAAKhB,KAAL,CAAWqB,UAHzB;UAIE,cAAc,EAAE,MAAKrB,KAAL,CAAWsB,mBAJ7B;UAKE,UAAU,EAAE;YAAEH,QAAQ,EAARA;WALhB;UAME,iBAAeH,OANjB;UAOE,MAAM,EAAE,CAACP,QAAD,IAAa,CAACU,QAPxB;UAQE,WAAW,EAAE,qBAACI,CAAD,EAAO;YAClB,IAAMC,IAAI,GAAGD,CAAC,CAACE,MAAF,CAASC,YAAT,CAAsB,MAAtB,CAAb;YACA,IAAIF,IAAI,KAAK,UAAT,IAAuBb,kBAA3B,EACEY,CAAC,CAACI,eAAF;WAXN;UAaE,IAAI,EAAC,UAbP;UAcE,KAAK,EAAEV;WAENG,YAAY,IAAIF,OAhBnB,CADF;OANG,EA2BL,IA3BK,CAAP;KAFuB;;;;;;WAiCzB,kBAAS;MACP,mBAMI,KAAKlB,KANT;UACEO,SADF,gBACEA,SADF;UAEEC,cAFF,gBAEEA,cAFF;UAGEC,QAHF,gBAGEA,QAHF;UAIEmB,WAJF,gBAIEA,WAJF;UAKEC,iBALF,gBAKEA,iBALF;MAOA,IAAMC,MAAM,GAAGrB,QAAQ,gBACrB,oBAAC,cAAD;QACE,iBAAiB,EAAEoB,iBADrB;QAEE,KAAK,EAAElC,YAAY,CAACa,cAAD,EAAiBD,SAAjB,CAFrB;QAGE,aAAa,EAAE,uBAACJ,KAAD;UAAA,OACbyB,WAAW,CAAC1B,YAAY,CAACM,cAAD,EAAiBL,KAAjB,CAAb,CADE;;SAId,KAAKE,YAAL,CAAkBE,SAAlB,EAA6BC,cAA7B,CAPH,CADqB,GAWrB,KAAKH,YAAL,CAAkBE,SAAlB,EAA6BC,cAA7B,CAXF;MAaA,oBAAO,oBAAC,MAAD,QAASsB,MAAT,CAAP;;;;;EAvDoCC;;;;"}
|
package/esm/useResize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResize.js","sources":["../../src/useResize.tsx"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\n\nexport function useResize(ref, callback) {\n const { right, left } = ref?.current?.getBoundingClientRect() || {\n right: null,\n left: null,\n };\n const handleResize = debounce(callback, 300);\n\n useLayoutEffect(() => {\n handleResize();\n }, [right, left]);\n}\n"],"names":["useResize","ref","callback","current","getBoundingClientRect","right","left","handleResize","debounce","useLayoutEffect"],"mappings":";;;AAGO,SAASA,SAAT,CAAmBC,GAAnB,EAAwBC,QAAxB,EAAkC;
|
|
1
|
+
{"version":3,"file":"useResize.js","sources":["../../src/useResize.tsx"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\n\nexport function useResize(ref, callback) {\n const { right, left } = ref?.current?.getBoundingClientRect() || {\n right: null,\n left: null,\n };\n const handleResize = debounce(callback, 300);\n\n useLayoutEffect(() => {\n handleResize();\n }, [right, left]);\n}\n"],"names":["useResize","ref","callback","current","getBoundingClientRect","right","left","handleResize","debounce","useLayoutEffect"],"mappings":";;;AAGO,SAASA,SAAT,CAAmBC,GAAnB,EAAwBC,QAAxB,EAAkC;EAAA;;EACvC,WAAwB,CAAAD,GAAG,SAAH,IAAAA,GAAG,WAAH,4BAAAA,GAAG,CAAEE,OAAL,8DAAcC,qBAAd,OAAyC;IAC/DC,KAAK,EAAE,IADwD;IAE/DC,IAAI,EAAE;GAFR;MAAQD,KAAR,QAAQA,KAAR;MAAeC,IAAf,QAAeA,IAAf;;EAIA,IAAMC,YAAY,GAAGC,QAAQ,CAACN,QAAD,EAAW,GAAX,CAA7B;EAEAO,eAAe,CAAC,YAAM;IACpBF,YAAY;GADC,EAEZ,CAACF,KAAD,EAAQC,IAAR,CAFY,CAAf;AAGD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "1.61.
|
|
3
|
+
"version": "1.61.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Tabs",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"build": "node ../../scripts/build/build.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-button": "1.61.
|
|
20
|
-
"@elliemae/ds-classnames": "1.61.
|
|
21
|
-
"@elliemae/ds-form": "1.61.
|
|
22
|
-
"@elliemae/ds-icons": "1.61.
|
|
19
|
+
"@elliemae/ds-button": "1.61.13",
|
|
20
|
+
"@elliemae/ds-classnames": "1.61.13",
|
|
21
|
+
"@elliemae/ds-form": "1.61.13",
|
|
22
|
+
"@elliemae/ds-icons": "1.61.13",
|
|
23
23
|
"memoize-one": "~5.1.1",
|
|
24
24
|
"prop-types": "~15.7.2",
|
|
25
25
|
"react-desc": "^4.1.2",
|