flowbite-svelte 0.39.2 → 0.40.1

package/dist/utils/Popper.svelte

@@ -1,8 +1,8 @@
-<script>import { onMount } from 'svelte';
-import { createPopper } from '@popperjs/core';
-import { twMerge } from 'tailwind-merge';
-import createEventDispatcher from './createEventDispatcher';
+<script>import * as dom from '@floating-ui/dom';
+import { onMount } from 'svelte';
+import { twJoin } from 'tailwind-merge';
 import Frame from './Frame.svelte';
+import createEventDispatcher from './createEventDispatcher';
 export let activeContent = false;
 export let arrow = true;
 export let offset = 8;
@@ -17,9 +17,10 @@ let clickable;
 $: clickable = trigger === 'click';
 $: dispatch('show', triggerEl, open);
 let triggerEl;
+let floatingEl;
+let arrowEl;
 let contentEl;
 let triggerEls = [];
-let popper;
 let _blocked = false; // management of the race condition between focusin and click events
 const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
 const showHandler = (ev) => {
@@ -33,15 +34,13 @@ const showHandler = (ev) => {
         block();
     open = clickable && ev.type === 'click' && !_blocked ? !open : true;
 };
-// reactivity
-$: popper && popper.setOptions({ placement });
-// typescript typeguards - poper.state.element.reference: Element|HTMLElement|VirtualElement
-const hasHover = (el) => el.matches && el.matches(':hover');
-const hasFocus = (el) => el.contains && el.contains(document.activeElement);
+const hasHover = (el) => el.matches(':hover');
+const hasFocus = (el) => el.contains(document.activeElement);
+const px = (n) => (n != null ? `${n}px` : '');
 const hideHandler = (ev) => {
     if (activeContent) {
         setTimeout(() => {
-            const elements = Object.values(popper?.state.elements ?? {});
+            const elements = [triggerEl, floatingEl, arrowEl].filter((x) => x);
             if (ev.type === 'mouseleave' && elements.some(hasHover))
                 return;
             if (ev.type === 'focusout' && elements.some(hasFocus))
@@ -52,33 +51,47 @@ const hideHandler = (ev) => {
     else
         open = false;
 };
-function init(node, _triggerEl) {
-    const arrowEl = arrow ? node.lastElementChild : undefined;
-    popper = createPopper(_triggerEl, node, {
+let arrowSide;
+const oppositeSideMap = {
+    left: 'right',
+    right: 'left',
+    bottom: 'top',
+    top: 'bottom'
+};
+function updatePosition() {
+    dom
+        .computePosition(triggerEl, floatingEl, {
         placement,
         strategy,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: ({ reference, popper }) => {
-                        // for full screen mega menu
-                        return [yOnly ? popper.width / 2 - reference.width / 2 - reference.x : 0, offset];
-                    }
-                }
-            },
-            { name: 'eventListeners', enabled: open },
-            { name: 'flip', enabled: false },
-            { name: 'arrow', enabled: arrow, options: { element: arrowEl, padding: 10 } }
+        middleware: [
+            dom.flip(),
+            dom.shift(),
+            dom.offset(+offset),
+            arrowEl && dom.arrow({ element: arrowEl, padding: 10 })
         ]
+    })
+        .then(({ x, y, middlewareData, placement, strategy }) => {
+        floatingEl.style.position = strategy;
+        floatingEl.style.left = yOnly ? '0' : px(x);
+        floatingEl.style.top = px(y);
+        if (middlewareData.arrow && arrowEl) {
+            arrowEl.style.left = px(middlewareData.arrow.x);
+            arrowEl.style.top = px(middlewareData.arrow.y);
+            arrowSide = oppositeSideMap[placement.split('-')[0]];
+            arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
+        }
     });
+}
+function init(node, _triggerEl) {
+    floatingEl = node;
+    let cleanup = dom.autoUpdate(node, _triggerEl, updatePosition);
     return {
         update(_triggerEl) {
-            popper.state.elements.reference = _triggerEl;
-            popper.update();
+            cleanup();
+            cleanup = dom.autoUpdate(node, _triggerEl, updatePosition);
         },
         destroy() {
-            popper.destroy();
+            cleanup();
         }
     };
 }
@@ -117,10 +130,8 @@ onMount(() => {
 function optional(pred, func) {
     return pred ? func : () => undefined;
 }
-let position = 'bottom';
-$: position = placement.split('-', 1)[0];
 let arrowClass;
-$: arrowClass = twMerge('after:w-[9px] after:h-[9px] after:rotate-45 bg-inherit after:bg-inherit invisible after:visible after:block border-inherit after:border-inherit', position === 'top' && ($$props.border ? 'after:border-b after:border-r -bottom-[5px]' : '-bottom-[4px]'), position === 'bottom' && ($$props.border ? 'after:border-t after:border-l -top-[5px]' : '-top-[4px]'), position === 'left' && ($$props.border ? 'after:border-t after:border-r -right-[5px]' : '-right-[4px]'), position === 'right' && ($$props.border ? 'after:border-b after:border-l -left-[5px]' : '-left-[4px]'));
+$: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit', $$props.border && arrowSide === 'bottom' && 'border-b border-r', $$props.border && arrowSide === 'top' && 'border-t border-l ', $$props.border && arrowSide === 'right' && 'border-t border-r ', $$props.border && arrowSide === 'left' && 'border-b border-l ');
 </script>
 
 {#if !triggerEl}
@@ -137,23 +148,22 @@ $: arrowClass = twMerge('after:w-[9px] after:h-[9px] after:rotate-45 bg-inherit
     on:focusout={optional(activeContent, hideHandler)}
     on:mouseenter={optional(activeContent && !clickable, showHandler)}
     on:mouseleave={optional(activeContent && !clickable, hideHandler)}
-    {...$$restProps}
-    class={twMerge('outline-none', $$props.class)}>
+    {...$$restProps}>
     <slot />
-    {#if arrow}<div class={arrowClass} />{/if}
+    {#if arrow}<div class={arrowClass} bind:this={arrowEl} />{/if}
   </Frame>
 {/if}
 
 <!--
-  @component
-  ## Props
-  @prop activeContent: boolean = false;
-  @prop arrow: boolean = true;
-  @prop offset: number = 8;
-  @prop placement: Placement = 'top';
-  @prop trigger: 'hover' | 'click' = 'hover';
-  @prop triggeredBy: string | undefined = undefined;
-  @prop strategy: 'absolute' | 'fixed' = 'absolute';
-  @prop open: boolean = false;
-  @prop yOnly: boolean = false;
--->
+    @component
+    ## Props
+    @prop activeContent: boolean = false;
+    @prop arrow: boolean = true;
+    @prop offset: number = 8;
+    @prop placement: Placement = 'top';
+    @prop trigger: 'hover' | 'click' = 'hover';
+    @prop triggeredBy: string | undefined = undefined;
+    @prop strategy: 'absolute' | 'fixed' = 'absolute';
+    @prop open: boolean = false;
+    @prop yOnly: boolean = false;
+  -->

package/dist/utils/Popper.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@popperjs/core';
+import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
         download?: any;

package/dist/utils/Popper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAC;AA8K1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAyB,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA8L/E,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/utils/focusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":";AA0C2yrC,oJAAsM"}
+{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":";AA0Cw1rC,oJAAsM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.39.2",
+  "version": "0.40.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -30,12 +30,12 @@
   },
   "devDependencies": {
     "@docsearch/js": "^3.5.1",
-    "@playwright/test": "^1.35.1",
-    "@sveltejs/adapter-vercel": "^3.0.1",
-    "@sveltejs/kit": "^1.21.0",
+    "@playwright/test": "^1.36.0",
+    "@sveltejs/adapter-vercel": "^3.0.2",
+    "@sveltejs/kit": "^1.22.3",
     "@sveltejs/package": "2.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.4.14",
     "createprops": "^0.5.5",
     "esbuild": "0.18.10",
@@ -44,22 +44,22 @@
     "eslint-plugin-svelte": "^2.32.2",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.3.3",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.26",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "prism-themes": "^1.9.0",
-    "publint": "^0.1.15",
-    "svelte": "^4.0.2",
-    "svelte-check": "^3.4.4",
+    "publint": "^0.1.16",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.6",
     "svelte-meta-tags": "^2.8.0",
     "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.16",
+    "svelte2tsx": "^0.6.19",
     "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
+    "vite": "^4.4.4",
     "vitest": "^0.32.4"
   },
   "peerDependencies": {
@@ -109,8 +109,8 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "flowbite": "^1.6.6",
+    "@floating-ui/dom": "^1.4.5",
+    "flowbite": "^1.7.0",
     "tailwind-merge": "^1.13.2"
   },
   "engines": {