@cdx-ui/primitives 0.0.1-alpha.15 → 0.0.1-alpha.17
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/overlay/OverlayContainer.js +6 -4
- package/lib/commonjs/overlay/OverlayContainer.js.map +1 -1
- package/lib/module/overlay/OverlayContainer.js +7 -5
- package/lib/module/overlay/OverlayContainer.js.map +1 -1
- package/lib/typescript/overlay/OverlayContainer.d.ts +5 -1
- package/lib/typescript/overlay/OverlayContainer.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/overlay/OverlayContainer.tsx +7 -8
|
@@ -18,7 +18,11 @@ if (_reactNative.Platform.OS === 'web') {
|
|
|
18
18
|
* Cross-platform overlay container.
|
|
19
19
|
*
|
|
20
20
|
* - Web: renders children into a `createPortal` at `document.body` with
|
|
21
|
-
* `position: fixed` and `zIndex: 50`.
|
|
21
|
+
* `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
|
|
22
|
+
* Reanimated's `Animated.View` because Reanimated's layout animations
|
|
23
|
+
* (`entering`/`exiting`) rely on `require()` calls that break silently
|
|
24
|
+
* in Vite production bundles, leaving elements stuck at opacity 0.
|
|
25
|
+
* See: https://github.com/software-mansion/react-native-reanimated/issues/6775
|
|
22
26
|
* - Native: renders children inside a transparent `<Modal>` with a
|
|
23
27
|
* backdrop `<Pressable>` that calls `onDismiss` on press.
|
|
24
28
|
*
|
|
@@ -33,9 +37,7 @@ function OverlayContainer({
|
|
|
33
37
|
children
|
|
34
38
|
}) {
|
|
35
39
|
if (_reactNative.Platform.OS === 'web' && createPortalFn) {
|
|
36
|
-
return createPortalFn(/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
37
|
-
entering: entering,
|
|
38
|
-
exiting: exiting,
|
|
40
|
+
return createPortalFn(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
39
41
|
style: [{
|
|
40
42
|
position: 'fixed',
|
|
41
43
|
zIndex: 50
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireDefault","_jsxRuntime","e","__esModule","default","createPortalFn","Platform","OS","createPortal","OverlayContainer","onDismiss","entering","exiting","style","children","jsx","View","position","zIndex","document","body","jsxs","Modal","visible","transparent","animationType","statusBarTranslucent","onRequestClose","Pressable","StyleSheet","absoluteFill","onPress","accessible","importantForAccessibility"],"sourceRoot":"../../../src","sources":["overlay/OverlayContainer.tsx"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireDefault","_jsxRuntime","e","__esModule","default","createPortalFn","Platform","OS","createPortal","OverlayContainer","onDismiss","entering","exiting","style","children","jsx","View","position","zIndex","document","body","jsxs","Modal","visible","transparent","animationType","statusBarTranslucent","onRequestClose","Pressable","StyleSheet","absoluteFill","onPress","accessible","importantForAccessibility"],"sourceRoot":"../../../src","sources":["overlay/OverlayContainer.tsx"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AASA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+E,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/E,IAAIG,cAES;AACb,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;EACzB,IAAI;IACFF,cAAc,GAAGP,OAAO,CAAC,WAAW,CAAC,CAACU,YAAY;EACpD,CAAC,CAAC,MAAM,CAAC;AACX;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AAC+B,CAAC,EAAE;EAClC,IAAIR,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAIF,cAAc,EAAE;IAC3C,OAAOA,cAAc,cACnB,IAAAJ,WAAA,CAAAc,GAAA,EAAClB,YAAA,CAAAmB,IAAI;MAACH,KAAK,EAAE,CAAC;QAAEI,QAAQ,EAAE,OAAc;QAAEC,MAAM,EAAE;MAAG,CAAC,EAAEL,KAAK,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAO,CAAC,EACjFK,QAAQ,CAACC,IACX,CAAC;EACH;EAEA,oBACE,IAAAnB,WAAA,CAAAoB,IAAA,EAACxB,YAAA,CAAAyB,KAAK;IAACC,OAAO;IAACC,WAAW;IAACC,aAAa,EAAC,MAAM;IAACC,oBAAoB;IAACC,cAAc,EAAEjB,SAAU;IAAAI,QAAA,gBAC7F,IAAAb,WAAA,CAAAc,GAAA,EAAClB,YAAA,CAAA+B,SAAS;MACRf,KAAK,EAAEgB,uBAAU,CAACC,YAAa;MAC/BC,OAAO,EAAErB,SAAU;MACnBsB,UAAU,EAAE,KAAM;MAClBC,yBAAyB,EAAC;IAAqB,CAChD,CAAC,eACF,IAAAhC,WAAA,CAAAc,GAAA,EAAChB,sBAAA,CAAAK,OAAQ,CAACY,IAAI;MACZL,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,KAAK,EAAE,CAAC;QAAEI,QAAQ,EAAE;MAAW,CAAC,EAAEJ,KAAK,CAAE;MAAAC,QAAA,EAExCA;IAAQ,CACI,CAAC;EAAA,CACX,CAAC;AAEZ","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { Modal, Platform, Pressable, StyleSheet } from 'react-native';
|
|
3
|
+
import { Modal, Platform, Pressable, StyleSheet, View } from 'react-native';
|
|
4
4
|
import Animated from 'react-native-reanimated';
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
let createPortalFn;
|
|
@@ -13,7 +13,11 @@ if (Platform.OS === 'web') {
|
|
|
13
13
|
* Cross-platform overlay container.
|
|
14
14
|
*
|
|
15
15
|
* - Web: renders children into a `createPortal` at `document.body` with
|
|
16
|
-
* `position: fixed` and `zIndex: 50`.
|
|
16
|
+
* `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
|
|
17
|
+
* Reanimated's `Animated.View` because Reanimated's layout animations
|
|
18
|
+
* (`entering`/`exiting`) rely on `require()` calls that break silently
|
|
19
|
+
* in Vite production bundles, leaving elements stuck at opacity 0.
|
|
20
|
+
* See: https://github.com/software-mansion/react-native-reanimated/issues/6775
|
|
17
21
|
* - Native: renders children inside a transparent `<Modal>` with a
|
|
18
22
|
* backdrop `<Pressable>` that calls `onDismiss` on press.
|
|
19
23
|
*
|
|
@@ -28,9 +32,7 @@ export function OverlayContainer({
|
|
|
28
32
|
children
|
|
29
33
|
}) {
|
|
30
34
|
if (Platform.OS === 'web' && createPortalFn) {
|
|
31
|
-
return createPortalFn(/*#__PURE__*/_jsx(
|
|
32
|
-
entering: entering,
|
|
33
|
-
exiting: exiting,
|
|
35
|
+
return createPortalFn(/*#__PURE__*/_jsx(View, {
|
|
34
36
|
style: [{
|
|
35
37
|
position: 'fixed',
|
|
36
38
|
zIndex: 50
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Modal","Platform","Pressable","StyleSheet","Animated","jsx","_jsx","jsxs","_jsxs","createPortalFn","OS","require","createPortal","OverlayContainer","onDismiss","entering","exiting","style","children","
|
|
1
|
+
{"version":3,"names":["Modal","Platform","Pressable","StyleSheet","View","Animated","jsx","_jsx","jsxs","_jsxs","createPortalFn","OS","require","createPortal","OverlayContainer","onDismiss","entering","exiting","style","children","position","zIndex","document","body","visible","transparent","animationType","statusBarTranslucent","onRequestClose","absoluteFill","onPress","accessible","importantForAccessibility"],"sourceRoot":"../../../src","sources":["overlay/OverlayContainer.tsx"],"mappings":";;AACA,SACEA,KAAK,EACLC,QAAQ,EACRC,SAAS,EAETC,UAAU,EACVC,IAAI,QAEC,cAAc;AACrB,OAAOC,QAAQ,MAAsC,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/E,IAAIC,cAES;AACb,IAAIT,QAAQ,CAACU,EAAE,KAAK,KAAK,EAAE;EACzB,IAAI;IACFD,cAAc,GAAGE,OAAO,CAAC,WAAW,CAAC,CAACC,YAAY;EACpD,CAAC,CAAC,MAAM,CAAC;AACX;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AAC+B,CAAC,EAAE;EAClC,IAAIlB,QAAQ,CAACU,EAAE,KAAK,KAAK,IAAID,cAAc,EAAE;IAC3C,OAAOA,cAAc,cACnBH,IAAA,CAACH,IAAI;MAACc,KAAK,EAAE,CAAC;QAAEE,QAAQ,EAAE,OAAc;QAAEC,MAAM,EAAE;MAAG,CAAC,EAAEH,KAAK,CAAE;MAAAC,QAAA,EAAEA;IAAQ,CAAO,CAAC,EACjFG,QAAQ,CAACC,IACX,CAAC;EACH;EAEA,oBACEd,KAAA,CAACT,KAAK;IAACwB,OAAO;IAACC,WAAW;IAACC,aAAa,EAAC,MAAM;IAACC,oBAAoB;IAACC,cAAc,EAAEb,SAAU;IAAAI,QAAA,gBAC7FZ,IAAA,CAACL,SAAS;MACRgB,KAAK,EAAEf,UAAU,CAAC0B,YAAa;MAC/BC,OAAO,EAAEf,SAAU;MACnBgB,UAAU,EAAE,KAAM;MAClBC,yBAAyB,EAAC;IAAqB,CAChD,CAAC,eACFzB,IAAA,CAACF,QAAQ,CAACD,IAAI;MACZY,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,KAAK,EAAE,CAAC;QAAEE,QAAQ,EAAE;MAAW,CAAC,EAAEF,KAAK,CAAE;MAAAC,QAAA,EAExCA;IAAQ,CACI,CAAC;EAAA,CACX,CAAC;AAEZ","ignoreList":[]}
|
|
@@ -12,7 +12,11 @@ export interface OverlayContainerProps {
|
|
|
12
12
|
* Cross-platform overlay container.
|
|
13
13
|
*
|
|
14
14
|
* - Web: renders children into a `createPortal` at `document.body` with
|
|
15
|
-
* `position: fixed` and `zIndex: 50`.
|
|
15
|
+
* `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
|
|
16
|
+
* Reanimated's `Animated.View` because Reanimated's layout animations
|
|
17
|
+
* (`entering`/`exiting`) rely on `require()` calls that break silently
|
|
18
|
+
* in Vite production bundles, leaving elements stuck at opacity 0.
|
|
19
|
+
* See: https://github.com/software-mansion/react-native-reanimated/issues/6775
|
|
16
20
|
* - Native: renders children inside a transparent `<Modal>` with a
|
|
17
21
|
* backdrop `<Pressable>` that calls `onDismiss` on press.
|
|
18
22
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayContainer.d.ts","sourceRoot":"","sources":["../../../src/overlay/OverlayContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"OverlayContainer.d.ts","sourceRoot":"","sources":["../../../src/overlay/OverlayContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAW/E,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,GACT,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CAyBjC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/primitives",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.17",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@react-native-aria/interactions": "^0.2.16",
|
|
53
53
|
"@react-stately/checkbox": "3.7.4",
|
|
54
54
|
"@react-stately/toggle": "3.9.4",
|
|
55
|
-
"@cdx-ui/utils": "0.0.1-alpha.
|
|
55
|
+
"@cdx-ui/utils": "0.0.1-alpha.17"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@types/react": "*",
|
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
Pressable,
|
|
6
6
|
type StyleProp,
|
|
7
7
|
StyleSheet,
|
|
8
|
+
View,
|
|
8
9
|
type ViewStyle,
|
|
9
10
|
} from 'react-native';
|
|
10
11
|
import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
|
|
@@ -30,7 +31,11 @@ export interface OverlayContainerProps {
|
|
|
30
31
|
* Cross-platform overlay container.
|
|
31
32
|
*
|
|
32
33
|
* - Web: renders children into a `createPortal` at `document.body` with
|
|
33
|
-
* `position: fixed` and `zIndex: 50`.
|
|
34
|
+
* `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
|
|
35
|
+
* Reanimated's `Animated.View` because Reanimated's layout animations
|
|
36
|
+
* (`entering`/`exiting`) rely on `require()` calls that break silently
|
|
37
|
+
* in Vite production bundles, leaving elements stuck at opacity 0.
|
|
38
|
+
* See: https://github.com/software-mansion/react-native-reanimated/issues/6775
|
|
34
39
|
* - Native: renders children inside a transparent `<Modal>` with a
|
|
35
40
|
* backdrop `<Pressable>` that calls `onDismiss` on press.
|
|
36
41
|
*
|
|
@@ -46,13 +51,7 @@ export function OverlayContainer({
|
|
|
46
51
|
}: Readonly<OverlayContainerProps>) {
|
|
47
52
|
if (Platform.OS === 'web' && createPortalFn) {
|
|
48
53
|
return createPortalFn(
|
|
49
|
-
<
|
|
50
|
-
entering={entering}
|
|
51
|
-
exiting={exiting}
|
|
52
|
-
style={[{ position: 'fixed' as any, zIndex: 50 }, style]}
|
|
53
|
-
>
|
|
54
|
-
{children}
|
|
55
|
-
</Animated.View>,
|
|
54
|
+
<View style={[{ position: 'fixed' as any, zIndex: 50 }, style]}>{children}</View>,
|
|
56
55
|
document.body,
|
|
57
56
|
);
|
|
58
57
|
}
|