@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.
- package/dist/{BottomSheetEngine-L05jGZvU.d.ts → BottomSheetEngine-BHjKFtnM.d.ts} +2 -0
- package/dist/{BottomSheetEngine-BJrH7qY3.d.cts → BottomSheetEngine-CqiCz64W.d.cts} +2 -0
- package/dist/element.cjs +120 -13
- package/dist/element.d.cts +1 -1
- package/dist/element.d.ts +1 -1
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +120 -13
- package/dist/index.cjs +97 -8
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +97 -8
- package/dist/integrations/formik.d.cts +1 -1
- package/dist/integrations/formik.d.ts +1 -1
- package/dist/integrations/react-hook-form.d.cts +1 -1
- package/dist/integrations/react-hook-form.d.ts +1 -1
- package/dist/preact.d.cts +1 -1
- package/dist/preact.d.ts +1 -1
- package/dist/qwik.cjs +100 -10
- package/dist/qwik.d.cts +2 -2
- package/dist/qwik.d.ts +2 -2
- package/dist/qwik.js +100 -10
- package/dist/react.cjs +119 -12
- package/dist/react.d.cts +4 -2
- package/dist/react.d.ts +4 -2
- package/dist/react.js +119 -12
- package/dist/solid.cjs +128 -18
- package/dist/solid.d.cts +3 -0
- package/dist/solid.d.ts +3 -0
- package/dist/solid.js +130 -20
- package/dist/solid.source.jsx +106 -12
- package/dist/styles.css +34 -5
- package/dist/svelte-core.cjs +97 -8
- package/dist/svelte-core.js +97 -8
- package/dist/svelte-src/BottomSheet.svelte +15 -13
- package/dist/svelte.cjs +159 -53
- package/dist/svelte.d.cts +1 -0
- package/dist/svelte.d.ts +1 -0
- package/dist/svelte.js +159 -53
- package/dist/vue.cjs +126 -30
- package/dist/vue.js +126 -30
- 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
|
|
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
|
|
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
|
-
|
|
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-
|
|
4
|
-
export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-
|
|
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-
|
|
4
|
-
export { c as EngineOptions, d as SnapPoint } from './BottomSheetEngine-
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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-
|
|
2
|
-
export { d as SnapPoint } from './BottomSheetEngine-
|
|
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-
|
|
2
|
-
export { d as SnapPoint } from './BottomSheetEngine-
|
|
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;
|