@dxos/react-ui 0.1.24 → 0.1.25-next.3c6b542

package/src/components/InvitationList/InvitationListItem.tsx

@@ -8,7 +8,7 @@ import React, { useCallback } from 'react';
 
 import { CancellableInvitationObservable } from '@dxos/client';
 import { useInvitationStatus } from '@dxos/react-client';
-import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+import { Button, getSize, mx, useId, useTranslation } from '@dxos/react-components';
 
 import { invitationStatusValue } from '../../util';
 import { SharedInvitationListProps } from './InvitationListProps';
@@ -27,18 +27,19 @@ export const InvitationListItem = ({
   createInvitationUrl
 }: InvitationListItemProps) => {
   const { t } = useTranslation('os');
+  const qrLabel = useId('qrLabel');
 
   const { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
   const statusValue = invitationStatusValue.get(status) ?? 0;
 
   const isCancellable = statusValue < 4 && statusValue >= 0;
   const showShare = statusValue < 3 && statusValue >= 0;
-  const showPin = statusValue === 3;
+  const showAuthCode = statusValue === 3;
 
   const handleClickRemove = useCallback(() => onClickRemove(invitation), [invitation, onClickRemove]);
 
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
-  const handleCLickCopy = useCallback(() => {
+  const handleClickCopy = useCallback(() => {
     if (invitationUrl) {
       void navigator.clipboard.writeText(invitationUrl);
     }
@@ -47,15 +48,21 @@ export const InvitationListItem = ({
   return (
     <AccordionPrimitive.Item value={value}>
       <AccordionPrimitive.Header className='flex gap-2 items-center'>
-        <InvitationStatusAvatar {...{ status, haltedAt }} />
+        <InvitationStatusAvatar {...{ status, haltedAt, size: 8 }} />
         {showShare && invitationUrl ? (
-          <AccordionPrimitive.Trigger asChild>
-            <Button className='grow flex gap-1'>
-              <span>{t('open share panel label')}</span>
-              <QrCode className={getSize(4)} weight='bold' />
+          <>
+            <AccordionPrimitive.Trigger asChild>
+              <Button className='grow flex gap-1' data-testid='show-qrcode'>
+                <span>{t('open share panel label')}</span>
+                <QrCode className={getSize(4)} weight='bold' />
+              </Button>
+            </AccordionPrimitive.Trigger>
+            <Button className='flex gap-1' onClick={handleClickCopy} data-testid='copy-invitation'>
+              <span className='pli-1'>{t('copy invitation code label')}</span>
+              <Copy className={getSize(4)} weight='bold' />
             </Button>
-          </AccordionPrimitive.Trigger>
-        ) : showPin ? (
+          </>
+        ) : showAuthCode ? (
           <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>
             {authenticationCode}
           </p>
@@ -63,31 +70,35 @@ export const InvitationListItem = ({
           <span role='none' className='grow' />
         )}
         {isCancellable ? (
-          <Button variant='ghost' compact className='flex gap-1' onClick={cancel}>
+          <Button variant='ghost' compact className='flex gap-1' onClick={cancel} data-testid='cancel-invitation'>
             <span className='sr-only'>{t('cancel invitation label')}</span>
             <ProhibitInset className={getSize(4)} weight='bold' />
           </Button>
         ) : (
-          <Button variant='ghost' compact className='flex gap-1' onClick={handleClickRemove}>
+          <Button
+            variant='ghost'
+            compact
+            className='flex gap-1'
+            onClick={handleClickRemove}
+            data-testid='remove-invitation'
+          >
             <span className='sr-only'>{t('remove invitation label')}</span>
             <X className={getSize(4)} weight='bold' />
           </Button>
         )}
       </AccordionPrimitive.Header>
       {showShare && invitationUrl && (
-        <AccordionPrimitive.Content>
-          <Button className='flex gap-2 is-full p-2' onClick={handleCLickCopy}>
-            <QRCodeSVG
-              bgColor='transparent'
-              fgColor='currentColor'
-              value={invitationUrl}
-              className={mx('grow aspect-square is-24 bs-auto')}
-            />
-            <span className='pli-1'>
-              {t('copy invitation code label')}
-              <Copy className={mx(getSize(4), 'inline mis-1')} weight='bold' />
-            </span>
-          </Button>
+        <AccordionPrimitive.Content className='flex gap-2 is-full radix-state-open:p-1 items-center'>
+          <QRCodeSVG
+            bgColor='transparent'
+            fgColor='currentColor'
+            value={invitationUrl}
+            className={mx('grow-[2] aspect-square is-24 bs-auto')}
+            aria-labelledby={qrLabel}
+          />
+          <span className='pli-1 flex-1 font-system-normal text-sm text-center' id={qrLabel}>
+            {t('qr label')}
+          </span>
         </AccordionPrimitive.Content>
       )}
     </AccordionPrimitive.Item>

package/src/components/InvitationList/InvitationStatusAvatar.tsx

@@ -5,19 +5,24 @@
 import React, { ComponentPropsWithoutRef } from 'react';
 
 import { Invitation } from '@dxos/client';
-import { getSize, Size } from '@dxos/react-components';
+import { getSize, mx, Size } from '@dxos/react-components';
 
 import { inactiveStrokeColor, activeStrokeColor, resolvedStrokeColor } from '../../styles';
 import { invitationStatusValue } from '../../util';
 
+export interface InvitationStatusAvatarSlots {
+  svg?: ComponentPropsWithoutRef<'svg'>;
+}
+
 export interface InvitationStatusAvatarProps {
   size?: Size;
   status: Invitation.State;
   haltedAt?: Invitation.State;
+  slots?: InvitationStatusAvatarSlots;
 }
 
 const svgSize = 32;
-const strokeWidth = 4;
+const strokeWidth = 5;
 const radius = (svgSize - strokeWidth) / 2;
 const circumference = Math.PI * 2 * radius;
 const gap = circumference / 12;
@@ -31,17 +36,17 @@ const circleProps: ComponentPropsWithoutRef<'circle'> = {
   cx: svgSize / 2,
   cy: svgSize / 2,
   r: radius,
-  strokeWidth: 4,
+  strokeWidth,
   strokeDasharray: `${segment - gap} ${2 * segment + gap}`
 };
 
-export const InvitationStatusAvatar = ({ size = 10, status, haltedAt }: InvitationStatusAvatarProps) => {
+export const InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {} }: InvitationStatusAvatarProps) => {
   const resolvedColor = resolvedStrokeColor(status);
   const halted =
     status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT || status === Invitation.State.ERROR;
   const cursor = invitationStatusValue.get(halted ? haltedAt! : status)!;
   return (
-    <svg viewBox={`0 0 ${svgSize} ${svgSize}`} className={getSize(size)}>
+    <svg {...slots.svg} viewBox={`0 0 ${svgSize} ${svgSize}`} className={mx(getSize(size), slots.svg?.className)}>
       {[...Array(nSegments)].map((_, index) => (
         <circle
           key={index}

package/src/components/SpaceList/SpaceListItem.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ForwardedRef, forwardRef } from 'react';
+
+import type { Space } from '@dxos/client';
+import { Avatar, mx } from '@dxos/react-components';
+import { humanize } from '@dxos/util';
+
+export const SpaceListItem = forwardRef(
+  ({ space, onClick }: { space: Space; onClick?: () => void }, ref: ForwardedRef<HTMLLIElement>) => {
+    return (
+      <li
+        className={mx('flex gap-2 items-center', onClick && 'cursor-pointer')}
+        onClick={() => onClick?.()}
+        ref={ref}
+        data-testid='space-list-item'
+      >
+        <Avatar
+          {...{
+            variant: 'circle',
+            size: 9,
+            fallbackValue: space.key.toHex(),
+            label: <p className='text-sm truncate'>{space.properties.name ?? humanize(space.key)}</p>,
+            slots: { labels: { className: 'block shrink overflow-hidden' }, root: { className: 'shrink-0' } }
+          }}
+        />
+      </li>
+    );
+  }
+);

package/src/components/SpaceList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SpaceListItem';

package/src/components/index.ts

@@ -5,3 +5,4 @@
 export * from './IdentityList';
 export * from './InvitationList';
 export * from './PanelSeparator';
+export * from './SpaceList';

package/src/composites/DevicesDialog/DevicesDialog.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Close } from '@radix-ui/react-dialog';
+import React from 'react';
+
+import { ThemeContext, useId } from '@dxos/react-components';
+
+import { PanelDialog, PanelDialogProps } from '../../layouts';
+import { DevicesPanel, DevicesPanelProps } from '../../panels';
+
+export interface DevicesDialogProps
+  extends Omit<PanelDialogProps, 'titleId' | 'children'>,
+    Omit<DevicesPanelProps, 'doneActionParent'> {}
+
+export const DevicesDialog = ({ slots, ...devicesDialogProps }: DevicesDialogProps) => {
+  const titleId = useId('spaceDialog__title');
+
+  return (
+    <PanelDialog
+      {...{
+        slots: { ...slots, root: { onOpenChange: (open) => open || devicesDialogProps.onDone?.(), ...slots?.root } },
+        titleId
+      }}
+    >
+      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+        <DevicesPanel
+          {...{
+            ...devicesDialogProps,
+            titleId,
+            doneActionParent: <Close asChild />
+          }}
+        />
+      </ThemeContext.Provider>
+    </PanelDialog>
+  );
+};

package/src/composites/DevicesDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './DevicesDialog';

package/src/composites/JoinDialog/JoinDialog.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxosTheme';
 
-import { StoryFn } from '@storybook/react';
+import { StoryContext, StoryFn } from '@storybook/react';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Client, Invitation, InvitationEncoder } from '@dxos/client';
@@ -19,62 +19,63 @@ import { JoinDialog } from './JoinDialog';
 export default {
   component: JoinDialog
 };
-export const Default = {
-  decorators: [
-    (Story: StoryFn) => {
-      const n = 2;
-      const testBuilder = new TestBuilder();
-      const clients = useMemo(() => {
-        return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
-      }, []);
-
-      const [invitationCode, setInvitationCode] = useState<string>();
-
-      const onInvitationEvent = useCallback((invitation: Invitation) => {
-        if (!invitationCode) {
-          const nextInvitationCode = InvitationEncoder.encode(invitation);
-          log.info('[next invitation code]', { nextInvitationCode });
-          setInvitationCode(nextInvitationCode);
-        }
-      }, []);
-
-      useAsyncEffect(async () => {
-        await Promise.all(clients.map((client) => client.initialize()));
-        log.info('[initialized]');
-
-        await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
-
-        const space = await clients[0].echo.createSpace();
-        log.info('[space created]', space);
-        space.properties.name = 'Q3 2022 Planning';
-
-        const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
-        log.info('[invitation created]', invitation);
-
-        invitation.subscribe({
-          onAuthenticating: onInvitationEvent,
-          onCancelled: (...args) => log.warn('[cancelled]', args),
-          onConnected: onInvitationEvent,
-          onConnecting: onInvitationEvent,
-          onError: onInvitationEvent,
-          onSuccess: onInvitationEvent,
-          onTimeout: (...args) => log.warn('[timeout]', args)
-        });
-
-        return () => {
-          void Promise.all(clients.map((client) => client.destroy()));
-        };
-      }, clients);
-
-      if (!invitationCode) {
-        return <Loading label='Setting things up…' />;
-      }
-
-      return (
-        <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
-          <Story args={{ initialInvitationCode: invitationCode }} />
-        </ClientProvider>
-      );
+
+const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
+  const n = 2;
+  const testBuilder = new TestBuilder();
+  const clients = useMemo(() => {
+    return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+  }, []);
+
+  const [invitationCode, setInvitationCode] = useState<string>();
+
+  const onInvitationEvent = useCallback((invitation: Invitation) => {
+    if (!invitationCode) {
+      const nextInvitationCode = InvitationEncoder.encode(invitation);
+      log.info('[next invitation code]', { nextInvitationCode });
+      setInvitationCode(nextInvitationCode);
     }
-  ]
+  }, []);
+
+  useAsyncEffect(async () => {
+    await Promise.all(clients.map((client) => client.initialize()));
+    log.info('[initialized]');
+
+    await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
+
+    const space = await clients[0].echo.createSpace();
+    log.info('[space created]', space);
+    space.properties.name = 'Q3 2022 Planning';
+
+    const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
+    log.info('[invitation created]', invitation);
+
+    invitation.subscribe({
+      onAuthenticating: onInvitationEvent,
+      onCancelled: (...args) => log.warn('[cancelled]', args),
+      onConnected: onInvitationEvent,
+      onConnecting: onInvitationEvent,
+      onError: onInvitationEvent,
+      onSuccess: onInvitationEvent,
+      onTimeout: (...args) => log.warn('[timeout]', args)
+    });
+
+    return () => {
+      void Promise.all(clients.map((client) => client.destroy()));
+    };
+  }, clients);
+
+  if (!invitationCode) {
+    return <Loading label='Setting things up…' />;
+  }
+
+  return (
+    <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
+      <Story args={{ initialInvitationCode: invitationCode, ...args }} />
+    </ClientProvider>
+  );
+};
+
+export const Default = {
+  decorators: [JoinClientDecorator]
 };

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -10,7 +10,9 @@ import { ThemeContext, useId } from '@dxos/react-components';
 import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
 import { JoinPanel, JoinPanelProps } from '../../panels';
 
-export interface JoinDialogProps extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>, JoinPanelProps {}
+export interface JoinDialogProps
+  extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>,
+    Omit<JoinPanelProps, 'exitActionParent' | 'doneActionParent'> {}
 
 export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
   const titleId = useId('joinDialog__title');

package/src/composites/Shell/Shell.tsx

@@ -0,0 +1,92 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { ShellRuntime } from '@dxos/client';
+import { LayoutRequest, ShellDisplay, ShellLayout } from '@dxos/protocols/proto/dxos/iframe';
+import { useClient, useSpace, useSpaces } from '@dxos/react-client';
+
+import { DevicesDialog } from '../DevicesDialog';
+import { JoinDialog } from '../JoinDialog';
+import { SpaceDialog } from '../SpaceDialog';
+
+export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: string }) => {
+  const [{ layout, invitationCode, spaceKey }, setLayout] = useState<LayoutRequest>({
+    layout: runtime.layout,
+    invitationCode: runtime.invitationCode,
+    spaceKey: runtime.spaceKey
+  });
+
+  const client = useClient();
+  const spaces = useSpaces();
+  const space = useSpace(spaceKey);
+
+  useEffect(() => {
+    return runtime.layoutUpdate.on((request) => setLayout(request));
+  }, []);
+
+  switch (layout) {
+    case ShellLayout.AUTH:
+      return (
+        <JoinDialog
+          mode='halo-only'
+          initialInvitationCode={invitationCode}
+          onDone={async () => {
+            // TODO(wittjosiah): Is this app-specific?
+            const space = spaces[0] ?? (await client.echo.createSpace());
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: space.key });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    case ShellLayout.CURRENT_SPACE:
+    case ShellLayout.SPACE_LIST:
+      return (
+        <SpaceDialog
+          space={space}
+          initialState={layout === ShellLayout.SPACE_LIST ? 'space list' : 'current space'}
+          createInvitationUrl={(invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`}
+          onClickJoinSpace={() => runtime.setLayout(ShellLayout.JOIN_SPACE, { spaceKey: space?.key })}
+          onClickMember={() => runtime.setLayout(ShellLayout.DEVICES_LIST, { spaceKey: space?.key })}
+          onDone={async (space) => {
+            // TODO(wittjosiah): If space is newly created the app won't yet know about it.
+            //   This is a bug that needs to be fixed when upgrading the space service.
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: space ? space.key : spaceKey });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    case ShellLayout.JOIN_SPACE:
+      return (
+        <JoinDialog
+          initialInvitationCode={invitationCode}
+          onDone={async (result) => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: result?.spaceKey ?? undefined });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+          onExit={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: runtime.spaceKey });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    case ShellLayout.DEVICES_LIST:
+      return (
+        <DevicesDialog
+          createInvitationUrl={(invitationCode) => `${origin}?haloInvitationCode=${invitationCode}`}
+          onDone={async () => {
+            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: runtime.spaceKey });
+            runtime.setLayout(ShellLayout.DEFAULT);
+          }}
+        />
+      );
+
+    default:
+      return null;
+  }
+};

package/src/composites/Shell/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Shell';

package/src/composites/SpaceDialog/SpaceDialog.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Close } from '@radix-ui/react-dialog';
+import React from 'react';
+
+import { ThemeContext, useId } from '@dxos/react-components';
+
+import { PanelDialog, PanelDialogProps } from '../../layouts';
+import { SpacePanel, SpacePanelProps } from '../../panels';
+
+export interface SpaceDialogProps
+  extends Omit<PanelDialogProps, 'titleId' | 'children'>,
+    Omit<SpacePanelProps, 'doneActionParent'> {}
+
+export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) => {
+  const titleId = useId('spaceDialog__title');
+
+  return (
+    <PanelDialog
+      {...{
+        slots: { ...slots, root: { onOpenChange: (open) => open || spacePanelProps.onDone?.(null), ...slots?.root } },
+        titleId
+      }}
+    >
+      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+        <SpacePanel
+          {...{
+            ...spacePanelProps,
+            titleId,
+            doneActionParent: <Close asChild />
+          }}
+        />
+      </ThemeContext.Provider>
+    </PanelDialog>
+  );
+};

package/src/composites/SpaceDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SpaceDialog';

package/src/composites/index.ts

@@ -1,5 +1,8 @@
 //
 // Copyright 2022 DXOS.org
 //
+
 export * from './IdentityPopover';
 export * from './JoinDialog';
+export * from './Shell';
+export * from './SpaceDialog';

package/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx

@@ -7,6 +7,8 @@ import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
 
 import { mx } from '@dxos/react-components';
 
+import { defaultDialogContent, defaultOverlay } from '../../styles';
+
 export interface PanelAlertDialogSlots {
   root: ComponentPropsWithoutRef<typeof AlertDialog.Root>;
   overlay: ComponentPropsWithoutRef<typeof AlertDialog.Overlay>;
@@ -23,18 +25,12 @@ export const PanelAlertDialog = ({ titleId, slots = {}, children }: PanelAlertDi
   return (
     <AlertDialog.Root defaultOpen {...slots.root}>
       {slots.trigger && <AlertDialog.Trigger {...slots.trigger} />}
-      <AlertDialog.Overlay
-        {...slots.overlay}
-        className={mx(
-          'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8',
-          slots.overlay?.className
-        )}
-      >
+      <AlertDialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
         <AlertDialog.Content
           onEscapeKeyDown={(event) => event.preventDefault()}
           {...slots.content}
           aria-labelledby={titleId}
-          className={mx('is-full min-is-[260px] max-is-[320px] shadow-md backdrop-blur-md', slots.content?.className)}
+          className={mx(defaultDialogContent, slots.content?.className)}
         >
           {children}
         </AlertDialog.Content>

package/src/layouts/PanelDialog/PanelDialog.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Dialog from '@radix-ui/react-dialog';
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+
+import { mx } from '@dxos/react-components';
+
+import { defaultDialogContent, defaultOverlay } from '../../styles';
+
+export interface PanelDialogSlots {
+  root: ComponentPropsWithoutRef<typeof Dialog.Root>;
+  overlay: ComponentPropsWithoutRef<typeof Dialog.Overlay>;
+  content: ComponentPropsWithoutRef<typeof Dialog.Content>;
+  trigger: ComponentPropsWithoutRef<typeof Dialog.Trigger>;
+}
+
+export type PanelDialogProps = PropsWithChildren<{
+  titleId: string;
+  slots?: Partial<PanelDialogSlots>;
+}>;
+
+export const PanelDialog = ({ titleId, slots = {}, children }: PanelDialogProps) => {
+  return (
+    <Dialog.Root defaultOpen {...slots.root}>
+      {slots.trigger && <Dialog.Trigger {...slots.trigger} />}
+      <Dialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
+        <Dialog.Content
+          {...slots.content}
+          aria-labelledby={titleId}
+          className={mx(defaultDialogContent, slots.content?.className)}
+        >
+          {children}
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};

package/src/layouts/PanelDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PanelDialog';

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -82,7 +82,7 @@ export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<Pane
           onCloseAutoFocus={(event) => isLg && event.preventDefault()}
           {...slots?.content}
           className={mx(
-            'fixed block-start-0 block-end-0 is-sidebar z-50 overscroll-contain overflow-x-hidden overflow-y-auto',
+            'fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto',
             'transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
             transitionShow ? 'inline-start-0' : '-inline-start-sidebar',
             slots?.content?.className

package/src/layouts/index.ts

@@ -5,3 +5,4 @@
 export * from './PanelPopover';
 export * from './PanelSidebar';
 export * from './PanelAlertDialog';
+export * from './PanelDialog';