@toptal/picasso-tabs 5.0.15-alpha-MP-955-fix-section-closing-animation-d279e2398.0 → 5.0.15-alpha-ff-7-tabs-19babbfd6.8

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.
Files changed (45) hide show
  1. package/dist-package/src/Tab/Tab.d.ts +3 -3
  2. package/dist-package/src/Tab/Tab.d.ts.map +1 -1
  3. package/dist-package/src/Tab/Tab.js +62 -14
  4. package/dist-package/src/Tab/Tab.js.map +1 -1
  5. package/dist-package/src/Tabs/Tabs.d.ts +11 -8
  6. package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
  7. package/dist-package/src/Tabs/Tabs.js +53 -16
  8. package/dist-package/src/Tabs/Tabs.js.map +1 -1
  9. package/dist-package/src/TabsCompound/index.d.ts +2 -4
  10. package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
  11. package/dist-package/src/index.d.ts +0 -1
  12. package/dist-package/src/index.d.ts.map +1 -1
  13. package/dist-package/src/index.js +0 -1
  14. package/dist-package/src/index.js.map +1 -1
  15. package/package.json +14 -13
  16. package/src/Tab/Tab.tsx +99 -21
  17. package/src/Tabs/Tabs.tsx +88 -37
  18. package/src/Tabs/__snapshots__/test.tsx.snap +56 -71
  19. package/src/Tabs/test.tsx +4 -4
  20. package/src/index.ts +0 -1
  21. package/dist-package/src/Tab/styles.d.ts +0 -4
  22. package/dist-package/src/Tab/styles.d.ts.map +0 -1
  23. package/dist-package/src/Tab/styles.js +0 -95
  24. package/dist-package/src/Tab/styles.js.map +0 -1
  25. package/dist-package/src/TabScrollButton/TabScrollButton.d.ts +0 -12
  26. package/dist-package/src/TabScrollButton/TabScrollButton.d.ts.map +0 -1
  27. package/dist-package/src/TabScrollButton/TabScrollButton.js +0 -30
  28. package/dist-package/src/TabScrollButton/TabScrollButton.js.map +0 -1
  29. package/dist-package/src/TabScrollButton/index.d.ts +0 -5
  30. package/dist-package/src/TabScrollButton/index.d.ts.map +0 -1
  31. package/dist-package/src/TabScrollButton/index.js +0 -2
  32. package/dist-package/src/TabScrollButton/index.js.map +0 -1
  33. package/dist-package/src/Tabs/styles.d.ts +0 -4
  34. package/dist-package/src/Tabs/styles.d.ts.map +0 -1
  35. package/dist-package/src/Tabs/styles.js +0 -41
  36. package/dist-package/src/Tabs/styles.js.map +0 -1
  37. package/dist-package/src/Tabs/use-tab-action.d.ts +0 -5
  38. package/dist-package/src/Tabs/use-tab-action.d.ts.map +0 -1
  39. package/dist-package/src/Tabs/use-tab-action.js +0 -21
  40. package/dist-package/src/Tabs/use-tab-action.js.map +0 -1
  41. package/src/Tab/styles.ts +0 -107
  42. package/src/TabScrollButton/TabScrollButton.tsx +0 -59
  43. package/src/TabScrollButton/index.ts +0 -6
  44. package/src/Tabs/styles.ts +0 -45
  45. package/src/Tabs/use-tab-action.ts +0 -27
@@ -1,30 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React, { forwardRef } from 'react';
13
- import { ButtonBase } from '@material-ui/core';
14
- import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons';
15
- import { Container } from '@toptal/picasso-container';
16
- import { twMerge } from '@toptal/picasso-tailwind-merge';
17
- export const TabScrollButton = forwardRef(function TabScrollButton(props, ref) {
18
- const { className, style, direction, disabled } = props, rest = __rest(props, ["className", "style", "direction", "disabled"]);
19
- if (disabled) {
20
- return null;
21
- }
22
- return (React.createElement(Container, Object.assign({}, rest, { ref: ref, className: twMerge('relative', className), style: style }),
23
- React.createElement(Container, { className: twMerge('absolute w-10 h-full z-10', direction === 'left'
24
- ? 'bg-gradient-to-r from-white via-white to-transparent'
25
- : 'bg-gradient-to-l from-white via-white to-transparent', direction === 'left' ? 'left-0' : 'right-0') },
26
- React.createElement(ButtonBase, { className: twMerge('absolute w-4 h-full', direction === 'left' ? 'left-0' : 'right-0'), "aria-label": `${direction} button`, "data-testid": `tab-scroll-button-${direction}` }, direction === 'left' ? React.createElement(BackMinor16, null) : React.createElement(ChevronMinor16, null)))));
27
- });
28
- TabScrollButton.displayName = 'TabScrollButton';
29
- export default TabScrollButton;
30
- //# sourceMappingURL=TabScrollButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabScrollButton.js","sourceRoot":"","sources":["../../../src/TabScrollButton/TabScrollButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1D,+CAAkD,CAAQ,CAAA;IAEhE,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,EACzC,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAChB,2BAA2B,EAC3B,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,sDAAsD;gBACxD,CAAC,CAAC,sDAAsD,EAC1D,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C;YAED,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAChB,qBAAqB,EACrB,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C,gBACW,GAAG,SAAS,SAAS,iBACpB,qBAAqB,SAAS,EAAE,IAE5C,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CACjD,CACH,CACF,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
@@ -1,5 +0,0 @@
1
- import type { OmitInternalProps } from '@toptal/picasso-shared';
2
- import type { Props } from './TabScrollButton';
3
- export { default as TabScrollButton } from './TabScrollButton';
4
- export declare type TabScrollButtonProps = OmitInternalProps<Props>;
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,oBAAY,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as TabScrollButton } from './TabScrollButton';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
@@ -1,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCA6BxB,KAAK;AAAlC,wBAeI"}
@@ -1,41 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- import { PicassoProvider } from '@toptal/picasso-provider';
3
- PicassoProvider.override(({ palette }) => ({
4
- MuiTabs: {
5
- root: {
6
- position: 'relative',
7
- minHeight: 0,
8
- },
9
- vertical: {
10
- width: 200,
11
- margin: 0,
12
- '& $scroller': {
13
- // We need a bit of padding to allow active tab's shadow to be visible
14
- paddingLeft: '0.5em',
15
- },
16
- '& $indicator': {
17
- display: 'none',
18
- },
19
- },
20
- indicator: {
21
- backgroundColor: palette.blue.main,
22
- zIndex: 1,
23
- },
24
- },
25
- }));
26
- export default ({ palette }) => createStyles({
27
- horizontal: {
28
- '&::after': {
29
- position: 'absolute',
30
- content: '""',
31
- bottom: 0,
32
- left: 0,
33
- right: 0,
34
- height: 1,
35
- backgroundColor: palette.grey.main,
36
- zIndex: 0,
37
- },
38
- },
39
- vertical: {},
40
- });
41
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;SACb;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,aAAa,EAAE;gBACb,sEAAsE;gBACtE,WAAW,EAAE,OAAO;aACrB;YAED,cAAc,EAAE;gBACd,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;IACD,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}
@@ -1,5 +0,0 @@
1
- import type { Ref } from 'react';
2
- import type { TabsActions } from '@material-ui/core';
3
- declare const useTabAction: () => Ref<TabsActions>;
4
- export default useTabAction;
5
- //# sourceMappingURL=use-tab-action.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tab-action.d.ts","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAOpD,QAAA,MAAM,YAAY,QAAO,IAAI,WAAW,CAevC,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -1,21 +0,0 @@
1
- import { useEffect, useRef } from 'react';
2
- /*
3
- * MuiTabs break when the size of a tab changes without rendering with React.
4
- * This issue happens when the font is loaded after the initial render of the component.
5
- * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
6
- */
7
- const useTabAction = () => {
8
- const ref = useRef(null);
9
- useEffect(() => {
10
- const listener = () => {
11
- var _a, _b;
12
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.updateIndicator();
13
- (_b = ref.current) === null || _b === void 0 ? void 0 : _b.updateScrollButtons();
14
- };
15
- window.addEventListener('load', listener);
16
- return () => window.removeEventListener('load', listener);
17
- }, []);
18
- return ref;
19
- };
20
- export default useTabAction;
21
- //# sourceMappingURL=use-tab-action.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tab-action.js","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGzC;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAA,GAAG,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAA;YAC9B,MAAA,GAAG,CAAC,OAAO,0CAAE,mBAAmB,EAAE,CAAA;QACpC,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
package/src/Tab/styles.ts DELETED
@@ -1,107 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
- import { rem } from '@toptal/picasso-shared'
4
- import { PicassoProvider } from '@toptal/picasso-provider'
5
-
6
- PicassoProvider.override(({ breakpoints, palette }: Theme) => ({
7
- MuiTab: {
8
- root: {
9
- minHeight: 0,
10
- minWidth: 0,
11
- lineHeight: 1,
12
- textTransform: 'none',
13
- padding: `${rem('9px')} 0 ${rem('7px')}`,
14
- overflow: 'initial',
15
-
16
- [breakpoints.up('md')]: {
17
- padding: undefined,
18
- },
19
-
20
- color: palette.grey.dark,
21
-
22
- [breakpoints.up('md')]: {
23
- minWidth: 'auto',
24
- fontSize: '1rem',
25
- },
26
- },
27
- labelIcon: {
28
- minHeight: 0,
29
- paddingRight: '1.5rem',
30
- paddingTop: rem('9px'),
31
- '& $wrapper > *:first-child': {
32
- position: 'absolute',
33
- right: 0,
34
- marginBottom: 0,
35
- },
36
- },
37
- selected: {
38
- color: palette.common.black,
39
- },
40
- textColorInherit: {
41
- '&$disabled': {
42
- color: palette.grey.main,
43
- },
44
- },
45
- disabled: {},
46
- },
47
- }))
48
-
49
- export default ({ sizes, palette, shadows, transitions }: Theme) =>
50
- createStyles({
51
- horizontal: {
52
- paddingTop: 0,
53
- '&:not(:last-child)': {
54
- marginRight: '2em',
55
- },
56
- },
57
- vertical: {
58
- width: '100%',
59
- borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
60
- margin: '0.25rem 0',
61
- overflow: 'hidden',
62
- padding: '0.5rem 1rem',
63
- transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
64
- textAlign: 'left',
65
- backgroundColor: palette.grey.lighter,
66
- opacity: 1,
67
- color: palette.grey.dark,
68
-
69
- '&:first-child': {
70
- marginTop: '1rem',
71
- },
72
-
73
- '&:last-child': {
74
- marginBottom: '1rem',
75
- },
76
-
77
- '&:hover': {
78
- color: palette.common.black,
79
- },
80
-
81
- '&:hover:not($selected)': {
82
- backgroundColor: palette.grey.lighter2,
83
- },
84
-
85
- '& $wrapper': {
86
- display: 'block',
87
- },
88
- },
89
- selected: {
90
- '&$vertical': {
91
- color: palette.common.black,
92
- boxShadow: shadows[1],
93
- backgroundColor: palette.grey.lightest,
94
-
95
- '&::before': {
96
- content: '""',
97
- background: palette.blue.main,
98
- position: 'absolute',
99
- left: 0,
100
- top: 0,
101
- bottom: 0,
102
- width: '3px',
103
- },
104
- },
105
- },
106
- wrapper: {},
107
- })
@@ -1,59 +0,0 @@
1
- import React, { forwardRef } from 'react'
2
- import { ButtonBase } from '@material-ui/core'
3
- import type { BaseProps } from '@toptal/picasso-shared'
4
- import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
5
- import { Container } from '@toptal/picasso-container'
6
- import { twMerge } from '@toptal/picasso-tailwind-merge'
7
-
8
- type DirectionType = 'left' | 'right'
9
-
10
- export interface Props extends BaseProps {
11
- /** The direction the button should indicate. */
12
- direction: DirectionType
13
- /** If `true`, the component is disabled. */
14
- disabled?: boolean
15
- }
16
-
17
- export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
18
- function TabScrollButton(props, ref) {
19
- const { className, style, direction, disabled, ...rest } = props
20
-
21
- if (disabled) {
22
- return null
23
- }
24
-
25
- return (
26
- <Container
27
- {...rest}
28
- ref={ref}
29
- className={twMerge('relative', className)}
30
- style={style}
31
- >
32
- <Container
33
- className={twMerge(
34
- 'absolute w-10 h-full z-10',
35
- direction === 'left'
36
- ? 'bg-gradient-to-r from-white via-white to-transparent'
37
- : 'bg-gradient-to-l from-white via-white to-transparent',
38
- direction === 'left' ? 'left-0' : 'right-0'
39
- )}
40
- >
41
- <ButtonBase
42
- className={twMerge(
43
- 'absolute w-4 h-full',
44
- direction === 'left' ? 'left-0' : 'right-0'
45
- )}
46
- aria-label={`${direction} button`}
47
- data-testid={`tab-scroll-button-${direction}`}
48
- >
49
- {direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
50
- </ButtonBase>
51
- </Container>
52
- </Container>
53
- )
54
- }
55
- )
56
-
57
- TabScrollButton.displayName = 'TabScrollButton'
58
-
59
- export default TabScrollButton
@@ -1,6 +0,0 @@
1
- import type { OmitInternalProps } from '@toptal/picasso-shared'
2
-
3
- import type { Props } from './TabScrollButton'
4
-
5
- export { default as TabScrollButton } from './TabScrollButton'
6
- export type TabScrollButtonProps = OmitInternalProps<Props>
@@ -1,45 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
- import { PicassoProvider } from '@toptal/picasso-provider'
4
-
5
- PicassoProvider.override(({ palette }: Theme) => ({
6
- MuiTabs: {
7
- root: {
8
- position: 'relative',
9
- minHeight: 0,
10
- },
11
- vertical: {
12
- width: 200,
13
- margin: 0,
14
- '& $scroller': {
15
- // We need a bit of padding to allow active tab's shadow to be visible
16
- paddingLeft: '0.5em',
17
- },
18
-
19
- '& $indicator': {
20
- display: 'none',
21
- },
22
- },
23
- indicator: {
24
- backgroundColor: palette.blue.main,
25
- zIndex: 1,
26
- },
27
- },
28
- }))
29
-
30
- export default ({ palette }: Theme) =>
31
- createStyles({
32
- horizontal: {
33
- '&::after': {
34
- position: 'absolute',
35
- content: '""',
36
- bottom: 0,
37
- left: 0,
38
- right: 0,
39
- height: 1,
40
- backgroundColor: palette.grey.main,
41
- zIndex: 0,
42
- },
43
- },
44
- vertical: {},
45
- })
@@ -1,27 +0,0 @@
1
- import type { Ref } from 'react'
2
- import { useEffect, useRef } from 'react'
3
- import type { TabsActions } from '@material-ui/core'
4
-
5
- /*
6
- * MuiTabs break when the size of a tab changes without rendering with React.
7
- * This issue happens when the font is loaded after the initial render of the component.
8
- * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
9
- */
10
- const useTabAction = (): Ref<TabsActions> => {
11
- const ref = useRef<TabsActions>(null)
12
-
13
- useEffect(() => {
14
- const listener = () => {
15
- ref.current?.updateIndicator()
16
- ref.current?.updateScrollButtons()
17
- }
18
-
19
- window.addEventListener('load', listener)
20
-
21
- return () => window.removeEventListener('load', listener)
22
- }, [])
23
-
24
- return ref
25
- }
26
-
27
- export default useTabAction