Merge pull request #85 from oramasearch/feature/orm-2241

Add on modal close event + use dialog tag instead of role

Author: rjborba

apps/demo-react/src/App.tsx

@@ -93,6 +93,9 @@ const SearchBoxPage = () => {
         <div className="component-row">
           <OramaSearchButton colorScheme="system">Search</OramaSearchButton>
           <OramaSearchBox
+            onModalClosed={() => {
+              console.log('closed')
+            }}
             colorScheme="system"
             index={{
               api_key: API_KEY,

packages/ui-stencil-vue/lib/components.ts

@@ -205,7 +205,8 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'startConversation',
   'answerGenerated',
   'answerSourceClick',
-  'chatMarkdownLinkClicked'
+  'chatMarkdownLinkClicked',
+  'modalClosed'
 ]);
 
 

packages/ui-stencil/src/components.d.ts

@@ -558,6 +558,7 @@ declare global {
         "answerGenerated": OnAnswerGeneratedCallbackProps;
         "answerSourceClick": OnAnswerSourceClickCallbackProps;
         "chatMarkdownLinkClicked": OnChatMarkdownLinkClickedCallbackProps;
+        "modalClosed": any;
     }
     interface HTMLOramaSearchBoxElement extends Components.OramaSearchBox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLOramaSearchBoxElementEventMap>(type: K, listener: (this: HTMLOramaSearchBoxElement, ev: OramaSearchBoxCustomEvent<HTMLOramaSearchBoxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -901,6 +902,10 @@ declare namespace LocalJSX {
           * Fired when the chat is cleared
          */
         "onClearChat"?: (event: OramaSearchBoxCustomEvent<void>) => void;
+        /**
+          * Fired when modal is closed
+         */
+        "onModalClosed"?: (event: OramaSearchBoxCustomEvent<any>) => void;
         /**
           * Fired when search successfully resolves
          */

packages/ui-stencil/src/components/internal/orama-modal/orama-modal.tsx

@@ -136,14 +136,13 @@ export class OramaModal {
   }
 
   render() {
-    if(!this.modalIsOpen) {
+    if (!this.modalIsOpen) {
       return null
     }
 
     return (
-      <div
+      <dialog
         class={`modal ${this.modalIsOpen ? 'open' : ''}`}
-        role="dialog"
         aria-modal="true"
         aria-labelledby="modalTitle"
         aria-describedby="modalContent"
@@ -159,7 +158,7 @@ export class OramaModal {
             Close
           </button>
         </div>
-      </div>
+      </dialog>
     )
   }
 }

packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx

@@ -197,6 +197,12 @@ export class SearchBox {
   @Event({ bubbles: true, composed: true, cancelable: true })
   chatMarkdownLinkClicked: EventEmitter<OnChatMarkdownLinkClickedCallbackProps>
 
+  /**
+   * Fired when modal is closed
+   */
+  @Event({ bubbles: true, composed: true })
+  modalClosed: EventEmitter
+
   wrapperRef!: HTMLElement
 
   schemaQuery: MediaQueryList
@@ -239,6 +245,8 @@ export class SearchBox {
       if (!event.detail.open) {
         this.globalStore.state.open = false
         this.open = false
+
+        this.modalClosed.emit()
       }
     }
   }

packages/ui-stencil/src/components/orama-search-box/readme.md

@@ -41,6 +41,7 @@
 | `answerSourceClick`       | Fired when user clicks on answer source                | `CustomEvent<{ source: SearchResult; }>`                                                                                                         |
 | `chatMarkdownLinkClicked` | Fired when user clicks on chat markdown link           | `CustomEvent<{ text: string; href: string; }>`                                                                                                   |
 | `clearChat`               | Fired when the chat is cleared                         | `CustomEvent<void>`                                                                                                                              |
+| `modalClosed`             | Fired when modal is closed                             | `CustomEvent<any>`                                                                                                                               |
 | `searchCompleted`         | Fired when search successfully resolves                | `CustomEvent<{ clientSearchParams: ClientSearchParams; result: { results: SearchResultBySection[]; resultsCount: number; facets: Facet[]; }; }>` |
 | `searchResultClick`       | Fired when user clicks on search result                | `CustomEvent<{ result: SearchResult; }>`                                                                                                         |
 | `startConversation`       | Fired as soon as the conversation is started           | `CustomEvent<{ userPrompt: string; systemPrompts: string[]; }>`                                                                                  |