flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/utils/Popper.svelte

@@ -1,177 +1,202 @@
-<script>import * as dom from "@floating-ui/dom";
-import { onMount, createEventDispatcher } from "svelte";
-import { twJoin } from "tailwind-merge";
-import Frame from "./Frame.svelte";
-export let activeContent = false;
-export let arrow = true;
-export let offset = 8;
-export let placement = "top";
-export let trigger = "hover";
-export let triggeredBy = void 0;
-export let reference = void 0;
-export let strategy = "absolute";
-export let open = false;
-export let yOnly = false;
-export let middlewares = [dom.flip(), dom.shift()];
-const dispatch = createEventDispatcher();
-let focusable;
-$: focusable = trigger === "focus";
-let clickable;
-$: clickable = trigger === "click";
-let hoverable;
-$: hoverable = trigger === "hover";
-$: dispatch("show", open);
-$: placement && (referenceEl = referenceEl);
-let referenceEl;
-let floatingEl;
-let arrowEl;
-let contentEl;
-let triggerEls = [];
-const showHandler = (ev) => {
-  if (referenceEl === void 0) console.error("trigger undefined");
-  if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
-    referenceEl = ev.target;
-    if (open) return;
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface TriggeredToggleEvent extends ToggleEvent {
+    trigger: HTMLElement;
   }
-  open = ev.type === "click" ? !open : true;
-};
-const hasHover = (el) => el.matches(":hover");
-const hasFocus = (el) => el.contains(document.activeElement);
-const px = (n) => n ? `${n}px` : "";
-const hideHandler = (ev) => {
-  if (activeContent && hoverable) {
-    const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
-    setTimeout(() => {
-      if (ev.type === "mouseleave" && !elements.some(hasHover)) {
-        open = false;
-      }
-    }, 100);
-  } else {
-    open = false;
+
+  export interface PopperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onbeforetoggle" | "ontoggle"> {
+    triggeredBy?: string;
+    trigger?: "hover" | "click";
+    placement?: Placement;
+    arrow?: boolean;
+    border?: boolean;
+    offset?: number;
+    yOnly?: boolean; // special case for megamenu - only move on y axis
+    strategy?: "absolute" | "fixed";
+    reference?: string | undefined;
+    middlewares?: Middleware[];
+    children: Snippet;
+
+    onbeforetoggle?: (ev: TriggeredToggleEvent) => void;
+    ontoggle?: (ev: TriggeredToggleEvent) => void;
   }
-};
-let arrowSide;
-const oppositeSideMap = {
-  left: "right",
-  right: "left",
-  bottom: "top",
-  top: "bottom"
-};
-$: middleware = [...middlewares, dom.offset(+offset), arrowEl && dom.arrow({ element: arrowEl, padding: 10 })];
-function updatePosition() {
-  dom.computePosition(referenceEl, floatingEl, { placement, strategy, middleware }).then(({ x, y, middlewareData, placement: placement2, strategy: strategy2 }) => {
-    floatingEl.style.position = strategy2;
-    floatingEl.style.left = yOnly ? "0" : px(x);
-    floatingEl.style.top = px(y);
-    if (middlewareData.arrow && arrowEl instanceof HTMLDivElement) {
-      arrowEl.style.left = px(middlewareData.arrow.x);
-      arrowEl.style.top = px(middlewareData.arrow.y);
-      arrowSide = oppositeSideMap[placement2.split("-")[0]];
-      arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
-    }
+</script>
+
+<script lang="ts">
+  import type { Coords, Middleware, Placement } from "@floating-ui/dom";
+  import * as dom from "@floating-ui/dom";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Arrow from "./Arrow.svelte";
+
+  const TRIGGER_DELAY = 100;
+
+  let { triggeredBy, trigger = "click", placement = "top", offset = 8, arrow = false, border = true, yOnly = false, strategy = "absolute", reference, middlewares = [dom.flip(), dom.shift()], onbeforetoggle: _onbeforetoggle, ontoggle: _ontoggle, class: className = "", children }: PopperProps = $props();
+
+  let focusable: boolean = true;
+  let clickable: boolean = $derived(trigger === "click");
+  let hoverable: boolean = $derived(trigger === "hover");
+
+  let popover: HTMLElement | null = null;
+  let invoker: HTMLButtonElement | null = null;
+  let referenceElement: HTMLElement | null = null;
+  let triggerEls: HTMLButtonElement[] = [];
+  let arrowParams: { placement: Placement; border: boolean; cords: Partial<Coords>; strategy: "absolute" | "fixed" } = $state({
+    placement,
+    border,
+    cords: { x: 0, y: 0 },
+    strategy
   });
-}
-function init(node, _referenceEl) {
-  floatingEl = node;
-  let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
-  return {
-    update(_referenceEl2) {
-      cleanup();
-      cleanup = dom.autoUpdate(_referenceEl2, floatingEl, updatePosition);
-    },
-    destroy() {
-      cleanup();
+
+  const px = (n: number | undefined) => (n ? `${n}px` : "");
+
+  function updatePopoverPosition() {
+    if (!invoker || !popover) {
+      return;
     }
-  };
-}
-onMount(() => {
-  const events = [
-    ["focusin", showHandler, focusable],
-    ["focusout", hideHandler, focusable],
-    ["click", showHandler, clickable],
-    ["mouseenter", showHandler, hoverable],
-    ["mouseleave", hideHandler, hoverable]
-  ];
-  if (triggeredBy) triggerEls = [...document.querySelectorAll(triggeredBy)];
-  else triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling] : [];
-  if (!triggerEls.length) {
-    console.error("No triggers found.");
+
+    const arrowEl: HTMLElement | null = popover.querySelector(".popover-arrow");
+
+    let middleware: Middleware[] = [...middlewares, dom.offset(offset)];
+    if (arrowEl) middleware.push(dom.arrow({ element: arrowEl }));
+
+    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) });
+
+        if (arrow && arrowEl instanceof HTMLElement) {
+          arrowParams = { placement: pl, border, cords: { x: arrow.x, y: arrow.y }, strategy };
+        }
+      }
+    });
   }
-  triggerEls.forEach((element) => {
-    if (element.tabIndex < 0) element.tabIndex = 0;
-    for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
-  });
-  if (reference) {
-    referenceEl = document.querySelector(reference) ?? document.body;
-    if (referenceEl === document.body) {
-      console.error(`Popup reference not found: '${reference}'`);
-    } else {
-      if (focusable) referenceEl.addEventListener("focusout", hideHandler);
-      if (hoverable) referenceEl.addEventListener("mouseleave", hideHandler);
+
+  let isTriggered: boolean = false;
+
+  async function open_popover(ev: Event) {
+    // throttle
+    isTriggered = true;
+    await new Promise((resolve) => setTimeout(resolve, TRIGGER_DELAY));
+    if (!isTriggered) return;
+
+    if (ev.target !== invoker && triggerEls.includes(ev.target as HTMLButtonElement)) {
+      invoker = ev.target as HTMLButtonElement;
+      // if (invoker) invoker.popoverTargetElement = popover;
+      popover?.hidePopover(); // invoker changed need to hide old popover
     }
-  } else {
-    referenceEl = triggerEls[0];
+
+    if (ev.type === "pointerdown") popover?.togglePopover();
+    else popover?.showPopover();
   }
-  if (clickable) document.addEventListener("click", closeOnClickOutside);
-  return () => {
-    triggerEls.forEach((element) => {
-      if (element) {
-        for (const [name, handler] of events) element.removeEventListener(name, handler);
-      }
-    });
-    if (referenceEl) {
-      referenceEl.removeEventListener("focusout", hideHandler);
-      referenceEl.removeEventListener("mouseleave", hideHandler);
+
+  async function close_popover(ev: Event) {
+    isTriggered = false;
+    await new Promise((resolve) => setTimeout(resolve, TRIGGER_DELAY));
+    if (isTriggered) return;
+
+    // if popover has focus don't close when leaving the invoker
+    if (ev?.type === "pointerleave" && popover?.contains(document.activeElement)) return;
+    if (ev?.type === "focusout" && popover?.contains(document.activeElement)) return;
+
+    popover?.hidePopover();
+  }
+
+  let autoUpdateDestroy = () => {};
+
+  function on_before_toggle(ev: ToggleEvent) {
+    if (!invoker || !popover) return;
+
+    (ev as TriggeredToggleEvent).trigger = invoker;
+    _onbeforetoggle?.(ev as TriggeredToggleEvent);
+
+    // Floating UI instance when it’s closed we need to keep a autoUpdate destroy function
+
+    if (ev.newState === "open") {
+      autoUpdateDestroy = dom.autoUpdate(referenceElement ?? invoker, popover, updatePopoverPosition);
+      document.addEventListener("click", closeOnClickOutside);
+    } else {
+      // When closing the popover, we destroy the autoUpdate instance
+      autoUpdateDestroy();
+      document.removeEventListener("click", closeOnClickOutside);
     }
-    document.removeEventListener("click", closeOnClickOutside);
-  };
-});
-function closeOnClickOutside(event) {
-  if (open) {
-    if (!event.composedPath().includes(floatingEl) && !triggerEls.some((el) => event.composedPath().includes(el))) {
-      hideHandler(event);
+  }
+
+  function on_toggle(ev: ToggleEvent) {
+    if (!invoker) return;
+
+    (ev as TriggeredToggleEvent).trigger = invoker;
+    _ontoggle?.(ev as TriggeredToggleEvent);
+  }
+
+  function set_triggers(node: HTMLElement) {
+    const events: [string, any, boolean][] = [
+      ["focusin", open_popover, focusable],
+      ["focusout", close_popover, focusable],
+      ["pointerdown", open_popover, clickable],
+      ["pointerenter", open_popover, hoverable],
+      ["pointerleave", close_popover, hoverable]
+    ];
+
+    if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLButtonElement>(triggeredBy)];
+    else if (node.previousElementSibling) triggerEls = [node.previousElementSibling as HTMLButtonElement];
+
+    if (!triggerEls.length) {
+      console.error("No triggers found.");
+      return;
     }
+
+    if (reference) referenceElement = document.querySelector<HTMLElement>(reference);
+    // invoker = triggerEls[0];
+
+    triggerEls.forEach((element: HTMLButtonElement) => {
+      if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
+      for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
+    });
+
+    $effect(() => {
+      return () => {
+        triggerEls.forEach((element: HTMLElement) => {
+          for (const [name, handler, cond] of events) if (cond) element.removeEventListener(name, handler);
+        });
+      };
+    });
   }
-}
-function optional(pred, func) {
-  return pred ? func : () => void 0;
-}
-let arrowClass;
-$: arrowClass = twJoin("absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit", $$props.border && arrowSide === "bottom" && "border-b border-e", $$props.border && arrowSide === "top" && "border-t border-s ", $$props.border && arrowSide === "right" && "border-t border-e ", $$props.border && arrowSide === "left" && "border-b border-s ");
-function initArrow(node) {
-  arrowEl = node;
-  return {
-    destroy() {
-      arrowEl = null;
+
+  /**
+   * Close the popper when clicking outside of it.
+   * This is necessary to get around a bug in Safari where clicking outside of the open popper does not close it.
+   */
+  function closeOnClickOutside(event: MouseEvent) {
+    if (popover && !event.composedPath().includes(popover) && !triggerEls.some((el) => event.composedPath().includes(el))) {
+      close_popover(event);
     }
-  };
-}
+  }
 </script>
 
-{#if !referenceEl}
-  <div bind:this={contentEl}></div>
-{/if}
-
-{#if referenceEl}
-  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent && focusable, showHandler)} on:focusout={optional(activeContent && focusable, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
-    <slot></slot>
-    {#if arrow}<div use:initArrow class={arrowClass}></div>{/if}
-  </Frame>
-{/if}
+<div popover="manual" bind:this={popover} use:set_triggers class:overflow-visible={true} onfocusout={close_popover} onpointerleave={hoverable ? close_popover : undefined} onpointerenter={hoverable ? open_popover : undefined} onbeforetoggle={on_before_toggle} ontoggle={on_toggle} class={className}>
+  {@render children()}
+  {#if arrow}
+    <Arrow {...arrowParams} />
+  {/if}
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activeContent: boolean = false;
-@prop export let arrow: boolean = true;
-@prop export let offset: number = 8;
-@prop export let placement: Placement = 'top';
-@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
-@prop export let triggeredBy: string | undefined = undefined;
-@prop export let reference: string | undefined = undefined;
-@prop export let strategy: 'absolute' | 'fixed' = 'absolute';
-@prop export let open: boolean = false;
-@prop export let yOnly: boolean = false;
-@prop export let middlewares: Middleware[] = [dom.flip(), dom.shift()];
+@props: triggeredBy: any;
+@props:trigger: any = "click";
+@props:placement: any = "top";
+@props:offset: any = 8;
+@props:arrow: any = false;
+@props:border: any = true;
+@props:yOnly: any = false;
+@props:strategy: any = "absolute";
+@props:reference: any;
+@props:middlewares: any = [dom.flip();
+@props:dom.shift()]: any;
+@props:onbeforetoggle: any;
+@props:ontoggle: any;
+@props:class: string = "";
+@props:children: any;
 -->

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

@@ -1,59 +1,54 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
+import type { Snippet } from "svelte";
+export interface TriggeredToggleEvent extends ToggleEvent {
+    trigger: HTMLElement;
+}
+export interface PopperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onbeforetoggle" | "ontoggle"> {
+    triggeredBy?: string;
+    trigger?: "hover" | "click";
+    placement?: Placement;
+    arrow?: boolean;
+    border?: boolean;
+    offset?: number;
+    yOnly?: boolean;
+    strategy?: "absolute" | "fixed";
+    reference?: string | undefined;
+    middlewares?: Middleware[];
+    children: Snippet;
+    onbeforetoggle?: (ev: TriggeredToggleEvent) => void;
+    ontoggle?: (ev: TriggeredToggleEvent) => void;
+}
+import type { Middleware, Placement } from "@floating-ui/dom";
+import type { HTMLAttributes } from "svelte/elements";
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
-        tag?: string;
-        color?: import("./Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        activeContent?: boolean;
-        arrow?: boolean;
-        offset?: number;
-        placement?: Placement;
-        trigger?: "hover" | "click" | "focus";
-        triggeredBy?: string;
-        reference?: string;
-        strategy?: "absolute" | "fixed";
-        open?: boolean;
-        yOnly?: boolean;
-    };
+    props: Record<string, never>;
     events: {
-        show: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type PopperProps = typeof __propDef.props;
+type PopperProps_ = typeof __propDef.props;
 export type PopperEvents = typeof __propDef.events;
 export type PopperSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activeContent: boolean = false;
- * @prop export let arrow: boolean = true;
- * @prop export let offset: number = 8;
- * @prop export let placement: Placement = 'top';
- * @prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
- * @prop export let triggeredBy: string | undefined = undefined;
- * @prop export let reference: string | undefined = undefined;
- * @prop export let strategy: 'absolute' | 'fixed' = 'absolute';
- * @prop export let open: boolean = false;
- * @prop export let yOnly: boolean = false;
- * @prop export let middlewares: Middleware[] = [dom.flip(), dom.shift()];
+ * @props: triggeredBy: any;
+ * @props:trigger: any = "click";
+ * @props:placement: any = "top";
+ * @props:offset: any = 8;
+ * @props:arrow: any = false;
+ * @props:border: any = true;
+ * @props:yOnly: any = false;
+ * @props:strategy: any = "absolute";
+ * @props:reference: any;
+ * @props:middlewares: any = [dom.flip();
+ * @props:dom.shift()]: any;
+ * @props:onbeforetoggle: any;
+ * @props:ontoggle: any;
+ * @props:class: string = "";
+ * @props:children: any;
  */
-export default class Popper extends SvelteComponentTyped<PopperProps, PopperEvents, PopperSlots> {
+export default class Popper extends SvelteComponentTyped<PopperProps_, PopperEvents, PopperSlots> {
 }
 export {};

package/dist/utils/focusTrap.d.ts

@@ -1,3 +1,3 @@
-import type { Action } from 'svelte/action';
+import type { Action } from "svelte/action";
 declare const focusTrap: Action<HTMLElement>;
 export default focusTrap;

package/dist/utils/focusTrap.js

@@ -9,7 +9,7 @@ const selectorTabbable = `
 `;
 const focusTrap = (node) => {
     const handleFocusTrap = (e) => {
-        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+        const isTabPressed = e.key === "Tab" || e.keyCode === 9;
         if (!isTabPressed) {
             return;
         }
@@ -22,10 +22,10 @@ const focusTrap = (node) => {
         tabbable[index].focus();
         e.preventDefault();
     };
-    document.addEventListener('keydown', handleFocusTrap, true);
+    document.addEventListener("keydown", handleFocusTrap, true);
     return {
         destroy() {
-            document.removeEventListener('keydown', handleFocusTrap, true);
+            document.removeEventListener("keydown", handleFocusTrap, true);
         }
     };
 };

package/dist/utils/index.d.ts

@@ -0,0 +1,110 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+import CloseButton from "./CloseButton.svelte";
+import { type VariantProps } from "tailwind-variants";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;
+declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;
+interface CloseButtonProps extends CloseButtonVariants, Omit<HTMLButtonAttributes, "color"> {
+    onclick?: (ev: MouseEvent) => void;
+    name?: string;
+    ariaLabel?: string;
+    href?: string;
+}
+export { CloseButton, closeButtonVariants, type CloseButtonProps };