@toptal/picasso-tabs 3.0.2-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.32 → 3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31

package/src/Tabs/Tabs.tsx

@@ -1,9 +1,13 @@
-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'
+import type { ForwardedRef, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import { Tabs as MUITabs } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
-import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { TabScrollButton } from '../TabScrollButton'
+import styles from './styles'
+import useTabAction from './use-tab-action'
 
 export type TabsValueType = string | number | null
 
@@ -14,10 +18,7 @@ export interface Props<V extends TabsValueType> extends BaseProps {
   /** Callback fired when the value changes. */
   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.
-   */
+  /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
   value: V
 
   /** The tabs orientation (layout flow direction). */
@@ -27,108 +28,55 @@ export interface Props<V extends TabsValueType> extends BaseProps {
   variant?: 'scrollable' | 'fullWidth'
 }
 
-export const TabsContext = React.createContext<{
-  orientation: 'horizontal' | 'vertical'
-  variant: 'scrollable' | 'fullWidth'
-}>({ orientation: 'horizontal', variant: 'scrollable' })
-
-const indicatorClasses = [
-  'after:absolute',
-  'after:content-[""]',
-  'after:bottom-0',
-  'after:left-0',
-  'after:right-0',
-  'after:h-[1px]',
-  'after:bg-gray-500',
-  'after:z-0',
-]
-
-const classesByOrientation = {
-  vertical: {
-    root: 'w-[200px] m-0 flex-col',
-    scroller: 'pl-2',
-  },
-  horizontal: {
-    root: '',
-    scroller: indicatorClasses,
-  },
-} as const
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'Tabs',
+})
 
-const classesByVariant = {
-  scrollable: {
-    root: 'overflow-x-auto',
-    scroller: '',
-  },
-  fullWidth: {
-    root: '',
-    scroller: 'w-full overflow-hidden',
-  },
-} as const
+export const TabsOrientationContext = React.createContext<
+  'horizontal' | 'vertical'
+>('horizontal')
 
-const Tabs = forwardRef(
+// eslint-disable-next-line react/display-name
+export const Tabs = forwardRef(
   <V extends TabsValueType = TabsValueType>(
-    {
+    props: Props<V>,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    const {
       children,
-      orientation = 'horizontal',
+      orientation,
       onChange,
       value,
       variant = 'scrollable',
-      className,
       ...rest
-    }: Props<V>,
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    const contextValue = useMemo(
-      () => ({
-        orientation,
-        variant,
-      }),
-      [orientation, variant]
-    )
-
-    const isVertical = orientation === 'vertical'
+    } = props
+    const classes = useStyles(props)
+    const action = useTabAction()
 
     return (
-      <TabsContext.Provider value={contextValue}>
+      <TabsOrientationContext.Provider value={orientation!}>
         <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
-          }
+          classes={{ root: classes[orientation!] }}
+          ref={ref}
+          onChange={onChange}
           value={value}
+          action={action}
+          scrollButtons='auto'
+          ScrollButtonComponent={TabScrollButton}
           orientation={orientation}
+          variant={variant}
         >
-          <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>
+          {children}
         </MUITabs>
-      </TabsContext.Provider>
+      </TabsOrientationContext.Provider>
     )
   }
-) as <V extends TabsValueType = TabsValueType>(
-  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
-) => ReturnType<typeof MUITabs>
+)
+
+Tabs.displayName = 'Tabs'
+Tabs.defaultProps = {
+  orientation: 'horizontal',
+}
 
 export default Tabs

package/src/Tabs/__snapshots__/test.tsx.snap

@@ -6,28 +6,30 @@ exports[`Tabs renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-1"
-            id=":r0:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -37,17 +39,15 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-2"
-            id=":r1:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -57,6 +57,10 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -69,28 +73,26 @@ exports[`Tabs renders in full width 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="w-full overflow-hidden after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scroller MuiTabs-fixed"
+        style="overflow: hidden;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
             data-testid="tab-1"
-            id=":re:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -100,17 +102,15 @@ exports[`Tabs renders in full width 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
             data-testid="tab-2"
-            id=":rf:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -120,6 +120,10 @@ exports[`Tabs renders in full width 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -132,29 +136,30 @@ exports[`Tabs renders in vertical orientation 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
+      class="MuiTabs-root Tabs-vertical MuiTabs-vertical"
     >
       <div
-        class="pl-2 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          aria-orientation="vertical"
-          class="base-TabsList base-TabsList flex flex-col"
+          class="MuiTabs-flexContainer MuiTabs-flexContainerVertical"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
             data-testid="tab-1"
-            id=":r2:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full block"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
@@ -164,17 +169,15 @@ exports[`Tabs renders in vertical orientation 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
             data-testid="tab-2"
-            id=":r3:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full block"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
@@ -184,6 +187,10 @@ exports[`Tabs renders in vertical orientation 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator PrivateTabIndicator-vertical"
+          style="top: 0px; height: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -196,28 +203,30 @@ exports[`Tabs renders with a pre-selected option 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-1"
-            id=":r4:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -227,17 +236,15 @@ exports[`Tabs renders with a pre-selected option 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="true"
-            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
             data-testid="tab-2"
-            id=":r5:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -247,6 +254,10 @@ exports[`Tabs renders with a pre-selected option 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
     <div
@@ -266,28 +277,30 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="true"
-            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
             data-testid="tab-1"
-            id=":r6:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -297,17 +310,15 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
             </span>
           </button>
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             data-testid="tab-2"
-            id=":r7:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -317,6 +328,10 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
     <div

package/src/Tabs/styles.ts

@@ -0,0 +1,45 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+PicassoProvider.override(({ palette }: Theme) => ({
+  MuiTabs: {
+    root: {
+      position: 'relative',
+      minHeight: 0,
+    },
+    vertical: {
+      width: 200,
+      margin: 0,
+      '& $scroller': {
+        // We need a bit of padding to allow active tab's shadow to be visible
+        paddingLeft: '0.5em',
+      },
+
+      '& $indicator': {
+        display: 'none',
+      },
+    },
+    indicator: {
+      backgroundColor: palette.blue.main,
+      zIndex: 1,
+    },
+  },
+}))
+
+export default ({ palette }: Theme) =>
+  createStyles({
+    horizontal: {
+      '&::after': {
+        position: 'absolute',
+        content: '""',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 1,
+        backgroundColor: palette.grey.main,
+        zIndex: 0,
+      },
+    },
+    vertical: {},
+  })

package/src/Tabs/test.tsx

@@ -116,7 +116,7 @@ describe('Tabs', () => {
     const { getByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: 0,
+        value: 1,
         onChange,
       }
     )

package/src/Tabs/use-tab-action.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react'
+import { useEffect, useRef } from 'react'
+import type { TabsActions } from '@material-ui/core'
+
+/*
+ * MuiTabs break when the size of a tab changes without rendering with React.
+ * This issue happens when the font is loaded after the initial render of the component.
+ * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
+ */
+const useTabAction = (): Ref<TabsActions> => {
+  const ref = useRef<TabsActions>(null)
+
+  useEffect(() => {
+    const listener = () => {
+      ref.current?.updateIndicator()
+      ref.current?.updateScrollButtons()
+    }
+
+    window.addEventListener('load', listener)
+
+    return () => window.removeEventListener('load', listener)
+  }, [])
+
+  return ref
+}
+
+export default useTabAction

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './TabScrollButton'
 export * from './Tabs'
 export * from './Tab'
 export * from './TabDescription'