refactor(dialog): reduce API surface

Author: GregOnNet

apps/website/src/routes/docs/headless/(components)/dialog/examples.tsx

@@ -6,12 +6,12 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <Dialog.Root>
+        <Dialog.Element>
           <Dialog.Trigger>
             <button>Open Dialog</button>
           </Dialog.Trigger>
           <Dialog.Content>Hello World</Dialog.Content>
-        </Dialog.Root>
+        </Dialog.Element>
       </div>
 
       <div q:slot="codeExample">

packages/kit-headless/src/components/dialog/dialog.close.tsx

@@ -1,61 +1,5 @@
-import {
-  $,
-  QwikMouseEvent,
-  Slot,
-  component$,
-  useContext,
-  useStylesScoped$,
-  useVisibleTask$,
-} from '@builder.io/qwik';
-import { dialogContext } from './dialog.context';
-import { hasDialogBackdropBeenClicked } from './utils';
+import { Slot, component$ } from '@builder.io/qwik';
 
 export const Content = component$(() => {
-  useStylesScoped$(`
-    .full-screen {
-      width: 100vw;
-      height: 100vh;
-    }
-  `);
-
-  const context = useContext(dialogContext);
-  const props = context.state.props;
-
-  const closeOnBackdropClick$ = $(
-    (event: QwikMouseEvent<HTMLDialogElement, MouseEvent>) =>
-      hasDialogBackdropBeenClicked(event) ? context.close$() : Promise.resolve()
-  );
-
-  /**
-   *
-   * When dialog is closed by pressing the Escape-Key,
-   * we set the opened state to false.
-   *
-   */
-  useVisibleTask$(() => {
-    const dialog = context.state.dialogRef.value;
-
-    if (!dialog) {
-      throw new Error(
-        '[Qwik UI Dialog]: Cannot update the Dialog state. <dialog>-Element not found.'
-      );
-    }
-
-    dialog.addEventListener('close', () => (context.state.opened = false));
-  });
-
-  return (
-    <dialog
-      {...props}
-      class={
-        context.state.props.fullScreen
-          ? `${context.state.props.class} full-screen`
-          : `${context.state.props.class}`
-      }
-      ref={context.state.dialogRef}
-      onClick$={closeOnBackdropClick$}
-    >
-      <Slot />
-    </dialog>
-  );
+  return <Slot />;
 });

packages/kit-headless/src/components/dialog/dialog.content-text.tsx

@@ -0,0 +1,4 @@
+.full-screen {
+  width: 100vw;
+  height: 100vh;
+}

packages/kit-headless/src/components/dialog/dialog.content.tsx

@@ -0,0 +1,113 @@
+import {
+  $,
+  QwikMouseEvent,
+  Slot,
+  component$,
+  useSignal,
+  useStore,
+  useStylesScoped$,
+  useVisibleTask$,
+} from '@builder.io/qwik';
+import styles from './dialog.element.css?inline';
+import { DialogState, RootProps } from './types';
+import { hasDialogBackdropBeenClicked } from './utils';
+
+export const Element = component$((props: RootProps) => {
+  useStylesScoped$(styles);
+
+  const dialogRef = useSignal<HTMLDialogElement>();
+
+  const state = useStore<DialogState>({
+    opened: false,
+  });
+
+  const open$ = $(() => {
+    const dialog = dialogRef.value;
+
+    if (!dialog) {
+      throw new Error(
+        '[Qwik UI Dialog]: Cannot open the Dialog. <dialog>-Element not found.'
+      );
+    }
+
+    dialog.showModal();
+    state.opened = true;
+  });
+
+  const close$ = $(() => {
+    const dialog = dialogRef.value;
+
+    if (!dialog) {
+      throw new Error(
+        '[Qwik UI Dialog]: Cannot close the Dialog. <dialog>-Element not found.'
+      );
+    }
+
+    dialog.close();
+    state.opened = false;
+  });
+
+  const closeOnBackdropClick$ = $(
+    (event: QwikMouseEvent<HTMLDialogElement, MouseEvent>) =>
+      hasDialogBackdropBeenClicked(event) ? close$() : Promise.resolve()
+  );
+
+  /**
+   *
+   * Share the public API of the Dialog if the dialog-caller is interested.
+   *
+   */
+  useVisibleTask$(({ track }) => {
+    const opened = track(() => state.opened);
+
+    if (!props.ref) return;
+
+    props.ref.value = {
+      opened,
+      open$,
+      close$,
+    };
+  });
+
+  /**
+   *
+   * Lock Scrolling on page when Dialog is opened.
+   *
+   */
+  useVisibleTask$(({ track }) => {
+    const opened = track(() => state.opened);
+
+    const overflow = opened ? 'hidden' : '';
+
+    window.document.body.style.overflow = overflow;
+  });
+
+  /**
+   *
+   * When dialog is closed by pressing the Escape-Key,
+   * we set the opened state to false.
+   *
+   */
+  useVisibleTask$(() => {
+    const dialog = dialogRef.value;
+
+    if (!dialog) {
+      throw new Error(
+        '[Qwik UI Dialog]: Cannot update the Dialog state. <dialog>-Element not found.'
+      );
+    }
+
+    dialog.addEventListener('close', () => (state.opened = false));
+  });
+
+  return (
+    <dialog
+      {...props}
+      class={props.fullScreen ? `${props.class} full-screen` : `${props.class}`}
+      ref={dialogRef}
+      onClick$={closeOnBackdropClick$}
+    >
+      <Slot />
+    </dialog>
+  );
+});

packages/kit-headless/src/components/dialog/dialog.context.tsx

@@ -1,6 +1,6 @@
 import { Slot, component$, useStyles$ } from '@builder.io/qwik';
 
-export const Actions = component$(() => {
+export const Footer = component$(() => {
   useStyles$(`
     .dialog-actions {
       position: sticky;
@@ -9,8 +9,8 @@ export const Actions = component$(() => {
   `);
 
   return (
-    <div class="dialog-actions">
+    <footer class="dialog-actions">
       <Slot />
-    </div>
+    </footer>
   );
 });

packages/kit-headless/src/components/dialog/dialog.element.css

@@ -1,6 +1,6 @@
 import { Slot, component$, useStyles$ } from '@builder.io/qwik';
 
-export const ContentTitle = component$(() => {
+export const Header = component$(() => {
   useStyles$(`
     .dialog-content-title {
       position: sticky;
@@ -9,8 +9,8 @@ export const ContentTitle = component$(() => {
   `);
 
   return (
-    <div class="dialog-content-title">
+    <header class="dialog-content-title">
       <Slot />
-    </div>
+    </header>
   );
 });