correction to Popper placement when RTL (#1842)

* correction to Popper placmement when RTL

* ExampleRTL defaults to auto

Author: jjagielka

src/lib/tooltip/theme.ts

@@ -4,7 +4,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 export type TooltipVariants = VariantProps<typeof tooltip>;
 
 export const tooltip = tv({
-  base: "absolute px-3 py-2 rounded-lg text-sm z-50 pointer-events-none",
+  base: "px-3 py-2 rounded-lg text-sm z-50 pointer-events-none",
   variants: {
     type: {
       light: "bg-white text-gray-800 dark:bg-white dark:text-gray-800 border border-gray-200 dark:border-gray-200",

src/lib/utils/Arrow.svelte

@@ -3,7 +3,7 @@
   import { getOppositePlacement, getSide } from "@floating-ui/utils";
   import type { ArrowProps } from "$lib/types";
 
-  let { placement = "top", cords, strategy = "absolute", class: className = "" }: ArrowProps = $props();
+  let { placement = "top", cords, class: className = "" }: ArrowProps = $props();
 
   const px = (n: number | undefined) => (n ? `${n}px` : "");
 
@@ -25,7 +25,6 @@
 
   function positioning(node: HTMLElement) {
     $effect(() => {
-      node.style.position = strategy;
       node.style.left = px(cords.x);
       node.style.top = px(cords.y);
       node.style.right = "";
@@ -44,7 +43,7 @@
   }
 </script>
 
-<div use:positioning class="popover-arrow clip pointer-events-none block h-[10px] w-[10px] border-b border-l border-inherit bg-inherit text-inherit {className}"></div>
+<div use:positioning class="popover-arrow clip pointer-events-none absolute block h-[10px] w-[10px] border-b border-l border-inherit bg-inherit text-inherit {className}"></div>
 
 <!--
 @component

src/lib/utils/Popper.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ParamsType, PopperProps, TriggeredToggleEvent } from "$lib/types";
-  import type { Coords, Middleware, Placement, Strategy } from "@floating-ui/dom";
+  import type { Coords, Middleware, Placement } from "@floating-ui/dom";
   import * as dom from "@floating-ui/dom";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
@@ -43,10 +43,9 @@
   let invoker: HTMLElement | null = null;
   let referenceElement: HTMLElement | null = null;
   let triggerEls: HTMLElement[] = [];
-  let arrowParams: { placement: Placement; cords: Partial<Coords>; strategy: Strategy } = $state({
+  let arrowParams: { placement: Placement; cords: Partial<Coords> } = $state({
     placement,
-    cords: { x: 0, y: 0 },
-    strategy
+    cords: { x: 0, y: 0 }
   });
 
   $effect(() => {
@@ -80,10 +79,9 @@
 
     return dom.computePosition(referenceElement ?? invoker, popover, { placement, middleware, strategy }).then(({ x, y, middlewareData: { arrow }, placement: pl, strategy }) => {
       if (popover) {
-        Object.assign(popover.style, { position: strategy, left: yOnly ? "0" : px(x), top: px(y) });
-
+        Object.assign(popover.style, { position: strategy, left: yOnly ? "0" : px(x), right: "auto", top: px(y) });
         if (arrow && arrowEl) {
-          arrowParams = { placement: pl, cords: { x: arrow.x, y: arrow.y }, strategy };
+          arrowParams = { placement: pl, cords: { x: arrow.x, y: arrow.y } };
         }
       }
     });

src/routes/utils/ExampleRTL.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   type NotificationDirection = "ltr" | "rtl" | "auto";
 
-  let { rtl = $bindable() }: { rtl?: NotificationDirection } = $props();
+  let { rtl = $bindable("auto") }: { rtl?: NotificationDirection } = $props();
 
-  if (rtl === undefined && document.dir) {
+  if (rtl === "auto" && document.dir) {
     rtl = document.dir as NotificationDirection;
   }