@100mslive/roomkit-react 0.1.7 → 0.1.8-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AudioLevel/AudioLevel.d.ts +5 -8
- package/dist/AudioLevel/index.d.ts +2 -1
- package/dist/AudioLevel/useBorderAudioLevel.d.ts +8 -0
- package/dist/{HLSView-3S74KF3A.js → HLSView-IQRPLYNH.js} +5 -4
- package/dist/{HLSView-3S74KF3A.js.map → HLSView-IQRPLYNH.js.map} +2 -2
- package/dist/Prebuilt/components/Chip.d.ts +12 -0
- package/dist/Prebuilt/components/PrebuiltDialogPortal.d.ts +4 -0
- package/dist/{VirtualBackground-3TI5NA4V.js → VirtualBackground-GP4ATXD3.js} +3 -3
- package/dist/{chunk-36X4ZCLC.js → chunk-2H5NIZB7.js} +2 -2
- package/dist/{chunk-Z7P5WITU.js → chunk-GLYGPYNS.js} +560 -1190
- package/dist/chunk-GLYGPYNS.js.map +7 -0
- package/dist/{chunk-5DQ3WTED.js → chunk-Z3O2WGWV.js} +2 -2
- package/dist/{chunk-5DQ3WTED.js.map → chunk-Z3O2WGWV.js.map} +1 -1
- package/dist/{conference-JNABIZBG.js → conference-JD35TNH4.js} +1351 -662
- package/dist/conference-JD35TNH4.js.map +7 -0
- package/dist/index.cjs.js +3387 -3297
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +4 -2
- package/dist/meta.cjs.json +1001 -826
- package/dist/meta.esbuild.json +1053 -877
- package/package.json +6 -6
- package/src/AudioLevel/AudioLevel.tsx +79 -30
- package/src/AudioLevel/audio-level.png +0 -0
- package/src/AudioLevel/index.ts +2 -1
- package/src/AudioLevel/useBorderAudioLevel.tsx +34 -0
- package/src/Prebuilt/App.tsx +1 -0
- package/src/Prebuilt/common/utils.js +0 -7
- package/src/Prebuilt/components/{Chip.jsx → Chip.tsx} +13 -2
- package/src/Prebuilt/components/Footer/ParticipantList.jsx +23 -12
- package/src/Prebuilt/components/Footer/RoleAccordion.tsx +43 -3
- package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +7 -4
- package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx +3 -2
- package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx +3 -2
- package/src/Prebuilt/components/MwebLandscapePrompt.jsx +58 -0
- package/src/Prebuilt/components/Notifications/HLSFailureModal.jsx +3 -2
- package/src/Prebuilt/components/Notifications/PermissionErrorModal.jsx +3 -2
- package/src/Prebuilt/components/PrebuiltDialogPortal.tsx +6 -0
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +4 -3
- package/src/Prebuilt/components/RoleChangeModal.jsx +3 -2
- package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx +3 -2
- package/src/Prebuilt/components/Settings/SettingsModal.jsx +3 -2
- package/src/Prebuilt/components/Settings/StartRecording.jsx +3 -2
- package/src/Prebuilt/components/StatsForNerds.jsx +3 -2
- package/src/Prebuilt/components/VideoTile.jsx +22 -69
- package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx +3 -2
- package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx +4 -29
- package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx +3 -2
- package/src/Prebuilt/layouts/HLSView.jsx +1 -0
- package/src/Prebuilt/primitives/DialogContent.jsx +5 -4
- package/dist/chunk-Z7P5WITU.js.map +0 -7
- package/dist/conference-JNABIZBG.js.map +0 -7
- /package/dist/{VirtualBackground-3TI5NA4V.js.map → VirtualBackground-GP4ATXD3.js.map} +0 -0
- /package/dist/{chunk-36X4ZCLC.js.map → chunk-2H5NIZB7.js.map} +0 -0
@@ -2,6 +2,7 @@ import React from 'react';
|
|
2
2
|
import { useMedia } from 'react-use';
|
3
3
|
import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
|
4
4
|
import { Sheet } from '../../../Sheet';
|
5
|
+
import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
|
5
6
|
|
6
7
|
export const RequestPrompt = ({
|
7
8
|
open = true,
|
@@ -34,7 +35,7 @@ export const RequestPrompt = ({
|
|
34
35
|
|
35
36
|
return (
|
36
37
|
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
37
|
-
<
|
38
|
+
<PrebuiltDialogPortal>
|
38
39
|
<Dialog.Overlay />
|
39
40
|
<Dialog.Content css={{ p: '$10' }}>
|
40
41
|
<Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
|
@@ -43,7 +44,7 @@ export const RequestPrompt = ({
|
|
43
44
|
<Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
|
44
45
|
<RequestActions actionText={actionText} onAction={onAction} />
|
45
46
|
</Dialog.Content>
|
46
|
-
</
|
47
|
+
</PrebuiltDialogPortal>
|
47
48
|
</Dialog.Root>
|
48
49
|
);
|
49
50
|
};
|
@@ -9,6 +9,7 @@ import { Sheet } from '../../../Sheet';
|
|
9
9
|
import { Tabs } from '../../../Tabs';
|
10
10
|
import { Text } from '../../../Text';
|
11
11
|
import { config as cssConfig } from '../../../Theme';
|
12
|
+
import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
|
12
13
|
import { settingContent, settingsList } from './common.js';
|
13
14
|
|
14
15
|
const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
|
@@ -186,7 +187,7 @@ const DesktopSettingModal = ({
|
|
186
187
|
return (
|
187
188
|
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
188
189
|
<Dialog.Trigger asChild>{children}</Dialog.Trigger>
|
189
|
-
<
|
190
|
+
<PrebuiltDialogPortal>
|
190
191
|
<Dialog.Overlay />
|
191
192
|
<Dialog.Content
|
192
193
|
css={{
|
@@ -256,7 +257,7 @@ const DesktopSettingModal = ({
|
|
256
257
|
</IconButton>
|
257
258
|
</Dialog.Close>
|
258
259
|
</Dialog.Content>
|
259
|
-
</
|
260
|
+
</PrebuiltDialogPortal>
|
260
261
|
</Dialog.Root>
|
261
262
|
);
|
262
263
|
};
|
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
|
|
2
2
|
import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
|
3
3
|
import { AlertTriangleIcon } from '@100mslive/react-icons';
|
4
4
|
import { Button, Dialog, Flex, Text } from '../../../';
|
5
|
+
import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
|
5
6
|
import { ResolutionInput } from '../Streaming/ResolutionInput';
|
6
7
|
import { getResolution } from '../Streaming/RTMPStreaming';
|
7
8
|
import { ToastManager } from '../Toast/ToastManager';
|
@@ -21,7 +22,7 @@ const StartRecording = ({ open, onOpenChange }) => {
|
|
21
22
|
if (isBrowserRecordingOn) {
|
22
23
|
return (
|
23
24
|
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
24
|
-
<
|
25
|
+
<PrebuiltDialogPortal>
|
25
26
|
<Dialog.Content
|
26
27
|
css={{
|
27
28
|
width: 'min(400px,80%)',
|
@@ -66,7 +67,7 @@ const StartRecording = ({ open, onOpenChange }) => {
|
|
66
67
|
</Button>
|
67
68
|
</Flex>
|
68
69
|
</Dialog.Content>
|
69
|
-
</
|
70
|
+
</PrebuiltDialogPortal>
|
70
71
|
</Dialog.Root>
|
71
72
|
);
|
72
73
|
}
|
@@ -15,6 +15,7 @@ import { Dialog } from '../../Modal';
|
|
15
15
|
import { Switch } from '../../Switch';
|
16
16
|
import { Text } from '../../Text';
|
17
17
|
import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
|
18
|
+
import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
|
18
19
|
import { useSetUiSettings } from './AppData/useUISettings';
|
19
20
|
import { useDropdownSelection } from './hooks/useDropdownSelection';
|
20
21
|
import { UI_SETTINGS } from '../common/constants';
|
@@ -39,7 +40,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
|
|
39
40
|
|
40
41
|
return (
|
41
42
|
<Dialog.Root defaultOpen onOpenChange={onOpenChange}>
|
42
|
-
<
|
43
|
+
<PrebuiltDialogPortal>
|
43
44
|
<Dialog.Overlay />
|
44
45
|
<Dialog.Content
|
45
46
|
css={{
|
@@ -118,7 +119,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
|
|
118
119
|
<TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
|
119
120
|
)}
|
120
121
|
</Dialog.Content>
|
121
|
-
</
|
122
|
+
</PrebuiltDialogPortal>
|
122
123
|
</Dialog.Root>
|
123
124
|
);
|
124
125
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { Fragment, useCallback,
|
1
|
+
import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
|
2
2
|
import { useMedia } from 'react-use';
|
3
3
|
import {
|
4
4
|
selectAudioTrackByPeerID,
|
@@ -8,24 +8,21 @@ import {
|
|
8
8
|
selectPeerMetadata,
|
9
9
|
selectPeerNameByID,
|
10
10
|
selectSessionStore,
|
11
|
-
selectTrackAudioByID,
|
12
11
|
selectVideoTrackByID,
|
13
12
|
selectVideoTrackByPeerID,
|
14
13
|
useHMSStore,
|
15
|
-
useHMSVanillaStore,
|
16
14
|
} from '@100mslive/react-sdk';
|
17
15
|
import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
|
18
16
|
import TileConnection from './Connection/TileConnection';
|
19
17
|
import TileMenu, { isSameTile } from './TileMenu/TileMenu';
|
18
|
+
import { AudioLevel } from '../../AudioLevel';
|
20
19
|
import { Avatar } from '../../Avatar';
|
21
|
-
import { Box, Flex } from '../../Layout';
|
22
20
|
import { VideoTileStats } from '../../Stats';
|
23
|
-
import { config as cssConfig
|
21
|
+
import { config as cssConfig } from '../../Theme';
|
24
22
|
import { Video } from '../../Video';
|
25
23
|
import { StyledVideoTile } from '../../VideoTile';
|
26
24
|
import { getVideoTileLabel } from './peerTileUtils';
|
27
25
|
import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
|
28
|
-
import { getAttributeBoxSize } from '../common/utils';
|
29
26
|
import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
|
30
27
|
|
31
28
|
const Tile = ({
|
@@ -80,16 +77,22 @@ const Tile = ({
|
|
80
77
|
|
81
78
|
const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
|
82
79
|
|
83
|
-
const avatarSize = useMemo(() => {
|
80
|
+
const [avatarSize, attribBoxSize] = useMemo(() => {
|
84
81
|
if (!calculatedWidth || !calculatedHeight) {
|
85
|
-
return undefined;
|
82
|
+
return [undefined, undefined];
|
86
83
|
}
|
84
|
+
let avatarSize = 'large';
|
87
85
|
if (calculatedWidth <= 150 || calculatedHeight <= 150) {
|
88
|
-
|
86
|
+
avatarSize = 'small';
|
89
87
|
} else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
|
90
|
-
|
88
|
+
avatarSize = 'medium';
|
91
89
|
}
|
92
|
-
|
90
|
+
let attribBoxSize = 'medium';
|
91
|
+
if (calculatedWidth <= 180 || calculatedHeight <= 180) {
|
92
|
+
attribBoxSize = 'small';
|
93
|
+
}
|
94
|
+
|
95
|
+
return [avatarSize, attribBoxSize];
|
93
96
|
}, [calculatedWidth, calculatedHeight]);
|
94
97
|
|
95
98
|
return (
|
@@ -139,14 +142,13 @@ const Tile = ({
|
|
139
142
|
|
140
143
|
{!hideAudioMuteOnTile ? (
|
141
144
|
isAudioMuted ? (
|
142
|
-
<StyledVideoTile.AudioIndicator
|
143
|
-
data-testid="participant_audio_mute_icon"
|
144
|
-
size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
|
145
|
-
>
|
145
|
+
<StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
|
146
146
|
<MicOffIcon />
|
147
147
|
</StyledVideoTile.AudioIndicator>
|
148
148
|
) : (
|
149
|
-
<
|
149
|
+
<StyledVideoTile.AudioIndicator size={attribBoxSize}>
|
150
|
+
<AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
|
151
|
+
</StyledVideoTile.AudioIndicator>
|
150
152
|
)
|
151
153
|
) : null}
|
152
154
|
{isMouseHovered || (isDragabble && isMobile) ? (
|
@@ -158,7 +160,7 @@ const Tile = ({
|
|
158
160
|
enableSpotlightingPeer={enableSpotlightingPeer}
|
159
161
|
/>
|
160
162
|
) : null}
|
161
|
-
{!hideMetadataOnTile && <PeerMetadata peerId={peerId}
|
163
|
+
{!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
|
162
164
|
|
163
165
|
<TileConnection
|
164
166
|
hideLabel={hideParticipantNameOnTile}
|
@@ -175,56 +177,7 @@ const Tile = ({
|
|
175
177
|
);
|
176
178
|
};
|
177
179
|
|
178
|
-
const
|
179
|
-
keyframes({
|
180
|
-
'50%': {
|
181
|
-
transform: `scale3d(1,${value},1)`,
|
182
|
-
},
|
183
|
-
'100%': {
|
184
|
-
transform: `scale3d(1,1,1)`,
|
185
|
-
},
|
186
|
-
});
|
187
|
-
|
188
|
-
const AudioLevelIndicator = ({ trackId, value, delay }) => {
|
189
|
-
const vanillaStore = useHMSVanillaStore();
|
190
|
-
const ref = useRef();
|
191
|
-
|
192
|
-
useEffect(() => {
|
193
|
-
const unsubscribe = vanillaStore.subscribe(audioLevel => {
|
194
|
-
if (ref.current) {
|
195
|
-
ref.current.style['animation'] = `${heightAnimation(
|
196
|
-
audioLevel ? value : 1,
|
197
|
-
)} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
|
198
|
-
}
|
199
|
-
}, selectTrackAudioByID(trackId));
|
200
|
-
return unsubscribe;
|
201
|
-
}, [vanillaStore, trackId, value, delay]);
|
202
|
-
return (
|
203
|
-
<Box
|
204
|
-
ref={ref}
|
205
|
-
css={{
|
206
|
-
w: 4,
|
207
|
-
height: 6,
|
208
|
-
r: 2,
|
209
|
-
bg: '$on_primary_high',
|
210
|
-
}}
|
211
|
-
/>
|
212
|
-
);
|
213
|
-
};
|
214
|
-
|
215
|
-
export const AudioLevel = ({ trackId }) => {
|
216
|
-
return (
|
217
|
-
<StyledVideoTile.AudioIndicator>
|
218
|
-
<Flex align="center" justify="center" css={{ gap: '$2' }}>
|
219
|
-
{[3, 2, 3].map((v, i) => (
|
220
|
-
<AudioLevelIndicator trackId={trackId} value={v} delay={i * 0.15} key={i} />
|
221
|
-
))}
|
222
|
-
</Flex>
|
223
|
-
</StyledVideoTile.AudioIndicator>
|
224
|
-
);
|
225
|
-
};
|
226
|
-
|
227
|
-
const PeerMetadata = ({ peerId, height, width }) => {
|
180
|
+
const PeerMetadata = ({ peerId, size }) => {
|
228
181
|
const metaData = useHMSStore(selectPeerMetadata(peerId));
|
229
182
|
const isBRB = metaData?.isBRBOn || false;
|
230
183
|
const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
|
@@ -232,12 +185,12 @@ const PeerMetadata = ({ peerId, height, width }) => {
|
|
232
185
|
return (
|
233
186
|
<Fragment>
|
234
187
|
{isHandRaised ? (
|
235
|
-
<StyledVideoTile.AttributeBox size={
|
188
|
+
<StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
|
236
189
|
<HandIcon width={24} height={24} />
|
237
190
|
</StyledVideoTile.AttributeBox>
|
238
191
|
) : null}
|
239
192
|
{isBRB ? (
|
240
|
-
<StyledVideoTile.AttributeBox size={
|
193
|
+
<StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
|
241
194
|
<BrbTileIcon width={22} height={22} />
|
242
195
|
</StyledVideoTile.AttributeBox>
|
243
196
|
) : null}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import { Dialog, Flex } from '../../../';
|
3
3
|
import { DialogInputFile } from '../../primitives/DialogContent';
|
4
|
+
import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
|
4
5
|
import { PDFHeader } from './pdfHeader';
|
5
6
|
import { SubmitPDF } from './submitPdf';
|
6
7
|
import { UploadedFile } from './uploadedFile';
|
@@ -10,7 +11,7 @@ export function PDFFileOptions({ onOpenChange }) {
|
|
10
11
|
|
11
12
|
return !pdfFile ? (
|
12
13
|
<Dialog.Root defaultOpen onOpenChange={onOpenChange}>
|
13
|
-
<
|
14
|
+
<PrebuiltDialogPortal>
|
14
15
|
<Dialog.Overlay />
|
15
16
|
<Dialog.Content
|
16
17
|
css={{
|
@@ -34,7 +35,7 @@ export function PDFFileOptions({ onOpenChange }) {
|
|
34
35
|
<SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
|
35
36
|
</Flex>
|
36
37
|
</Dialog.Content>
|
37
|
-
</
|
38
|
+
</PrebuiltDialogPortal>
|
38
39
|
</Dialog.Root>
|
39
40
|
) : (
|
40
41
|
<UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />
|
@@ -3,7 +3,7 @@ import { useScreenShare } from '@100mslive/react-sdk';
|
|
3
3
|
import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
|
4
4
|
import PDFShareImg from './../../images/pdf-share.png';
|
5
5
|
import ScreenShareImg from './../../images/screen-share.png';
|
6
|
-
import { Box,
|
6
|
+
import { Box, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
|
7
7
|
import { ShareMenuIcon } from '../ShareMenuIcon';
|
8
8
|
import { PDFFileOptions } from './pdfFileOptions';
|
9
9
|
|
@@ -75,7 +75,8 @@ export function ShareScreenOptions() {
|
|
75
75
|
alignItems: 'flex-start',
|
76
76
|
gap: '$8',
|
77
77
|
px: '$10',
|
78
|
-
|
78
|
+
pt: '$6',
|
79
|
+
pb: '$10',
|
79
80
|
'&:hover': {
|
80
81
|
bg: '$transparent',
|
81
82
|
cursor: 'default',
|
@@ -163,7 +164,7 @@ export function ShareScreenOptions() {
|
|
163
164
|
align="center"
|
164
165
|
css={{
|
165
166
|
position: 'absolute',
|
166
|
-
top: '
|
167
|
+
top: '35%',
|
167
168
|
left: '54%',
|
168
169
|
padding: '$2 $4',
|
169
170
|
r: '$2',
|
@@ -200,32 +201,6 @@ export function ShareScreenOptions() {
|
|
200
201
|
</Flex>
|
201
202
|
</Flex>
|
202
203
|
</Dropdown.Item>
|
203
|
-
<Dropdown.Item
|
204
|
-
css={{
|
205
|
-
px: '$10',
|
206
|
-
pb: '$10',
|
207
|
-
pt: '$6',
|
208
|
-
'&:hover': {
|
209
|
-
bg: '$transparent',
|
210
|
-
cursor: 'default',
|
211
|
-
},
|
212
|
-
}}
|
213
|
-
>
|
214
|
-
<Button
|
215
|
-
variant="standard"
|
216
|
-
outlined
|
217
|
-
type="submit"
|
218
|
-
onClick={() => {
|
219
|
-
updateState(MODALS.SHARE, false);
|
220
|
-
}}
|
221
|
-
data-testid="share_btn"
|
222
|
-
css={{
|
223
|
-
w: '100%',
|
224
|
-
}}
|
225
|
-
>
|
226
|
-
Cancel
|
227
|
-
</Button>
|
228
|
-
</Dropdown.Item>
|
229
204
|
</Dropdown.Content>
|
230
205
|
</Dropdown.Root>
|
231
206
|
{openModals.has(MODALS.PDF_SHARE) && (
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
2
2
|
import { TrashIcon } from '@100mslive/react-icons';
|
3
3
|
import { Dialog, Flex, Text } from '../../../';
|
4
4
|
import { DialogRow } from '../../primitives/DialogContent';
|
5
|
+
import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
|
5
6
|
import { PDFHeader } from './pdfHeader';
|
6
7
|
import { PDFInfo } from './pdfInfo';
|
7
8
|
import { SubmitPDF } from './submitPdf';
|
@@ -10,7 +11,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
|
|
10
11
|
const [fileName, ext] = pdfFile.name.split('.');
|
11
12
|
return (
|
12
13
|
<Dialog.Root defaultOpen onOpenChange={onOpenChange}>
|
13
|
-
<
|
14
|
+
<PrebuiltDialogPortal>
|
14
15
|
<Dialog.Overlay />
|
15
16
|
<Dialog.Content
|
16
17
|
css={{
|
@@ -65,7 +66,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
|
|
65
66
|
<SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
|
66
67
|
</Flex>
|
67
68
|
</Dialog.Content>
|
68
|
-
</
|
69
|
+
</PrebuiltDialogPortal>
|
69
70
|
</Dialog.Root>
|
70
71
|
);
|
71
72
|
};
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React, { useRef } from 'react';
|
2
2
|
import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
|
3
|
+
import { PrebuiltDialogPortal } from '../components/PrebuiltDialogPortal';
|
3
4
|
import { Button } from '../../Button';
|
4
5
|
import { Checkbox } from '../../Checkbox';
|
5
6
|
import { HorizontalDivider } from '../../Divider';
|
@@ -14,7 +15,7 @@ import { Text } from '../../Text';
|
|
14
15
|
|
15
16
|
export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
|
16
17
|
return (
|
17
|
-
<
|
18
|
+
<PrebuiltDialogPortal>
|
18
19
|
<Dialog.Overlay />
|
19
20
|
<Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
|
20
21
|
<Dialog.Title>
|
@@ -35,7 +36,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
|
|
35
36
|
<HorizontalDivider css={{ mt: '0.8rem' }} />
|
36
37
|
<Box>{children}</Box>
|
37
38
|
</Dialog.Content>
|
38
|
-
</
|
39
|
+
</PrebuiltDialogPortal>
|
39
40
|
);
|
40
41
|
};
|
41
42
|
|
@@ -60,7 +61,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
|
|
60
61
|
|
61
62
|
export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
|
62
63
|
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
63
|
-
<
|
64
|
+
<PrebuiltDialogPortal>
|
64
65
|
<Dialog.Overlay />
|
65
66
|
<Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
|
66
67
|
<Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
|
@@ -97,7 +98,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
|
|
97
98
|
</Box>
|
98
99
|
</Flex>
|
99
100
|
</Dialog.Content>
|
100
|
-
</
|
101
|
+
</PrebuiltDialogPortal>
|
101
102
|
</Dialog.Root>
|
102
103
|
);
|
103
104
|
|