fix(popover): by replacing native Popover elements with Corvu Popover library fixing placement screen issues, simplify demo

Author: adaptive-shield-matrix

.roo/rules-code/solid_ui_library.md

@@ -178,9 +178,7 @@ Generated at: 2025-10-20 20:03
 - ~/interactive/toast/toastAdd.ts
 - ~/interactive/toast/Toaster.tsx
 - ~/interactive/toast/GlobalToasterState.ts
-- ~/interactive/popover/SimplePopover3.tsx
-- ~/interactive/popover/SimplePopover2.tsx
-- ~/interactive/popover/SimplePopover.tsx
+- ~/interactive/popover/CorvuPopover.tsx
 - ~/interactive/details/Details.tsx
 - ~/interactive/toggle/ToggleButton.tsx
 - ~/interactive/theme/t4theme.ts

lib/input/select/Multiselect.tsx

@@ -5,8 +5,7 @@ import { ct0, ct1 } from "~ui/i18n/ct0"
 import { t4multiselect } from "~ui/input/select/t4multiselect"
 import { buttonVariant } from "~ui/interactive/button/buttonCva"
 import { ButtonIcon } from "~ui/interactive/button/ButtonIcon"
-import type { ButtonIcon1Props } from "~ui/interactive/button/ButtonIcon1"
-import { SimplePopover3 } from "~ui/interactive/popover/SimplePopover3"
+import { CorvuPopover, type CorvuPopoverProps } from "~ui/interactive/popover/CorvuPopover"
 import { classArr } from "~ui/utils/ui/classArr"
 import { classMerge } from "~ui/utils/ui/classMerge"
 import type { SignalObject } from "~ui/utils/ui/createSignalObject"
@@ -18,15 +17,15 @@ import type { SelectionItem } from "~ui/utils/ui/SelectionItem"
 /**
  * https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/src/Checkbox.tsx
  */
-export type MultiselectProps<T extends string = string> = {
-  buttonProps: ButtonIcon1Props
+export interface MultiselectProps<T extends string = string> extends MultiselectState<T>, HasClass, HasChildren {
+  buttonProps: CorvuPopoverProps
   textNoEntries?: string
   textAddEntry?: string
-} & MultiselectState<T> &
-  HasClass &
-  HasChildren
+}
 
-export type MultiselectState<T extends string = string> = MultiselectStateValue<T> & MultiselectStateOptions<T>
+export interface MultiselectState<T extends string = string>
+  extends MultiselectStateValue<T>,
+    MultiselectStateOptions<T> {}
 
 export type MultiselectStateValue<T extends string = string> = {
   valueSignal: SignalObject<SelectionItem<T>[]>
@@ -51,14 +50,15 @@ export function Multiselect<T extends string = string>(p: MultiselectProps<T>) {
         "rounded-md",
         "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
         "flex flex-col items-center justify-center gap-1", // layout
+        p.class,
       )}
     >
       <SelectedValues valueSignal={p.valueSignal} />
-      <SimplePopover3 buttonProps={buttonProps}>
+      <CorvuPopover {...buttonProps}>
         <div class={classArr("bg-white dark:bg-black", "max-h-dvh", "grid grid-cols-3 gap-x-2 gap-y-1")}>
           <OptionList valueSignal={p.valueSignal} getOptions={p.getOptions} />
         </div>
-      </SimplePopover3>
+      </CorvuPopover>
     </div>
   )
 }

lib/interactive/popover/CorvuPopover.tsx

@@ -0,0 +1,60 @@
+import Popover from "@corvu/popover"
+import type { JSX } from "solid-js"
+import { buttonCva2 } from "~ui/interactive/button/buttonCva"
+import type { ButtonIcon1Props } from "~ui/interactive/button/ButtonIcon1"
+import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
+import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
+import { Icon1 } from "~ui/static/icon/Icon1"
+import { classArr } from "~ui/utils/ui/classArr"
+import type { HasChildren } from "~ui/utils/ui/HasChildren"
+import type { HasClass } from "~ui/utils/ui/HasClass"
+
+export interface CorvuPopoverProps extends HasClass, HasChildren, ButtonIcon1Props {
+  // buttonProps: ButtonIcon1Props
+  buttonChildren?: JSX.Element
+}
+
+export function CorvuPopover(p: CorvuPopoverProps) {
+  // const [a, buttonProps] = splitProps(p.buttonProps, ["onClick"])
+  return (
+    <Popover
+      floatingOptions={{
+        offset: 8,
+        flip: true,
+        shift: true,
+      }}
+    >
+      <Popover.Trigger
+        class={buttonCva2(
+          p.variant,
+          p.size,
+          classesButtonClickAnimation,
+          (p.disabled || p.isDisabled?.()) && classesButtonDisabled,
+          p.class,
+        )}
+      >
+        {p.icon && <Icon1 path={p.icon} class={buttonIconCva(p.variant, p.buttonChildren && "mr-2", p.iconClass)} />}
+        {p.buttonChildren}
+        {p.iconRight && (
+          <Icon1 path={p.iconRight} class={buttonIconCva(p.variant, p.buttonChildren && "ml-2", p.iconClass)} />
+        )}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          class={classArr(
+            "z-50", // positioning
+            "px-3 py-3", // spacing
+            "rounded-lg", // border
+            "dark:border", // border
+            "bg-white dark:bg-black", // background
+            "shadow-md", // shadow
+            "data-open:animate-in data-open:fade-in-50% data-open:slide-in-from-top-1 data-closed:animate-out data-closed:fade-out-50% data-closed:slide-out-to-top-1", // animations
+          )}
+        >
+          {p.children}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover>
+  )
+}