Dropdown component with placement properties

[kinchad]

Describe the bug

I copy and paste the sample code

<script>
  import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
  import { ChevronDownSolid, ChevronUpSolid, ChevronRightSolid, ChevronLeftSolid } from 'flowbite-svelte-icons';
  let placement = 'left';
</script>

<Dropdown {placement} triggeredBy="#placements button">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem slot="footer">Sign out</DropdownItem>
</Dropdown>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div id="placements" class="flex flex-col justify-center items-center gap-2 h-96 my-8" on:mousedown={(e) => (placement = e.target.textContent.trim().split(' ')[1])}>
  <Button>Dropdown top<ChevronUpSolid class="w-3 h-3 ms-2 text-white dark:text-white" /></Button>
  <div class="space-x-2 rtl:space-x-reverse">
    <Button><ChevronLeftSolid class="w-3 h-3 me-2 text-white dark:text-white" />Dropdown left</Button>
    <Button>Dropdown right<ChevronRightSolid class="w-3 h-3 ms-2 text-white dark:text-white" /></Button>
  </div>
  <Button>Dropdown bottom<ChevronDownSolid class="w-3 h-3 ms-2 text-white dark:text-white" /></Button>
</div>

But it does not work with the error at the {placement} which says Type String is not assignable to type 'Placement | undefined'. Am i missing something?

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-r3e99a?file=README.md,src%2Froutes%2F%2Bpage.svelte

Flowbite version and System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1250U
    Memory: 2.52 GB / 15.70 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/kit: ^2.5.5 => 2.5.5
    flowbite-svelte: ^0.44.24 => 0.44.24
    svelte: 5.0.0-next.68 => 5.0.0-next.68
    vite: ^5.2.8 => 5.2.8

[jjagielka]

This is Typescript message, caused by the fact that you have not set a type for placement and it defaults to string. Add this:

<script>
  /** @type {import('@floating-ui/dom').Placement} */
  let placement = 'left';
</script>

or use ts mode:

<script lang="ts">
  import type { Placement } from '@floating-ui/dom';

  let placement:Placement = 'left';
</script>

[kinchad]

This is Typescript message, caused by the fact that you have not set a type for placement and it defaults to string. Add this:

<script>
  /** @type {import('@floating-ui/dom').Placement} */
  let placement = 'left';
</script>

or use ts mode:

<script lang="ts">
  import type { Placement } from '@floating-ui/dom';

  let placement:Placement = 'left';
</script>

Thanks for your reply, but it is not working I do not have the module @floating-ui/dom, so i install with pnpm i @floating-ui/dom Then I can use your provided code without error in my editor. But there is an error at the broswer console

If i use non-ts mode, i got this error:

if i use ts mode, i got this error:

[kinchad]

I tried to re-create a new Sveltekit project and test the code, it's working. so i guess i have some mis-config or contradiction in my code. I will try to figure out the problem, Anyway thanks for your help.

but i dont know why the flowbit site have not mention abount the @floating-ui/dom module

[shinokada]

Since it is listed in the dependencies, it automatically installed under .pnpm dir.

"dependencies": {
    "@floating-ui/dom": "^1.6.3",
    "apexcharts": "^3.48.0",
    "flowbite": "^2.3.0",
    "tailwind-merge": "^2.2.2"
  },