@budibase/bbui 3.18.14 → 3.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.18.14",
+  "version": "3.19.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "da28258ca1bcc8260d29f82069545761429eeea7"
+  "gitHead": "72863c719173848d3128cbef9556a0af09708c20"
 }

package/src/Form/Core/File.svelte

@@ -42,7 +42,7 @@
   }
 
   function clearFile() {
-    dispatch("change", undefined)
+    if (!disabled) dispatch("change", undefined)
   }
 </script>
 
@@ -59,7 +59,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="field">
   {#if statusText}
-    <div class="file-view status">
+    <div class="file-view status" class:disabled>
       <div class="filename">{statusText}</div>
       {#if !disabled || (allowClear === true && disabled)}
         <div class="delete-button" on:click={clearFile}>
@@ -68,7 +68,7 @@
       {/if}
     </div>
   {:else if value}
-    <div class="file-view">
+    <div class="file-view" class:disabled>
       {#if previewUrl}
         <img class="preview" alt="" src={previewUrl} />
       {/if}
@@ -84,7 +84,7 @@
       {/if}
       {#if !disabled || (allowClear === true && disabled)}
         <div class="delete-button" on:click={clearFile}>
-          <Icon name="x" size="XS" />
+          <Icon name="x" size="XS" {disabled} />
         </div>
       {/if}
     </div>
@@ -107,6 +107,9 @@
     border-radius: var(--spectrum-global-dimension-size-50);
     padding: 0px var(--spectrum-alias-item-padding-m);
   }
+  .file-view.disabled {
+    color: var(--spectrum-alias-text-color-disabled);
+  }
   .file-view.status {
     background-color: var(--spectrum-global-color-gray-100);
   }

package/src/Form/Input.svelte

@@ -5,7 +5,7 @@
 
   export let value: any = undefined
   export let label: string | undefined = undefined
-  export let labelPosition: "above" = "above"
+  export let labelPosition: "above" | "left" = "above"
   export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false

package/src/Modal/Modal.svelte

@@ -15,6 +15,7 @@
   import Portal from "svelte-portal"
   import Context from "../context"
   import { ModalCancelFrom } from "../constants"
+  import { generate } from "shortid"
 
   export let fixed: boolean = false
   export let inline: boolean = false
@@ -23,7 +24,9 @@
   export let zIndex: number = 1001
 
   // Ensure any popovers inside this modal are rendered inside this modal
-  setContext(Context.PopoverRoot, ".spectrum-Modal")
+  // Unique ids are required to ensure nested modals are parented correctly
+  const uniqueId = generate()
+  setContext(Context.PopoverRoot, `.spectrum-Modal-${uniqueId}`)
 
   const dispatch = createEventDispatcher<{
     show: void
@@ -108,7 +111,11 @@
 
 {#if inline}
   {#if visible}
-    <div use:focusModal bind:this={modal} class="spectrum-Modal inline is-open">
+    <div
+      use:focusModal
+      bind:this={modal}
+      class={`spectrum-Modal spectrum-Modal-${uniqueId} inline is-open`}
+    >
       <slot />
     </div>
   {/if}
@@ -146,7 +153,7 @@
               <div
                 use:focusModal
                 bind:this={modal}
-                class="spectrum-Modal is-open"
+                class={`spectrum-Modal spectrum-Modal-${uniqueId} is-open`}
                 in:fly={{ y: 30, duration: 200 }}
                 out:fly|local={{ y: 30, duration: 200 }}
               >
@@ -172,12 +179,12 @@
   }
   .background {
     background: var(--modal-background, rgba(0, 0, 0, 0.75));
+    opacity: 0.65;
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100vw;
-    opacity: 0.65;
     pointer-events: none;
   }