Fix select styling

app/web/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.0.0",
+    "@heroicons/react": "^1.0.4",
     "@material-ui/core": "^4.11.0",
     "@monaco-editor/react": "^4.0.11",
     "@react-three/drei": "^7.3.1",

app/web/public/demo-worker.js

@@ -454,7 +454,6 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
           }
         })
       }
-      console.log('paramsDef', paramsDef)
       if(paramsDef.length) callback({action:'parameterDefinitions', worker:'main', data:paramsDef})
 
       runMain(params)

app/web/src/components/Customizer/Customizer.tsx

@@ -1,3 +1,6 @@
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
+
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { Switch } from '@headlessui/react'
@@ -139,7 +142,7 @@ function BooleanParam({
 }: {
   param: CadhubBooleanParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   return (
     <CustomizerParamBase name={param.name} caption={param.caption}>
@@ -169,7 +172,7 @@ function StringParam({
 }: {
   param: CadhubStringParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   return (
     <CustomizerParamBase name={param.name} caption={param.caption}>
@@ -191,21 +194,68 @@ function ChoiceParam({
 }: {
   param: CadhubStringChoiceParam | CadhubNumberChoiceParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   return (
     <CustomizerParamBase name={param.name} caption={param.caption}>
-      <select
+      <Listbox value={value} onChange={onChange}>
-        className="bg-transparent h-8 border border-ch-gray-300 px-2 text-sm w-full"
+        <div className="relative mt-1">
-        value={value}
+          <Listbox.Button className="relative w-full h-8 text-left cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm border border-ch-gray-300 px-2 text-sm">
-        onChange={({ target }) => onChange(target?.value)}
+            <span className="block truncate">{value}</span>
+            <span className="absolute inset-y-0 right-0 flex items-center pr-1 pointer-events-none">
+              <SelectorIcon
+                className="w-5 h-5 text-gray-300"
+                aria-hidden="true"
+              />
+            </span>
+          </Listbox.Button>
+          <Transition
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
-        {param.options.map((opt) => (
+            <Listbox.Options className="absolute w-full py-1 mt-1 bg-ch-gray-600 bg-opacity-80 overflow-auto text-base rounded-sm shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-          <option value={opt.value} key={opt.name}>
+              {param.options.map((option, optionIdx) => (
-            {opt.name}
+                <Listbox.Option
-          </option>
+                  key={optionIdx}
+                  className={({ active }) =>
+                    `${
+                      active
+                        ? 'text-ch-blue-600 bg-ch-gray-700'
+                        : 'text-ch-gray-300'
+                    }
+                          cursor-default select-none relative py-2 pl-10 pr-4`
+                  }
+                  value={option.value}
+                >
+                  {({ selected, active }) => (
+                    <>
+                      <span
+                        className={`${
+                          selected ? 'font-medium' : 'font-normal'
+                        } block truncate`}
+                      >
+                        {option.name}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`${
+                            active ? 'text-ch-blue-600' : 'text-ch-gray-300'
+                          }
+                                absolute inset-y-0 left-0 flex items-center pl-3`}
+                        >
+                          <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
               ))}
-      </select>
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
     </CustomizerParamBase>
   )
 }
@@ -217,7 +267,7 @@ function NumberParam({
 }: {
   param: CadhubNumberParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   const [isFocused, isFocusedSetter] = React.useState(false)
   const [localValue, localValueSetter] = React.useState(0)

app/yarn.lock

@@ -1917,6 +1917,11 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.2.0.tgz#e48652bfce82ddf73d7f331faeb9db6526ee6874"
   integrity sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==
 
+"@heroicons/react@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.4.tgz#11847eb2ea5510419d7ada9ff150a33af0ad0863"
+  integrity sha512-3kOrTmo8+Z8o6AL0rzN82MOf8J5CuxhRLFhpI8mrn+3OqekA6d5eb1GYO3EYYo1Vn6mYQSMNTzCWbEwUInb0cQ==
+
 "@iarna/toml@^2.2.5":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"