@budibase/bbui 3.38.5 → 3.39.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.38.5",
+  "version": "3.39.16",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -105,5 +105,5 @@
       }
     }
   },
-  "gitHead": "5795ec6c95812463cba1d8cede8295f6c2b915cb"
+  "gitHead": "b1c87febc51bc49767bb6438e75a06038fea8fbf"
 }

package/src/Drawer/Drawer.svelte

@@ -299,16 +299,17 @@
     gap: var(--spacing-xl);
   }
   .text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-xs);
+    flex: 1 1 auto;
+    min-width: 0;
     font-weight: 500;
     color: var(--spectrum-global-color-gray-900);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .buttons {
     display: flex;
+    flex: 0 0 auto;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;

package/src/Form/Core/Combobox.svelte

@@ -42,7 +42,7 @@
     return String(value).toLowerCase()
   }
 
-  $: query = value || ""
+  $: if (!focus) query = value || ""
   $: filteredOptions =
     !query.trim() || !options?.length
       ? options
@@ -59,12 +59,13 @@
   }
 
   const onType: FormEventHandler<HTMLInputElement> = e => {
-    const value = e.currentTarget.value
-    dispatch("type", value)
-    selectOption(value, false)
+    query = e.currentTarget.value
+    dispatch("type", query)
+    open = true
   }
 
   const onPick = (value: string) => {
+    query = value
     dispatch("pick", value)
     selectOption(value)
   }
@@ -87,10 +88,13 @@
       on:focus={() => (focus = true)}
       on:blur={() => {
         focus = false
+        if (query !== (value || "")) {
+          dispatch("change", query)
+        }
         dispatch("blur")
       }}
       on:input={onType}
-      value={value || ""}
+      value={query}
       placeholder={placeholder || ""}
       {disabled}
       {readonly}
@@ -135,6 +139,7 @@
             role="option"
             aria-selected="true"
             tabindex="0"
+            on:mousedown|preventDefault
             on:click={() => onPick(getOptionValue(option))}
           >
             <span class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span

package/src/Form/Core/DatePicker/Calendar.svelte

@@ -82,7 +82,12 @@
     const base = value || now
     dispatch(
       "change",
-      base.year(date.year()).month(date.month()).date(date.date())
+      base
+        .year(date.year())
+        .month(date.month())
+        .date(date.date())
+        .second(0)
+        .millisecond(0)
     )
   }
 

package/src/Form/Core/DatePicker/DatePickerPopoverContents.svelte

@@ -20,7 +20,7 @@
   $: showTime = enableTime || timeOnly
 
   const setToNow = () => {
-    const now = dayjs()
+    const now = dayjs().second(0).millisecond(0)
     calendar?.setDate(now)
     handleChange(now)
   }

package/src/Form/Core/DatePicker/TimePicker.svelte

@@ -16,7 +16,10 @@
     }
 
     const [hour, minute] = e.target.value.split(":").map(x => parseInt(x))
-    dispatch("change", (value || dayjs()).hour(hour).minute(minute))
+    dispatch(
+      "change",
+      (value || dayjs()).hour(hour).minute(minute).second(0).millisecond(0)
+    )
   }
 </script>
 

package/src/Form/Core/Picker.svelte

@@ -238,6 +238,7 @@
   {disabled}
   class:is-open={open}
   class:is-readonly={readonly}
+  class:auto-width={autoWidth}
   aria-haspopup="listbox"
   on:click={onClick}
   bind:this={button}
@@ -444,6 +445,10 @@
     width: 100%;
     box-shadow: none;
   }
+  .spectrum-Picker.auto-width {
+    width: auto;
+    max-width: 100%;
+  }
   .spectrum-Picker.has-border {
     border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 6px;

package/src/Form/Core/Switch.svelte

@@ -7,6 +7,7 @@
   export let text: string | null = null
   export let disabled: boolean = false
   export let noPadding: boolean = false
+  export let noMargin: boolean = false
 
   const dispatch = createEventDispatcher()
   const onChange = (event: Event) => {
@@ -15,7 +16,11 @@
   }
 </script>
 
-<div class="spectrum-Switch spectrum-Switch--emphasized" class:noPadding>
+<div
+  class="spectrum-Switch spectrum-Switch--emphasized"
+  class:noPadding
+  class:noMargin
+>
   <input
     checked={value}
     {disabled}
@@ -40,4 +45,7 @@
     padding: 0;
     margin: 0;
   }
+  .spectrum-Switch.noMargin {
+    --spectrum-switch-cursor-hit-x: 0;
+  }
 </style>

package/src/Form/Core/TextField.svelte

@@ -8,11 +8,12 @@
   export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
-  export let id = null
+  export let id: string | null = null
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
-  export let align: "left" | "right" | "center" | undefined = undefined
+  export let align: "left" | "right" | "center" | "justify" | undefined =
+    undefined
   export let autofocus: boolean | null = false
   export let autocomplete: FullAutoFill | boolean | null | undefined = undefined
 
@@ -67,6 +68,12 @@
     if (type === "bigint") {
       return "numeric"
     }
+    if (type === "url") {
+      return "url"
+    }
+    if (type === "email") {
+      return "email"
+    }
     return type === "number" ? "decimal" : "text"
   }
 

package/src/Form/Toggle.svelte

@@ -12,6 +12,7 @@
   export let error: string | undefined = undefined
   export let helpText: string | undefined = undefined
   export let noPadding: boolean = false
+  export let noMargin: boolean = false
 
   const dispatch = createEventDispatcher()
   const onChange = (e: CustomEvent<boolean>) => {
@@ -23,6 +24,7 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <Switch
     {disabled}
+    {noMargin}
     {text}
     {noPadding}
     value={value ?? undefined}

package/src/Tooltip/AbsTooltip.svelte

@@ -11,6 +11,7 @@
   export let fixed: boolean = false
   export let color: string | undefined = undefined
   export let noWrap: boolean = false
+  export let offset: number = 0
 
   let wrapper: HTMLElement | undefined
   let hovered = false
@@ -44,15 +45,15 @@
     // Determine where to render tooltip based on position prop
     if (position === TooltipPosition.Top) {
       left = bounds.left + bounds.width / 2
-      top = bounds.top
+      top = bounds.top + offset
     } else if (position === TooltipPosition.Right) {
-      left = bounds.left + bounds.width
+      left = bounds.left + bounds.width + offset
       top = bounds.top + bounds.height / 2
     } else if (position === TooltipPosition.Bottom) {
       left = bounds.left + bounds.width / 2
-      top = bounds.top + bounds.height
+      top = bounds.top + bounds.height + offset
     } else if (position === TooltipPosition.Left) {
-      left = bounds.left
+      left = bounds.left - offset
       top = bounds.top + bounds.height / 2
     }
   }