Add support for dialog element

apps/examples/src/components/App.js

@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+import { useRef } from 'react';
 import { ScrollView } from 'react-native';
 import { css, html } from 'react-strict-dom';
 import { tokens, themeColors, systemColors } from './tokens.stylex';
@@ -639,11 +640,48 @@ function Shell(): React.MixedElement {
           />
           <html.span>{imageErrorText}</html.span>
         </ExampleBlock>
+        <ExampleBlock title="dialog to RN Modal">
+          <DialogExample />
+        </ExampleBlock>
       </html.div>
     </ScrollView>
   );
 }
 
+function DialogExample(): React.MixedElement {
+  const dialogRef = useRef<?HTMLDialogElement>(null);
+  // const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const showModal = () => {
+    if (dialogRef.current) {
+      // dialogRef.current.showModal();
+      // setIsModalVisible(true);
+      console.log('Opening Modal');
+    }
+  };
+
+  const closeModal = () => {
+    if (dialogRef.current) {
+      // dialogRef.current.close();
+      // setIsModalVisible(false);
+      console.log('Closing Modal');
+    }
+  };
+
+  return (
+    <html.div>
+      <html.button onClick={showModal}>Open Dialog</html.button>
+      <html.dialog ref={dialogRef}>
+        <html.div style={styles.dialogcontent}>
+          <html.h2>Dialog Title</html.h2>
+          <html.p>This is a dialog content.</html.p>
+          <html.button onClick={closeModal}>Close</html.button>
+        </html.div>
+      </html.dialog>
+    </html.div>
+  );
+}
+
 export default function App(): React.MixedElement {
   return (
     <React.StrictMode>
@@ -886,5 +924,20 @@ const styles = css.create({
     borderBlockWidth: 20,
     borderInlineWidth: 20,
     borderStyle: 'solid'
+  },
+  dialog: {
+    width: 200,
+    height: 200,
+    margin: 0,
+    backgroundColor: 'red',
+    '::backdrop': {
+      backgroundColor: 'rgba(30, 41, 196, 0.5)'
+    }
+  },
+  dialogcontent: {
+    width: 200,
+    height: 200,
+    margin: 'auto',
+    position: 'relative'
   }
 });

packages/react-strict-dom/src/dom/html.js

@@ -110,6 +110,14 @@ export const del: component(
   ...StrictReactDOMProps
 ) = createStrict('del', defaultStyles.del);
 
+/**
+ * "dialog" (block)
+ */
+export const dialog: component(
+  ref?: React.RefSetter<HTMLDialogElement>,
+  ...StrictReactDOMProps
+) = createStrict('dialog', defaultStyles.dialog);
+
 /**
  * "div" (block)
  */

packages/react-strict-dom/src/dom/runtime.js

@@ -90,6 +90,7 @@ const br: StrictReactDOMPropsStyle = null;
 const button: StrictReactDOMPropsStyle = [styles.inlineblock, styles.button];
 const code: StrictReactDOMPropsStyle = [styles.inline, styles.codePre];
 const del: StrictReactDOMPropsStyle = null;
+const dialog: StrictReactDOMPropsStyle = styles.block;
 const div: StrictReactDOMPropsStyle = styles.block;
 const em: StrictReactDOMPropsStyle = styles.inline;
 const fieldset: StrictReactDOMPropsStyle = styles.block;
@@ -139,6 +140,7 @@ export const defaultStyles = {
   button: button as typeof button,
   code: code as typeof code,
   del: del as typeof del,
+  dialog: dialog as typeof dialog,
   div: div as typeof div,
   em: em as typeof em,
   fieldset: fieldset as typeof fieldset,

packages/react-strict-dom/src/native/css/index.js

@@ -452,6 +452,8 @@ export function props(
     // '::placeholder' polyfill
     else if (styleProp === 'placeholderTextColor') {
       nativeProps.placeholderTextColor = styleValue;
+    } else if (styleProp === 'backdropColor') {
+      nativeProps.backdropColor = styleValue;
     }
     // visibility polyfill
     // Note: we can't polyfill nested visibility changes

packages/react-strict-dom/src/native/css/processStyle.js

@@ -79,7 +79,6 @@ export function processStyle(
       }
       continue;
     }
-
     // Object values
     else if (typeof styleValue === 'object' && styleValue != null) {
       if (propName === '::placeholder') {
@@ -97,6 +96,21 @@ export function processStyle(
           }
         }
         continue;
+      } else if (propName === '::backdrop') {
+        const backdropStyleProps = Object.keys(styleValue);
+        for (let i = 0; i < backdropStyleProps.length; i++) {
+          const prop = backdropStyleProps[i];
+          if (prop === 'backgroundColor') {
+            result['backdropColor'] = processStyle({
+              backgroundColor: styleValue.backgroundColor
+            }).backgroundColor;
+          } else {
+            if (__DEV__) {
+              warnMsg(`unsupported "::backdrop" style property "${prop}"`);
+            }
+          }
+        }
+        continue;
       } else if (Object.hasOwn(styleValue, 'default')) {
         result[propName] = processStyle(styleValue);
         continue;

packages/react-strict-dom/src/native/html.js

@@ -176,6 +176,14 @@ export const del: component(
   ...StrictReactDOMProps
 ) = createStrictText('del', { style: styles.lineThrough });
 
+/**
+ * "dialog" (block)
+ */
+export const dialog: component(
+  ref?: React.RefSetter<HTMLDialogElement>,
+  ...StrictReactDOMProps
+) = createStrict('dialog');
+
 /**
  * "div" (block)
  */

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -37,10 +37,17 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 ): component(ref?: React.RefSetter<T>, ...P) {
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
-      let NativeComponent =
-        tagName === 'button'
-          ? ReactNative.Pressable
-          : ReactNative.ViewNativeComponent;
+      let NativeComponent = null;
+      switch (tagName) {
+        case 'button':
+          NativeComponent = ReactNative.Pressable;
+          break;
+        case 'dialog':
+          NativeComponent = ReactNative.Modal;
+          break;
+        default:
+          NativeComponent = ReactNative.ViewNativeComponent;
+      }
       const elementRef = useStrictDOMElement<T>(forwardedRef, { tagName });
       const hasTextAncestor = React.useContext(ReactNative.TextAncestorContext);
 

packages/react-strict-dom/src/native/react-native/index.js

@@ -14,7 +14,8 @@ export {
   Platform,
   Pressable,
   Text,
-  TextInput
+  TextInput,
+  Modal
 } from 'react-native';
 export { LayoutConformance } from './LayoutConformance';
 export { TextAncestorContext } from './TextAncestorContext';