ensure navigateModalScreen supports custom widget title (#1112)

Author: anserwaseem

.changeset/tame-onions-lick.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+ensure navigateModalScreen supports custom widget title

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -42,6 +42,16 @@ View:
                 inputs:
                   storVar: ${ensemble.storage.get('inputVal')}
                   userVar: ${ensemble.user}
+                title:
+                  Column:
+                    children:
+                      - Text:
+                          text: Modal title
+                      - Text:
+                          text: Modal subtitle
+                          styles:
+                            fontSize: ${typography.fontSize['14']}
+                            fontWeight: ${typography.fontWeight.light}
         - Button:
             label: show dialog
             onTap:

packages/runtime/src/runtime/modal/index.tsx

@@ -83,6 +83,7 @@ export const ModalWrapper: React.FC<PropsWithChildren> = ({ children }) => {
     isDialog: boolean;
     key: string;
     context?: { [key: string]: unknown };
+    title?: React.ReactNode;
   }>();
   const evaluatedOptions = useEvaluate(
     nextModal
@@ -125,7 +126,10 @@ export const ModalWrapper: React.FC<PropsWithChildren> = ({ children }) => {
       const nextModalState = {
         visible: true,
         content: nextModal.content,
-        options: evaluatedOptions.options,
+        options: {
+          ...evaluatedOptions.options,
+          ...(nextModal.title ? { title: nextModal.title } : {}),
+        },
         key: nextModal.key,
         isDialog: Boolean(nextModal.isDialog),
       };
@@ -154,12 +158,14 @@ export const ModalWrapper: React.FC<PropsWithChildren> = ({ children }) => {
       isDialog = false,
       modalContext?: { [key: string]: unknown },
     ): void => {
+      const hasStringTitle = isString(options.title);
       setNextModal({
         content,
-        options: omit(options, [!isString(options.title) ? "title" : ""]),
+        options: hasStringTitle ? options : omit(options, "title"),
         isDialog,
         context: modalContext,
         key: generateRandomString(10),
+        title: hasStringTitle ? undefined : options.title,
       });
     },
     [],