@toptal/picasso-tabs 5.0.15-alpha-allow-to-pass-class-names-in-modal-package-7c2827b69.2 → 5.0.15-alpha-ff-7-tabs-17eb872bb.13

package/src/Tab/Tab.tsx

@@ -1,30 +1,26 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
-import React, { forwardRef, useContext } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import type { TabProps } from '@material-ui/core'
-import { Tab as MUITab } from '@material-ui/core'
+import React, { forwardRef } from 'react'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
 import { UserBadge } from '@toptal/picasso-user-badge'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
-import { TabsOrientationContext } from '../Tabs/Tabs'
+import { useTabsContext, type TabsValueType } from '../Tabs/TabsContext'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
 export interface Props
   extends BaseProps,
     TextLabelProps,
-    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
   /**
    * If true, the tab will be disabled
    * @default false
    */
   disabled?: boolean
 
-  /** You can provide your own value. Otherwise, we fallback to the child position index */
-  value?: TabProps['value']
+  /** The value of the tab */
+  value?: TabsValueType
 
   /** The label element */
   label?: ReactNode
@@ -40,32 +36,97 @@ export interface Props
 
   // Properties below are managed by Tabs component
 
-  selected?: boolean
-  onChange?: TabProps['onChange']
-  onClick?: TabProps['onClick']
+  // selected?: boolean
+  // onChange?: TabProps['onChange']
+  // onClick?: TabProps['onClick']
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTab' })
+const getOpacityClass = (
+  selected: boolean,
+  disabled: boolean,
+  orientation: 'horizontal' | 'vertical'
+) => {
+  if (disabled) {
+    return 'opacity-50'
+  }
+  if (selected || orientation === 'vertical') {
+    return 'opacity-100 '
+  }
+
+  return 'opacity-70'
+}
+
+const wrapperClassesByOrientation = {
+  horizontal: 'inline-flex flex-row items-center justify-center',
+  vertical: 'block',
+}
+
+const rootClassesByOrientation = (selected: boolean) => ({
+  horizontal: [
+    'm-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0',
+    'text-center bg-transparent transition-shadow z-10 rounded-none',
+    'text-black',
+    selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
+  ],
+  vertical: [
+    ' first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
+    'text-left rounded-l-sm rounded-r-none transition-all',
+    'w-full overflow-hidden',
+    selected && 'shadow-1',
+    selected && [
+      'before:absolute',
+      'before:content-[""]',
+      'before:bottom-0',
+      'before:left-0',
+      'before:top-0',
+      'before:w-[3px]',
+      'before:bg-blue-500',
+    ],
+    selected
+      ? 'bg-gray-50 text-black'
+      : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
+  ],
+})
+
+const classesByVariant = {
+  scrollable: 'shrink-0 max-w-[264px]',
+  fullWidth: 'shrink flex-grow basis-0',
+}
 
-export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
+export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
+  props,
+  ref
+) {
   const {
     disabled,
     value,
     label,
     icon,
-    selected,
-    onChange,
-    onClick,
     titleCase: propsTitleCase,
     description,
     avatar,
+    className,
+    onClick,
     ...rest
   } = props
-  const classes = useStyles()
   const titleCase = useTitleCase(propsTitleCase)
-  const orientation = useContext(TabsOrientationContext)
+  const {
+    value: selectedValue,
+    onChange,
+    orientation,
+    variant,
+  } = useTabsContext()
+  const isHorizontal = orientation === 'horizontal'
+  const selected = value === selectedValue
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!disabled && onChange) {
+      onChange(event, value as TabsValueType)
+    }
+    onClick?.(event)
+  }
 
-  const labelComponent = getLabelComponent({
+  const renderLabel = getLabelComponent({
     avatar,
     description,
     disabled,
@@ -75,39 +136,44 @@ export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
   })
 
   return (
-    <MUITab
-      className=''
-      {...rest}
+    <button
+      className={twMerge(
+        getOpacityClass(selected, !!disabled, orientation),
+        rootClassesByOrientation(selected)[orientation],
+        classesByVariant[variant],
+        disabled ? 'cursor-default text-gray-500' : 'cursor-pointer',
+        disabled && 'pointer-events-none',
+        icon && isHorizontal && 'min-h-0 pt-0 pr-6',
+        'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
+        'border-0 cursor-pointer inline-flex outline-none',
+        'items-center select-none align-middle appearance-none',
+        'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
+        'normal-case whitespace-normal leading-4',
+        'relative ',
+        className
+      )}
       ref={ref}
-      tabIndex={0}
+      tabIndex={disabled ? -1 : 0}
       disabled={disabled}
-      label={labelComponent}
-      icon={icon}
-      value={value}
-      selected={selected}
-      onChange={onChange}
-      onClick={onClick}
-      classes={{
-        root: classes[orientation],
-        selected: classes.selected,
-        wrapper: classes.wrapper,
-      }}
-    />
+      onClick={handleClick}
+      role='tab'
+      aria-selected={selected}
+      aria-disabled={disabled}
+      type='button'
+      {...rest}
+    >
+      <span
+        className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
+      >
+        {renderLabel}
+        {icon && <span className='absolute right-0 mb-0'>{icon}</span>}
+      </span>
+    </button>
   )
 })
 
-Tab.defaultProps = {}
-
 Tab.displayName = 'Tab'
 
-type GetLabelComponentProps = {
-  avatar?: string | null
-  description?: string
-  disabled?: boolean
-  label?: React.ReactNode
-  orientation: 'horizontal' | 'vertical'
-  titleCase?: boolean
-}
 const getLabelComponent = ({
   avatar,
   description,
@@ -115,14 +181,19 @@ const getLabelComponent = ({
   label,
   orientation,
   titleCase,
-}: GetLabelComponentProps): React.ReactNode => {
+}: {
+  avatar?: string | null
+  description?: string
+  disabled?: boolean
+  label?: React.ReactNode
+  orientation: 'horizontal' | 'vertical'
+  titleCase?: boolean
+}): React.ReactNode => {
   if (!label) {
     return null
   }
-
   const isHorizontal = orientation === 'horizontal'
   const isCustomLabel = typeof label !== 'string'
-
   const Label = () => (
     <TabLabel titleCase={titleCase} label={label} orientation={orientation} />
   )
@@ -130,7 +201,6 @@ const getLabelComponent = ({
   if (isHorizontal || isCustomLabel) {
     return <Label />
   }
-
   if (typeof avatar === 'undefined') {
     return (
       <>

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

@@ -6,31 +6,29 @@ exports[`Tab Tab disabled tab 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        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="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="true"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
+            class="opacity-50 m-0 [&:not(:last-child)]:mr-8 pt-0 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"
             disabled=""
             role="tab"
             tabindex="-1"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -40,10 +38,6 @@ exports[`Tab Tab disabled tab 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -56,30 +50,27 @@ exports[`Tab Tab renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        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="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none 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"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -89,10 +80,6 @@ exports[`Tab Tab renders 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -105,46 +92,43 @@ exports[`Tab Tab tab with icon 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        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="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
+            class="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-black shrink-0 max-w min-h pt-0 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"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
-              <div
-                id="Icon"
-              />
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
               >
                 Tab Label
               </div>
+              <span
+                class="absolute right-0 mb-0"
+              >
+                <div
+                  id="Icon"
+                />
+              </span>
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>

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

@@ -3,10 +3,12 @@ import { Container, Tabs, Tooltip, Badge } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 import { Exclamation16 } from '@toptal/picasso-icons'
 
+import type { TabsValueType } from '../../Tabs/TabsContext'
+
 const Example = () => {
-  const [value, setValue] = React.useState(0)
+  const [value, setValue] = React.useState<TabsValueType>(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
     setValue(newValue)
   }
 
@@ -24,7 +26,10 @@ const Example = () => {
           }
         />
         <Tabs.Tab label='Label' />
-        <Tabs.Tab label='Label' icon={<Badge content={10} variant='white' />} />
+        <Tabs.Tab
+          label='Label'
+          icon={<Badge content={10} variant='white' className='mt-[1px]' />}
+        />
       </Tabs>
 
       {value === 0 && (

package/src/Tabs/Tabs.tsx

@@ -1,24 +1,21 @@
-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 { ReactNode, ChangeEvent } from 'react'
+import React, { forwardRef, useMemo, useCallback } from 'react'
 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 | false
+import { TabsContext, type TabsValueType } from './TabsContext'
 
 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<{}> | null, value: V) => void
+  onChange?: (event: ChangeEvent<{}>, 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. */
+  /**
+   * 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). */
@@ -26,54 +23,140 @@ export interface Props<V extends TabsValueType> extends BaseProps {
 
   /** Determines additional display behavior of the tabs */
   variant?: 'scrollable' | 'fullWidth'
+
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: V
+
+  /** The direction of the text. */
+  direction?: 'ltr' | 'rtl'
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'Tabs',
-})
+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,
+  },
+}
 
-export const TabsOrientationContext = React.createContext<
-  'horizontal' | 'vertical'
->('horizontal')
+const classesByVariant = {
+  scrollable: {
+    root: 'overflow-x-auto',
+    scroller: '',
+  },
+  fullWidth: {
+    root: '',
+    scroller: 'w-full overflow-hidden',
+  },
+}
 
-export const Tabs = forwardRef(
-  <V extends TabsValueType = TabsValueType>(
-    props: Props<V>,
-    ref: ForwardedRef<HTMLButtonElement>
-  ) => {
+export const Tabs = forwardRef<HTMLDivElement, Props<TabsValueType>>(
+  function Tabs(props, ref) {
     const {
       children,
       orientation = 'horizontal',
       onChange,
-      value,
+      value: valueProp,
+      defaultValue,
       variant = 'scrollable',
+      direction = 'ltr',
+      className,
       ...rest
     } = props
-    const classes = useStyles(props)
-    const action = useTabAction()
+
+    const [value, setValue] = React.useState<TabsValueType>(
+      defaultValue ?? null
+    )
+    const isControlled = valueProp !== undefined
+    const currentValue = isControlled ? valueProp : value
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<{}>, newValue: TabsValueType) => {
+        if (!isControlled) {
+          setValue(newValue)
+        }
+        onChange?.(event, newValue as TabsValueType)
+      },
+      [isControlled, onChange]
+    )
+
+    const contextValue = useMemo(
+      () => ({
+        value: currentValue,
+        onChange: handleChange,
+        orientation,
+        variant,
+        direction,
+      }),
+      [currentValue, handleChange, orientation, variant, direction]
+    )
+
+    const isVertical = orientation === 'vertical'
+
+    const childrenWithIndex = React.Children.map(children, (child, idx) => {
+      if (
+        React.isValidElement(child) &&
+        // @ts-expect-error: type check for Picasso Tab
+        (child.type.displayName === 'Tab' || child.type.name === 'Tab') &&
+        child.props.value === undefined
+      ) {
+        return React.cloneElement(child as React.ReactElement<any>, {
+          value: idx,
+        })
+      }
+
+      return child
+    })
 
     return (
-      <TabsOrientationContext.Provider value={orientation}>
-        <MUITabs
+      <TabsContext.Provider value={contextValue}>
+        <div
           {...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'
+          className={twMerge(
+            'relative min-h-0 flex overflow-hidden',
+            classesByOrientation[orientation].root,
+            classesByVariant[variant].root,
+            className
+          )}
+          aria-orientation={orientation}
         >
-          {children}
-        </MUITabs>
-      </TabsOrientationContext.Provider>
+          <div
+            className={twJoin(
+              classesByVariant[variant].scroller,
+              classesByOrientation[orientation].scroller,
+              'flex-auto inline-block relative whitespace-nowrap'
+            )}
+          >
+            <div
+              className={twJoin('flex', isVertical && 'flex-col')}
+              role='tablist'
+              tabIndex={-1}
+            >
+              {childrenWithIndex}
+            </div>
+          </div>
+        </div>
+      </TabsContext.Provider>
     )
   }
-) as <V extends TabsValueType = TabsValueType>(
-  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
-) => ReturnType<typeof MUITabs>
+)
+
+Tabs.displayName = 'Tabs'
 
 export default Tabs

package/src/Tabs/TabsContext.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+export type TabsValueType = string | number | null
+
+export interface TabsContextValue {
+  value: TabsValueType
+  onChange: (event: React.ChangeEvent<{}>, value: TabsValueType) => void
+  orientation: 'horizontal' | 'vertical'
+  variant: 'scrollable' | 'fullWidth'
+}
+
+export const TabsContext = React.createContext<TabsContextValue>({
+  value: null,
+  onChange: () => {},
+  orientation: 'horizontal',
+  variant: 'scrollable',
+})
+
+export const useTabsContext = () => {
+  const context = React.useContext(TabsContext)
+
+  if (!context) {
+    throw new Error('useTabsContext must be used within a TabsProvider')
+  }
+
+  return context
+}