@kadoui/react 2.1.1 → 2.1.2
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/react-components/DrawerSheet/DrawerSheet.d.ts +2 -0
- package/dist/react-components/DrawerSheet/DrawerSheet.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/DrawerSheet.js +1 -0
- package/dist/react-components/DrawerSheet/browser.d.ts +8 -0
- package/dist/react-components/DrawerSheet/browser.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/browser.js +27 -0
- package/dist/react-components/DrawerSheet/constants.d.ts +12 -0
- package/dist/react-components/DrawerSheet/constants.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/constants.js +11 -0
- package/dist/react-components/DrawerSheet/context.d.ts +38 -0
- package/dist/react-components/DrawerSheet/context.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/context.js +39 -0
- package/dist/react-components/DrawerSheet/helpers.d.ts +17 -0
- package/dist/react-components/DrawerSheet/helpers.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/helpers.js +97 -0
- package/dist/react-components/DrawerSheet/index.d.ts +147 -0
- package/dist/react-components/DrawerSheet/index.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/index.js +803 -0
- package/dist/react-components/DrawerSheet/types.d.ts +7 -0
- package/dist/react-components/DrawerSheet/types.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/types.js +1 -0
- package/dist/react-components/DrawerSheet/use-composed-refs.d.ts +14 -0
- package/dist/react-components/DrawerSheet/use-composed-refs.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/use-composed-refs.js +30 -0
- package/dist/react-components/DrawerSheet/use-controllable-state.d.ts +9 -0
- package/dist/react-components/DrawerSheet/use-controllable-state.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/use-controllable-state.js +41 -0
- package/dist/react-components/DrawerSheet/use-position-fixed.d.ts +19 -0
- package/dist/react-components/DrawerSheet/use-position-fixed.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/use-position-fixed.js +109 -0
- package/dist/react-components/DrawerSheet/use-prevent-scroll.d.ts +18 -0
- package/dist/react-components/DrawerSheet/use-prevent-scroll.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/use-prevent-scroll.js +237 -0
- package/dist/react-components/DrawerSheet/use-scale-background.d.ts +2 -0
- package/dist/react-components/DrawerSheet/use-scale-background.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/use-scale-background.js +50 -0
- package/dist/react-components/DrawerSheet/use-snap-points.d.ts +32 -0
- package/dist/react-components/DrawerSheet/use-snap-points.d.ts.map +1 -0
- package/dist/react-components/DrawerSheet/use-snap-points.js +200 -0
- package/dist/react-components/drawer-sheet/DrawerSheet.d.ts +23 -0
- package/dist/react-components/drawer-sheet/DrawerSheet.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheet.js +22 -0
- package/dist/react-components/drawer-sheet/DrawerSheetBackdrop.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetBackdrop.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetBackdrop.js +13 -0
- package/dist/react-components/drawer-sheet/DrawerSheetBody.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetBody.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetBody.js +165 -0
- package/dist/react-components/drawer-sheet/DrawerSheetContent.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetContent.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetContent.js +16 -0
- package/dist/react-components/drawer-sheet/DrawerSheetContext.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetContext.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetContext.js +2 -0
- package/dist/react-components/drawer-sheet/DrawerSheetHandlebar.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetHandlebar.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetHandlebar.js +5 -0
- package/dist/react-components/drawer-sheet/DrawerSheetHeader.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetHeader.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetHeader.js +5 -0
- package/dist/react-components/drawer-sheet/DrawerSheetPortal.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetPortal.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetPortal.js +13 -0
- package/dist/react-components/drawer-sheet/DrawerSheetProvider.d.ts +15 -0
- package/dist/react-components/drawer-sheet/DrawerSheetProvider.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetProvider.js +75 -0
- package/dist/react-components/drawer-sheet/DrawerSheetRoot.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetRoot.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetRoot.js +130 -0
- package/dist/react-components/drawer-sheet/DrawerSheetToggle.d.ts +3 -0
- package/dist/react-components/drawer-sheet/DrawerSheetToggle.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetToggle.js +11 -0
- package/dist/react-components/drawer-sheet/DrawerSheetViewport.d.ts +4 -0
- package/dist/react-components/drawer-sheet/DrawerSheetViewport.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/DrawerSheetViewport.js +5 -0
- package/dist/react-components/drawer-sheet/drawerSheetTypes.d.ts +30 -0
- package/dist/react-components/drawer-sheet/drawerSheetTypes.d.ts.map +1 -0
- package/dist/react-components/drawer-sheet/drawerSheetTypes.js +1 -0
- package/dist/react-exports.d.ts +1 -0
- package/dist/react-exports.d.ts.map +1 -1
- package/dist/react-exports.js +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DrawerSheet.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/DrawerSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DrawerSheet } from "./index";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare function isMobileFirefox(): boolean | undefined;
|
|
2
|
+
export declare function isMac(): boolean | undefined;
|
|
3
|
+
export declare function isIPhone(): boolean | undefined;
|
|
4
|
+
export declare function isSafari(): boolean | undefined;
|
|
5
|
+
export declare function isIPad(): boolean | undefined;
|
|
6
|
+
export declare function isIOS(): boolean | undefined;
|
|
7
|
+
export declare function testPlatform(re: RegExp): boolean | undefined;
|
|
8
|
+
//# sourceMappingURL=browser.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/browser.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,IAAI,OAAO,GAAG,SAAS,CAOrD;AAED,wBAAgB,KAAK,IAAI,OAAO,GAAG,SAAS,CAE3C;AAED,wBAAgB,QAAQ,IAAI,OAAO,GAAG,SAAS,CAE9C;AAED,wBAAgB,QAAQ,IAAI,OAAO,GAAG,SAAS,CAE9C;AAED,wBAAgB,MAAM,IAAI,OAAO,GAAG,SAAS,CAM5C;AAED,wBAAgB,KAAK,IAAI,OAAO,GAAG,SAAS,CAE3C;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE5D"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export function isMobileFirefox() {
|
|
2
|
+
const userAgent = navigator.userAgent;
|
|
3
|
+
return (typeof window !== 'undefined' &&
|
|
4
|
+
((/Firefox/.test(userAgent) && /Mobile/.test(userAgent)) || // Android Firefox
|
|
5
|
+
/FxiOS/.test(userAgent)) // iOS Firefox
|
|
6
|
+
);
|
|
7
|
+
}
|
|
8
|
+
export function isMac() {
|
|
9
|
+
return testPlatform(/^Mac/);
|
|
10
|
+
}
|
|
11
|
+
export function isIPhone() {
|
|
12
|
+
return testPlatform(/^iPhone/);
|
|
13
|
+
}
|
|
14
|
+
export function isSafari() {
|
|
15
|
+
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
16
|
+
}
|
|
17
|
+
export function isIPad() {
|
|
18
|
+
return (testPlatform(/^iPad/) ||
|
|
19
|
+
// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
|
|
20
|
+
(isMac() && navigator.maxTouchPoints > 1));
|
|
21
|
+
}
|
|
22
|
+
export function isIOS() {
|
|
23
|
+
return isIPhone() || isIPad();
|
|
24
|
+
}
|
|
25
|
+
export function testPlatform(re) {
|
|
26
|
+
return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : undefined;
|
|
27
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const TRANSITIONS: {
|
|
2
|
+
DURATION: number;
|
|
3
|
+
EASE: number[];
|
|
4
|
+
};
|
|
5
|
+
export declare const VELOCITY_THRESHOLD = 0.4;
|
|
6
|
+
export declare const CLOSE_THRESHOLD = 0.25;
|
|
7
|
+
export declare const SCROLL_LOCK_TIMEOUT = 100;
|
|
8
|
+
export declare const BORDER_RADIUS = 8;
|
|
9
|
+
export declare const NESTED_DISPLACEMENT = 16;
|
|
10
|
+
export declare const WINDOW_TOP_OFFSET = 26;
|
|
11
|
+
export declare const DRAG_CLASS = "drawer-sheet-dragging";
|
|
12
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,UAAU,0BAA0B,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const TRANSITIONS = {
|
|
2
|
+
DURATION: 0.5,
|
|
3
|
+
EASE: [0.32, 0.72, 0, 1],
|
|
4
|
+
};
|
|
5
|
+
export const VELOCITY_THRESHOLD = 0.4;
|
|
6
|
+
export const CLOSE_THRESHOLD = 0.25;
|
|
7
|
+
export const SCROLL_LOCK_TIMEOUT = 100;
|
|
8
|
+
export const BORDER_RADIUS = 8;
|
|
9
|
+
export const NESTED_DISPLACEMENT = 16;
|
|
10
|
+
export const WINDOW_TOP_OFFSET = 26;
|
|
11
|
+
export const DRAG_CLASS = 'drawer-sheet-dragging';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DrawerDirection } from './types';
|
|
3
|
+
interface DrawerContextValue {
|
|
4
|
+
drawerRef: React.RefObject<HTMLDivElement | null>;
|
|
5
|
+
overlayRef: React.RefObject<HTMLDivElement | null>;
|
|
6
|
+
onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
7
|
+
onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
|
|
8
|
+
onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
9
|
+
onNestedDrag: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
|
|
10
|
+
onNestedOpenChange: (o: boolean) => void;
|
|
11
|
+
onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
|
|
12
|
+
dismissible: boolean;
|
|
13
|
+
isOpen: boolean;
|
|
14
|
+
isDragging: boolean;
|
|
15
|
+
keyboardIsOpen: React.MutableRefObject<boolean>;
|
|
16
|
+
snapPointsOffset: number[] | null;
|
|
17
|
+
snapPoints?: (number | string)[] | null;
|
|
18
|
+
activeSnapPointIndex?: number | null;
|
|
19
|
+
modal: boolean;
|
|
20
|
+
shouldFade: boolean;
|
|
21
|
+
activeSnapPoint?: number | string | null;
|
|
22
|
+
setActiveSnapPoint: (o: number | string | null) => void;
|
|
23
|
+
closeDrawer: (fromWithin?: boolean) => void;
|
|
24
|
+
openProp?: boolean;
|
|
25
|
+
onOpenChange?: (o: boolean) => void;
|
|
26
|
+
direction: DrawerDirection;
|
|
27
|
+
shouldScaleBackground: boolean;
|
|
28
|
+
setBackgroundColorOnScale: boolean;
|
|
29
|
+
noBodyStyles: boolean;
|
|
30
|
+
handleOnly?: boolean;
|
|
31
|
+
container?: HTMLElement | null;
|
|
32
|
+
autoFocus?: boolean;
|
|
33
|
+
shouldAnimate?: React.RefObject<boolean>;
|
|
34
|
+
}
|
|
35
|
+
export declare const DrawerContext: React.Context<DrawerContextValue>;
|
|
36
|
+
export declare const useDrawerContext: () => DrawerContextValue;
|
|
37
|
+
export {};
|
|
38
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,UAAU,kBAAkB;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7F,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACpF,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChD,gBAAgB,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IACxC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,eAAe,CAAC;IAC3B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,yBAAyB,EAAE,OAAO,CAAC;IACnC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,mCA8BxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,0BAM5B,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const DrawerContext = React.createContext({
|
|
3
|
+
drawerRef: { current: null },
|
|
4
|
+
overlayRef: { current: null },
|
|
5
|
+
onPress: () => { },
|
|
6
|
+
onRelease: () => { },
|
|
7
|
+
onDrag: () => { },
|
|
8
|
+
onNestedDrag: () => { },
|
|
9
|
+
onNestedOpenChange: () => { },
|
|
10
|
+
onNestedRelease: () => { },
|
|
11
|
+
openProp: undefined,
|
|
12
|
+
dismissible: false,
|
|
13
|
+
isOpen: false,
|
|
14
|
+
isDragging: false,
|
|
15
|
+
keyboardIsOpen: { current: false },
|
|
16
|
+
snapPointsOffset: null,
|
|
17
|
+
snapPoints: null,
|
|
18
|
+
handleOnly: false,
|
|
19
|
+
modal: false,
|
|
20
|
+
shouldFade: false,
|
|
21
|
+
activeSnapPoint: null,
|
|
22
|
+
onOpenChange: () => { },
|
|
23
|
+
setActiveSnapPoint: () => { },
|
|
24
|
+
closeDrawer: () => { },
|
|
25
|
+
direction: 'bottom',
|
|
26
|
+
shouldAnimate: { current: true },
|
|
27
|
+
shouldScaleBackground: false,
|
|
28
|
+
setBackgroundColorOnScale: true,
|
|
29
|
+
noBodyStyles: false,
|
|
30
|
+
container: null,
|
|
31
|
+
autoFocus: false,
|
|
32
|
+
});
|
|
33
|
+
export const useDrawerContext = () => {
|
|
34
|
+
const context = React.useContext(DrawerContext);
|
|
35
|
+
if (!context) {
|
|
36
|
+
throw new Error('useDrawerContext must be used within a Drawer.Root');
|
|
37
|
+
}
|
|
38
|
+
return context;
|
|
39
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { AnyFunction, DrawerDirection } from './types';
|
|
2
|
+
interface Style {
|
|
3
|
+
[key: string]: string;
|
|
4
|
+
}
|
|
5
|
+
export declare function isInView(el: HTMLElement): boolean;
|
|
6
|
+
export declare function set(el: Element | HTMLElement | null | undefined, styles: Style, ignoreCache?: boolean): void;
|
|
7
|
+
export declare function reset(el: Element | HTMLElement | null, prop?: string): void;
|
|
8
|
+
export declare const isVertical: (direction: DrawerDirection) => boolean;
|
|
9
|
+
export declare function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null;
|
|
10
|
+
export declare function dampenValue(v: number): number;
|
|
11
|
+
export declare function assignStyle(element: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>): () => void;
|
|
12
|
+
/**
|
|
13
|
+
* Receives functions as arguments and returns a new function that calls all.
|
|
14
|
+
*/
|
|
15
|
+
export declare function chain<T>(...fns: T[]): (...args: T extends AnyFunction ? Parameters<T> : never) => void;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvD,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAID,wBAAgB,QAAQ,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAYjD;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,UAAQ,QAiBnG;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,QAepE;AAED,eAAO,MAAM,UAAU,GAAI,WAAW,eAAe,YAWpD,CAAC;AAEF,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,CAgB5F;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,UAEpC;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,cASvG;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,EAAE,IAC1B,GAAG,MAAM,CAAC,SAAS,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,KAAK,UAQ/D"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
const cache = new WeakMap();
|
|
2
|
+
export function isInView(el) {
|
|
3
|
+
const rect = el.getBoundingClientRect();
|
|
4
|
+
if (!window.visualViewport)
|
|
5
|
+
return false;
|
|
6
|
+
return (rect.top >= 0 &&
|
|
7
|
+
rect.left >= 0 &&
|
|
8
|
+
// Need + 40 for safari detection
|
|
9
|
+
rect.bottom <= window.visualViewport.height - 40 &&
|
|
10
|
+
rect.right <= window.visualViewport.width);
|
|
11
|
+
}
|
|
12
|
+
export function set(el, styles, ignoreCache = false) {
|
|
13
|
+
if (!el || !(el instanceof HTMLElement))
|
|
14
|
+
return;
|
|
15
|
+
let originalStyles = {};
|
|
16
|
+
Object.entries(styles).forEach(([key, value]) => {
|
|
17
|
+
if (key.startsWith('--')) {
|
|
18
|
+
el.style.setProperty(key, value);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
originalStyles[key] = el.style[key];
|
|
22
|
+
el.style[key] = value;
|
|
23
|
+
});
|
|
24
|
+
if (ignoreCache)
|
|
25
|
+
return;
|
|
26
|
+
cache.set(el, originalStyles);
|
|
27
|
+
}
|
|
28
|
+
export function reset(el, prop) {
|
|
29
|
+
if (!el || !(el instanceof HTMLElement))
|
|
30
|
+
return;
|
|
31
|
+
let originalStyles = cache.get(el);
|
|
32
|
+
if (!originalStyles) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (prop) {
|
|
36
|
+
el.style[prop] = originalStyles[prop];
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
Object.entries(originalStyles).forEach(([key, value]) => {
|
|
40
|
+
el.style[key] = value;
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
export const isVertical = (direction) => {
|
|
45
|
+
switch (direction) {
|
|
46
|
+
case 'top':
|
|
47
|
+
case 'bottom':
|
|
48
|
+
return true;
|
|
49
|
+
case 'left':
|
|
50
|
+
case 'right':
|
|
51
|
+
return false;
|
|
52
|
+
default:
|
|
53
|
+
return direction;
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
export function getTranslate(element, direction) {
|
|
57
|
+
if (!element) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
const style = window.getComputedStyle(element);
|
|
61
|
+
const transform =
|
|
62
|
+
// @ts-ignore
|
|
63
|
+
style.transform || style.webkitTransform || style.mozTransform;
|
|
64
|
+
let mat = transform.match(/^matrix3d\((.+)\)$/);
|
|
65
|
+
if (mat) {
|
|
66
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
|
|
67
|
+
return parseFloat(mat[1].split(', ')[isVertical(direction) ? 13 : 12]);
|
|
68
|
+
}
|
|
69
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
|
|
70
|
+
mat = transform.match(/^matrix\((.+)\)$/);
|
|
71
|
+
return mat ? parseFloat(mat[1].split(', ')[isVertical(direction) ? 5 : 4]) : null;
|
|
72
|
+
}
|
|
73
|
+
export function dampenValue(v) {
|
|
74
|
+
return 8 * (Math.log(v + 1) - 2);
|
|
75
|
+
}
|
|
76
|
+
export function assignStyle(element, style) {
|
|
77
|
+
if (!element)
|
|
78
|
+
return () => { };
|
|
79
|
+
const prevStyle = element.style.cssText;
|
|
80
|
+
Object.assign(element.style, style);
|
|
81
|
+
return () => {
|
|
82
|
+
element.style.cssText = prevStyle;
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Receives functions as arguments and returns a new function that calls all.
|
|
87
|
+
*/
|
|
88
|
+
export function chain(...fns) {
|
|
89
|
+
return (...args) => {
|
|
90
|
+
for (const fn of fns) {
|
|
91
|
+
if (typeof fn === 'function') {
|
|
92
|
+
// @ts-ignore
|
|
93
|
+
fn(...args);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface WithFadeFromProps {
|
|
3
|
+
/**
|
|
4
|
+
* Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
|
|
5
|
+
* Should go from least visible. Example `[0.2, 0.5, 0.8]`.
|
|
6
|
+
* You can also use px values, which doesn't take screen height into account.
|
|
7
|
+
*/
|
|
8
|
+
snapPoints: (number | string)[];
|
|
9
|
+
/**
|
|
10
|
+
* Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
|
|
11
|
+
*/
|
|
12
|
+
fadeFromIndex: number;
|
|
13
|
+
}
|
|
14
|
+
export interface WithoutFadeFromProps {
|
|
15
|
+
/**
|
|
16
|
+
* Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
|
|
17
|
+
* Should go from least visible. Example `[0.2, 0.5, 0.8]`.
|
|
18
|
+
* You can also use px values, which doesn't take screen height into account.
|
|
19
|
+
*/
|
|
20
|
+
snapPoints?: (number | string)[];
|
|
21
|
+
fadeFromIndex?: never;
|
|
22
|
+
}
|
|
23
|
+
export type DialogProps = {
|
|
24
|
+
activeSnapPoint?: number | string | null;
|
|
25
|
+
setActiveSnapPoint?: (snapPoint: number | string | null) => void;
|
|
26
|
+
children?: React.ReactNode;
|
|
27
|
+
open?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Number between 0 and 1 that determines when the drawer should be closed.
|
|
30
|
+
* Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
|
|
31
|
+
* @default 0.25
|
|
32
|
+
*/
|
|
33
|
+
closeThreshold?: number;
|
|
34
|
+
/**
|
|
35
|
+
* When `true` the `body` doesn't get any styles assigned from Vaul
|
|
36
|
+
*/
|
|
37
|
+
noBodyStyles?: boolean;
|
|
38
|
+
onOpenChange?: (open: boolean) => void;
|
|
39
|
+
shouldScaleBackground?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* When `false` we don't change body's background color when the drawer is open.
|
|
42
|
+
* @default true
|
|
43
|
+
*/
|
|
44
|
+
setBackgroundColorOnScale?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Duration for which the drawer is not draggable after scrolling content inside of the drawer.
|
|
47
|
+
* @default 500ms
|
|
48
|
+
*/
|
|
49
|
+
scrollLockTimeout?: number;
|
|
50
|
+
/**
|
|
51
|
+
* When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
|
|
52
|
+
*/
|
|
53
|
+
fixed?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
handleOnly?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
|
|
61
|
+
* Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
|
|
62
|
+
* @default true
|
|
63
|
+
*/
|
|
64
|
+
dismissible?: boolean;
|
|
65
|
+
onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
|
|
66
|
+
onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
|
|
67
|
+
/**
|
|
68
|
+
* When `false` it allows to interact with elements outside of the drawer without closing it.
|
|
69
|
+
* @default true
|
|
70
|
+
*/
|
|
71
|
+
modal?: boolean;
|
|
72
|
+
nested?: boolean;
|
|
73
|
+
onClose?: () => void;
|
|
74
|
+
/**
|
|
75
|
+
* Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
|
|
76
|
+
* @default 'bottom'
|
|
77
|
+
*/
|
|
78
|
+
direction?: 'top' | 'bottom' | 'left' | 'right';
|
|
79
|
+
/**
|
|
80
|
+
* Opened by default, skips initial enter animation. Still reacts to `open` state changes
|
|
81
|
+
* @default false
|
|
82
|
+
*/
|
|
83
|
+
defaultOpen?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
|
|
86
|
+
* @default false
|
|
87
|
+
*/
|
|
88
|
+
disablePreventScroll?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
|
|
91
|
+
* Setting it to `false` will fall back to the default browser behavior.
|
|
92
|
+
* @default true when {@link snapPoints} is defined
|
|
93
|
+
*/
|
|
94
|
+
repositionInputs?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Disabled velocity based swiping for snap points.
|
|
97
|
+
* This means that a snap point won't be skipped even if the velocity is high enough.
|
|
98
|
+
* Useful if each snap point in a drawer is equally important.
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
101
|
+
snapToSequentialPoint?: boolean;
|
|
102
|
+
container?: HTMLElement | null;
|
|
103
|
+
/**
|
|
104
|
+
* Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
|
|
105
|
+
* Useful to revert any state changes for example.
|
|
106
|
+
*/
|
|
107
|
+
onAnimationEnd?: (open: boolean) => void;
|
|
108
|
+
preventScrollRestoration?: boolean;
|
|
109
|
+
autoFocus?: boolean;
|
|
110
|
+
} & (WithFadeFromProps | WithoutFadeFromProps);
|
|
111
|
+
export declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
112
|
+
export declare const Overlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
export type ContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
114
|
+
export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
export type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
|
|
116
|
+
preventCycle?: boolean;
|
|
117
|
+
};
|
|
118
|
+
export declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
119
|
+
preventCycle?: boolean;
|
|
120
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
121
|
+
export declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
122
|
+
type PortalProps = React.PropsWithChildren<{
|
|
123
|
+
container?: HTMLElement | null;
|
|
124
|
+
}>;
|
|
125
|
+
export declare function Portal({ children, container }: PortalProps): React.ReactPortal | null;
|
|
126
|
+
declare function Trigger({ children, asChild, ...props }: React.PropsWithChildren<{
|
|
127
|
+
asChild?: boolean;
|
|
128
|
+
} & React.ButtonHTMLAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
|
|
129
|
+
declare function Close({ children, asChild, ...props }: React.PropsWithChildren<{
|
|
130
|
+
asChild?: boolean;
|
|
131
|
+
} & React.HTMLAttributes<HTMLElement>>): import("react/jsx-runtime").JSX.Element;
|
|
132
|
+
export declare const DrawerSheet: {
|
|
133
|
+
Root: typeof Root;
|
|
134
|
+
NestedRoot: typeof NestedRoot;
|
|
135
|
+
Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
136
|
+
Overlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
137
|
+
Trigger: typeof Trigger;
|
|
138
|
+
Portal: typeof Portal;
|
|
139
|
+
Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
140
|
+
preventCycle?: boolean;
|
|
141
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
142
|
+
Close: typeof Close;
|
|
143
|
+
Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
144
|
+
Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
145
|
+
};
|
|
146
|
+
export {};
|
|
147
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/index.tsx"],"names":[],"mappings":"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"}
|