@toptal/picasso-tabs 3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31 → 3.0.2-alpha-fx-null-revert-tabs-96315ad16.40

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 (9) hide show
  1. package/dist-package/src/Tabs/Tabs.d.ts +5 -2
  2. package/dist-package/src/Tabs/Tabs.d.ts.map +1 -1
  3. package/dist-package/src/Tabs/Tabs.js +1 -6
  4. package/dist-package/src/Tabs/Tabs.js.map +1 -1
  5. package/dist-package/src/TabsCompound/index.d.ts +3 -1
  6. package/dist-package/src/TabsCompound/index.d.ts.map +1 -1
  7. package/package.json +12 -12
  8. package/src/Tab/__snapshots__/test.tsx.snap +9 -9
  9. package/src/Tabs/Tabs.tsx +6 -10
package/dist-package/src/Tabs/Tabs.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import type { ReactNode } from 'react';
1
+ import type { ForwardedRef, ReactNode } from 'react';
2
2
  import React from 'react';
3
+ import { Tabs as MUITabs } from '@material-ui/core';
3
4
  import type { BaseProps } from '@toptal/picasso-shared';
4
5
  export declare type TabsValueType = string | number | null;
5
6
  export interface Props<V extends TabsValueType> extends BaseProps {
@@ -15,6 +16,8 @@ export interface Props<V extends TabsValueType> extends BaseProps {
15
16
  variant?: 'scrollable' | 'fullWidth';
16
17
  }
17
18
  export declare const TabsOrientationContext: React.Context<"horizontal" | "vertical">;
18
- export declare const Tabs: React.ForwardRefExoticComponent<Props<TabsValueType> & React.RefAttributes<HTMLButtonElement>>;
19
+ export declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
20
+ ref?: ForwardedRef<HTMLDivElement> | undefined;
21
+ }) => ReturnType<typeof MUITabs>;
19
22
  export default Tabs;
20
23
  //# sourceMappingURL=Tabs.d.ts.map
package/dist-package/src/Tabs/Tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,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,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;AAGf,eAAO,MAAM,IAAI,gGAmChB,CAAA;AAOD,eAAe,IAAI,CAAA"}
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,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,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;;MAqCZ,WAAW,cAAc,CAAC,CAAA;AAE/B,eAAe,IAAI,CAAA"}
package/dist-package/src/Tabs/Tabs.js CHANGED
@@ -19,17 +19,12 @@ const useStyles = makeStyles(styles, {
19
19
  name: 'Tabs',
20
20
  });
21
21
  export const TabsOrientationContext = React.createContext('horizontal');
22
- // eslint-disable-next-line react/display-name
23
22
  export const Tabs = forwardRef((props, ref) => {
24
- const { children, orientation, onChange, value, variant = 'scrollable' } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant"]);
23
+ const { children, orientation = 'horizontal', onChange, value, variant = 'scrollable' } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant"]);
25
24
  const classes = useStyles(props);
26
25
  const action = useTabAction();
27
26
  return (React.createElement(TabsOrientationContext.Provider, { value: orientation },
28
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 }), children)));
29
28
  });
30
- Tabs.displayName = 'Tabs';
31
- Tabs.defaultProps = {
32
- orientation: 'horizontal',
33
- };
34
29
  export default Tabs;
35
30
  //# sourceMappingURL=Tabs.js.map
package/dist-package/src/Tabs/Tabs.js.map CHANGED
@@ -1 +1 @@
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,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,KAAe,EACf,GAAoC,EACpC,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,WAAW,EACX,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,WAAY;QAClD,oBAAC,OAAO,oBACF,IAAI,IACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAY,CAAC,EAAE,EACxC,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,KAEf,QAAQ,CACD,CACsB,CACnC,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AACzB,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,YAAY;CAC1B,CAAA;AAED,eAAe,IAAI,CAAA"}
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,KAEf,QAAQ,CACD,CACsB,CACnC,CAAA;AACH,CAAC,CAG4B,CAAA;AAE/B,eAAe,IAAI,CAAA"}
package/dist-package/src/TabsCompound/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  /// <reference types="react" />
2
- export declare const TabsCompound: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props<import("../Tabs").TabsValueType> & import("react").RefAttributes<HTMLButtonElement>> & {
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) & {
3
5
  Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLDivElement>>;
4
6
  };
5
7
  //# sourceMappingURL=index.d.ts.map
package/dist-package/src/TabsCompound/index.d.ts.map CHANGED
@@ -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": "3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31+b3f67a2fa",
3
+ "version": "3.0.2-alpha-fx-null-revert-tabs-96315ad16.40+96315ad16",
4
4
  "description": "Toptal UI components library - Tabs",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -22,13 +22,13 @@
22
22
  },
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
- "@toptal/picasso-container": "2.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
26
- "@toptal/picasso-icons": "1.6.1-alpha-fx-null-revert-tabs-b3f67a2fa.31+b3f67a2fa",
27
- "@toptal/picasso-shared": "15.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.124+b3f67a2fa",
28
- "@toptal/picasso-typography": "3.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
29
- "@toptal/picasso-typography-overflow": "2.0.5-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
30
- "@toptal/picasso-user-badge": "3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31+b3f67a2fa",
31
- "@toptal/picasso-utils": "1.0.4-alpha-fx-null-revert-tabs-b3f67a2fa.124+b3f67a2fa",
25
+ "@toptal/picasso-container": "2.0.1-alpha-fx-null-revert-tabs-96315ad16.54+96315ad16",
26
+ "@toptal/picasso-icons": "1.6.1-alpha-fx-null-revert-tabs-96315ad16.40+96315ad16",
27
+ "@toptal/picasso-shared": "15.0.1-alpha-fx-null-revert-tabs-96315ad16.133+96315ad16",
28
+ "@toptal/picasso-typography": "3.0.1-alpha-fx-null-revert-tabs-96315ad16.54+96315ad16",
29
+ "@toptal/picasso-typography-overflow": "2.0.5-alpha-fx-null-revert-tabs-96315ad16.54+96315ad16",
30
+ "@toptal/picasso-user-badge": "3.0.2-alpha-fx-null-revert-tabs-96315ad16.40+96315ad16",
31
+ "@toptal/picasso-utils": "1.0.4-alpha-fx-null-revert-tabs-96315ad16.133+96315ad16",
32
32
  "ap-style-title-case": "^1.1.2",
33
33
  "classnames": "^2.5.1"
34
34
  },
@@ -46,14 +46,14 @@
46
46
  ".": "./dist-package/src/index.js"
47
47
  },
48
48
  "devDependencies": {
49
- "@toptal/picasso-provider": "5.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
50
- "@toptal/picasso-tailwind-merge": "1.2.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
51
- "@toptal/picasso-test-utils": "1.1.2-alpha-fx-null-revert-tabs-b3f67a2fa.124+b3f67a2fa"
49
+ "@toptal/picasso-provider": "5.0.1-alpha-fx-null-revert-tabs-96315ad16.54+96315ad16",
50
+ "@toptal/picasso-tailwind-merge": "1.2.1-alpha-fx-null-revert-tabs-96315ad16.54+96315ad16",
51
+ "@toptal/picasso-test-utils": "1.1.2-alpha-fx-null-revert-tabs-96315ad16.133+96315ad16"
52
52
  },
53
53
  "files": [
54
54
  "dist-package/**",
55
55
  "!dist-package/tsconfig.tsbuildinfo",
56
56
  "src"
57
57
  ],
58
- "gitHead": "b3f67a2fa9c785bf8251fbfdcfe27163597835d0"
58
+ "gitHead": "96315ad160eabd6ec2f07fd7c70fbc5f69c04016"
59
59
  }
package/src/Tab/__snapshots__/test.tsx.snap CHANGED
@@ -6,7 +6,7 @@ exports[`Tab Tab disabled tab 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- class="MuiTabs-root Tabs-horizontal"
9
+ class="MuiTabs-root"
10
10
  >
11
11
  <div
12
12
  class="MuiTabs-scrollable"
@@ -22,7 +22,7 @@ exports[`Tab Tab disabled tab 1`] = `
22
22
  >
23
23
  <button
24
24
  aria-selected="false"
25
- class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
25
+ class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-disabled Mui-disabled"
26
26
  disabled=""
27
27
  role="tab"
28
28
  tabindex="-1"
@@ -32,7 +32,7 @@ exports[`Tab Tab disabled tab 1`] = `
32
32
  class="MuiTab-wrapper PicassoTab-wrapper"
33
33
  >
34
34
  <div
35
- class="m-0 text-sm text-inherit font-semibold"
35
+ class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
36
36
  >
37
37
  Tab Label
38
38
  </div>
@@ -55,7 +55,7 @@ exports[`Tab Tab renders 1`] = `
55
55
  class="Picasso-root"
56
56
  >
57
57
  <div
58
- class="MuiTabs-root Tabs-horizontal"
58
+ class="MuiTabs-root"
59
59
  >
60
60
  <div
61
61
  class="MuiTabs-scrollable"
@@ -71,7 +71,7 @@ exports[`Tab Tab renders 1`] = `
71
71
  >
72
72
  <button
73
73
  aria-selected="false"
74
- class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
74
+ class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
75
75
  role="tab"
76
76
  tabindex="0"
77
77
  type="button"
@@ -80,7 +80,7 @@ exports[`Tab Tab renders 1`] = `
80
80
  class="MuiTab-wrapper PicassoTab-wrapper"
81
81
  >
82
82
  <div
83
- class="m-0 text-sm text-inherit font-semibold"
83
+ class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
84
84
  >
85
85
  Tab Label
86
86
  </div>
@@ -103,7 +103,7 @@ exports[`Tab Tab tab with icon 1`] = `
103
103
  class="Picasso-root"
104
104
  >
105
105
  <div
106
- class="MuiTabs-root Tabs-horizontal"
106
+ class="MuiTabs-root"
107
107
  >
108
108
  <div
109
109
  class="MuiTabs-scrollable"
@@ -119,7 +119,7 @@ exports[`Tab Tab tab with icon 1`] = `
119
119
  >
120
120
  <button
121
121
  aria-selected="false"
122
- class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
122
+ class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-labelIcon"
123
123
  role="tab"
124
124
  tabindex="0"
125
125
  type="button"
@@ -131,7 +131,7 @@ exports[`Tab Tab tab with icon 1`] = `
131
131
  id="Icon"
132
132
  />
133
133
  <div
134
- class="m-0 text-sm text-inherit font-semibold"
134
+ class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
135
135
  >
136
136
  Tab Label
137
137
  </div>
package/src/Tabs/Tabs.tsx CHANGED
@@ -36,7 +36,6 @@ export const TabsOrientationContext = React.createContext<
36
36
  'horizontal' | 'vertical'
37
37
  >('horizontal')
38
38
 
39
- // eslint-disable-next-line react/display-name
40
39
  export const Tabs = forwardRef(
41
40
  <V extends TabsValueType = TabsValueType>(
42
41
  props: Props<V>,
@@ -44,7 +43,7 @@ export const Tabs = forwardRef(
44
43
  ) => {
45
44
  const {
46
45
  children,
47
- orientation,
46
+ orientation = 'horizontal',
48
47
  onChange,
49
48
  value,
50
49
  variant = 'scrollable',
@@ -54,10 +53,10 @@ export const Tabs = forwardRef(
54
53
  const action = useTabAction()
55
54
 
56
55
  return (
57
- <TabsOrientationContext.Provider value={orientation!}>
56
+ <TabsOrientationContext.Provider value={orientation}>
58
57
  <MUITabs
59
58
  {...rest}
60
- classes={{ root: classes[orientation!] }}
59
+ classes={{ root: classes[orientation] }}
61
60
  ref={ref}
62
61
  onChange={onChange}
63
62
  value={value}
@@ -72,11 +71,8 @@ export const Tabs = forwardRef(
72
71
  </TabsOrientationContext.Provider>
73
72
  )
74
73
  }
75
- )
76
-
77
- Tabs.displayName = 'Tabs'
78
- Tabs.defaultProps = {
79
- orientation: 'horizontal',
80
- }
74
+ ) as <V extends TabsValueType = TabsValueType>(
75
+ props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
76
+ ) => ReturnType<typeof MUITabs>
81
77
 
82
78
  export default Tabs