@elliemae/ds-tabs 3.60.0-next.14 → 3.60.0-next.16
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 +5 -3
- package/dist/cjs/config/useTabs.js.map +2 -2
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js +2 -0
- package/dist/cjs/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/esm/config/useTabs.js +5 -3
- package/dist/esm/config/useTabs.js.map +2 -2
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js +2 -0
- package/dist/esm/parts/tabBar/TabBarItemRenderer.js.map +2 -2
- package/dist/types/sharedTypes.d.ts +1 -0
- package/dist/types/tests/DSTabs.allDisabled.test.d.ts +1 -0
- package/package.json +12 -14
|
@@ -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);
|
|
@@ -135,7 +135,8 @@ const useTabs = (props) => {
|
|
|
135
135
|
mobileGradients,
|
|
136
136
|
updateMobileGradients,
|
|
137
137
|
handleOnTabChange,
|
|
138
|
-
userDidChangeTabAtleastOnceRef
|
|
138
|
+
userDidChangeTabAtleastOnceRef,
|
|
139
|
+
firstActivableTabId
|
|
139
140
|
}),
|
|
140
141
|
[
|
|
141
142
|
propsWithDefaults,
|
|
@@ -144,7 +145,8 @@ const useTabs = (props) => {
|
|
|
144
145
|
mobileGradients,
|
|
145
146
|
updateMobileGradients,
|
|
146
147
|
handleOnTabChange,
|
|
147
|
-
userDidChangeTabAtleastOnceRef
|
|
148
|
+
userDidChangeTabAtleastOnceRef,
|
|
149
|
+
firstActivableTabId
|
|
148
150
|
]
|
|
149
151
|
);
|
|
150
152
|
return ctx;
|
|
@@ -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 firstActivableTabId,\n }),\n [\n propsWithDefaults,\n actualActiveTab,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n firstActivableTabId,\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
|
}
|
|
@@ -47,6 +47,7 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
|
|
|
47
47
|
tabsRefAsArray,
|
|
48
48
|
carouselOnlyListRef,
|
|
49
49
|
actualActiveTab,
|
|
50
|
+
firstActivableTabId,
|
|
50
51
|
props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },
|
|
51
52
|
globalClickHandler
|
|
52
53
|
} = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
@@ -74,6 +75,7 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
|
|
|
74
75
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
75
76
|
ButtonComponent,
|
|
76
77
|
{
|
|
78
|
+
tabIndex: firstActivableTabId === tabId ? 0 : -1,
|
|
77
79
|
...rest,
|
|
78
80
|
getOwnerProps,
|
|
79
81
|
getOwnerPropsArguments,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/TabBarItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport {\n StyledTabButton,\n StyledRequiredMark,\n ScreenReaderOnly,\n StyledSubTabButton,\n StyledSelectionIndicator,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n firstActivableTabId,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const {\n tabId = '',\n title = '',\n style,\n required = false,\n disabled = false,\n applyAriaDisabled = false,\n ref,\n onClick,\n onKeyDown,\n ...rest\n } = tab.props;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ tabId });\n\n if (!disabled) availableTabIndexes.push(index);\n const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n const isActive = actualActiveTab === tabId;\n\n return (\n <ButtonComponent\n tabIndex={firstActivableTabId === tabId ? 0 : -1}\n {...rest}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n key={tabId}\n role=\"tab\"\n innerRef={(tabButtonRef: HTMLButtonElement) => {\n if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n tabsRefAsArray.current[index] = tabButtonRef;\n if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n focusableTabsRef.current.push(tabButtonRef);\n tabsRef.current[index] = tabButtonRef;\n if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n lastTabInternalRef.current = tabButtonRef;\n }\n if (ref) ref.current = tabButtonRef;\n }\n }}\n type=\"button\"\n aria-controls={tabId}\n aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n aria-disabled={disabled || applyAriaDisabled}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n data-required={required}\n data-tab-id={tabId}\n data-index={index}\n withCarousel={withCarousel}\n isActive={isActive}\n disabled={disabled}\n showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Click handler for tab buttons. It:\n * 1. Prevents tab change if aria-disabled is true\n * 2. Updates active tab and indicator style if not disabled\n * 3. Calls the user's onClick callback if provided\n */\n if (applyAriaDisabled) return;\n if (!disabled) {\n globalClickHandler({ event: e, target: 'tabItem', tabId });\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Focus handler for carousel tabs. It:\n * 1. Centers the focused tab in the carousel viewport\n * 2. Only applies when withCarousel prop is true\n */\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Keyboard navigation handler. It:\n * 1. Prevents Enter key propagation\n * 2. Handles keyboard navigation if not disabled\n * 3. Calls the user's onKeyDown callback if provided\n */\n if (e.key === 'Enter') e.stopPropagation();\n if (!disabled) handleOnKeyDown(e);\n if (onKeyDown && !disabled) onKeyDown(e);\n }}\n style={style}\n >\n {title}\n {required && (\n <>\n <StyledRequiredMark\n aria-hidden=\"true\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n ●\n </StyledRequiredMark>\n <ScreenReaderOnly getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n Required\n </ScreenReaderOnly>\n </>\n )}\n {isActive && type !== TAB_TYPES.SUBTABS ? (\n <StyledSelectionIndicator\n aria-hidden=\"true\"\n isDSMobile={isDSMobile}\n tabType={type}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : null}\n </ButtonComponent>\n );\n });\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgIb;AA1EJ;AArDN,IAAAA,gBAAkC;AAClC,oBAMO;AACP,uBAAqD;AACrD,mCAAsC;AACtC,qBAA0B;AAE1B,uBAA4C;AAErC,MAAM,qBAAgE,cAAAC,QAAM,KAAK,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,YAAY,eAAe,UAAU,KAAK;AAAA,IACzF;AAAA,EACF,QAAI,0BAAW,8BAAa;AAE5B,QAAM,EAAE,oBAAoB,uBAAuB,QAAI,0BAAW,sCAAqB;AACvF,QAAM,EAAE,gBAAgB,QAAI,oDAAsB;AAElD,QAAM,sBAAgC,CAAC;AAEvC,SAAO,cAAAA,QAAM,SAAS,IAAI,MAAM,CAAC,KAAuC,UAAU;AAChF,UAAM;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,IAAI;AACR,UAAM,gBAAgB,MAAM,IAAI;AAChC,UAAM,yBAAyB,OAAO,EAAE,MAAM;AAE9C,QAAI,CAAC,SAAU,qBAAoB,KAAK,KAAK;AAC7C,UAAM,kBAAkB,SAAS,2BAAU,UAAU,mCAAqB;AAE1E,UAAM,WAAW,oBAAoB;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,wBAAwB,QAAQ,IAAI;AAAA,QAC7C,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU,CAAC,iBAAoC;AAC7C,cAAI,gBAAgB,eAAe,WAAW,iBAAiB,WAAW,QAAQ,SAAS;AACzF,2BAAe,QAAQ,KAAK,IAAI;AAChC,gBAAI,CAAC,YAAY,CAAC,iBAAiB,QAAQ,SAAS,YAAY;AAC9D,+BAAiB,QAAQ,KAAK,YAAY;AAC5C,oBAAQ,QAAQ,KAAK,IAAI;AACzB,gBAAI,SAAS,2BAAU,WAAW,0BAA0B,UAAU,oBAAoB,CAAC,GAAG;AAC5F,qCAAuB,UAAU;AAAA,YACnC;AACA,gBAAI,SAAS,2BAAU,WAAW,UAAU,oBAAoB,oBAAoB,SAAS,CAAC,GAAG;AAC/F,iCAAmB,UAAU;AAAA,YAC/B;AACA,gBAAI,IAAK,KAAI,UAAU;AAAA,UACzB;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe,oBAAoB,SAAS,CAAC;AAAA,QAC7C,iBAAe,YAAY;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,eAAa;AAAA,QACb,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,iBAAiB,SAAS,2BAAU;AAAA,QACnD,eAAa,SAAS,2BAAU,SAAS,kCAAiB,aAAa,kCAAiB;AAAA,QACxF,IAAI,GAAG,KAAK;AAAA,QACZ,SAAS,CAAC,MAAM;AAOd,cAAI,kBAAmB;AACvB,cAAI,CAAC,UAAU;AACb,+BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,MAAM,CAAC;AAAA,UAC3D;AACA,cAAI,WAAW,CAAC,SAAU,SAAQ,OAAO,CAAC;AAAA,QAC5C;AAAA,QACA,SAAS,CAAC,MAAM;AAMd,cAAI,aAAc,+BAAU,EAAE,GAAG,SAAS,oBAAoB,CAAC;AAAA,QACjE;AAAA,QACA,WAAW,CAAC,MAAM;AAOhB,cAAI,EAAE,QAAQ,QAAS,GAAE,gBAAgB;AACzC,cAAI,CAAC,SAAU,iBAAgB,CAAC;AAChC,cAAI,aAAa,CAAC,SAAU,WAAU,CAAC;AAAA,QACzC;AAAA,QACA;AAAA;AAAA,MAEC;AAAA,MACA,YACC,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QACA,4CAAC,kCAAiB,eAA8B,wBAAgD,sBAEhG;AAAA,SACF;AAAA,MAED,YAAY,SAAS,2BAAU,UAC9B;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA;AAAA,MACF,IACE;AAAA,IACN;AAAA,EAEJ,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n export interface MobileGradientsT {\n right: boolean;\n left: boolean;\n }\n\n export interface ShowChevronsT {\n right: boolean;\n left: boolean;\n }\n export interface GlobalClickHandlerT {\n event: React.MouseEvent;\n target: 'panel' | 'tabItem' | 'tabsList' | 'swipeableViews';\n tabId?: string;\n }\n\n export interface DSTabsUseTabsContextT {\n props: DSTabsT.InternalProps;\n tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n actualActiveTab: string;\n globalClickHandler: (data: GlobalClickHandlerT) => void;\n updateMobileGradients: () => void;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;\n }\n\n export interface DSTabsUseCrossRefContextT {\n lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n export interface MobileGradientsT {\n right: boolean;\n left: boolean;\n }\n\n export interface ShowChevronsT {\n right: boolean;\n left: boolean;\n }\n export interface GlobalClickHandlerT {\n event: React.MouseEvent;\n target: 'panel' | 'tabItem' | 'tabsList' | 'swipeableViews';\n tabId?: string;\n }\n\n export interface DSTabsUseTabsContextT {\n props: DSTabsT.InternalProps;\n tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n actualActiveTab: string;\n globalClickHandler: (data: GlobalClickHandlerT) => void;\n updateMobileGradients: () => void;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;\n firstActivableTabId: string;\n }\n\n export interface DSTabsUseCrossRefContextT {\n lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
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);
|
|
@@ -102,7 +102,8 @@ const useTabs = (props) => {
|
|
|
102
102
|
mobileGradients,
|
|
103
103
|
updateMobileGradients,
|
|
104
104
|
handleOnTabChange,
|
|
105
|
-
userDidChangeTabAtleastOnceRef
|
|
105
|
+
userDidChangeTabAtleastOnceRef,
|
|
106
|
+
firstActivableTabId
|
|
106
107
|
}),
|
|
107
108
|
[
|
|
108
109
|
propsWithDefaults,
|
|
@@ -111,7 +112,8 @@ const useTabs = (props) => {
|
|
|
111
112
|
mobileGradients,
|
|
112
113
|
updateMobileGradients,
|
|
113
114
|
handleOnTabChange,
|
|
114
|
-
userDidChangeTabAtleastOnceRef
|
|
115
|
+
userDidChangeTabAtleastOnceRef,
|
|
116
|
+
firstActivableTabId
|
|
115
117
|
]
|
|
116
118
|
);
|
|
117
119
|
return ctx;
|
|
@@ -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 firstActivableTabId,\n }),\n [\n propsWithDefaults,\n actualActiveTab,\n globalClickHandler,\n mobileGradients,\n updateMobileGradients,\n handleOnTabChange,\n userDidChangeTabAtleastOnceRef,\n firstActivableTabId,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -20,6 +20,7 @@ const TabBarItemRenderer = React2.memo(() => {
|
|
|
20
20
|
tabsRefAsArray,
|
|
21
21
|
carouselOnlyListRef,
|
|
22
22
|
actualActiveTab,
|
|
23
|
+
firstActivableTabId,
|
|
23
24
|
props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },
|
|
24
25
|
globalClickHandler
|
|
25
26
|
} = useContext(DSTabsContext);
|
|
@@ -47,6 +48,7 @@ const TabBarItemRenderer = React2.memo(() => {
|
|
|
47
48
|
return /* @__PURE__ */ createElement(
|
|
48
49
|
ButtonComponent,
|
|
49
50
|
{
|
|
51
|
+
tabIndex: firstActivableTabId === tabId ? 0 : -1,
|
|
50
52
|
...rest,
|
|
51
53
|
getOwnerProps,
|
|
52
54
|
getOwnerPropsArguments,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBarItemRenderer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport {\n StyledTabButton,\n StyledRequiredMark,\n ScreenReaderOnly,\n StyledSubTabButton,\n StyledSelectionIndicator,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsRefAsArray,\n carouselOnlyListRef,\n actualActiveTab,\n firstActivableTabId,\n props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n globalClickHandler,\n } = useContext(DSTabsContext);\n\n const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n const { handleOnKeyDown } = useKeyboardNavigation();\n\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const {\n tabId = '',\n title = '',\n style,\n required = false,\n disabled = false,\n applyAriaDisabled = false,\n ref,\n onClick,\n onKeyDown,\n ...rest\n } = tab.props;\n const getOwnerProps = () => tab.props;\n const getOwnerPropsArguments = () => ({ tabId });\n\n if (!disabled) availableTabIndexes.push(index);\n const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n const isActive = actualActiveTab === tabId;\n\n return (\n <ButtonComponent\n tabIndex={firstActivableTabId === tabId ? 0 : -1}\n {...rest}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n key={tabId}\n role=\"tab\"\n innerRef={(tabButtonRef: HTMLButtonElement) => {\n if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n tabsRefAsArray.current[index] = tabButtonRef;\n if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n focusableTabsRef.current.push(tabButtonRef);\n tabsRef.current[index] = tabButtonRef;\n if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n lastTabInternalRef.current = tabButtonRef;\n }\n if (ref) ref.current = tabButtonRef;\n }\n }}\n type=\"button\"\n aria-controls={tabId}\n aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n aria-disabled={disabled || applyAriaDisabled}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n data-required={required}\n data-tab-id={tabId}\n data-index={index}\n withCarousel={withCarousel}\n isActive={isActive}\n disabled={disabled}\n showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Click handler for tab buttons. It:\n * 1. Prevents tab change if aria-disabled is true\n * 2. Updates active tab and indicator style if not disabled\n * 3. Calls the user's onClick callback if provided\n */\n if (applyAriaDisabled) return;\n if (!disabled) {\n globalClickHandler({ event: e, target: 'tabItem', tabId });\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Focus handler for carousel tabs. It:\n * 1. Centers the focused tab in the carousel viewport\n * 2. Only applies when withCarousel prop is true\n */\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\n /** [PUI-15772] - Tabs Pre Refactor\n * Keyboard navigation handler. It:\n * 1. Prevents Enter key propagation\n * 2. Handles keyboard navigation if not disabled\n * 3. Calls the user's onKeyDown callback if provided\n */\n if (e.key === 'Enter') e.stopPropagation();\n if (!disabled) handleOnKeyDown(e);\n if (onKeyDown && !disabled) onKeyDown(e);\n }}\n style={style}\n >\n {title}\n {required && (\n <>\n <StyledRequiredMark\n aria-hidden=\"true\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n ●\n </StyledRequiredMark>\n <ScreenReaderOnly getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n Required\n </ScreenReaderOnly>\n </>\n )}\n {isActive && type !== TAB_TYPES.SUBTABS ? (\n <StyledSelectionIndicator\n aria-hidden=\"true\"\n isDSMobile={isDSMobile}\n tabType={type}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : null}\n </ButtonComponent>\n );\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -29,6 +29,7 @@ export declare namespace DSTabsInternalsT {
|
|
|
29
29
|
updateMobileGradients: () => void;
|
|
30
30
|
mobileGradients: DSTabsInternalsT.MobileGradientsT;
|
|
31
31
|
userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;
|
|
32
|
+
firstActivableTabId: string;
|
|
32
33
|
}
|
|
33
34
|
interface DSTabsUseCrossRefContextT {
|
|
34
35
|
lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.16",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -36,21 +36,19 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.60.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-typescript-helpers": "3.60.0-next.
|
|
46
|
-
"@elliemae/ds-system": "3.60.0-next.14"
|
|
39
|
+
"@elliemae/ds-button-v2": "3.60.0-next.16",
|
|
40
|
+
"@elliemae/ds-icon": "3.60.0-next.16",
|
|
41
|
+
"@elliemae/ds-icons": "3.60.0-next.16",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.16",
|
|
43
|
+
"@elliemae/ds-system": "3.60.0-next.16",
|
|
44
|
+
"@elliemae/ds-swipe-card": "3.60.0-next.16",
|
|
45
|
+
"@elliemae/ds-typescript-helpers": "3.60.0-next.16"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
|
-
"
|
|
50
|
-
"jest": "~29.7.0",
|
|
48
|
+
"jest": "^30.0.0",
|
|
51
49
|
"styled-components": "~5.3.9",
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.60.0-next.
|
|
53
|
-
"@elliemae/ds-test-utils": "3.60.0-next.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.16",
|
|
51
|
+
"@elliemae/ds-test-utils": "3.60.0-next.16"
|
|
54
52
|
},
|
|
55
53
|
"peerDependencies": {
|
|
56
54
|
"lodash-es": "^4.17.21",
|
|
@@ -64,7 +62,7 @@
|
|
|
64
62
|
},
|
|
65
63
|
"scripts": {
|
|
66
64
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
67
|
-
"test": "
|
|
65
|
+
"test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
|
|
68
66
|
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
69
67
|
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
70
68
|
"dts": "node ../../../scripts/dts.mjs",
|