From ea9b261b60698f9314e0aae4d61025bae215cccf Mon Sep 17 00:00:00 2001
From: Nestor Orest Plysyuk <dayonel@hotmail.es>
Date: Thu, 13 Jul 2023 16:37:21 +0200
Subject: [PATCH] feat(ui-shell): add `preventCloseOnClickOutside` to
 `HeaderAction` (#1625)

Closes #1624
---
 COMPONENT_INDEX.md                     | 17 +++++++++--------
 docs/src/COMPONENT_API.json            | 12 ++++++++++++
 src/UIShell/HeaderAction.svelte        | 10 +++++++++-
 types/UIShell/HeaderAction.svelte.d.ts |  6 ++++++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 9daf766e..f7eb9e64 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1601,14 +1601,15 @@ None.
 
 ### Props
 
-| Prop name  | Required | Kind             | Reactive | Type                                                              | Default value                  | Description                                                                                                   |
-| :--------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                        | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
-| isOpen     | No       | <code>let</code> | Yes      | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to open the panel                                                                               |
-| icon       | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;`   |
-| closeIcon  | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;`        |
-| text       | No       | <code>let</code> | No       | <code>string</code>                                               | <code>undefined</code>         | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
-| transition | No       | <code>let</code> | No       | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition      |
+| Prop name                  | Required | Kind             | Reactive | Type                                                              | Default value                  | Description                                                                                                   |
+| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ref                        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                        | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
+| isOpen                     | No       | <code>let</code> | Yes      | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to open the panel                                                                               |
+| icon                       | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;`   |
+| closeIcon                  | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;`        |
+| text                       | No       | <code>let</code> | No       | <code>string</code>                                               | <code>undefined</code>         | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
+| transition                 | No       | <code>let</code> | No       | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition      |
+| preventCloseOnClickOutside | No       | <code>let</code> | No       | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to prevent the panel from closing when clicking outside                                         |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index fa22c7f2..8081cd3f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4923,6 +4923,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "preventCloseOnClickOutside",
+          "kind": "let",
+          "description": "Set to `true` to prevent the panel from closing when clicking outside",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],
diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
index 59d749e5..b42597e7 100644
--- a/src/UIShell/HeaderAction.svelte
+++ b/src/UIShell/HeaderAction.svelte
@@ -38,6 +38,9 @@
    */
   export let transition = { duration: 200 };
 
+  /** Set to `true` to prevent the panel from closing when clicking outside */
+  export let preventCloseOnClickOutside = false;
+
   import { createEventDispatcher } from "svelte";
   import { slide } from "svelte/transition";
   import Close from "../icons/Close.svelte";
@@ -50,7 +53,12 @@
 
 <svelte:window
   on:click="{({ target }) => {
-    if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
+    if (
+      isOpen &&
+      !ref.contains(target) &&
+      !refPanel.contains(target) &&
+      !preventCloseOnClickOutside
+    ) {
       isOpen = false;
       dispatch('close');
     }
diff --git a/types/UIShell/HeaderAction.svelte.d.ts b/types/UIShell/HeaderAction.svelte.d.ts
index 60cc86bb..6d7be682 100644
--- a/types/UIShell/HeaderAction.svelte.d.ts
+++ b/types/UIShell/HeaderAction.svelte.d.ts
@@ -43,6 +43,12 @@ export interface HeaderActionProps
    */
   transition?: false | import("svelte/transition").SlideParams;
 
+  /**
+   * Set to `true` to prevent the panel from closing when clicking outside
+   * @default false
+   */
+  preventCloseOnClickOutside?: boolean;
+
   [key: `data-${string}`]: any;
 }