@toptal/picasso-tabs 5.0.15 → 5.0.16-alpha-1757603192867.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.
Files changed (61) hide show
  1. package/package.json +15 -14
  2. package/dist-package/src/Tab/Tab.d.ts +0 -27
  3. package/dist-package/src/Tab/Tab.d.ts.map +0 -1
  4. package/dist-package/src/Tab/Tab.js +0 -60
  5. package/dist-package/src/Tab/Tab.js.map +0 -1
  6. package/dist-package/src/Tab/index.d.ts +0 -5
  7. package/dist-package/src/Tab/index.d.ts.map +0 -1
  8. package/dist-package/src/Tab/index.js +0 -2
  9. package/dist-package/src/Tab/index.js.map +0 -1
  10. package/dist-package/src/Tab/styles.d.ts +0 -4
  11. package/dist-package/src/Tab/styles.d.ts.map +0 -1
  12. package/dist-package/src/Tab/styles.js +0 -95
  13. package/dist-package/src/Tab/styles.js.map +0 -1
  14. package/dist-package/src/TabDescription/TabDescription.d.ts +0 -8
  15. package/dist-package/src/TabDescription/TabDescription.d.ts.map +0 -1
  16. package/dist-package/src/TabDescription/TabDescription.js +0 -8
  17. package/dist-package/src/TabDescription/TabDescription.js.map +0 -1
  18. package/dist-package/src/TabDescription/index.d.ts +0 -2
  19. package/dist-package/src/TabDescription/index.d.ts.map +0 -1
  20. package/dist-package/src/TabDescription/index.js +0 -2
  21. package/dist-package/src/TabDescription/index.js.map +0 -1
  22. package/dist-package/src/TabLabel/TabLabel.d.ts +0 -9
  23. package/dist-package/src/TabLabel/TabLabel.d.ts.map +0 -1
  24. package/dist-package/src/TabLabel/TabLabel.js +0 -11
  25. package/dist-package/src/TabLabel/TabLabel.js.map +0 -1
  26. package/dist-package/src/TabLabel/index.d.ts +0 -2
  27. package/dist-package/src/TabLabel/index.d.ts.map +0 -1
  28. package/dist-package/src/TabLabel/index.js +0 -2
  29. package/dist-package/src/TabLabel/index.js.map +0 -1
  30. package/dist-package/src/TabScrollButton/TabScrollButton.d.ts +0 -12
  31. package/dist-package/src/TabScrollButton/TabScrollButton.d.ts.map +0 -1
  32. package/dist-package/src/TabScrollButton/TabScrollButton.js +0 -30
  33. package/dist-package/src/TabScrollButton/TabScrollButton.js.map +0 -1
  34. package/dist-package/src/TabScrollButton/index.d.ts +0 -5
  35. package/dist-package/src/TabScrollButton/index.d.ts.map +0 -1
  36. package/dist-package/src/TabScrollButton/index.js +0 -2
  37. package/dist-package/src/TabScrollButton/index.js.map +0 -1
  38. package/dist-package/src/Tabs/Tabs.d.ts +0 -23
  39. package/dist-package/src/Tabs/Tabs.d.ts.map +0 -1
  40. package/dist-package/src/Tabs/Tabs.js +0 -30
  41. package/dist-package/src/Tabs/Tabs.js.map +0 -1
  42. package/dist-package/src/Tabs/index.d.ts +0 -6
  43. package/dist-package/src/Tabs/index.d.ts.map +0 -1
  44. package/dist-package/src/Tabs/index.js +0 -2
  45. package/dist-package/src/Tabs/index.js.map +0 -1
  46. package/dist-package/src/Tabs/styles.d.ts +0 -4
  47. package/dist-package/src/Tabs/styles.d.ts.map +0 -1
  48. package/dist-package/src/Tabs/styles.js +0 -41
  49. package/dist-package/src/Tabs/styles.js.map +0 -1
  50. package/dist-package/src/Tabs/use-tab-action.d.ts +0 -5
  51. package/dist-package/src/Tabs/use-tab-action.d.ts.map +0 -1
  52. package/dist-package/src/Tabs/use-tab-action.js +0 -21
  53. package/dist-package/src/Tabs/use-tab-action.js.map +0 -1
  54. package/dist-package/src/TabsCompound/index.d.ts +0 -7
  55. package/dist-package/src/TabsCompound/index.d.ts.map +0 -1
  56. package/dist-package/src/TabsCompound/index.js +0 -6
  57. package/dist-package/src/TabsCompound/index.js.map +0 -1
  58. package/dist-package/src/index.d.ts +0 -7
  59. package/dist-package/src/index.d.ts.map +0 -1
  60. package/dist-package/src/index.js +0 -7
  61. package/dist-package/src/index.js.map +0 -1
package/package.json CHANGED
@@ -1,15 +1,16 @@
1
1
  {
2
2
  "name": "@toptal/picasso-tabs",
3
- "version": "5.0.15",
3
+ "version": "5.0.16-alpha-1757603192867.0",
4
4
  "description": "Toptal UI components library - Tabs",
5
5
  "publishConfig": {
6
- "access": "public"
6
+ "access": "public",
7
+ "provenance": true
7
8
  },
8
9
  "main": "./dist-package/src/index.js",
9
10
  "module": "./dist-package/src/index.js",
10
11
  "scripts": {
11
12
  "build:package": "tsc -b tsconfig.json",
12
- "prepublishOnly": "yarn build:package"
13
+ "prepublishOnly": "echo 0"
13
14
  },
14
15
  "repository": {
15
16
  "type": "git",
@@ -22,13 +23,13 @@
22
23
  },
23
24
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
25
  "dependencies": {
25
- "@toptal/picasso-container": "3.1.2",
26
- "@toptal/picasso-icons": "1.12.1",
27
- "@toptal/picasso-shared": "15.0.0",
28
- "@toptal/picasso-typography": "4.0.4",
29
- "@toptal/picasso-typography-overflow": "4.0.4",
30
- "@toptal/picasso-user-badge": "5.1.12",
31
- "@toptal/picasso-utils": "3.1.0",
26
+ "@toptal/picasso-container": "3.1.3-alpha-1757603192867.0",
27
+ "@toptal/picasso-icons": "1.12.2-alpha-1757603192867.0",
28
+ "@toptal/picasso-shared": "15.0.1-alpha-1757603192867.0",
29
+ "@toptal/picasso-typography": "4.0.5-alpha-1757603192867.0",
30
+ "@toptal/picasso-typography-overflow": "4.0.5-alpha-1757603192867.0",
31
+ "@toptal/picasso-user-badge": "5.1.13-alpha-1757603192867.0",
32
+ "@toptal/picasso-utils": "3.1.1-alpha-1757603192867.0",
32
33
  "ap-style-title-case": "^1.1.2"
33
34
  },
34
35
  "sideEffects": [
@@ -37,17 +38,17 @@
37
38
  ],
38
39
  "peerDependencies": {
39
40
  "@material-ui/core": "4.12.4",
40
- "@toptal/picasso-provider": "*",
41
- "@toptal/picasso-tailwind-merge": "^2.0.0",
41
+ "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
42
+ "@toptal/picasso-tailwind-merge": "^2.0.4-alpha-1757603192867.0",
42
43
  "react": ">=16.12.0 < 19.0.0"
43
44
  },
44
45
  "exports": {
45
46
  ".": "./dist-package/src/index.js"
46
47
  },
47
48
  "devDependencies": {
48
- "@toptal/picasso-provider": "5.0.1",
49
+ "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
49
50
  "@material-ui/core": "4.12.4",
50
- "@toptal/picasso-test-utils": "1.1.1"
51
+ "@toptal/picasso-test-utils": "1.1.2-alpha-1757603192867.0"
51
52
  },
52
53
  "files": [
53
54
  "dist-package/**",
@@ -1,27 +0,0 @@
1
- import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
2
- import React from 'react';
3
- import type { TabProps } from '@material-ui/core';
4
- import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
5
- export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
6
- /**
7
- * If true, the tab will be disabled
8
- * @default false
9
- */
10
- disabled?: boolean;
11
- /** You can provide your own value. Otherwise, we fallback to the child position index */
12
- value?: TabProps['value'];
13
- /** The label element */
14
- label?: ReactNode;
15
- /** The Icon element */
16
- icon?: ReactElement;
17
- /** Image URL */
18
- avatar?: string | null;
19
- /** Description */
20
- description?: string;
21
- selected?: boolean;
22
- onChange?: TabProps['onChange'];
23
- onClick?: TabProps['onClick'];
24
- }
25
- export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
26
- export default Tab;
27
- //# sourceMappingURL=Tab.d.ts.map
@@ -1 +0,0 @@
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;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClD;;;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;AAID,eAAO,MAAM,GAAG,8EA+Cd,CAAA;AAuDF,eAAe,GAAG,CAAA"}
@@ -1,60 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React, { forwardRef, useContext } from 'react';
13
- import { makeStyles } from '@material-ui/core/styles';
14
- import { Tab as MUITab } from '@material-ui/core';
15
- import { useTitleCase } from '@toptal/picasso-shared';
16
- import { UserBadge } from '@toptal/picasso-user-badge';
17
- import styles from './styles';
18
- import { TabsOrientationContext } from '../Tabs/Tabs';
19
- import { TabLabel } from '../TabLabel';
20
- import { TabDescription } from '../TabDescription';
21
- const useStyles = makeStyles(styles, { name: 'PicassoTab' });
22
- export const Tab = forwardRef(function Tab(props, ref) {
23
- const { disabled, value, label, icon, selected, onChange, onClick, titleCase: propsTitleCase, description, avatar } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "selected", "onChange", "onClick", "titleCase", "description", "avatar"]);
24
- const classes = useStyles();
25
- const titleCase = useTitleCase(propsTitleCase);
26
- const orientation = useContext(TabsOrientationContext);
27
- const labelComponent = getLabelComponent({
28
- avatar,
29
- description,
30
- disabled,
31
- label,
32
- orientation,
33
- titleCase,
34
- });
35
- return (React.createElement(MUITab, Object.assign({ className: '' }, rest, { ref: ref, tabIndex: 0, disabled: disabled, label: labelComponent, icon: icon, value: value, selected: selected, onChange: onChange, onClick: onClick, classes: {
36
- root: classes[orientation],
37
- selected: classes.selected,
38
- wrapper: classes.wrapper,
39
- } })));
40
- });
41
- Tab.displayName = 'Tab';
42
- const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
43
- if (!label) {
44
- return null;
45
- }
46
- const isHorizontal = orientation === 'horizontal';
47
- const isCustomLabel = typeof label !== 'string';
48
- const Label = () => (React.createElement(TabLabel, { titleCase: titleCase, label: label, orientation: orientation }));
49
- if (isHorizontal || isCustomLabel) {
50
- return React.createElement(Label, null);
51
- }
52
- if (typeof avatar === 'undefined') {
53
- return (React.createElement(React.Fragment, null,
54
- React.createElement(Label, null),
55
- description && (React.createElement(TabDescription, { disabled: disabled }, description))));
56
- }
57
- return (React.createElement(UserBadge, { renderName: Label, name: label, avatar: avatar }, description && (React.createElement(TabDescription, { disabled: disabled }, description))));
58
- };
59
- export default Tab;
60
- //# sourceMappingURL=Tab.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}
@@ -1,5 +0,0 @@
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>;
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
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,2 +0,0 @@
1
- export { default as Tab } from './Tab';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ sizes, palette, shadows, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "selected" | "horizontal" | "vertical" | "wrapper">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;mEAgDK,KAAK;AAA/D,wBA0DI"}
@@ -1,95 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- import { rem } from '@toptal/picasso-shared';
3
- import { PicassoProvider } from '@toptal/picasso-provider';
4
- PicassoProvider.override(({ breakpoints, palette }) => ({
5
- MuiTab: {
6
- root: {
7
- minHeight: 0,
8
- minWidth: 0,
9
- lineHeight: 1,
10
- textTransform: 'none',
11
- padding: `${rem('9px')} 0 ${rem('7px')}`,
12
- overflow: 'initial',
13
- [breakpoints.up('md')]: {
14
- padding: undefined,
15
- },
16
- color: palette.grey.dark,
17
- [breakpoints.up('md')]: {
18
- minWidth: 'auto',
19
- fontSize: '1rem',
20
- },
21
- },
22
- labelIcon: {
23
- minHeight: 0,
24
- paddingRight: '1.5rem',
25
- paddingTop: rem('9px'),
26
- '& $wrapper > *:first-child': {
27
- position: 'absolute',
28
- right: 0,
29
- marginBottom: 0,
30
- },
31
- },
32
- selected: {
33
- color: palette.common.black,
34
- },
35
- textColorInherit: {
36
- '&$disabled': {
37
- color: palette.grey.main,
38
- },
39
- },
40
- disabled: {},
41
- },
42
- }));
43
- export default ({ sizes, palette, shadows, transitions }) => createStyles({
44
- horizontal: {
45
- paddingTop: 0,
46
- '&:not(:last-child)': {
47
- marginRight: '2em',
48
- },
49
- },
50
- vertical: {
51
- width: '100%',
52
- borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
53
- margin: '0.25rem 0',
54
- overflow: 'hidden',
55
- padding: '0.5rem 1rem',
56
- transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
57
- textAlign: 'left',
58
- backgroundColor: palette.grey.lighter,
59
- opacity: 1,
60
- color: palette.grey.dark,
61
- '&:first-child': {
62
- marginTop: '1rem',
63
- },
64
- '&:last-child': {
65
- marginBottom: '1rem',
66
- },
67
- '&:hover': {
68
- color: palette.common.black,
69
- },
70
- '&:hover:not($selected)': {
71
- backgroundColor: palette.grey.lighter2,
72
- },
73
- '& $wrapper': {
74
- display: 'block',
75
- },
76
- },
77
- selected: {
78
- '&$vertical': {
79
- color: palette.common.black,
80
- boxShadow: shadows[1],
81
- backgroundColor: palette.grey.lightest,
82
- '&::before': {
83
- content: '""',
84
- background: palette.blue.main,
85
- position: 'absolute',
86
- left: 0,
87
- top: 0,
88
- bottom: 0,
89
- width: '3px',
90
- },
91
- },
92
- },
93
- wrapper: {},
94
- });
95
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tab/styles.ts"],"names":[],"mappings":"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"}
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- interface Props {
3
- children: string;
4
- disabled?: boolean;
5
- }
6
- declare const TabDescription: ({ children, disabled }: Props) => JSX.Element;
7
- export default TabDescription;
8
- //# sourceMappingURL=TabDescription.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabDescription.d.ts","sourceRoot":"","sources":["../../../src/TabDescription/TabDescription.tsx"],"names":[],"mappings":";AAGA,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,2BAA4B,KAAK,gBAapD,CAAA;AAED,eAAe,cAAc,CAAA"}
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { TypographyOverflow } from '@toptal/picasso-typography-overflow';
3
- const TabDescription = ({ children, disabled }) => {
4
- const color = disabled ? 'inherit' : undefined;
5
- return (React.createElement(TypographyOverflow, { className: 'mt-[2px]', size: 'xxsmall', inline: true, color: color }, children));
6
- };
7
- export default TabDescription;
8
- //# sourceMappingURL=TabDescription.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabDescription.js","sourceRoot":"","sources":["../../../src/TabDescription/TabDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AAOxE,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAS,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IAE9C,OAAO,CACL,oBAAC,kBAAkB,IACjB,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,SAAS,EACd,MAAM,QACN,KAAK,EAAE,KAAK,IAEX,QAAQ,CACU,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as TabDescription } from './TabDescription';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as TabDescription } from './TabDescription';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"}
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- interface Props {
3
- label?: React.ReactNode;
4
- orientation: 'horizontal' | 'vertical';
5
- titleCase?: boolean;
6
- }
7
- declare const TabLabel: ({ label, orientation, titleCase }: Props) => JSX.Element;
8
- export default TabLabel;
9
- //# sourceMappingURL=TabLabel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabLabel.d.ts","sourceRoot":"","sources":["../../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,QAAQ,sCAAuC,KAAK,gBA6BzD,CAAA;AAED,eAAe,QAAQ,CAAA"}
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { TypographyOverflow } from '@toptal/picasso-typography-overflow';
3
- import { Typography } from '@toptal/picasso-typography';
4
- const TabLabel = ({ label, orientation, titleCase }) => {
5
- if (orientation === 'horizontal') {
6
- return (React.createElement(Typography, { as: 'div', size: 'small', weight: 'semibold', color: 'inherit', titleCase: titleCase, className: 'leading-[1.1rem]' }, label));
7
- }
8
- return (React.createElement(TypographyOverflow, { as: 'div', color: 'inherit', inline: true, size: 'medium', variant: 'body', weight: 'semibold', titleCase: titleCase }, label));
9
- };
10
- export default TabLabel;
11
- //# sourceMappingURL=TabLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabLabel.js","sourceRoot":"","sources":["../../../src/TabLabel/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAQvD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAS,EAAE,EAAE;IAC5D,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,OAAO,CACL,oBAAC,UAAU,IACT,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,UAAU,EACjB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,kBAAkB,IAE3B,KAAK,CACK,CACd,CAAA;KACF;IAED,OAAO,CACL,oBAAC,kBAAkB,IACjB,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,SAAS,EACf,MAAM,QACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACa,CACtB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as TabLabel } from './TabLabel';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as TabLabel } from './TabLabel';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA"}
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import type { BaseProps } from '@toptal/picasso-shared';
3
- declare type DirectionType = 'left' | 'right';
4
- export interface Props extends BaseProps {
5
- /** The direction the button should indicate. */
6
- direction: DirectionType;
7
- /** If `true`, the component is disabled. */
8
- disabled?: boolean;
9
- }
10
- export declare const TabScrollButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
11
- export default TabScrollButton;
12
- //# sourceMappingURL=TabScrollButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabScrollButton.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/TabScrollButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,aAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAErC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,gDAAgD;IAChD,SAAS,EAAE,aAAa,CAAA;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,eAAe,8EAsC3B,CAAA;AAID,eAAe,eAAe,CAAA"}
@@ -1,30 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React, { forwardRef } from 'react';
13
- import { ButtonBase } from '@material-ui/core';
14
- import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons';
15
- import { Container } from '@toptal/picasso-container';
16
- import { twMerge } from '@toptal/picasso-tailwind-merge';
17
- export const TabScrollButton = forwardRef(function TabScrollButton(props, ref) {
18
- const { className, style, direction, disabled } = props, rest = __rest(props, ["className", "style", "direction", "disabled"]);
19
- if (disabled) {
20
- return null;
21
- }
22
- return (React.createElement(Container, Object.assign({}, rest, { ref: ref, className: twMerge('relative', className), style: style }),
23
- React.createElement(Container, { className: twMerge('absolute w-10 h-full z-10', direction === 'left'
24
- ? 'bg-gradient-to-r from-white via-white to-transparent'
25
- : 'bg-gradient-to-l from-white via-white to-transparent', direction === 'left' ? 'left-0' : 'right-0') },
26
- React.createElement(ButtonBase, { className: twMerge('absolute w-4 h-full', direction === 'left' ? 'left-0' : 'right-0'), "aria-label": `${direction} button`, "data-testid": `tab-scroll-button-${direction}` }, direction === 'left' ? React.createElement(BackMinor16, null) : React.createElement(ChevronMinor16, null)))));
27
- });
28
- TabScrollButton.displayName = 'TabScrollButton';
29
- export default TabScrollButton;
30
- //# sourceMappingURL=TabScrollButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabScrollButton.js","sourceRoot":"","sources":["../../../src/TabScrollButton/TabScrollButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1D,+CAAkD,CAAQ,CAAA;IAEhE,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,EACzC,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAChB,2BAA2B,EAC3B,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,sDAAsD;gBACxD,CAAC,CAAC,sDAAsD,EAC1D,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C;YAED,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAChB,qBAAqB,EACrB,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C,gBACW,GAAG,SAAS,SAAS,iBACpB,qBAAqB,SAAS,EAAE,IAE5C,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CACjD,CACH,CACF,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
@@ -1,5 +0,0 @@
1
- import type { OmitInternalProps } from '@toptal/picasso-shared';
2
- import type { Props } from './TabScrollButton';
3
- export { default as TabScrollButton } from './TabScrollButton';
4
- export declare type TabScrollButtonProps = OmitInternalProps<Props>;
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,oBAAY,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as TabScrollButton } from './TabScrollButton';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
@@ -1,23 +0,0 @@
1
- import type { ForwardedRef, ReactNode } from 'react';
2
- import React from 'react';
3
- import { Tabs as MUITabs } from '@material-ui/core';
4
- import type { BaseProps } from '@toptal/picasso-shared';
5
- export declare type TabsValueType = string | number | false;
6
- export interface Props<V extends TabsValueType> extends BaseProps {
7
- /** Tabs content containing Tab components */
8
- children: ReactNode;
9
- /** Callback fired when the value changes. */
10
- onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void;
11
- /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
12
- value: V;
13
- /** The tabs orientation (layout flow direction). */
14
- orientation?: 'horizontal' | 'vertical';
15
- /** Determines additional display behavior of the tabs */
16
- variant?: 'scrollable' | 'fullWidth';
17
- }
18
- export declare const TabsOrientationContext: React.Context<"horizontal" | "vertical">;
19
- export declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
20
- ref?: ForwardedRef<HTMLDivElement> | undefined;
21
- }) => ReturnType<typeof MUITabs>;
22
- export default Tabs;
23
- //# sourceMappingURL=Tabs.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,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,uHAAuH;IACvH,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;AAMD,eAAO,MAAM,sBAAsB,0CAEpB,CAAA;AAEf,eAAO,MAAM,IAAI;;MAsCZ,WAAW,cAAc,CAAC,CAAA;AAE/B,eAAe,IAAI,CAAA"}
@@ -1,30 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React, { forwardRef } from 'react';
13
- import { makeStyles } from '@material-ui/core/styles';
14
- import { Tabs as MUITabs } from '@material-ui/core';
15
- import { TabScrollButton } from '../TabScrollButton';
16
- import styles from './styles';
17
- import useTabAction from './use-tab-action';
18
- const useStyles = makeStyles(styles, {
19
- name: 'Tabs',
20
- });
21
- export const TabsOrientationContext = React.createContext('horizontal');
22
- export const Tabs = forwardRef((props, ref) => {
23
- const { children, orientation = 'horizontal', onChange, value, variant = 'scrollable' } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant"]);
24
- const classes = useStyles(props);
25
- const action = useTabAction();
26
- return (React.createElement(TabsOrientationContext.Provider, { value: orientation },
27
- React.createElement(MUITabs, Object.assign({}, rest, { classes: { root: classes[orientation] }, ref: ref, onChange: onChange, value: value, action: action, scrollButtons: 'auto', ScrollButtonComponent: TabScrollButton, orientation: orientation, variant: variant, "data-component-type": 'tabs' }), children)));
28
- });
29
- export default Tabs;
30
- //# sourceMappingURL=Tabs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,YAAY,MAAM,kBAAkB,CAAA;AAqB3C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,MAAM;CACb,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAEvD,YAAY,CAAC,CAAA;AAEf,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,KAAe,EACf,GAAoC,EACpC,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,KAEpB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,2DAOL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW;QACjD,oBAAC,OAAO,oBACF,IAAI,IACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,EACvC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,aAAa,EAAC,MAAM,EACpB,qBAAqB,EAAE,eAAe,EACtC,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,yBACI,MAAM,KAEzB,QAAQ,CACD,CACsB,CACnC,CAAA;AACH,CAAC,CAG4B,CAAA;AAE/B,eAAe,IAAI,CAAA"}
@@ -1,6 +0,0 @@
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';
6
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
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,2 +0,0 @@
1
- export { default as Tabs } from './Tabs';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCA6BxB,KAAK;AAAlC,wBAeI"}
@@ -1,41 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- import { PicassoProvider } from '@toptal/picasso-provider';
3
- PicassoProvider.override(({ palette }) => ({
4
- MuiTabs: {
5
- root: {
6
- position: 'relative',
7
- minHeight: 0,
8
- },
9
- vertical: {
10
- width: 200,
11
- margin: 0,
12
- '& $scroller': {
13
- // We need a bit of padding to allow active tab's shadow to be visible
14
- paddingLeft: '0.5em',
15
- },
16
- '& $indicator': {
17
- display: 'none',
18
- },
19
- },
20
- indicator: {
21
- backgroundColor: palette.blue.main,
22
- zIndex: 1,
23
- },
24
- },
25
- }));
26
- export default ({ palette }) => createStyles({
27
- horizontal: {
28
- '&::after': {
29
- position: 'absolute',
30
- content: '""',
31
- bottom: 0,
32
- left: 0,
33
- right: 0,
34
- height: 1,
35
- backgroundColor: palette.grey.main,
36
- zIndex: 0,
37
- },
38
- },
39
- vertical: {},
40
- });
41
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;SACb;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,aAAa,EAAE;gBACb,sEAAsE;gBACtE,WAAW,EAAE,OAAO;aACrB;YAED,cAAc,EAAE;gBACd,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;IACD,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}
@@ -1,5 +0,0 @@
1
- import type { Ref } from 'react';
2
- import type { TabsActions } from '@material-ui/core';
3
- declare const useTabAction: () => Ref<TabsActions>;
4
- export default useTabAction;
5
- //# sourceMappingURL=use-tab-action.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tab-action.d.ts","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAOpD,QAAA,MAAM,YAAY,QAAO,IAAI,WAAW,CAevC,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -1,21 +0,0 @@
1
- import { useEffect, useRef } from 'react';
2
- /*
3
- * MuiTabs break when the size of a tab changes without rendering with React.
4
- * This issue happens when the font is loaded after the initial render of the component.
5
- * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
6
- */
7
- const useTabAction = () => {
8
- const ref = useRef(null);
9
- useEffect(() => {
10
- const listener = () => {
11
- var _a, _b;
12
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.updateIndicator();
13
- (_b = ref.current) === null || _b === void 0 ? void 0 : _b.updateScrollButtons();
14
- };
15
- window.addEventListener('load', listener);
16
- return () => window.removeEventListener('load', listener);
17
- }, []);
18
- return ref;
19
- };
20
- export default useTabAction;
21
- //# sourceMappingURL=use-tab-action.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tab-action.js","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGzC;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAA,GAAG,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAA;YAC9B,MAAA,GAAG,CAAC,OAAO,0CAAE,mBAAmB,EAAE,CAAA;QACpC,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
3
- ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
4
- }) => JSX.Element) & {
5
- Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLDivElement>>;
6
- };
7
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;CAEvB,CAAA"}
@@ -1,6 +0,0 @@
1
- import { Tab } from '../Tab';
2
- import { Tabs } from '../Tabs';
3
- export const TabsCompound = Object.assign(Tabs, {
4
- Tab,
5
- });
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IAC9C,GAAG;CACJ,CAAC,CAAA"}
@@ -1,7 +0,0 @@
1
- export * from './TabScrollButton';
2
- export * from './Tabs';
3
- export * from './Tab';
4
- export * from './TabDescription';
5
- export * from './TabsCompound';
6
- export * from './TabLabel';
7
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
@@ -1,7 +0,0 @@
1
- export * from './TabScrollButton';
2
- export * from './Tabs';
3
- export * from './Tab';
4
- export * from './TabDescription';
5
- export * from './TabsCompound';
6
- export * from './TabLabel';
7
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}