enhance(ux): polish property editor interaction

deps/shui/src/logseq/shui/popup/core.cljs

@@ -9,6 +9,7 @@
 (def popover (util/lsui-wrap "Popover"))
 (def popover-trigger (util/lsui-wrap "PopoverTrigger"))
 (def popover-content (util/lsui-wrap "PopoverContent"))
+(def popover-remove-scroll (util/lsui-wrap "PopoverRemoveScroll"))
 (def dropdown-menu (util/lsui-wrap "DropdownMenu"))
 (def dropdown-menu-trigger (util/lsui-wrap "DropdownMenuTrigger"))
 (def dropdown-menu-content (util/lsui-wrap "DropdownMenuContent"))
@@ -115,6 +116,20 @@
           (js/setTimeout #(.focus target) 256))))
     [open?])
 
+  ;; disableOutsidePointerEvents
+  (rum/use-effect!
+    (fn []
+      (when-not as-dropdown?
+        (let [^js style js/document.body.style
+              set-pointer-event! #(set! (. style -pointerEvents) %)
+              try-unset! #(when (nil? (seq @*popups))
+                            (set-pointer-event! nil))]
+          (if open?
+            (set-pointer-event! "none")
+            (try-unset!))
+          #(try-unset!))))
+    [open?])
+
   (when-let [[x y _ height] position]
     (let [popup-root (if as-dropdown? dropdown-menu popover)
           popup-trigger (if as-dropdown? dropdown-menu-trigger popover-trigger)

packages/ui/@/components/ui/popover.tsx

@@ -3,6 +3,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover'
 
 // @ts-ignore
 import { cn } from '@/lib/utils'
+import { RemoveScroll } from 'react-remove-scroll'
 
 const Popover = PopoverPrimitive.Root
 
@@ -30,4 +31,6 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverArrow }
+const PopoverRemoveScroll = RemoveScroll
+
+export { Popover, PopoverTrigger, PopoverRemoveScroll, PopoverContent, PopoverArrow }

packages/ui/package.json

@@ -5,7 +5,7 @@
   "author": "Logseq",
   "scripts": {
     "watch:ui:examples": "parcel serve ./examples/index.html",
-    "build:ui:only": "parcel build --target ui --no-source-maps",
+    "build:ui:only": "parcel build --target ui",
     "build:ui": "rm -rf .parcel-cache && yarn build:ui:only",
     "watch:storybook": "storybook dev -p 6006",
     "postinstall": "yarn build:ui"
@@ -39,6 +39,7 @@
     "react-day-picker": "^8.9.1",
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
+    "react-remove-scroll": "^2.5.7",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.3.2",

packages/ui/src/ui.ts

@@ -66,7 +66,7 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger, PopoverArrow } from '@/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger, PopoverArrow, PopoverRemoveScroll } from '@/components/ui/popover'
 import {
   Dialog,
   DialogClose,
@@ -157,6 +157,7 @@ const shadui = {
   PopoverTrigger,
   PopoverContent,
   PopoverArrow,
+  PopoverRemoveScroll,
   Dialog,
   DialogPortal,
   DialogOverlay,

packages/ui/yarn.lock

@@ -8175,6 +8175,14 @@ react-remove-scroll-bar@^2.3.3:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll-bar@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz#cd2543b3ed7716c7c5b446342d21b0e0b303f47c"
+  integrity sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 [email protected]:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
@@ -8197,6 +8205,17 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
+  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.4"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"

resources/css/shui.css

@@ -238,6 +238,10 @@ html[data-theme=dark] {
   overflow-y: auto;
 }
 
+.ui__popover-content {
+  @apply !pointer-events-auto;
+}
+
 .ui__multi-select-content {
   @apply relative;
 

src/main/frontend/components/property.cljs

@@ -644,7 +644,7 @@
                                          :align "start"}
                          :auto-side? true
                          :auto-focus? true
-                         :as-dropdown? true}))}
+                         :as-dropdown? false}))}
          (:block/original-name property)))]))
 
 (defn- resolve-linked-block-if-exists