@surdeddd/bottom-sheet 0.5.0 → 0.6.1

package/dist/react.d.cts

@@ -84,6 +84,8 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
     noSSR?: boolean;
 } & react.RefAttributes<BottomSheetHandle<string>>>;
 
+type TeleportTarget = HTMLElement | string | null | undefined;
+
 type UseBottomSheetRefs = {
     sheetRef: React.RefObject<HTMLElement | null>;
     handleRef: React.RefObject<HTMLElement | null>;
@@ -113,6 +115,9 @@ type HookOpts<TId extends string> = Omit<EngineOptions, "element" | "handle" | "
     snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
     allowed?: TId[] | ReadonlyArray<TId>;
     initial?: TId;
+    teleportTo?: TeleportTarget;
+    backdropColor?: string;
+    backdropOpacity?: number;
     onSnap?: (id: TId) => void;
     onBeforeClose?: (payload: SheetEventMap["before-close"]) => void;
     onOpened?: (id: TId) => void;

package/dist/react.d.ts

@@ -84,6 +84,8 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
     noSSR?: boolean;
 } & react.RefAttributes<BottomSheetHandle<string>>>;
 
+type TeleportTarget = HTMLElement | string | null | undefined;
+
 type UseBottomSheetRefs = {
     sheetRef: React.RefObject<HTMLElement | null>;
     handleRef: React.RefObject<HTMLElement | null>;
@@ -113,6 +115,9 @@ type HookOpts<TId extends string> = Omit<EngineOptions, "element" | "handle" | "
     snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
     allowed?: TId[] | ReadonlyArray<TId>;
     initial?: TId;
+    teleportTo?: TeleportTarget;
+    backdropColor?: string;
+    backdropOpacity?: number;
     onSnap?: (id: TId) => void;
     onBeforeClose?: (payload: SheetEventMap["before-close"]) => void;
     onOpened?: (id: TId) => void;

package/dist/react.js

@@ -2628,7 +2628,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3435,6 +3437,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/react/useBottomSheet.ts
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var SSR_STATE = Object.freeze({
@@ -3468,6 +3502,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.current ?? void 0
     });
     engineRef.current = engine;
+    const target = resolveTeleportTarget(optsRef.current.teleportTo);
+    const restoreTeleport = target ? teleportElements(
+      [backdropRef.current, screenRef.current, sheetRef.current],
+      target
+    ) : null;
+    if (optsRef.current.backdropColor !== void 0) {
+      engine.setScrimColor(optsRef.current.backdropColor);
+    }
+    if (optsRef.current.backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, optsRef.current.backdropOpacity]);
+    }
     cachedSnapshotRef.current = { ...engine.state };
     setMounted((n) => n + 1);
     const refresh = () => {
@@ -3499,6 +3544,7 @@ function useBottomSheet(opts) {
     ];
     return () => {
       offs.forEach((off) => off());
+      restoreTeleport?.();
       engine.destroy();
       engineRef.current = null;
       cachedSnapshotRef.current = SSR_STATE;
@@ -3514,6 +3560,18 @@ function useBottomSheet(opts) {
     const ids = opts.allowed ? Array.from(opts.allowed) : opts.snapPoints.map((p) => p.id);
     engineRef.current.setAllowed(ids);
   }, [allowedKey, snapKey]);
+  useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropColor !== void 0) {
+      engineRef.current.setScrimColor(opts.backdropColor);
+    }
+  }, [opts.backdropColor]);
+  useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropOpacity !== void 0) {
+      engineRef.current.setBackdropRange([0, opts.backdropOpacity]);
+    }
+  }, [opts.backdropOpacity]);
   const subscribe = useCallback((fn) => {
     subscribersRef.current.add(fn);
     return () => subscribersRef.current.delete(fn);

package/dist/solid.cjs

@@ -2623,7 +2623,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }

package/dist/solid.js

@@ -2621,7 +2621,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }

package/dist/solid.source.jsx

@@ -2623,7 +2623,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }

package/dist/svelte-core.cjs

@@ -2622,7 +2622,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3429,6 +3431,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3442,9 +3476,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3453,6 +3499,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/svelte-core.js

@@ -2620,7 +2620,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3427,6 +3429,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3440,9 +3474,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3451,6 +3497,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/svelte.cjs

@@ -2644,7 +2644,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3451,6 +3453,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3464,9 +3498,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3475,6 +3521,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/svelte.d.cts

@@ -27,6 +27,9 @@ export type SvelteBottomSheetOpts<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/svelte.d.ts

@@ -27,6 +27,9 @@ export type SvelteBottomSheetOpts<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/svelte.js

@@ -2622,7 +2622,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3429,6 +3431,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/svelte/useBottomSheet.svelte.ts
 var SSR_STATE = Object.freeze({
   size: 0,
@@ -3442,9 +3476,21 @@ function createBottomSheet(opts) {
   const pending = [];
   const attach = (refs) => {
     if (engine) engine.destroy();
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     const created = new BottomSheetEngine({ ...engineOpts, ...refs });
     engine = created;
+    const target = resolveTeleportTarget(teleportTo);
+    const restoreTeleport = target ? teleportElements([refs.backdrop, refs.scrim, refs.element], target) : null;
+    if (backdropColor !== void 0) created.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      created.setBackdropRange([0, backdropOpacity]);
+    }
     if (onSnap) {
       created.on("snap", (payload) => onSnap(payload.id));
     }
@@ -3453,6 +3499,7 @@ function createBottomSheet(opts) {
     }
     pending.length = 0;
     return () => {
+      restoreTeleport?.();
       created.destroy();
       if (engine === created) engine = null;
     };

package/dist/vue.cjs

@@ -2622,7 +2622,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3429,6 +3431,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/vue/useBottomSheet.ts
 function useBottomSheet(opts) {
   const sheetRef = vue.ref(null);
@@ -3445,13 +3479,20 @@ function useBottomSheet(opts) {
     isAnimating: false,
     progress: 0
   });
+  let restoreTeleport = null;
   const sync = () => {
     if (!engine) return;
     Object.assign(state, engine.state);
   };
   vue.onMounted(() => {
     if (!sheetRef.value) return;
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     engine = new BottomSheetEngine({
       ...engineOpts,
       element: sheetRef.value,
@@ -3461,6 +3502,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.value ?? void 0
     });
     sync();
+    const target = resolveTeleportTarget(teleportTo);
+    if (target) {
+      restoreTeleport = teleportElements(
+        [backdropRef.value, screenRef.value, sheetRef.value],
+        target
+      );
+    }
+    if (backdropColor !== void 0) engine.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, backdropOpacity]);
+    }
     engine.on("snap", (payload) => {
       sync();
       onSnap?.(payload.id);
@@ -3476,6 +3528,8 @@ function useBottomSheet(opts) {
     pending.length = 0;
   });
   vue.onBeforeUnmount(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3704,6 +3758,23 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: null,
       required: false
     },
+    teleportTo: {
+      type: [
+        String,
+        null,
+        Object
+      ],
+      required: false,
+      default: "body"
+    },
+    backdropColor: {
+      type: String,
+      required: false
+    },
+    backdropOpacity: {
+      type: Number,
+      required: false
+    },
     onSnap: {
       type: Function,
       required: false
@@ -3736,11 +3807,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       required: false,
       default: true
     },
-    teleportTo: {
-      type: null,
-      required: false,
-      default: "body"
-    },
     anchors: {
       type: Array,
       required: false
@@ -3748,14 +3814,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     scrimStages: {
       type: [Object, null],
       required: false
-    },
-    backdropColor: {
-      type: String,
-      required: false
-    },
-    backdropOpacity: {
-      type: Number,
-      required: false
     }
   },
   emits: [

package/dist/vue.d.cts

@@ -28,6 +28,9 @@ export type UseBottomSheetVueOptions<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };
 

package/dist/vue.d.ts

@@ -28,6 +28,9 @@ export type UseBottomSheetVueOptions<TId extends string = string> = Omit<
   snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
   allowed?: TId[] | ReadonlyArray<TId>;
   initial?: TId;
+  teleportTo?: string | HTMLElement | null;
+  backdropColor?: string;
+  backdropOpacity?: number;
   onSnap?: (id: TId) => void;
 };