@elliemae/ds-tabs 3.55.0-next.10 → 3.55.0-next.12
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/dist/cjs/parts/tabsPanel/TabsPanels.js +6 -2
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/styles.js +2 -0
- package/dist/cjs/parts/tabsPanel/styles.js.map +2 -2
- package/dist/esm/parts/tabsPanel/TabsPanels.js +6 -2
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/esm/parts/tabsPanel/styles.js +2 -0
- package/dist/esm/parts/tabsPanel/styles.js.map +2 -2
- package/package.json +10 -9
|
@@ -38,7 +38,7 @@ var import_ds_swipe_card = require("@elliemae/ds-swipe-card");
|
|
|
38
38
|
var import_styles = require("./styles.js");
|
|
39
39
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
40
40
|
const CardRender = (props) => {
|
|
41
|
-
const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, ...rest } = props;
|
|
41
|
+
const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;
|
|
42
42
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
43
|
import_styles.StyledPanelContainer,
|
|
44
44
|
{
|
|
@@ -84,6 +84,8 @@ const TabsPanels = () => {
|
|
|
84
84
|
const { tabId: panelId = "", style, children: content, disabled, applyAriaDisabled } = tab.props;
|
|
85
85
|
const isActive = actualActiveTab === panelId;
|
|
86
86
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
87
|
+
const getOwnerProps = () => tab.props;
|
|
88
|
+
const getOwnerPropsArguments = () => ({ panelId });
|
|
87
89
|
const baseDescriptor = {
|
|
88
90
|
index,
|
|
89
91
|
tabId: panelId,
|
|
@@ -100,7 +102,9 @@ const TabsPanels = () => {
|
|
|
100
102
|
"data-testid": "ds-tabs-tab-panel",
|
|
101
103
|
hide: !isActive,
|
|
102
104
|
onClick: (event) => globalClickHandler({ event, target: "panel" }),
|
|
103
|
-
role: "tabpanel"
|
|
105
|
+
role: "tabpanel",
|
|
106
|
+
getOwnerProps,
|
|
107
|
+
getOwnerPropsArguments
|
|
104
108
|
};
|
|
105
109
|
return baseDescriptor;
|
|
106
110
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\ninterface PanelDescriptor extends Record<string, unknown> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, ...rest } = props;\n // We pass through all attributes, including accessibility and dataset attributes.\n return (\n <StyledPanelContainer\n id={tabId}\n {...tabPanelsProps}\n {...rest}\n // Styled component specific props\n isDSMobile={isDSMobile}\n hide={hide}\n style={style}\n role={role}\n >\n {content}\n </StyledPanelContainer>\n );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n globalClickHandler({\n event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n target: 'swipeableViews',\n tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n });\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, globalClickHandler],\n );\n\n const panels: PanelDescriptor[] = useMemo(() => {\n // this component is based on React.children, swipeable views want an index in the array, not a tabId\n // two bad patterns relying on each others results in:\n // - because of react.children,\n // to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n //\n // when not using swipeable views, we don't need to find the index based on tabId\n // so even if we return null the variable\n // indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n // (which will be calculating the wrong index)\n // will have no impact on the rendering\n // https://react.dev/reference/react/Children#children-toarray-caveats\n // Caveats\n // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n //\n // So, long story short,\n // 1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n // 2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n // instead of null when a panel should not be rendered. This keeps array length stable.\n const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCnB;AAlCJ,mBAAwD;AACxD,2BAA4B;AAG5B,oBAAqC;AACrC,uBAA8B;AAyB9B,MAAM,aAAiF,CAAC,UAAU;AAChG,QAAM,EAAE,SAAS,gBAAgB,YAAY,MAAM,OAAO,MAAM,OAAO,GAAG,KAAK,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\ninterface PanelDescriptor extends Record<string, unknown> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;\n // We pass through all attributes, including accessibility and dataset attributes.\n return (\n <StyledPanelContainer\n id={tabId}\n {...tabPanelsProps}\n {...rest}\n // Styled component specific props\n isDSMobile={isDSMobile}\n hide={hide}\n style={style}\n role={role}\n >\n {content}\n </StyledPanelContainer>\n );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n globalClickHandler({\n event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n target: 'swipeableViews',\n tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n });\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, globalClickHandler],\n );\n\n const panels: PanelDescriptor[] = useMemo(() => {\n // this component is based on React.children, swipeable views want an index in the array, not a tabId\n // two bad patterns relying on each others results in:\n // - because of react.children,\n // to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n //\n // when not using swipeable views, we don't need to find the index based on tabId\n // so even if we return null the variable\n // indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n // (which will be calculating the wrong index)\n // will have no impact on the rendering\n // https://react.dev/reference/react/Children#children-toarray-caveats\n // Caveats\n // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n //\n // So, long story short,\n // 1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n // 2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n // instead of null when a panel should not be rendered. This keeps array length stable.\n const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ panelId });\n\n const baseDescriptor: PanelDescriptor = {\n index,\n tabId: panelId,\n isActive: Boolean(isActive),\n isDSMobile: Boolean(isDSMobile),\n content: shouldRender && !disabled ? content : null,\n style: {\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n } as React.CSSProperties,\n tabPanelsProps,\n 'aria-hidden': !(isActive && !applyAriaDisabled),\n 'data-panel-id': panelId,\n 'data-testid': 'ds-tabs-tab-panel',\n hide: !isActive,\n onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n role: 'tabpanel',\n getOwnerProps,\n getOwnerPropsArguments,\n };\n\n return baseDescriptor;\n });\n\n // Children.map can return null if there are no children; ensure an array is returned\n return mapResult || [];\n }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n // Safely compute the active slide index. Default to 0 when none found.\n const activeSlide = (() => {\n const idx = panels.findIndex((panel) => panel.isActive);\n return idx >= 0 ? idx : 0;\n })();\n\n return (\n <DSSwipeCard<PanelDescriptor>\n activeSlide={activeSlide}\n onSwipe={(i) => handleOnChangeIndex(i, activeSlide)}\n enableTouch\n enableAnimation={animated}\n CardRender={CardRender}\n slidesProps={panels}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAOhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAOhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ import { DSSwipeCard } from "@elliemae/ds-swipe-card";
|
|
|
5
5
|
import { StyledPanelContainer } from "./styles.js";
|
|
6
6
|
import { DSTabsContext } from "../../DSTabsCTX.js";
|
|
7
7
|
const CardRender = (props) => {
|
|
8
|
-
const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, ...rest } = props;
|
|
8
|
+
const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;
|
|
9
9
|
return /* @__PURE__ */ jsx(
|
|
10
10
|
StyledPanelContainer,
|
|
11
11
|
{
|
|
@@ -51,6 +51,8 @@ const TabsPanels = () => {
|
|
|
51
51
|
const { tabId: panelId = "", style, children: content, disabled, applyAriaDisabled } = tab.props;
|
|
52
52
|
const isActive = actualActiveTab === panelId;
|
|
53
53
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
54
|
+
const getOwnerProps = () => tab.props;
|
|
55
|
+
const getOwnerPropsArguments = () => ({ panelId });
|
|
54
56
|
const baseDescriptor = {
|
|
55
57
|
index,
|
|
56
58
|
tabId: panelId,
|
|
@@ -67,7 +69,9 @@ const TabsPanels = () => {
|
|
|
67
69
|
"data-testid": "ds-tabs-tab-panel",
|
|
68
70
|
hide: !isActive,
|
|
69
71
|
onClick: (event) => globalClickHandler({ event, target: "panel" }),
|
|
70
|
-
role: "tabpanel"
|
|
72
|
+
role: "tabpanel",
|
|
73
|
+
getOwnerProps,
|
|
74
|
+
getOwnerPropsArguments
|
|
71
75
|
};
|
|
72
76
|
return baseDescriptor;
|
|
73
77
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\ninterface PanelDescriptor extends Record<string, unknown> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, ...rest } = props;\n // We pass through all attributes, including accessibility and dataset attributes.\n return (\n <StyledPanelContainer\n id={tabId}\n {...tabPanelsProps}\n {...rest}\n // Styled component specific props\n isDSMobile={isDSMobile}\n hide={hide}\n style={style}\n role={role}\n >\n {content}\n </StyledPanelContainer>\n );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n globalClickHandler({\n event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n target: 'swipeableViews',\n tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n });\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, globalClickHandler],\n );\n\n const panels: PanelDescriptor[] = useMemo(() => {\n // this component is based on React.children, swipeable views want an index in the array, not a tabId\n // two bad patterns relying on each others results in:\n // - because of react.children,\n // to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n //\n // when not using swipeable views, we don't need to find the index based on tabId\n // so even if we return null the variable\n // indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n // (which will be calculating the wrong index)\n // will have no impact on the rendering\n // https://react.dev/reference/react/Children#children-toarray-caveats\n // Caveats\n // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n //\n // So, long story short,\n // 1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n // 2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n // instead of null when a panel should not be rendered. This keeps array length stable.\n const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACoCnB;AAlCJ,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,SAAS,mBAAmB;AAG5B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAyB9B,MAAM,aAAiF,CAAC,UAAU;AAChG,QAAM,EAAE,SAAS,gBAAgB,YAAY,MAAM,OAAO,MAAM,OAAO,GAAG,KAAK,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\ninterface PanelDescriptor extends Record<string, unknown> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;\n // We pass through all attributes, including accessibility and dataset attributes.\n return (\n <StyledPanelContainer\n id={tabId}\n {...tabPanelsProps}\n {...rest}\n // Styled component specific props\n isDSMobile={isDSMobile}\n hide={hide}\n style={style}\n role={role}\n >\n {content}\n </StyledPanelContainer>\n );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n /** [PUI-15772] - Tabs Pre Refactor\n * Handler for swipe gestures and tab index changes. It:\n * 1. Calculates the offset between current and new tab index\n * 2. Finds the new focusable tab based on the offset\n * 3. Updates the active tab and forces a click event\n * 4. May cause unnecessary rerenders due to forced click events\n */\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n globalClickHandler({\n event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n target: 'swipeableViews',\n tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n });\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, globalClickHandler],\n );\n\n const panels: PanelDescriptor[] = useMemo(() => {\n // this component is based on React.children, swipeable views want an index in the array, not a tabId\n // two bad patterns relying on each others results in:\n // - because of react.children,\n // to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n //\n // when not using swipeable views, we don't need to find the index based on tabId\n // so even if we return null the variable\n // indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n // (which will be calculating the wrong index)\n // will have no impact on the rendering\n // https://react.dev/reference/react/Children#children-toarray-caveats\n // Caveats\n // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n //\n // So, long story short,\n // 1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n // 2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n // instead of null when a panel should not be rendered. This keeps array length stable.\n const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ panelId });\n\n const baseDescriptor: PanelDescriptor = {\n index,\n tabId: panelId,\n isActive: Boolean(isActive),\n isDSMobile: Boolean(isDSMobile),\n content: shouldRender && !disabled ? content : null,\n style: {\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n } as React.CSSProperties,\n tabPanelsProps,\n 'aria-hidden': !(isActive && !applyAriaDisabled),\n 'data-panel-id': panelId,\n 'data-testid': 'ds-tabs-tab-panel',\n hide: !isActive,\n onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n role: 'tabpanel',\n getOwnerProps,\n getOwnerPropsArguments,\n };\n\n return baseDescriptor;\n });\n\n // Children.map can return null if there are no children; ensure an array is returned\n return mapResult || [];\n }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n // Safely compute the active slide index. Default to 0 when none found.\n const activeSlide = (() => {\n const idx = panels.findIndex((panel) => panel.isActive);\n return idx >= 0 ? idx : 0;\n })();\n\n return (\n <DSSwipeCard<PanelDescriptor>\n activeSlide={activeSlide}\n onSwipe={(i) => handleOnChangeIndex(i, activeSlide)}\n enableTouch\n enableAnimation={animated}\n CardRender={CardRender}\n slidesProps={panels}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAOhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n padding-top: 8px;\n &:focus {\n outline: none;\n }\n\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAOhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.55.0-next.
|
|
3
|
+
"version": "3.55.0-next.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -37,19 +37,20 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@react-hook/resize-observer": "~1.2.6",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.55.0-next.
|
|
41
|
-
"@elliemae/ds-icon": "3.55.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.55.0-next.12",
|
|
41
|
+
"@elliemae/ds-icon": "3.55.0-next.12",
|
|
42
|
+
"@elliemae/ds-swipe-card": "3.55.0-next.12",
|
|
43
|
+
"@elliemae/ds-icons": "3.55.0-next.12",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.55.0-next.12",
|
|
45
|
+
"@elliemae/ds-system": "3.55.0-next.12",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.55.0-next.12"
|
|
46
47
|
},
|
|
47
48
|
"devDependencies": {
|
|
48
49
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
49
50
|
"jest": "~29.7.0",
|
|
50
51
|
"styled-components": "~5.3.9",
|
|
51
|
-
"@elliemae/ds-test-utils": "3.55.0-next.
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.55.0-next.
|
|
52
|
+
"@elliemae/ds-test-utils": "3.55.0-next.12",
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.55.0-next.12"
|
|
53
54
|
},
|
|
54
55
|
"peerDependencies": {
|
|
55
56
|
"lodash-es": "^4.17.21",
|