@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-19babbfd6.8 → 5.0.15-alpha-ff-7-tabs-2a3da7cea.16

package/src/Tab/Tab.tsx

@@ -1,17 +1,15 @@
-import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
-import React, { forwardRef, useContext } from 'react'
-import type { TabProps } from '@mui/base/Tab'
-import { Tab as MUITab } from '@mui/base/Tab'
+import type { ReactNode, HTMLAttributes, ReactElement, Ref } from 'react'
+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 { TabsContext } from '../Tabs/Tabs'
+import { useTabsContext } from '../Tabs/TabsContext'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
-export interface Props
+export interface TabProps<T = number>
   extends BaseProps,
     TextLabelProps,
     Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
@@ -21,8 +19,8 @@ export interface Props
    */
   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?: T
 
   /** The label element */
   label?: ReactNode
@@ -35,12 +33,6 @@ export interface Props
 
   /** Description */
   description?: string
-
-  // Properties below are managed by Tabs component
-
-  selected?: boolean
-  onChange?: TabProps['onChange']
-  onClick?: TabProps['onClick']
 }
 
 const getOpacityClass = (
@@ -51,7 +43,6 @@ const getOpacityClass = (
   if (disabled) {
     return 'opacity-50'
   }
-
   if (selected || orientation === 'vertical') {
     return 'opacity-100 '
   }
@@ -60,13 +51,13 @@ const getOpacityClass = (
 }
 
 const wrapperClassesByOrientation = {
-  horizontal: 'inline-flex items-center flex-col justify-center',
+  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.5625rem] pb-[0.4375rem] px-0',
+    '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]',
@@ -96,96 +87,6 @@ const classesByVariant = {
   fullWidth: 'shrink flex-grow basis-0',
 }
 
-export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
-  props,
-  ref
-) {
-  const {
-    disabled,
-    value,
-    label,
-    icon,
-    onChange,
-    onClick,
-    titleCase: propsTitleCase,
-    description,
-    avatar,
-    className,
-    ...rest
-  } = props
-  const titleCase = useTitleCase(propsTitleCase)
-  const { orientation, variant } = useContext(TabsContext)
-  const isHorizontal = orientation === 'horizontal'
-
-  const renderLabel = getLabelComponent({
-    avatar,
-    description,
-    disabled,
-    label,
-    orientation,
-    titleCase,
-  })
-
-  return (
-    <MUITab
-      className=''
-      {...rest}
-      ref={ref}
-      tabIndex={0}
-      disabled={disabled}
-      value={value}
-      onChange={onChange}
-      onClick={onClick}
-      slotProps={{
-        root: ownerState => {
-          return {
-            className: twMerge(
-              getOpacityClass(
-                ownerState.selected,
-                ownerState.disabled,
-                orientation
-              ),
-              rootClassesByOrientation(ownerState.selected)[orientation],
-              classesByVariant[variant],
-              ownerState.disabled
-                ? 'cursor-default text-gray-500'
-                : 'cursor-pointer',
-              ownerState.disabled && 'pointer-events-none',
-              icon && isHorizontal && 'min-h-0 pt-[0.5625rem] 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
-            ),
-          }
-        },
-      }}
-    >
-      <span
-        className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
-      >
-        {renderLabel}
-        {icon && <span className='absolute right-0 mb-0 h-4'>{icon}</span>}
-      </span>
-    </MUITab>
-  )
-})
-
-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,
@@ -193,14 +94,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} />
   )
@@ -208,7 +114,6 @@ const getLabelComponent = ({
   if (isHorizontal || isCustomLabel) {
     return <Label />
   }
-
   if (typeof avatar === 'undefined') {
     return (
       <>
@@ -229,4 +134,91 @@ const getLabelComponent = ({
   )
 }
 
+// eslint-disable-next-line func-style
+function TabInner<T = number>(props: TabProps<T>, ref: Ref<HTMLButtonElement>) {
+  const {
+    disabled,
+    value,
+    label,
+    icon,
+    titleCase: propsTitleCase,
+    description,
+    avatar,
+    className,
+    onClick,
+    ...rest
+  } = props
+  const titleCase = useTitleCase(propsTitleCase)
+  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 T)
+    }
+    onClick?.(event)
+  }
+
+  const renderLabel = getLabelComponent({
+    avatar,
+    description,
+    disabled,
+    label,
+    orientation,
+    titleCase,
+  })
+
+  return (
+    <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={disabled ? -1 : 0}
+      disabled={disabled}
+      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 top-0 right-0 mb-0 flex items-center'>
+            {icon}
+          </span>
+        )}
+      </span>
+    </button>
+  )
+}
+
+TabInner.displayName = 'Tab'
+
+export const Tab = forwardRef(TabInner) as <T = number>(
+  props: TabProps<T> & { ref?: Ref<HTMLButtonElement> }
+) => ReactElement | null
+
 export default Tab

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 top-0 right-0 mb-0 flex items-center"
+              >
+                <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/index.ts

@@ -1,6 +1 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared'
-
-import type { Props } from './Tab'
-
-export { default as Tab } from './Tab'
-export type TabProps = OmitInternalProps<Props>
+export { default as Tab, type TabProps } from './Tab'

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 | null
+type Value = 'jobs' | 'engagements' | 'interviews'
 
 const Example = () => {
-  const [value, setValue] = React.useState<Value>(0)
+  const [value, setValue] = React.useState<Value>('engagements')
 
   const handleChange = (_: React.ChangeEvent<{}>, newValue: Value) => {
     setValue(newValue)

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

@@ -4,7 +4,7 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 import { Exclamation16 } from '@toptal/picasso-icons'
 
 const Example = () => {
-  const [value, setValue] = React.useState(0)
+  const [value, setValue] = React.useState<number>(0)
 
   const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue)
@@ -17,9 +17,9 @@ const Example = () => {
           label='Label'
           icon={
             <Tooltip content='Some content...' placement='top'>
-              <span>
+              <div>
                 <Exclamation16 color='red' />
-              </span>
+              </div>
             </Tooltip>
           }
         />