Feature/svelte portal 301

.gitignore

@@ -8,3 +8,4 @@ dist
 
 # test coverage reports
 coverage
+text-results/

package.json

@@ -48,14 +48,17 @@
     "rehype-slug": "^6.0.0",
     "svelte-check": "^4.0.5",
     "svelte-multiselect": "^10.3.0",
+    "svelte-popperjs": "^1.3.2",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.5.9",
-    "svelte-zoo": "^0.4.13",
+    "svelte-zoo": "^0.4.12",
     "svelte2tsx": "^0.7.22",
     "typescript": "5.6.3",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.9",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.3",
+    "tippy": "^0.0.0",
+    "tippy.js": "^6.2.5"
   },
   "keywords": [
     "svelte",

readme.md

@@ -423,6 +423,11 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: Setting `value` does not rendered state on initial mount, meaning `bind:value` will update local variable `value` whenever internal component state changes but passing a `value` when component first mounts won't be reflected in UI. This is because the source of truth for rendering is `bind:selected`. `selected` is reactive to `value` internally but only on reassignment from initial value. Suggestions for better solutions than [#249](https://github.com/janosh/svelte-multiselect/issues/249) welcome!
 
+1. ```ts
+   fixed: boolean | null = false
+   ```
+   if fixed is set, will cause the dropdown to be rendered with popper.js fixed strategy, enabling the dropdown to expand outside it's parent. This is good for modals / scrollable containers.
+
 ## 🎰   Slots
 
 `MultiSelect.svelte` accepts the following named slots:

src/lib/MultiSelect.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { createEventDispatcher, tick } from 'svelte'
+  import { createEventDispatcher, onMount, tick } from 'svelte'
   import { flip } from 'svelte/animate'
   import CircleSpinner from './CircleSpinner.svelte'
   import Wiggle from './Wiggle.svelte'
   import { CrossIcon, DisabledIcon, ExpandIcon } from './icons'
   import type { DispatchEvents, MultiSelectEvents, Option as T } from './types'
   import { get_label, get_style } from './utils'
+  import { createPopperActions } from 'svelte-popperjs'
+
   type Option = $$Generic<T>
 
   export let activeIndex: number | null = null
@@ -82,6 +84,41 @@
   export let ulOptionsStyle: string | null = null
   export let value: Option | Option[] | null = null
 
+  export let fixed: boolean | null = false
+
+  let popperOptions: Record<string, any> = {
+    placement: 'bottom-start',
+    strategy: fixed ? 'fixed' : 'absolute',
+    modifiers: [{ name: 'flip', options: { fallbackPlacements: ['top-start'] } }],
+  }
+
+  const [popperRef, popperContent, popperInstance] = createPopperActions(popperOptions)
+  // dropdownWidth needs to be dynamically set based off of whether it's rendered in a portal or not
+  let dropdownWidth = '100%'
+  let dropdownTransition = 'all 0.2s'
+  onMount(() => {
+    if (outerDiv && fixed) {
+      dropdownTransition = 'none'
+      dropdownWidth = outerDiv.offsetWidth + 'px'
+
+      // needs to be called so that popper can set the bounds to outerDiv once it's been rendered
+      tick().then(() => {
+        popperInstance()?.update()
+      })
+    }
+  })
+
+  // Optional: also update on resize
+  $: if (fixed && outerDiv) {
+    dropdownWidth = outerDiv.offsetWidth + 'px'
+  }
+  function popperContentOptional(node: HTMLElement) {
+    if (fixed) {
+      return popperContent(node)
+    }
+    return {}
+  }
+
   const selected_to_value = (selected: Option[]) => {
     value = maxSelect === 1 ? (selected[0] ?? null) : selected
   }
@@ -474,6 +511,7 @@
 
 <div
   bind:this={outerDiv}
+  use:popperRef
   class:disabled
   class:single={maxSelect === 1}
   class:open
@@ -635,14 +673,15 @@
   <!-- only render options dropdown if options or searchText is not empty (needed to avoid briefly flashing empty dropdown) -->
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul
+      use:popperContentOptional
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
       aria-multiselectable={maxSelect === null || maxSelect > 1}
       aria-expanded={open}
       aria-disabled={disabled ? `true` : null}
       bind:this={ul_options}
-      style={ulOptionsStyle}
+      style="width: {dropdownWidth}; transition: {dropdownTransition};  {ulOptionsStyle}"
     >
       {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as option, idx}
         {@const {
@@ -849,7 +888,6 @@
     width: 100%;
     position: absolute;
     overflow: auto;
-    transition: all 0.2s;
     box-sizing: border-box;
     background: var(--sms-options-bg, white);
     max-height: var(--sms-options-max-height, 50vh);

src/routes/(demos)/portal/+page.svx

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import hljs from 'highlight.js/lib/common'
+  import 'highlight.js/styles/vs2015.css'
+  import store_src from '$site/stores.ts?raw'
+</script>
+
+
+# Fixed Position
+Often times you want the dropdown to escape a modal or a parent that forces the dropdown to scroll inside of it.
+
+svelte-popper.js is used to position the dropdown. By default it is in absolute mode, but by specifying the fixed prop it sets popper.js to fixed mode, enabling the dropdown to expand outside of it's parent.
+
+Below is an example where fixed position is useful, a div that has a fixed height and scroll.
+
+```css
+<style>
+  #wrapper {
+    height: 200px;
+    overflow: auto;
+    background-color: #00023A;
+  }
+</style>
+```
+
+
+
+
+## Without fixed
+
+<br />
+
+```svelte example stackblitz id="without-fixed"
+<script>
+  import MultiSelect from 'svelte-multiselect'
+  import { languages } from '$site/options'
+  import { language_store } from '$site/stores'
+</script>
+
+<div id="wrapper">
+  <MultiSelect
+    options={languages}
+    bind:selected={$language_store}
+  >
+  </MultiSelect>
+</div>
+
+<style>
+  #wrapper {
+    height: 200px;
+    overflow: auto;
+    background-color: #00023A;
+  }
+</style>
+```
+
+## With fixed
+
+the fixed prop enables the dropdown to be positioned fixed, and
+
+<br />
+
+```svelte example stackblitz id="with-fixed"
+<script>
+  import MultiSelect from 'svelte-multiselect'
+  import { languages } from '$site/options'
+  import { language_store } from '$site/stores'
+</script>
+
+<div id="wrapper">
+  <MultiSelect
+    options={languages}
+    bind:selected={$language_store}
+    fixed
+  >
+  </MultiSelect>
+</div>
+
+<style>
+  #wrapper {
+    height: 200px;
+    overflow: auto;
+    background-color: #00023A;
+  }
+</style>
+```