@budibase/bbui 3.37.3 → 3.37.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.37.3",
+  "version": "3.37.4",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "ca7841a3a42b1a1328df0cbb96a51650c0c1e8a7"
+  "gitHead": "cde1ea48fb34a1f21307a047066170830f41f2f2"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -12,6 +12,7 @@
   export let offset: number | undefined = undefined
   export let widthMode: PopoverWidthMode = "no-anchor"
   export let roundedPopover: boolean = false
+  export let customZIndex: number | undefined = undefined
 
   const actionMenuContext = getContext("actionMenu")
 
@@ -76,6 +77,7 @@
   {portalTarget}
   {animate}
   {offset}
+  {customZIndex}
   {widthMode}
   resizable={false}
   borderRadius={roundedPopover ? "12px" : undefined}

package/src/Drawer/Drawer.svelte

@@ -63,6 +63,12 @@
   import ActionButton from "../ActionButton/ActionButton.svelte"
   import Button from "../Button/Button.svelte"
   import Icon from "../Icon/Icon.svelte"
+  import {
+    addOverlay,
+    removeOverlay,
+    overlayStack,
+    BASE_Z_INDEX,
+  } from "../Modal/overlayStack"
 
   export let title = ""
   export let forceModal = false
@@ -75,7 +81,10 @@
   let drawerId = generate()
 
   $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
-  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal, zIndex)
+  $: stackIndex = $overlayStack.indexOf(drawerId)
+  $: computedZIndex =
+    zIndex ?? (stackIndex === -1 ? BASE_Z_INDEX : BASE_Z_INDEX + stackIndex)
+  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal, computedZIndex)
 
   const getStyle = (depth, left, width, modal, zIndex) => {
     let style = `
@@ -108,6 +117,7 @@
     visible = true
     dispatch("drawerShow", drawerId)
     openDrawers.update(state => [...state, drawerId])
+    addOverlay(drawerId)
   }
 
   export function hide() {
@@ -117,6 +127,7 @@
     visible = false
     dispatch("drawerHide", drawerId)
     openDrawers.update(state => state.filter(id => id !== drawerId))
+    removeOverlay(drawerId)
     unobserve()
   }
 
@@ -180,7 +191,7 @@
         class="underlay"
         class:hidden={!$modal}
         transition:drawerFade|local
-        style={zIndex != null ? `z-index: ${zIndex - 1}` : undefined}
+        style="z-index: {computedZIndex - 1}"
       ></div>
       <div
         class="drawer"

package/src/Modal/Modal.svelte

@@ -10,23 +10,42 @@
 <script lang="ts">
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
-  import { createEventDispatcher, setContext, tick, onMount } from "svelte"
+  import {
+    createEventDispatcher,
+    setContext,
+    tick,
+    onMount,
+    onDestroy,
+  } from "svelte"
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
   import { ModalCancelFrom } from "../constants"
   import { generate } from "shortid"
+  import {
+    BASE_Z_INDEX,
+    overlayStack,
+    addOverlay,
+    removeOverlay,
+    isActiveOverlay,
+  } from "./overlayStack"
 
   export let fixed: boolean = false
   export let inline: boolean = false
   export let disableCancel: boolean = false
   export let closeOnOutsideClick: boolean = true
   export let autoFocus: boolean = true
-  export let zIndex: number = 1001
+  export let zIndex: number | undefined = undefined
+  export let beforeClose: (() => Promise<boolean>) | undefined = undefined
+
+  $: stackIndex = $overlayStack.indexOf(modalId)
+  $: computedZIndex =
+    zIndex ?? (stackIndex === -1 ? BASE_Z_INDEX : BASE_Z_INDEX + stackIndex)
 
   // Ensure any popovers inside this modal are rendered inside this modal
   // Unique ids are required to ensure nested modals are parented correctly
   const uniqueId = generate()
+  const modalId = uniqueId
   setContext(Context.PopoverRoot, `.spectrum-Modal-${uniqueId}`)
 
   const dispatch = createEventDispatcher<{
@@ -48,6 +67,7 @@
       return
     }
     visible = true
+    addOverlay(modalId)
   }
 
   export function hide(): void {
@@ -55,6 +75,7 @@
       return
     }
     visible = false
+    removeOverlay(modalId)
   }
 
   export function toggle(): void {
@@ -65,23 +86,30 @@
     }
   }
 
-  export function cancel(from: ModalCancelFrom): void {
+  export async function cancel(from: ModalCancelFrom): Promise<void> {
     if (!visible || disableCancel) {
       return
     }
+    if (beforeClose) {
+      const ok = await beforeClose()
+      if (!ok) return
+    }
     dispatch("cancel", from)
     hide()
   }
 
-  function handleKey(e: KeyboardEvent): void {
-    if (visible && e.key === "Escape") {
-      cancel(ModalCancelFrom.ESCAPE_KEY)
+  const isActiveModal = () => isActiveOverlay(modalId)
+
+  async function handleKey(e: KeyboardEvent): Promise<void> {
+    if (visible && e.key === "Escape" && isActiveModal()) {
+      e.stopImmediatePropagation()
+      await cancel(ModalCancelFrom.ESCAPE_KEY)
     }
   }
 
-  function handleOutsideClick(): void {
-    if (closeOnOutsideClick) {
-      cancel(ModalCancelFrom.OUTSIDE_CLICK)
+  async function handleOutsideClick(): Promise<void> {
+    if (closeOnOutsideClick && isActiveModal()) {
+      await cancel(ModalCancelFrom.OUTSIDE_CLICK)
     }
   }
 
@@ -109,7 +137,7 @@
     show: () => void
     hide: () => void
     toggle: () => void
-    cancel: () => void
+    cancel: (_: ModalCancelFrom) => Promise<void>
   })
 
   onMount(() => {
@@ -118,6 +146,12 @@
       document.removeEventListener("keydown", handleKey)
     }
   })
+
+  onDestroy(() => {
+    if (visible) {
+      removeOverlay(modalId)
+    }
+  })
 </script>
 
 {#if inline}
@@ -145,7 +179,7 @@
         <div
           class="spectrum-Underlay is-open"
           on:mousedown|self={handleOutsideClick}
-          style="z-index:{zIndex || 999}"
+          style="z-index:{computedZIndex}"
         >
           <div
             class="background"
@@ -185,7 +219,7 @@
     overflow-x: hidden;
     background: transparent;
   }
-  .background {
+  .spectrum-Underlay .background {
     background: var(--modal-background, rgba(0, 0, 0, 0.75));
     opacity: 0.65;
     position: fixed;

package/src/Modal/ModalContent.svelte

@@ -58,7 +58,7 @@
   async function close(): Promise<void> {
     loading = true
     if (!onCancel || (await onCancel()) !== keepOpen) {
-      cancel(ModalCancelFrom.CANCEL_BUTTON)
+      await cancel(ModalCancelFrom.CANCEL_BUTTON)
     }
     loading = false
   }
@@ -153,7 +153,7 @@
         <Icon
           hoverable
           name="x"
-          on:click={() => cancel(ModalCancelFrom.CLOSE_BUTTON)}
+          on:click={async () => cancel(ModalCancelFrom.CLOSE_BUTTON)}
         />
       </div>
     {/if}

package/src/Modal/overlayStack.ts

@@ -0,0 +1,18 @@
+import { writable } from "svelte/store"
+
+export const BASE_Z_INDEX = 1001
+export const overlayStack = writable<string[]>([])
+
+export const addOverlay = (id: string) => {
+  overlayStack.update(stack => [...stack, id])
+}
+
+export const removeOverlay = (id: string) => {
+  overlayStack.update(stack => stack.filter(s => s !== id))
+}
+
+export const isActiveOverlay = (id: string): boolean => {
+  let stack: string[] = []
+  overlayStack.subscribe(s => (stack = s))()
+  return stack.length > 0 && stack[stack.length - 1] === id
+}

package/src/Popover/Popover.svelte

@@ -17,6 +17,7 @@
   } from "../Actions/positionDropdown"
   import { PopoverAlignment, type PopoverWidthMode } from "../constants"
   import Context from "../context"
+  import { type Readable } from "svelte/store"
 
   export let anchor: HTMLElement | undefined
   export let align: PopoverAlignment | `${PopoverAlignment}` =
@@ -47,9 +48,14 @@
   let blockPointerEvents = false
 
   // Portal library lacks types, so we have to type this as any even though it's
-  // actually a string
+  const popoverRoot = getContext<string>(Context.PopoverRoot)
+  const popoverPortalOverride = getContext(Context.PopoverPortalOverride) as
+    | Readable<HTMLElement | undefined>
+    | undefined
+
   $: target = (portalTarget ||
-    getContext(Context.PopoverRoot) ||
+    $popoverPortalOverride ||
+    popoverRoot ||
     ".spectrum") as any
   $: {
     // Disable pointer events for the initial part of the animation, because we

package/src/Tooltip/Context.svelte

@@ -2,12 +2,20 @@
   import Portal from "svelte-portal"
   import { getContext } from "svelte"
   import Context from "../context"
+  import { readable } from "svelte/store"
 
   export let anchor
   export let visible = false
   export let offset = 0
 
-  $: target = getContext(Context.PopoverRoot) || "#app"
+  const popoverRootCtx = getContext(Context.PopoverRoot)
+  const popoverRootStore =
+    popoverRootCtx &&
+    typeof popoverRootCtx === "object" &&
+    "subscribe" in popoverRootCtx
+      ? popoverRootCtx
+      : readable(popoverRootCtx || "#app")
+  $: target = $popoverRootStore || "#app"
 
   let hovering = false
   let tooltip

package/src/context.ts

@@ -21,9 +21,11 @@ declare module "svelte" {
 interface Module {
   Modal: "bbui-modal"
   PopoverRoot: "bbui-popover-root"
+  PopoverPortalOverride: "bbui-popover-portal-override"
 }
 
 export default {
   Modal: "bbui-modal",
   PopoverRoot: "bbui-popover-root",
+  PopoverPortalOverride: "bbui-popover-portal-override",
 } as Module

package/src/index.ts

@@ -70,6 +70,13 @@ export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
 export { default as Modal, type ModalAPI } from "./Modal/Modal.svelte"
 export { keepOpen, default as ModalContent } from "./Modal/ModalContent.svelte"
+export {
+  addOverlay,
+  removeOverlay,
+  isActiveOverlay,
+  overlayStack,
+  BASE_Z_INDEX,
+} from "./Modal/overlayStack"
 export { default as Notification } from "./Notification/Notification.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Pagination } from "./Pagination/Pagination.svelte"