@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-2a3da7cea.16 → 5.0.15-alpha-bill-root-ref-context-42c3d2541.6

package/src/Tab/styles.ts

@@ -0,0 +1,107 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+import { rem } from '@toptal/picasso-shared'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+PicassoProvider.override(({ breakpoints, palette }: Theme) => ({
+  MuiTab: {
+    root: {
+      minHeight: 0,
+      minWidth: 0,
+      lineHeight: 1,
+      textTransform: 'none',
+      padding: `${rem('9px')} 0 ${rem('7px')}`,
+      overflow: 'initial',
+
+      [breakpoints.up('md')]: {
+        padding: undefined,
+      },
+
+      color: palette.grey.dark,
+
+      [breakpoints.up('md')]: {
+        minWidth: 'auto',
+        fontSize: '1rem',
+      },
+    },
+    labelIcon: {
+      minHeight: 0,
+      paddingRight: '1.5rem',
+      paddingTop: rem('9px'),
+      '& $wrapper > *:first-child': {
+        position: 'absolute',
+        right: 0,
+        marginBottom: 0,
+      },
+    },
+    selected: {
+      color: palette.common.black,
+    },
+    textColorInherit: {
+      '&$disabled': {
+        color: palette.grey.main,
+      },
+    },
+    disabled: {},
+  },
+}))
+
+export default ({ sizes, palette, shadows, transitions }: Theme) =>
+  createStyles({
+    horizontal: {
+      paddingTop: 0,
+      '&:not(:last-child)': {
+        marginRight: '2em',
+      },
+    },
+    vertical: {
+      width: '100%',
+      borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
+      margin: '0.25rem 0',
+      overflow: 'hidden',
+      padding: '0.5rem 1rem',
+      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
+      textAlign: 'left',
+      backgroundColor: palette.grey.lighter,
+      opacity: 1,
+      color: palette.grey.dark,
+
+      '&:first-child': {
+        marginTop: '1rem',
+      },
+
+      '&:last-child': {
+        marginBottom: '1rem',
+      },
+
+      '&:hover': {
+        color: palette.common.black,
+      },
+
+      '&:hover:not($selected)': {
+        backgroundColor: palette.grey.lighter2,
+      },
+
+      '& $wrapper': {
+        display: 'block',
+      },
+    },
+    selected: {
+      '&$vertical': {
+        color: palette.common.black,
+        boxShadow: shadows[1],
+        backgroundColor: palette.grey.lightest,
+
+        '&::before': {
+          content: '""',
+          background: palette.blue.main,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '3px',
+        },
+      },
+    },
+    wrapper: {},
+  })

package/src/TabScrollButton/TabScrollButton.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react'
+import { ButtonBase } from '@material-ui/core'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
+import { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+type DirectionType = 'left' | 'right'
+
+export interface Props extends BaseProps {
+  /** The direction the button should indicate. */
+  direction: DirectionType
+  /** If `true`, the component is disabled. */
+  disabled?: boolean
+}
+
+export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
+  function TabScrollButton(props, ref) {
+    const { className, style, direction, disabled, ...rest } = props
+
+    if (disabled) {
+      return null
+    }
+
+    return (
+      <Container
+        {...rest}
+        ref={ref}
+        className={twMerge('relative', className)}
+        style={style}
+      >
+        <Container
+          className={twMerge(
+            'absolute w-10 h-full z-10',
+            direction === 'left'
+              ? 'bg-gradient-to-r from-white via-white to-transparent'
+              : 'bg-gradient-to-l from-white via-white to-transparent',
+            direction === 'left' ? 'left-0' : 'right-0'
+          )}
+        >
+          <ButtonBase
+            className={twMerge(
+              'absolute w-4 h-full',
+              direction === 'left' ? 'left-0' : 'right-0'
+            )}
+            aria-label={`${direction} button`}
+            data-testid={`tab-scroll-button-${direction}`}
+          >
+            {direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
+          </ButtonBase>
+        </Container>
+      </Container>
+    )
+  }
+)
+
+TabScrollButton.displayName = 'TabScrollButton'
+
+export default TabScrollButton

package/src/TabScrollButton/index.ts

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

package/src/Tabs/Tabs.tsx

@@ -1,164 +1,79 @@
-import type { ReactNode, ChangeEvent, Ref, ReactElement } from 'react'
-import React, { forwardRef, useMemo, useCallback } from 'react'
+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 { TabsContext } from './TabsContext'
-import type { TabProps } from '../Tab'
-import { Tab } from '../Tab'
+import { TabScrollButton } from '../TabScrollButton'
+import styles from './styles'
+import useTabAction from './use-tab-action'
 
-export interface TabsProps<T = number> extends BaseProps {
+export type TabsValueType = string | number | false
+
+export interface Props<V extends TabsValueType> extends BaseProps {
   /** Tabs content containing Tab components */
   children: ReactNode
 
   /** Callback fired when the value changes. */
-  onChange?: (event: ChangeEvent<{}>, value: T) => 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.
-   */
-  value: T
+  /** 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). */
   orientation?: 'horizontal' | 'vertical'
 
   /** Determines additional display behavior of the tabs */
   variant?: 'scrollable' | 'fullWidth'
-
-  /** The default value. Use when the component is not controlled. */
-  defaultValue?: T
-
-  /** The direction of the text. */
-  direction?: 'ltr' | 'rtl'
 }
 
-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,
-  },
-}
-
-const classesByVariant = {
-  scrollable: {
-    root: 'overflow-x-auto',
-    scroller: '',
-  },
-  fullWidth: {
-    root: '',
-    scroller: 'w-full overflow-hidden',
-  },
-}
-
-// eslint-disable-next-line func-style
-function TabsInner<T = number>(props: TabsProps<T>, ref: Ref<HTMLDivElement>) {
-  const {
-    children,
-    orientation = 'horizontal',
-    onChange,
-    value: valueProp,
-    defaultValue,
-    variant = 'scrollable',
-    direction = 'ltr',
-    className,
-    ...rest
-  } = props
-
-  const [value, setValue] = React.useState<T>(defaultValue as T)
-  const isControlled = valueProp !== undefined
-  const currentValue = isControlled ? valueProp : value
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<{}>, newValue: T) => {
-      if (!isControlled) {
-        setValue(newValue)
-      }
-      onChange?.(event, newValue)
-    },
-    [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) &&
-      child.type === Tab &&
-      child.props.value === undefined
-    ) {
-      return React.cloneElement(child as React.ReactElement<TabProps<number>>, {
-        value: idx,
-      })
-    }
-
-    return child
-  })
-
-  return (
-    <TabsContext.Provider value={contextValue}>
-      <div
-        {...rest}
-        ref={ref}
-        data-component-type='tabs'
-        className={twMerge(
-          'relative min-h-0 flex overflow-hidden',
-          classesByOrientation[orientation].root,
-          classesByVariant[variant].root,
-          className
-        )}
-        aria-orientation={orientation}
-      >
-        <div
-          className={twJoin(
-            classesByVariant[variant].scroller,
-            classesByOrientation[orientation].scroller,
-            'flex-auto inline-block relative whitespace-nowrap'
-          )}
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'Tabs',
+})
+
+export const TabsOrientationContext = React.createContext<
+  'horizontal' | 'vertical'
+>('horizontal')
+
+export const Tabs = forwardRef(
+  <V extends TabsValueType = TabsValueType>(
+    props: Props<V>,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    const {
+      children,
+      orientation = 'horizontal',
+      onChange,
+      value,
+      variant = 'scrollable',
+      ...rest
+    } = props
+    const classes = useStyles(props)
+    const action = useTabAction()
+
+    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}
+          data-component-type='tabs'
         >
-          <div
-            className={twJoin('flex', isVertical && 'flex-col')}
-            role='tablist'
-            tabIndex={-1}
-          >
-            {childrenWithIndex}
-          </div>
-        </div>
-      </div>
-    </TabsContext.Provider>
-  )
-}
-
-TabsInner.displayName = 'Tabs'
-
-export const Tabs = forwardRef(TabsInner) as <T = number>(
-  props: TabsProps<T> & { ref?: Ref<HTMLDivElement> }
-) => ReactElement | null
+          {children}
+        </MUITabs>
+      </TabsOrientationContext.Provider>
+    )
+  }
+) as <V extends TabsValueType = TabsValueType>(
+  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
+) => ReturnType<typeof MUITabs>
 
 export default Tabs