wip: replace select input

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

@@ -12,7 +12,6 @@
   "devDependencies": {
     "@radix-ui/react-context-menu": "^2.1.0",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
-    "@radix-ui/react-select": "^1.2.1",
     "@radix-ui/react-separator": "^1.0.1",
     "@radix-ui/react-slider": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.1",

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

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import * as Select from '@radix-ui/react-select'
-import { TablerIcon } from '../icons'
 import { Tooltip } from '../Tooltip'
 import type { Side } from '@radix-ui/react-popper'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export interface SelectOption {
   value: string
   label: React.ReactNode
@@ -29,53 +30,39 @@ export function SelectInput({
 }: SelectInputProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   return (
-    <div {...rest} className="tl-select-input">
-      <Select.Root
+    <div {...rest}>
+      <LSUI.Select
         open={isOpen}
         onOpenChange={setIsOpen}
         value={value}
         onValueChange={onValueChange}
       >
         <Tooltip content={tooltip} side={popoverSide}>
-          <Select.Trigger className="tl-select-input-trigger">
-            <div className="tl-select-input-trigger-value">
-              <Select.Value />
-            </div>
-            {chevron && (
-              <Select.Icon style={{ lineHeight: 1 }} className="ml-1 md:ml-3">
-                <TablerIcon name={isOpen ? 'chevron-up' : 'chevron-down'} />
-              </Select.Icon>
-            )}
-          </Select.Trigger>
+          <LSUI.SelectTrigger className="h-8 bg-transparent">
+            <LSUI.SelectValue />
+          </LSUI.SelectTrigger>
         </Tooltip>
 
-        <Select.Portal className="tl-select-input-portal">
-          <Select.Content
-            className="tl-select-input-content"
-            side={popoverSide}
-            position="popper"
-            sideOffset={14}
-            align="center"
-            onKeyDown={e => e.stopPropagation()}
-          >
-            <Select.ScrollUpButton />
-            <Select.Viewport className="tl-select-input-viewport">
-              {options.map(option => {
-                return (
-                  <Select.Item
-                    className="tl-select-input-select-item"
-                    key={option.value}
-                    value={option.value}
-                  >
-                    <Select.ItemText>{option.label}</Select.ItemText>
-                  </Select.Item>
-                )
-              })}
-            </Select.Viewport>
-            <Select.ScrollDownButton />
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
+        <LSUI.SelectContent
+        className="min-w-min"
+          side={popoverSide}
+          position="popper"
+          sideOffset={14}
+          align="center"
+          onKeyDown={e => e.stopPropagation()}
+        >
+          {options.map(option => {
+            return (
+              <LSUI.SelectItem
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </LSUI.SelectItem>
+            )
+          })}
+        </LSUI.SelectContent>
+      </LSUI.Select>
     </div>
   )
 }

packages/tldraw/apps/tldraw-logseq/src/styles.css

@@ -309,59 +309,6 @@ html[data-theme='light'] {
 
 .tl-tools-floating-panel {
   flex-flow: column;
-
-  .tl-select-input-trigger {
-    @apply p-0 text-xs;
-
-    height: 32px;
-    min-width: 32px;
-  }
-
-  .tl-select-input-trigger-value {
-    @apply font-semibold justify-center;
-  }
-}
-
-button.tl-select-input-trigger {
-  @apply flex items-center px-3;
-  box-shadow: 0 0 0 1px var(--ls-secondary-border-color);
-  background-color: var(--ls-secondary-background-color);
-  border-radius: 0.25rem;
-  font-size: 16px;
-  height: 100%;
-  color: var(--ls-secondary-text-color);
-}
-
-.tl-select-input-trigger-value {
-  @apply flex items-center justify-start flex-1;
-}
-
-.tl-select-input-viewport {
-  border-radius: 8px;
-  background-color: var(--ls-secondary-background-color);
-}
-
-.tl-select-input-select-item {
-  cursor: default;
-  padding: 4px 12px;
-  outline-offset: -1px;
-
-  color: var(--ls-secondary-text-color);
-
-  &[data-state='unchecked']:hover {
-    background-color: var(--ls-tertiary-background-color);
-    color: var(--ls-primary-text-color);
-  }
-
-  &[data-state='checked'] {
-    background-color: or(--ls-whiteboard-select-background-selected, --lx-accent-09, --color-indigo-500);
-    color: #fff;
-  }
-}
-
-.tl-select-input-content {
-  z-index: 100;
-  font-family: var(--ls-font-family);
 }
 
 .tl-geometry-tools-pane-anchor {

packages/tldraw/yarn.lock

@@ -626,14 +626,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.1"
 
-"@radix-ui/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz#93b0ff95f65e2264a05b14ef1031ec798243dd6f"
-  integrity sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.2"
-
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
@@ -645,17 +637,6 @@
     "@radix-ui/react-primitive" "1.0.1"
     "@radix-ui/react-slot" "1.0.1"
 
-"@radix-ui/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.2.tgz#d50da00bfa2ac14585319efdbbb081d4c5a29a97"
-  integrity sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-slot" "1.0.1"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
@@ -702,18 +683,6 @@
     "@radix-ui/react-use-callback-ref" "1.0.0"
     "@radix-ui/react-use-escape-keydown" "1.0.2"
 
-"@radix-ui/[email protected]":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz#63844d8e6bbcd010a513e7176d051c3c4044e09e"
-  integrity sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-escape-keydown" "1.0.2"
-
 "@radix-ui/react-dropdown-menu@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.1.tgz#dbc90676df7fb313d6b1eb204fdb434dbb724d15"
@@ -745,16 +714,6 @@
     "@radix-ui/react-primitive" "1.0.1"
     "@radix-ui/react-use-callback-ref" "1.0.0"
 
-"@radix-ui/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.2.tgz#5fe129cbdb5986d0a3ae16d14c473c243fe3bc79"
-  integrity sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
@@ -804,23 +763,6 @@
     "@radix-ui/react-use-size" "1.0.0"
     "@radix-ui/rect" "1.0.0"
 
-"@radix-ui/[email protected]":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.1.tgz#54f060941c981e965ff5d6b64e152d6298d2326e"
-  integrity sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@floating-ui/react-dom" "0.7.2"
-    "@radix-ui/react-arrow" "1.0.2"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-    "@radix-ui/react-use-rect" "1.0.0"
-    "@radix-ui/react-use-size" "1.0.0"
-    "@radix-ui/rect" "1.0.0"
-
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.1.tgz#169c5a50719c2bb0079cf4c91a27aa6d37e5dd33"
@@ -829,14 +771,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.1"
 
-"@radix-ui/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.2.tgz#102370b1027a767a371cab0243be4bc664f72330"
-  integrity sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.2"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
@@ -854,14 +788,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.1"
 
-"@radix-ui/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
-  integrity sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-slot" "1.0.1"
-
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.1.tgz#475621f63aee43faa183a5270f35d49e530de3d7"
@@ -878,34 +804,6 @@
     "@radix-ui/react-use-callback-ref" "1.0.0"
     "@radix-ui/react-use-controllable-state" "1.0.0"
 
-"@radix-ui/react-select@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.1.tgz#0c8fadc9a134709036add7c9c7c8581e17962040"
-  integrity sha512-GULRMITaOHNj79BZvQs3iZO0+f2IgI8g5HDhMi7Bnc13t7IlG86NFtOCfTLme4PNZdEtU+no+oGgcl6IFiphpQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.0"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.2"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-dismissable-layer" "1.0.3"
-    "@radix-ui/react-focus-guards" "1.0.0"
-    "@radix-ui/react-focus-scope" "1.0.2"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-popper" "1.1.1"
-    "@radix-ui/react-portal" "1.0.2"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-slot" "1.0.1"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-    "@radix-ui/react-use-previous" "1.0.0"
-    "@radix-ui/react-visually-hidden" "1.0.2"
-    aria-hidden "^1.1.1"
-    react-remove-scroll "2.5.5"
-
 "@radix-ui/react-separator@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.1.tgz#0ff3036c7f499fee9ea99268dc9ebf16055e356f"
@@ -1031,14 +929,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
-"@radix-ui/[email protected]":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz#29b117a59ef09a984bdad12cb98d81e8350be450"
-  integrity sha512-qirnJxtYn73HEk1rXL12/mXnu2rwsNHDID10th2JGtdK25T9wX+mxRmGt7iPSahw512GbZOc0syZX1nLQGoEOg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.2"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"