make dropdown select icon optional

packages/tldraw/apps/tldraw-logseq/package.json

@@ -29,6 +29,7 @@
     "perfect-freehand": "^1.2.0",
     "polished": "^4.0.0",
     "postcss": "^8.4.19",
+    "lucide-react": "^0.292.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-virtuoso": "^3.1.3",

packages/tldraw/apps/tldraw-logseq/src/components/inputs/ScaleInput.tsx

@@ -50,7 +50,7 @@ export function ScaleInput({ scaleLevel, compact, popoverSide, ...rest }: ScaleI
       options={sizeOptions}
       value={scaleLevel}
       popoverSide={popoverSide}
-      chevron={!compact}
+      compact={compact}
       onValueChange={v => {
         app.api.setScaleLevel(v)
       }}

packages/tldraw/apps/tldraw-logseq/src/components/inputs/SelectInput.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Tooltip } from '../Tooltip'
+import { ChevronDown } from 'lucide-react'
 import type { Side } from '@radix-ui/react-popper'
 
 // @ts-ignore
@@ -15,7 +16,7 @@ interface SelectInputProps extends React.HTMLAttributes<HTMLElement> {
   value: string
   tooltip?: React.ReactNode
   popoverSide?: Side
-  chevron?: boolean
+  compact?: boolean
   onValueChange: (value: string) => void
 }
 
@@ -23,7 +24,7 @@ export function SelectInput({
   options,
   tooltip,
   popoverSide,
-  chevron = true,
+  compact = false,
   value,
   onValueChange,
   ...rest
@@ -38,13 +39,19 @@ export function SelectInput({
         onValueChange={onValueChange}
       >
         <Tooltip content={tooltip} side={popoverSide}>
-          <LSUI.SelectTrigger className="h-8 bg-transparent">
+          <LSUI.SelectTrigger 
+            className={`h-8 font-medium bg-transparent ${compact ? "px-0 justify-center" : "px-2"}`}>
             <LSUI.SelectValue />
+            {!compact && (
+              <LSUI.SelectIcon asChild>
+                <ChevronDown className="h-4 w-4 opacity-50"/>
+              </LSUI.SelectIcon>
+            )}
           </LSUI.SelectTrigger>
         </Tooltip>
 
         <LSUI.SelectContent
-        className="min-w-min"
+          className="min-w-min"
           side={popoverSide}
           position="popper"
           sideOffset={14}

packages/tldraw/yarn.lock

@@ -3107,6 +3107,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide-react@^0.292.0:
+  version "0.292.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.292.0.tgz#c8a06b2ccd8a348a88669def3c0291c035de2884"
+  integrity sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==
+
 magic-string@^0.26.7:
   version "0.26.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.7.tgz#caf7daf61b34e9982f8228c4527474dac8981d6f"

packages/ui/@/components/ui/select.tsx

@@ -11,6 +11,8 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
+const SelectIcon = SelectPrimitive.Icon
+
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
@@ -29,9 +31,6 @@ const SelectTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50"/>
-    </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
@@ -159,6 +158,7 @@ export {
   SelectTrigger,
   SelectContent,
   SelectLabel,
+  SelectIcon,
   SelectItem,
   SelectSeparator,
   SelectScrollUpButton,

packages/ui/src/ui.ts

@@ -59,6 +59,7 @@ import {
   Select,
   SelectContent,
   SelectGroup,
+  SelectIcon,
   SelectItem,
   SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator,
   SelectTrigger,
@@ -142,6 +143,7 @@ const shadui = {
   SelectContent,
   SelectLabel,
   SelectItem,
+  SelectIcon,
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,