@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.
Files changed (32) hide show
  1. package/dist-package/src/Tab/Tab.d.ts +7 -10
  2. package/dist-package/src/Tab/Tab.d.ts.map +1 -1
  3. package/dist-package/src/Tab/Tab.js +32 -33
  4. package/dist-package/src/Tab/Tab.js.map +1 -1
  5. package/dist-package/src/Tab/index.d.ts +1 -4
  6. package/dist-package/src/Tab/index.d.ts.map +1 -1
  7. package/dist-package/src/Tab/index.js.map +1 -1
  8. package/dist-package/src/Tabs/Tabs.d.ts +11 -11
  9. package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
  10. package/dist-package/src/Tabs/Tabs.js +34 -17
  11. package/dist-package/src/Tabs/Tabs.js.map +1 -1
  12. package/dist-package/src/Tabs/TabsContext.d.ts +11 -0
  13. package/dist-package/src/Tabs/TabsContext.d.ts.map +1 -0
  14. package/dist-package/src/Tabs/TabsContext.js +16 -0
  15. package/dist-package/src/Tabs/TabsContext.js.map +1 -0
  16. package/dist-package/src/Tabs/index.d.ts +1 -5
  17. package/dist-package/src/Tabs/index.d.ts.map +1 -1
  18. package/dist-package/src/Tabs/index.js.map +1 -1
  19. package/dist-package/src/TabsCompound/index.d.ts +6 -2
  20. package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
  21. package/package.json +12 -13
  22. package/src/Tab/Tab.tsx +103 -111
  23. package/src/Tab/__snapshots__/test.tsx.snap +29 -45
  24. package/src/Tab/index.ts +1 -6
  25. package/src/Tab/story/CustomValue.example.tsx +2 -2
  26. package/src/Tab/story/IconOrBadge.example.tsx +3 -3
  27. package/src/Tabs/Tabs.tsx +103 -69
  28. package/src/Tabs/TabsContext.tsx +27 -0
  29. package/src/Tabs/__snapshots__/test.tsx.snap +33 -49
  30. package/src/Tabs/index.ts +1 -7
  31. package/src/Tabs/story/Default.example.tsx +7 -6
  32. 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 Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
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
- /** You can provide your own value. Otherwise, we fallback to the child position index */
12
- value?: TabProps['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: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
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,MAAM,OAAO,CAAA;AACpE,OAAO,KAAiC,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,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,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEzB,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,QAAQ,CAAC,UAAU,CAAC,CAAA;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;CAC9B;AAuDD,eAAO,MAAM,GAAG,iFA4Ed,CAAA;AAyDF,eAAe,GAAG,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,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, useContext } from 'react';
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 { TabsContext } from '../Tabs/Tabs';
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 flex-col justify-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-[0.5625rem] pb-[0.4375rem] px-0',
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":"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"}
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}
@@ -1,5 +1,2 @@
1
- import type { OmitInternalProps } from '@toptal/picasso-shared';
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,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,oBAAY,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
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":"AAIA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA"}
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 declare type TabsValueType = string | number | null;
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: React.ChangeEvent<{}> | null, value: V) => void;
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: V;
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 TabsContext: React.Context<{
21
- orientation: 'horizontal' | 'vertical';
22
- variant: 'scrollable' | 'fullWidth';
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,MAAM,OAAO,CAAA;AACtC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,oBAAY,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;AAoCxD,eAAO,MAAM,IAAI,6FAyDhB,CAAA;AAID,eAAe,IAAI,CAAA"}
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
- export const TabsContext = React.createContext({ orientation: 'horizontal', variant: 'scrollable' });
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 react/display-name
48
- export const Tabs = forwardRef(function Tabs(props, ref) {
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
- }), [orientation, variant]);
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(MUITabs, Object.assign({}, rest, { "data-component-type": 'tabs', slotProps: {
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(TabsList, { className: twJoin('flex', isVertical && 'flex-col') }, children)))));
64
- });
65
- Tabs.displayName = 'Tabs';
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;AAClD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAwBhE,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAG3C,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAA;AAExD,MAAM,gBAAgB,GAAG;IACvB,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,cAAc;IACd,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,WAAW;CACZ,CAAA;AAED,MAAM,oBAAoB,GAAG;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAA;AAED,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE;QACV,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,EAAE;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,wBAAwB;KACnC;CACF,CAAA;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,EACtB,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EARH,wEAQL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,OAAO;KACR,CAAC,EACF,CAAC,WAAW,EAAE,OAAO,CAAC,CACvB,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAA;IAE7C,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACvC,oBAAC,OAAO,oBACF,IAAI,2BACY,MAAM,EAC1B,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,GAAG;oBACH,SAAS,EAAE,OAAO,CAChB,uCAAuC,EACvC,oBAAoB,CAAC,WAAW,CAAC,CAAC,IAAI,EACtC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAC9B,SAAS,CACV;iBACF;aACF,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW;YAExB,6BACE,SAAS,EAAE,MAAM,CACf,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,EAClC,oBAAoB,CAAC,WAAW,CAAC,CAAC,QAAQ,EAC1C,mDAAmD,CACpD;gBAED,oBAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,IAAI,UAAU,CAAC,IAC1D,QAAQ,CACA,CACP,CACE,CACW,CACxB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,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
- import type { OmitInternalProps } from '@toptal/picasso-shared';
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,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA"}
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":"AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}
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: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props<import("../Tabs").TabsValueType> & import("react").RefAttributes<HTMLDivElement>> & {
3
- Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
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;;CAEvB,CAAA"}
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-19babbfd6.8+19babbfd6",
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
- "@mui/base": "5.0.0-beta.58",
26
- "@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
27
- "@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
28
- "@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-19babbfd6.354+19babbfd6",
29
- "@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
30
- "@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
31
- "@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
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-19babbfd6.275+19babbfd6",
50
- "@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6",
51
- "@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-19babbfd6.354+19babbfd6"
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": "19babbfd627b4461663b6782aa7493f16f4181bc"
57
+ "gitHead": "2a3da7cea3ba840b0a702d9efc91380d60ee2fe6"
59
58
  }