@toptal/picasso-outlined-input 1.1.5 → 2.0.1

package/dist-package/src/OutlinedInput/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/OutlinedInput/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAiC,EAAE,EAAE,CAC3D,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-outlined-input",
-  "version": "1.1.5",
+  "version": "2.0.1",
   "description": "Toptal UI components library - OutlinedInput",
   "publishConfig": {
     "access": "public"
@@ -22,12 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.1.1",
-    "@toptal/picasso-form": "3.0.7",
-    "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-input-adornment": "1.0.8",
+    "@toptal/picasso-button": "3.0.1",
+    "@toptal/picasso-form": "4.0.1",
+    "@toptal/picasso-icons": "1.6.0",
+    "@toptal/picasso-input-adornment": "2.0.1",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-utils": "1.0.3",
+    "@mui/base": "5.0.0-beta.40",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
@@ -35,17 +36,17 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-tailwind": ">=2.5.0",
     "react": ">=16.12.0 < 19.0.0"
   },
+  "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "1.2.0"
+  },
   "exports": {
     ".": "./dist-package/src/index.js",
     "./styles": "./dist-package/src/styles.js"
   },
-  "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1"
-  },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",

package/src/OutlinedInput/OutlinedInput.tsx

@@ -1,18 +1,5 @@
-import type {
-  ChangeEventHandler,
-  ReactType,
-  ReactNode,
-  InputHTMLAttributes,
-  MouseEvent,
-} from 'react'
-import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { OutlinedInput as MUIOutlinedInput } from '@material-ui/core'
-import type { InputBaseComponentProps } from '@material-ui/core/InputBase'
-import capitalize from '@material-ui/core/utils/capitalize'
-import type { StandardProps, SizeType, Classes } from '@toptal/picasso-shared'
+import type { MouseEvent } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import {
   InputAdornment,
   InputValidIconAdornment,
@@ -21,82 +8,23 @@ import { ButtonCircular } from '@toptal/picasso-button'
 import { CloseMinor16 } from '@toptal/picasso-icons'
 import { noop, usePropDeprecationWarning } from '@toptal/picasso-utils'
 import { useFieldsLayoutContext } from '@toptal/picasso-form'
+import { Input, type InputOwnerState } from '@mui/base/Input'
+import {
+  TextareaAutosize,
+  type TextareaAutosizeProps,
+} from '@mui/base/TextareaAutosize'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
-
-type ValueType =
-  | (string | number | boolean | object)[]
-  | string
-  | number
-  | boolean
-  | object
-
-export type Status = 'error' | 'success' | 'default'
-
-export type BaseInputProps = InputBaseComponentProps & {
-  variant?: 'dark' | 'light'
-}
-
-export interface Props
-  extends StandardProps,
-    Omit<
-      InputHTMLAttributes<HTMLInputElement>,
-      'value' | 'defaultValue' | 'size' | 'color'
-    > {
-  /** Width of the component */
-  width?: 'full' | 'shrink' | 'auto'
-  inputComponent?: ReactType<InputBaseComponentProps>
-  inputProps?: BaseInputProps
-  defaultValue?: ValueType
-  value?: ValueType
-  /** Whether `Input` should be rendered as `TextArea` or not */
-  multiline?: boolean
-  /** If true, the input element will be focused during the first mount */
-  autoFocus?: boolean
-  /** Specify rows amount for `TextArea` */
-  rows?: string | number
-  /* Maximum number of rows to display when multiline option is set to true. */
-  rowsMax?: string | number
-  /** Type attribute of the Input element. It should be a valid HTML5 input type */
-  type?: string
-  /**
-   * @deprecated [FX-4715] Use the `status` prop instead to both support success and error states
-   * Indicate whether input is in error state
-   */
-  error?: boolean
-  /** Indicate input status */
-  status?: Status
-  startAdornment?: ReactNode
-  endAdornment?: ReactNode
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  /** Component size */
-  size?: SizeType<'small' | 'medium' | 'large'>
-  /** Whether to render reset icon when there is a value in the input */
-  enableReset?: boolean
-  /** Callback invoked when reset button was clicked */
-  onResetClick?: (
-    event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>
-  ) => void
-  /** Ref of the input element */
-  inputRef?: React.Ref<HTMLInputElement>
-  testIds?: {
-    resetButton?: string
-    validIcon?: string
-  }
-  highlight?: 'autofill'
-}
-
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoOutlinedInput',
-})
+import { getRootClassName } from './stylesRoot'
+import { getInputClassName } from './stylesInput'
+import { getRows } from './utils'
+import type { Props } from './types'
 
 const ResetButton = ({
-  classes,
   hasValue,
   onClick,
   testIds,
 }: {
-  classes: Classes
   hasValue: boolean
   onClick: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void
   testIds?: Props['testIds']
@@ -104,9 +32,10 @@ const ResetButton = ({
   <InputAdornment
     data-testid={testIds?.resetButton}
     position='end'
-    className={cx(classes.resetButton, {
-      [classes.resetButtonDirty]: hasValue,
-    })}
+    className={twJoin(
+      'invisible',
+      hasValue && 'peer-focus:visible peer-hover:visible'
+    )}
   >
     <ButtonCircular
       tabIndex={-1}
@@ -124,6 +53,22 @@ const ResetButton = ({
   </InputAdornment>
 )
 
+const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  { ownerState: InputOwnerState } & TextareaAutosizeProps
+>(
+  (
+    {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ownerState,
+      ...rest
+    },
+    ref
+  ) => {
+    return <TextareaAutosize ref={ref} {...rest} />
+  }
+)
+
 const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
   props,
   ref
@@ -132,6 +77,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
     className,
     style,
     multiline,
+    multilineResizable,
     autoFocus,
     rows,
     rowsMax,
@@ -140,7 +86,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
     inputProps,
     defaultValue,
     value,
-    type,
+    type = 'text',
     error,
     status,
     startAdornment,
@@ -153,6 +99,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
     inputRef,
     testIds,
     highlight,
+    classes,
     ...rest
   } = props
 
@@ -166,7 +113,6 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
   })
 
   const { layout } = useFieldsLayoutContext()
-  const classes = useStyles(props)
   const isDark = inputProps?.variant === 'dark'
   const shouldShowReset = enableReset && !disabled
   const hasEndAdornment = status === 'success' || shouldShowReset
@@ -174,7 +120,6 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
     <>
       {shouldShowReset && (
         <ResetButton
-          classes={classes}
           hasValue={Boolean(value)}
           onClick={onResetClick}
           testIds={testIds}
@@ -189,56 +134,77 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
     userDefinedEndAdornment
   )
 
+  const divRef = useRef<HTMLDivElement | null>(null)
+
+  useImperativeHandle(ref, () => divRef.current as HTMLElement, [])
+
+  const isError = Boolean(status === 'error' || error)
+
+  const inputClassName = getInputClassName({
+    size,
+    disabled,
+    isDark,
+    multiline,
+    multilineResizable,
+    type,
+    inputProps,
+  })
+
+  const rootClassName = getRootClassName({
+    size,
+    width,
+    type,
+    layout,
+    isDark,
+    multiline,
+    highlight,
+    disabled,
+    className,
+    classes,
+    isError,
+  })
+
+  const multilineProps = multiline
+    ? ({
+        multiline: true,
+        // to keep the same behavior as in MUI@4
+        // rows: getRows(rows),
+        minRows: getRows(rows),
+        maxRows: getRows(rowsMax),
+      } as const)
+    : {}
+
   return (
-    <MUIOutlinedInput
+    <Input
       {...rest}
-      classes={{
-        root: cx(
-          classes.root,
-          classes[`root${capitalize(width)}`],
-          classes[`root${capitalize(size)}`],
-          {
-            [`${classes.hidden}`]: type === 'hidden',
-            [classes.rootDark]: isDark,
-            [classes.highlightAutofill]: highlight === 'autofill',
-            [classes.horizontalLayout]: layout === 'horizontal',
-            [classes.error]: Boolean(status === 'error' || error),
-          }
-        ),
-        input: cx(classes.input, classes[`input${capitalize(size)}`], {
-          [classes.inputDark]: isDark,
-        }),
-        inputMultiline: classes.inputMultiline,
-        notchedOutline: cx(classes.notchedOutline, {
-          [classes.notchedOutlineDark]: isDark,
-        }),
-        focused: classes.focused,
-      }}
-      className={cx(
-        {
-          [classes.error]: Boolean(status === 'error' || error),
+      slots={{ input: inputComponent, textarea: Textarea }}
+      slotProps={{
+        root: {
+          ref: divRef,
+          className: twMerge(rootClassName, classes?.root, className),
         },
-        className
-      )}
+        input: {
+          ...inputProps,
+          ref: inputRef,
+          className: twMerge(
+            inputClassName,
+            classes?.input,
+            inputProps?.className
+          ),
+          type,
+          'aria-invalid': isError,
+        },
+      }}
       style={style}
-      labelWidth={0}
-      fullWidth={width === 'full'}
-      error={Boolean(status === 'error' || error)}
-      inputComponent={inputComponent}
-      inputProps={inputProps}
-      ref={ref}
-      inputRef={inputRef}
+      error={isError}
       defaultValue={defaultValue}
       value={value}
-      type={type}
       startAdornment={startAdornment}
       endAdornment={endAdornment}
-      multiline={multiline}
       autoFocus={autoFocus}
-      minRows={rows}
-      maxRows={rowsMax}
       onChange={onChange}
       disabled={disabled}
+      {...multilineProps}
     />
   )
 })

package/src/OutlinedInput/index.ts

@@ -1,7 +1,8 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
-import type { Props } from './OutlinedInput'
+import type { Props } from './types'
 
 export { default as OutlinedInput } from './OutlinedInput'
 export type OutlinedInputProps = OmitInternalProps<Props>
 export * from './OutlinedInput'
+export type { Status, BaseInputProps, InputProps, Size, Props } from './types'

package/src/OutlinedInput/stylesInput.test.ts

@@ -0,0 +1,152 @@
+import {
+  getInputClassName,
+  classesBySize,
+  fontColorClasses,
+  inputClasses,
+  placeholderClasses,
+  getFontColorClass,
+} from './stylesInput'
+import type { Size } from './types'
+
+describe('getInputClassName', () => {
+  const baseProps = {
+    isDark: false,
+    size: 'medium' as Size,
+  }
+
+  describe('when determining the basic input classes', () => {
+    it('always includes basic input classes', () => {
+      const result = getInputClassName(baseProps)
+
+      expect(result).toContainEqual(inputClasses)
+    })
+  })
+
+  describe('when determining classes based on size', () => {
+    it.each([
+      ['small', classesBySize.small],
+      ['medium', classesBySize.medium],
+      ['large', classesBySize.large],
+    ])('returns the correct class for size "%s"', (size, expectedClass) => {
+      const result = getInputClassName({ ...baseProps, size: size as Size })
+
+      expect(result).toContain(expectedClass)
+    })
+  })
+
+  describe('when determining font color', () => {
+    describe('when isDark is true', () => {
+      it('returns font color class as "text-white"', () => {
+        const result = getInputClassName({ ...baseProps, isDark: true })
+
+        expect(result).toContain(fontColorClasses.dark)
+      })
+    })
+
+    describe('when type is "time" and inputPropsDisabled is true', () => {
+      it('returns font color class as "text-black" for timepicker', () => {
+        const result = getInputClassName({
+          ...baseProps,
+          type: 'time',
+          inputProps: { disabled: true },
+        })
+
+        expect(result).toContain(fontColorClasses.timepicker)
+      })
+    })
+
+    describe('when disabled is true', () => {
+      it('returns font color class as "text-gray-600"', () => {
+        const result = getInputClassName({ ...baseProps, disabled: true })
+
+        expect(result).toContainEqual(fontColorClasses.disabled)
+      })
+    })
+
+    describe('default case', () => {
+      it('returns font color class as "text-black"', () => {
+        const result = getInputClassName(baseProps)
+
+        expect(result).toContain(fontColorClasses.default)
+      })
+    })
+  })
+
+  describe('when determining placeholder classes', () => {
+    describe('when isDark is true', () => {
+      it('returns dark mode placeholder classes', () => {
+        const result = getInputClassName({ ...baseProps, isDark: true })
+
+        expect(result).toContainEqual(placeholderClasses.dark)
+      })
+    })
+
+    describe('default case', () => {
+      it('returns default placeholder classes', () => {
+        const result = getInputClassName(baseProps)
+
+        expect(result).toContainEqual(placeholderClasses.default)
+      })
+    })
+  })
+
+  describe('when determining additional classes', () => {
+    describe('when multiline and multilineResizable', () => {
+      it('includes "resize-y" class', () => {
+        const result = getInputClassName({
+          ...baseProps,
+          multiline: true,
+          multilineResizable: true,
+        })
+
+        expect(result).toContain('resize-y')
+      })
+    })
+
+    describe('default case', () => {
+      it('does not include "resize-y" class', () => {
+        const result = getInputClassName(baseProps)
+
+        expect(result).not.toContain('resize-y')
+      })
+    })
+  })
+})
+
+describe('getFontColorClass', () => {
+  describe('when isDark is true', () => {
+    it('returns "text-white"', () => {
+      const result = getFontColorClass({ isDark: true })
+
+      expect(result).toBe(fontColorClasses.dark)
+    })
+  })
+
+  describe('when type is "time" and inputPropsDisabled is true', () => {
+    it('returns "text-black" for timepicker', () => {
+      const result = getFontColorClass({
+        isDark: false,
+        type: 'time',
+        inputPropsDisabled: true,
+      })
+
+      expect(result).toBe(fontColorClasses.timepicker)
+    })
+  })
+
+  describe('when disabled is true', () => {
+    it('returns an array including "text-gray-600"', () => {
+      const result = getFontColorClass({ isDark: false, disabled: true })
+
+      expect(result).toEqual(fontColorClasses.disabled)
+    })
+  })
+
+  describe('default case', () => {
+    it('returns "text-black"', () => {
+      const result = getFontColorClass({ isDark: false })
+
+      expect(result).toBe(fontColorClasses.default)
+    })
+  })
+})

package/src/OutlinedInput/stylesInput.ts

@@ -0,0 +1,87 @@
+import type { Size, Props } from './types'
+
+export const classesBySize: Record<Size, string> = {
+  small: 'text-xxs leading-4',
+  medium: 'text-md leading-4',
+  large: 'text-lg leading-4',
+}
+
+export const fontColorClasses = {
+  dark: 'text-white',
+  disabled: [
+    'text-gray-600',
+    // On Safari the text gets a bit lighter as if it had some transparency applied to it
+    // We need this webkit-specific property to achieve the exact font color
+    '[&::-webkit-text-fill-color]:text-gray-600',
+  ] as string[],
+  default: 'text-black',
+  timepicker: 'text-black',
+}
+
+export const getFontColorClass = ({
+  isDark,
+  disabled,
+  type,
+  inputPropsDisabled,
+}: {
+  isDark: boolean
+  disabled?: boolean
+  type?: string
+  inputPropsDisabled?: boolean
+}) => {
+  if (isDark) {
+    return fontColorClasses.dark
+  }
+
+  if (type === 'time' && inputPropsDisabled) {
+    // It's a special case for TimePicker
+    return fontColorClasses.timepicker
+  }
+
+  if (disabled) {
+    return fontColorClasses.disabled
+  }
+
+  return fontColorClasses.default
+}
+
+export const placeholderClasses = {
+  default: ['[&::placeholder]:text-gray-600', '[&::placeholder]:opacity-100'],
+  dark: ['[&::placeholder]:text-white', '[&::placeholder]:opacity-[0.64]'],
+}
+
+export const inputClasses = [
+  '[&::-webkit-calendar-picker-indicator]:bg-none',
+  'bg-transparent',
+  'border-none',
+  'box-border',
+  'cursor-[inherit]',
+  'h-full',
+  'outline-none',
+  'p-0',
+  'peer',
+  'resize-none',
+  'resize-none',
+  'w-full',
+]
+
+export const getInputClassName = ({
+  size,
+  disabled,
+  isDark,
+  multiline,
+  multilineResizable,
+  type,
+  inputProps,
+}: Partial<Props> & { isDark: boolean; size: Size }) => [
+  inputClasses,
+  classesBySize[size],
+  getFontColorClass({
+    isDark,
+    disabled,
+    type,
+    inputPropsDisabled: inputProps?.disabled,
+  }),
+  isDark ? placeholderClasses.dark : placeholderClasses.default,
+  multiline && multilineResizable && 'resize-y',
+]