@toptal/picasso-select 1.0.30 → 2.0.0

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

@@ -6,7 +6,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu PicassoSelectOptions-menu"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
       tabindex="-1"
     >
@@ -14,64 +14,64 @@ exports[`NonNativeSelectOptions renders 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="2"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="3"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
@@ -89,7 +89,7 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu PicassoSelectOptions-menu"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       data-testid="no-options"
       role="listbox"
       tabindex="-1"
@@ -98,22 +98,22 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <li
             aria-disabled="true"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light PicassoMenuItem-disabled MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters Mui-disabled MuiListItem-button Mui-disabled"
+            class="bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 text-gray opacity-100 pointer-events"
+            disabled=""
             role="menuitem"
-            tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
@@ -131,7 +131,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu PicassoSelectOptions-menu"
+      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
       tabindex="-1"
     >
@@ -139,22 +139,22 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light makeStyles-menuGroup PicassoMenuItem-nonSelectable MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 pt-4 px-4 pb-[10px]"
             role="option"
             tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 >
                   <p
                     class="m-0 text-xxs text-graphite font-semibold"
@@ -167,78 +167,78 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="2"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="3"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light makeStyles-menuGroup PicassoMenuItem-nonSelectable MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 pt-4 px-4 pb-[10px]"
             role="option"
             tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 >
                   <p
                     class="m-0 text-xxs text-graphite font-semibold"
@@ -251,40 +251,40 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="4"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             data-highlighted="false"
             role="option"
             tabindex="-1"
             value="5"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 />
               </div>
             </div>

package/src/ScrollMenu/ScrollMenu.tsx

@@ -1,13 +1,9 @@
 import type { ReactNode, RefObject } from 'react'
 import React, { useRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
 import { useIsomorphicLayoutEffect } from '@toptal/picasso-utils'
 import { Menu } from '@toptal/picasso-menu'
-
-import styles from './styles'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps {
   children: React.ReactNode
@@ -22,10 +18,6 @@ export interface Props extends BaseProps {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoScrollMenu',
-})
-
 const getMenuSelectedNode = (
   menuRef: RefObject<HTMLDivElement>,
   selectedIndex?: number | null
@@ -75,7 +67,6 @@ const ScrollMenu = (props: Props) => {
     'data-testid': dataTestId,
     ...rest
   } = props
-  const classes = useStyles()
   const menuRef = useRef<HTMLDivElement>(null)
 
   useIsomorphicLayoutEffect(
@@ -85,7 +76,7 @@ const ScrollMenu = (props: Props) => {
 
   return (
     <Menu
-      className={cx(classes.menu, className)}
+      className={twMerge('bg-white', className)}
       style={style}
       role={role}
       data-testid={dataTestId || testIds?.root}
@@ -96,7 +87,12 @@ const ScrollMenu = (props: Props) => {
         <div
           data-testid={testIds?.list}
           ref={menuRef}
-          className={classes.scrollView}
+          className={twJoin(
+            'overflow-y-auto',
+            'max-h-[26.875rem]',
+            '[@media(max-height:585px)]:max-h-[calc(50vh-4.3125rem)]',
+            '[@media(max-height:585px)]:md:max-h-[calc(50vh-4.8125rem)]'
+          )}
           onBlur={onBlur}
         >
           {children}

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

@@ -6,7 +6,7 @@ exports[`ScrollMenu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root PicassoScrollMenu-menu"
+      class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
       role="menu"
       tabindex="-1"
     >
@@ -14,25 +14,25 @@ exports[`ScrollMenu renders 1`] = `
         tabindex="0"
       >
         <div
-          class="PicassoScrollMenu-scrollView"
+          class="overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
         >
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             role="menuitem"
             tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 >
                   <span
-                    class="PicassoMenuItem-stringContent"
+                    class="flex-1 text-md leading-5"
                   >
                     top
                   </span>
@@ -42,21 +42,21 @@ exports[`ScrollMenu renders 1`] = `
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             role="menuitem"
             tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 >
                   <span
-                    class="PicassoMenuItem-stringContent"
+                    class="flex-1 text-md leading-5"
                   >
                     middle
                   </span>
@@ -66,21 +66,21 @@ exports[`ScrollMenu renders 1`] = `
           </li>
           <li
             aria-disabled="false"
-            class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+            class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
             role="menuitem"
             tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex flex-1 max-w"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col flex-1 min-w"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="flex items-center"
                 >
                   <span
-                    class="PicassoMenuItem-stringContent"
+                    class="flex-1 text-md leading-5"
                   >
                     bottom
                   </span>

package/src/Select/story/index.jsx

@@ -63,7 +63,7 @@ page
     {
       title: 'Search behavior',
       description: `Search is enabled when the number of options is greater or equal to \`searchThreshold\`.
-      ⚠️ When used in Drawer, we need to use \`disablePortal\` to enable the mouse focus of the search input.`,
+    ⚠️ When used in Drawer, we need to use \`disablePortal\` to enable the mouse focus of the search input.`,
       takeScreenshot: false,
     },
     'base/Select'

package/src/SelectCaret/SelectCaret.tsx

@@ -1,25 +1,23 @@
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { DropdownArrows16 } from '@toptal/picasso-icons'
-
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles)
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 interface Props {
   disabled?: boolean
 }
 
 const SelectCaret = ({ disabled }: Props) => {
-  const classes = useStyles()
-
   return (
     <DropdownArrows16
-      className={cx(classes.caret, {
-        [classes.caretDisabled]: disabled,
-      })}
+      // className={twJoin(classes.caret, disabled && classes.caretDisabled)}
+      className={twJoin(
+        // in specs right spacing is defined relative to 6px icon width, while we use 16px
+        // so 5px are left instead of 10px when we use wider icon.
+        `absolute top-[calc(50%-0.5rem)] right-[0.3125rem]
+        text-graphite-700 text-[1rem]
+        cursor-inherit pointer-events-none`,
+        disabled && 'text-graphite-700/[.48] z-[1]'
+      )}
     />
   )
 }

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

@@ -6,7 +6,7 @@ exports[`SelectCaret renders 1`] = `
     class="Picasso-root"
   >
     <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"
     >
@@ -24,7 +24,7 @@ exports[`SelectCaret renders disabled 1`] = `
     class="Picasso-root"
   >
     <svg
-      class="PicassoSvgDropdownArrows16-root makeStyles-caret makeStyles-caretDisabled"
+      class="PicassoSvgDropdownArrows16-root absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-graphite text-[1rem] cursor-inherit pointer-events text-graphite z-[1]"
       style="min-width: 16px; min-height: 16px;"
       viewBox="0 0 16 16"
     >

package/src/SelectOptions/SelectOptions.tsx

@@ -1,18 +1,11 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
-import cx from 'classnames'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import type { ScrollMenuProps } from '../ScrollMenu'
 import { ScrollMenu } from '../ScrollMenu'
-import styles from './styles'
 
 export interface Props extends ScrollMenuProps {}
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSelectOptions',
-})
-
 const SelectOptions = (props: Props) => {
   const {
     selectedIndex,
@@ -25,16 +18,13 @@ const SelectOptions = (props: Props) => {
     role,
     ...rest
   } = props
-  const classes = useStyles()
 
   return (
     <ScrollMenu
-      className={cx(
-        classes.menu,
-        {
-          [classes.withHeader]: Boolean(fixedHeader),
-          [classes.withFooter]: Boolean(fixedFooter),
-        },
+      className={twJoin(
+        'shadow-5',
+        Boolean(fixedHeader) && 'pt-[0.125rem] [&>div:first-child]:pb-2',
+        Boolean(fixedFooter) && 'pb-0',
         className
       )}
       style={style}

package/dist-package/src/NativeSelect/styles.d.ts

@@ -1,6 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-import '@toptal/picasso-input/styles';
-import '@toptal/picasso-loader/styles';
-declare const _default: (theme: Theme) => import("@material-ui/styles").StyleRules<{}, "placeholder" | "startAdornment" | "endAdornment" | "select" | "root" | "rootFull" | "rootShrink" | "rootAuto" | "rootDisabled" | "nativeInput" | "startAdornmentPadding" | "endAdornmentPadding">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/NativeSelect/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/NativeSelect/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;gCAEf,KAAK;AAA5B,wBAkDC"}

package/dist-package/src/NativeSelect/styles.js

@@ -1,54 +0,0 @@
-// eslint-disable-next-line import/order
-import { createStyles } from '@material-ui/core/styles';
-import '@toptal/picasso-input/styles';
-import '@toptal/picasso-loader/styles';
-export default (theme) => {
-    const { palette } = theme;
-    return createStyles({
-        root: {
-            position: 'relative',
-            display: 'inline-flex',
-            fontSize: '1rem',
-            cursor: 'pointer',
-        },
-        rootFull: {
-            width: '100%',
-        },
-        rootShrink: {
-            width: 'auto',
-        },
-        rootAuto: {},
-        rootDisabled: {
-            cursor: 'default',
-        },
-        select: {
-            width: '100%',
-            padding: '0.5rem',
-            '&:focus': {
-                backgroundColor: 'inherit',
-            },
-        },
-        nativeInput: {
-            padding: 0,
-            backgroundColor: palette.common.white,
-        },
-        placeholder: {
-            color: palette.grey.main2,
-        },
-        startAdornment: {
-            position: 'absolute',
-            left: '0.625rem',
-        },
-        endAdornment: {
-            position: 'absolute',
-            right: '1.625rem',
-        },
-        startAdornmentPadding: {
-            paddingLeft: '2.5625rem',
-        },
-        endAdornmentPadding: {
-            paddingRight: '3.5625rem',
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/NativeSelect/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/NativeSelect/styles.ts"],"names":[],"mappings":"AACA,wCAAwC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;AAEtC,eAAe,CAAC,KAAY,EAAE,EAAE;IAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAEzB,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,aAAa;YACtB,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,SAAS;SAClB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM;SACd;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;SACd;QACD,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE;YACZ,MAAM,EAAE,SAAS;SAClB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,QAAQ;YAEjB,SAAS,EAAE;gBACT,eAAe,EAAE,SAAS;aAC3B;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC;YACV,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SACtC;QACD,WAAW,EAAE;YACX,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;SAC1B;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,UAAU;SACjB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,UAAU;SAClB;QACD,qBAAqB,EAAE;YACrB,WAAW,EAAE,WAAW;SACzB;QACD,mBAAmB,EAAE;YACnB,YAAY,EAAE,WAAW;SAC1B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}