From 20bcf56540752fdaee3840b0db9e45f06bf99cfc Mon Sep 17 00:00:00 2001
From: anserwaseem <hafiz.anser.waseem@gmail.com>
Date: Wed, 1 Oct 2025 23:01:39 +0500
Subject: [PATCH] ensure navigateModalScreen supports custom widget title

---
 .changeset/tame-onions-lick.md                    |  6 ++++++
 apps/kitchen-sink/src/ensemble/screens/forms.yaml | 10 ++++++++++
 packages/runtime/src/runtime/modal/index.tsx      | 10 ++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tame-onions-lick.md

diff --git a/.changeset/tame-onions-lick.md b/.changeset/tame-onions-lick.md
new file mode 100644
index 000000000..ae5d0535e
--- /dev/null
+++ b/.changeset/tame-onions-lick.md
@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+ensure navigateModalScreen supports custom widget title
diff --git a/apps/kitchen-sink/src/ensemble/screens/forms.yaml b/apps/kitchen-sink/src/ensemble/screens/forms.yaml
index fe0717ec8..da24822b9 100644
--- a/apps/kitchen-sink/src/ensemble/screens/forms.yaml
+++ b/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:
diff --git a/packages/runtime/src/runtime/modal/index.tsx b/packages/runtime/src/runtime/modal/index.tsx
index 4f88c00a2..0e52de784 100644
--- a/packages/runtime/src/runtime/modal/index.tsx
+++ b/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,
       });
     },
     [],