fedorovvvv/svelte-floating-ui

Svelte✨ Floating UI 🎈

Leonardo re Vinci

Peace and Love 💙💛

🎸 Languages

🪄 Technologies

🕹️ Tools

👾 Who am I

Write to me if you find out🥲

🌟 Major Projects

There are too many of them.. As soon as there is time, I will definitely add them
But now I'm working on Cue

Statistics🗓

svelte-floating-ui's Issues

Add support for virtual elements

Hi,

Virtual elements are not supported since ReferenceAction only accepts HTMLElement.

The type signature for ReferenceAction is:

type ReferenceAction = (node: HTMLElement) => void;

For instance, in svelte-popperjs the type signature is:

type ReferenceAction = (
	node: Element | VirtualElement | Readable<VirtualElement>
) => {
	destroy?(): void;
};

Do you plan to add support for virtual elements?

Container queries and 'fixed'

Hi @fedorovvvv can svelte-floating-ui work inside a inline-size container with a fixed element?

It defaults to the root document to calculate the fixed position, is there a way to override this to use the container root instead?

RELP:
https://svelte.dev/repl/897efd599c4748099f65b2f73fc82685?version=4.0.0

Thanks

Upgrading today from `"@sveltejs/kit": "1.30.0"` to `"@sveltejs/kit": "2.0.0"` I'm getting a warning

Upgrading today from "@sveltejs/kit": "1.30.0" to "@sveltejs/kit": "2.0.0" I'm getting this warning:

WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]
[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Can we please fix this?

Arrow not working in svelte 4 with typescript

I tried implementing Arrow in the following manner as per README:

<script lang="ts">
	import { fade } from 'svelte/transition';
	import { offset, flip, shift } from 'svelte-floating-ui/dom';
	import { createFloatingActions, arrow } from 'svelte-floating-ui';
	import { writable } from 'svelte/store';

	const arrowRef = writable(null) as unknown as HTMLElement;
	const [floatingRef, floatingContent] = createFloatingActions({
		strategy: 'absolute',
		placement: 'bottom',
		middleware: [offset(6), flip(), shift(), arrow({ element: arrowRef })],
		onComputed({ placement, middlewareData }) {
			const { x, y } = middlewareData.arrow;
			const staticSide = {
				top: 'bottom',
				right: 'left',
				bottom: 'top',
				left: 'right',
			}[placement.split('-')[0]];

			Object.assign($arrowRef!.style, {
				left: x != null ? `${x}px` : '',
				top: y != null ? `${y}px` : '',
				[staticSide]: '-4px',
			});
		},
	});

	export let tip: string;

	let showTooltip = true;
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
	class="sp-survey--tooltip--wrapper"
	use:floatingRef
	on:mouseenter={() => (showTooltip = true)}
	on:mouseleave={() => (showTooltip = false)}>
	{#if showTooltip}
		<div
			style="position:absolute"
			use:floatingContent
			class="sp-survey--tooltip--content"
			transition:fade|global>
			{tip}

			<div
				class="arrow"
				bind:this={$arrowRef} />
		</div>
	{/if}
	<slot />
</div>

<style>
	.sp-survey--tooltip--content {
		background-color: #000;
		color: #fff;
		padding: 0.5rem;
		border-radius: 0.25rem;
		font-size: 0.75rem;
		opacity: 0.8;
		z-index: 9999;
		overflow: auto;
		display: inline-block;
	}

	.arrow {
		position: absolute;
		bottom: 100%;
		left: 50%;
		margin-left: -0.5rem;
		border-width: 0.5rem;
		border-style: solid;
		border-color: transparent transparent #000 transparent;
		z-index: 9999;
	}
</style>

Under staticSide under Object.assign function I get the following error:

A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

My x and y are also giving me an error of :

Property 'x' (or y) does not exist on type '(Partial<Coords> & { centerOffset: number; alignmentOffset?: number | undefined; }) | undefined'.ts

when I bind $arrowRef, the error message states:

No overload matches this call. Overload 1 of 2, '(store: SvelteStore<any>): any', gave the following error. Argument of type 'HTMLElement' is not assignable to parameter of type 'SvelteStore<any>'. Property 'subscribe' is missing in type 'HTMLElement' but required in type 'SvelteStore<any>'. Overload 2 of 2, '(store: SvelteStore<any> | null | undefined): any', gave the following error. Argument of type 'HTMLElement' is not assignable to parameter of type 'SvelteStore<any>'.ts(2769)

The arrow is not showing in the preview.

Do You have any suggestions?

missing exports condition using svelteKit V2

After the migration to svelteKit 2.x, I am getting the following message on starting the dev server:

WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.
 
[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Do you mind fixing this?

A way to destroy the auto update function that ties to the scrolling

In this demo, I have a button that triggers a floating tooltip when mouse enter, and remove the tooltip when mouse leave. Obviously I want the onComputed() to run when the tooltip is showing. However, there doesn't seem to be an easy way to turn it off on-demand when the tooltip is hidden. As a result, you can see the console message keeps printing.

I know you mentioned in #8 that autoUpdate() is unavoidable when the tooltip is out of view. But what I'm asking is a way to completely reset the whole floating-ui back to before the first call to floatingContent().

Or is this request more appropriate for the upstream?

<script lang="ts">
    import { createFloatingActions } from 'svelte-floating-ui'

    let showTooltip = false

    const [floatingRef, floatingContent] = createFloatingActions({
        onComputed({ placement, middlewareData }) {
            if (!showTooltip) {
                console.log('I dont want to see this')
            }
        },
    })
</script>

<div style="overflow:auto; height: 500px; width:500px; border: 1px solid;">
    <div style="width:500px; height: 1200px; display:flex; align-items: center; justify-content: center;">
        <button on:mouseenter={() => (showTooltip = true)} on:mouseleave={() => (showTooltip = false)} use:floatingRef>Hello</button>

        {#if showTooltip}
            <div style="position:absolute; border: 1px solid; padding:4px;" use:floatingContent>Tooltip is a long one</div>
        {/if}
    </div>
</div>

Module not found in webpack 5

I have this error when i compile with webpack 5 :

Module not found: Error: Can't resolve './core' in '/var/www/svelte-app/node_modules/svelte-floating-ui'

Any idea ?
thank you

TypeScript error on floating-ui >= 1.6.0

Hey, there seems to be a type mismatch, when upgrading dependencies to:

• "@floating-ui/core": "1.6.0",
• "@floating-ui/dom": "1.6.1",

https://github.com/fedorovvvv/svelte-floating-ui/blob/a1f7bee81ed60a2dcbe143dfc4b0cefd48cde22a/src/lib/index.ts#L40C13-L40C72

Argument of type 'ComputeConfig' is not assignable to parameter of type 'Partial<{ placement?: Placement; strategy?: Strategy; middleware?: (false | { name: string; options?: any; fn: (state: { platform: Platform; placement: Placement; ... 6 more ...; elements: Elements; }) => Promisable<...>; })[]; platform?: Platform; }>'.
  Types of property 'platform' are incompatible.

Are there any plans to bump the dependencies?

Does not work properly with svelte-portal

When attempting to use svelte-floating-ui with svelte-portal the floating element initially renders in the wrong position. Resizing the window or closing and opening the floating UI fixes it (at least, closing and opening controlled by display: none/block;). If I were to make an educated guess I would say that the floating ui calcualtions are being done before the floating element is moved to the portal.

Here is some example code:

<script lang="ts">
  import Portal from 'svelte-portal';
  import { offset, flip, shift } from '@floating-ui/dom';
  import { createFloatingActions } from 'svelte-floating-ui';

  const [floatingRef, floatingContent] = createFloatingActions({
    strategy: 'absolute',
    placement: 'bottom-end',
    middleware: [offset(6), flip(), shift()],
  });

  const ariaMenuButtonId = 'menu-button';
  const ariaMenuId = 'menu';
  let open = false;
</script>

<button
  id={ariaMenuButtonId}
  type="submit"
  class="h-10 rounded-sm"
  aria-haspopup="true"
  aria-controls={ariaMenuId}
  on:click={() => {
    open = !open;
  }}
  use:floatingRef>Open</button
>

<Portal>
  <ul
    id={ariaMenuId}
    role="menu"
    aria-labelledby={ariaMenuButtonId}
    class="menu w-20"
    class:menu-open={open}
    use:floatingContent
  >
    <li role="none"><a href="/#" role="menuitem">Menu Item</a></li>
  </ul>
</Portal>

<style>
  .menu {
    display: none;
  }

  .menu-open {
    display: block;
  }
</style>

Infinite onComputed loop with `hide` middleware

Hi,

I'm trying to recreate this example in svelte, using onComputed, but whenever the reference element goes out of the view the onComputed loop keeps running.

So my question is if this is normal or expected or if it is a bug?
Also, what is the proper way to use the hide middleware if I'm using it wrong?

Here's the demo REPL: https://svelte.dev/repl/2db64b10d18a4740b81ff707978727bb?version=4.0.4