@toptal/picasso-select 1.0.30 → 2.0.0

package/src/NativeSelect/NativeSelect.tsx

@@ -1,9 +1,4 @@
 import React, { useRef } from 'react'
-import cx from 'classnames'
-import { NativeSelect as MUINativeSelect } from '@material-ui/core'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import capitalize from '@material-ui/core/utils/capitalize'
 import { OutlinedInput } from '@toptal/picasso-outlined-input'
 import {
   documentable,
@@ -11,6 +6,7 @@ import {
   noop,
   useCombinedRefs,
 } from '@toptal/picasso-utils'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { SelectCaret } from '../SelectCaret'
 import type { ValueType, SelectProps } from '../SelectBase'
@@ -23,12 +19,19 @@ import {
 } from '../SelectBase'
 import NativeSelectOptions from '../NativeSelectOptions'
 import NativeSelectPlaceholder from '../NativeSelectPlaceholder'
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles)
+import { NativeSelectInput } from './NativeSelectInput'
 
 const DEFAULT_EMPTY_ARRAY_VALUE: ValueType[] = []
 
+const classesByWidth: Record<
+  Exclude<SelectProps['width'], undefined>,
+  string
+> = {
+  full: 'w-full',
+  shrink: 'w-auto',
+  auto: '',
+}
+
 export const NativeSelect = documentable(
   forwardRef(
     <T extends ValueType, M extends boolean = false>(
@@ -74,8 +77,6 @@ export const NativeSelect = documentable(
         ...rest
       } = props
 
-      const classes = useStyles()
-
       const selectRef = useCombinedRefs<HTMLInputElement>(
         ref,
         useRef<HTMLInputElement>(null)
@@ -104,49 +105,14 @@ export const NativeSelect = documentable(
       })
 
       const startAdornment = selectStartAdornment && (
-        <div className={classes.startAdornment}>{selectStartAdornment}</div>
+        <div className='absolute left-[0.625rem]'>{selectStartAdornment}</div>
       )
       const endAdornment = selectEndAdornment && (
-        <div className={classes.endAdornment}>{selectEndAdornment}</div>
+        <div className='absolute right-[1.625rem]'>{selectEndAdornment}</div>
       )
 
-      const nativeSelectComponent = (
-        <MUINativeSelect
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...rest}
-          ref={selectRef}
-          disabled={disabled}
-          name={name}
-          id={id}
-          startAdornment={startAdornment}
-          endAdornment={endAdornment}
-          input={
-            <OutlinedInput
-              width={width}
-              inputProps={{ multiple }}
-              size={size}
-              className={classes.nativeInput}
-              testIds={testIds}
-              status={error ? 'error' : status}
-              highlight={highlight}
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...getInputProps()}
-            />
-          }
-          value={value}
-          onChange={onChange as any}
-          IconComponent={() => <SelectCaret disabled={disabled} />}
-          classes={{
-            root: cx(classes.select, {
-              [classes.placeholder]: !selection.isSelected(),
-            }),
-            select: cx({
-              [classes.startAdornmentPadding]:
-                React.isValidElement(startAdornment),
-              [classes.endAdornmentPadding]: React.isValidElement(endAdornment),
-            }),
-          }}
-        >
+      const children = (
+        <>
           <NativeSelectPlaceholder
             emptySelectValue={emptySelectValue}
             disabled={!enableReset}
@@ -159,18 +125,50 @@ export const NativeSelect = documentable(
             renderOption={renderOption as any}
             getItemProps={getItemProps}
           />
-        </MUINativeSelect>
+        </>
+      )
+
+      const nativeSelectComponent = (
+        <OutlinedInput
+          width={width}
+          size={size}
+          className='p-0 bg-white'
+          testIds={testIds}
+          status={error ? 'error' : status}
+          highlight={highlight}
+          {...getInputProps()}
+          {...rest}
+          ref={selectRef}
+          disabled={disabled}
+          name={name}
+          id={id}
+          startAdornment={startAdornment}
+          endAdornment={endAdornment}
+          value={value}
+          onChange={onChange as any}
+          inputComponent={NativeSelectInput as any}
+          inputProps={{
+            multiple,
+            children,
+            type: undefined, // We render a select. We can ignore the type provided by the `Input`.
+            IconComponent: () => <SelectCaret disabled={disabled} />,
+            className: twJoin(
+              'w-full p-2 focus:bg-inheritColor',
+              !selection.isSelected() && 'text-gray-600',
+              React.isValidElement(startAdornment) && 'pl-[2.5625rem]',
+              React.isValidElement(endAdornment) && 'pr-[3.5625rem]'
+            ),
+          }}
+        />
       )
 
       return (
         <div
-          className={cx(
-            classes.root,
+          className={twMerge(
+            'relative inline-flex text-[1rem] cursor-pointer',
             className,
-            classes[`root${capitalize(width)}`],
-            {
-              [classes.rootDisabled]: disabled,
-            }
+            classesByWidth[width],
+            disabled && 'cursor-default'
           )}
           style={style}
           ref={inputWrapperRef}

package/src/NativeSelect/NativeSelectInput.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react'
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
+
+type NativeSelectInputProps = {
+  className?: string
+  disabled?: boolean
+  IconComponent?: React.ElementType
+  multiple?: boolean
+  ownerState?: {}
+} & React.HTMLAttributes<HTMLSelectElement>
+
+export const NativeSelectInput = forwardRef<
+  HTMLSelectElement,
+  NativeSelectInputProps
+>((props, ref) => {
+  // omit ownerState from the props
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { ownerState, className, disabled, multiple, IconComponent, ...other } =
+    props
+
+  return (
+    <>
+      <select
+        className={twMerge(
+          `appearance-none select-none rounded-none min-w-4 cursor-pointer
+           focus:bg-black/[.05] focus:rounded-none`,
+          disabled && 'cursor-default',
+          multiple ? 'h-auto' : '[&_option]:bg-white [&_optgroup]:bg-white',
+          className,
+          'pr-6' // From MUI, this rule is more specific and should override classname
+        )}
+        disabled={disabled}
+        multiple={multiple}
+        ref={ref}
+        {...other}
+      />
+      {multiple
+        ? null
+        : IconComponent && (
+            <IconComponent
+              className={twJoin(
+                'absolute right-0 top-[calc(50%-12px)] pointer-events-none',
+                disabled ? 'text-black/[.26]' : 'text-black/[.54]'
+              )}
+            />
+          )}
+    </>
+  )
+})
+
+NativeSelectInput.displayName = 'NativeSelectInput'

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

@@ -6,14 +6,15 @@ exports[`NativeSelect renders native select 1`] = `
     class="Picasso-root"
   >
     <div
-      class="makeStyles-root makeStyles-rootFull"
+      class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootFull PicassoOutlinedInput-rootMedium makeStyles-nativeInput MuiInputBase-fullWidth"
+        class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
       >
         <select
           aria-invalid="false"
-          class="MuiNativeSelect-root makeStyles-select MuiNativeSelect-select MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium"
+          class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
+          type="text"
         >
           <option
             disabled=""
@@ -41,7 +42,7 @@ exports[`NativeSelect renders native select 1`] = `
           </option>
         </select>
         <svg
-          class="PicassoSvgDropdownArrows16-root makeStyles-caret"
+          class="PicassoSvgDropdownArrows16-root absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-graphite text-[1rem] cursor-inherit pointer-events"
           style="min-width: 16px; min-height: 16px;"
           viewBox="0 0 16 16"
         >
@@ -49,20 +50,6 @@ exports[`NativeSelect renders native select 1`] = `
             d="m10.997 10.29.707.707-3.707 3.707-3.707-3.707.707-.707 3 3 3-3Zm-3-9 3.707 3.707-.707.707-3-3-3 3-.707-.707 3-3 .707-.707Z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-          style="padding-left: 8px;"
-        >
-          <legend
-            class="PrivateNotchedOutline-legend"
-            style="width: 0.01px;"
-          >
-            <span>
-              ​
-            </span>
-          </legend>
-        </fieldset>
       </div>
     </div>
   </div>
@@ -75,14 +62,15 @@ exports[`NativeSelect renders native select with the empty option enabled when e
     class="Picasso-root"
   >
     <div
-      class="makeStyles-root makeStyles-rootFull"
+      class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootFull PicassoOutlinedInput-rootMedium makeStyles-nativeInput MuiInputBase-fullWidth"
+        class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
       >
         <select
           aria-invalid="false"
-          class="MuiNativeSelect-root makeStyles-select MuiNativeSelect-select MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium"
+          class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
+          type="text"
         >
           <option
             value=""
@@ -109,7 +97,7 @@ exports[`NativeSelect renders native select with the empty option enabled when e
           </option>
         </select>
         <svg
-          class="PicassoSvgDropdownArrows16-root makeStyles-caret"
+          class="PicassoSvgDropdownArrows16-root absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-graphite text-[1rem] cursor-inherit pointer-events"
           style="min-width: 16px; min-height: 16px;"
           viewBox="0 0 16 16"
         >
@@ -117,20 +105,6 @@ exports[`NativeSelect renders native select with the empty option enabled when e
             d="m10.997 10.29.707.707-3.707 3.707-3.707-3.707.707-.707 3 3 3-3Zm-3-9 3.707 3.707-.707.707-3-3-3 3-.707-.707 3-3 .707-.707Z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-          style="padding-left: 8px;"
-        >
-          <legend
-            class="PrivateNotchedOutline-legend"
-            style="width: 0.01px;"
-          >
-            <span>
-              ​
-            </span>
-          </legend>
-        </fieldset>
       </div>
     </div>
   </div>

package/src/NonNativeSelect/NonNativeSelect.tsx

@@ -1,9 +1,5 @@
 import React, { useRef } from 'react'
 import type PopperJs from 'popper.js'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import capitalize from '@material-ui/core/utils/capitalize'
 import { Search16 } from '@toptal/picasso-icons'
 import { OutlinedInput } from '@toptal/picasso-outlined-input'
 import { Popper } from '@toptal/picasso-popper'
@@ -16,6 +12,7 @@ import {
 } from '@toptal/picasso-utils'
 import { InputAdornment } from '@toptal/picasso-input-adornment'
 import { useFieldsLayoutContext } from '@toptal/picasso-form'
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
 
 import { SelectCaret } from '../SelectCaret'
 import { NonNativeSelectLoader } from '../NonNativeSelectLoader'
@@ -32,12 +29,19 @@ import {
   filterFlatOptions as defaultFilterOptions,
 } from '../SelectBase'
 import { NonNativeSelectOptions } from '../NonNativeSelectOptions'
-import styles from './styles'
 import { NonNativeSelectLimitFooter } from '../NonNativeSelectLimitFooter'
-const useStyles = makeStyles<Theme>(styles)
 
 const DEFAULT_EMPTY_ARRAY_VALUE: ValueType[] = []
 
+const classesByWidth: Record<
+  Exclude<SelectProps['width'], undefined>,
+  string
+> = {
+  auto: '',
+  full: 'w-full',
+  shrink: 'w-auto',
+}
+
 export const NonNativeSelect = documentable(
   forwardRef(
     // eslint-disable-next-line max-lines-per-function, complexity
@@ -84,8 +88,6 @@ export const NonNativeSelect = documentable(
         ...rest
       } = props
 
-      const classes = useStyles()
-
       const selectRef = useCombinedRefs<HTMLInputElement>(
         ref,
         useRef<HTMLInputElement>(null)
@@ -128,12 +130,11 @@ export const NonNativeSelect = documentable(
         <MenuItem
           as='div'
           nonSelectable
-          disableGutters
-          className={classes.searchInputGutters}
+          className='pt-[0.375rem] pl-2 pb-2 pr-2'
         >
           <OutlinedInput
             inputRef={searchInputRef}
-            className={classes.searchOutlinedInput}
+            className='w-full'
             startAdornment={
               <InputAdornment position='start' disablePointerEvents>
                 <Search16 />
@@ -164,9 +165,10 @@ export const NonNativeSelect = documentable(
         <>
           <div
             {...rootProps}
-            className={cx(classes.inputWrapper, {
-              [classes.horizontalLayout]: layout === 'horizontal',
-            })}
+            className={twJoin(
+              'w-[inherit] outline-0',
+              layout === 'horizontal' && 'w-full'
+            )}
           >
             {!enableAutofill && name && (
               <input type='hidden' value={displayValue} name={name} />
@@ -183,13 +185,12 @@ export const NonNativeSelect = documentable(
               endAdornment={endAdornment}
               // Input specific props
               value={displayValue}
-              /* eslint-disable-next-line react/jsx-props-no-spreading */
               {...getInputProps()}
               placeholder={placeholder}
               width={width}
               readOnly
               defaultValue={undefined}
-              className={classes.outlinedInput}
+              className='pr-[1.625rem]'
               highlight={highlight}
               inputProps={{
                 size: 1, // let input to have smallest width by default for width:'shrink'
@@ -224,7 +225,6 @@ export const NonNativeSelect = documentable(
                   renderOption={renderOption as any}
                   highlightedIndex={highlightedIndex}
                   getItemProps={getItemProps}
-                  // eslint-disable-next-line react/jsx-handler-names
                   onBlur={rootProps.onBlur}
                   selection={selection}
                   filterOptionsValue={filterOptionsValue}
@@ -252,13 +252,11 @@ export const NonNativeSelect = documentable(
 
       return (
         <div
-          className={cx(
-            classes.root,
+          className={twMerge(
+            'relative inline-flex text-[1rem] cursor-pointer',
             className,
-            classes[`root${capitalize(width)}`],
-            {
-              [classes.rootDisabled]: disabled,
-            }
+            classesByWidth[width],
+            disabled && 'cursor-default'
           )}
           style={style}
           ref={inputWrapperRef}