@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-19babbfd6.8 → 5.0.15-alpha-ff-7-tabs-2a3da7cea.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-package/src/Tab/Tab.d.ts +7 -10
- package/dist-package/src/Tab/Tab.d.ts.map +1 -1
- package/dist-package/src/Tab/Tab.js +32 -33
- package/dist-package/src/Tab/Tab.js.map +1 -1
- package/dist-package/src/Tab/index.d.ts +1 -4
- package/dist-package/src/Tab/index.d.ts.map +1 -1
- package/dist-package/src/Tab/index.js.map +1 -1
- package/dist-package/src/Tabs/Tabs.d.ts +11 -11
- package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
- package/dist-package/src/Tabs/Tabs.js +34 -17
- package/dist-package/src/Tabs/Tabs.js.map +1 -1
- package/dist-package/src/Tabs/TabsContext.d.ts +11 -0
- package/dist-package/src/Tabs/TabsContext.d.ts.map +1 -0
- package/dist-package/src/Tabs/TabsContext.js +16 -0
- package/dist-package/src/Tabs/TabsContext.js.map +1 -0
- package/dist-package/src/Tabs/index.d.ts +1 -5
- package/dist-package/src/Tabs/index.d.ts.map +1 -1
- package/dist-package/src/Tabs/index.js.map +1 -1
- package/dist-package/src/TabsCompound/index.d.ts +6 -2
- package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
- package/package.json +12 -13
- package/src/Tab/Tab.tsx +103 -111
- package/src/Tab/__snapshots__/test.tsx.snap +29 -45
- package/src/Tab/index.ts +1 -6
- package/src/Tab/story/CustomValue.example.tsx +2 -2
- package/src/Tab/story/IconOrBadge.example.tsx +3 -3
- package/src/Tabs/Tabs.tsx +103 -69
- package/src/Tabs/TabsContext.tsx +27 -0
- package/src/Tabs/__snapshots__/test.tsx.snap +33 -49
- package/src/Tabs/index.ts +1 -7
- package/src/Tabs/story/Default.example.tsx +7 -6
- package/src/Tabs/test.tsx +12 -10
@@ -1,15 +1,13 @@
|
|
1
|
-
import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
|
2
|
-
import React from 'react';
|
3
|
-
import type { TabProps } from '@mui/base/Tab';
|
1
|
+
import type { ReactNode, HTMLAttributes, ReactElement, Ref } from 'react';
|
4
2
|
import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
|
5
|
-
export interface
|
3
|
+
export interface TabProps<T = number> extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
6
4
|
/**
|
7
5
|
* If true, the tab will be disabled
|
8
6
|
* @default false
|
9
7
|
*/
|
10
8
|
disabled?: boolean;
|
11
|
-
/**
|
12
|
-
value?:
|
9
|
+
/** The value of the tab */
|
10
|
+
value?: T;
|
13
11
|
/** The label element */
|
14
12
|
label?: ReactNode;
|
15
13
|
/** The Icon element */
|
@@ -18,10 +16,9 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
|
|
18
16
|
avatar?: string | null;
|
19
17
|
/** Description */
|
20
18
|
description?: string;
|
21
|
-
selected?: boolean;
|
22
|
-
onChange?: TabProps['onChange'];
|
23
|
-
onClick?: TabProps['onClick'];
|
24
19
|
}
|
25
|
-
export declare const Tab:
|
20
|
+
export declare const Tab: <T = number>(props: TabProps<T> & {
|
21
|
+
ref?: Ref<HTMLButtonElement> | undefined;
|
22
|
+
}) => ReactElement | null;
|
26
23
|
export default Tab;
|
27
24
|
//# sourceMappingURL=Tab.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,
|
1
|
+
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,MAAM,CAClC,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,CAAA;IAET,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAwLD,eAAO,MAAM,GAAG;;MAEX,YAAY,GAAG,IAAI,CAAA;AAExB,eAAe,GAAG,CAAA"}
|
@@ -9,12 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
9
9
|
}
|
10
10
|
return t;
|
11
11
|
};
|
12
|
-
import React, { forwardRef
|
13
|
-
import { Tab as MUITab } from '@mui/base/Tab';
|
12
|
+
import React, { forwardRef } from 'react';
|
14
13
|
import { useTitleCase } from '@toptal/picasso-shared';
|
15
14
|
import { UserBadge } from '@toptal/picasso-user-badge';
|
16
15
|
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
|
17
|
-
import {
|
16
|
+
import { useTabsContext } from '../Tabs/TabsContext';
|
18
17
|
import { TabLabel } from '../TabLabel';
|
19
18
|
import { TabDescription } from '../TabDescription';
|
20
19
|
const getOpacityClass = (selected, disabled, orientation) => {
|
@@ -27,12 +26,12 @@ const getOpacityClass = (selected, disabled, orientation) => {
|
|
27
26
|
return 'opacity-70';
|
28
27
|
};
|
29
28
|
const wrapperClassesByOrientation = {
|
30
|
-
horizontal: 'inline-flex items-center
|
29
|
+
horizontal: 'inline-flex flex-row items-center justify-center',
|
31
30
|
vertical: 'block',
|
32
31
|
};
|
33
32
|
const rootClassesByOrientation = (selected) => ({
|
34
33
|
horizontal: [
|
35
|
-
'm-0 [&:not(:last-child)]:mr-8 pt-
|
34
|
+
'm-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0',
|
36
35
|
'text-center bg-transparent transition-shadow z-10 rounded-none',
|
37
36
|
'text-black',
|
38
37
|
selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
|
@@ -60,34 +59,6 @@ const classesByVariant = {
|
|
60
59
|
scrollable: 'shrink-0 max-w-[264px]',
|
61
60
|
fullWidth: 'shrink flex-grow basis-0',
|
62
61
|
};
|
63
|
-
export const Tab = forwardRef(function Tab(props, ref) {
|
64
|
-
const { disabled, value, label, icon, onChange, onClick, titleCase: propsTitleCase, description, avatar, className } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "onChange", "onClick", "titleCase", "description", "avatar", "className"]);
|
65
|
-
const titleCase = useTitleCase(propsTitleCase);
|
66
|
-
const { orientation, variant } = useContext(TabsContext);
|
67
|
-
const isHorizontal = orientation === 'horizontal';
|
68
|
-
const renderLabel = getLabelComponent({
|
69
|
-
avatar,
|
70
|
-
description,
|
71
|
-
disabled,
|
72
|
-
label,
|
73
|
-
orientation,
|
74
|
-
titleCase,
|
75
|
-
});
|
76
|
-
return (React.createElement(MUITab, Object.assign({ className: '' }, rest, { ref: ref, tabIndex: 0, disabled: disabled, value: value, onChange: onChange, onClick: onClick, slotProps: {
|
77
|
-
root: ownerState => {
|
78
|
-
return {
|
79
|
-
className: twMerge(getOpacityClass(ownerState.selected, ownerState.disabled, orientation), rootClassesByOrientation(ownerState.selected)[orientation], classesByVariant[variant], ownerState.disabled
|
80
|
-
? 'cursor-default text-gray-500'
|
81
|
-
: 'cursor-pointer', ownerState.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pt-[0.5625rem] pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-none', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className),
|
82
|
-
};
|
83
|
-
},
|
84
|
-
} }),
|
85
|
-
React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
|
86
|
-
renderLabel,
|
87
|
-
icon && React.createElement("span", { className: 'absolute right-0 mb-0 h-4' }, icon))));
|
88
|
-
});
|
89
|
-
Tab.defaultProps = {};
|
90
|
-
Tab.displayName = 'Tab';
|
91
62
|
const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
|
92
63
|
if (!label) {
|
93
64
|
return null;
|
@@ -105,5 +76,33 @@ const getLabelComponent = ({ avatar, description, disabled, label, orientation,
|
|
105
76
|
}
|
106
77
|
return (React.createElement(UserBadge, { renderName: Label, name: label, avatar: avatar }, description && (React.createElement(TabDescription, { disabled: disabled }, description))));
|
107
78
|
};
|
79
|
+
// eslint-disable-next-line func-style
|
80
|
+
function TabInner(props, ref) {
|
81
|
+
const { disabled, value, label, icon, titleCase: propsTitleCase, description, avatar, className, onClick } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "titleCase", "description", "avatar", "className", "onClick"]);
|
82
|
+
const titleCase = useTitleCase(propsTitleCase);
|
83
|
+
const { value: selectedValue, onChange, orientation, variant, } = useTabsContext();
|
84
|
+
const isHorizontal = orientation === 'horizontal';
|
85
|
+
const selected = value === selectedValue;
|
86
|
+
const handleClick = (event) => {
|
87
|
+
if (!disabled && onChange) {
|
88
|
+
onChange(event, value);
|
89
|
+
}
|
90
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
91
|
+
};
|
92
|
+
const renderLabel = getLabelComponent({
|
93
|
+
avatar,
|
94
|
+
description,
|
95
|
+
disabled,
|
96
|
+
label,
|
97
|
+
orientation,
|
98
|
+
titleCase,
|
99
|
+
});
|
100
|
+
return (React.createElement("button", Object.assign({ className: twMerge(getOpacityClass(selected, !!disabled, orientation), rootClassesByOrientation(selected)[orientation], classesByVariant[variant], disabled ? 'cursor-default text-gray-500' : 'cursor-pointer', disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pt-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-none', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className), ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, onClick: handleClick, role: 'tab', "aria-selected": selected, "aria-disabled": disabled, type: 'button' }, rest),
|
101
|
+
React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
|
102
|
+
renderLabel,
|
103
|
+
icon && (React.createElement("span", { className: 'absolute top-0 right-0 mb-0 flex items-center' }, icon)))));
|
104
|
+
}
|
105
|
+
TabInner.displayName = 'Tab';
|
106
|
+
export const Tab = forwardRef(TabInner);
|
108
107
|
export default Tab;
|
109
108
|
//# sourceMappingURL=Tab.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AA4BlD,MAAM,eAAe,GAAG,CACtB,QAAiB,EACjB,QAAiB,EACjB,WAAsC,EACtC,EAAE;IACF,IAAI,QAAQ,EAAE;QACZ,OAAO,YAAY,CAAA;KACpB;IACD,IAAI,QAAQ,IAAI,WAAW,KAAK,UAAU,EAAE;QAC1C,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA;AAED,MAAM,2BAA2B,GAAG;IAClC,UAAU,EAAE,kDAAkD;IAC9D,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,QAAiB,EAAE,EAAE,CAAC,CAAC;IACvD,UAAU,EAAE;QACV,wDAAwD;QACxD,gEAAgE;QAChE,YAAY;QACZ,QAAQ,IAAI,yCAAyC;KACtD;IACD,QAAQ,EAAE;QACR,2CAA2C;QAC3C,sDAAsD;QACtD,wBAAwB;QACxB,QAAQ,IAAI,UAAU;QACtB,QAAQ,IAAI;YACV,iBAAiB;YACjB,qBAAqB;YACrB,iBAAiB;YACjB,eAAe;YACf,cAAc;YACd,gBAAgB;YAChB,oBAAoB;SACrB;QACD,QAAQ;YACN,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,kEAAkE;KACvE;CACF,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE,wBAAwB;IACpC,SAAS,EAAE,0BAA0B;CACtC,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,EACzB,MAAM,EACN,WAAW,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAQV,EAAmB,EAAE;IACpB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAA;KACZ;IACD,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAA;IACjD,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAA;IAC/C,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CAC3E,CAAA;IAED,IAAI,YAAY,IAAI,aAAa,EAAE;QACjC,OAAO,oBAAC,KAAK,OAAG,CAAA;KACjB;IACD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,CACL;YACE,oBAAC,KAAK,OAAG;YACR,WAAW,IAAI,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,IAAG,WAAW,CAAkB,CACnE,CACA,CACJ,CAAA;KACF;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IACtD,WAAW,IAAI,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,IAAG,WAAW,CAAkB,CACnE,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,sCAAsC;AACtC,SAAS,QAAQ,CAAa,KAAkB,EAAE,GAA2B;IAC3E,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EAAE,cAAc,EACzB,WAAW,EACX,MAAM,EACN,SAAS,EACT,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,oGAWL,CAAQ,CAAA;IACT,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EACJ,KAAK,EAAE,aAAa,EACpB,QAAQ,EACR,WAAW,EACX,OAAO,GACR,GAAG,cAAc,EAAE,CAAA;IACpB,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAA;IACjD,MAAM,QAAQ,GAAG,KAAK,KAAK,aAAa,CAAA;IAExC,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;YACzB,QAAQ,CAAC,KAAK,EAAE,KAAU,CAAC,CAAA;SAC5B;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACpC,MAAM;QACN,WAAW;QACX,QAAQ;QACR,KAAK;QACL,WAAW;QACX,SAAS;KACV,CAAC,CAAA;IAEF,OAAO,CACL,8CACE,SAAS,EAAE,OAAO,CAChB,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,WAAW,CAAC,EAClD,wBAAwB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,EAC/C,gBAAgB,CAAC,OAAO,CAAC,EACzB,QAAQ,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gBAAgB,EAC5D,QAAQ,IAAI,qBAAqB,EACjC,IAAI,IAAI,YAAY,IAAI,mBAAmB,EAC3C,0CAA0C,EAC1C,kDAAkD,EAClD,uDAAuD,EACvD,uEAAuE,EACvE,yCAAyC,EACzC,WAAW,EACX,SAAS,CACV,EACD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,KAAK,mBACK,QAAQ,mBACR,QAAQ,EACvB,IAAI,EAAC,QAAQ,IACT,IAAI;QAER,8BACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,2BAA2B,CAAC,WAAW,CAAC,CAAC;YAEpE,WAAW;YACX,IAAI,IAAI,CACP,8BAAM,SAAS,EAAC,+CAA+C,IAC5D,IAAI,CACA,CACR,CACI,CACA,CACV,CAAA;AACH,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAA;AAE5B,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,CAEd,CAAA;AAExB,eAAe,GAAG,CAAA"}
|
@@ -1,5 +1,2 @@
|
|
1
|
-
|
2
|
-
import type { Props } from './Tab';
|
3
|
-
export { default as Tab } from './Tab';
|
4
|
-
export declare type TabProps = OmitInternalProps<Props>;
|
1
|
+
export { default as Tab, type TabProps } from './Tab';
|
5
2
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAiB,MAAM,OAAO,CAAA"}
|
@@ -1,26 +1,26 @@
|
|
1
|
-
import type { ReactNode } from 'react';
|
2
|
-
import React from 'react';
|
1
|
+
import type { ReactNode, ChangeEvent, Ref, ReactElement } from 'react';
|
3
2
|
import type { BaseProps } from '@toptal/picasso-shared';
|
4
|
-
export
|
5
|
-
export interface Props<V extends TabsValueType> extends BaseProps {
|
3
|
+
export interface TabsProps<T = number> extends BaseProps {
|
6
4
|
/** Tabs content containing Tab components */
|
7
5
|
children: ReactNode;
|
8
6
|
/** Callback fired when the value changes. */
|
9
|
-
onChange?: (event:
|
7
|
+
onChange?: (event: ChangeEvent<{}>, value: T) => void;
|
10
8
|
/**
|
11
9
|
* The value of the currently selected Tab.
|
12
10
|
* If you don't want any selected Tab, you can set this property to null.
|
13
11
|
*/
|
14
|
-
value:
|
12
|
+
value: T;
|
15
13
|
/** The tabs orientation (layout flow direction). */
|
16
14
|
orientation?: 'horizontal' | 'vertical';
|
17
15
|
/** Determines additional display behavior of the tabs */
|
18
16
|
variant?: 'scrollable' | 'fullWidth';
|
17
|
+
/** The default value. Use when the component is not controlled. */
|
18
|
+
defaultValue?: T;
|
19
|
+
/** The direction of the text. */
|
20
|
+
direction?: 'ltr' | 'rtl';
|
19
21
|
}
|
20
|
-
export declare const
|
21
|
-
|
22
|
-
|
23
|
-
}>;
|
24
|
-
export declare const Tabs: React.ForwardRefExoticComponent<Props<TabsValueType> & React.RefAttributes<HTMLDivElement>>;
|
22
|
+
export declare const Tabs: <T = number>(props: TabsProps<T> & {
|
23
|
+
ref?: Ref<HTMLDivElement> | undefined;
|
24
|
+
}) => ReactElement | null;
|
25
25
|
export default Tabs;
|
26
26
|
//# sourceMappingURL=Tabs.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,SAAS;IACtD,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAErD;;;OAGG;IACH,KAAK,EAAE,CAAC,CAAA;IAER,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW,CAAA;IAEpC,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,CAAA;IAEhB,iCAAiC;IACjC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAC1B;AA8HD,eAAO,MAAM,IAAI;;MAEZ,YAAY,GAAG,IAAI,CAAA;AAExB,eAAe,IAAI,CAAA"}
|
@@ -9,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
9
9
|
}
|
10
10
|
return t;
|
11
11
|
};
|
12
|
-
import React, { forwardRef, useMemo } from 'react';
|
13
|
-
import { Tabs as MUITabs } from '@mui/base/Tabs';
|
14
|
-
import { TabsList } from '@mui/base/TabsList';
|
12
|
+
import React, { forwardRef, useMemo, useCallback } from 'react';
|
15
13
|
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
|
16
|
-
|
14
|
+
import { TabsContext } from './TabsContext';
|
15
|
+
import { Tab } from '../Tab';
|
17
16
|
const indicatorClasses = [
|
18
17
|
'after:absolute',
|
19
18
|
'after:content-[""]',
|
@@ -44,24 +43,42 @@ const classesByVariant = {
|
|
44
43
|
scroller: 'w-full overflow-hidden',
|
45
44
|
},
|
46
45
|
};
|
47
|
-
// eslint-disable-next-line
|
48
|
-
|
49
|
-
const { children, orientation = 'horizontal', onChange, value, variant = 'scrollable', className } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant", "className"]);
|
46
|
+
// eslint-disable-next-line func-style
|
47
|
+
function TabsInner(props, ref) {
|
48
|
+
const { children, orientation = 'horizontal', onChange, value: valueProp, defaultValue, variant = 'scrollable', direction = 'ltr', className } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "defaultValue", "variant", "direction", "className"]);
|
49
|
+
const [value, setValue] = React.useState(defaultValue);
|
50
|
+
const isControlled = valueProp !== undefined;
|
51
|
+
const currentValue = isControlled ? valueProp : value;
|
52
|
+
const handleChange = useCallback((event, newValue) => {
|
53
|
+
if (!isControlled) {
|
54
|
+
setValue(newValue);
|
55
|
+
}
|
56
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
|
57
|
+
}, [isControlled, onChange]);
|
50
58
|
const contextValue = useMemo(() => ({
|
59
|
+
value: currentValue,
|
60
|
+
onChange: handleChange,
|
51
61
|
orientation,
|
52
62
|
variant,
|
53
|
-
|
63
|
+
direction,
|
64
|
+
}), [currentValue, handleChange, orientation, variant, direction]);
|
54
65
|
const isVertical = orientation === 'vertical';
|
66
|
+
const childrenWithIndex = React.Children.map(children, (child, idx) => {
|
67
|
+
if (React.isValidElement(child) &&
|
68
|
+
child.type === Tab &&
|
69
|
+
child.props.value === undefined) {
|
70
|
+
return React.cloneElement(child, {
|
71
|
+
value: idx,
|
72
|
+
});
|
73
|
+
}
|
74
|
+
return child;
|
75
|
+
});
|
55
76
|
return (React.createElement(TabsContext.Provider, { value: contextValue },
|
56
|
-
React.createElement(
|
57
|
-
root: {
|
58
|
-
ref,
|
59
|
-
className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className),
|
60
|
-
},
|
61
|
-
}, onChange: onChange, value: value, orientation: orientation }),
|
77
|
+
React.createElement("div", Object.assign({}, rest, { ref: ref, "data-component-type": 'tabs', className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className), "aria-orientation": orientation }),
|
62
78
|
React.createElement("div", { className: twJoin(classesByVariant[variant].scroller, classesByOrientation[orientation].scroller, 'flex-auto inline-block relative whitespace-nowrap') },
|
63
|
-
React.createElement(
|
64
|
-
}
|
65
|
-
|
79
|
+
React.createElement("div", { className: twJoin('flex', isVertical && 'flex-col'), role: 'tablist', tabIndex: -1 }, childrenWithIndex)))));
|
80
|
+
}
|
81
|
+
TabsInner.displayName = 'Tabs';
|
82
|
+
export const Tabs = forwardRef(TabsInner);
|
66
83
|
export default Tabs;
|
67
84
|
//# sourceMappingURL=Tabs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export interface TabsContextValue<T> {
|
3
|
+
value: T;
|
4
|
+
onChange: (event: React.ChangeEvent<{}>, value: T) => void;
|
5
|
+
orientation: 'horizontal' | 'vertical';
|
6
|
+
variant: 'scrollable' | 'fullWidth';
|
7
|
+
direction?: 'ltr' | 'rtl';
|
8
|
+
}
|
9
|
+
export declare const TabsContext: React.Context<TabsContextValue<any>>;
|
10
|
+
export declare const useTabsContext: () => TabsContextValue<any>;
|
11
|
+
//# sourceMappingURL=TabsContext.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,OAAO,EAAE,YAAY,GAAG,WAAW,CAAA;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,sCAMtB,CAAA;AAEF,eAAO,MAAM,cAAc,6BAQ1B,CAAA"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export const TabsContext = React.createContext({
|
3
|
+
value: undefined,
|
4
|
+
onChange: () => { },
|
5
|
+
orientation: 'horizontal',
|
6
|
+
variant: 'scrollable',
|
7
|
+
direction: 'ltr',
|
8
|
+
});
|
9
|
+
export const useTabsContext = () => {
|
10
|
+
const context = React.useContext(TabsContext);
|
11
|
+
if (!context) {
|
12
|
+
throw new Error('useTabsContext must be used within a TabsProvider');
|
13
|
+
}
|
14
|
+
return context;
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=TabsContext.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAwB;IACpE,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE,KAAK;CACjB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;KACrE;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
|
@@ -1,6 +1,2 @@
|
|
1
|
-
|
2
|
-
import type { Props, TabsValueType } from './Tabs';
|
3
|
-
export { default as Tabs } from './Tabs';
|
4
|
-
export declare type TabsProps = OmitInternalProps<Props<TabsValueType>>;
|
5
|
-
export type { TabsValueType } from './Tabs';
|
1
|
+
export { default as Tabs, type TabsProps } from './Tabs';
|
6
2
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAkB,MAAM,QAAQ,CAAA"}
|
@@ -1,5 +1,9 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
export declare const TabsCompound:
|
3
|
-
|
2
|
+
export declare const TabsCompound: (<T = number>(props: import("../Tabs").TabsProps<T> & {
|
3
|
+
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
4
|
+
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
|
5
|
+
Tab: <T_1 = number>(props: import("../Tab").TabProps<T_1> & {
|
6
|
+
ref?: import("react").Ref<HTMLButtonElement> | undefined;
|
7
|
+
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
4
8
|
};
|
5
9
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;CAEvB,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@toptal/picasso-tabs",
|
3
|
-
"version": "5.0.15-alpha-ff-7-tabs-
|
3
|
+
"version": "5.0.15-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
4
4
|
"description": "Toptal UI components library - Tabs",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -22,14 +22,13 @@
|
|
22
22
|
},
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
24
24
|
"dependencies": {
|
25
|
-
"@
|
26
|
-
"@toptal/picasso-
|
27
|
-
"@toptal/picasso-
|
28
|
-
"@toptal/picasso-
|
29
|
-
"@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-
|
30
|
-
"@toptal/picasso-
|
31
|
-
"@toptal/picasso-
|
32
|
-
"@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
|
25
|
+
"@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
26
|
+
"@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
27
|
+
"@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea",
|
28
|
+
"@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
29
|
+
"@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
30
|
+
"@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
31
|
+
"@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
33
32
|
"ap-style-title-case": "^1.1.2"
|
34
33
|
},
|
35
34
|
"sideEffects": [
|
@@ -46,14 +45,14 @@
|
|
46
45
|
".": "./dist-package/src/index.js"
|
47
46
|
},
|
48
47
|
"devDependencies": {
|
49
|
-
"@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-
|
50
|
-
"@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-
|
51
|
-
"@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-
|
48
|
+
"@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-2a3da7cea.283+2a3da7cea",
|
49
|
+
"@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
|
50
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea"
|
52
51
|
},
|
53
52
|
"files": [
|
54
53
|
"dist-package/**",
|
55
54
|
"!dist-package/tsconfig.tsbuildinfo",
|
56
55
|
"src"
|
57
56
|
],
|
58
|
-
"gitHead": "
|
57
|
+
"gitHead": "2a3da7cea3ba840b0a702d9efc91380d60ee2fe6"
|
59
58
|
}
|