@toptal/picasso-tabs 2.0.9-alpha-cjs-and-esm-publish-test-99555d2ed.1 → 3.0.0

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

@@ -5,23 +5,39 @@ exports[`Tab Tab disabled tab 1`] = `
   <div
     class="Picasso-root"
   >
-    <button
-      class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
-      disabled=""
-      role="tab"
-      tabindex="-1"
-      type="button"
+    <div
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
     >
-      <span
-        class="MuiTab-wrapper PicassoTab-wrapper"
+      <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"
       >
         <div
-          class="m-0 text-sm text-inherit font-semibold"
+          class="base-TabsList base-TabsList flex"
+          role="tablist"
+          tabindex="-1"
         >
-          Tab Label
+          <button
+            aria-disabled="true"
+            aria-selected="false"
+            class="base-Tab base- opacity-50 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 shrink-0 max-w text-gray pointer-events 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"
+            id=":r1:"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="w-full inline-flex items-center flex-col justify-center"
+            >
+              <div
+                class="m-0 text-sm text-inherit font-semibold"
+              >
+                Tab Label
+              </div>
+            </span>
+          </button>
         </div>
-      </span>
-    </button>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -31,22 +47,39 @@ exports[`Tab Tab renders 1`] = `
   <div
     class="Picasso-root"
   >
-    <button
-      class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
-      role="tab"
-      tabindex="0"
-      type="button"
+    <div
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
     >
-      <span
-        class="MuiTab-wrapper PicassoTab-wrapper"
+      <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"
       >
         <div
-          class="m-0 text-sm text-inherit font-semibold"
+          class="base-TabsList base-TabsList flex"
+          role="tablist"
+          tabindex="-1"
         >
-          Tab Label
+          <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"
+            id=":r0:"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="w-full inline-flex items-center flex-col justify-center"
+            >
+              <div
+                class="m-0 text-sm text-inherit font-semibold"
+              >
+                Tab Label
+              </div>
+            </span>
+          </button>
         </div>
-      </span>
-    </button>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -56,25 +89,46 @@ exports[`Tab Tab tab with icon 1`] = `
   <div
     class="Picasso-root"
   >
-    <button
-      class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
-      role="tab"
-      tabindex="0"
-      type="button"
+    <div
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
     >
-      <span
-        class="MuiTab-wrapper PicassoTab-wrapper"
+      <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"
       >
         <div
-          id="Icon"
-        />
-        <div
-          class="m-0 text-sm text-inherit font-semibold"
+          class="base-TabsList base-TabsList flex"
+          role="tablist"
+          tabindex="-1"
         >
-          Tab Label
+          <button
+            aria-disabled="false"
+            aria-selected="false"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-h pt-[0.5625rem] pr-6 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"
+            id=":r2:"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="w-full inline-flex items-center flex-col justify-center"
+            >
+              <div
+                class="m-0 text-sm text-inherit font-semibold"
+              >
+                Tab Label
+              </div>
+              <span
+                class="absolute right-0 mb-0 h-4"
+              >
+                <div
+                  id="Icon"
+                />
+              </span>
+            </span>
+          </button>
         </div>
-      </span>
-    </button>
+      </div>
+    </div>
   </div>
 </div>
 `;

package/src/Tab/story/CustomValue.example.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { Container, Tabs } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
-type Value = number | string | boolean
+type Value = number | string | null
 
 const Example = () => {
-  const [value, setValue] = React.useState<Value>(false)
+  const [value, setValue] = React.useState<Value>(0)
 
   const handleChange = (_: React.ChangeEvent<{}>, newValue: Value) => {
     setValue(newValue)

package/src/Tab/test.tsx

@@ -6,6 +6,7 @@ import type { PicassoConfig } from '@toptal/picasso-test-utils'
 
 import type { Props } from './Tab'
 import { Tab } from './Tab'
+import { Tabs } from '../Tabs'
 
 jest.mock('ap-style-title-case')
 
@@ -16,7 +17,14 @@ const renderTab = (
   const { label, disabled, icon, titleCase } = props
 
   return render(
-    <Tab label={label} disabled={disabled} icon={icon} titleCase={titleCase} />,
+    <Tabs value={null}>
+      <Tab
+        label={label}
+        disabled={disabled}
+        icon={icon}
+        titleCase={titleCase}
+      />
+    </Tabs>,
     undefined,
     picassoConfig
   )

package/src/TabLabel/TabLabel.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { TypographyOverflow } from '@toptal/picasso-typography-overflow'
 import { Typography } from '@toptal/picasso-typography'
-import { toTitleCase } from '@toptal/picasso-utils'
 
 interface Props {
   label?: React.ReactNode
@@ -12,8 +11,14 @@ interface Props {
 const TabLabel = ({ label, orientation, titleCase }: Props) => {
   if (orientation === 'horizontal') {
     return (
-      <Typography as='div' size='small' weight='semibold' color='inherit'>
-        {titleCase ? toTitleCase(label) : label}
+      <Typography
+        as='div'
+        size='small'
+        weight='semibold'
+        color='inherit'
+        titleCase={titleCase}
+      >
+        {label}
       </Typography>
     )
   }
@@ -26,8 +31,9 @@ const TabLabel = ({ label, orientation, titleCase }: Props) => {
       size='medium'
       variant='body'
       weight='semibold'
+      titleCase={titleCase}
     >
-      {titleCase ? toTitleCase(label) : label}
+      {label}
     </TypographyOverflow>
   )
 }

package/src/Tabs/Tabs.tsx

@@ -1,81 +1,134 @@
-import type { ReactNode } from 'react'
-import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import type { TabsProps } from '@material-ui/core'
-import { Tabs as MUITabs } from '@material-ui/core'
-import type { ButtonOrAnchorProps, BaseProps } from '@toptal/picasso-shared'
+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 { 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
 
-export interface Props
-  extends BaseProps,
-    Omit<ButtonOrAnchorProps, 'onChange'> {
+export interface Props<V extends TabsValueType> extends BaseProps {
   /** Tabs content containing Tab components */
   children: ReactNode
 
   /** Callback fired when the value changes. */
-  onChange?: (event: React.ChangeEvent<{}>, value: TabsProps['value']) => 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 false. */
-  value: TabsProps['value']
+  /**
+   * The value of the currently selected Tab.
+   * If you don't want any selected Tab, you can set this property to null.
+   */
+  value: V
 
   /** The tabs orientation (layout flow direction). */
   orientation?: 'horizontal' | 'vertical'
 
   /** Determines additional display behavior of the tabs */
-  variant?: Extract<TabsProps['variant'], 'scrollable' | 'fullWidth'>
+  variant?: 'scrollable' | 'fullWidth'
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'Tabs',
-})
+export const TabsContext = React.createContext<{
+  orientation: 'horizontal' | 'vertical'
+  variant: 'scrollable' | 'fullWidth'
+}>({ orientation: 'horizontal', variant: 'scrollable' })
 
-export const TabsOrientationContext = React.createContext<
-  'horizontal' | 'vertical'
->('horizontal')
+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',
+]
 
-// eslint-disable-next-line react/display-name
-export const Tabs = forwardRef<HTMLButtonElement, Props>(function Tabs(
-  props,
-  ref
-) {
-  const {
-    children,
-    orientation,
-    onChange,
-    value,
-    variant = 'scrollable',
-    ...rest
-  } = props
-  const classes = useStyles(props)
-  const action = useTabAction()
+const classesByOrientation = {
+  vertical: {
+    root: 'w-[200px] m-0 flex-col',
+    scroller: 'pl-2',
+  },
+  horizontal: {
+    root: '',
+    scroller: indicatorClasses,
+  },
+} as const
 
-  return (
-    <TabsOrientationContext.Provider value={orientation!}>
-      <MUITabs
-        {...rest}
-        classes={{ root: classes[orientation!] }}
-        ref={ref}
-        onChange={onChange}
-        value={value}
-        action={action}
-        scrollButtons='auto'
-        ScrollButtonComponent={TabScrollButton}
-        orientation={orientation}
-        variant={variant}
-      >
-        {children}
-      </MUITabs>
-    </TabsOrientationContext.Provider>
-  )
-})
+const classesByVariant = {
+  scrollable: {
+    root: 'overflow-x-auto',
+    scroller: '',
+  },
+  fullWidth: {
+    root: '',
+    scroller: 'w-full overflow-hidden',
+  },
+} as const
 
-Tabs.displayName = 'Tabs'
-Tabs.defaultProps = {
-  orientation: 'horizontal',
-}
+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}
+        >
+          <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