@elliemae/ds-tabs 3.57.7 → 3.57.9
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.
|
@@ -48,7 +48,7 @@ const useTabs = (props) => {
|
|
|
48
48
|
const firstActivableTabId = (0, import_react.useMemo)(() => {
|
|
49
49
|
const childrenArray = import_react.default.Children.toArray(children);
|
|
50
50
|
const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];
|
|
51
|
-
if (firstActivableTab
|
|
51
|
+
if (!firstActivableTab) return "";
|
|
52
52
|
return firstActivableTab.props.tabId ?? "";
|
|
53
53
|
}, [children]);
|
|
54
54
|
const [internalActiveTab, setInternalActiveTab] = (0, import_react.useState)(firstActivableTabId);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useTabs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n // we can't activate disabled tabs, we search for the first activable tab\n const firstActivableTabId = useMemo(() => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n if (firstActivableTab
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA4D;AAC5D,8BAA6C;AAC7C,mCAAmC;AAGnC,qBAA2E;AAEpE,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,sDAAoD,OAAO,+CAAkB;AAEvG,QAAM,EAAE,WAAW,UAAU,aAAa,YAAY,iBAAiB,IAAI;AAE3E,QAAM,cAAU,qBAA0C,CAAC,CAAC;AAC5D,QAAM,qBAAiB,qBAA4B,CAAC,CAAC;AACrD,QAAM,uBAAmB,qBAA4B,CAAC,CAAC;AACvD,QAAM,0BAAsB,qBAA8B,IAAI;AAC9D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,yBAAqB,qBAAiC,IAAI;AAGhE,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,UAAM,gBAAgB,aAAAA,QAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,oBAAoB,cAAc,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAAE,CAAC;AAEtF,QAAI,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n // we can't activate disabled tabs, we search for the first activable tab\n const firstActivableTabId = useMemo(() => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n if (!firstActivableTab) return '';\n return firstActivableTab.props.tabId ?? '';\n }, [children]);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n useEffect(() => {\n if (activeTab === undefined) {\n const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n }\n }, [activeTab]);\n\n const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n left: false,\n right: false,\n });\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Updates mobile gradient visibility. It:\n * 1. Calculates scroll position\n * 2. Updates gradient visibility based on scroll\n */\n const updateMobileGradients = React.useCallback(() => {\n if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n setMobileGradients({\n left: shouldHaveLeftGradient(scrollLeft),\n right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n });\n }\n }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n React.useLayoutEffect(() => {\n if (isDSMobile && !fixedTabsHeaders) {\n updateMobileGradients();\n }\n }, [updateMobileGradients, isDSMobile, fixedTabsHeaders, actualActiveTab]);\n\n // due to a bunch of reasons and the component being biting more than it can chew\n // optimizing renders to make the swipe-card work \"as expected\"(not animating on first render)\n // simply isn't feasible at this time.\n // how do we fix this anyway?\n // we track the first time a tab change triggered by the user happens\n // after the first user interaction we enable animations,\n // after that we give the animation handling control back to the swipe-card.\n const userDidChangeTabAtleastOnceRef = useRef(false);\n\n const handleOnTabChange = React.useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n userDidChangeTabAtleastOnceRef.current = true;\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTab({ e, listRef: tabsListRef });\n }\n },\n [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n );\n\n const globalClickHandler = React.useCallback(\n (data: DSTabsInternalsT.GlobalClickHandlerT): void => {\n if (data.target === 'panel') {\n // we need to allow the text selection in the panel\n // this enters on conflict with the SwipeableViews component\n if (propsWithDefaults.allowTextSelection) {\n data.event.stopPropagation();\n }\n }\n\n if (data.target === 'tabsList') {\n const target = data.event.target as HTMLButtonElement;\n const { dataset, ariaDisabled } = target;\n if (dataset.tabId && ariaDisabled !== 'true') {\n // handleOnTabChange(dataset.tabId, data.event);\n if (isDSMobile && !fixedTabsHeaders && data.event) {\n centerTab({ e: data.event, listRef: tabsListRef });\n }\n }\n }\n if (data.target === 'swipeableViews') {\n handleOnTabChange(data.tabId!);\n }\n if (data.target === 'tabItem' && data.tabId && !(data.event.currentTarget as HTMLButtonElement).disabled) {\n handleOnTabChange(data.tabId, data.event);\n }\n },\n [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile],\n );\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n }),\n [\n propsWithDefaults,\n actualActiveTab,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n ],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -15,7 +15,7 @@ const useTabs = (props) => {
|
|
|
15
15
|
const firstActivableTabId = useMemo(() => {
|
|
16
16
|
const childrenArray = React2.Children.toArray(children);
|
|
17
17
|
const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];
|
|
18
|
-
if (firstActivableTab
|
|
18
|
+
if (!firstActivableTab) return "";
|
|
19
19
|
return firstActivableTab.props.tabId ?? "";
|
|
20
20
|
}, [children]);
|
|
21
21
|
const [internalActiveTab, setInternalActiveTab] = useState(firstActivableTabId);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n // we can't activate disabled tabs, we search for the first activable tab\n const firstActivableTabId = useMemo(() => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n if (firstActivableTab
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,UAAS,QAAQ,UAAU,SAAS,iBAAiB;AAC5D,SAAS,oCAAoC;AAC7C,SAAS,0BAA0B;AAGnC,SAAS,WAAW,wBAAwB,+BAA+B;AAEpE,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,kBAAkB;AAEvG,QAAM,EAAE,WAAW,UAAU,aAAa,YAAY,iBAAiB,IAAI;AAE3E,QAAM,UAAU,OAA0C,CAAC,CAAC;AAC5D,QAAM,iBAAiB,OAA4B,CAAC,CAAC;AACrD,QAAM,mBAAmB,OAA4B,CAAC,CAAC;AACvD,QAAM,sBAAsB,OAA8B,IAAI;AAC9D,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,qBAAqB,OAAiC,IAAI;AAGhE,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,oBAAoB,cAAc,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAAE,CAAC;AAEtF,QAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n // we can't activate disabled tabs, we search for the first activable tab\n const firstActivableTabId = useMemo(() => {\n const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n if (!firstActivableTab) return '';\n return firstActivableTab.props.tabId ?? '';\n }, [children]);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\n\n const actualActiveTab = useMemo(() => {\n if (activeTab !== undefined) return activeTab;\n return internalActiveTab;\n }, [activeTab, internalActiveTab]);\n\n useEffect(() => {\n actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n }, [actualActiveTab]);\n\n useEffect(() => {\n if (activeTab === undefined) {\n const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n }\n }, [activeTab]);\n\n const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n left: false,\n right: false,\n });\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Updates mobile gradient visibility. It:\n * 1. Calculates scroll position\n * 2. Updates gradient visibility based on scroll\n */\n const updateMobileGradients = React.useCallback(() => {\n if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n setMobileGradients({\n left: shouldHaveLeftGradient(scrollLeft),\n right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n });\n }\n }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n React.useLayoutEffect(() => {\n if (isDSMobile && !fixedTabsHeaders) {\n updateMobileGradients();\n }\n }, [updateMobileGradients, isDSMobile, fixedTabsHeaders, actualActiveTab]);\n\n // due to a bunch of reasons and the component being biting more than it can chew\n // optimizing renders to make the swipe-card work \"as expected\"(not animating on first render)\n // simply isn't feasible at this time.\n // how do we fix this anyway?\n // we track the first time a tab change triggered by the user happens\n // after the first user interaction we enable animations,\n // after that we give the animation handling control back to the swipe-card.\n const userDidChangeTabAtleastOnceRef = useRef(false);\n\n const handleOnTabChange = React.useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n userDidChangeTabAtleastOnceRef.current = true;\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTab({ e, listRef: tabsListRef });\n }\n },\n [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n );\n\n const globalClickHandler = React.useCallback(\n (data: DSTabsInternalsT.GlobalClickHandlerT): void => {\n if (data.target === 'panel') {\n // we need to allow the text selection in the panel\n // this enters on conflict with the SwipeableViews component\n if (propsWithDefaults.allowTextSelection) {\n data.event.stopPropagation();\n }\n }\n\n if (data.target === 'tabsList') {\n const target = data.event.target as HTMLButtonElement;\n const { dataset, ariaDisabled } = target;\n if (dataset.tabId && ariaDisabled !== 'true') {\n // handleOnTabChange(dataset.tabId, data.event);\n if (isDSMobile && !fixedTabsHeaders && data.event) {\n centerTab({ e: data.event, listRef: tabsListRef });\n }\n }\n }\n if (data.target === 'swipeableViews') {\n handleOnTabChange(data.tabId!);\n }\n if (data.target === 'tabItem' && data.tabId && !(data.event.currentTarget as HTMLButtonElement).disabled) {\n handleOnTabChange(data.tabId, data.event);\n }\n },\n [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile],\n );\n const ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n }),\n [\n propsWithDefaults,\n actualActiveTab,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.57.
|
|
3
|
+
"version": "3.57.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@react-hook/resize-observer": "~1.2.6",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.57.
|
|
41
|
-
"@elliemae/ds-icon": "3.57.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.57.9",
|
|
41
|
+
"@elliemae/ds-icon": "3.57.9",
|
|
42
|
+
"@elliemae/ds-swipe-card": "3.57.9",
|
|
43
|
+
"@elliemae/ds-system": "3.57.9",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.57.9",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.57.9",
|
|
46
|
+
"@elliemae/ds-icons": "3.57.9"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
50
50
|
"jest": "~29.7.0",
|
|
51
51
|
"styled-components": "~5.3.9",
|
|
52
|
-
"@elliemae/ds-test-utils": "3.57.
|
|
53
|
-
"@elliemae/ds-monorepo-devops": "3.57.
|
|
52
|
+
"@elliemae/ds-test-utils": "3.57.9",
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.57.9"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"lodash-es": "^4.17.21",
|