@surdeddd/bottom-sheet 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/{BottomSheetEngine-L05jGZvU.d.ts → BottomSheetEngine-BHjKFtnM.d.ts} +2 -0
  2. package/dist/{BottomSheetEngine-BJrH7qY3.d.cts → BottomSheetEngine-CqiCz64W.d.cts} +2 -0
  3. package/dist/element.cjs +120 -13
  4. package/dist/element.d.cts +1 -1
  5. package/dist/element.d.ts +1 -1
  6. package/dist/element.iife.global.js +2 -2
  7. package/dist/element.js +120 -13
  8. package/dist/index.cjs +97 -8
  9. package/dist/index.d.cts +2 -2
  10. package/dist/index.d.ts +2 -2
  11. package/dist/index.js +97 -8
  12. package/dist/integrations/formik.d.cts +1 -1
  13. package/dist/integrations/formik.d.ts +1 -1
  14. package/dist/integrations/react-hook-form.d.cts +1 -1
  15. package/dist/integrations/react-hook-form.d.ts +1 -1
  16. package/dist/preact.d.cts +1 -1
  17. package/dist/preact.d.ts +1 -1
  18. package/dist/qwik.cjs +100 -10
  19. package/dist/qwik.d.cts +2 -2
  20. package/dist/qwik.d.ts +2 -2
  21. package/dist/qwik.js +100 -10
  22. package/dist/react.cjs +119 -12
  23. package/dist/react.d.cts +4 -2
  24. package/dist/react.d.ts +4 -2
  25. package/dist/react.js +119 -12
  26. package/dist/solid.cjs +128 -18
  27. package/dist/solid.d.cts +3 -0
  28. package/dist/solid.d.ts +3 -0
  29. package/dist/solid.js +130 -20
  30. package/dist/solid.source.jsx +106 -12
  31. package/dist/styles.css +34 -5
  32. package/dist/svelte-core.cjs +97 -8
  33. package/dist/svelte-core.js +97 -8
  34. package/dist/svelte-src/BottomSheet.svelte +15 -13
  35. package/dist/svelte.cjs +159 -53
  36. package/dist/svelte.d.cts +1 -0
  37. package/dist/svelte.d.ts +1 -0
  38. package/dist/svelte.js +159 -53
  39. package/dist/vue.cjs +126 -30
  40. package/dist/vue.js +126 -30
  41. package/package.json +3 -3
package/dist/qwik.cjs CHANGED
@@ -2898,11 +2898,54 @@ var BottomSheetEngine = class {
2898
2898
  this.updateAriaSlider();
2899
2899
  }
2900
2900
  }
2901
+ contentTargets() {
2902
+ const scroller = this.scrollContainer;
2903
+ if (!scroller) return [];
2904
+ const hasSlot = typeof HTMLSlotElement !== "undefined";
2905
+ const out = [];
2906
+ for (const child of Array.from(scroller.children)) {
2907
+ if (hasSlot && child instanceof HTMLSlotElement) {
2908
+ for (const el of child.assignedElements()) out.push(el);
2909
+ } else {
2910
+ out.push(child);
2911
+ }
2912
+ }
2913
+ return out;
2914
+ }
2915
+ measureContentExtent(vertical) {
2916
+ const content = this.scrollContainer;
2917
+ if (!content) return 0;
2918
+ const targets = this.contentTargets();
2919
+ if (targets.length === 0) {
2920
+ return vertical ? content.scrollHeight : content.scrollWidth;
2921
+ }
2922
+ let min = Infinity;
2923
+ let max = -Infinity;
2924
+ for (const el of targets) {
2925
+ const r = el.getBoundingClientRect();
2926
+ if (vertical) {
2927
+ if (r.top < min) min = r.top;
2928
+ if (r.bottom > max) max = r.bottom;
2929
+ } else {
2930
+ if (r.left < min) min = r.left;
2931
+ if (r.right > max) max = r.right;
2932
+ }
2933
+ }
2934
+ if (!isFinite(min) || !isFinite(max) || max <= min) {
2935
+ return vertical ? content.scrollHeight : content.scrollWidth;
2936
+ }
2937
+ let pad = 0;
2938
+ if (typeof getComputedStyle !== "undefined") {
2939
+ const cs = getComputedStyle(content);
2940
+ pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
2941
+ }
2942
+ return max - min + pad;
2943
+ }
2901
2944
  measureFitSize() {
2902
2945
  const vertical = layoutAxis(this.mode) === "height";
2903
2946
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2904
2947
  const content = this.scrollContainer;
2905
- const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
2948
+ const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2906
2949
  if (typeof window === "undefined") return natural;
2907
2950
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2908
2951
  return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2911,22 +2954,62 @@ var BottomSheetEngine = class {
2911
2954
  if (typeof ResizeObserver === "undefined") return;
2912
2955
  if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
2913
2956
  return;
2914
- const targets = [this.handle];
2915
- if (this.scrollContainer && this.scrollContainer !== this.handle) {
2916
- targets.push(this.scrollContainer);
2917
- }
2918
2957
  let raf = 0;
2919
- const ro = new ResizeObserver(() => {
2958
+ const schedule = () => {
2920
2959
  if (raf) return;
2921
2960
  raf = requestAnimationFrame(() => {
2922
2961
  raf = 0;
2923
2962
  if (this.destroyed || this.gesture?.isDragging) return;
2924
2963
  this.recompute();
2925
2964
  });
2926
- });
2927
- for (const t of targets) ro.observe(t);
2965
+ };
2966
+ const ro = new ResizeObserver(schedule);
2967
+ ro.observe(this.handle);
2968
+ const scroller = this.scrollContainer;
2969
+ const observed = /* @__PURE__ */ new Set();
2970
+ const slots = /* @__PURE__ */ new Set();
2971
+ const hasSlot = typeof HTMLSlotElement !== "undefined";
2972
+ const onSlotChange = () => resync();
2973
+ const trackSlots = () => {
2974
+ if (!scroller || !hasSlot) return;
2975
+ for (const child of Array.from(scroller.children)) {
2976
+ if (child instanceof HTMLSlotElement && !slots.has(child)) {
2977
+ child.addEventListener("slotchange", onSlotChange);
2978
+ slots.add(child);
2979
+ }
2980
+ }
2981
+ };
2982
+ const resync = () => {
2983
+ trackSlots();
2984
+ const targets = this.contentTargets();
2985
+ for (const el of observed) {
2986
+ if (!targets.includes(el)) {
2987
+ ro.unobserve(el);
2988
+ observed.delete(el);
2989
+ }
2990
+ }
2991
+ for (const el of targets) {
2992
+ if (!observed.has(el)) {
2993
+ ro.observe(el);
2994
+ observed.add(el);
2995
+ }
2996
+ }
2997
+ schedule();
2998
+ };
2999
+ let mo;
3000
+ if (scroller) {
3001
+ resync();
3002
+ if (typeof MutationObserver !== "undefined") {
3003
+ mo = new MutationObserver(resync);
3004
+ mo.observe(scroller, { childList: true });
3005
+ }
3006
+ }
2928
3007
  this.teardowns.add(() => {
2929
3008
  ro.disconnect();
3009
+ mo?.disconnect();
3010
+ for (const slot of slots) {
3011
+ slot.removeEventListener("slotchange", onSlotChange);
3012
+ }
2930
3013
  if (raf) cancelAnimationFrame(raf);
2931
3014
  });
2932
3015
  }
@@ -3274,6 +3357,9 @@ var BottomSheetEngine = class {
3274
3357
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3275
3358
  this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3276
3359
  }
3360
+ if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3361
+ this.rootEl.style.setProperty("--bs-size", `${size}px`);
3362
+ }
3277
3363
  }
3278
3364
  const progress = this.computeProgress(size);
3279
3365
  const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3285,6 +3371,9 @@ var BottomSheetEngine = class {
3285
3371
  if (this.anchorHost) {
3286
3372
  this.anchorHost.style.setProperty("--bs-progress", String(progress));
3287
3373
  }
3374
+ if (this.rootEl && this.rootEl !== this.anchorHost) {
3375
+ this.rootEl.style.setProperty("--bs-progress", String(progress));
3376
+ }
3288
3377
  }
3289
3378
  this.scrim.applyOpacity(progress, progressChanged);
3290
3379
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3448,11 +3537,12 @@ var BottomSheet = qwik.component$((props) => {
3448
3537
  ref: handleRef,
3449
3538
  role: "slider",
3450
3539
  tabIndex: 0,
3451
- "aria-label": "Resize sheet",
3452
- children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" })
3540
+ "aria-label": "Resize sheet"
3453
3541
  }
3454
3542
  ),
3543
+ /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-header", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" }) }),
3455
3544
  /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-content", ref: contentRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) }),
3545
+ /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-footer", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "footer" }) }),
3456
3546
  /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
3457
3547
  ]
3458
3548
  }
package/dist/qwik.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _builder_io_qwik from '@builder.io/qwik';
2
2
  import { QRL } from '@builder.io/qwik';
3
- import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-BJrH7qY3.cjs';
4
- export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-BJrH7qY3.cjs';
3
+ import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-CqiCz64W.cjs';
4
+ export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-CqiCz64W.cjs';
5
5
  import './transform-jVfAikE9.cjs';
6
6
 
7
7
  type BottomSheetProps<TId extends string = string> = {
package/dist/qwik.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _builder_io_qwik from '@builder.io/qwik';
2
2
  import { QRL } from '@builder.io/qwik';
3
- import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-L05jGZvU.js';
4
- export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-L05jGZvU.js';
3
+ import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-BHjKFtnM.js';
4
+ export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-BHjKFtnM.js';
5
5
  import './transform-jVfAikE9.js';
6
6
 
7
7
  type BottomSheetProps<TId extends string = string> = {
package/dist/qwik.js CHANGED
@@ -2896,11 +2896,54 @@ var BottomSheetEngine = class {
2896
2896
  this.updateAriaSlider();
2897
2897
  }
2898
2898
  }
2899
+ contentTargets() {
2900
+ const scroller = this.scrollContainer;
2901
+ if (!scroller) return [];
2902
+ const hasSlot = typeof HTMLSlotElement !== "undefined";
2903
+ const out = [];
2904
+ for (const child of Array.from(scroller.children)) {
2905
+ if (hasSlot && child instanceof HTMLSlotElement) {
2906
+ for (const el of child.assignedElements()) out.push(el);
2907
+ } else {
2908
+ out.push(child);
2909
+ }
2910
+ }
2911
+ return out;
2912
+ }
2913
+ measureContentExtent(vertical) {
2914
+ const content = this.scrollContainer;
2915
+ if (!content) return 0;
2916
+ const targets = this.contentTargets();
2917
+ if (targets.length === 0) {
2918
+ return vertical ? content.scrollHeight : content.scrollWidth;
2919
+ }
2920
+ let min = Infinity;
2921
+ let max = -Infinity;
2922
+ for (const el of targets) {
2923
+ const r = el.getBoundingClientRect();
2924
+ if (vertical) {
2925
+ if (r.top < min) min = r.top;
2926
+ if (r.bottom > max) max = r.bottom;
2927
+ } else {
2928
+ if (r.left < min) min = r.left;
2929
+ if (r.right > max) max = r.right;
2930
+ }
2931
+ }
2932
+ if (!isFinite(min) || !isFinite(max) || max <= min) {
2933
+ return vertical ? content.scrollHeight : content.scrollWidth;
2934
+ }
2935
+ let pad = 0;
2936
+ if (typeof getComputedStyle !== "undefined") {
2937
+ const cs = getComputedStyle(content);
2938
+ pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
2939
+ }
2940
+ return max - min + pad;
2941
+ }
2899
2942
  measureFitSize() {
2900
2943
  const vertical = layoutAxis(this.mode) === "height";
2901
2944
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2902
2945
  const content = this.scrollContainer;
2903
- const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
2946
+ const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2904
2947
  if (typeof window === "undefined") return natural;
2905
2948
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2906
2949
  return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2909,22 +2952,62 @@ var BottomSheetEngine = class {
2909
2952
  if (typeof ResizeObserver === "undefined") return;
2910
2953
  if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
2911
2954
  return;
2912
- const targets = [this.handle];
2913
- if (this.scrollContainer && this.scrollContainer !== this.handle) {
2914
- targets.push(this.scrollContainer);
2915
- }
2916
2955
  let raf = 0;
2917
- const ro = new ResizeObserver(() => {
2956
+ const schedule = () => {
2918
2957
  if (raf) return;
2919
2958
  raf = requestAnimationFrame(() => {
2920
2959
  raf = 0;
2921
2960
  if (this.destroyed || this.gesture?.isDragging) return;
2922
2961
  this.recompute();
2923
2962
  });
2924
- });
2925
- for (const t of targets) ro.observe(t);
2963
+ };
2964
+ const ro = new ResizeObserver(schedule);
2965
+ ro.observe(this.handle);
2966
+ const scroller = this.scrollContainer;
2967
+ const observed = /* @__PURE__ */ new Set();
2968
+ const slots = /* @__PURE__ */ new Set();
2969
+ const hasSlot = typeof HTMLSlotElement !== "undefined";
2970
+ const onSlotChange = () => resync();
2971
+ const trackSlots = () => {
2972
+ if (!scroller || !hasSlot) return;
2973
+ for (const child of Array.from(scroller.children)) {
2974
+ if (child instanceof HTMLSlotElement && !slots.has(child)) {
2975
+ child.addEventListener("slotchange", onSlotChange);
2976
+ slots.add(child);
2977
+ }
2978
+ }
2979
+ };
2980
+ const resync = () => {
2981
+ trackSlots();
2982
+ const targets = this.contentTargets();
2983
+ for (const el of observed) {
2984
+ if (!targets.includes(el)) {
2985
+ ro.unobserve(el);
2986
+ observed.delete(el);
2987
+ }
2988
+ }
2989
+ for (const el of targets) {
2990
+ if (!observed.has(el)) {
2991
+ ro.observe(el);
2992
+ observed.add(el);
2993
+ }
2994
+ }
2995
+ schedule();
2996
+ };
2997
+ let mo;
2998
+ if (scroller) {
2999
+ resync();
3000
+ if (typeof MutationObserver !== "undefined") {
3001
+ mo = new MutationObserver(resync);
3002
+ mo.observe(scroller, { childList: true });
3003
+ }
3004
+ }
2926
3005
  this.teardowns.add(() => {
2927
3006
  ro.disconnect();
3007
+ mo?.disconnect();
3008
+ for (const slot of slots) {
3009
+ slot.removeEventListener("slotchange", onSlotChange);
3010
+ }
2928
3011
  if (raf) cancelAnimationFrame(raf);
2929
3012
  });
2930
3013
  }
@@ -3272,6 +3355,9 @@ var BottomSheetEngine = class {
3272
3355
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3273
3356
  this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3274
3357
  }
3358
+ if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3359
+ this.rootEl.style.setProperty("--bs-size", `${size}px`);
3360
+ }
3275
3361
  }
3276
3362
  const progress = this.computeProgress(size);
3277
3363
  const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3283,6 +3369,9 @@ var BottomSheetEngine = class {
3283
3369
  if (this.anchorHost) {
3284
3370
  this.anchorHost.style.setProperty("--bs-progress", String(progress));
3285
3371
  }
3372
+ if (this.rootEl && this.rootEl !== this.anchorHost) {
3373
+ this.rootEl.style.setProperty("--bs-progress", String(progress));
3374
+ }
3286
3375
  }
3287
3376
  this.scrim.applyOpacity(progress, progressChanged);
3288
3377
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3446,11 +3535,12 @@ var BottomSheet = component$((props) => {
3446
3535
  ref: handleRef,
3447
3536
  role: "slider",
3448
3537
  tabIndex: 0,
3449
- "aria-label": "Resize sheet",
3450
- children: /* @__PURE__ */ jsx(Slot, { name: "header" })
3538
+ "aria-label": "Resize sheet"
3451
3539
  }
3452
3540
  ),
3541
+ /* @__PURE__ */ jsx("div", { class: "bs-header", children: /* @__PURE__ */ jsx(Slot, { name: "header" }) }),
3453
3542
  /* @__PURE__ */ jsx("div", { class: "bs-content", ref: contentRef, children: /* @__PURE__ */ jsx(Slot, {}) }),
3543
+ /* @__PURE__ */ jsx("div", { class: "bs-footer", children: /* @__PURE__ */ jsx(Slot, { name: "footer" }) }),
3454
3544
  /* @__PURE__ */ jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
3455
3545
  ]
3456
3546
  }
package/dist/react.cjs CHANGED
@@ -2905,11 +2905,54 @@ var BottomSheetEngine = class {
2905
2905
  this.updateAriaSlider();
2906
2906
  }
2907
2907
  }
2908
+ contentTargets() {
2909
+ const scroller = this.scrollContainer;
2910
+ if (!scroller) return [];
2911
+ const hasSlot = typeof HTMLSlotElement !== "undefined";
2912
+ const out = [];
2913
+ for (const child of Array.from(scroller.children)) {
2914
+ if (hasSlot && child instanceof HTMLSlotElement) {
2915
+ for (const el of child.assignedElements()) out.push(el);
2916
+ } else {
2917
+ out.push(child);
2918
+ }
2919
+ }
2920
+ return out;
2921
+ }
2922
+ measureContentExtent(vertical) {
2923
+ const content = this.scrollContainer;
2924
+ if (!content) return 0;
2925
+ const targets = this.contentTargets();
2926
+ if (targets.length === 0) {
2927
+ return vertical ? content.scrollHeight : content.scrollWidth;
2928
+ }
2929
+ let min = Infinity;
2930
+ let max = -Infinity;
2931
+ for (const el of targets) {
2932
+ const r = el.getBoundingClientRect();
2933
+ if (vertical) {
2934
+ if (r.top < min) min = r.top;
2935
+ if (r.bottom > max) max = r.bottom;
2936
+ } else {
2937
+ if (r.left < min) min = r.left;
2938
+ if (r.right > max) max = r.right;
2939
+ }
2940
+ }
2941
+ if (!isFinite(min) || !isFinite(max) || max <= min) {
2942
+ return vertical ? content.scrollHeight : content.scrollWidth;
2943
+ }
2944
+ let pad = 0;
2945
+ if (typeof getComputedStyle !== "undefined") {
2946
+ const cs = getComputedStyle(content);
2947
+ pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
2948
+ }
2949
+ return max - min + pad;
2950
+ }
2908
2951
  measureFitSize() {
2909
2952
  const vertical = layoutAxis(this.mode) === "height";
2910
2953
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2911
2954
  const content = this.scrollContainer;
2912
- const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
2955
+ const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2913
2956
  if (typeof window === "undefined") return natural;
2914
2957
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2915
2958
  return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2918,22 +2961,62 @@ var BottomSheetEngine = class {
2918
2961
  if (typeof ResizeObserver === "undefined") return;
2919
2962
  if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
2920
2963
  return;
2921
- const targets = [this.handle];
2922
- if (this.scrollContainer && this.scrollContainer !== this.handle) {
2923
- targets.push(this.scrollContainer);
2924
- }
2925
2964
  let raf = 0;
2926
- const ro = new ResizeObserver(() => {
2965
+ const schedule = () => {
2927
2966
  if (raf) return;
2928
2967
  raf = requestAnimationFrame(() => {
2929
2968
  raf = 0;
2930
2969
  if (this.destroyed || this.gesture?.isDragging) return;
2931
2970
  this.recompute();
2932
2971
  });
2933
- });
2934
- for (const t of targets) ro.observe(t);
2972
+ };
2973
+ const ro = new ResizeObserver(schedule);
2974
+ ro.observe(this.handle);
2975
+ const scroller = this.scrollContainer;
2976
+ const observed = /* @__PURE__ */ new Set();
2977
+ const slots = /* @__PURE__ */ new Set();
2978
+ const hasSlot = typeof HTMLSlotElement !== "undefined";
2979
+ const onSlotChange = () => resync();
2980
+ const trackSlots = () => {
2981
+ if (!scroller || !hasSlot) return;
2982
+ for (const child of Array.from(scroller.children)) {
2983
+ if (child instanceof HTMLSlotElement && !slots.has(child)) {
2984
+ child.addEventListener("slotchange", onSlotChange);
2985
+ slots.add(child);
2986
+ }
2987
+ }
2988
+ };
2989
+ const resync = () => {
2990
+ trackSlots();
2991
+ const targets = this.contentTargets();
2992
+ for (const el of observed) {
2993
+ if (!targets.includes(el)) {
2994
+ ro.unobserve(el);
2995
+ observed.delete(el);
2996
+ }
2997
+ }
2998
+ for (const el of targets) {
2999
+ if (!observed.has(el)) {
3000
+ ro.observe(el);
3001
+ observed.add(el);
3002
+ }
3003
+ }
3004
+ schedule();
3005
+ };
3006
+ let mo;
3007
+ if (scroller) {
3008
+ resync();
3009
+ if (typeof MutationObserver !== "undefined") {
3010
+ mo = new MutationObserver(resync);
3011
+ mo.observe(scroller, { childList: true });
3012
+ }
3013
+ }
2935
3014
  this.teardowns.add(() => {
2936
3015
  ro.disconnect();
3016
+ mo?.disconnect();
3017
+ for (const slot of slots) {
3018
+ slot.removeEventListener("slotchange", onSlotChange);
3019
+ }
2937
3020
  if (raf) cancelAnimationFrame(raf);
2938
3021
  });
2939
3022
  }
@@ -3281,6 +3364,9 @@ var BottomSheetEngine = class {
3281
3364
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3282
3365
  this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3283
3366
  }
3367
+ if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3368
+ this.rootEl.style.setProperty("--bs-size", `${size}px`);
3369
+ }
3284
3370
  }
3285
3371
  const progress = this.computeProgress(size);
3286
3372
  const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3292,6 +3378,9 @@ var BottomSheetEngine = class {
3292
3378
  if (this.anchorHost) {
3293
3379
  this.anchorHost.style.setProperty("--bs-progress", String(progress));
3294
3380
  }
3381
+ if (this.rootEl && this.rootEl !== this.anchorHost) {
3382
+ this.rootEl.style.setProperty("--bs-progress", String(progress));
3383
+ }
3295
3384
  }
3296
3385
  this.scrim.applyOpacity(progress, progressChanged);
3297
3386
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3526,6 +3615,7 @@ var BottomSheet = react.forwardRef(
3526
3615
  className = "",
3527
3616
  style,
3528
3617
  header,
3618
+ footer,
3529
3619
  children,
3530
3620
  leftButton,
3531
3621
  rightButton,
@@ -3706,8 +3796,6 @@ var BottomSheet = react.forwardRef(
3706
3796
  "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
3707
3797
  "aria-labelledby": ariaLabelledBy,
3708
3798
  children: [
3709
- leftButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-button-slot", "data-side": "left", children: leftButton }),
3710
- rightButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-button-slot", "data-side": "right", children: rightButton }),
3711
3799
  /* @__PURE__ */ jsxRuntime.jsx(
3712
3800
  "div",
3713
3801
  {
@@ -3715,10 +3803,10 @@ var BottomSheet = react.forwardRef(
3715
3803
  className: "bs-handle",
3716
3804
  role: "slider",
3717
3805
  tabIndex: 0,
3718
- "aria-label": "Resize sheet",
3719
- children: typeof header === "function" ? header(state) : header
3806
+ "aria-label": "Resize sheet"
3720
3807
  }
3721
3808
  ),
3809
+ header != null && header !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-header", children: typeof header === "function" ? header(state) : header }),
3722
3810
  /* @__PURE__ */ jsxRuntime.jsx(
3723
3811
  "div",
3724
3812
  {
@@ -3730,10 +3818,29 @@ var BottomSheet = react.forwardRef(
3730
3818
  children
3731
3819
  }
3732
3820
  ),
3821
+ footer != null && footer !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-footer", children: typeof footer === "function" ? footer(state) : footer }),
3733
3822
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bs-sr-only", role: "status", "aria-live": "polite", children: announce })
3734
3823
  ]
3735
3824
  }
3736
3825
  ),
3826
+ leftButton && /* @__PURE__ */ jsxRuntime.jsx(
3827
+ "div",
3828
+ {
3829
+ className: "bs-button-slot",
3830
+ "data-side": "left",
3831
+ "data-mode": engineOpts.mode ?? "bottom",
3832
+ children: leftButton
3833
+ }
3834
+ ),
3835
+ rightButton && /* @__PURE__ */ jsxRuntime.jsx(
3836
+ "div",
3837
+ {
3838
+ className: "bs-button-slot",
3839
+ "data-side": "right",
3840
+ "data-mode": engineOpts.mode ?? "bottom",
3841
+ children: rightButton
3842
+ }
3843
+ ),
3737
3844
  anchorHosts.map(
3738
3845
  (host, i) => anchors?.[i] ? reactDom.createPortal(anchors[i].node, host) : null
3739
3846
  ),
package/dist/react.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-BJrH7qY3.cjs';
2
- export { d as SnapPoint } from './BottomSheetEngine-BJrH7qY3.cjs';
1
+ import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-CqiCz64W.cjs';
2
+ export { d as SnapPoint } from './BottomSheetEngine-CqiCz64W.cjs';
3
3
  import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.cjs';
4
4
  export { OverlayEdge } from './overlay.cjs';
5
5
  import * as react from 'react';
@@ -23,6 +23,7 @@ type BottomSheetProps = EngineOptionsForProps & {
23
23
  className?: string;
24
24
  style?: CSSProperties;
25
25
  header?: HeaderProp;
26
+ footer?: HeaderProp;
26
27
  children?: ReactNode;
27
28
  leftButton?: ReactNode;
28
29
  rightButton?: ReactNode;
@@ -65,6 +66,7 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
65
66
  className?: string;
66
67
  style?: CSSProperties;
67
68
  header?: HeaderProp;
69
+ footer?: HeaderProp;
68
70
  children?: ReactNode;
69
71
  leftButton?: ReactNode;
70
72
  rightButton?: ReactNode;
package/dist/react.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-L05jGZvU.js';
2
- export { d as SnapPoint } from './BottomSheetEngine-L05jGZvU.js';
1
+ import { c as EngineOptions, E as EngineState, A as AnchorOptions, S as ScrimStagesOptions, p as ScrimStageDef, e as SheetEventMap, C as CloseReason, q as ScrimUpdate, m as ScrimOverlayOptions, B as BottomSheetEngine, a as SnapPointDef, b as SheetMode } from './BottomSheetEngine-BHjKFtnM.js';
2
+ export { d as SnapPoint } from './BottomSheetEngine-BHjKFtnM.js';
3
3
  import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.js';
4
4
  export { OverlayEdge } from './overlay.js';
5
5
  import * as react from 'react';
@@ -23,6 +23,7 @@ type BottomSheetProps = EngineOptionsForProps & {
23
23
  className?: string;
24
24
  style?: CSSProperties;
25
25
  header?: HeaderProp;
26
+ footer?: HeaderProp;
26
27
  children?: ReactNode;
27
28
  leftButton?: ReactNode;
28
29
  rightButton?: ReactNode;
@@ -65,6 +66,7 @@ declare const BottomSheet: react.ForwardRefExoticComponent<EngineOptionsForProps
65
66
  className?: string;
66
67
  style?: CSSProperties;
67
68
  header?: HeaderProp;
69
+ footer?: HeaderProp;
68
70
  children?: ReactNode;
69
71
  leftButton?: ReactNode;
70
72
  rightButton?: ReactNode;