@oxyhq/bloom 0.14.0 → 0.15.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/lib/commonjs/dialog/CenteredDialog.js +2 -0
- package/lib/commonjs/dialog/CenteredDialog.js.map +1 -1
- package/lib/commonjs/dialog/CenteredDialog.web.js +2 -0
- package/lib/commonjs/dialog/CenteredDialog.web.js.map +1 -1
- package/lib/commonjs/dialog/Dialog.js +337 -43
- package/lib/commonjs/dialog/Dialog.js.map +1 -1
- package/lib/commonjs/dialog/Dialog.web.js +414 -63
- package/lib/commonjs/dialog/Dialog.web.js.map +1 -1
- package/lib/commonjs/dialog/index.js +6 -0
- package/lib/commonjs/dialog/index.js.map +1 -1
- package/lib/commonjs/dialog/index.web.js +6 -0
- package/lib/commonjs/dialog/index.web.js.map +1 -1
- package/lib/commonjs/dialog/placement.js +104 -0
- package/lib/commonjs/dialog/placement.js.map +1 -0
- package/lib/commonjs/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +7 -0
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/commonjs/responsive-sheet/ResponsiveSheet.js +63 -266
- package/lib/commonjs/responsive-sheet/ResponsiveSheet.js.map +1 -1
- package/lib/commonjs/responsive-sheet/ResponsiveSheet.web.js +84 -0
- package/lib/commonjs/responsive-sheet/ResponsiveSheet.web.js.map +1 -0
- package/lib/commonjs/responsive-sheet/index.web.js +3 -3
- package/lib/commonjs/responsive-sheet/index.web.js.map +1 -1
- package/lib/module/dialog/CenteredDialog.js +2 -0
- package/lib/module/dialog/CenteredDialog.js.map +1 -1
- package/lib/module/dialog/CenteredDialog.web.js +2 -0
- package/lib/module/dialog/CenteredDialog.web.js.map +1 -1
- package/lib/module/dialog/Dialog.js +336 -46
- package/lib/module/dialog/Dialog.js.map +1 -1
- package/lib/module/dialog/Dialog.web.js +412 -65
- package/lib/module/dialog/Dialog.web.js.map +1 -1
- package/lib/module/dialog/index.js +1 -1
- package/lib/module/dialog/index.js.map +1 -1
- package/lib/module/dialog/index.web.js +1 -1
- package/lib/module/dialog/index.web.js.map +1 -1
- package/lib/module/dialog/placement.js +100 -0
- package/lib/module/dialog/placement.js.map +1 -0
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js +1 -1
- package/lib/module/index.web.js.map +1 -1
- package/lib/module/responsive-sheet/ResponsiveSheet.js +63 -266
- package/lib/module/responsive-sheet/ResponsiveSheet.js.map +1 -1
- package/lib/module/responsive-sheet/ResponsiveSheet.web.js +77 -0
- package/lib/module/responsive-sheet/ResponsiveSheet.web.js.map +1 -0
- package/lib/module/responsive-sheet/index.web.js +7 -9
- package/lib/module/responsive-sheet/index.web.js.map +1 -1
- package/lib/typescript/commonjs/dialog/CenteredDialog.d.ts +2 -0
- package/lib/typescript/commonjs/dialog/CenteredDialog.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/CenteredDialog.web.d.ts +2 -0
- package/lib/typescript/commonjs/dialog/CenteredDialog.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/Dialog.d.ts +18 -15
- package/lib/typescript/commonjs/dialog/Dialog.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/Dialog.web.d.ts +18 -5
- package/lib/typescript/commonjs/dialog/Dialog.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/centered-dialog-types.d.ts +4 -0
- package/lib/typescript/commonjs/dialog/centered-dialog-types.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/index.d.ts +2 -2
- package/lib/typescript/commonjs/dialog/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/index.web.d.ts +2 -2
- package/lib/typescript/commonjs/dialog/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/dialog/placement.d.ts +71 -0
- package/lib/typescript/commonjs/dialog/placement.d.ts.map +1 -0
- package/lib/typescript/commonjs/dialog/types.d.ts +66 -3
- package/lib/typescript/commonjs/dialog/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.d.ts +2 -2
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.web.d.ts +2 -2
- package/lib/typescript/commonjs/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/responsive-sheet/ResponsiveSheet.d.ts +15 -19
- package/lib/typescript/commonjs/responsive-sheet/ResponsiveSheet.d.ts.map +1 -1
- package/lib/typescript/commonjs/responsive-sheet/ResponsiveSheet.web.d.ts +16 -0
- package/lib/typescript/commonjs/responsive-sheet/ResponsiveSheet.web.d.ts.map +1 -0
- package/lib/typescript/commonjs/responsive-sheet/index.web.d.ts +1 -1
- package/lib/typescript/commonjs/responsive-sheet/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/responsive-sheet/types.d.ts +5 -2
- package/lib/typescript/commonjs/responsive-sheet/types.d.ts.map +1 -1
- package/lib/typescript/module/dialog/CenteredDialog.d.ts +2 -0
- package/lib/typescript/module/dialog/CenteredDialog.d.ts.map +1 -1
- package/lib/typescript/module/dialog/CenteredDialog.web.d.ts +2 -0
- package/lib/typescript/module/dialog/CenteredDialog.web.d.ts.map +1 -1
- package/lib/typescript/module/dialog/Dialog.d.ts +18 -15
- package/lib/typescript/module/dialog/Dialog.d.ts.map +1 -1
- package/lib/typescript/module/dialog/Dialog.web.d.ts +18 -5
- package/lib/typescript/module/dialog/Dialog.web.d.ts.map +1 -1
- package/lib/typescript/module/dialog/centered-dialog-types.d.ts +4 -0
- package/lib/typescript/module/dialog/centered-dialog-types.d.ts.map +1 -1
- package/lib/typescript/module/dialog/index.d.ts +2 -2
- package/lib/typescript/module/dialog/index.d.ts.map +1 -1
- package/lib/typescript/module/dialog/index.web.d.ts +2 -2
- package/lib/typescript/module/dialog/index.web.d.ts.map +1 -1
- package/lib/typescript/module/dialog/placement.d.ts +71 -0
- package/lib/typescript/module/dialog/placement.d.ts.map +1 -0
- package/lib/typescript/module/dialog/types.d.ts +66 -3
- package/lib/typescript/module/dialog/types.d.ts.map +1 -1
- package/lib/typescript/module/index.d.ts +2 -2
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/index.web.d.ts +2 -2
- package/lib/typescript/module/index.web.d.ts.map +1 -1
- package/lib/typescript/module/responsive-sheet/ResponsiveSheet.d.ts +15 -19
- package/lib/typescript/module/responsive-sheet/ResponsiveSheet.d.ts.map +1 -1
- package/lib/typescript/module/responsive-sheet/ResponsiveSheet.web.d.ts +16 -0
- package/lib/typescript/module/responsive-sheet/ResponsiveSheet.web.d.ts.map +1 -0
- package/lib/typescript/module/responsive-sheet/index.web.d.ts +1 -1
- package/lib/typescript/module/responsive-sheet/index.web.d.ts.map +1 -1
- package/lib/typescript/module/responsive-sheet/types.d.ts +5 -2
- package/lib/typescript/module/responsive-sheet/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/DialogPlacement.test.tsx +144 -0
- package/src/__tests__/ResponsiveSheet.test.tsx +36 -52
- package/src/dialog/CenteredDialog.tsx +2 -0
- package/src/dialog/CenteredDialog.web.tsx +2 -0
- package/src/dialog/Dialog.tsx +407 -50
- package/src/dialog/Dialog.web.tsx +490 -75
- package/src/dialog/centered-dialog-types.ts +4 -0
- package/src/dialog/index.ts +4 -1
- package/src/dialog/index.web.ts +4 -1
- package/src/dialog/placement.ts +113 -0
- package/src/dialog/types.ts +69 -3
- package/src/index.ts +4 -0
- package/src/index.web.ts +4 -0
- package/src/responsive-sheet/ResponsiveSheet.tsx +58 -297
- package/src/responsive-sheet/ResponsiveSheet.web.tsx +76 -0
- package/src/responsive-sheet/index.web.ts +7 -9
- package/src/responsive-sheet/types.ts +5 -2
- package/lib/commonjs/responsive-sheet/ResponsiveSheet.native.js +0 -226
- package/lib/commonjs/responsive-sheet/ResponsiveSheet.native.js.map +0 -1
- package/lib/commonjs/responsive-sheet/const.js +0 -60
- package/lib/commonjs/responsive-sheet/const.js.map +0 -1
- package/lib/module/responsive-sheet/ResponsiveSheet.native.js +0 -219
- package/lib/module/responsive-sheet/ResponsiveSheet.native.js.map +0 -1
- package/lib/module/responsive-sheet/const.js +0 -56
- package/lib/module/responsive-sheet/const.js.map +0 -1
- package/lib/typescript/commonjs/responsive-sheet/ResponsiveSheet.native.d.ts +0 -20
- package/lib/typescript/commonjs/responsive-sheet/ResponsiveSheet.native.d.ts.map +0 -1
- package/lib/typescript/commonjs/responsive-sheet/const.d.ts +0 -43
- package/lib/typescript/commonjs/responsive-sheet/const.d.ts.map +0 -1
- package/lib/typescript/module/responsive-sheet/ResponsiveSheet.native.d.ts +0 -20
- package/lib/typescript/module/responsive-sheet/ResponsiveSheet.native.d.ts.map +0 -1
- package/lib/typescript/module/responsive-sheet/const.d.ts +0 -43
- package/lib/typescript/module/responsive-sheet/const.d.ts.map +0 -1
- package/src/responsive-sheet/ResponsiveSheet.native.tsx +0 -257
- package/src/responsive-sheet/const.ts +0 -53
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
export { Dialog } from './Dialog';
|
|
3
|
+
export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
|
|
4
4
|
export { CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID } from './CenteredDialog';
|
|
5
5
|
export { BloomDialogProvider } from './BloomDialogProvider';
|
|
6
6
|
export { alert } from "./alert.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Dialog","CenteredDialog","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl"],"sourceRoot":"../../../src","sources":["dialog/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,UAAU;
|
|
1
|
+
{"version":3,"names":["Dialog","DIALOG_SHEET_BACKDROP_TESTID","CenteredDialog","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl"],"sourceRoot":"../../../src","sources":["dialog/index.ts"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,4BAA4B,QAAQ,UAAU;AAC/D,SAASC,cAAc,EAAEC,+BAA+B,QAAQ,kBAAkB;AAClF,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,KAAK,QAAQ,YAAS;AAC/B,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,cAAW","ignoreList":[]}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
// Web bundlers select this file via the `"browser"` export condition in
|
|
11
11
|
// `package.json`'s `exports['./dialog']`; native bundlers fall through to
|
|
12
12
|
// the React Native build above.
|
|
13
|
-
export { Dialog, BLOOM_DIALOG_CSS } from "./Dialog.web.js";
|
|
13
|
+
export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from "./Dialog.web.js";
|
|
14
14
|
export { CenteredDialog, BLOOM_CENTERED_DIALOG_CSS, CENTERED_DIALOG_BACKDROP_TESTID } from "./CenteredDialog.web.js";
|
|
15
15
|
export { BloomDialogProvider } from "./BloomDialogProvider.web.js";
|
|
16
16
|
export { alert } from "./alert.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Dialog","BLOOM_DIALOG_CSS","CenteredDialog","BLOOM_CENTERED_DIALOG_CSS","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl"],"sourceRoot":"../../../src","sources":["dialog/index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,iBAAc;
|
|
1
|
+
{"version":3,"names":["Dialog","BLOOM_DIALOG_CSS","DIALOG_SHEET_BACKDROP_TESTID","CenteredDialog","BLOOM_CENTERED_DIALOG_CSS","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl"],"sourceRoot":"../../../src","sources":["dialog/index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,gBAAgB,EAAEC,4BAA4B,QAAQ,iBAAc;AACrF,SACEC,cAAc,EACdC,yBAAyB,EACzBC,+BAA+B,QAC1B,yBAAsB;AAC7B,SAASC,mBAAmB,QAAQ,8BAA2B;AAC/D,SAASC,KAAK,QAAQ,YAAS;AAC/B,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,cAAW","ignoreList":[]}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { useWindowDimensions } from 'react-native';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Anchor a `<Dialog>` can render against.
|
|
8
|
+
*
|
|
9
|
+
* - `'center'` — the default centered modal card (current behavior).
|
|
10
|
+
* - `'left'` / `'right'` — an anchored side-sheet / drawer.
|
|
11
|
+
* - `'bottom'` — a bottom-sheet (drag handle, slide-up).
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* A `<Dialog>` placement that may vary by viewport width.
|
|
16
|
+
*
|
|
17
|
+
* Either a single `DialogPlacement` (applied at every width) or a responsive
|
|
18
|
+
* map whose `base` applies below the first breakpoint and whose `sm`/`md`/`lg`/
|
|
19
|
+
* `xl` keys override it at and above the matching Tailwind breakpoint.
|
|
20
|
+
*
|
|
21
|
+
* The common store-drawer case is `{ base: 'bottom', md: 'left' }`; the common
|
|
22
|
+
* dialog-to-sheet case is `{ base: 'bottom', md: 'center' }`.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Tailwind-default breakpoints (px). A responsive `placement` map resolves to
|
|
27
|
+
* the value for the largest key whose min-width is `<=` the current viewport
|
|
28
|
+
* width, falling back to `base`.
|
|
29
|
+
*/
|
|
30
|
+
export const BREAKPOINT_SM = 640;
|
|
31
|
+
export const BREAKPOINT_MD = 768;
|
|
32
|
+
export const BREAKPOINT_LG = 1024;
|
|
33
|
+
export const BREAKPOINT_XL = 1280;
|
|
34
|
+
|
|
35
|
+
/** Ordered breakpoint table, widest first, so the first match wins. */
|
|
36
|
+
const RESPONSIVE_KEYS = [['xl', BREAKPOINT_XL], ['lg', BREAKPOINT_LG], ['md', BREAKPOINT_MD], ['sm', BREAKPOINT_SM]];
|
|
37
|
+
|
|
38
|
+
/** Default side-sheet width (px) on wide screens. */
|
|
39
|
+
export const DEFAULT_SIDE_WIDTH = 460;
|
|
40
|
+
|
|
41
|
+
/** Default centered-card max width (px). Matches the legacy `maxWidth: 480`. */
|
|
42
|
+
export const DEFAULT_CENTER_MAX_WIDTH = 480;
|
|
43
|
+
|
|
44
|
+
/** Default bottom-sheet max height as a fraction of the viewport height. */
|
|
45
|
+
export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
|
|
46
|
+
|
|
47
|
+
/** Corner radius shared by the side-sheet panel and the bottom-sheet top. */
|
|
48
|
+
export const PANEL_RADIUS = 20;
|
|
49
|
+
|
|
50
|
+
/** Open/close transition duration (ms). ~280ms ease-out reads smooth. */
|
|
51
|
+
export const ANIMATION_DURATION = 280;
|
|
52
|
+
|
|
53
|
+
/** Centered-card fade-out duration (ms) — preserves the legacy timing. */
|
|
54
|
+
export const CENTER_FADE_OUT_DURATION = 150;
|
|
55
|
+
|
|
56
|
+
/** CSS approximation of reanimated's `Easing.out(Easing.cubic)`. */
|
|
57
|
+
export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
|
|
58
|
+
|
|
59
|
+
/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
|
|
60
|
+
export const SHEET_BACKDROP_OPACITY = 0.4;
|
|
61
|
+
|
|
62
|
+
/** Stable testID for the dimmed backdrop of a side/bottom placement dialog. */
|
|
63
|
+
export const DIALOG_SHEET_BACKDROP_TESTID = 'bloom-dialog-sheet-backdrop';
|
|
64
|
+
|
|
65
|
+
/** Drag-handle pill geometry for the bottom-sheet. */
|
|
66
|
+
export const HANDLE_WIDTH = 36;
|
|
67
|
+
export const HANDLE_HEIGHT = 5;
|
|
68
|
+
export const HANDLE_RADIUS = 3;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Minimum gutter kept between a wide side-sheet and the opposite viewport edge
|
|
72
|
+
* when capping its width, so the panel never spans the full screen.
|
|
73
|
+
*/
|
|
74
|
+
export const SIDE_SHEET_MIN_GUTTER = 24;
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Resolve a (possibly responsive) `placement` to a concrete `DialogPlacement`
|
|
78
|
+
* for the current viewport width.
|
|
79
|
+
*
|
|
80
|
+
* A plain string placement resolves to itself. A responsive map picks the
|
|
81
|
+
* value for the largest breakpoint key whose min-width is `<=` the viewport
|
|
82
|
+
* width, falling back to `base` below the first breakpoint.
|
|
83
|
+
*/
|
|
84
|
+
export function useResolvedPlacement(placement) {
|
|
85
|
+
const {
|
|
86
|
+
width
|
|
87
|
+
} = useWindowDimensions();
|
|
88
|
+
return useMemo(() => {
|
|
89
|
+
if (placement === undefined) return 'center';
|
|
90
|
+
if (typeof placement === 'string') return placement;
|
|
91
|
+
for (const [key, minWidth] of RESPONSIVE_KEYS) {
|
|
92
|
+
if (width >= minWidth) {
|
|
93
|
+
const value = placement[key];
|
|
94
|
+
if (value !== undefined) return value;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
return placement.base;
|
|
98
|
+
}, [placement, width]);
|
|
99
|
+
}
|
|
100
|
+
//# sourceMappingURL=placement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","useWindowDimensions","BREAKPOINT_SM","BREAKPOINT_MD","BREAKPOINT_LG","BREAKPOINT_XL","RESPONSIVE_KEYS","DEFAULT_SIDE_WIDTH","DEFAULT_CENTER_MAX_WIDTH","DEFAULT_MAX_HEIGHT_RATIO","PANEL_RADIUS","ANIMATION_DURATION","CENTER_FADE_OUT_DURATION","EASE_OUT","SHEET_BACKDROP_OPACITY","DIALOG_SHEET_BACKDROP_TESTID","HANDLE_WIDTH","HANDLE_HEIGHT","HANDLE_RADIUS","SIDE_SHEET_MIN_GUTTER","useResolvedPlacement","placement","width","undefined","key","minWidth","value","base"],"sourceRoot":"../../../src","sources":["dialog/placement.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,mBAAmB,QAAQ,cAAc;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAG,GAAG;AAChC,OAAO,MAAMC,aAAa,GAAG,GAAG;AAChC,OAAO,MAAMC,aAAa,GAAG,IAAI;AACjC,OAAO,MAAMC,aAAa,GAAG,IAAI;;AAEjC;AACA,MAAMC,eAAe,GAAG,CACtB,CAAC,IAAI,EAAED,aAAa,CAAC,EACrB,CAAC,IAAI,EAAED,aAAa,CAAC,EACrB,CAAC,IAAI,EAAED,aAAa,CAAC,EACrB,CAAC,IAAI,EAAED,aAAa,CAAC,CACb;;AAEV;AACA,OAAO,MAAMK,kBAAkB,GAAG,GAAG;;AAErC;AACA,OAAO,MAAMC,wBAAwB,GAAG,GAAG;;AAE3C;AACA,OAAO,MAAMC,wBAAwB,GAAG,GAAG;;AAE3C;AACA,OAAO,MAAMC,YAAY,GAAG,EAAE;;AAE9B;AACA,OAAO,MAAMC,kBAAkB,GAAG,GAAG;;AAErC;AACA,OAAO,MAAMC,wBAAwB,GAAG,GAAG;;AAE3C;AACA,OAAO,MAAMC,QAAQ,GAAG,gCAAgC;;AAExD;AACA,OAAO,MAAMC,sBAAsB,GAAG,GAAG;;AAEzC;AACA,OAAO,MAAMC,4BAA4B,GAAG,6BAA6B;;AAEzE;AACA,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,aAAa,GAAG,CAAC;AAC9B,OAAO,MAAMC,aAAa,GAAG,CAAC;;AAE9B;AACA;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,GAAG,EAAE;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAClCC,SAAgD,EAC/B;EACjB,MAAM;IAAEC;EAAM,CAAC,GAAGrB,mBAAmB,CAAC,CAAC;EAEvC,OAAOD,OAAO,CAAkB,MAAM;IACpC,IAAIqB,SAAS,KAAKE,SAAS,EAAE,OAAO,QAAQ;IAC5C,IAAI,OAAOF,SAAS,KAAK,QAAQ,EAAE,OAAOA,SAAS;IACnD,KAAK,MAAM,CAACG,GAAG,EAAEC,QAAQ,CAAC,IAAInB,eAAe,EAAE;MAC7C,IAAIgB,KAAK,IAAIG,QAAQ,EAAE;QACrB,MAAMC,KAAK,GAAGL,SAAS,CAACG,GAAG,CAAC;QAC5B,IAAIE,KAAK,KAAKH,SAAS,EAAE,OAAOG,KAAK;MACvC;IACF;IACA,OAAOL,SAAS,CAACM,IAAI;EACvB,CAAC,EAAE,CAACN,SAAS,EAAEC,KAAK,CAAC,CAAC;AACxB","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -19,7 +19,7 @@ export { sizes as iconSizes, useCommonSVGProps } from "./icons/common.js";
|
|
|
19
19
|
|
|
20
20
|
// Core components
|
|
21
21
|
export * from './portal';
|
|
22
|
-
export { Dialog, CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID, BloomDialogProvider, alert, useDialogContext, useDialogControl } from './dialog';
|
|
22
|
+
export { Dialog, DIALOG_SHEET_BACKDROP_TESTID, CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID, BloomDialogProvider, alert, useDialogContext, useDialogControl } from './dialog';
|
|
23
23
|
export * from './button';
|
|
24
24
|
export { Fab } from './fab';
|
|
25
25
|
export * from "./grouped-buttons/index.js";
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["atoms","flatten","Z_INDEX","zIndex","tokens","web","native","ios","android","platform","select","useInteractionState","useDelayedLoading","useThrottledValue","Icons","sizes","iconSizes","useCommonSVGProps","Dialog","CenteredDialog","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl","Fab","ErrorBoundary","AvatarGroup","UserHoverCard","PromptInput","toast","Typography","Skeleton","Grid","Fill","IconCircle","TextField","SegmentedControl","SearchInput","Label","Field","InputGroup","Slider","Combobox","BottomSheet","ResponsiveSheet","RESPONSIVE_SHEET_BACKDROP_TESTID","Tabs","Accordion","Item","Kbd","Admonition","Menu","Tooltip","Select","ContextMenu","Popover","AlertDialog","AlertDialogHost","confirm","Command","Code","Fonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,cAAc,kBAAS;;AAEvB;AACA,SAASA,KAAK,EAAEC,OAAO,EAAEC,OAAO,EAAEC,MAAM,QAAQ,mBAAU;AAE1D,OAAO,KAAKC,MAAM,MAAM,oBAAiB;AACzC,SAASC,GAAG,EAAEC,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,sBAAmB;;AAE/E;AACA,SAASC,mBAAmB,QAAQ,gCAA6B;AACjE,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,SAASC,iBAAiB,QAAQ,8BAA2B;;AAE7D;AACA,OAAO,KAAKC,KAAK,MAAM,kBAAS;AAChC,SAAkCC,KAAK,IAAIC,SAAS,EAAEC,iBAAiB,QAAQ,mBAAgB;;AAE/F;AACA,cAAc,UAAU;AACxB,SACEC,MAAM,EACNC,cAAc,EACdC,+BAA+B,EAC/BC,mBAAmB,EACnBC,KAAK,EACLC,gBAAgB,EAChBC,gBAAgB,QACX,UAAU;
|
|
1
|
+
{"version":3,"names":["atoms","flatten","Z_INDEX","zIndex","tokens","web","native","ios","android","platform","select","useInteractionState","useDelayedLoading","useThrottledValue","Icons","sizes","iconSizes","useCommonSVGProps","Dialog","DIALOG_SHEET_BACKDROP_TESTID","CenteredDialog","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl","Fab","ErrorBoundary","AvatarGroup","UserHoverCard","PromptInput","toast","Typography","Skeleton","Grid","Fill","IconCircle","TextField","SegmentedControl","SearchInput","Label","Field","InputGroup","Slider","Combobox","BottomSheet","ResponsiveSheet","RESPONSIVE_SHEET_BACKDROP_TESTID","Tabs","Accordion","Item","Kbd","Admonition","Menu","Tooltip","Select","ContextMenu","Popover","AlertDialog","AlertDialogHost","confirm","Command","Code","Fonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,cAAc,kBAAS;;AAEvB;AACA,SAASA,KAAK,EAAEC,OAAO,EAAEC,OAAO,EAAEC,MAAM,QAAQ,mBAAU;AAE1D,OAAO,KAAKC,MAAM,MAAM,oBAAiB;AACzC,SAASC,GAAG,EAAEC,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,sBAAmB;;AAE/E;AACA,SAASC,mBAAmB,QAAQ,gCAA6B;AACjE,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,SAASC,iBAAiB,QAAQ,8BAA2B;;AAE7D;AACA,OAAO,KAAKC,KAAK,MAAM,kBAAS;AAChC,SAAkCC,KAAK,IAAIC,SAAS,EAAEC,iBAAiB,QAAQ,mBAAgB;;AAE/F;AACA,cAAc,UAAU;AACxB,SACEC,MAAM,EACNC,4BAA4B,EAC5BC,cAAc,EACdC,+BAA+B,EAC/BC,mBAAmB,EACnBC,KAAK,EACLC,gBAAgB,EAChBC,gBAAgB,QACX,UAAU;AAcjB,cAAc,UAAU;AACxB,SAASC,GAAG,QAAQ,OAAO;AAE3B,cAAc,4BAAmB;AACjC,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,wBAAe;AAC7B,SAASC,aAAa,QAAQ,2BAAkB;AAMhD,cAAc,mBAAU;AACxB,SAASC,WAAW,QAAQ,yBAAgB;AAE5C,SAASC,aAAa,QAAQ,4BAAmB;AAEjD,cAAc,WAAW;AACzB,OAAO,KAAKC,WAAW,MAAM,yBAAgB;AAC7C,cAAc,mBAAU;AACxB,SAASC,KAAK,QAAoB,SAAS;;AAE3C;AACA,OAAO,KAAKC,UAAU,MAAM,uBAAc;;AAE1C;AACA,OAAO,KAAKC,QAAQ,MAAM,qBAAY;AACtC,OAAO,KAAKC,IAAI,MAAM,iBAAQ;AAC9B,SAASC,IAAI,QAAQ,iBAAQ;AAC7B,SAASC,UAAU,QAAQ,wBAAe;;AAE1C;AACA,OAAO,KAAKC,SAAS,MAAM,uBAAc;AACzC,OAAO,KAAKC,gBAAgB,MAAM,8BAAqB;AACvD,SAASC,WAAW,QAAQ,yBAAgB;AAC5C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,UAAU,QAAQ,wBAAe;AAE1C,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,YAAY;AAGrC;AACA,SAASC,WAAW,QAAQ,yBAAgB;AAG5C;AACA,SAASC,eAAe,EAAEC,gCAAgC,QAAQ,oBAAoB;AAOtF;AACA,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,OAAO,KAAKC,IAAI,MAAM,iBAAQ;AAC9B,cAAc,qBAAY;AAC1B,OAAO,KAAKC,SAAS,MAAM,sBAAa;;AAExC;AACA,cAAc,0BAAiB;AAC/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAG3B;AACA,OAAO,KAAKC,UAAU,MAAM,uBAAc;AAC1C,OAAO,KAAKC,IAAI,MAAM,QAAQ;AAC9B,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,WAAW,MAAM,gBAAgB;AAC7C,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,SAASC,WAAW,EAAEC,eAAe,EAAEC,OAAO,QAAQ,gBAAgB;AAMtE,SAASC,OAAO,QAAQ,WAAW;AAGnC;AACA,OAAO,KAAKC,IAAI,MAAM,iBAAQ;;AAE9B;AACA,OAAO,KAAKC,KAAK,MAAM,SAAS","ignoreList":[]}
|
package/lib/module/index.web.js
CHANGED
|
@@ -24,7 +24,7 @@ export { sizes as iconSizes, useCommonSVGProps } from "./icons/common.js";
|
|
|
24
24
|
|
|
25
25
|
// Core components
|
|
26
26
|
export * from "./portal/index.web.js";
|
|
27
|
-
export { Dialog, CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID, BloomDialogProvider, alert, useDialogContext, useDialogControl } from "./dialog/index.web.js";
|
|
27
|
+
export { Dialog, DIALOG_SHEET_BACKDROP_TESTID, CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID, BloomDialogProvider, alert, useDialogContext, useDialogControl } from "./dialog/index.web.js";
|
|
28
28
|
export * from "./button/index.web.js";
|
|
29
29
|
export { Fab } from "./fab/index.web.js";
|
|
30
30
|
export * from "./grouped-buttons/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["atoms","flatten","Z_INDEX","zIndex","tokens","web","native","ios","android","platform","select","useInteractionState","useDelayedLoading","useThrottledValue","Icons","sizes","iconSizes","useCommonSVGProps","Dialog","CenteredDialog","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl","Fab","ErrorBoundary","AvatarGroup","UserHoverCard","PromptInput","toast","Typography","Skeleton","Grid","Fill","IconCircle","TextField","SegmentedControl","SearchInput","Label","Field","InputGroup","Slider","Combobox","BottomSheet","ResponsiveSheet","RESPONSIVE_SHEET_BACKDROP_TESTID","Tabs","Accordion","Item","Kbd","Admonition","Menu","Tooltip","Select","ContextMenu","Popover","AlertDialog","AlertDialogHost","confirm","Command","Code","Fonts"],"sourceRoot":"../../src","sources":["index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA;AACA,cAAc,kBAAS;;AAEvB;AACA,SAASA,KAAK,EAAEC,OAAO,EAAEC,OAAO,EAAEC,MAAM,QAAQ,mBAAU;AAE1D,OAAO,KAAKC,MAAM,MAAM,oBAAiB;AACzC,SAASC,GAAG,EAAEC,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,sBAAmB;;AAE/E;AACA,SAASC,mBAAmB,QAAQ,gCAA6B;AACjE,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,SAASC,iBAAiB,QAAQ,8BAA2B;;AAE7D;AACA,OAAO,KAAKC,KAAK,MAAM,kBAAS;AAChC,SAAkCC,KAAK,IAAIC,SAAS,EAAEC,iBAAiB,QAAQ,mBAAgB;;AAE/F;AACA,cAAc,uBAAoB;AAClC,SACEC,MAAM,EACNC,cAAc,EACdC,+BAA+B,EAC/BC,mBAAmB,EACnBC,KAAK,EACLC,gBAAgB,EAChBC,gBAAgB,QACX,uBAAoB;
|
|
1
|
+
{"version":3,"names":["atoms","flatten","Z_INDEX","zIndex","tokens","web","native","ios","android","platform","select","useInteractionState","useDelayedLoading","useThrottledValue","Icons","sizes","iconSizes","useCommonSVGProps","Dialog","DIALOG_SHEET_BACKDROP_TESTID","CenteredDialog","CENTERED_DIALOG_BACKDROP_TESTID","BloomDialogProvider","alert","useDialogContext","useDialogControl","Fab","ErrorBoundary","AvatarGroup","UserHoverCard","PromptInput","toast","Typography","Skeleton","Grid","Fill","IconCircle","TextField","SegmentedControl","SearchInput","Label","Field","InputGroup","Slider","Combobox","BottomSheet","ResponsiveSheet","RESPONSIVE_SHEET_BACKDROP_TESTID","Tabs","Accordion","Item","Kbd","Admonition","Menu","Tooltip","Select","ContextMenu","Popover","AlertDialog","AlertDialogHost","confirm","Command","Code","Fonts"],"sourceRoot":"../../src","sources":["index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA;AACA,cAAc,kBAAS;;AAEvB;AACA,SAASA,KAAK,EAAEC,OAAO,EAAEC,OAAO,EAAEC,MAAM,QAAQ,mBAAU;AAE1D,OAAO,KAAKC,MAAM,MAAM,oBAAiB;AACzC,SAASC,GAAG,EAAEC,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,sBAAmB;;AAE/E;AACA,SAASC,mBAAmB,QAAQ,gCAA6B;AACjE,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,SAASC,iBAAiB,QAAQ,8BAA2B;;AAE7D;AACA,OAAO,KAAKC,KAAK,MAAM,kBAAS;AAChC,SAAkCC,KAAK,IAAIC,SAAS,EAAEC,iBAAiB,QAAQ,mBAAgB;;AAE/F;AACA,cAAc,uBAAoB;AAClC,SACEC,MAAM,EACNC,4BAA4B,EAC5BC,cAAc,EACdC,+BAA+B,EAC/BC,mBAAmB,EACnBC,KAAK,EACLC,gBAAgB,EAChBC,gBAAgB,QACX,uBAAoB;AAc3B,cAAc,uBAAoB;AAClC,SAASC,GAAG,QAAQ,oBAAiB;AAErC,cAAc,4BAAmB;AACjC,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,wBAAe;AAC7B,SAASC,aAAa,QAAQ,2BAAkB;AAMhD,cAAc,mBAAU;AACxB,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,4BAAmB;AAEjD,cAAc,wBAAqB;AACnC,OAAO,KAAKC,WAAW,MAAM,yBAAgB;AAC7C,cAAc,mBAAU;AACxB,SAASC,KAAK,QAAoB,sBAAmB;;AAErD;AACA,OAAO,KAAKC,UAAU,MAAM,uBAAc;;AAE1C;AACA,OAAO,KAAKC,QAAQ,MAAM,qBAAY;AACtC,OAAO,KAAKC,IAAI,MAAM,iBAAQ;AAC9B,SAASC,IAAI,QAAQ,iBAAQ;AAC7B,SAASC,UAAU,QAAQ,wBAAe;;AAE1C;AACA,OAAO,KAAKC,SAAS,MAAM,uBAAc;AACzC,OAAO,KAAKC,gBAAgB,MAAM,8BAAqB;AACvD,SAASC,WAAW,QAAQ,yBAAgB;AAC5C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,UAAU,QAAQ,wBAAe;AAE1C,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,yBAAsB;AAG/C;AACA,SAASC,WAAW,QAAQ,yBAAgB;AAG5C;AACA,SAASC,eAAe,EAAEC,gCAAgC,QAAQ,iCAA8B;AAOhG;AACA,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,OAAO,KAAKC,IAAI,MAAM,iBAAQ;AAC9B,cAAc,qBAAY;AAC1B,OAAO,KAAKC,SAAS,MAAM,sBAAa;;AAExC;AACA,cAAc,0BAAiB;AAC/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAG3B;AACA,OAAO,KAAKC,UAAU,MAAM,uBAAc;AAC1C,OAAO,KAAKC,IAAI,MAAM,qBAAkB;AACxC,OAAO,KAAKC,OAAO,MAAM,wBAAqB;AAC9C,OAAO,KAAKC,MAAM,MAAM,uBAAoB;AAC5C,OAAO,KAAKC,WAAW,MAAM,6BAA0B;AACvD,OAAO,KAAKC,OAAO,MAAM,wBAAqB;AAC9C,SAASC,WAAW,EAAEC,eAAe,EAAEC,OAAO,QAAQ,6BAA0B;AAMhF,SAASC,OAAO,QAAQ,wBAAqB;AAG7C;AACA,OAAO,KAAKC,IAAI,MAAM,iBAAQ;;AAE9B;AACA,OAAO,KAAKC,KAAK,MAAM,sBAAmB","ignoreList":[]}
|
|
@@ -1,293 +1,90 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { ANIMATION_DURATION, BACKDROP_OPACITY, DEFAULT_BREAKPOINT, DEFAULT_LABEL, DEFAULT_MAX_HEIGHT_RATIO, DEFAULT_SIDE, DEFAULT_WIDTH, EASE_OUT, HANDLE_HEIGHT, HANDLE_RADIUS, HANDLE_WIDTH, PANEL_RADIUS, SIDE_SHEET_MIN_GUTTER } from "./const.js";
|
|
8
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
/** Stable testID for the dimmed backdrop dismiss button. */
|
|
10
|
-
export const RESPONSIVE_SHEET_BACKDROP_TESTID = 'bloom-responsive-sheet-backdrop';
|
|
11
|
-
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Dialog } from '../dialog';
|
|
5
|
+
import { BREAKPOINT_LG, BREAKPOINT_MD, BREAKPOINT_SM, BREAKPOINT_XL, DIALOG_SHEET_BACKDROP_TESTID } from "../dialog/placement.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
7
|
/**
|
|
13
|
-
*
|
|
8
|
+
* @deprecated Use `<Dialog placement={{ base: 'bottom', md: 'left' }}>` instead.
|
|
14
9
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* here would break every web bundler and downstream type-check. The native
|
|
21
|
-
* fork (`ResponsiveSheet.native.tsx`, selected only by Metro) drives the same
|
|
22
|
-
* motion with reanimated.
|
|
10
|
+
* `ResponsiveSheet` is now a thin wrapper that configures the canonical
|
|
11
|
+
* `<Dialog>` — an anchored side-sheet on wide screens collapsing to a
|
|
12
|
+
* bottom-sheet below the breakpoint. It holds ZERO motion/layout logic of its
|
|
13
|
+
* own; it maps its props onto a responsive `Dialog` `placement`. The
|
|
14
|
+
* `@oxyhq/bloom/responsive-sheet` subpath is retained for the migration window.
|
|
23
15
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* open AND close directions animate while the node stays mounted through the
|
|
28
|
-
* exit. We deliberately do NOT use reanimated `exiting` on web — concurrent
|
|
29
|
-
* React unmounts there throw `Failed to execute 'removeChild' on 'Node'`, the
|
|
30
|
-
* exact bug this component exists to avoid.
|
|
16
|
+
* This file is BOTH the package default entry (resolved by downstream `tsc`
|
|
17
|
+
* and non-Metro web bundlers via the `browser` condition through `index.web`)
|
|
18
|
+
* AND a clean delegation, so it carries no platform-specific imports.
|
|
31
19
|
*/
|
|
32
20
|
export function ResponsiveSheet({
|
|
33
21
|
open,
|
|
34
22
|
onClose,
|
|
35
|
-
side =
|
|
36
|
-
breakpoint =
|
|
37
|
-
width
|
|
38
|
-
maxHeightRatio
|
|
23
|
+
side = 'left',
|
|
24
|
+
breakpoint = BREAKPOINT_MD,
|
|
25
|
+
width,
|
|
26
|
+
maxHeightRatio,
|
|
39
27
|
inset,
|
|
40
|
-
showHandle
|
|
41
|
-
dismissOnBackdrop
|
|
28
|
+
showHandle,
|
|
29
|
+
dismissOnBackdrop,
|
|
42
30
|
panelStyle,
|
|
43
31
|
panelClassName,
|
|
44
32
|
containerStyle,
|
|
45
33
|
containerClassName,
|
|
46
|
-
label
|
|
34
|
+
label,
|
|
47
35
|
children
|
|
48
36
|
}) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
if (open) {
|
|
66
|
-
if (closeTimerRef.current) {
|
|
67
|
-
clearTimeout(closeTimerRef.current);
|
|
68
|
-
closeTimerRef.current = null;
|
|
69
|
-
}
|
|
70
|
-
setMounted(true);
|
|
71
|
-
// Defer to the next frame so the entry start state paints before we
|
|
72
|
-
// transition to the shown state. Two frames guarantees the start
|
|
73
|
-
// transform has committed before the toggle (a single frame can be
|
|
74
|
-
// coalesced with the mount paint in some browsers).
|
|
75
|
-
frameRef.current = scheduleFrame(() => {
|
|
76
|
-
frameRef.current = scheduleFrame(() => setShown(true));
|
|
77
|
-
});
|
|
78
|
-
return () => {
|
|
79
|
-
if (frameRef.current !== null) {
|
|
80
|
-
cancelFrame(frameRef.current);
|
|
81
|
-
frameRef.current = null;
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// Closing: only run the exit if something is currently mounted.
|
|
87
|
-
setShown(false);
|
|
88
|
-
if (!mounted) return;
|
|
89
|
-
closeTimerRef.current = setTimeout(() => {
|
|
90
|
-
setMounted(false);
|
|
91
|
-
closeTimerRef.current = null;
|
|
92
|
-
}, ANIMATION_DURATION);
|
|
93
|
-
return () => {
|
|
94
|
-
if (closeTimerRef.current) {
|
|
95
|
-
clearTimeout(closeTimerRef.current);
|
|
96
|
-
closeTimerRef.current = null;
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
}, [open, mounted]);
|
|
100
|
-
|
|
101
|
-
// Escape-to-close while open (web only; document is undefined elsewhere).
|
|
102
|
-
useEffect(() => {
|
|
103
|
-
if (!open || typeof document === 'undefined') return;
|
|
104
|
-
const handler = e => {
|
|
105
|
-
if (e.key === 'Escape') {
|
|
106
|
-
e.stopPropagation();
|
|
107
|
-
onClose();
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
document.addEventListener('keydown', handler);
|
|
111
|
-
return () => document.removeEventListener('keydown', handler);
|
|
112
|
-
}, [open, onClose]);
|
|
113
|
-
const handleBackdropPress = useCallback(() => {
|
|
114
|
-
if (dismissOnBackdrop) onClose();
|
|
115
|
-
}, [dismissOnBackdrop, onClose]);
|
|
116
|
-
const isBottom = viewportWidth < breakpoint;
|
|
117
|
-
const panelBackground = theme.colors.background;
|
|
118
|
-
const panelTransition = useMemo(() => ({
|
|
119
|
-
transitionProperty: 'transform, opacity',
|
|
120
|
-
transitionDuration: `${ANIMATION_DURATION}ms`,
|
|
121
|
-
transitionTimingFunction: EASE_OUT
|
|
122
|
-
}), []);
|
|
123
|
-
const backdropTransition = useMemo(() => ({
|
|
124
|
-
transitionProperty: 'opacity',
|
|
125
|
-
transitionDuration: `${ANIMATION_DURATION}ms`,
|
|
126
|
-
transitionTimingFunction: EASE_OUT
|
|
127
|
-
}), []);
|
|
128
|
-
const panelGeometry = useMemo(() => {
|
|
129
|
-
if (isBottom) {
|
|
130
|
-
return {
|
|
131
|
-
left: 0,
|
|
132
|
-
right: 0,
|
|
133
|
-
bottom: 0,
|
|
134
|
-
maxHeight: Math.round(viewportHeight * maxHeightRatio),
|
|
135
|
-
borderTopLeftRadius: PANEL_RADIUS,
|
|
136
|
-
borderTopRightRadius: PANEL_RADIUS,
|
|
137
|
-
transform: [{
|
|
138
|
-
translateY: shown ? 0 : '100%'
|
|
139
|
-
}],
|
|
140
|
-
opacity: shown ? 1 : 0
|
|
141
|
-
};
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// Side-sheet: full height minus top/bottom inset, anchored to `side`,
|
|
145
|
-
// offset by the matching horizontal inset. Width is capped so the panel
|
|
146
|
-
// always leaves a gutter on the opposite edge.
|
|
147
|
-
const insetTop = inset?.top ?? 0;
|
|
148
|
-
const insetBottom = inset?.bottom ?? 0;
|
|
149
|
-
const insetLeft = inset?.left ?? 0;
|
|
150
|
-
const insetRight = inset?.right ?? 0;
|
|
151
|
-
const anchorInset = side === 'left' ? insetLeft : insetRight;
|
|
152
|
-
const oppositeInset = side === 'left' ? insetRight : insetLeft;
|
|
153
|
-
const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
|
|
154
|
-
const cappedWidth = Math.max(0, Math.min(width, available));
|
|
155
|
-
const hiddenSign = side === 'left' ? '-100%' : '100%';
|
|
156
|
-
return {
|
|
157
|
-
top: insetTop,
|
|
158
|
-
bottom: insetBottom,
|
|
159
|
-
[side]: anchorInset,
|
|
160
|
-
width: cappedWidth,
|
|
161
|
-
borderRadius: PANEL_RADIUS,
|
|
162
|
-
transform: [{
|
|
163
|
-
translateX: shown ? 0 : hiddenSign
|
|
164
|
-
}],
|
|
165
|
-
opacity: shown ? 1 : 0
|
|
166
|
-
};
|
|
167
|
-
}, [isBottom, shown, side, width, inset, viewportWidth, viewportHeight, maxHeightRatio]);
|
|
168
|
-
if (!mounted) return null;
|
|
169
|
-
return /*#__PURE__*/_jsxs(View, {
|
|
170
|
-
style: [styles.root, containerStyle]
|
|
171
|
-
// NativeWind reads `className` at runtime; RN core does not type it on
|
|
172
|
-
// View, so spread it conditionally (matching the Button/Fab pattern).
|
|
173
|
-
,
|
|
174
|
-
...(containerClassName ? {
|
|
175
|
-
className: containerClassName
|
|
176
|
-
} : {}),
|
|
177
|
-
pointerEvents: "box-none",
|
|
178
|
-
children: [/*#__PURE__*/_jsx(Pressable, {
|
|
179
|
-
testID: RESPONSIVE_SHEET_BACKDROP_TESTID,
|
|
180
|
-
accessibilityRole: "button",
|
|
181
|
-
accessibilityLabel: `Dismiss ${label}`,
|
|
182
|
-
onPress: handleBackdropPress,
|
|
183
|
-
disabled: !dismissOnBackdrop,
|
|
184
|
-
style: [styles.backdrop, backdropTransition, {
|
|
185
|
-
opacity: shown ? BACKDROP_OPACITY : 0
|
|
186
|
-
}, isWeb ? webBackdropBlur : null]
|
|
187
|
-
}), /*#__PURE__*/_jsxs(View, {
|
|
188
|
-
accessibilityViewIsModal: true,
|
|
189
|
-
"aria-label": label,
|
|
190
|
-
...(panelClassName ? {
|
|
191
|
-
className: panelClassName
|
|
192
|
-
} : {}),
|
|
193
|
-
style: [styles.panel, {
|
|
194
|
-
backgroundColor: panelBackground,
|
|
195
|
-
shadowColor: theme.colors.shadow
|
|
196
|
-
}, panelGeometry, panelTransition, panelStyle],
|
|
197
|
-
pointerEvents: "auto",
|
|
198
|
-
children: [isBottom && showHandle ? /*#__PURE__*/_jsx(View, {
|
|
199
|
-
style: styles.handleRow,
|
|
200
|
-
pointerEvents: "none",
|
|
201
|
-
children: /*#__PURE__*/_jsx(View, {
|
|
202
|
-
style: [styles.handle, {
|
|
203
|
-
backgroundColor: theme.colors.border
|
|
204
|
-
}]
|
|
205
|
-
})
|
|
206
|
-
}) : null, children]
|
|
207
|
-
})]
|
|
37
|
+
return /*#__PURE__*/_jsx(Dialog, {
|
|
38
|
+
open: open,
|
|
39
|
+
onClose: onClose,
|
|
40
|
+
placement: placementForSide(side, breakpoint),
|
|
41
|
+
width: width,
|
|
42
|
+
maxHeightRatio: maxHeightRatio,
|
|
43
|
+
inset: inset,
|
|
44
|
+
showHandle: showHandle,
|
|
45
|
+
dismissOnBackdrop: dismissOnBackdrop,
|
|
46
|
+
panelStyle: panelStyle,
|
|
47
|
+
panelClassName: panelClassName,
|
|
48
|
+
containerStyle: containerStyle,
|
|
49
|
+
containerClassName: containerClassName,
|
|
50
|
+
label: label,
|
|
51
|
+
children: children
|
|
208
52
|
});
|
|
209
53
|
}
|
|
210
54
|
|
|
211
|
-
// This module is the web/default impl, but it is also the fallback resolved by
|
|
212
|
-
// a downstream consumer's `tsc` for the native target, so guard the web-only
|
|
213
|
-
// `backdrop-blur` style behind a runtime check rather than assuming web.
|
|
214
|
-
const isWeb = typeof document !== 'undefined';
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Opaque token returned by `scheduleFrame`. `requestAnimationFrame` returns a
|
|
218
|
-
* number; the `setTimeout` fallback returns a timer handle — both are kept so
|
|
219
|
-
* `cancelFrame` can route to the matching canceller.
|
|
220
|
-
*/
|
|
221
|
-
|
|
222
55
|
/**
|
|
223
|
-
*
|
|
224
|
-
*
|
|
225
|
-
*
|
|
56
|
+
* Build the `Dialog` `placement` map for a `ResponsiveSheet`: a bottom-sheet
|
|
57
|
+
* below `breakpoint`, the anchored `side` at and above it. The `breakpoint`
|
|
58
|
+
* (px) is bucketed to the nearest Tailwind key so the side-sheet engages at the
|
|
59
|
+
* matching width.
|
|
226
60
|
*/
|
|
227
|
-
function
|
|
228
|
-
if (
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
61
|
+
function placementForSide(side, breakpoint) {
|
|
62
|
+
if (breakpoint <= BREAKPOINT_SM) return {
|
|
63
|
+
base: 'bottom',
|
|
64
|
+
sm: side
|
|
65
|
+
};
|
|
66
|
+
if (breakpoint <= BREAKPOINT_MD) return {
|
|
67
|
+
base: 'bottom',
|
|
68
|
+
md: side
|
|
69
|
+
};
|
|
70
|
+
if (breakpoint <= BREAKPOINT_LG) return {
|
|
71
|
+
base: 'bottom',
|
|
72
|
+
lg: side
|
|
73
|
+
};
|
|
74
|
+
if (breakpoint <= BREAKPOINT_XL) return {
|
|
75
|
+
base: 'bottom',
|
|
76
|
+
xl: side
|
|
77
|
+
};
|
|
233
78
|
return {
|
|
234
|
-
|
|
79
|
+
base: 'bottom',
|
|
80
|
+
xl: side
|
|
235
81
|
};
|
|
236
82
|
}
|
|
237
|
-
function cancelFrame(token) {
|
|
238
|
-
if ('raf' in token) {
|
|
239
|
-
if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(token.raf);
|
|
240
|
-
return;
|
|
241
|
-
}
|
|
242
|
-
clearTimeout(token.timer);
|
|
243
|
-
}
|
|
244
83
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
const
|
|
250
|
-
root: {
|
|
251
|
-
// `position: fixed` pins the overlay to the viewport on web; react-native
|
|
252
|
-
// does not type `'fixed'`, so cast to the RN-accepted `'absolute'`. On
|
|
253
|
-
// native the `.native` fork uses `StyleSheet.absoluteFill` instead.
|
|
254
|
-
position: 'fixed',
|
|
255
|
-
top: 0,
|
|
256
|
-
left: 0,
|
|
257
|
-
right: 0,
|
|
258
|
-
bottom: 0,
|
|
259
|
-
zIndex: Z_INDEX.fullscreen
|
|
260
|
-
},
|
|
261
|
-
backdrop: {
|
|
262
|
-
position: 'absolute',
|
|
263
|
-
top: 0,
|
|
264
|
-
left: 0,
|
|
265
|
-
right: 0,
|
|
266
|
-
bottom: 0,
|
|
267
|
-
backgroundColor: '#000'
|
|
268
|
-
},
|
|
269
|
-
panel: {
|
|
270
|
-
position: 'absolute',
|
|
271
|
-
overflow: 'hidden',
|
|
272
|
-
shadowOpacity: 0.18,
|
|
273
|
-
shadowRadius: 24,
|
|
274
|
-
shadowOffset: {
|
|
275
|
-
width: 0,
|
|
276
|
-
height: 8
|
|
277
|
-
}
|
|
278
|
-
},
|
|
279
|
-
handleRow: {
|
|
280
|
-
width: '100%',
|
|
281
|
-
alignItems: 'center',
|
|
282
|
-
paddingTop: 8,
|
|
283
|
-
paddingBottom: 4
|
|
284
|
-
},
|
|
285
|
-
handle: {
|
|
286
|
-
width: HANDLE_WIDTH,
|
|
287
|
-
height: HANDLE_HEIGHT,
|
|
288
|
-
borderRadius: HANDLE_RADIUS,
|
|
289
|
-
opacity: 0.5
|
|
290
|
-
}
|
|
291
|
-
});
|
|
84
|
+
/**
|
|
85
|
+
* @deprecated Stable testID for the dimmed backdrop dismiss button — now
|
|
86
|
+
* provided by the underlying `<Dialog>`'s side/bottom backdrop.
|
|
87
|
+
*/
|
|
88
|
+
export const RESPONSIVE_SHEET_BACKDROP_TESTID = DIALOG_SHEET_BACKDROP_TESTID;
|
|
292
89
|
export default ResponsiveSheet;
|
|
293
90
|
//# sourceMappingURL=ResponsiveSheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","Dialog","BREAKPOINT_LG","BREAKPOINT_MD","BREAKPOINT_SM","BREAKPOINT_XL","DIALOG_SHEET_BACKDROP_TESTID","jsx","_jsx","ResponsiveSheet","open","onClose","side","breakpoint","width","maxHeightRatio","inset","showHandle","dismissOnBackdrop","panelStyle","panelClassName","containerStyle","containerClassName","label","children","placement","placementForSide","base","sm","md","lg","xl","RESPONSIVE_SHEET_BACKDROP_TESTID"],"sourceRoot":"../../../src","sources":["responsive-sheet/ResponsiveSheet.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM,QAAQ,WAAW;AAClC,SACEC,aAAa,EACbC,aAAa,EACbC,aAAa,EACbC,aAAa,EACbC,4BAA4B,QAEvB,wBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,IAAI;EACJC,OAAO;EACPC,IAAI,GAAG,MAAM;EACbC,UAAU,GAAGV,aAAa;EAC1BW,KAAK;EACLC,cAAc;EACdC,KAAK;EACLC,UAAU;EACVC,iBAAiB;EACjBC,UAAU;EACVC,cAAc;EACdC,cAAc;EACdC,kBAAkB;EAClBC,KAAK;EACLC;AACoB,CAAC,EAAE;EACvB,oBACEhB,IAAA,CAACP,MAAM;IACLS,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBc,SAAS,EAAEC,gBAAgB,CAACd,IAAI,EAAEC,UAAU,CAAE;IAC9CC,KAAK,EAAEA,KAAM;IACbC,cAAc,EAAEA,cAAe;IAC/BC,KAAK,EAAEA,KAAM;IACbC,UAAU,EAAEA,UAAW;IACvBC,iBAAiB,EAAEA,iBAAkB;IACrCC,UAAU,EAAEA,UAAW;IACvBC,cAAc,EAAEA,cAAe;IAC/BC,cAAc,EAAEA,cAAe;IAC/BC,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEA,KAAM;IAAAC,QAAA,EAEZA;EAAQ,CACH,CAAC;AAEb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAASE,gBAAgBA,CACvBd,IAAsB,EACtBC,UAAkB,EACS;EAC3B,IAAIA,UAAU,IAAIT,aAAa,EAAE,OAAO;IAAEuB,IAAI,EAAE,QAAQ;IAAEC,EAAE,EAAEhB;EAAK,CAAC;EACpE,IAAIC,UAAU,IAAIV,aAAa,EAAE,OAAO;IAAEwB,IAAI,EAAE,QAAQ;IAAEE,EAAE,EAAEjB;EAAK,CAAC;EACpE,IAAIC,UAAU,IAAIX,aAAa,EAAE,OAAO;IAAEyB,IAAI,EAAE,QAAQ;IAAEG,EAAE,EAAElB;EAAK,CAAC;EACpE,IAAIC,UAAU,IAAIR,aAAa,EAAE,OAAO;IAAEsB,IAAI,EAAE,QAAQ;IAAEI,EAAE,EAAEnB;EAAK,CAAC;EACpE,OAAO;IAAEe,IAAI,EAAE,QAAQ;IAAEI,EAAE,EAAEnB;EAAK,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMoB,gCAAgC,GAAG1B,4BAA4B;AAE5E,eAAeG,eAAe","ignoreList":[]}
|