@toptal/picasso-tabs 7.0.3 → 7.0.4-alpha-pf-fix-alpha-release-ea13b5aca.0
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 +4 -4
- package/dist-package/src/Tab/Tab.d.ts.map +1 -1
- package/dist-package/src/Tab/Tab.js +12 -13
- package/dist-package/src/Tab/Tab.js.map +1 -1
- package/dist-package/src/Tabs/Tabs.d.ts +1 -2
- package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
- package/dist-package/src/Tabs/Tabs.js +27 -9
- package/dist-package/src/Tabs/Tabs.js.map +1 -1
- package/dist-package/src/TabsCompound/index.d.ts +1 -1
- package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
- package/package.json +15 -15
- package/src/Tab/Tab.tsx +33 -42
- package/src/Tab/__snapshots__/test.tsx.snap +28 -15
- package/src/Tabs/Tabs.tsx +55 -20
- package/src/Tabs/__snapshots__/test.tsx.snap +85 -40
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type { TabProps } from '@mui/base/Tab';
|
|
4
3
|
import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
|
|
4
|
+
import type { TabsValueType } from '../Tabs/Tabs';
|
|
5
5
|
export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
6
6
|
/**
|
|
7
7
|
* If true, the tab will be disabled
|
|
@@ -9,7 +9,7 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
|
|
|
9
9
|
*/
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
/** You can provide your own value. Otherwise, we fallback to the child position index */
|
|
12
|
-
value?:
|
|
12
|
+
value?: TabsValueType;
|
|
13
13
|
/** The label element */
|
|
14
14
|
label?: ReactNode;
|
|
15
15
|
/** The Icon element */
|
|
@@ -19,8 +19,8 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
|
|
|
19
19
|
/** Description */
|
|
20
20
|
description?: string;
|
|
21
21
|
selected?: boolean;
|
|
22
|
-
onChange?:
|
|
23
|
-
onClick?:
|
|
22
|
+
onChange?: (event: React.SyntheticEvent | null, value: TabsValueType) => void;
|
|
23
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
24
24
|
}
|
|
25
25
|
export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
|
|
26
26
|
export default Tab;
|
|
@@ -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,MAAM,OAAO,CAAA;AACpE,OAAO,KAAiC,MAAM,OAAO,CAAA;
|
|
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,MAAM,OAAO,CAAA;AACpE,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAKvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAKjD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,yFAAyF;IACzF,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,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;IAIpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAwDD,eAAO,MAAM,GAAG,iFAsEd,CAAA;AAuDF,eAAe,GAAG,CAAA"}
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef, useContext } from 'react';
|
|
13
|
-
import {
|
|
13
|
+
import { Tabs as BaseUITabs } from '@base-ui/react/tabs';
|
|
14
14
|
import { useTitleCase } from '@toptal/picasso-shared';
|
|
15
15
|
import { UserBadge } from '@toptal/picasso-user-badge';
|
|
16
16
|
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
|
|
@@ -32,16 +32,17 @@ const wrapperClassesByOrientation = {
|
|
|
32
32
|
};
|
|
33
33
|
const rootClassesByOrientation = (selected) => ({
|
|
34
34
|
horizontal: [
|
|
35
|
-
'm-0 [&:not(:last-
|
|
36
|
-
'text-center bg-transparent
|
|
35
|
+
'm-0 [&:not(:last-of-type)]:mr-8 p-0 pb-[0.4375rem]',
|
|
36
|
+
'text-center bg-transparent z-10 rounded-none',
|
|
37
37
|
selected ? 'text-black' : 'text-inheritColor',
|
|
38
|
-
selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
|
|
39
38
|
],
|
|
40
39
|
vertical: [
|
|
41
|
-
'first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
|
|
40
|
+
'first-of-type:mt-4 last-of-type:mb-4 my-1 mx-0 py-2 px-4',
|
|
42
41
|
'text-left rounded-l-sm rounded-r-none transition-all',
|
|
43
42
|
'w-full overflow-hidden',
|
|
44
43
|
selected && 'shadow-1',
|
|
44
|
+
// Static active bar (no slide animation for vertical tabs) — clipped by
|
|
45
|
+
// the tab's own rounded-l-sm + overflow-hidden so it follows the border.
|
|
45
46
|
selected && [
|
|
46
47
|
'before:absolute',
|
|
47
48
|
'before:content-[""]',
|
|
@@ -61,7 +62,11 @@ const classesByVariant = {
|
|
|
61
62
|
fullWidth: 'shrink grow basis-0',
|
|
62
63
|
};
|
|
63
64
|
export const Tab = forwardRef(function Tab(props, ref) {
|
|
64
|
-
const { disabled, value, label, icon,
|
|
65
|
+
const { disabled, value, label, icon,
|
|
66
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
67
|
+
onChange, selected,
|
|
68
|
+
/* eslint-enable */
|
|
69
|
+
onClick, titleCase: propsTitleCase, description, avatar, className } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "onChange", "selected", "onClick", "titleCase", "description", "avatar", "className"]);
|
|
65
70
|
const titleCase = useTitleCase(propsTitleCase);
|
|
66
71
|
const { orientation, variant } = useContext(TabsContext);
|
|
67
72
|
const isHorizontal = orientation === 'horizontal';
|
|
@@ -73,13 +78,7 @@ export const Tab = forwardRef(function Tab(props, ref) {
|
|
|
73
78
|
orientation,
|
|
74
79
|
titleCase,
|
|
75
80
|
});
|
|
76
|
-
return (React.createElement(
|
|
77
|
-
root: ownerState => {
|
|
78
|
-
return Object.assign({ className: twMerge(getOpacityClass(ownerState.selected, ownerState.disabled, orientation), rootClassesByOrientation(ownerState.selected)[orientation], classesByVariant[variant], ownerState.disabled
|
|
79
|
-
? 'cursor-default text-gray-500'
|
|
80
|
-
: 'cursor-pointer', ownerState.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-hidden', '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) }, (onClick && { onClick }));
|
|
81
|
-
},
|
|
82
|
-
} }),
|
|
81
|
+
return (React.createElement(BaseUITabs.Tab, Object.assign({}, rest, { ref: ref, disabled: disabled, value: value, onClick: onClick, className: state => twMerge(getOpacityClass(state.active, state.disabled, orientation), rootClassesByOrientation(state.active)[orientation], classesByVariant[variant], state.disabled ? 'cursor-default text-gray-500' : 'cursor-pointer', state.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-hidden', '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) }),
|
|
83
82
|
React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
|
|
84
83
|
renderLabel,
|
|
85
84
|
icon && (React.createElement("span", { className: 'absolute right-0 h-4 leading-none flex items-center justify-center' }, icon)))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { ReactNode, ForwardedRef } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { Tabs as MUITabs } from '@mui/base/Tabs';
|
|
4
3
|
import type { BaseProps } from '@toptal/picasso-shared';
|
|
5
4
|
export type TabsValueType = string | number | null;
|
|
6
5
|
export interface Props<V extends TabsValueType> extends BaseProps {
|
|
@@ -24,6 +23,6 @@ export declare const TabsContext: React.Context<{
|
|
|
24
23
|
}>;
|
|
25
24
|
declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
|
|
26
25
|
ref?: ForwardedRef<HTMLDivElement>;
|
|
27
|
-
}) =>
|
|
26
|
+
}) => JSX.Element;
|
|
28
27
|
export default Tabs;
|
|
29
28
|
//# 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,YAAY,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAA8B,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;AAElD,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,aAAa,CAAE,SAAQ,SAAS;IAC/D,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAElE;;;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;CACrC;AAED,eAAO,MAAM,WAAW;iBACT,YAAY,GAAG,UAAU;aAC7B,YAAY,GAAG,WAAW;EACmB,CAAA;AA8DxD,QAAA,MAAM,IAAI,EAiEL,CAAC,CAAuC,SAA7B,aAAa,GAAG,aAAa,EAC3C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACrD,GAAG,CAAC,OAAO,CAAA;AAEhB,eAAe,IAAI,CAAA"}
|
|
@@ -10,8 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef, useMemo } from 'react';
|
|
13
|
-
import { Tabs as
|
|
14
|
-
import {
|
|
13
|
+
import { Tabs as BaseUITabs } from '@base-ui/react/tabs';
|
|
14
|
+
import { toReactEvent } from '@toptal/picasso-shared';
|
|
15
15
|
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
|
|
16
16
|
export const TabsContext = React.createContext({ orientation: 'horizontal', variant: 'scrollable' });
|
|
17
17
|
const indicatorClasses = [
|
|
@@ -44,6 +44,27 @@ const classesByVariant = {
|
|
|
44
44
|
scroller: 'w-full overflow-hidden',
|
|
45
45
|
},
|
|
46
46
|
};
|
|
47
|
+
const horizontalIndicatorClasses = [
|
|
48
|
+
'absolute bottom-0 left-0 h-[2px] bg-blue-500 z-10',
|
|
49
|
+
'w-[var(--active-tab-width)]',
|
|
50
|
+
'translate-x-[var(--active-tab-left)]',
|
|
51
|
+
// Tailwind v4 drives translate-x via the `translate` property (not
|
|
52
|
+
// `transform`), so the slide transition must target `translate`.
|
|
53
|
+
'transition-[translate,width] duration-300 ease-in-out',
|
|
54
|
+
];
|
|
55
|
+
const withFallbackValue = (children) => {
|
|
56
|
+
let index = -1;
|
|
57
|
+
return React.Children.map(children, child => {
|
|
58
|
+
if (!React.isValidElement(child)) {
|
|
59
|
+
return child;
|
|
60
|
+
}
|
|
61
|
+
index += 1;
|
|
62
|
+
if (child.props.value === undefined) {
|
|
63
|
+
return React.cloneElement(child, { value: index });
|
|
64
|
+
}
|
|
65
|
+
return child;
|
|
66
|
+
});
|
|
67
|
+
};
|
|
47
68
|
const Tabs = forwardRef((_a, ref) => {
|
|
48
69
|
var { children, orientation = 'horizontal', onChange, value, variant = 'scrollable', className } = _a, rest = __rest(_a, ["children", "orientation", "onChange", "value", "variant", "className"]);
|
|
49
70
|
const contextValue = useMemo(() => ({
|
|
@@ -52,14 +73,11 @@ const Tabs = forwardRef((_a, ref) => {
|
|
|
52
73
|
}), [orientation, variant]);
|
|
53
74
|
const isVertical = orientation === 'vertical';
|
|
54
75
|
return (React.createElement(TabsContext.Provider, { value: contextValue },
|
|
55
|
-
React.createElement(
|
|
56
|
-
root: {
|
|
57
|
-
ref,
|
|
58
|
-
className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className),
|
|
59
|
-
},
|
|
60
|
-
}, onChange: (event, val) => onChange === null || onChange === void 0 ? void 0 : onChange(event, val), value: value, orientation: orientation }),
|
|
76
|
+
React.createElement(BaseUITabs.Root, Object.assign({}, rest, { ref: ref, className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className), onValueChange: (val, { event }) => onChange === null || onChange === void 0 ? void 0 : onChange(toReactEvent(event), val), value: value, orientation: orientation }),
|
|
61
77
|
React.createElement("div", { className: twJoin(classesByVariant[variant].scroller, classesByOrientation[orientation].scroller, 'flex-auto inline-block relative whitespace-nowrap') },
|
|
62
|
-
React.createElement(
|
|
78
|
+
React.createElement(BaseUITabs.List, { className: twJoin('relative flex', isVertical && 'flex-col') },
|
|
79
|
+
withFallbackValue(children),
|
|
80
|
+
!isVertical && (React.createElement(BaseUITabs.Indicator, { className: twJoin(horizontalIndicatorClasses) })))))));
|
|
63
81
|
});
|
|
64
82
|
export default Tabs;
|
|
65
83
|
//# 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;AAClD,OAAO,EAAE,IAAI,IAAI,
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
|
|
2
2
|
ref?: import("react").ForwardedRef<HTMLDivElement>;
|
|
3
|
-
}) =>
|
|
3
|
+
}) => JSX.Element) & {
|
|
4
4
|
Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
5
|
};
|
|
6
6
|
//# 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;OAGmkI,CAAC;MAAqC,IAAK,OAAO;;CAD5oI,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-tabs",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
4
4
|
"description": "Toptal UI components library - Tabs",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -18,32 +18,32 @@
|
|
|
18
18
|
},
|
|
19
19
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@
|
|
21
|
+
"@base-ui/react": "^1.4.1",
|
|
22
22
|
"ap-style-title-case": "^1.1.2",
|
|
23
|
-
"@toptal/picasso-container": "3.1.
|
|
24
|
-
"@toptal/picasso-
|
|
25
|
-
"@toptal/picasso-
|
|
26
|
-
"@toptal/picasso-
|
|
27
|
-
"@toptal/picasso-typography-overflow": "4.0.
|
|
28
|
-
"@toptal/picasso-user-badge": "5.1.
|
|
29
|
-
"@toptal/picasso-utils": "4.0.
|
|
23
|
+
"@toptal/picasso-container": "3.1.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
24
|
+
"@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
25
|
+
"@toptal/picasso-typography": "5.1.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
26
|
+
"@toptal/picasso-icons": "1.15.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
27
|
+
"@toptal/picasso-typography-overflow": "4.0.9-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
28
|
+
"@toptal/picasso-user-badge": "5.1.25-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
29
|
+
"@toptal/picasso-utils": "4.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
|
|
30
30
|
},
|
|
31
31
|
"sideEffects": [
|
|
32
32
|
"**/styles.ts",
|
|
33
33
|
"**/styles.js"
|
|
34
34
|
],
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@toptal/picasso-tailwind-merge": "
|
|
37
|
-
"@toptal/picasso-tailwind": "
|
|
38
|
-
"react": ">=16.12.0
|
|
36
|
+
"@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
37
|
+
"@toptal/picasso-tailwind": "4.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
38
|
+
"react": ">=16.12.0"
|
|
39
39
|
},
|
|
40
40
|
"exports": {
|
|
41
41
|
".": "./dist-package/src/index.js"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@toptal/picasso-provider": "6.0.0",
|
|
45
|
-
"@toptal/picasso-tailwind-merge": "2.0.
|
|
46
|
-
"@toptal/picasso-test-utils": "2.0.
|
|
44
|
+
"@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
45
|
+
"@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
|
|
46
|
+
"@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
|
|
47
47
|
},
|
|
48
48
|
"files": [
|
|
49
49
|
"dist-package/**",
|
package/src/Tab/Tab.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
|
|
2
2
|
import React, { forwardRef, useContext } from 'react'
|
|
3
|
-
import
|
|
4
|
-
import { Tab as MUITab } from '@mui/base/Tab'
|
|
3
|
+
import { Tabs as BaseUITabs } from '@base-ui/react/tabs'
|
|
5
4
|
import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
|
|
6
5
|
import { useTitleCase } from '@toptal/picasso-shared'
|
|
7
6
|
import { UserBadge } from '@toptal/picasso-user-badge'
|
|
8
7
|
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
|
|
9
8
|
|
|
9
|
+
import type { TabsValueType } from '../Tabs/Tabs'
|
|
10
10
|
import { TabsContext } from '../Tabs/Tabs'
|
|
11
11
|
import { TabLabel } from '../TabLabel'
|
|
12
12
|
import { TabDescription } from '../TabDescription'
|
|
@@ -22,7 +22,7 @@ export interface Props
|
|
|
22
22
|
disabled?: boolean
|
|
23
23
|
|
|
24
24
|
/** You can provide your own value. Otherwise, we fallback to the child position index */
|
|
25
|
-
value?:
|
|
25
|
+
value?: TabsValueType
|
|
26
26
|
|
|
27
27
|
/** The label element */
|
|
28
28
|
label?: ReactNode
|
|
@@ -39,8 +39,8 @@ export interface Props
|
|
|
39
39
|
// Properties below are managed by Tabs component
|
|
40
40
|
|
|
41
41
|
selected?: boolean
|
|
42
|
-
onChange?:
|
|
43
|
-
onClick?:
|
|
42
|
+
onChange?: (event: React.SyntheticEvent | null, value: TabsValueType) => void
|
|
43
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
const getOpacityClass = (
|
|
@@ -66,16 +66,17 @@ const wrapperClassesByOrientation = {
|
|
|
66
66
|
|
|
67
67
|
const rootClassesByOrientation = (selected: boolean) => ({
|
|
68
68
|
horizontal: [
|
|
69
|
-
'm-0 [&:not(:last-
|
|
70
|
-
'text-center bg-transparent
|
|
69
|
+
'm-0 [&:not(:last-of-type)]:mr-8 p-0 pb-[0.4375rem]',
|
|
70
|
+
'text-center bg-transparent z-10 rounded-none',
|
|
71
71
|
selected ? 'text-black' : 'text-inheritColor',
|
|
72
|
-
selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
|
|
73
72
|
],
|
|
74
73
|
vertical: [
|
|
75
|
-
'first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
|
|
74
|
+
'first-of-type:mt-4 last-of-type:mb-4 my-1 mx-0 py-2 px-4',
|
|
76
75
|
'text-left rounded-l-sm rounded-r-none transition-all',
|
|
77
76
|
'w-full overflow-hidden',
|
|
78
77
|
selected && 'shadow-1',
|
|
78
|
+
// Static active bar (no slide animation for vertical tabs) — clipped by
|
|
79
|
+
// the tab's own rounded-l-sm + overflow-hidden so it follows the border.
|
|
79
80
|
selected && [
|
|
80
81
|
'before:absolute',
|
|
81
82
|
'before:content-[""]',
|
|
@@ -105,7 +106,10 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
|
|
|
105
106
|
value,
|
|
106
107
|
label,
|
|
107
108
|
icon,
|
|
109
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
108
110
|
onChange,
|
|
111
|
+
selected,
|
|
112
|
+
/* eslint-enable */
|
|
109
113
|
onClick,
|
|
110
114
|
titleCase: propsTitleCase,
|
|
111
115
|
description,
|
|
@@ -127,42 +131,29 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
|
|
|
127
131
|
})
|
|
128
132
|
|
|
129
133
|
return (
|
|
130
|
-
<
|
|
134
|
+
<BaseUITabs.Tab
|
|
131
135
|
{...rest}
|
|
132
|
-
className=''
|
|
133
136
|
ref={ref}
|
|
134
|
-
tabIndex={0}
|
|
135
137
|
disabled={disabled}
|
|
136
138
|
value={value}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
'border-0 cursor-pointer inline-flex outline-hidden',
|
|
156
|
-
'items-center select-none align-middle appearance-none',
|
|
157
|
-
'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
|
|
158
|
-
'normal-case whitespace-normal leading-4',
|
|
159
|
-
'relative ',
|
|
160
|
-
className
|
|
161
|
-
),
|
|
162
|
-
...(onClick && { onClick }),
|
|
163
|
-
}
|
|
164
|
-
},
|
|
165
|
-
}}
|
|
139
|
+
onClick={onClick}
|
|
140
|
+
className={state =>
|
|
141
|
+
twMerge(
|
|
142
|
+
getOpacityClass(state.active, state.disabled, orientation),
|
|
143
|
+
rootClassesByOrientation(state.active)[orientation],
|
|
144
|
+
classesByVariant[variant],
|
|
145
|
+
state.disabled ? 'cursor-default text-gray-500' : 'cursor-pointer',
|
|
146
|
+
state.disabled && 'pointer-events-none',
|
|
147
|
+
icon && isHorizontal && 'min-h-0 pr-6',
|
|
148
|
+
'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
|
|
149
|
+
'border-0 cursor-pointer inline-flex outline-hidden',
|
|
150
|
+
'items-center select-none align-middle appearance-none',
|
|
151
|
+
'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
|
|
152
|
+
'normal-case whitespace-normal leading-4',
|
|
153
|
+
'relative ',
|
|
154
|
+
className
|
|
155
|
+
)
|
|
156
|
+
}
|
|
166
157
|
>
|
|
167
158
|
<span
|
|
168
159
|
className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
|
|
@@ -174,7 +165,7 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
|
|
|
174
165
|
</span>
|
|
175
166
|
)}
|
|
176
167
|
</span>
|
|
177
|
-
</
|
|
168
|
+
</BaseUITabs.Tab>
|
|
178
169
|
)
|
|
179
170
|
})
|
|
180
171
|
|
|
@@ -6,21 +6,26 @@ exports[`Tab Tab disabled tab 1`] = `
|
|
|
6
6
|
class="Picasso-root"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="relative min-h flex overflow-hidden overflow-x"
|
|
10
|
+
data-activation-direction="none"
|
|
11
|
+
data-orientation="horizontal"
|
|
10
12
|
>
|
|
11
13
|
<div
|
|
12
14
|
class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
13
15
|
>
|
|
14
16
|
<div
|
|
15
|
-
class="
|
|
17
|
+
class="relative flex"
|
|
18
|
+
data-activation-direction="none"
|
|
19
|
+
data-orientation="horizontal"
|
|
16
20
|
role="tablist"
|
|
17
|
-
tabindex="-1"
|
|
18
21
|
>
|
|
19
22
|
<button
|
|
20
23
|
aria-disabled="true"
|
|
21
24
|
aria-selected="false"
|
|
22
|
-
class="
|
|
23
|
-
|
|
25
|
+
class="opacity-50 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
26
|
+
data-disabled=""
|
|
27
|
+
data-orientation="horizontal"
|
|
28
|
+
id="base-ui-:r1:"
|
|
24
29
|
role="tab"
|
|
25
30
|
tabindex="0"
|
|
26
31
|
type="button"
|
|
@@ -48,21 +53,25 @@ exports[`Tab Tab renders 1`] = `
|
|
|
48
53
|
class="Picasso-root"
|
|
49
54
|
>
|
|
50
55
|
<div
|
|
51
|
-
class="
|
|
56
|
+
class="relative min-h flex overflow-hidden overflow-x"
|
|
57
|
+
data-activation-direction="none"
|
|
58
|
+
data-orientation="horizontal"
|
|
52
59
|
>
|
|
53
60
|
<div
|
|
54
61
|
class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
55
62
|
>
|
|
56
63
|
<div
|
|
57
|
-
class="
|
|
64
|
+
class="relative flex"
|
|
65
|
+
data-activation-direction="none"
|
|
66
|
+
data-orientation="horizontal"
|
|
58
67
|
role="tablist"
|
|
59
|
-
tabindex="-1"
|
|
60
68
|
>
|
|
61
69
|
<button
|
|
62
70
|
aria-disabled="false"
|
|
63
71
|
aria-selected="false"
|
|
64
|
-
class="
|
|
65
|
-
|
|
72
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
73
|
+
data-orientation="horizontal"
|
|
74
|
+
id="base-ui-:r0:"
|
|
66
75
|
role="tab"
|
|
67
76
|
tabindex="0"
|
|
68
77
|
type="button"
|
|
@@ -90,21 +99,25 @@ exports[`Tab Tab tab with icon 1`] = `
|
|
|
90
99
|
class="Picasso-root"
|
|
91
100
|
>
|
|
92
101
|
<div
|
|
93
|
-
class="
|
|
102
|
+
class="relative min-h flex overflow-hidden overflow-x"
|
|
103
|
+
data-activation-direction="none"
|
|
104
|
+
data-orientation="horizontal"
|
|
94
105
|
>
|
|
95
106
|
<div
|
|
96
107
|
class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
97
108
|
>
|
|
98
109
|
<div
|
|
99
|
-
class="
|
|
110
|
+
class="relative flex"
|
|
111
|
+
data-activation-direction="none"
|
|
112
|
+
data-orientation="horizontal"
|
|
100
113
|
role="tablist"
|
|
101
|
-
tabindex="-1"
|
|
102
114
|
>
|
|
103
115
|
<button
|
|
104
116
|
aria-disabled="false"
|
|
105
117
|
aria-selected="false"
|
|
106
|
-
class="
|
|
107
|
-
|
|
118
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-h pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
119
|
+
data-orientation="horizontal"
|
|
120
|
+
id="base-ui-:r2:"
|
|
108
121
|
role="tab"
|
|
109
122
|
tabindex="0"
|
|
110
123
|
type="button"
|
package/src/Tabs/Tabs.tsx
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { ReactNode, ForwardedRef } from 'react'
|
|
2
2
|
import React, { forwardRef, useMemo } from 'react'
|
|
3
|
-
import { Tabs as
|
|
4
|
-
import { TabsList } from '@mui/base/TabsList'
|
|
3
|
+
import { Tabs as BaseUITabs } from '@base-ui/react/tabs'
|
|
5
4
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
5
|
+
import { toReactEvent } from '@toptal/picasso-shared'
|
|
6
6
|
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
|
|
7
7
|
|
|
8
8
|
export type TabsValueType = string | number | null
|
|
@@ -65,6 +65,33 @@ const classesByVariant = {
|
|
|
65
65
|
},
|
|
66
66
|
} as const
|
|
67
67
|
|
|
68
|
+
const horizontalIndicatorClasses = [
|
|
69
|
+
'absolute bottom-0 left-0 h-[2px] bg-blue-500 z-10',
|
|
70
|
+
'w-[var(--active-tab-width)]',
|
|
71
|
+
'translate-x-[var(--active-tab-left)]',
|
|
72
|
+
// Tailwind v4 drives translate-x via the `translate` property (not
|
|
73
|
+
// `transform`), so the slide transition must target `translate`.
|
|
74
|
+
'transition-[translate,width] duration-300 ease-in-out',
|
|
75
|
+
]
|
|
76
|
+
|
|
77
|
+
const withFallbackValue = (children: ReactNode): ReactNode => {
|
|
78
|
+
let index = -1
|
|
79
|
+
|
|
80
|
+
return React.Children.map(children, child => {
|
|
81
|
+
if (!React.isValidElement<{ value?: TabsValueType }>(child)) {
|
|
82
|
+
return child
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
index += 1
|
|
86
|
+
|
|
87
|
+
if (child.props.value === undefined) {
|
|
88
|
+
return React.cloneElement(child, { value: index })
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return child
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
|
|
68
95
|
const Tabs = forwardRef(
|
|
69
96
|
<V extends TabsValueType = TabsValueType>(
|
|
70
97
|
{
|
|
@@ -90,20 +117,21 @@ const Tabs = forwardRef(
|
|
|
90
117
|
|
|
91
118
|
return (
|
|
92
119
|
<TabsContext.Provider value={contextValue}>
|
|
93
|
-
<
|
|
120
|
+
<BaseUITabs.Root
|
|
94
121
|
{...rest}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
122
|
+
ref={ref}
|
|
123
|
+
className={twMerge(
|
|
124
|
+
'relative min-h-0 flex overflow-hidden',
|
|
125
|
+
classesByOrientation[orientation].root,
|
|
126
|
+
classesByVariant[variant].root,
|
|
127
|
+
className
|
|
128
|
+
)}
|
|
129
|
+
onValueChange={(val, { event }) =>
|
|
130
|
+
onChange?.(
|
|
131
|
+
toReactEvent<React.ChangeEvent<HTMLButtonElement>>(event),
|
|
132
|
+
val as V
|
|
133
|
+
)
|
|
134
|
+
}
|
|
107
135
|
value={value}
|
|
108
136
|
orientation={orientation}
|
|
109
137
|
>
|
|
@@ -114,16 +142,23 @@ const Tabs = forwardRef(
|
|
|
114
142
|
'flex-auto inline-block relative whitespace-nowrap'
|
|
115
143
|
)}
|
|
116
144
|
>
|
|
117
|
-
<
|
|
118
|
-
{
|
|
119
|
-
|
|
145
|
+
<BaseUITabs.List
|
|
146
|
+
className={twJoin('relative flex', isVertical && 'flex-col')}
|
|
147
|
+
>
|
|
148
|
+
{withFallbackValue(children)}
|
|
149
|
+
{!isVertical && (
|
|
150
|
+
<BaseUITabs.Indicator
|
|
151
|
+
className={twJoin(horizontalIndicatorClasses)}
|
|
152
|
+
/>
|
|
153
|
+
)}
|
|
154
|
+
</BaseUITabs.List>
|
|
120
155
|
</div>
|
|
121
|
-
</
|
|
156
|
+
</BaseUITabs.Root>
|
|
122
157
|
</TabsContext.Provider>
|
|
123
158
|
)
|
|
124
159
|
}
|
|
125
160
|
) as <V extends TabsValueType = TabsValueType>(
|
|
126
161
|
props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
|
|
127
|
-
) =>
|
|
162
|
+
) => JSX.Element
|
|
128
163
|
|
|
129
164
|
export default Tabs
|
|
@@ -6,22 +6,26 @@ exports[`Tabs renders 1`] = `
|
|
|
6
6
|
class="Picasso-root"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="relative min-h flex overflow-hidden overflow-x"
|
|
10
|
+
data-activation-direction="none"
|
|
11
|
+
data-orientation="horizontal"
|
|
10
12
|
>
|
|
11
13
|
<div
|
|
12
14
|
class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
13
15
|
>
|
|
14
16
|
<div
|
|
15
|
-
class="
|
|
17
|
+
class="relative flex"
|
|
18
|
+
data-activation-direction="none"
|
|
19
|
+
data-orientation="horizontal"
|
|
16
20
|
role="tablist"
|
|
17
|
-
tabindex="-1"
|
|
18
21
|
>
|
|
19
22
|
<button
|
|
20
23
|
aria-disabled="false"
|
|
21
24
|
aria-selected="false"
|
|
22
|
-
class="
|
|
25
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
26
|
+
data-orientation="horizontal"
|
|
23
27
|
data-testid="tab-1"
|
|
24
|
-
id="
|
|
28
|
+
id="base-ui-:r0:"
|
|
25
29
|
role="tab"
|
|
26
30
|
tabindex="0"
|
|
27
31
|
type="button"
|
|
@@ -39,11 +43,12 @@ exports[`Tabs renders 1`] = `
|
|
|
39
43
|
<button
|
|
40
44
|
aria-disabled="false"
|
|
41
45
|
aria-selected="false"
|
|
42
|
-
class="
|
|
46
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
47
|
+
data-orientation="horizontal"
|
|
43
48
|
data-testid="tab-2"
|
|
44
|
-
id="
|
|
49
|
+
id="base-ui-:r1:"
|
|
45
50
|
role="tab"
|
|
46
|
-
tabindex="
|
|
51
|
+
tabindex="-1"
|
|
47
52
|
type="button"
|
|
48
53
|
>
|
|
49
54
|
<span
|
|
@@ -69,22 +74,26 @@ exports[`Tabs renders in full width 1`] = `
|
|
|
69
74
|
class="Picasso-root"
|
|
70
75
|
>
|
|
71
76
|
<div
|
|
72
|
-
class="
|
|
77
|
+
class="relative min-h flex overflow-hidden"
|
|
78
|
+
data-activation-direction="none"
|
|
79
|
+
data-orientation="horizontal"
|
|
73
80
|
>
|
|
74
81
|
<div
|
|
75
82
|
class="w-full overflow-hidden after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
76
83
|
>
|
|
77
84
|
<div
|
|
78
|
-
class="
|
|
85
|
+
class="relative flex"
|
|
86
|
+
data-activation-direction="none"
|
|
87
|
+
data-orientation="horizontal"
|
|
79
88
|
role="tablist"
|
|
80
|
-
tabindex="-1"
|
|
81
89
|
>
|
|
82
90
|
<button
|
|
83
91
|
aria-disabled="false"
|
|
84
92
|
aria-selected="false"
|
|
85
|
-
class="
|
|
93
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
94
|
+
data-orientation="horizontal"
|
|
86
95
|
data-testid="tab-1"
|
|
87
|
-
id="
|
|
96
|
+
id="base-ui-:re:"
|
|
88
97
|
role="tab"
|
|
89
98
|
tabindex="0"
|
|
90
99
|
type="button"
|
|
@@ -102,11 +111,12 @@ exports[`Tabs renders in full width 1`] = `
|
|
|
102
111
|
<button
|
|
103
112
|
aria-disabled="false"
|
|
104
113
|
aria-selected="false"
|
|
105
|
-
class="
|
|
114
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
115
|
+
data-orientation="horizontal"
|
|
106
116
|
data-testid="tab-2"
|
|
107
|
-
id="
|
|
117
|
+
id="base-ui-:rf:"
|
|
108
118
|
role="tab"
|
|
109
|
-
tabindex="
|
|
119
|
+
tabindex="-1"
|
|
110
120
|
type="button"
|
|
111
121
|
>
|
|
112
122
|
<span
|
|
@@ -132,23 +142,27 @@ exports[`Tabs renders in vertical orientation 1`] = `
|
|
|
132
142
|
class="Picasso-root"
|
|
133
143
|
>
|
|
134
144
|
<div
|
|
135
|
-
class="
|
|
145
|
+
class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
|
|
146
|
+
data-activation-direction="none"
|
|
147
|
+
data-orientation="vertical"
|
|
136
148
|
>
|
|
137
149
|
<div
|
|
138
150
|
class="pl-2 flex-auto inline-block relative whitespace-nowrap"
|
|
139
151
|
>
|
|
140
152
|
<div
|
|
141
153
|
aria-orientation="vertical"
|
|
142
|
-
class="
|
|
154
|
+
class="relative flex flex-col"
|
|
155
|
+
data-activation-direction="none"
|
|
156
|
+
data-orientation="vertical"
|
|
143
157
|
role="tablist"
|
|
144
|
-
tabindex="-1"
|
|
145
158
|
>
|
|
146
159
|
<button
|
|
147
160
|
aria-disabled="false"
|
|
148
161
|
aria-selected="false"
|
|
149
|
-
class="
|
|
162
|
+
class="opacity-100 first-of-type:mt last-of-type:mb my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
163
|
+
data-orientation="vertical"
|
|
150
164
|
data-testid="tab-1"
|
|
151
|
-
id="
|
|
165
|
+
id="base-ui-:r2:"
|
|
152
166
|
role="tab"
|
|
153
167
|
tabindex="0"
|
|
154
168
|
type="button"
|
|
@@ -166,11 +180,12 @@ exports[`Tabs renders in vertical orientation 1`] = `
|
|
|
166
180
|
<button
|
|
167
181
|
aria-disabled="false"
|
|
168
182
|
aria-selected="false"
|
|
169
|
-
class="
|
|
183
|
+
class="opacity-100 first-of-type:mt last-of-type:mb my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
184
|
+
data-orientation="vertical"
|
|
170
185
|
data-testid="tab-2"
|
|
171
|
-
id="
|
|
186
|
+
id="base-ui-:r3:"
|
|
172
187
|
role="tab"
|
|
173
|
-
tabindex="
|
|
188
|
+
tabindex="-1"
|
|
174
189
|
type="button"
|
|
175
190
|
>
|
|
176
191
|
<span
|
|
@@ -196,24 +211,28 @@ exports[`Tabs renders with a pre-selected option 1`] = `
|
|
|
196
211
|
class="Picasso-root"
|
|
197
212
|
>
|
|
198
213
|
<div
|
|
199
|
-
class="
|
|
214
|
+
class="relative min-h flex overflow-hidden overflow-x"
|
|
215
|
+
data-activation-direction="none"
|
|
216
|
+
data-orientation="horizontal"
|
|
200
217
|
>
|
|
201
218
|
<div
|
|
202
219
|
class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
203
220
|
>
|
|
204
221
|
<div
|
|
205
|
-
class="
|
|
222
|
+
class="relative flex"
|
|
223
|
+
data-activation-direction="none"
|
|
224
|
+
data-orientation="horizontal"
|
|
206
225
|
role="tablist"
|
|
207
|
-
tabindex="-1"
|
|
208
226
|
>
|
|
209
227
|
<button
|
|
210
228
|
aria-disabled="false"
|
|
211
229
|
aria-selected="false"
|
|
212
|
-
class="
|
|
230
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
231
|
+
data-orientation="horizontal"
|
|
213
232
|
data-testid="tab-1"
|
|
214
|
-
id="
|
|
233
|
+
id="base-ui-:r4:"
|
|
215
234
|
role="tab"
|
|
216
|
-
tabindex="
|
|
235
|
+
tabindex="-1"
|
|
217
236
|
type="button"
|
|
218
237
|
>
|
|
219
238
|
<span
|
|
@@ -229,9 +248,12 @@ exports[`Tabs renders with a pre-selected option 1`] = `
|
|
|
229
248
|
<button
|
|
230
249
|
aria-disabled="false"
|
|
231
250
|
aria-selected="true"
|
|
232
|
-
class="
|
|
251
|
+
class="opacity-100 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
252
|
+
data-active=""
|
|
253
|
+
data-composite-item-active=""
|
|
254
|
+
data-orientation="horizontal"
|
|
233
255
|
data-testid="tab-2"
|
|
234
|
-
id="
|
|
256
|
+
id="base-ui-:r5:"
|
|
235
257
|
role="tab"
|
|
236
258
|
tabindex="0"
|
|
237
259
|
type="button"
|
|
@@ -246,6 +268,14 @@ exports[`Tabs renders with a pre-selected option 1`] = `
|
|
|
246
268
|
</div>
|
|
247
269
|
</span>
|
|
248
270
|
</button>
|
|
271
|
+
<span
|
|
272
|
+
class="absolute bottom-0 left-0 h-[2px] bg-blue z-10 w-[var(--active-tab translate-x-[var(--active-tab transition-[translate,width] duration-300 ease-in"
|
|
273
|
+
data-activation-direction="none"
|
|
274
|
+
data-orientation="horizontal"
|
|
275
|
+
hidden=""
|
|
276
|
+
role="presentation"
|
|
277
|
+
style="--active-tab-left: 0px; --active-tab-right: 0px; --active-tab-top: 0px; --active-tab-bottom: 0px; --active-tab-width: 0px; --active-tab-height: 0px;"
|
|
278
|
+
/>
|
|
249
279
|
</div>
|
|
250
280
|
</div>
|
|
251
281
|
</div>
|
|
@@ -266,22 +296,28 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
|
|
|
266
296
|
class="Picasso-root"
|
|
267
297
|
>
|
|
268
298
|
<div
|
|
269
|
-
class="
|
|
299
|
+
class="relative min-h flex overflow-hidden overflow-x"
|
|
300
|
+
data-activation-direction="none"
|
|
301
|
+
data-orientation="horizontal"
|
|
270
302
|
>
|
|
271
303
|
<div
|
|
272
304
|
class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
|
|
273
305
|
>
|
|
274
306
|
<div
|
|
275
|
-
class="
|
|
307
|
+
class="relative flex"
|
|
308
|
+
data-activation-direction="none"
|
|
309
|
+
data-orientation="horizontal"
|
|
276
310
|
role="tablist"
|
|
277
|
-
tabindex="-1"
|
|
278
311
|
>
|
|
279
312
|
<button
|
|
280
313
|
aria-disabled="false"
|
|
281
314
|
aria-selected="true"
|
|
282
|
-
class="
|
|
315
|
+
class="opacity-100 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
316
|
+
data-active=""
|
|
317
|
+
data-composite-item-active=""
|
|
318
|
+
data-orientation="horizontal"
|
|
283
319
|
data-testid="tab-1"
|
|
284
|
-
id="
|
|
320
|
+
id="base-ui-:r6:"
|
|
285
321
|
role="tab"
|
|
286
322
|
tabindex="0"
|
|
287
323
|
type="button"
|
|
@@ -299,11 +335,12 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
|
|
|
299
335
|
<button
|
|
300
336
|
aria-disabled="false"
|
|
301
337
|
aria-selected="false"
|
|
302
|
-
class="
|
|
338
|
+
class="opacity-70 m-0 [&:not(:last-of-type)]:mr p-0 pb-[0.4375rem] text-center bg-transparent z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
|
|
339
|
+
data-orientation="horizontal"
|
|
303
340
|
data-testid="tab-2"
|
|
304
|
-
id="
|
|
341
|
+
id="base-ui-:r7:"
|
|
305
342
|
role="tab"
|
|
306
|
-
tabindex="
|
|
343
|
+
tabindex="-1"
|
|
307
344
|
type="button"
|
|
308
345
|
>
|
|
309
346
|
<span
|
|
@@ -316,6 +353,14 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
|
|
|
316
353
|
</div>
|
|
317
354
|
</span>
|
|
318
355
|
</button>
|
|
356
|
+
<span
|
|
357
|
+
class="absolute bottom-0 left-0 h-[2px] bg-blue z-10 w-[var(--active-tab translate-x-[var(--active-tab transition-[translate,width] duration-300 ease-in"
|
|
358
|
+
data-activation-direction="none"
|
|
359
|
+
data-orientation="horizontal"
|
|
360
|
+
hidden=""
|
|
361
|
+
role="presentation"
|
|
362
|
+
style="--active-tab-left: 0px; --active-tab-right: 0px; --active-tab-top: 0px; --active-tab-bottom: 0px; --active-tab-width: 0px; --active-tab-height: 0px;"
|
|
363
|
+
/>
|
|
319
364
|
</div>
|
|
320
365
|
</div>
|
|
321
366
|
</div>
|