@toptal/picasso-tabs 2.0.3-alpha-feature-tailwind-w21-80062bcbc.49 → 2.0.3-alpha-feature-tailwind-w21-af158c5d2.51

package/dist-package/src/Tabs/Tabs.d.ts

@@ -1,12 +1,13 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
 import React from 'react';
+import { Tabs as MUITabs } from '@mui/base/Tabs';
 import type { BaseProps } from '@toptal/picasso-shared';
 export declare type TabsValueType = string | number | null;
 export interface Props<V extends TabsValueType> extends BaseProps {
     /** Tabs content containing Tab components */
     children: ReactNode;
     /** Callback fired when the value changes. */
-    onChange?: (event: React.SyntheticEvent | null, value: V) => void;
+    onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void;
     /**
      * The value of the currently selected Tab.
      * If you don't want any selected Tab, you can set this property to null.
@@ -21,6 +22,8 @@ export declare const TabsContext: React.Context<{
     orientation: 'horizontal' | 'vertical';
     variant: 'scrollable' | 'fullWidth';
 }>;
-export declare const Tabs: React.ForwardRefExoticComponent<Props<TabsValueType> & React.RefAttributes<HTMLDivElement>>;
+declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof MUITabs>;
 export default Tabs;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist-package/src/Tabs/Tabs.d.ts.map

@@ -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,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAEjE;;;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;AA+FxD,eAAO,MAAM,IAAI,6FAA4B,CAAA;AAI7C,eAAe,IAAI,CAAA"}
+{"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;AAClD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAEhD,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;AAmCxD,QAAA,MAAM,IAAI;;MAgEL,WAAW,cAAc,CAAC,CAAA;AAE/B,eAAe,IAAI,CAAA"}

package/dist-package/src/Tabs/Tabs.js

@@ -44,9 +44,8 @@ const classesByVariant = {
         scroller: 'w-full overflow-hidden',
     },
 };
-// eslint-disable-next-line react/display-name
-const TabsComponent = (props, ref) => {
-    const { children, orientation = 'horizontal', onChange, value, variant = 'scrollable', className } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant", "className"]);
+const Tabs = forwardRef((_a, ref) => {
+    var { children, orientation = 'horizontal', onChange, value, variant = 'scrollable', className } = _a, rest = __rest(_a, ["children", "orientation", "onChange", "value", "variant", "className"]);
     const contextValue = useMemo(() => ({
         orientation,
         variant,
@@ -58,11 +57,9 @@ const TabsComponent = (props, ref) => {
                     ref,
                     className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className),
                 },
-            }, onChange: (event, newValue) => onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue), value: value, orientation: orientation }),
+            }, onChange: onChange, value: value, orientation: orientation }),
             React.createElement("div", { className: twJoin(classesByVariant[variant].scroller, classesByOrientation[orientation].scroller, 'flex-auto inline-block relative whitespace-nowrap') },
                 React.createElement(TabsList, { className: twJoin('flex', isVertical && 'flex-col') }, children)))));
-};
-export const Tabs = forwardRef(TabsComponent);
-Tabs.displayName = 'Tabs';
+});
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/dist-package/src/Tabs/Tabs.js.map

@@ -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;CACO,CAAA;AAEV,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;CACO,CAAA;AAEV,8CAA8C;AAC9C,MAAM,aAAa,GAAG,CACpB,KAAe,EACf,GAAuC,EACvC,EAAE;IACF,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,IACR,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,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE,QAAa,CAAC,EAC/D,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,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;AAE7C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"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;CACO,CAAA;AAEV,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;CACO,CAAA;AAEV,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAQW,EACX,GAAiC,EACjC,EAAE;QAVF,EACE,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,EACtB,SAAS,OAEA,EADN,IAAI,cAPT,wEAQC,CADQ;IAIT,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,IACR,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,EACN,QAGS,EAEX,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,CAG4B,CAAA;AAE/B,eAAe,IAAI,CAAA"}

package/dist-package/src/TabsCompound/index.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const TabsCompound: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props<import("../Tabs").TabsValueType> & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
+    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
+}) => JSX.Element | null) & {
     Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/TabsCompound/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;CAEvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;CAEvB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "2.0.3-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+  "version": "2.0.3-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -23,13 +23,13 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
     "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
-    "@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
-    "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
-    "@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
-    "@toptal/picasso-typography-overflow": "2.0.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
-    "@toptal/picasso-user-badge": "2.0.3-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
-    "@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
+    "@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
+    "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
+    "@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
+    "@toptal/picasso-typography-overflow": "2.0.2-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
+    "@toptal/picasso-user-badge": "2.0.3-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
+    "@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1"
   },
@@ -47,14 +47,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-80062bcbc.57+80062bcbc",
-    "@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-80062bcbc.4268+80062bcbc",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc"
+    "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-af158c5d2.59+af158c5d2",
+    "@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-af158c5d2.4270+af158c5d2",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-af158c5d2.51+af158c5d2"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "80062bcbc46a12301eaa56445413e62f4a60a3fc"
+  "gitHead": "af158c5d25cf28b89b18f9569f2d4d4a192eb178"
 }

package/src/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, ForwardedRef } from 'react'
 import React, { forwardRef, useMemo } from 'react'
 import { Tabs as MUITabs } from '@mui/base/Tabs'
 import { TabsList } from '@mui/base/TabsList'
@@ -12,7 +12,7 @@ export interface Props<V extends TabsValueType> extends BaseProps {
   children: ReactNode
 
   /** Callback fired when the value changes. */
-  onChange?: (event: React.SyntheticEvent | null, value: V) => void
+  onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void
 
   /**
    * The value of the currently selected Tab.
@@ -65,68 +65,70 @@ const classesByVariant = {
   },
 } as const
 
-// eslint-disable-next-line react/display-name
-const TabsComponent = <V extends TabsValueType>(
-  props: Props<V>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) => {
-  const {
-    children,
-    orientation = 'horizontal',
-    onChange,
-    value,
-    variant = 'scrollable',
-    className,
-    ...rest
-  } = props
-
-  const contextValue = useMemo(
-    () => ({
-      orientation,
-      variant,
-    }),
-    [orientation, variant]
-  )
-
-  const isVertical = orientation === 'vertical'
-
-  return (
-    <TabsContext.Provider value={contextValue}>
-      <MUITabs
-        {...rest}
-        slotProps={{
-          root: {
-            ref,
-            className: twMerge(
-              'relative min-h-0 flex overflow-hidden',
-              classesByOrientation[orientation].root,
-              classesByVariant[variant].root,
-              className
-            ),
-          },
-        }}
-        onChange={(event, newValue) => onChange?.(event, newValue as V)}
-        value={value}
-        orientation={orientation}
-      >
-        <div
-          className={twJoin(
-            classesByVariant[variant].scroller,
-            classesByOrientation[orientation].scroller,
-            'flex-auto inline-block relative whitespace-nowrap'
-          )}
+const Tabs = forwardRef(
+  <V extends TabsValueType = TabsValueType>(
+    {
+      children,
+      orientation = 'horizontal',
+      onChange,
+      value,
+      variant = 'scrollable',
+      className,
+      ...rest
+    }: Props<V>,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const contextValue = useMemo(
+      () => ({
+        orientation,
+        variant,
+      }),
+      [orientation, variant]
+    )
+
+    const isVertical = orientation === 'vertical'
+
+    return (
+      <TabsContext.Provider value={contextValue}>
+        <MUITabs
+          {...rest}
+          slotProps={{
+            root: {
+              ref,
+              className: twMerge(
+                'relative min-h-0 flex overflow-hidden',
+                classesByOrientation[orientation].root,
+                classesByVariant[variant].root,
+                className
+              ),
+            },
+          }}
+          onChange={
+            onChange as (
+              event: React.ChangeEvent<{}> | null,
+              value: TabsValueType
+            ) => void
+          }
+          value={value}
+          orientation={orientation}
         >
-          <TabsList className={twJoin('flex', isVertical && 'flex-col')}>
-            {children}
-          </TabsList>
-        </div>
-      </MUITabs>
-    </TabsContext.Provider>
-  )
-}
-
-export const Tabs = forwardRef(TabsComponent)
-
-Tabs.displayName = 'Tabs'
+          <div
+            className={twJoin(
+              classesByVariant[variant].scroller,
+              classesByOrientation[orientation].scroller,
+              'flex-auto inline-block relative whitespace-nowrap'
+            )}
+          >
+            <TabsList className={twJoin('flex', isVertical && 'flex-col')}>
+              {children}
+            </TabsList>
+          </div>
+        </MUITabs>
+      </TabsContext.Provider>
+    )
+  }
+) as <V extends TabsValueType = TabsValueType>(
+  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
+) => ReturnType<typeof MUITabs>
 
 export default Tabs

package/src/Tabs/story/Default.example.tsx

@@ -5,7 +5,7 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

package/src/Tabs/story/FullWidth.example.tsx

@@ -8,7 +8,7 @@ const TAB_COUNT = 2
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

package/src/Tabs/story/ScrollButtons.example.tsx

@@ -8,7 +8,7 @@ const TAB_COUNT = 10
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

package/src/Tabs/story/Vertical.example.tsx

@@ -33,7 +33,7 @@ const TabsContent = ({ children }: { children: React.ReactNode }) => {
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }