feat(modal): require bind:show

Author: GregOnNet

apps/website/src/routes/docs/headless/(components)/modal/examples/building-blocks-snip.tsx

@@ -1,9 +1,11 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useSignal } from '@builder.io/qwik';
 import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
 
 export default component$(() => {
+  const showSig = useSignal(false);
+
   return (
-    <Modal>
+    <Modal bind:show={showSig}>
       <ModalHeader />
       <ModalContent />
       <ModalFooter />

packages/kit-headless/src/components/modal/modal-behavior.ts

@@ -78,15 +78,15 @@ export function lockScroll() {
   window.document.body.style.overflow = 'hidden';
 }
 
-export type WidthElement = {
+export type WidthState = {
   width: number | null;
 };
 
 /**
  * Unlocks scrolling of the document.
  * Adjusts padding of the given scrollbar.
  */
-export function unlockScroll(scrollbar: WidthElement) {
+export function unlockScroll(scrollbar: WidthState) {
   window.document.body.style.overflow = '';
 
   const currentPadding = parseInt(document.body.style.paddingRight);
@@ -101,7 +101,7 @@ export function unlockScroll(scrollbar: WidthElement) {
  * TODO: Why???
  *
  */
-export function adjustScrollbar(scrollbar: WidthElement, modal: HTMLDialogElement) {
+export function adjustScrollbar(scrollbar: WidthState, modal: HTMLDialogElement) {
   if (scrollbar.width === null) {
     scrollbar.width = window.innerWidth - document.documentElement.clientWidth;
   }
@@ -129,7 +129,7 @@ export function overrideNativeDialogEscapeBehaviorWith(continuation: () => void)
  * Modal remains in the same position as before.
  */
 export function keepModalInPlaceWhileScrollbarReappears(
-  scrollbar: WidthElement,
+  scrollbar: WidthState,
   modal?: HTMLDialogElement,
 ) {
   if (!modal) return;

packages/kit-headless/src/components/modal/modal.tsx

@@ -11,7 +11,7 @@ import {
   useTask$,
 } from '@builder.io/qwik';
 import {
-  WidthElement as WidthState,
+  WidthState,
   activateFocusTrap,
   adjustScrollbar,
   closing,
@@ -30,7 +30,7 @@ import styles from './modal.css?inline';
 export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
   onShow$?: QRL<() => void>;
   onClose$?: QRL<() => void>;
-  'bind:show'?: Signal<boolean>;
+  'bind:show': Signal<boolean>;
   closeOnBackdropClick?: boolean;
   alert?: boolean;
 };
@@ -40,10 +40,7 @@ export const Modal = component$((props: ModalProps) => {
   const modalRefSig = useSignal<HTMLDialogElement>();
   const scrollbar: WidthState = { width: null };
 
-  const { 'bind:show': givenOpenSig } = props;
-
-  const defaultShowSig = useSignal(false);
-  const showSig = givenOpenSig || defaultShowSig;
+  const { 'bind:show': showSig } = props;
 
   useTask$(async function toggleModal({ track, cleanup }) {
     const isOpen = track(() => showSig.value);