@cdx-ui/primitives 0.0.1-beta.51 → 0.0.1-beta.53
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/README.md +1 -1
- package/lib/commonjs/dialog/createDialogContent.js +7 -127
- package/lib/commonjs/dialog/createDialogContent.js.map +1 -1
- package/lib/commonjs/dialog/createDialogPopup.js +157 -0
- package/lib/commonjs/dialog/createDialogPopup.js.map +1 -0
- package/lib/commonjs/dialog/index.js +8 -8
- package/lib/commonjs/dialog/index.js.map +1 -1
- package/lib/module/dialog/createDialogContent.js +7 -128
- package/lib/module/dialog/createDialogContent.js.map +1 -1
- package/lib/module/dialog/createDialogPopup.js +152 -0
- package/lib/module/dialog/createDialogPopup.js.map +1 -0
- package/lib/module/dialog/index.js +8 -8
- package/lib/module/dialog/index.js.map +1 -1
- package/lib/typescript/dialog/createDialogContent.d.ts +2 -2
- package/lib/typescript/dialog/createDialogContent.d.ts.map +1 -1
- package/lib/typescript/dialog/createDialogPopup.d.ts +4 -0
- package/lib/typescript/dialog/createDialogPopup.d.ts.map +1 -0
- package/lib/typescript/dialog/index.d.ts +5 -5
- package/lib/typescript/dialog/index.d.ts.map +1 -1
- package/lib/typescript/dialog/types.d.ts +16 -5
- package/lib/typescript/dialog/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/dialog/createDialogContent.tsx +6 -117
- package/src/dialog/createDialogPopup.tsx +146 -0
- package/src/dialog/index.tsx +16 -16
- package/src/dialog/types.ts +20 -9
- package/lib/commonjs/dialog/createDialogBody.js +0 -21
- package/lib/commonjs/dialog/createDialogBody.js.map +0 -1
- package/lib/module/dialog/createDialogBody.js +0 -15
- package/lib/module/dialog/createDialogBody.js.map +0 -1
- package/lib/typescript/dialog/createDialogBody.d.ts +0 -4
- package/lib/typescript/dialog/createDialogBody.d.ts.map +0 -1
- package/src/dialog/createDialogBody.tsx +0 -11
package/README.md
CHANGED
|
@@ -32,7 +32,7 @@ Each `create*` factory accepts a map of base React Native components and returns
|
|
|
32
32
|
| `createSwitch` | `Switch` |
|
|
33
33
|
| `createLink` | `Link` |
|
|
34
34
|
| `createAvatar` | `Avatar` + `.Image` `.Text` `.Icon` `.Badge` |
|
|
35
|
-
| `createDialog` | `Dialog` + `.Root` `.Trigger` `.
|
|
35
|
+
| `createDialog` | `Dialog` + `.Root` `.Trigger` `.Popup` `.Header` `.Title` `.Description` `.Content` `.Footer` `.Close` |
|
|
36
36
|
| `createField` | `Field` + `.Label` `.Helper` `.HelperText` `.Error` `.ErrorText` `.ErrorIcon` |
|
|
37
37
|
| `createForm` | `Form` |
|
|
38
38
|
| `createListItem` | `ListItem` + `.LeadingSlot` `.Content` `.Title` `.Description` `.Meta` `.TrailingSlot` `.SectionHeader` |
|
|
@@ -4,138 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.createDialogContent = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _focus = require("@react-native-aria/focus");
|
|
10
|
-
var _overlay = require("../overlay");
|
|
11
|
-
var _createPortal = require("../utils/createPortal");
|
|
12
|
-
var _dataAttributes = require("../utils/dataAttributes");
|
|
13
|
-
var _context = require("./context");
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
14
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
-
|
|
9
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
|
+
const createDialogContent = BaseContent => /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
11
|
children,
|
|
17
|
-
forceMount = false,
|
|
18
12
|
...props
|
|
19
13
|
}, ref) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
closeOnEscKey,
|
|
25
|
-
nativeID,
|
|
26
|
-
role
|
|
27
|
-
} = (0, _context.useDialog)();
|
|
28
|
-
const handleClose = (0, _react.useCallback)(() => {
|
|
29
|
-
onOpenChange(false);
|
|
30
|
-
}, [onOpenChange]);
|
|
31
|
-
(0, _overlay.useEscapeKey)(open && closeOnEscKey, handleClose);
|
|
32
|
-
if (!(open || forceMount)) {
|
|
33
|
-
return null;
|
|
34
|
-
}
|
|
35
|
-
const overlayProps = {
|
|
36
|
-
...(closeOnBackdropPress ? {
|
|
37
|
-
onPress: handleClose
|
|
38
|
-
} : {}),
|
|
39
|
-
accessible: false,
|
|
40
|
-
importantForAccessibility: 'no-hide-descendants',
|
|
41
|
-
...(0, _dataAttributes.dataAttributes)({
|
|
42
|
-
slot: 'dialog-overlay'
|
|
43
|
-
})
|
|
44
|
-
};
|
|
45
|
-
const contentSlotAttrs = (0, _dataAttributes.dataAttributes)({
|
|
46
|
-
slot: 'dialog-content',
|
|
47
|
-
state: open ? 'open' : 'closed'
|
|
48
|
-
});
|
|
49
|
-
const ariaProps = {
|
|
50
|
-
role,
|
|
51
|
-
'aria-modal': true,
|
|
52
|
-
'aria-labelledby': `${nativeID}-title`,
|
|
53
|
-
'aria-describedby': `${nativeID}-description`
|
|
54
|
-
};
|
|
55
|
-
if (_reactNative.Platform.OS === 'web' && _createPortal.createPortalFn) {
|
|
56
|
-
return (0, _createPortal.createPortalFn)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
|
|
57
|
-
contain: open,
|
|
58
|
-
restoreFocus: true,
|
|
59
|
-
autoFocus: open,
|
|
60
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
61
|
-
style: {
|
|
62
|
-
position: 'fixed',
|
|
63
|
-
inset: 0,
|
|
64
|
-
zIndex: 50,
|
|
65
|
-
display: 'flex',
|
|
66
|
-
alignItems: 'center',
|
|
67
|
-
justifyContent: 'center'
|
|
68
|
-
},
|
|
69
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BaseOverlay, {
|
|
70
|
-
...overlayProps
|
|
71
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseContent, {
|
|
72
|
-
ref: ref,
|
|
73
|
-
...contentSlotAttrs,
|
|
74
|
-
...props,
|
|
75
|
-
...ariaProps,
|
|
76
|
-
children: children
|
|
77
|
-
})]
|
|
78
|
-
})
|
|
79
|
-
}), document.body);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Native layout uses two layers to support both backdrop dismiss and
|
|
83
|
-
// scrollable body content. The overlay Pressable fills the Modal via
|
|
84
|
-
// absolute positioning and handles backdrop taps. A second absolute-fill
|
|
85
|
-
// View with pointerEvents="box-none" centers the content panel — "box-none"
|
|
86
|
-
// lets taps outside the panel pass through to the overlay while allowing
|
|
87
|
-
// the panel and its children to receive touches normally.
|
|
88
|
-
//
|
|
89
|
-
// Critically, the content panel must NOT claim the JS touch responder
|
|
90
|
-
// (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
|
|
91
|
-
// blockNativeResponder, which suppresses the native UIScrollView /
|
|
92
|
-
// ScrollView pan gesture recognizer and breaks any ScrollView inside
|
|
93
|
-
// Dialog.Body.
|
|
94
|
-
//
|
|
95
|
-
// Static StyleSheet used here because these are structural layout concerns
|
|
96
|
-
// of the primitive's modal chrome — not themeable styles. They must remain
|
|
97
|
-
// stable regardless of the styled layer's className.
|
|
98
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
|
|
99
|
-
visible: open,
|
|
100
|
-
transparent: true,
|
|
101
|
-
statusBarTranslucent: true,
|
|
102
|
-
onRequestClose: handleClose,
|
|
103
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
|
|
104
|
-
contain: open,
|
|
105
|
-
restoreFocus: true,
|
|
106
|
-
autoFocus: open,
|
|
107
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
108
|
-
style: styles.fill,
|
|
109
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BaseOverlay, {
|
|
110
|
-
...overlayProps
|
|
111
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
112
|
-
style: styles.center,
|
|
113
|
-
pointerEvents: "box-none",
|
|
114
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseContent, {
|
|
115
|
-
ref: ref,
|
|
116
|
-
...contentSlotAttrs,
|
|
117
|
-
...props,
|
|
118
|
-
...ariaProps,
|
|
119
|
-
children: children
|
|
120
|
-
})
|
|
121
|
-
})]
|
|
122
|
-
})
|
|
123
|
-
})
|
|
14
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseContent, {
|
|
15
|
+
ref: ref,
|
|
16
|
+
...props,
|
|
17
|
+
children: children
|
|
124
18
|
});
|
|
125
19
|
});
|
|
126
|
-
|
|
127
|
-
// Structural layout for the native Modal chrome. These are not themeable —
|
|
128
|
-
// they position the overlay and centering layers that the primitive manages
|
|
129
|
-
// internally. Matches the pattern in OverlayContainer.tsx.
|
|
130
20
|
exports.createDialogContent = createDialogContent;
|
|
131
|
-
const styles = _reactNative.StyleSheet.create({
|
|
132
|
-
fill: {
|
|
133
|
-
flex: 1
|
|
134
|
-
},
|
|
135
|
-
center: {
|
|
136
|
-
..._reactNative.StyleSheet.absoluteFillObject,
|
|
137
|
-
alignItems: 'center',
|
|
138
|
-
justifyContent: 'center'
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
21
|
//# sourceMappingURL=createDialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","createDialogContent","BaseContent","forwardRef","children","props","ref","jsx","exports"],"sourceRoot":"../../../src","sources":["dialog/createDialogContent.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0C,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGnC,MAAMkB,mBAAmB,GAAQC,WAAmC,iBACzE,IAAAC,iBAAU,EAA+B,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACxE,oBACE,IAAAzB,WAAA,CAAA0B,GAAA,EAACL,WAAW;IAACI,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAC9BA;EAAQ,CACE,CAAC;AAElB,CAAC,CAAC;AAACI,OAAA,CAAAP,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createDialogPopup = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _focus = require("@react-native-aria/focus");
|
|
10
|
+
var _overlay = require("../overlay");
|
|
11
|
+
var _createPortal = require("../utils/createPortal");
|
|
12
|
+
var _dataAttributes = require("../utils/dataAttributes");
|
|
13
|
+
var _context = require("./context");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
const createDialogPopup = (BasePopup, BaseOverlay) => /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
+
children,
|
|
17
|
+
forceMount = false,
|
|
18
|
+
avoidKeyboard = true,
|
|
19
|
+
keyboardVerticalOffset = 0,
|
|
20
|
+
...props
|
|
21
|
+
}, ref) => {
|
|
22
|
+
const {
|
|
23
|
+
open,
|
|
24
|
+
onOpenChange,
|
|
25
|
+
closeOnBackdropPress,
|
|
26
|
+
closeOnEscKey,
|
|
27
|
+
nativeID,
|
|
28
|
+
role
|
|
29
|
+
} = (0, _context.useDialog)();
|
|
30
|
+
const handleClose = (0, _react.useCallback)(() => {
|
|
31
|
+
onOpenChange(false);
|
|
32
|
+
}, [onOpenChange]);
|
|
33
|
+
(0, _overlay.useEscapeKey)(open && closeOnEscKey, handleClose);
|
|
34
|
+
if (!(open || forceMount)) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
const overlayProps = {
|
|
38
|
+
...(closeOnBackdropPress ? {
|
|
39
|
+
onPress: handleClose
|
|
40
|
+
} : {}),
|
|
41
|
+
accessible: false,
|
|
42
|
+
importantForAccessibility: 'no-hide-descendants',
|
|
43
|
+
...(0, _dataAttributes.dataAttributes)({
|
|
44
|
+
slot: 'dialog-overlay'
|
|
45
|
+
})
|
|
46
|
+
};
|
|
47
|
+
const contentSlotAttrs = (0, _dataAttributes.dataAttributes)({
|
|
48
|
+
slot: 'dialog-popup',
|
|
49
|
+
state: open ? 'open' : 'closed'
|
|
50
|
+
});
|
|
51
|
+
const ariaProps = {
|
|
52
|
+
role,
|
|
53
|
+
'aria-modal': true,
|
|
54
|
+
'aria-labelledby': `${nativeID}-title`,
|
|
55
|
+
'aria-describedby': `${nativeID}-description`
|
|
56
|
+
};
|
|
57
|
+
if (_reactNative.Platform.OS === 'web' && _createPortal.createPortalFn) {
|
|
58
|
+
return (0, _createPortal.createPortalFn)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
|
|
59
|
+
contain: open,
|
|
60
|
+
restoreFocus: true,
|
|
61
|
+
autoFocus: open,
|
|
62
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
63
|
+
style: {
|
|
64
|
+
position: 'fixed',
|
|
65
|
+
inset: 0,
|
|
66
|
+
zIndex: 50,
|
|
67
|
+
display: 'flex',
|
|
68
|
+
alignItems: 'center',
|
|
69
|
+
justifyContent: 'center'
|
|
70
|
+
},
|
|
71
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BaseOverlay, {
|
|
72
|
+
...overlayProps
|
|
73
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(BasePopup, {
|
|
74
|
+
ref: ref,
|
|
75
|
+
...contentSlotAttrs,
|
|
76
|
+
...props,
|
|
77
|
+
...ariaProps,
|
|
78
|
+
children: children
|
|
79
|
+
})]
|
|
80
|
+
})
|
|
81
|
+
}), document.body);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Native layout uses two layers to support both backdrop dismiss and
|
|
85
|
+
// scrollable body content. The overlay Pressable fills the Modal via
|
|
86
|
+
// absolute positioning and handles backdrop taps. A second flex layer with
|
|
87
|
+
// pointerEvents="box-none" centers the content panel — "box-none" lets taps
|
|
88
|
+
// outside the panel pass through to the overlay while allowing the panel and
|
|
89
|
+
// its children to receive touches normally.
|
|
90
|
+
//
|
|
91
|
+
// That centering layer is a KeyboardAvoidingView so the panel (including its
|
|
92
|
+
// footer/actions, which sit at the bottom of a centered, max-h-capped panel)
|
|
93
|
+
// shifts up to clear the on-screen keyboard. `behavior` is platform-specific
|
|
94
|
+
// and the layer is a no-op while no input is focused. The RN Modal renders in
|
|
95
|
+
// its own window, so this MUST live here — a KeyboardAvoidingView wrapping the
|
|
96
|
+
// <Dialog> at the usage level cannot reach this subtree. Web is unaffected
|
|
97
|
+
// (the browser handles focus scrolling; there is no occluding keyboard).
|
|
98
|
+
//
|
|
99
|
+
// Critically, the content panel must NOT claim the JS touch responder
|
|
100
|
+
// (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
|
|
101
|
+
// blockNativeResponder, which suppresses the native UIScrollView /
|
|
102
|
+
// ScrollView pan gesture recognizer and breaks any ScrollView inside
|
|
103
|
+
// Dialog.Content.
|
|
104
|
+
//
|
|
105
|
+
// Static StyleSheet used here because these are structural layout concerns
|
|
106
|
+
// of the primitive's modal chrome — not themeable styles. They must remain
|
|
107
|
+
// stable regardless of the styled layer's className.
|
|
108
|
+
const keyboardBehavior = avoidKeyboard ? _reactNative.Platform.select({
|
|
109
|
+
ios: 'padding',
|
|
110
|
+
default: 'height'
|
|
111
|
+
}) : undefined;
|
|
112
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
|
|
113
|
+
visible: open,
|
|
114
|
+
transparent: true,
|
|
115
|
+
statusBarTranslucent: true,
|
|
116
|
+
onRequestClose: handleClose,
|
|
117
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
|
|
118
|
+
contain: open,
|
|
119
|
+
restoreFocus: true,
|
|
120
|
+
autoFocus: open,
|
|
121
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
122
|
+
style: styles.fill,
|
|
123
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BaseOverlay, {
|
|
124
|
+
...overlayProps
|
|
125
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.KeyboardAvoidingView, {
|
|
126
|
+
style: styles.center,
|
|
127
|
+
pointerEvents: "box-none",
|
|
128
|
+
behavior: keyboardBehavior,
|
|
129
|
+
keyboardVerticalOffset: keyboardVerticalOffset,
|
|
130
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BasePopup, {
|
|
131
|
+
ref: ref,
|
|
132
|
+
...contentSlotAttrs,
|
|
133
|
+
...props,
|
|
134
|
+
...ariaProps,
|
|
135
|
+
children: children
|
|
136
|
+
})
|
|
137
|
+
})]
|
|
138
|
+
})
|
|
139
|
+
})
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
// Structural layout for the native Modal chrome. These are not themeable —
|
|
144
|
+
// they position the overlay and centering layers that the primitive manages
|
|
145
|
+
// internally. Matches the pattern in OverlayContainer.tsx.
|
|
146
|
+
exports.createDialogPopup = createDialogPopup;
|
|
147
|
+
const styles = _reactNative.StyleSheet.create({
|
|
148
|
+
fill: {
|
|
149
|
+
flex: 1
|
|
150
|
+
},
|
|
151
|
+
center: {
|
|
152
|
+
flex: 1,
|
|
153
|
+
alignItems: 'center',
|
|
154
|
+
justifyContent: 'center'
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
//# sourceMappingURL=createDialogPopup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_focus","_overlay","_createPortal","_dataAttributes","_context","_jsxRuntime","createDialogPopup","BasePopup","BaseOverlay","forwardRef","children","forceMount","avoidKeyboard","keyboardVerticalOffset","props","ref","open","onOpenChange","closeOnBackdropPress","closeOnEscKey","nativeID","role","useDialog","handleClose","useCallback","useEscapeKey","overlayProps","onPress","accessible","importantForAccessibility","dataAttributes","slot","contentSlotAttrs","state","ariaProps","Platform","OS","createPortalFn","jsx","FocusScope","contain","restoreFocus","autoFocus","jsxs","View","style","position","inset","zIndex","display","alignItems","justifyContent","document","body","keyboardBehavior","select","ios","default","undefined","Modal","visible","transparent","statusBarTranslucent","onRequestClose","styles","fill","KeyboardAvoidingView","center","pointerEvents","behavior","exports","StyleSheet","create","flex"],"sourceRoot":"../../../src","sources":["dialog/createDialogPopup.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,41 +18,41 @@ Object.defineProperty(exports, "useDialog", {
|
|
|
18
18
|
});
|
|
19
19
|
var _createDialogRoot = require("./createDialogRoot");
|
|
20
20
|
var _createDialogTrigger = require("./createDialogTrigger");
|
|
21
|
-
var
|
|
21
|
+
var _createDialogPopup = require("./createDialogPopup");
|
|
22
22
|
var _createDialogHeader = require("./createDialogHeader");
|
|
23
23
|
var _createDialogTitle = require("./createDialogTitle");
|
|
24
24
|
var _createDialogDescription = require("./createDialogDescription");
|
|
25
|
-
var
|
|
25
|
+
var _createDialogContent = require("./createDialogContent");
|
|
26
26
|
var _createDialogFooter = require("./createDialogFooter");
|
|
27
27
|
var _createDialogClose = require("./createDialogClose");
|
|
28
28
|
var _context = require("./context");
|
|
29
29
|
function createDialog(BaseComponents) {
|
|
30
30
|
const Root = (0, _createDialogRoot.createDialogRoot)(BaseComponents.Root);
|
|
31
31
|
const Trigger = (0, _createDialogTrigger.createDialogTrigger)(BaseComponents.Trigger);
|
|
32
|
-
const
|
|
32
|
+
const Popup = (0, _createDialogPopup.createDialogPopup)(BaseComponents.Popup, BaseComponents.Overlay);
|
|
33
33
|
const Header = (0, _createDialogHeader.createDialogHeader)(BaseComponents.Header);
|
|
34
34
|
const Title = (0, _createDialogTitle.createDialogTitle)(BaseComponents.Title);
|
|
35
35
|
const Description = (0, _createDialogDescription.createDialogDescription)(BaseComponents.Description);
|
|
36
|
-
const
|
|
36
|
+
const Content = (0, _createDialogContent.createDialogContent)(BaseComponents.Content);
|
|
37
37
|
const Footer = (0, _createDialogFooter.createDialogFooter)(BaseComponents.Footer);
|
|
38
38
|
const Close = (0, _createDialogClose.createDialogClose)(BaseComponents.Close);
|
|
39
39
|
Root.displayName = 'DialogPrimitive.Root';
|
|
40
40
|
Trigger.displayName = 'DialogPrimitive.Trigger';
|
|
41
|
-
|
|
41
|
+
Popup.displayName = 'DialogPrimitive.Popup';
|
|
42
42
|
Header.displayName = 'DialogPrimitive.Header';
|
|
43
43
|
Title.displayName = 'DialogPrimitive.Title';
|
|
44
44
|
Description.displayName = 'DialogPrimitive.Description';
|
|
45
|
-
|
|
45
|
+
Content.displayName = 'DialogPrimitive.Content';
|
|
46
46
|
Footer.displayName = 'DialogPrimitive.Footer';
|
|
47
47
|
Close.displayName = 'DialogPrimitive.Close';
|
|
48
48
|
return Object.assign(Root, {
|
|
49
49
|
Root,
|
|
50
50
|
Trigger,
|
|
51
|
-
|
|
51
|
+
Popup,
|
|
52
52
|
Header,
|
|
53
53
|
Title,
|
|
54
54
|
Description,
|
|
55
|
-
|
|
55
|
+
Content,
|
|
56
56
|
Footer,
|
|
57
57
|
Close
|
|
58
58
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_createDialogRoot","require","_createDialogTrigger","
|
|
1
|
+
{"version":3,"names":["_createDialogRoot","require","_createDialogTrigger","_createDialogPopup","_createDialogHeader","_createDialogTitle","_createDialogDescription","_createDialogContent","_createDialogFooter","_createDialogClose","_context","createDialog","BaseComponents","Root","createDialogRoot","Trigger","createDialogTrigger","Popup","createDialogPopup","Overlay","Header","createDialogHeader","Title","createDialogTitle","Description","createDialogDescription","Content","createDialogContent","Footer","createDialogFooter","Close","createDialogClose","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["dialog/index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;AACA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,wBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AACA,IAAAO,mBAAA,GAAAP,OAAA;AACA,IAAAQ,kBAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AAkBO,SAASU,YAAYA,CAW1BC,cAWD,EAAE;EACD,MAAMC,IAAI,GAAG,IAAAC,kCAAgB,EAACF,cAAc,CAACC,IAAI,CAAC;EAClD,MAAME,OAAO,GAAG,IAAAC,wCAAmB,EAACJ,cAAc,CAACG,OAAO,CAAC;EAC3D,MAAME,KAAK,GAAG,IAAAC,oCAAiB,EAACN,cAAc,CAACK,KAAK,EAAEL,cAAc,CAACO,OAAO,CAAC;EAC7E,MAAMC,MAAM,GAAG,IAAAC,sCAAkB,EAACT,cAAc,CAACQ,MAAM,CAAC;EACxD,MAAME,KAAK,GAAG,IAAAC,oCAAiB,EAACX,cAAc,CAACU,KAAK,CAAC;EACrD,MAAME,WAAW,GAAG,IAAAC,gDAAuB,EAACb,cAAc,CAACY,WAAW,CAAC;EACvE,MAAME,OAAO,GAAG,IAAAC,wCAAmB,EAACf,cAAc,CAACc,OAAO,CAAC;EAC3D,MAAME,MAAM,GAAG,IAAAC,sCAAkB,EAACjB,cAAc,CAACgB,MAAM,CAAC;EACxD,MAAME,KAAK,GAAG,IAAAC,oCAAiB,EAACnB,cAAc,CAACkB,KAAK,CAAC;EAErDjB,IAAI,CAACmB,WAAW,GAAG,sBAAsB;EACzCjB,OAAO,CAACiB,WAAW,GAAG,yBAAyB;EAC/Cf,KAAK,CAACe,WAAW,GAAG,uBAAuB;EAC3CZ,MAAM,CAACY,WAAW,GAAG,wBAAwB;EAC7CV,KAAK,CAACU,WAAW,GAAG,uBAAuB;EAC3CR,WAAW,CAACQ,WAAW,GAAG,6BAA6B;EACvDN,OAAO,CAACM,WAAW,GAAG,yBAAyB;EAC/CJ,MAAM,CAACI,WAAW,GAAG,wBAAwB;EAC7CF,KAAK,CAACE,WAAW,GAAG,uBAAuB;EAE3C,OAAOC,MAAM,CAACC,MAAM,CAACrB,IAAI,EAAE;IACzBA,IAAI;IACJE,OAAO;IACPE,KAAK;IACLG,MAAM;IACNE,KAAK;IACLE,WAAW;IACXE,OAAO;IACPE,MAAM;IACNE;EACF,CAAC,CAAC;AAWJ","ignoreList":[]}
|
|
@@ -1,136 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { forwardRef
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
import { useEscapeKey } from '../overlay';
|
|
7
|
-
import { createPortalFn } from '../utils/createPortal';
|
|
8
|
-
import { dataAttributes } from '../utils/dataAttributes';
|
|
9
|
-
import { useDialog } from './context';
|
|
10
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
export const createDialogContent = (BaseContent, BaseOverlay) => /*#__PURE__*/forwardRef(({
|
|
3
|
+
import React, { forwardRef } from 'react';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export const createDialogContent = BaseContent => /*#__PURE__*/forwardRef(({
|
|
12
6
|
children,
|
|
13
|
-
forceMount = false,
|
|
14
7
|
...props
|
|
15
8
|
}, ref) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
closeOnEscKey,
|
|
21
|
-
nativeID,
|
|
22
|
-
role
|
|
23
|
-
} = useDialog();
|
|
24
|
-
const handleClose = useCallback(() => {
|
|
25
|
-
onOpenChange(false);
|
|
26
|
-
}, [onOpenChange]);
|
|
27
|
-
useEscapeKey(open && closeOnEscKey, handleClose);
|
|
28
|
-
if (!(open || forceMount)) {
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
const overlayProps = {
|
|
32
|
-
...(closeOnBackdropPress ? {
|
|
33
|
-
onPress: handleClose
|
|
34
|
-
} : {}),
|
|
35
|
-
accessible: false,
|
|
36
|
-
importantForAccessibility: 'no-hide-descendants',
|
|
37
|
-
...dataAttributes({
|
|
38
|
-
slot: 'dialog-overlay'
|
|
39
|
-
})
|
|
40
|
-
};
|
|
41
|
-
const contentSlotAttrs = dataAttributes({
|
|
42
|
-
slot: 'dialog-content',
|
|
43
|
-
state: open ? 'open' : 'closed'
|
|
9
|
+
return /*#__PURE__*/_jsx(BaseContent, {
|
|
10
|
+
ref: ref,
|
|
11
|
+
...props,
|
|
12
|
+
children: children
|
|
44
13
|
});
|
|
45
|
-
const ariaProps = {
|
|
46
|
-
role,
|
|
47
|
-
'aria-modal': true,
|
|
48
|
-
'aria-labelledby': `${nativeID}-title`,
|
|
49
|
-
'aria-describedby': `${nativeID}-description`
|
|
50
|
-
};
|
|
51
|
-
if (Platform.OS === 'web' && createPortalFn) {
|
|
52
|
-
return createPortalFn(/*#__PURE__*/_jsx(FocusScope, {
|
|
53
|
-
contain: open,
|
|
54
|
-
restoreFocus: true,
|
|
55
|
-
autoFocus: open,
|
|
56
|
-
children: /*#__PURE__*/_jsxs(View, {
|
|
57
|
-
style: {
|
|
58
|
-
position: 'fixed',
|
|
59
|
-
inset: 0,
|
|
60
|
-
zIndex: 50,
|
|
61
|
-
display: 'flex',
|
|
62
|
-
alignItems: 'center',
|
|
63
|
-
justifyContent: 'center'
|
|
64
|
-
},
|
|
65
|
-
children: [/*#__PURE__*/_jsx(BaseOverlay, {
|
|
66
|
-
...overlayProps
|
|
67
|
-
}), /*#__PURE__*/_jsx(BaseContent, {
|
|
68
|
-
ref: ref,
|
|
69
|
-
...contentSlotAttrs,
|
|
70
|
-
...props,
|
|
71
|
-
...ariaProps,
|
|
72
|
-
children: children
|
|
73
|
-
})]
|
|
74
|
-
})
|
|
75
|
-
}), document.body);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Native layout uses two layers to support both backdrop dismiss and
|
|
79
|
-
// scrollable body content. The overlay Pressable fills the Modal via
|
|
80
|
-
// absolute positioning and handles backdrop taps. A second absolute-fill
|
|
81
|
-
// View with pointerEvents="box-none" centers the content panel — "box-none"
|
|
82
|
-
// lets taps outside the panel pass through to the overlay while allowing
|
|
83
|
-
// the panel and its children to receive touches normally.
|
|
84
|
-
//
|
|
85
|
-
// Critically, the content panel must NOT claim the JS touch responder
|
|
86
|
-
// (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
|
|
87
|
-
// blockNativeResponder, which suppresses the native UIScrollView /
|
|
88
|
-
// ScrollView pan gesture recognizer and breaks any ScrollView inside
|
|
89
|
-
// Dialog.Body.
|
|
90
|
-
//
|
|
91
|
-
// Static StyleSheet used here because these are structural layout concerns
|
|
92
|
-
// of the primitive's modal chrome — not themeable styles. They must remain
|
|
93
|
-
// stable regardless of the styled layer's className.
|
|
94
|
-
return /*#__PURE__*/_jsx(Modal, {
|
|
95
|
-
visible: open,
|
|
96
|
-
transparent: true,
|
|
97
|
-
statusBarTranslucent: true,
|
|
98
|
-
onRequestClose: handleClose,
|
|
99
|
-
children: /*#__PURE__*/_jsx(FocusScope, {
|
|
100
|
-
contain: open,
|
|
101
|
-
restoreFocus: true,
|
|
102
|
-
autoFocus: open,
|
|
103
|
-
children: /*#__PURE__*/_jsxs(View, {
|
|
104
|
-
style: styles.fill,
|
|
105
|
-
children: [/*#__PURE__*/_jsx(BaseOverlay, {
|
|
106
|
-
...overlayProps
|
|
107
|
-
}), /*#__PURE__*/_jsx(View, {
|
|
108
|
-
style: styles.center,
|
|
109
|
-
pointerEvents: "box-none",
|
|
110
|
-
children: /*#__PURE__*/_jsx(BaseContent, {
|
|
111
|
-
ref: ref,
|
|
112
|
-
...contentSlotAttrs,
|
|
113
|
-
...props,
|
|
114
|
-
...ariaProps,
|
|
115
|
-
children: children
|
|
116
|
-
})
|
|
117
|
-
})]
|
|
118
|
-
})
|
|
119
|
-
})
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
// Structural layout for the native Modal chrome. These are not themeable —
|
|
124
|
-
// they position the overlay and centering layers that the primitive manages
|
|
125
|
-
// internally. Matches the pattern in OverlayContainer.tsx.
|
|
126
|
-
const styles = StyleSheet.create({
|
|
127
|
-
fill: {
|
|
128
|
-
flex: 1
|
|
129
|
-
},
|
|
130
|
-
center: {
|
|
131
|
-
...StyleSheet.absoluteFillObject,
|
|
132
|
-
alignItems: 'center',
|
|
133
|
-
justifyContent: 'center'
|
|
134
|
-
}
|
|
135
14
|
});
|
|
136
15
|
//# sourceMappingURL=createDialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","forwardRef","jsx","_jsx","createDialogContent","BaseContent","children","props","ref"],"sourceRoot":"../../../src","sources":["dialog/createDialogContent.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG1C,OAAO,MAAMC,mBAAmB,GAAQC,WAAmC,iBACzEJ,UAAU,CAA+B,CAAC;EAAEK,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACxE,oBACEL,IAAA,CAACE,WAAW;IAACG,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAC9BA;EAAQ,CACE,CAAC;AAElB,CAAC,CAAC","ignoreList":[]}
|