@elliemae/ds-tabs 3.49.1 → 3.49.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useTabs.js +9 -3
- package/dist/cjs/config/useTabs.js.map +3 -3
- package/dist/cjs/parts/tabsPanel/TabsPanels.js +11 -10
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/dist/esm/config/useTabs.js +9 -3
- package/dist/esm/config/useTabs.js.map +3 -3
- package/dist/esm/parts/tabsPanel/TabsPanels.js +11 -10
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +2 -2
- package/package.json +8 -8
|
@@ -32,19 +32,25 @@ __export(useTabs_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(useTabs_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = require("react");
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
38
38
|
const useTabs = (props) => {
|
|
39
39
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.tabsDefaultProps);
|
|
40
|
-
const { activeTab } = propsWithDefaults;
|
|
40
|
+
const { activeTab, children } = propsWithDefaults;
|
|
41
41
|
const tabsRef = (0, import_react.useRef)({});
|
|
42
42
|
const tabsRefAsArray = (0, import_react.useRef)([]);
|
|
43
43
|
const focusableTabsRef = (0, import_react.useRef)([]);
|
|
44
44
|
const carouselOnlyListRef = (0, import_react.useRef)(null);
|
|
45
45
|
const tabsListRef = (0, import_react.useRef)(null);
|
|
46
46
|
const actualActiveTabRef = (0, import_react.useRef)(null);
|
|
47
|
-
const
|
|
47
|
+
const firstActivableTabId = (0, import_react.useMemo)(() => {
|
|
48
|
+
const childrenArray = import_react.default.Children.toArray(children);
|
|
49
|
+
const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];
|
|
50
|
+
if (firstActivableTab === null) return "";
|
|
51
|
+
return firstActivableTab.props.tabId ?? "";
|
|
52
|
+
}, [children]);
|
|
53
|
+
const [internalActiveTab, setInternalActiveTab] = (0, import_react.useState)(firstActivableTabId);
|
|
48
54
|
const actualActiveTab = (0, import_react.useMemo)(() => {
|
|
49
55
|
if (activeTab !== void 0) return activeTab;
|
|
50
56
|
return internalActiveTab;
|
|
@@ -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": ["import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab, children } = 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 === null) 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 ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n }),\n [actualActiveTab, propsWithDefaults],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,8BAA6C;AAC7C,mCAAiC;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,sDAAoD,OAAO,6CAAgB;AAErG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,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,sBAAsB,KAAM,QAAO;AACvC,WAAO,kBAAkB,MAAM,SAAS;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAiB,mBAAmB;AAEtF,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,8BAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -69,19 +69,14 @@ const TabsPanels = () => {
|
|
|
69
69
|
},
|
|
70
70
|
[actualActiveTab, focusableTabsRef, handleOnTabChange]
|
|
71
71
|
);
|
|
72
|
-
const firstSlideToShow = (0, import_react2.useMemo)(() => {
|
|
73
|
-
const childrenArray = import_react2.default.Children.toArray(tabs);
|
|
74
|
-
const index = childrenArray.filter((tab) => tab.props.disabled !== true).findIndex((tab) => tab.props.tabId === actualActiveTab);
|
|
75
|
-
if (index === -1) return 0;
|
|
76
|
-
return index;
|
|
77
|
-
}, [actualActiveTab, tabs]);
|
|
78
72
|
const panels = (0, import_react2.useMemo)(() => {
|
|
73
|
+
const emptyPanelRender = animated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) : null;
|
|
79
74
|
return import_react2.default.Children.map(tabs, (tab) => {
|
|
80
75
|
const { tabId: panelId = "", style, children: content, disabled } = tab.props;
|
|
81
76
|
const isActive = actualActiveTab === panelId;
|
|
82
77
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
83
|
-
if (disabled) return
|
|
84
|
-
if (!shouldRender) return
|
|
78
|
+
if (disabled) return emptyPanelRender;
|
|
79
|
+
if (!shouldRender) return emptyPanelRender;
|
|
85
80
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
86
81
|
import_styles.StyledPanelContainer,
|
|
87
82
|
{
|
|
@@ -104,7 +99,13 @@ const TabsPanels = () => {
|
|
|
104
99
|
content
|
|
105
100
|
);
|
|
106
101
|
});
|
|
107
|
-
}, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
|
|
102
|
+
}, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
|
|
103
|
+
const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = (0, import_react2.useMemo)(() => {
|
|
104
|
+
const childrenArray = import_react2.default.Children.toArray(tabs);
|
|
105
|
+
const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);
|
|
106
|
+
if (index === -1) return 0;
|
|
107
|
+
return index;
|
|
108
|
+
}, [actualActiveTab, tabs]);
|
|
108
109
|
if (animated) {
|
|
109
110
|
const Comp = import_react_swipeable_views.default?.default ?? import_react_swipeable_views.default;
|
|
110
111
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -117,7 +118,7 @@ const TabsPanels = () => {
|
|
|
117
118
|
...swipeableViewsContainerProps?.style || {}
|
|
118
119
|
},
|
|
119
120
|
enableMouseEvents,
|
|
120
|
-
index:
|
|
121
|
+
index: indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull,
|
|
121
122
|
onChangeIndex: handleOnChangeIndex,
|
|
122
123
|
children: panels
|
|
123
124
|
}
|
|
@@ -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 SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const panels = 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 const emptyPanelRender = animated ? <div /> : null;\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n\n if (disabled) return emptyPanelRender;\n if (!shouldRender) return emptyPanelRender;\n return (\n <StyledPanelContainer\n {...tabPanelsProps}\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hide={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={{\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n }}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n );\n });\n }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n if (animated) {\n // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n return (\n <Comp\n {...swipeableViewsContainerProps}\n style={{\n overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n ...(swipeableViewsContainerProps?.style || {}),\n }}\n enableMouseEvents={enableMouseEvents}\n index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </Comp>\n );\n }\n\n return panels;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEiB;AAShC;AA/ER,IAAAA,gBAAwD;AACxD,mCAA2B;AAC3B,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,QAAI,0BAAW,8BAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,QAAI,0CAAiB;AAElE,QAAM,0BAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB,QAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,aAAS,uBAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,4CAAC,SAAI,IAAK;AAC9C,WAAO,cAAAC,QAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AACzE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI,SAAU,QAAO;AACrB,UAAI,CAAC,aAAc,QAAO;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG,OAAO;AAAA,UAC3B,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,iBAAiB,qBAAqB,gBAAgB,mBAAmB,UAAU,CAAC;AAExG,QAAM,yFAAqF,uBAAQ,MAAM;AACvG,UAAM,gBAAgB,cAAAA,QAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cAAc,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAElF,QAAI,UAAU,GAAI,QAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,MAAI,UAAU;AAGZ,UAAM,OAAQ,6BAAAC,SAAwB,WAAW,6BAAAA;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": ["import_react", "React", "SwipeableViews"]
|
|
7
7
|
}
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { useRef, useState, useMemo, useEffect } from "react";
|
|
2
|
+
import React2, { useRef, useState, useMemo, useEffect } from "react";
|
|
3
3
|
import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { tabsDefaultProps } from "../react-desc-prop-types.js";
|
|
5
5
|
const useTabs = (props) => {
|
|
6
6
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
|
|
7
|
-
const { activeTab } = propsWithDefaults;
|
|
7
|
+
const { activeTab, children } = propsWithDefaults;
|
|
8
8
|
const tabsRef = useRef({});
|
|
9
9
|
const tabsRefAsArray = useRef([]);
|
|
10
10
|
const focusableTabsRef = useRef([]);
|
|
11
11
|
const carouselOnlyListRef = useRef(null);
|
|
12
12
|
const tabsListRef = useRef(null);
|
|
13
13
|
const actualActiveTabRef = useRef(null);
|
|
14
|
-
const
|
|
14
|
+
const firstActivableTabId = useMemo(() => {
|
|
15
|
+
const childrenArray = React2.Children.toArray(children);
|
|
16
|
+
const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];
|
|
17
|
+
if (firstActivableTab === null) return "";
|
|
18
|
+
return firstActivableTab.props.tabId ?? "";
|
|
19
|
+
}, [children]);
|
|
20
|
+
const [internalActiveTab, setInternalActiveTab] = useState(firstActivableTabId);
|
|
15
21
|
const actualActiveTab = useMemo(() => {
|
|
16
22
|
if (activeTab !== void 0) return activeTab;
|
|
17
23
|
return internalActiveTab;
|
|
@@ -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", "import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab } = propsWithDefaults;\n\n const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n const tabsListRef = useRef<HTMLDivElement | null>(null);\n const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n const [internalActiveTab, setInternalActiveTab] = useState<string>(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n const { activeTab, children } = 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 === null) 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 ctx = useMemo(\n () => ({\n props: propsWithDefaults,\n tabsRef,\n focusableTabsRef,\n tabsListRef,\n tabsRefAsArray,\n setInternalActiveTab,\n actualActiveTab,\n actualActiveTabRef,\n carouselOnlyListRef,\n }),\n [actualActiveTab, propsWithDefaults],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,QAAQ,UAAU,SAAS,iBAAiB;AAC5D,SAAS,oCAAoC;AAC7C,SAAS,wBAAwB;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,gBAAgB;AAErG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,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,sBAAsB,KAAM,QAAO;AACvC,WAAO,kBAAkB,MAAM,SAAS;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB,mBAAmB;AAEtF,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,19 +36,14 @@ const TabsPanels = () => {
|
|
|
36
36
|
},
|
|
37
37
|
[actualActiveTab, focusableTabsRef, handleOnTabChange]
|
|
38
38
|
);
|
|
39
|
-
const firstSlideToShow = useMemo(() => {
|
|
40
|
-
const childrenArray = React2.Children.toArray(tabs);
|
|
41
|
-
const index = childrenArray.filter((tab) => tab.props.disabled !== true).findIndex((tab) => tab.props.tabId === actualActiveTab);
|
|
42
|
-
if (index === -1) return 0;
|
|
43
|
-
return index;
|
|
44
|
-
}, [actualActiveTab, tabs]);
|
|
45
39
|
const panels = useMemo(() => {
|
|
40
|
+
const emptyPanelRender = animated ? /* @__PURE__ */ jsx("div", {}) : null;
|
|
46
41
|
return React2.Children.map(tabs, (tab) => {
|
|
47
42
|
const { tabId: panelId = "", style, children: content, disabled } = tab.props;
|
|
48
43
|
const isActive = actualActiveTab === panelId;
|
|
49
44
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
50
|
-
if (disabled) return
|
|
51
|
-
if (!shouldRender) return
|
|
45
|
+
if (disabled) return emptyPanelRender;
|
|
46
|
+
if (!shouldRender) return emptyPanelRender;
|
|
52
47
|
return /* @__PURE__ */ createElement(
|
|
53
48
|
StyledPanelContainer,
|
|
54
49
|
{
|
|
@@ -71,7 +66,13 @@ const TabsPanels = () => {
|
|
|
71
66
|
content
|
|
72
67
|
);
|
|
73
68
|
});
|
|
74
|
-
}, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
|
|
69
|
+
}, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
|
|
70
|
+
const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {
|
|
71
|
+
const childrenArray = React2.Children.toArray(tabs);
|
|
72
|
+
const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);
|
|
73
|
+
if (index === -1) return 0;
|
|
74
|
+
return index;
|
|
75
|
+
}, [actualActiveTab, tabs]);
|
|
75
76
|
if (animated) {
|
|
76
77
|
const Comp = SwipeableViews?.default ?? SwipeableViews;
|
|
77
78
|
return /* @__PURE__ */ jsx(
|
|
@@ -84,7 +85,7 @@ const TabsPanels = () => {
|
|
|
84
85
|
...swipeableViewsContainerProps?.style || {}
|
|
85
86
|
},
|
|
86
87
|
enableMouseEvents,
|
|
87
|
-
index:
|
|
88
|
+
index: indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull,
|
|
88
89
|
onChangeIndex: handleOnChangeIndex,
|
|
89
90
|
children: panels
|
|
90
91
|
}
|
|
@@ -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 SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: {\n animated,\n enableMouseEvents,\n onlyRenderActiveTab,\n children: tabs,\n isDSMobile,\n tabPanelsProps,\n swipeableViewsContainerProps,\n },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const panels = 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 const emptyPanelRender = animated ? <div /> : null;\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n\n if (disabled) return emptyPanelRender;\n if (!shouldRender) return emptyPanelRender;\n return (\n <StyledPanelContainer\n {...tabPanelsProps}\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hide={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={{\n ...(tabPanelsProps?.style || {}),\n ...(style || {}),\n }}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n );\n });\n }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n if (animated) {\n // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n return (\n <Comp\n {...swipeableViewsContainerProps}\n style={{\n overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n ...(swipeableViewsContainerProps?.style || {}),\n }}\n enableMouseEvents={enableMouseEvents}\n index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </Comp>\n );\n }\n\n return panels;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwEiB;AAShC;AA/ER,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,aAAa,MAAmC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AAElE,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB,QAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,SAAS,QAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,oBAAC,SAAI,IAAK;AAC9C,WAAOA,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AACzE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI,SAAU,QAAO;AACrB,UAAI,CAAC,aAAc,QAAO;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG,OAAO;AAAA,UAC3B,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,iBAAiB,qBAAqB,gBAAgB,mBAAmB,UAAU,CAAC;AAExG,QAAM,qFAAqF,QAAQ,MAAM;AACvG,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cAAc,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAElF,QAAI,UAAU,GAAI,QAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,MAAI,UAAU;AAGZ,UAAM,OAAQ,gBAAwB,WAAW;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.49.
|
|
3
|
+
"version": "3.49.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -134,19 +134,19 @@
|
|
|
134
134
|
"dependencies": {
|
|
135
135
|
"@react-hook/resize-observer": "~1.2.6",
|
|
136
136
|
"react-swipeable-views": "~0.14.0",
|
|
137
|
-
"@elliemae/ds-button-v2": "3.49.
|
|
138
|
-
"@elliemae/ds-icon": "3.49.
|
|
139
|
-
"@elliemae/ds-
|
|
140
|
-
"@elliemae/ds-
|
|
141
|
-
"@elliemae/ds-
|
|
142
|
-
"@elliemae/ds-
|
|
137
|
+
"@elliemae/ds-button-v2": "3.49.3",
|
|
138
|
+
"@elliemae/ds-icon": "3.49.3",
|
|
139
|
+
"@elliemae/ds-icons": "3.49.3",
|
|
140
|
+
"@elliemae/ds-props-helpers": "3.49.3",
|
|
141
|
+
"@elliemae/ds-system": "3.49.3",
|
|
142
|
+
"@elliemae/ds-typescript-helpers": "3.49.3"
|
|
143
143
|
},
|
|
144
144
|
"devDependencies": {
|
|
145
145
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
146
146
|
"jest": "~29.7.0",
|
|
147
147
|
"jest-cli": "~29.7.0",
|
|
148
148
|
"styled-components": "~5.3.9",
|
|
149
|
-
"@elliemae/ds-monorepo-devops": "3.49.
|
|
149
|
+
"@elliemae/ds-monorepo-devops": "3.49.3"
|
|
150
150
|
},
|
|
151
151
|
"peerDependencies": {
|
|
152
152
|
"lodash": "^4.17.21",
|