@elliemae/ds-tabs 3.37.0-rc.3 → 3.37.0-rc.5
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/tabBar/useResizeObserver.js +68 -0
- package/dist/cjs/parts/tabBar/useResizeObserver.js.map +7 -0
- package/dist/cjs/parts/tabBar/useTabBar.js +3 -3
- package/dist/cjs/parts/tabBar/useTabBar.js.map +2 -2
- package/dist/cjs/parts/tabsContent/TabsContent.js +3 -3
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/parts/tabBar/useResizeObserver.js +38 -0
- package/dist/esm/parts/tabBar/useResizeObserver.js.map +7 -0
- package/dist/esm/parts/tabBar/useTabBar.js +1 -1
- package/dist/esm/parts/tabBar/useTabBar.js.map +1 -1
- package/dist/esm/parts/tabsContent/TabsContent.js +1 -1
- package/dist/esm/parts/tabsContent/TabsContent.js.map +1 -1
- package/dist/types/parts/tabBar/useResizeObserver.d.ts +7 -0
- package/package.json +7 -8
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var useResizeObserver_exports = {};
|
|
30
|
+
__export(useResizeObserver_exports, {
|
|
31
|
+
default: () => useResizeObserver_default,
|
|
32
|
+
useResizeObserver: () => useResizeObserver
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(useResizeObserver_exports);
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
var import_react = require("react");
|
|
37
|
+
var import_raf = __toESM(require("raf"));
|
|
38
|
+
var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
|
|
39
|
+
const useResizeObserver = (handler, el) => {
|
|
40
|
+
const [node, setRef] = (0, import_react.useState)(el);
|
|
41
|
+
const resizeObserver = (0, import_react.useMemo)(
|
|
42
|
+
() => new import_resize_observer_polyfill.default((entries) => {
|
|
43
|
+
if (!Array.isArray(entries)) return;
|
|
44
|
+
if (!entries.length) return;
|
|
45
|
+
const entry = entries[0];
|
|
46
|
+
(0, import_raf.default)(
|
|
47
|
+
() => handler(
|
|
48
|
+
{
|
|
49
|
+
width: entry.target.offsetWidth,
|
|
50
|
+
height: entry.target.offsetHeight
|
|
51
|
+
},
|
|
52
|
+
entry.target
|
|
53
|
+
)
|
|
54
|
+
);
|
|
55
|
+
}),
|
|
56
|
+
[handler]
|
|
57
|
+
);
|
|
58
|
+
const htmlEl = el || node;
|
|
59
|
+
(0, import_react.useEffect)(() => {
|
|
60
|
+
if (htmlEl) resizeObserver.observe(htmlEl);
|
|
61
|
+
return () => {
|
|
62
|
+
if (htmlEl) resizeObserver.unobserve(htmlEl);
|
|
63
|
+
};
|
|
64
|
+
}, [htmlEl, resizeObserver]);
|
|
65
|
+
return [setRef];
|
|
66
|
+
};
|
|
67
|
+
var useResizeObserver_default = useResizeObserver;
|
|
68
|
+
//# sourceMappingURL=useResizeObserver.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/parts/tabBar/useResizeObserver.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement | null) => {\n const [node, setRef] = useState(el);\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) return;\n if (!entries.length) return;\n const entry = entries[0];\n\n // execute on the next animation frame\n raf(() =>\n handler(\n {\n width: (entry.target as HTMLElement).offsetWidth,\n height: (entry.target as HTMLElement).offsetHeight,\n },\n entry.target,\n ),\n );\n }),\n [handler],\n );\n\n const htmlEl = el || node;\n\n useEffect(() => {\n if (htmlEl) resizeObserver.observe(htmlEl);\n return () => {\n if (htmlEl) resizeObserver.unobserve(htmlEl);\n };\n }, [htmlEl, resizeObserver]);\n\n return [setRef];\n};\n\nexport default useResizeObserver;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,iBAAgB;AAChB,sCAA2B;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,OAA2B;AAC9E,QAAM,CAAC,MAAM,MAAM,QAAI,uBAAS,EAAE;AAElC,QAAM,qBAAiB;AAAA,IACrB,MACE,IAAI,gCAAAA,QAAe,CAAC,YAAY;AAC9B,UAAI,CAAC,MAAM,QAAQ,OAAO,EAAG;AAC7B,UAAI,CAAC,QAAQ,OAAQ;AACrB,YAAM,QAAQ,QAAQ,CAAC;AAGvB,qBAAAC;AAAA,QAAI,MACF;AAAA,UACE;AAAA,YACE,OAAQ,MAAM,OAAuB;AAAA,YACrC,QAAS,MAAM,OAAuB;AAAA,UACxC;AAAA,UACA,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,SAAS,MAAM;AAErB,8BAAU,MAAM;AACd,QAAI,OAAQ,gBAAe,QAAQ,MAAM;AACzC,WAAO,MAAM;AACX,UAAI,OAAQ,gBAAe,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO,CAAC,MAAM;AAChB;AAEA,IAAO,4BAAQ;",
|
|
6
|
+
"names": ["ResizeObserver", "raf"]
|
|
7
|
+
}
|
|
@@ -33,7 +33,7 @@ __export(useTabBar_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useTabBar_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
|
-
var
|
|
36
|
+
var import_useResizeObserver = require("./useResizeObserver.js");
|
|
37
37
|
var import_helpers = require("../../utils/helpers.js");
|
|
38
38
|
var import_DSTabsCTX = require("../../DSTabsCTX.js");
|
|
39
39
|
var import_constants = require("../../utils/constants.js");
|
|
@@ -68,8 +68,8 @@ const useTabBar = () => {
|
|
|
68
68
|
() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
|
|
69
69
|
[getIndicatorStyles, setIndicatorStyle]
|
|
70
70
|
);
|
|
71
|
-
(0,
|
|
72
|
-
(0,
|
|
71
|
+
(0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, tabsListRef.current);
|
|
72
|
+
(0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, actualActiveTabRef.current);
|
|
73
73
|
const updateMobileGradients = (0, import_react.useCallback)(() => {
|
|
74
74
|
if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
|
|
75
75
|
const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabBar/useTabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { defaultIndicatorStyles } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseTabBarReturnTypeT {\n updateIndicatorStyle: () => void;\n updateMobileGradients: () => void;\n setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n const {\n actualActiveTab,\n actualActiveTabRef,\n tabsListRef,\n props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n } = useContext(DSTabsContext);\n\n const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n left: false,\n right: false,\n });\n const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(defaultIndicatorStyles);\n\n const getIndicatorStyles = useCallback(() => {\n if (tabsListRef.current) {\n const tabList = tabsListRef.current;\n const activeTabButton = actualActiveTabRef.current;\n\n if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n // the full width of the tab button with margins.\n const missingMargins = isDSMobile ? 0 : 16;\n\n const tabClientWidth =\n isDSMobile && !fixedTabsHeaders\n ? activeTabButton.clientWidth\n : activeTabButton.clientWidth + missingMargins * 2;\n\n // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n // behavior that adds scroll to the tabList\n const position =\n isDSMobile && !fixedTabsHeaders\n ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n return {\n left: Math.round(position),\n width: Math.round(tabClientWidth),\n };\n }\n return defaultIndicatorStyles;\n }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n const updateIndicatorStyle = useCallback(\n () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n [getIndicatorStyles, setIndicatorStyle],\n );\n\n useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n const updateMobileGradients = 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 useLayoutEffect(() => {\n if (showSelectionIndicator) {\n updateIndicatorStyle();\n }\n if (isDSMobile && !fixedTabsHeaders) {\n updateMobileGradients();\n }\n }, [\n updateMobileGradients,\n showSelectionIndicator,\n updateIndicatorStyle,\n isDSMobile,\n fixedTabsHeaders,\n actualActiveTab,\n ]);\n\n return {\n updateIndicatorStyle,\n setIndicatorStyle,\n indicatorStyle,\n mobileGradients,\n updateMobileGradients,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,+BAAkC;AAClC,qBAAkF;AAClF,uBAA8B;AAC9B,uBAAuC;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA2C,uCAAsB;AAE7G,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,KAAC,iCAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,2BAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,kDAAkB,sBAAsB,YAAY,OAAO;AAC3D,kDAAkB,sBAAsB,mBAAmB,OAAO;AAElE,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,UAAM,uCAAuB,UAAU;AAAA,QACvC,WAAO,wCAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(TabsContent_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
38
|
var import_TabsPanels = require("../tabsPanel/TabsPanels.js");
|
|
39
39
|
var import_TabBar = require("../tabBar/TabBar.js");
|
|
40
40
|
var import_styles = require("./styles.js");
|
|
@@ -45,8 +45,8 @@ const TabsContent = () => {
|
|
|
45
45
|
props,
|
|
46
46
|
props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent }
|
|
47
47
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
48
|
-
const globalProps = (0,
|
|
49
|
-
const xstyledProps = (0,
|
|
48
|
+
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
49
|
+
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
50
50
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
51
51
|
"div",
|
|
52
52
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,8BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,yCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,qBAAqB,qBAAqB;AAAA,WAC7C;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useEffect, useMemo, useState } from "react";
|
|
3
|
+
import raf from "raf";
|
|
4
|
+
import ResizeObserver from "resize-observer-polyfill";
|
|
5
|
+
const useResizeObserver = (handler, el) => {
|
|
6
|
+
const [node, setRef] = useState(el);
|
|
7
|
+
const resizeObserver = useMemo(
|
|
8
|
+
() => new ResizeObserver((entries) => {
|
|
9
|
+
if (!Array.isArray(entries)) return;
|
|
10
|
+
if (!entries.length) return;
|
|
11
|
+
const entry = entries[0];
|
|
12
|
+
raf(
|
|
13
|
+
() => handler(
|
|
14
|
+
{
|
|
15
|
+
width: entry.target.offsetWidth,
|
|
16
|
+
height: entry.target.offsetHeight
|
|
17
|
+
},
|
|
18
|
+
entry.target
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
}),
|
|
22
|
+
[handler]
|
|
23
|
+
);
|
|
24
|
+
const htmlEl = el || node;
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (htmlEl) resizeObserver.observe(htmlEl);
|
|
27
|
+
return () => {
|
|
28
|
+
if (htmlEl) resizeObserver.unobserve(htmlEl);
|
|
29
|
+
};
|
|
30
|
+
}, [htmlEl, resizeObserver]);
|
|
31
|
+
return [setRef];
|
|
32
|
+
};
|
|
33
|
+
var useResizeObserver_default = useResizeObserver;
|
|
34
|
+
export {
|
|
35
|
+
useResizeObserver_default as default,
|
|
36
|
+
useResizeObserver
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=useResizeObserver.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useResizeObserver.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement | null) => {\n const [node, setRef] = useState(el);\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) return;\n if (!entries.length) return;\n const entry = entries[0];\n\n // execute on the next animation frame\n raf(() =>\n handler(\n {\n width: (entry.target as HTMLElement).offsetWidth,\n height: (entry.target as HTMLElement).offsetHeight,\n },\n entry.target,\n ),\n );\n }),\n [handler],\n );\n\n const htmlEl = el || node;\n\n useEffect(() => {\n if (htmlEl) resizeObserver.observe(htmlEl);\n return () => {\n if (htmlEl) resizeObserver.unobserve(htmlEl);\n };\n }, [htmlEl, resizeObserver]);\n\n return [setRef];\n};\n\nexport default useResizeObserver;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,gBAAgB;AAC7C,OAAO,SAAS;AAChB,OAAO,oBAAoB;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,OAA2B;AAC9E,QAAM,CAAC,MAAM,MAAM,IAAI,SAAS,EAAE;AAElC,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,UAAI,CAAC,MAAM,QAAQ,OAAO,EAAG;AAC7B,UAAI,CAAC,QAAQ,OAAQ;AACrB,YAAM,QAAQ,QAAQ,CAAC;AAGvB;AAAA,QAAI,MACF;AAAA,UACE;AAAA,YACE,OAAQ,MAAM,OAAuB;AAAA,YACrC,QAAS,MAAM,OAAuB;AAAA,UACxC;AAAA,UACA,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,SAAS,MAAM;AAErB,YAAU,MAAM;AACd,QAAI,OAAQ,gBAAe,QAAQ,MAAM;AACzC,WAAO,MAAM;AACX,UAAI,OAAQ,gBAAe,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO,CAAC,MAAM;AAChB;AAEA,IAAO,4BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useCallback, useLayoutEffect, useState, useContext } from "react";
|
|
3
|
-
import { useResizeObserver } from "
|
|
3
|
+
import { useResizeObserver } from "./useResizeObserver.js";
|
|
4
4
|
import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from "../../utils/helpers.js";
|
|
5
5
|
import { DSTabsContext } from "../../DSTabsCTX.js";
|
|
6
6
|
import { defaultIndicatorStyles } from "../../utils/constants.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useTabBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { defaultIndicatorStyles } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseTabBarReturnTypeT {\n updateIndicatorStyle: () => void;\n updateMobileGradients: () => void;\n setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n const {\n actualActiveTab,\n actualActiveTabRef,\n tabsListRef,\n props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n } = useContext(DSTabsContext);\n\n const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n left: false,\n right: false,\n });\n const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(defaultIndicatorStyles);\n\n const getIndicatorStyles = useCallback(() => {\n if (tabsListRef.current) {\n const tabList = tabsListRef.current;\n const activeTabButton = actualActiveTabRef.current;\n\n if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n // the full width of the tab button with margins.\n const missingMargins = isDSMobile ? 0 : 16;\n\n const tabClientWidth =\n isDSMobile && !fixedTabsHeaders\n ? activeTabButton.clientWidth\n : activeTabButton.clientWidth + missingMargins * 2;\n\n // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n // behavior that adds scroll to the tabList\n const position =\n isDSMobile && !fixedTabsHeaders\n ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n return {\n left: Math.round(position),\n width: Math.round(tabClientWidth),\n };\n }\n return defaultIndicatorStyles;\n }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n const updateIndicatorStyle = useCallback(\n () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n [getIndicatorStyles, setIndicatorStyle],\n );\n\n useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n const updateMobileGradients = 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 useLayoutEffect(() => {\n if (showSelectionIndicator) {\n updateIndicatorStyle();\n }\n if (isDSMobile && !fixedTabsHeaders) {\n updateMobileGradients();\n }\n }, [\n updateMobileGradients,\n showSelectionIndicator,\n updateIndicatorStyle,\n isDSMobile,\n fixedTabsHeaders,\n actualActiveTab,\n ]);\n\n return {\n updateIndicatorStyle,\n setIndicatorStyle,\n indicatorStyle,\n mobileGradients,\n updateMobileGradients,\n };\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB,UAAU,kBAAkB;AACnE,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,wBAAwB,+BAA+B;AAClF,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,IAAI,WAAW,aAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA2C,sBAAsB;AAE7G,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,iBAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,uBAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,oBAAkB,sBAAsB,YAAY,OAAO;AAC3D,oBAAkB,sBAAsB,mBAAmB,OAAO;AAElE,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,uBAAuB,UAAU;AAAA,QACvC,OAAO,wBAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,kBAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext } from "react";
|
|
4
|
-
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-
|
|
4
|
+
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { TabsPanels } from "../tabsPanel/TabsPanels.js";
|
|
6
6
|
import { TabBar } from "../tabBar/TabBar.js";
|
|
7
7
|
import { StyledTabBarContainer } from "./styles.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props,\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n const globalProps = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <div\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n ref={innerRef}\n data-testid={DSTabsDatatestid.TABS_CONTAINER}\n >\n <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACyBjB,SACE,KADF;AAzBN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAE9B;AAAA,6BAAC,yBAAsB,cAAY,mBACjC;AAAA,8BAAC,UAAO;AAAA,UACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,UAC9C,qBAAqB,qBAAqB;AAAA,WAC7C;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
type HandlerT = (measures: {
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
}, element: Element) => void;
|
|
6
|
+
export declare const useResizeObserver: (handler: HandlerT, el: HTMLElement | null) => import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>[];
|
|
7
|
+
export default useResizeObserver;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tabs",
|
|
3
|
-
"version": "3.37.0-rc.
|
|
3
|
+
"version": "3.37.0-rc.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tabs",
|
|
6
6
|
"files": [
|
|
@@ -134,17 +134,16 @@
|
|
|
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.37.0-rc.
|
|
138
|
-
"@elliemae/ds-
|
|
139
|
-
"@elliemae/ds-
|
|
140
|
-
"@elliemae/ds-
|
|
141
|
-
"@elliemae/ds-
|
|
142
|
-
"@elliemae/ds-utilities": "3.37.0-rc.3"
|
|
137
|
+
"@elliemae/ds-button-v2": "3.37.0-rc.5",
|
|
138
|
+
"@elliemae/ds-icons": "3.37.0-rc.5",
|
|
139
|
+
"@elliemae/ds-system": "3.37.0-rc.5",
|
|
140
|
+
"@elliemae/ds-props-helpers": "3.37.0-rc.5",
|
|
141
|
+
"@elliemae/ds-icon": "3.37.0-rc.5"
|
|
143
142
|
},
|
|
144
143
|
"devDependencies": {
|
|
145
144
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
146
145
|
"styled-components": "~5.3.9",
|
|
147
|
-
"@elliemae/ds-monorepo-devops": "3.37.0-rc.
|
|
146
|
+
"@elliemae/ds-monorepo-devops": "3.37.0-rc.5"
|
|
148
147
|
},
|
|
149
148
|
"peerDependencies": {
|
|
150
149
|
"lodash": "^4.17.21",
|