@surdeddd/bottom-sheet 0.23.3 → 0.24.0

package/dist/svelte-src/BottomSheet.svelte

@@ -5,50 +5,49 @@
     resolveTeleportTarget,
     teleportElements,
     type TeleportTarget,
-  } from "../core/features/teleport";
+  } from "../svelte-core.js";
+  import { guessPhysicalMode } from "../svelte-core.js";
+  import { startsClosed } from "../svelte-core.js";
+  import { closedSnapId } from "../svelte-core.js";
+  import type { AnchorOptions } from "@surdeddd/bottom-sheet";
+  import type { ScrimStagesOptions } from "@surdeddd/bottom-sheet";
   import type {
+    CloseReason,
     EngineState,
+    PhysicalSheetMode,
     SnapPointDef,
-    SheetMode,
     ScrimUpdate,
     ScrimOverlayOptions,
     EngineOptions,
     SheetEventMap,
   } from "@surdeddd/bottom-sheet";
 
-  type Props = {
+  type Props = Omit<
+    Partial<EngineOptions>,
+    | "element"
+    | "handle"
+    | "scrollContainer"
+    | "backdrop"
+    | "scrim"
+    | "screenComponent"
+    | "snapPoints"
+    | "allowed"
+    | "initial"
+  > & {
     snapPoints: SnapPointDef<TId>[];
     allowed?: TId[];
     initial?: TId;
-    mode?: SheetMode;
-    animation?: "spring" | "tween";
-    spring?: { stiffness?: number; damping?: number; mass?: number };
-    focusTrap?: boolean;
-    closeOnEscape?: boolean;
-    closeOnBack?: boolean;
-    lockBodyScroll?: boolean;
-    rubberBand?: boolean;
-    backdropRange?: [number, number];
     backdrop?: boolean;
     closeOnBackdrop?: boolean;
-    persistent?: boolean;
-    disableClose?: boolean;
-    disableDrag?: boolean;
-    dragFrom?: EngineOptions["dragFrom"];
-    dragFromContent?: boolean;
-    fitContentToSnap?: boolean;
-    closeOnRouteChange?: boolean;
-    stackEffect?: boolean;
     teleport?: boolean;
     teleportTo?: TeleportTarget;
-    radius?: string | number;
-    maxHeight?: string | number;
     backdropColor?: string;
     backdropOpacity?: number;
     open?: boolean;
     snap?: TId;
-    returnFocusTo?: HTMLElement | string | (() => HTMLElement | null);
     ariaLabel?: string;
+    handleLabel?: string;
+    contentLabel?: string;
     header?: Snippet<[EngineState & { activeId: TId }]>;
     footer?: Snippet<[EngineState & { activeId: TId }]>;
     leftButton?: Snippet;
@@ -62,8 +61,8 @@
     onbeforeclose?: (payload: SheetEventMap["before-close"]) => void;
     onopened?: (id: TId) => void;
     onclosed?: () => void;
-    ondragstart?: () => void;
-    ondragend?: () => void;
+    ondragstart?: (payload: SheetEventMap["dragstart"]) => void;
+    ondragend?: (payload: SheetEventMap["dragend"]) => void;
     ondrag?: (payload: SheetEventMap["drag"]) => void;
     onprogress?: (payload: SheetEventMap["progress"]) => void;
     onchange?: (state: EngineState & { activeId: TId }) => void;
@@ -92,7 +91,7 @@
     fitContentToSnap,
     closeOnRouteChange = false,
     stackEffect = false,
-    teleport = false,
+    teleport,
     teleportTo,
     radius,
     maxHeight,
@@ -102,6 +101,8 @@
     snap = $bindable(),
     returnFocusTo,
     ariaLabel = "Bottom sheet",
+    handleLabel = "Resize sheet",
+    contentLabel = "Sheet content",
     header,
     footer,
     leftButton,
@@ -120,6 +121,7 @@
     ondrag,
     onprogress,
     onchange,
+    ...engineRest
   }: Props = $props();
 
   let sheetEl: HTMLElement | undefined = $state();
@@ -128,11 +130,21 @@
   let backdropEl: HTMLElement | undefined = $state();
   let screenEl: HTMLElement | undefined = $state();
 
+  const startAt = untrack(
+    () =>
+      initial ??
+      (openProp === false
+        ? (closedSnapId(snapPoints) as TId | undefined)
+        : undefined) ??
+      snap,
+  );
+
   let viewState: EngineState & { activeId: TId } = $state({
     size: 0,
     activeId: untrack(
-      () => (initial ?? snapPoints[0]?.id ?? "default") as TId,
+      () => (startAt ?? snapPoints[0]?.id ?? "default") as TId,
     ),
+    phase: "closed",
     isDragging: false,
     isAnimating: false,
     progress: 0,
@@ -140,10 +152,25 @@
 
   let engine: BottomSheetEngine | null = null;
   let restoreTeleport: (() => void) | null = null;
+  let physicalMode: PhysicalSheetMode = $state(
+    untrack(() => guessPhysicalMode(mode)),
+  );
+  const restAtStart = untrack(() =>
+    startsClosed(snapPoints, startAt, allowed) ? "closed" : undefined,
+  );
 
   onMount(() => {
     if (!sheetEl) return;
+    const teleportTarget =
+      teleport === false ? null : resolveTeleportTarget(teleportTo);
+    if (teleportTarget) {
+      restoreTeleport = teleportElements(
+        [backdropEl, screenEl, sheetEl],
+        teleportTarget,
+      );
+    }
     engine = new BottomSheetEngine({
+      ...engineRest,
       element: sheetEl,
       handle: handleEl,
       scrollContainer: contentEl,
@@ -152,7 +179,7 @@
       mode,
       snapPoints,
       allowed,
-      initial,
+      initial: startAt,
       animation,
       spring,
       focusTrap,
@@ -172,48 +199,51 @@
       radius,
       maxHeight,
       returnFocusTo,
+      backdropColor,
+      backdropOpacity,
     });
-    const teleportTarget =
-      teleport === false ? null : resolveTeleportTarget(teleportTo);
-    if (teleportTarget) {
-      restoreTeleport = teleportElements(
-        [backdropEl, screenEl, sheetEl],
-        teleportTarget,
-      );
-    }
     const sync = () => {
       if (!engine) return;
       viewState = { ...engine.state } as EngineState & { activeId: TId };
       onchange?.(viewState);
     };
+    physicalMode = engine.getMode();
     sync();
-    if (backdropColor !== undefined) engine.setScrimColor(backdropColor);
-    if (backdropOpacity !== undefined)
-      engine.setBackdropRange([0, backdropOpacity]);
+    if (snap !== undefined && snap !== engine.state.activeId) {
+      snap = engine.state.activeId as TId;
+    }
     engine.on("snap", payload => {
       sync();
       snap = payload.id as TId;
       onsnap?.(payload.id as TId);
     });
     engine.on("open", payload => {
+      sync();
       openProp = true;
       onopen?.(payload.id as TId);
     });
     engine.on("close", () => {
+      sync();
       openProp = false;
       onclose?.();
     });
     engine.on("before-close", payload => onbeforeclose?.(payload));
     engine.on("before-snap", payload => onbeforesnap?.(payload));
-    engine.on("opened", payload => onopened?.(payload.id as TId));
-    engine.on("closed", () => onclosed?.());
-    engine.on("dragstart", () => {
+    engine.on("opened", payload => {
+      sync();
+      onopened?.(payload.id as TId);
+    });
+    engine.on("closed", () => {
+      sync();
+      onclosed?.();
+    });
+    engine.on("dragstart", payload => {
       sync();
-      ondragstart?.();
+      ondragstart?.(payload);
     });
-    engine.on("dragend", () => {
+    engine.on("dragend", payload => {
       sync();
-      ondragend?.();
+      ondragend?.(payload);
     });
     if (ondrag) engine.on("drag", payload => ondrag(payload));
     if (onprogress) engine.on("progress", payload => onprogress(payload));
@@ -230,7 +260,8 @@
     engine?.snapTo(id) ?? Promise.resolve();
   export const open = (id?: TId) =>
     engine?.open(id) ?? Promise.resolve();
-  export const close = () => engine?.close() ?? Promise.resolve();
+  export const close = (reason?: CloseReason) =>
+    engine?.close(reason) ?? Promise.resolve();
   export const expand = () => engine?.expand() ?? Promise.resolve();
   export const collapse = () => engine?.collapse() ?? Promise.resolve();
   export const isTop = (): boolean => engine?.isTop() ?? false;
@@ -244,6 +275,12 @@
   export const setScrim = (opts: ScrimUpdate) => engine?.setScrim(opts);
   export const setScrimOverlay = (opts: ScrimOverlayOptions): (() => void) =>
     engine?.setScrimOverlay(opts) ?? (() => {});
+  export const addAnchor = (opts: AnchorOptions): (() => void) =>
+    engine?.addAnchor(opts) ?? (() => {});
+  export const setScrimStages = (
+    opts: ScrimStagesOptions | null,
+  ): (() => void) => engine?.setScrimStages(opts) ?? (() => {});
+  export const recompute = () => engine?.recompute();
   export const setRadius = (r: string | number) => engine?.setRadius(r);
   export const setMaxHeight = (h: string | number) => engine?.setMaxHeight(h);
   export const canDismiss = (): boolean => engine?.canDismiss() ?? false;
@@ -290,7 +327,9 @@
     if (dragFrom !== undefined) engine?.setDragFrom(dragFrom);
   });
   $effect(() => {
-    if (mode !== undefined) engine?.setMode(mode);
+    const next = mode;
+    if (next !== undefined) engine?.setMode(next);
+    physicalMode = engine ? engine.getMode() : guessPhysicalMode(next);
   });
   $effect(() => {
     if (radius !== undefined) engine?.setRadius(radius);
@@ -299,28 +338,31 @@
     if (maxHeight !== undefined) engine?.setMaxHeight(maxHeight);
   });
   $effect(() => {
-    if (backdropColor !== undefined) engine?.setScrimColor(backdropColor);
+    if (backdropColor !== undefined) engine?.setBackdropColor(backdropColor);
   });
   $effect(() => {
     if (backdropOpacity !== undefined)
-      engine?.setBackdropRange([0, backdropOpacity]);
+      engine?.setBackdropOpacity(backdropOpacity);
   });
   $effect(() => {
     if (snap === undefined) return;
     const next = snap;
-    if (!engine || untrack(() => viewState.activeId) === next) return;
+    if (!engine || engine.state.activeId === next) return;
     void engine.snapTo(next);
   });
   $effect(() => {
     if (openProp === undefined) return;
     const next = openProp;
     if (!engine) return;
-    const isOpen = untrack(() => viewState.size) > 0;
-    if (next && !isOpen) void engine.open();
-    else if (!next && isOpen) void engine.close();
+    const phase = engine.state.phase;
+    const opening = phase === "open" || phase === "opening";
+    if (next && !opening) void engine.open();
+    else if (!next && opening) void engine.close();
   });
 
-  let isVerticalAxis = $derived(mode === "bottom" || mode === "top");
+  let isVerticalAxis = $derived(
+    physicalMode === "bottom" || physicalMode === "top",
+  );
 </script>
 
 <div class="bs-root">
@@ -345,7 +387,8 @@
   <section
     class="bs-sheet"
     bind:this={sheetEl}
-    data-mode={mode}
+    data-mode={physicalMode}
+    data-bs-rest={restAtStart}
     data-active={viewState.activeId}
     role="dialog"
     aria-modal={focusTrap ? "true" : undefined}
@@ -356,7 +399,7 @@
       bind:this={handleEl}
       role="slider"
       tabindex="0"
-      aria-label="Resize sheet"
+      aria-label={handleLabel}
       aria-orientation={isVerticalAxis ? "vertical" : "horizontal"}
       aria-valuemin="0"
       aria-valuemax="0"
@@ -364,7 +407,7 @@
     ></div>
     {#if header}<div class="bs-header">{@render header(viewState)}</div>{/if}
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <div class="bs-content" bind:this={contentEl} tabindex="0" role="region" aria-label="Sheet content">
+    <div class="bs-content" bind:this={contentEl} tabindex="0" role="region" aria-label={contentLabel}>
       {#if children}{@render children()}{/if}
     </div>
     {#if footer}<div class="bs-footer">{@render footer(viewState)}</div>{/if}
@@ -373,12 +416,12 @@
     </span>
   </section>
   {#if leftButton}
-    <div class="bs-button-slot" data-side="left" data-mode={mode}>
+    <div class="bs-button-slot" data-side="left" data-mode={physicalMode}>
       {@render leftButton()}
     </div>
   {/if}
   {#if rightButton}
-    <div class="bs-button-slot" data-side="right" data-mode={mode}>
+    <div class="bs-button-slot" data-side="right" data-mode={physicalMode}>
       {@render rightButton()}
     </div>
   {/if}