@pathscale/ui 1.1.63 → 1.1.64

package/dist/components/_shared/index.d.ts

@@ -0,0 +1 @@
+export { createOverlayPosition, type OverlayPlacement, type OverlayAlign, type CreateOverlayPositionOptions, } from "./overlayPosition";

package/dist/components/_shared/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__overlayPosition_js_25962dee__ from "./overlayPosition.js";
+var __webpack_exports__createOverlayPosition = __WEBPACK_EXTERNAL_MODULE__overlayPosition_js_25962dee__.createOverlayPosition;
+export { __webpack_exports__createOverlayPosition as createOverlayPosition };

package/dist/components/_shared/overlayPosition.d.ts

@@ -0,0 +1,19 @@
+import { type Accessor, type JSX } from "solid-js";
+export type OverlayPlacement = "top" | "bottom" | "left" | "right";
+export type OverlayAlign = "start" | "center" | "end";
+export interface CreateOverlayPositionOptions {
+    open: Accessor<boolean>;
+    triggerRef: Accessor<HTMLElement | undefined>;
+    overlayRef: Accessor<HTMLElement | undefined>;
+    placement: Accessor<OverlayPlacement>;
+    offset: Accessor<number>;
+    autoFlip?: Accessor<boolean>;
+    align?: Accessor<OverlayAlign>;
+    matchTriggerWidth?: Accessor<boolean>;
+    minWidth?: Accessor<number | undefined>;
+    viewportPadding?: Accessor<number>;
+}
+export declare const createOverlayPosition: (options: CreateOverlayPositionOptions) => {
+    style: Accessor<JSX.CSSProperties>;
+    placement: Accessor<OverlayPlacement>;
+};

package/dist/components/_shared/overlayPosition.js

@@ -0,0 +1,115 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const oppositePlacement = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+};
+const clamp = (value, min, max)=>{
+    if (max < min) return min;
+    return Math.min(Math.max(value, min), max);
+};
+const getMainAxisSize = (placement, rect)=>"top" === placement || "bottom" === placement ? rect.height : rect.width;
+const getAvailableSpace = (rect, viewportWidth, viewportHeight, padding)=>({
+        top: rect.top - padding,
+        bottom: viewportHeight - rect.bottom - padding,
+        left: rect.left - padding,
+        right: viewportWidth - rect.right - padding
+    });
+const resolvePlacement = (preferred, triggerRect, overlayRect, viewportWidth, viewportHeight, padding, offset, autoFlip)=>{
+    if (!autoFlip) return preferred;
+    const available = getAvailableSpace(triggerRect, viewportWidth, viewportHeight, padding);
+    const needed = getMainAxisSize(preferred, overlayRect) + offset;
+    if (available[preferred] >= needed) return preferred;
+    const opposite = oppositePlacement[preferred];
+    return available[opposite] > available[preferred] ? opposite : preferred;
+};
+const getCrossAxisCoordinate = (align, triggerStart, triggerSize, overlaySize)=>{
+    if ("start" === align) return triggerStart;
+    if ("end" === align) return triggerStart + triggerSize - overlaySize;
+    return triggerStart + (triggerSize - overlaySize) / 2;
+};
+const round = (value)=>Math.round(100 * value) / 100;
+const createOverlayPosition = (options)=>{
+    const [style, setStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        visibility: "hidden"
+    });
+    const [resolvedPlacement, setResolvedPlacement] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(options.placement());
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!options.open()) {
+            setResolvedPlacement(options.placement());
+            setStyle({
+                visibility: "hidden"
+            });
+            return;
+        }
+        const trigger = options.triggerRef();
+        const overlay = options.overlayRef();
+        if (!trigger || !overlay) return;
+        const viewportPadding = options.viewportPadding?.() ?? 8;
+        const align = options.align?.() ?? "center";
+        const autoFlip = options.autoFlip?.() ?? true;
+        let frame = 0;
+        const update = ()=>{
+            const triggerRect = trigger.getBoundingClientRect();
+            const overlayRect = overlay.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const offset = options.offset();
+            const placement = resolvePlacement(options.placement(), triggerRect, overlayRect, viewportWidth, viewportHeight, viewportPadding, offset, autoFlip);
+            let top = 0;
+            let left = 0;
+            switch(placement){
+                case "top":
+                    top = triggerRect.top - overlayRect.height - offset;
+                    left = getCrossAxisCoordinate(align, triggerRect.left, triggerRect.width, overlayRect.width);
+                    break;
+                case "bottom":
+                    top = triggerRect.bottom + offset;
+                    left = getCrossAxisCoordinate(align, triggerRect.left, triggerRect.width, overlayRect.width);
+                    break;
+                case "left":
+                    top = getCrossAxisCoordinate(align, triggerRect.top, triggerRect.height, overlayRect.height);
+                    left = triggerRect.left - overlayRect.width - offset;
+                    break;
+                case "right":
+                    top = getCrossAxisCoordinate(align, triggerRect.top, triggerRect.height, overlayRect.height);
+                    left = triggerRect.right + offset;
+                    break;
+            }
+            const maxTop = viewportHeight - overlayRect.height - viewportPadding;
+            const maxLeft = viewportWidth - overlayRect.width - viewportPadding;
+            setResolvedPlacement(placement);
+            setStyle({
+                position: "fixed",
+                top: `${round(clamp(top, viewportPadding, maxTop))}px`,
+                left: `${round(clamp(left, viewportPadding, maxLeft))}px`,
+                "max-width": `${round(Math.max(0, viewportWidth - 2 * viewportPadding))}px`,
+                ...options.matchTriggerWidth?.() ? {
+                    "min-width": `${round(Math.max(triggerRect.width, options.minWidth?.() ?? 0))}px`
+                } : {}
+            });
+        };
+        const schedule = ()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(update);
+        };
+        schedule();
+        window.addEventListener("resize", schedule);
+        window.addEventListener("scroll", schedule, true);
+        const resizeObserver = "undefined" != typeof ResizeObserver ? new ResizeObserver(schedule) : void 0;
+        resizeObserver?.observe(trigger);
+        resizeObserver?.observe(overlay);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            cancelAnimationFrame(frame);
+            window.removeEventListener("resize", schedule);
+            window.removeEventListener("scroll", schedule, true);
+            resizeObserver?.disconnect();
+        });
+    });
+    return {
+        style,
+        placement: resolvedPlacement
+    };
+};
+export { createOverlayPosition };

package/dist/components/dropdown/Dropdown.css

@@ -71,10 +71,8 @@
   }
 
   .dropdown__popover {
-    position: absolute;
+    position: fixed;
     z-index: 80;
-    top: calc(100% + var(--dropdown-offset, 6px));
-    inset-inline-start: 0;
     min-width: min(13.75rem, calc(100vw - 2rem));
     max-width: min(48svw, calc(100vw - 2rem));
     max-height: min(24rem, 70vh);
@@ -101,13 +99,44 @@
   .dropdown__popover[data-open="true"] {
     visibility: visible;
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: scale(1);
     pointer-events: auto;
   }
 
-  .dropdown__popover[data-align="end"] {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+  .dropdown__popover[data-placement="top"] {
+    transform: translateY(4px) scale(0.96);
+    transform-origin: bottom;
+  }
+
+  .dropdown__popover[data-placement="top"][data-open="true"] {
+    transform: translateY(0) scale(1);
+  }
+
+  .dropdown__popover[data-placement="bottom"] {
+    transform: translateY(-4px) scale(0.96);
+    transform-origin: top;
+  }
+
+  .dropdown__popover[data-placement="bottom"][data-open="true"] {
+    transform: translateY(0) scale(1);
+  }
+
+  .dropdown__popover[data-placement="left"] {
+    transform: translateX(4px) scale(0.96);
+    transform-origin: right;
+  }
+
+  .dropdown__popover[data-placement="left"][data-open="true"] {
+    transform: translateX(0) scale(1);
+  }
+
+  .dropdown__popover[data-placement="right"] {
+    transform: translateX(-4px) scale(0.96);
+    transform-origin: left;
+  }
+
+  .dropdown__popover[data-placement="right"][data-open="true"] {
+    transform: translateX(0) scale(1);
   }
 
   .dropdown__menu {

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,11 +1,15 @@
 import "./Dropdown.css";
 import { type JSX } from "solid-js";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
 type DropdownAlign = "start" | "end";
+type DropdownPlacement = OverlayPlacement;
 type DropdownRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & {
     children: JSX.Element;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    placement?: DropdownPlacement;
+    autoFlip?: boolean;
     disabled?: boolean;
     dataTheme?: string;
     className?: string;
@@ -15,6 +19,8 @@ type DropdownTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
 declare const DropdownTrigger: (props: DropdownTriggerProps) => JSX.Element;
 type DropdownMenuProps = JSX.HTMLAttributes<HTMLDivElement> & {
     align?: DropdownAlign;
+    placement?: DropdownPlacement;
+    autoFlip?: boolean;
     sideOffset?: number;
 };
 declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
@@ -35,4 +41,4 @@ declare const Dropdown: ((props: DropdownRootProps) => JSX.Element) & {
     Separator: (props: DropdownSeparatorProps) => JSX.Element;
 };
 export { Dropdown as default, Dropdown, DropdownRoot, DropdownTrigger, DropdownMenu, DropdownItem, DropdownGroup, DropdownSeparator, };
-export type { DropdownAlign, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, };
+export type { DropdownAlign, DropdownPlacement, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, };

package/dist/components/dropdown/Dropdown.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Dropdown.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__ from "./Dropdown.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
 const DropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
@@ -25,6 +26,8 @@ const DropdownRoot = (props)=>{
         "open",
         "defaultOpen",
         "onOpenChange",
+        "placement",
+        "autoFlip",
         "disabled",
         "dataTheme",
         "className",
@@ -38,10 +41,13 @@ const DropdownRoot = (props)=>{
     const [focusedKey, setFocusedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const [focusRequest, setFocusRequest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [triggerRef, setTriggerRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const [menuRef, setMenuRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const [rootRef, setRootRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const isControlled = ()=>void 0 !== local.open;
     const isDisabled = ()=>Boolean(local.disabled);
     const open = ()=>isControlled() ? Boolean(local.open) : internalOpen();
+    const placement = ()=>local.placement ?? "bottom";
+    const autoFlip = ()=>local.autoFlip ?? true;
     const setRootRef = (el)=>{
         setRootRefSignal(el);
         if ("function" == typeof local.ref) local.ref(el);
@@ -49,6 +55,9 @@ const DropdownRoot = (props)=>{
     const setTriggerRef = (el)=>{
         setTriggerRefSignal(el);
     };
+    const setMenuRef = (el)=>{
+        setMenuRefSignal(el);
+    };
     const getEnabledItems = ()=>items().filter((item)=>!item.disabled);
     const focusItem = (item)=>{
         if (!item) return;
@@ -114,9 +123,10 @@ const DropdownRoot = (props)=>{
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
         const handlePointerDown = (event)=>{
             if (!open()) return;
-            const root = rootRef();
-            if (!root) return;
-            if (root.contains(event.target)) return;
+            const target = event.target;
+            if (rootRef()?.contains(target)) return;
+            if (menuRef()?.contains(target)) return;
+            if (triggerRef()?.contains(target)) return;
             setOpen(false);
         };
         document.addEventListener("pointerdown", handlePointerDown);
@@ -130,6 +140,10 @@ const DropdownRoot = (props)=>{
             disabled: isDisabled,
             triggerId,
             menuId,
+            placement,
+            autoFlip,
+            triggerRef,
+            menuRef,
             focusedKey,
             setFocusedKey,
             setOpen,
@@ -140,6 +154,7 @@ const DropdownRoot = (props)=>{
             registerItem,
             unregisterItem,
             setTriggerRef,
+            setMenuRef,
             setRootRef
         },
         get children () {
@@ -267,6 +282,8 @@ const DropdownMenu = (props)=>{
         "class",
         "children",
         "align",
+        "placement",
+        "autoFlip",
         "sideOffset",
         "onKeyDown",
         "style",
@@ -283,6 +300,15 @@ const DropdownMenu = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
         return _el$4;
     })();
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: ctx.open,
+        triggerRef: ctx.triggerRef,
+        overlayRef: ctx.menuRef,
+        placement: ()=>local.placement ?? ctx.placement(),
+        offset: ()=>local.sideOffset ?? 6,
+        autoFlip: ()=>local.autoFlip ?? ctx.autoFlip(),
+        align: ()=>"end" === local.align ? "end" : "start"
+    });
     const handleKeyDown = (event)=>{
         invokeEventHandler(local.onKeyDown, event);
         if (event.defaultPrevented) return;
@@ -317,47 +343,65 @@ const DropdownMenu = (props)=>{
         }
     };
     const menuStyle = ()=>{
-        if ("string" == typeof local.style) return `${local.style}; --dropdown-offset: ${local.sideOffset ?? 6}px;`;
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
         return {
             ...local.style ?? {},
-            "--dropdown-offset": `${local.sideOffset ?? 6}px`
+            ...overlayStyle
         };
     };
-    return (()=>{
-        var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get id () {
-                return ctx.menuId;
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.popover, local.class)
-            }), {
-            get role () {
-                return local.role ?? "menu";
-            },
-            "data-slot": "dropdown-popover",
-            get ["data-open"] () {
-                return ctx.open() ? "true" : "false";
-            },
-            get ["data-align"] () {
-                return local.align ?? "start";
-            },
-            get ["aria-hidden"] () {
-                return ctx.open() ? "false" : "true";
-            },
-            get style () {
-                return menuStyle();
-            },
-            onKeyDown: handleKeyDown
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.menu
-            }), {
-            "data-slot": "dropdown-menu"
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
-        return _el$6;
-    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return ctx.open();
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                get children () {
+                    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+                    var _ref$ = ctx.setMenuRef;
+                    "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$6) : ctx.setMenuRef = _el$6;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        get id () {
+                            return ctx.menuId;
+                        }
+                    }, ()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.popover, local.class)
+                        }), {
+                        get role () {
+                            return local.role ?? "menu";
+                        },
+                        "data-slot": "dropdown-popover",
+                        get ["data-open"] () {
+                            return ctx.open() ? "true" : "false";
+                        },
+                        get ["data-align"] () {
+                            return local.align ?? "start";
+                        },
+                        get ["data-placement"] () {
+                            return overlayPosition.placement();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.open() ? "false" : "true";
+                        },
+                        get style () {
+                            return menuStyle();
+                        },
+                        onKeyDown: handleKeyDown
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.menu
+                        }), {
+                        "data-slot": "dropdown-menu"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+                    return _el$6;
+                }
+            });
+        }
+    });
 };
 const DropdownItem = (props)=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);

package/dist/components/dropdown/index.d.ts

@@ -1,2 +1,2 @@
 export { default, Dropdown } from "./Dropdown";
-export type { DropdownAlign, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, } from "./Dropdown";
+export type { DropdownAlign, DropdownPlacement, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, } from "./Dropdown";

package/dist/components/popover/Popover.css

@@ -5,7 +5,7 @@
   }
 
   .popover {
-    position: absolute;
+    position: fixed;
     z-index: var(--z-overlay, 70);
     border-radius: 1.5rem;
     padding: 0;
@@ -26,51 +26,43 @@
   .popover[data-open="true"] {
     opacity: 1;
     pointer-events: auto;
-    transform: translateY(0) scale(1);
+    transform: scale(1);
   }
 
   .popover[data-placement="top"] {
-    bottom: calc(100% + var(--popover-offset, 8px));
-    left: 50%;
-    transform: translateX(-50%) translateY(4px) scale(0.96);
+    transform: translateY(4px) scale(0.96);
     transform-origin: bottom;
   }
 
   .popover[data-placement="top"][data-open="true"] {
-    transform: translateX(-50%) translateY(0) scale(1);
+    transform: translateY(0) scale(1);
   }
 
   .popover[data-placement="bottom"] {
-    top: calc(100% + var(--popover-offset, 8px));
-    left: 50%;
-    transform: translateX(-50%) translateY(-4px) scale(0.96);
+    transform: translateY(-4px) scale(0.96);
     transform-origin: top;
   }
 
   .popover[data-placement="bottom"][data-open="true"] {
-    transform: translateX(-50%) translateY(0) scale(1);
+    transform: translateY(0) scale(1);
   }
 
   .popover[data-placement="left"] {
-    right: calc(100% + var(--popover-offset, 8px));
-    top: 50%;
-    transform: translateX(4px) translateY(-50%) scale(0.96);
+    transform: translateX(4px) scale(0.96);
     transform-origin: right;
   }
 
   .popover[data-placement="left"][data-open="true"] {
-    transform: translateX(0) translateY(-50%) scale(1);
+    transform: translateX(0) scale(1);
   }
 
   .popover[data-placement="right"] {
-    left: calc(100% + var(--popover-offset, 8px));
-    top: 50%;
-    transform: translateX(-4px) translateY(-50%) scale(0.96);
+    transform: translateX(-4px) scale(0.96);
     transform-origin: left;
   }
 
   .popover[data-placement="right"][data-open="true"] {
-    transform: translateX(0) translateY(-50%) scale(1);
+    transform: translateX(0) scale(1);
   }
 
   .popover__dialog {

package/dist/components/popover/Popover.d.ts

@@ -1,13 +1,15 @@
 import "./Popover.css";
 import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
+export type PopoverPlacement = OverlayPlacement;
 export type PopoverRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
     isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     placement?: PopoverPlacement;
+    autoFlip?: boolean;
     offset?: number;
     closeOnOutsideClick?: boolean;
     closeOnEscape?: boolean;