@toptal/picasso-select 1.0.30 → 2.0.0

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

@@ -6,41 +6,27 @@ exports[`NonNativeSelect renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="makeStyles-root makeStyles-rootFull"
+      class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
       <div
-        class="makeStyles-inputWrapper"
+        class="w-[inherit] outline-0"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoOutlinedInput-rootFull PicassoOutlinedInput-rootMedium makeStyles-outlinedInput MuiInputBase-fullWidth"
+          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-full bg-white 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] pr-[1.625rem]"
           role="textbox"
         >
           <input
             aria-invalid="false"
             autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             readonly=""
             size="1"
             type="text"
             value="text1"
           />
-          <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>
         <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"
         >
@@ -56,7 +42,7 @@ exports[`NonNativeSelect renders 1`] = `
 
 exports[`NonNativeSelect renders custom options 1`] = `
 <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"
 >
@@ -64,28 +50,28 @@ exports[`NonNativeSelect renders custom options 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"
         aria-selected="false"
-        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light Mui-selected PicassoMenuItem-selected MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+        class="text-black bg-blue 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="true"
         role="option"
         tabindex="-1"
         value="val1"
       >
         <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
-                class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+                class="w-4 inline-flex mr-2"
               />
               <div
                 data-testid="custom-option-1"
@@ -99,23 +85,23 @@ exports[`NonNativeSelect renders custom options 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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="val2"
       >
         <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
-                class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+                class="w-4 inline-flex mr-2"
               />
               <div
                 data-testid="custom-option-2"
@@ -129,23 +115,23 @@ exports[`NonNativeSelect renders custom options 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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="val3"
       >
         <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
-                class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+                class="w-4 inline-flex mr-2"
               />
               <div
                 data-testid="custom-option-3"
@@ -163,7 +149,7 @@ exports[`NonNativeSelect renders custom options 1`] = `
 
 exports[`NonNativeSelect renders description 1`] = `
 <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"
 >
@@ -171,38 +157,37 @@ exports[`NonNativeSelect renders description 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"
         aria-selected="false"
-        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light Mui-selected PicassoMenuItem-selected MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+        class="text-black bg-blue 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="true"
         role="option"
         tabindex="-1"
         value="val1"
       >
         <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
-                class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+                class="w-4 inline-flex mr-2"
               />
               <span
-                class="PicassoMenuItem-stringContent"
+                class="flex-1 text-md leading-5"
               >
                 text1
               </span>
             </div>
             <div
-              class="PicassoContainer-leftmediumMargin PicassoMenuItem-description"
-              style="margin-top: 0.25rem;"
+              class="text-2xs mt-1 text-graphite ml-6"
             >
               description1
             </div>
@@ -212,33 +197,32 @@ exports[`NonNativeSelect renders description 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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="val2"
       >
         <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
-                class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+                class="w-4 inline-flex mr-2"
               />
               <span
-                class="PicassoMenuItem-stringContent"
+                class="flex-1 text-md leading-5"
               >
                 text2
               </span>
             </div>
             <div
-              class="PicassoContainer-leftmediumMargin PicassoMenuItem-description"
-              style="margin-top: 0.25rem;"
+              class="text-2xs mt-1 text-graphite ml-6"
             >
               description2
             </div>
@@ -248,33 +232,32 @@ exports[`NonNativeSelect renders description 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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="val3"
       >
         <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
-                class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+                class="w-4 inline-flex mr-2"
               />
               <span
-                class="PicassoMenuItem-stringContent"
+                class="flex-1 text-md leading-5"
               >
                 text3
               </span>
             </div>
             <div
-              class="PicassoContainer-leftmediumMargin PicassoMenuItem-description"
-              style="margin-top: 0.25rem;"
+              class="text-2xs mt-1 text-graphite ml-6"
             >
               description3
             </div>

package/src/NonNativeSelectLimitFooter/NonNativeSelectLimitFooter.tsx

@@ -1,13 +1,7 @@
 import React from 'react'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { MenuItem } from '@toptal/picasso-menu'
 
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles)
-
 interface Props extends BaseProps {
   totalCount: number
   limit: number
@@ -18,13 +12,11 @@ export const NonNativeSelectLimitFooter = ({
   limit,
   'data-testid': dataTestId,
 }: Props) => {
-  const classes = useStyles()
-
   return limit < totalCount ? (
     <MenuItem
       data-testid={dataTestId}
       titleCase={false}
-      className={classes.root}
+      className='text-graphite-700 py-3 px-4 border border-solid border-gray-300 text-[0.6875rem]'
       disabled
     >
       Showing only first {limit} of {totalCount} items

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

@@ -7,18 +7,18 @@ exports[`NonNativeSelectLimitFooter renders footer when overflow 1`] = `
   >
     <li
       aria-disabled="true"
-      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light makeStyles-root PicassoMenuItem-disabled MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters Mui-disabled MuiListItem-button Mui-disabled"
+      class="bg-transparent hover:bg-blue focus:bg-blue 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 py-3 px-4 border border-solid border-gray text-[0.6875rem] 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"
           >
             Showing only first 
             50

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

@@ -6,7 +6,7 @@ exports[`NonNativeSelectLoader 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="menu"
       tabindex="-1"
     >
@@ -14,32 +14,34 @@ exports[`NonNativeSelectLoader 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"
         >
           <div
-            class="PicassoContainer-smallPadding"
+            class="p-4"
           >
             <div
-              class="PicassoLoader-root"
+              class="text-lg flex flex-col items-center"
             >
               <div
                 aria-valuenow="35"
-                class="MuiCircularProgress-root PicassoCircularProgress-root PicassoLoader-spinnerBlue MuiCircularProgress-colorPrimary MuiCircularProgress-determinate"
+                class="text-blue transform -rotate"
                 role="progressbar"
-                style="width: 16px; height: 16px; transform: rotate(-90deg);"
+                style="width: 16px; height: 16px;"
               >
                 <svg
-                  class="MuiCircularProgress-svg"
+                  class="block"
                   viewBox="22 22 44 44"
                 >
                   <circle
-                    class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate"
+                    class="transition-all stroke-[currentColor]"
                     cx="44"
                     cy="44"
                     fill="none"
                     r="20.2"
+                    stroke-dasharray="80px, 200px"
+                    stroke-dashoffset="0px"
                     stroke-width="3.6"
-                    style="stroke-dasharray: 126.920; stroke-dashoffset: 82.498px;"
+                    style="stroke-dashoffset: 82.498px; stroke-dasharray: 126.920;"
                   />
                 </svg>
               </div>

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

@@ -8,33 +8,32 @@ exports[`NonNativeSelectOption renders 1`] = `
     <li
       aria-disabled="false"
       aria-selected="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=""
     >
       <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
-              class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+              class="w-4 inline-flex mr-2"
             />
             <span
-              class="PicassoMenuItem-stringContent"
+              class="flex-1 text-md leading-5"
             >
               Test
             </span>
           </div>
           <div
-            class="PicassoContainer-leftmediumMargin PicassoMenuItem-description"
-            style="margin-top: 0.25rem;"
+            class="text-2xs mt-1 text-graphite ml-6"
           >
             Test description
           </div>
@@ -53,23 +52,23 @@ exports[`NonNativeSelectOption sets attributes correctly 1`] = `
     <li
       aria-disabled="false"
       aria-selected="true"
-      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="option1"
     >
       <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
-              class="PicassoContainer-rightxsmallMargin PicassoContainer-flex PicassoContainer-inline PicassoMenuItem-iconContainer"
+              class="w-4 inline-flex mr-2"
             >
               <svg
                 class="PicassoSvgCheckMinor16-root"
@@ -82,14 +81,13 @@ exports[`NonNativeSelectOption sets attributes correctly 1`] = `
               </svg>
             </div>
             <span
-              class="PicassoMenuItem-stringContent PicassoMenuItem-stringContentSemibold"
+              class="flex-1 text-md leading-5 text-semibold"
             >
               Test
             </span>
           </div>
           <div
-            class="PicassoContainer-leftmediumMargin PicassoMenuItem-description"
-            style="margin-top: 0.25rem;"
+            class="text-2xs mt-1 text-graphite ml-6"
           >
             Test description
           </div>

package/src/NonNativeSelectOptions/NonNativeSelectOptions.tsx

@@ -1,8 +1,6 @@
 import type { ReactNode } from 'react'
 import React, { useMemo } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { MenuItem } from '@toptal/picasso-menu'
 import { Typography } from '@toptal/picasso-typography'
 
@@ -17,9 +15,6 @@ import type {
   Selection,
 } from '../SelectBase'
 import { flattenOptions, isOptionsType } from '../SelectBase'
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles)
 
 // TODO: Replace with a real component as soon as it's implemented
 // https://toptal-core.atlassian.net/browse/FX-1479
@@ -33,7 +28,6 @@ interface MenuGroupProps extends BaseProps {
 }
 const MenuGroup = (props: MenuGroupProps) => {
   const { group, children, ...rest } = props
-  const classes = useStyles()
 
   return (
     <>
@@ -41,7 +35,7 @@ const MenuGroup = (props: MenuGroupProps) => {
         role='option'
         titleCase={false}
         nonSelectable
-        className={classes.menuGroup}
+        className='pt-4 px-4 pb-[10px]'
         {...rest}
       >
         <Typography size='xsmall' weight='semibold' color='dark-grey'>