@budibase/bbui 3.33.5 → 3.34.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.33.5",
+  "version": "3.34.0",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "26158d6d86644688158dba007ef84bde7277e488"
+  "gitHead": "3d114e7a465302f870781c5c266d2a36c144723f"
 }

package/src/Drawer/Drawer.svelte

@@ -66,6 +66,7 @@
 
   export let title = ""
   export let forceModal = false
+  export let zIndex = undefined
 
   const dispatch = createEventDispatcher()
   const spacing = 11
@@ -74,12 +75,13 @@
   let drawerId = generate()
 
   $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
-  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal)
+  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal, zIndex)
 
-  const getStyle = (depth, left, width, modal) => {
+  const getStyle = (depth, left, width, modal, zIndex) => {
     let style = `
       --scale-factor: ${getScaleFactor(depth)};
       --spacing: ${spacing}px;
+      ${zIndex != null ? `z-index: ${zIndex};` : ""}
     `
     // Most modal styles are handled by class names
     if (modal || left == null || width == null) {
@@ -178,6 +180,7 @@
         class="underlay"
         class:hidden={!$modal}
         transition:drawerFade|local
+        style={zIndex != null ? `z-index: ${zIndex - 1}` : undefined}
       ></div>
       <div
         class="drawer"

package/src/Form/Combobox.svelte

@@ -14,6 +14,8 @@
   export let placeholder = "Choose an option or type"
   export let options: O[] = []
   export let helpText: string | undefined = undefined
+  export let required: boolean | undefined = false
+
   const extractProperty = (item: O, property: string): string => {
     if (item && typeof item === "object" && property in item) {
       const record = item as Record<string, unknown>
@@ -52,7 +54,7 @@
   }
 </script>
 
-<Field {helpText} {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error} {required}>
   <Combobox
     {disabled}
     {value}

package/src/Form/Core/EnvDropdown.svelte

@@ -15,6 +15,8 @@
   export let updateOnChange: boolean = true
   export let align: string | undefined = undefined
   export let autofocus: boolean = false
+  export let autocomplete: HTMLInputElement["autocomplete"] | undefined =
+    undefined
   export let variables
   export let showModal: () => void
   export let environmentVariablesEnabled
@@ -129,6 +131,7 @@
       style={align ? `text-align: ${align};` : ""}
       class="spectrum-Textfield-input"
       inputmode={type === "number" ? "decimal" : "text"}
+      {autocomplete}
     />
   </div>
   {#if open}

package/src/Form/Core/Picker.svelte

@@ -445,6 +445,9 @@
     border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 6px;
   }
+  .spectrum-Picker--quiet {
+    padding: 0 8px;
+  }
   .spectrum-Picker-label.auto-width {
     margin-right: var(--spacing-xs);
   }

package/src/Form/EnvDropdown.svelte

@@ -9,18 +9,21 @@
   export let labelPosition: LabelPosition = "above"
   export let placeholder: string | undefined = undefined
   export let type: EnvDropdownType = "text"
-  export let required: boolean = false
   export let description: string | undefined = undefined
   export let disabled = false
   export let readonly = false
   export let error: string | undefined = undefined
   export let updateOnChange = true
   export let autofocus: boolean = false
+  export let autocomplete: HTMLInputElement["autocomplete"] | undefined =
+    undefined
   export let variables: { name: string }[] = []
   export let showModal: () => void
   export let helpText: string | undefined = undefined
   export let environmentVariablesEnabled: boolean = false
   export let handleUpgradePanel: () => void = () => {}
+  export let required: boolean | undefined = false
+
   const dispatch = createEventDispatcher()
   const onChange = (e: any) => {
     value = e.detail
@@ -37,6 +40,7 @@
     {placeholder}
     {type}
     {autofocus}
+    {autocomplete}
     {variables}
     {showModal}
     {environmentVariablesEnabled}

package/src/Form/Field.svelte

@@ -12,7 +12,7 @@
   export let description: string | undefined = undefined
   export let helpText: string | undefined = undefined
   export let tooltip: string | undefined = undefined
-  export let required: boolean = false
+  export let required: boolean | undefined = false
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>

package/src/Form/Select.svelte

@@ -50,8 +50,8 @@
   export let loading: boolean | undefined = false
   export let searchPlaceholder: string | undefined = undefined
   export let hideChevron: boolean = false
+  export let required: boolean | undefined = false
   export let wrapText: boolean = false
-  export let required: boolean = false
   export let description: string | undefined = undefined
 
   const dispatch = createEventDispatcher()