base-vaul 0.1.0 → 1.1.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/index.d.mts +8 -9
- package/dist/index.mjs +39 -56
- package/package.json +4 -8
- package/dist/index.cjs +0 -1314
- package/dist/index.css.map +0 -1
- package/dist/index.d.cts +0 -186
- package/dist/index.d.cts.map +0 -1
- package/dist/index.d.mts.map +0 -1
- package/dist/index.mjs.map +0 -1
package/dist/index.d.mts
CHANGED
|
@@ -150,9 +150,9 @@ declare function Root({
|
|
|
150
150
|
container,
|
|
151
151
|
autoFocus
|
|
152
152
|
}: DialogProps): react_jsx_runtime0.JSX.Element;
|
|
153
|
-
declare const Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
153
|
+
declare const Overlay: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
154
154
|
type ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Popup>;
|
|
155
|
-
declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
155
|
+
declare const Content: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
156
156
|
type HandleProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
157
157
|
preventCycle?: boolean;
|
|
158
158
|
};
|
|
@@ -170,17 +170,16 @@ declare function Portal(props: PortalProps): react_jsx_runtime0.JSX.Element;
|
|
|
170
170
|
declare const Drawer: {
|
|
171
171
|
Root: typeof Root;
|
|
172
172
|
NestedRoot: typeof NestedRoot;
|
|
173
|
-
Content: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
174
|
-
Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
173
|
+
Content: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
174
|
+
Overlay: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
175
175
|
Trigger: Dialog.Trigger;
|
|
176
176
|
Portal: typeof Portal;
|
|
177
177
|
Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
178
178
|
preventCycle?: boolean;
|
|
179
179
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
180
|
-
Close: React.ForwardRefExoticComponent<_base_ui_react0.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
181
|
-
Title: React.ForwardRefExoticComponent<_base_ui_react0.DialogTitleProps & React.RefAttributes<
|
|
182
|
-
Description: React.ForwardRefExoticComponent<_base_ui_react0.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
180
|
+
Close: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
181
|
+
Title: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
182
|
+
Description: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
183
183
|
};
|
|
184
184
|
//#endregion
|
|
185
|
-
export { Content, ContentProps, DialogProps, Drawer, Handle, HandleProps, NestedRoot, Overlay, Portal, Root, WithFadeFromProps, WithoutFadeFromProps };
|
|
186
|
-
//# sourceMappingURL=index.d.mts.map
|
|
185
|
+
export { Content, ContentProps, DialogProps, Drawer, Handle, HandleProps, NestedRoot, Overlay, Portal, Root, WithFadeFromProps, WithoutFadeFromProps };
|
package/dist/index.mjs
CHANGED
|
@@ -116,7 +116,7 @@ function usePreventScroll(options = {}) {
|
|
|
116
116
|
}
|
|
117
117
|
return () => {
|
|
118
118
|
preventScrollCount--;
|
|
119
|
-
if (preventScrollCount === 0) restore
|
|
119
|
+
if (preventScrollCount === 0) restore?.();
|
|
120
120
|
};
|
|
121
121
|
}, [isDisabled]);
|
|
122
122
|
}
|
|
@@ -331,10 +331,7 @@ function useCallbackRef(callback) {
|
|
|
331
331
|
React.useEffect(() => {
|
|
332
332
|
callbackRef.current = callback;
|
|
333
333
|
});
|
|
334
|
-
return React.useMemo(() => ((...args) =>
|
|
335
|
-
var _callbackRef$current;
|
|
336
|
-
return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
|
|
337
|
-
}), []);
|
|
334
|
+
return React.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
|
|
338
335
|
}
|
|
339
336
|
function useUncontrolledState({ defaultProp, onChange }) {
|
|
340
337
|
const uncontrolledState = React.useState(defaultProp);
|
|
@@ -379,7 +376,7 @@ function useControllableState({ prop, defaultProp, onChange = () => {} }) {
|
|
|
379
376
|
function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
|
|
380
377
|
const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
|
|
381
378
|
prop: activeSnapPointProp,
|
|
382
|
-
defaultProp: snapPoints
|
|
379
|
+
defaultProp: snapPoints?.[0],
|
|
383
380
|
onChange: setActiveSnapPointProp
|
|
384
381
|
});
|
|
385
382
|
const [windowDimensions, setWindowDimensions] = React.useState(typeof window !== "undefined" ? {
|
|
@@ -396,8 +393,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
|
|
|
396
393
|
window.addEventListener("resize", onResize);
|
|
397
394
|
return () => window.removeEventListener("resize", onResize);
|
|
398
395
|
}, []);
|
|
399
|
-
const isLastSnapPoint = React.useMemo(() => activeSnapPoint ===
|
|
400
|
-
const activeSnapPointIndex = React.useMemo(() =>
|
|
396
|
+
const isLastSnapPoint = React.useMemo(() => activeSnapPoint === snapPoints?.[snapPoints.length - 1] || null, [snapPoints, activeSnapPoint]);
|
|
397
|
+
const activeSnapPointIndex = React.useMemo(() => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint) ?? null, [snapPoints, activeSnapPoint]);
|
|
401
398
|
const shouldFade = snapPoints && snapPoints.length > 0 && (fadeFromIndex || fadeFromIndex === 0) && !Number.isNaN(fadeFromIndex) && snapPoints[fadeFromIndex] === activeSnapPoint || !snapPoints;
|
|
402
399
|
const snapPointsOffset = React.useMemo(() => {
|
|
403
400
|
const containerSize = container ? {
|
|
@@ -410,7 +407,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
|
|
|
410
407
|
width: 0,
|
|
411
408
|
height: 0
|
|
412
409
|
};
|
|
413
|
-
return
|
|
410
|
+
return snapPoints?.map((snapPoint) => {
|
|
414
411
|
const isPx = typeof snapPoint === "string";
|
|
415
412
|
let snapPointAsNumber = 0;
|
|
416
413
|
if (isPx) snapPointAsNumber = parseInt(snapPoint, 10);
|
|
@@ -422,15 +419,15 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
|
|
|
422
419
|
const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
|
|
423
420
|
if (windowDimensions) return direction === "right" ? containerSize.width - width : -containerSize.width + width;
|
|
424
421
|
return width;
|
|
425
|
-
})
|
|
422
|
+
}) ?? [];
|
|
426
423
|
}, [
|
|
427
424
|
snapPoints,
|
|
428
425
|
windowDimensions,
|
|
429
426
|
container
|
|
430
427
|
]);
|
|
431
|
-
const activeSnapPointOffset = React.useMemo(() => activeSnapPointIndex !== null ? snapPointsOffset
|
|
428
|
+
const activeSnapPointOffset = React.useMemo(() => activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null, [snapPointsOffset, activeSnapPointIndex]);
|
|
432
429
|
const snapToPoint = React.useCallback((dimension) => {
|
|
433
|
-
const newSnapPointIndex =
|
|
430
|
+
const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
|
|
434
431
|
onSnapPointChange(newSnapPointIndex);
|
|
435
432
|
set(drawerRef.current, {
|
|
436
433
|
transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
|
|
@@ -444,7 +441,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
|
|
|
444
441
|
transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
|
|
445
442
|
opacity: "1"
|
|
446
443
|
});
|
|
447
|
-
setActiveSnapPoint(snapPoints
|
|
444
|
+
setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
|
|
448
445
|
}, [
|
|
449
446
|
drawerRef.current,
|
|
450
447
|
snapPoints,
|
|
@@ -455,7 +452,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
|
|
|
455
452
|
]);
|
|
456
453
|
React.useEffect(() => {
|
|
457
454
|
if (activeSnapPoint || activeSnapPointProp) {
|
|
458
|
-
const newIndex =
|
|
455
|
+
const newIndex = snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint) ?? -1;
|
|
459
456
|
if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === "number") snapToPoint(snapPointsOffset[newIndex]);
|
|
460
457
|
}
|
|
461
458
|
}, [
|
|
@@ -481,7 +478,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
|
|
|
481
478
|
snapToPoint(snapPointsOffset[snapPoints.length - 1]);
|
|
482
479
|
return;
|
|
483
480
|
}
|
|
484
|
-
const closestSnapPoint = snapPointsOffset
|
|
481
|
+
const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
|
|
485
482
|
if (typeof prev !== "number" || typeof curr !== "number") return prev;
|
|
486
483
|
return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
|
|
487
484
|
});
|
|
@@ -667,15 +664,14 @@ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollR
|
|
|
667
664
|
//#endregion
|
|
668
665
|
//#region src/index.tsx
|
|
669
666
|
function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false }) {
|
|
670
|
-
var _drawerRef$current, _drawerRef$current2;
|
|
671
667
|
const [isOpen = false, setIsOpen] = useControllableState({
|
|
672
668
|
defaultProp: defaultOpen,
|
|
673
669
|
prop: openProp,
|
|
674
670
|
onChange: (o) => {
|
|
675
|
-
onOpenChange
|
|
671
|
+
onOpenChange?.(o);
|
|
676
672
|
if (!o && !nested) restorePositionSetting();
|
|
677
673
|
setTimeout(() => {
|
|
678
|
-
onAnimationEnd
|
|
674
|
+
onAnimationEnd?.(o);
|
|
679
675
|
}, TRANSITIONS.DURATION * 1e3);
|
|
680
676
|
if (o && !modal) {
|
|
681
677
|
if (typeof window !== "undefined") window.requestAnimationFrame(() => {
|
|
@@ -700,8 +696,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
700
696
|
const shouldAnimate = React.useRef(!defaultOpen);
|
|
701
697
|
const previousDiffFromInitial = React.useRef(0);
|
|
702
698
|
const drawerRef = React.useRef(null);
|
|
703
|
-
const drawerHeightRef = React.useRef(
|
|
704
|
-
const drawerWidthRef = React.useRef(
|
|
699
|
+
const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
|
|
700
|
+
const drawerWidthRef = React.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
|
|
705
701
|
const initialDrawerHeight = React.useRef(0);
|
|
706
702
|
const { activeSnapPoint, activeSnapPointIndex, setActiveSnapPoint, onRelease: onReleaseSnapPoints, snapPointsOffset, onDrag: onDragSnapPoints, shouldFade, getPercentageDragged: getSnapPointsPercentageDragged } = useSnapPoints({
|
|
707
703
|
snapPoints,
|
|
@@ -730,11 +726,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
730
726
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
731
727
|
}
|
|
732
728
|
function onPress(event) {
|
|
733
|
-
var _drawerRef$current3, _drawerRef$current4;
|
|
734
729
|
if (!dismissible && !snapPoints) return;
|
|
735
730
|
if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
|
|
736
|
-
drawerHeightRef.current =
|
|
737
|
-
drawerWidthRef.current =
|
|
731
|
+
drawerHeightRef.current = drawerRef.current?.getBoundingClientRect().height || 0;
|
|
732
|
+
drawerWidthRef.current = drawerRef.current?.getBoundingClientRect().width || 0;
|
|
738
733
|
setIsDragging(true);
|
|
739
734
|
dragStartTime.current = /* @__PURE__ */ new Date();
|
|
740
735
|
if (isIOS()) window.addEventListener("touchend", () => isAllowedToDrag.current = false, { once: true });
|
|
@@ -742,9 +737,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
742
737
|
pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
|
|
743
738
|
}
|
|
744
739
|
function shouldDrag(el, isDraggingInDirection) {
|
|
745
|
-
var _window$getSelection;
|
|
746
740
|
let element = el;
|
|
747
|
-
const highlightedText =
|
|
741
|
+
const highlightedText = window.getSelection()?.toString();
|
|
748
742
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
749
743
|
const date = /* @__PURE__ */ new Date();
|
|
750
744
|
if (element.tagName === "SELECT") return false;
|
|
@@ -803,7 +797,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
803
797
|
}
|
|
804
798
|
const opacityValue = 1 - percentageDragged;
|
|
805
799
|
if (shouldFade || fadeFromIndex && activeSnapPointIndex === fadeFromIndex - 1) {
|
|
806
|
-
onDragProp
|
|
800
|
+
onDragProp?.(event, percentageDragged);
|
|
807
801
|
set(overlayRef.current, {
|
|
808
802
|
opacity: `${opacityValue}`,
|
|
809
803
|
transition: "none"
|
|
@@ -831,13 +825,11 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
831
825
|
});
|
|
832
826
|
}, []);
|
|
833
827
|
React.useEffect(() => {
|
|
834
|
-
var _window$visualViewpor2;
|
|
835
828
|
function onVisualViewportChange() {
|
|
836
829
|
if (!drawerRef.current || !repositionInputs) return;
|
|
837
830
|
const focusedElement = document.activeElement;
|
|
838
831
|
if (isInput(focusedElement) || keyboardIsOpen.current) {
|
|
839
|
-
|
|
840
|
-
const visualViewportHeight = ((_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.height) || 0;
|
|
832
|
+
const visualViewportHeight = window.visualViewport?.height || 0;
|
|
841
833
|
const totalHeight = window.innerHeight;
|
|
842
834
|
let diffFromInitial = totalHeight - visualViewportHeight;
|
|
843
835
|
const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;
|
|
@@ -861,11 +853,8 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
861
853
|
else drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
|
|
862
854
|
}
|
|
863
855
|
}
|
|
864
|
-
|
|
865
|
-
return () =>
|
|
866
|
-
var _window$visualViewpor3;
|
|
867
|
-
return (_window$visualViewpor3 = window.visualViewport) === null || _window$visualViewpor3 === void 0 ? void 0 : _window$visualViewpor3.removeEventListener("resize", onVisualViewportChange);
|
|
868
|
-
};
|
|
856
|
+
window.visualViewport?.addEventListener("resize", onVisualViewportChange);
|
|
857
|
+
return () => window.visualViewport?.removeEventListener("resize", onVisualViewportChange);
|
|
869
858
|
}, [
|
|
870
859
|
activeSnapPointIndex,
|
|
871
860
|
snapPoints,
|
|
@@ -873,7 +862,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
873
862
|
]);
|
|
874
863
|
function closeDrawer(fromWithin) {
|
|
875
864
|
cancelDrag();
|
|
876
|
-
onClose
|
|
865
|
+
onClose?.();
|
|
877
866
|
if (!fromWithin) setIsOpen(false);
|
|
878
867
|
setTimeout(() => {
|
|
879
868
|
if (snapPoints) setActiveSnapPoint(snapPoints[0]);
|
|
@@ -938,17 +927,17 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
938
927
|
velocity,
|
|
939
928
|
dismissible
|
|
940
929
|
});
|
|
941
|
-
onReleaseProp
|
|
930
|
+
onReleaseProp?.(event, true);
|
|
942
931
|
return;
|
|
943
932
|
}
|
|
944
933
|
if (direction === "bottom" || direction === "right" ? distMoved > 0 : distMoved < 0) {
|
|
945
934
|
resetDrawer();
|
|
946
|
-
onReleaseProp
|
|
935
|
+
onReleaseProp?.(event, true);
|
|
947
936
|
return;
|
|
948
937
|
}
|
|
949
938
|
if (velocity > VELOCITY_THRESHOLD) {
|
|
950
939
|
closeDrawer();
|
|
951
|
-
onReleaseProp
|
|
940
|
+
onReleaseProp?.(event, false);
|
|
952
941
|
return;
|
|
953
942
|
}
|
|
954
943
|
const visibleDrawerHeight = Math.min(drawerRef.current.getBoundingClientRect().height ?? 0, window.innerHeight);
|
|
@@ -956,10 +945,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
956
945
|
const isHorizontalSwipe = direction === "left" || direction === "right";
|
|
957
946
|
if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
|
|
958
947
|
closeDrawer();
|
|
959
|
-
onReleaseProp
|
|
948
|
+
onReleaseProp?.(event, false);
|
|
960
949
|
return;
|
|
961
950
|
}
|
|
962
|
-
onReleaseProp
|
|
951
|
+
onReleaseProp?.(event, true);
|
|
963
952
|
resetDrawer();
|
|
964
953
|
}
|
|
965
954
|
React.useEffect(() => {
|
|
@@ -1069,7 +1058,7 @@ const Overlay = React.forwardRef(function({ ...rest }, ref) {
|
|
|
1069
1058
|
"data-vaul-overlay": "",
|
|
1070
1059
|
"data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false",
|
|
1071
1060
|
"data-vaul-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
|
|
1072
|
-
"data-vaul-animate":
|
|
1061
|
+
"data-vaul-animate": shouldAnimate?.current ? "true" : "false",
|
|
1073
1062
|
...rest
|
|
1074
1063
|
});
|
|
1075
1064
|
});
|
|
@@ -1111,7 +1100,7 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
|
|
|
1111
1100
|
"data-vaul-delayed-snap-points": delayedSnapPoints ? "true" : "false",
|
|
1112
1101
|
"data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false",
|
|
1113
1102
|
"data-vaul-custom-container": container ? "true" : "false",
|
|
1114
|
-
"data-vaul-animate":
|
|
1103
|
+
"data-vaul-animate": shouldAnimate?.current ? "true" : "false",
|
|
1115
1104
|
...rest,
|
|
1116
1105
|
ref: composedRef,
|
|
1117
1106
|
style: snapPointsOffset && snapPointsOffset.length > 0 ? {
|
|
@@ -1119,9 +1108,8 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
|
|
|
1119
1108
|
...style
|
|
1120
1109
|
} : style,
|
|
1121
1110
|
onPointerDown: (event) => {
|
|
1122
|
-
var _rest$onPointerDown;
|
|
1123
1111
|
if (handleOnly) return;
|
|
1124
|
-
|
|
1112
|
+
rest.onPointerDown?.(event);
|
|
1125
1113
|
pointerStartRef.current = {
|
|
1126
1114
|
x: event.pageX,
|
|
1127
1115
|
y: event.pageY
|
|
@@ -1129,10 +1117,9 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
|
|
|
1129
1117
|
onPress(event);
|
|
1130
1118
|
},
|
|
1131
1119
|
onPointerMove: (event) => {
|
|
1132
|
-
var _rest$onPointerMove;
|
|
1133
1120
|
lastKnownPointerEventRef.current = event;
|
|
1134
1121
|
if (handleOnly) return;
|
|
1135
|
-
|
|
1122
|
+
rest.onPointerMove?.(event);
|
|
1136
1123
|
if (!pointerStartRef.current) return;
|
|
1137
1124
|
const yPosition = event.pageY - pointerStartRef.current.y;
|
|
1138
1125
|
const xPosition = event.pageX - pointerStartRef.current.x;
|
|
@@ -1144,20 +1131,17 @@ const Content = React.forwardRef(function({ style, ...rest }, ref) {
|
|
|
1144
1131
|
else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) pointerStartRef.current = null;
|
|
1145
1132
|
},
|
|
1146
1133
|
onPointerUp: (event) => {
|
|
1147
|
-
|
|
1148
|
-
(_rest$onPointerUp = rest.onPointerUp) === null || _rest$onPointerUp === void 0 || _rest$onPointerUp.call(rest, event);
|
|
1134
|
+
rest.onPointerUp?.(event);
|
|
1149
1135
|
pointerStartRef.current = null;
|
|
1150
1136
|
wasBeyondThePointRef.current = false;
|
|
1151
1137
|
onRelease(event);
|
|
1152
1138
|
},
|
|
1153
1139
|
onPointerOut: (event) => {
|
|
1154
|
-
|
|
1155
|
-
(_rest$onPointerOut = rest.onPointerOut) === null || _rest$onPointerOut === void 0 || _rest$onPointerOut.call(rest, event);
|
|
1140
|
+
rest.onPointerOut?.(event);
|
|
1156
1141
|
handleOnPointerUp(lastKnownPointerEventRef.current);
|
|
1157
1142
|
},
|
|
1158
1143
|
onContextMenu: (event) => {
|
|
1159
|
-
|
|
1160
|
-
(_rest$onContextMenu = rest.onContextMenu) === null || _rest$onContextMenu === void 0 || _rest$onContextMenu.call(rest, event);
|
|
1144
|
+
rest.onContextMenu?.(event);
|
|
1161
1145
|
if (lastKnownPointerEventRef.current) handleOnPointerUp(lastKnownPointerEventRef.current);
|
|
1162
1146
|
}
|
|
1163
1147
|
}) });
|
|
@@ -1246,11 +1230,11 @@ function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }) {
|
|
|
1246
1230
|
},
|
|
1247
1231
|
onDrag: (e, p) => {
|
|
1248
1232
|
onNestedDrag(e, p);
|
|
1249
|
-
onDrag
|
|
1233
|
+
onDrag?.(e, p);
|
|
1250
1234
|
},
|
|
1251
1235
|
onOpenChange: (o) => {
|
|
1252
1236
|
if (o) onNestedOpenChange(o);
|
|
1253
|
-
onOpenChange
|
|
1237
|
+
onOpenChange?.(o);
|
|
1254
1238
|
},
|
|
1255
1239
|
onRelease: onNestedRelease,
|
|
1256
1240
|
...rest
|
|
@@ -1278,5 +1262,4 @@ const Drawer = {
|
|
|
1278
1262
|
};
|
|
1279
1263
|
|
|
1280
1264
|
//#endregion
|
|
1281
|
-
export { Content, Drawer, Handle, NestedRoot, Overlay, Portal, Root };
|
|
1282
|
-
//# sourceMappingURL=index.mjs.map
|
|
1265
|
+
export { Content, Drawer, Handle, NestedRoot, Overlay, Portal, Root };
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "base-vaul",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"description": "Drawer component for React made with Base-UI.",
|
|
9
|
-
"main": "./dist/index.
|
|
9
|
+
"main": "./dist/index.mjs",
|
|
10
10
|
"module": "./dist/index.mjs",
|
|
11
11
|
"types": "./dist/index.d.ts",
|
|
12
12
|
"files": [
|
|
@@ -16,10 +16,6 @@
|
|
|
16
16
|
"import": {
|
|
17
17
|
"types": "./dist/index.d.mts",
|
|
18
18
|
"default": "./dist/index.mjs"
|
|
19
|
-
},
|
|
20
|
-
"require": {
|
|
21
|
-
"types": "./dist/index.d.cts",
|
|
22
|
-
"default": "./dist/index.cjs"
|
|
23
19
|
}
|
|
24
20
|
},
|
|
25
21
|
"keywords": [
|
|
@@ -61,10 +57,10 @@
|
|
|
61
57
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
|
|
62
58
|
},
|
|
63
59
|
"dependencies": {
|
|
64
|
-
"@base-ui/react": "1.
|
|
60
|
+
"@base-ui/react": "1.1.0"
|
|
65
61
|
},
|
|
66
62
|
"scripts": {
|
|
67
|
-
"build": "
|
|
63
|
+
"build": "tsdown",
|
|
68
64
|
"dev": "tsdown --watch",
|
|
69
65
|
"format": "prettier --write .",
|
|
70
66
|
"lint": "pnpm run --parallel --stream '/^lint:/'",
|