@budibase/bbui 3.39.19 → 3.39.20

package/dist/bbui.mjs

@@ -45707,7 +45707,7 @@ function StatusLight(l, u) {
 var root_1$39 = /* @__PURE__ */ from_html("<img alt=\"Avatar\"/>"), root_2$25 = /* @__PURE__ */ from_html("<div> </div>");
 function Avatar(l, u) {
 	push$1(u, !1);
-	let f = /* @__PURE__ */ mutable_source(), p = /* @__PURE__ */ mutable_source(), m = new Map([
+	let f = /* @__PURE__ */ new Map([
 		["XXS", "--spectrum-alias-avatar-size-50"],
 		["XS", "--spectrum-alias-avatar-size-75"],
 		["S", "--spectrum-alias-avatar-size-200"],
@@ -45715,35 +45715,37 @@ function Avatar(l, u) {
 		["L", "--spectrum-alias-avatar-size-500"],
 		["XL", "--spectrum-alias-avatar-size-600"],
 		["XXL", "--spectrum-alias-avatar-size-700"]
-	]), v = prop(u, "size", 8, "M"), y = prop(u, "url", 8, ""), b = prop(u, "disabled", 8, !1), x = prop(u, "initials", 8, "JD"), S = prop(u, "color", 8, ""), w = "#3aab87", T = (l) => l?.length ? `hsl(${l[0].toLowerCase().charCodeAt(0) % 26 / 26 * 360}, 50%, 50%)` : "#3aab87", E = (l, u) => {
-		let f = `var(${m.get(l)})`;
-		return `width:${f}; height:${f}; font-size:${`calc(${f} / 2)`}; background:${u};`;
+	]), p = prop(u, "size", 8, "M"), m = prop(u, "url", 8, ""), v = prop(u, "disabled", 8, !1), y = prop(u, "initials", 8, "JD"), b = prop(u, "color", 8, ""), x = "#3aab87", S = /* @__PURE__ */ mutable_source(), w = /* @__PURE__ */ mutable_source(), T = (l) => l?.length ? `hsl(${l[0].toLowerCase().charCodeAt(0) % 26 / 26 * 360}, 50%, 50%)` : "#3aab87", E = (l, u) => {
+		let p = f.get(l);
+		if (!p) return `background:${u};`;
+		let m = `var(${p})`;
+		return `width:${m}; height:${m}; font-size:${`calc(${m} / 2)`}; background:${u};`;
 	};
-	legacy_pre_effect(() => (deep_read_state(S()), deep_read_state(x())), () => {
-		set(f, S() || T(x()));
-	}), legacy_pre_effect(() => (deep_read_state(v()), get$2(f)), () => {
-		set(p, E(v(), get$2(f)));
+	legacy_pre_effect(() => (deep_read_state(b()), deep_read_state(y())), () => {
+		set(S, b() || T(y()));
+	}), legacy_pre_effect(() => (deep_read_state(p()), get$2(S)), () => {
+		set(w, E(p(), get$2(S)));
 	}), legacy_pre_effect_reset(), init$1();
 	var D = comment(), O = first_child(D), k = (l) => {
 		var u = root_1$39();
-		let f;
-		template_effect((l, p, m) => {
-			f = set_class(u, 1, "spectrum-Avatar", null, f, l), set_attribute(u, "src", y()), set_style(u, `width: var(${p ?? ""}); height: var(${m ?? ""});`);
+		let y;
+		template_effect((l, f, p) => {
+			y = set_class(u, 1, "spectrum-Avatar", null, y, l), set_attribute(u, "src", m()), set_style(u, `width: var(${f ?? ""}); height: var(${p ?? ""});`);
 		}, [
-			() => ({ "is-disabled": b() }),
-			() => (deep_read_state(v()), untrack(() => m.get(v()))),
-			() => (deep_read_state(v()), untrack(() => m.get(v())))
+			() => ({ "is-disabled": v() }),
+			() => (deep_read_state(p()), untrack(() => f.get(p()))),
+			() => (deep_read_state(p()), untrack(() => f.get(p())))
 		]), append$1(l, u);
 	}, j = (l) => {
 		var u = root_2$25();
 		let f;
-		var m = child(u, !0);
+		var p = child(u, !0);
 		reset(u), template_effect((l) => {
-			f = set_class(u, 1, "spectrum-Avatar svelte-8hiuyi", null, f, l), set_style(u, get$2(p)), set_text(m, x() || "");
-		}, [() => ({ "is-disabled": b() })]), append$1(l, u);
+			f = set_class(u, 1, "spectrum-Avatar svelte-8hiuyi", null, f, l), set_style(u, get$2(w)), set_text(p, y() || "");
+		}, [() => ({ "is-disabled": v() })]), append$1(l, u);
 	};
 	if_block(O, (l) => {
-		y() ? l(k) : l(j, !1);
+		m() ? l(k) : l(j, !1);
 	}), append$1(l, D), pop();
 }
 //#endregion
@@ -51373,9 +51375,9 @@ var require_random_from_seed = /* @__PURE__ */ __commonJSMin(((l, u) => {
 }, isActiveOverlay = (l) => {
 	let u = [];
 	return overlayStack.subscribe((l) => u = l)(), u.length > 0 && u[u.length - 1] === l;
-}, drawerContainer = "drawer-container", openDrawers = writable([]), modal = writable(!1), resizable = writable(!0), drawerLeft = writable(null), drawerWidth = writable(null), observer, observe = () => {
+}, drawerContainer = "drawer-container", openDrawers = writable([]), modal = writable(!1), resizable = writable(!0), drawerLeft = writable(null), drawerWidth = writable(null), observer = null, observe = () => {
 	let l = document.getElementsByClassName(drawerContainer)[0];
-	if (observer || !l) return;
+	if (observer || !(l instanceof HTMLElement)) return;
 	observer = new ResizeObserver((l) => {
 		if (!l?.[0]) return;
 		let u = l[0].target.getBoundingClientRect();
@@ -51389,7 +51391,7 @@ var require_random_from_seed = /* @__PURE__ */ __commonJSMin(((l, u) => {
 function Drawer(l, u) {
 	let f = sanitize_slots(u);
 	push$1(u, !1);
-	let p = () => store_get(openDrawers, "$openDrawers", S), m = () => store_get(overlayStack, "$overlayStack", S), v = () => store_get(drawerLeft, "$drawerLeft", S), y = () => store_get(drawerWidth, "$drawerWidth", S), b = () => store_get(modal, "$modal", S), x = () => store_get(resizable, "$resizable", S), [S, w] = setup_stores(), T = /* @__PURE__ */ mutable_source(), E = /* @__PURE__ */ mutable_source(), D = /* @__PURE__ */ mutable_source(), O = /* @__PURE__ */ mutable_source(), k = prop(u, "title", 8, ""), j = prop(u, "forceModal", 8, !1), M = prop(u, "zIndex", 8, void 0), N = createEventDispatcher(), P = 11, F = /* @__PURE__ */ mutable_source(!1), L = (0, import_shortid.generate)(), R = (l, u, f, p, m) => {
+	let p = () => store_get(openDrawers, "$openDrawers", S), m = () => store_get(overlayStack, "$overlayStack", S), v = () => store_get(drawerLeft, "$drawerLeft", S), y = () => store_get(drawerWidth, "$drawerWidth", S), b = () => store_get(modal, "$modal", S), x = () => store_get(resizable, "$resizable", S), [S, w] = setup_stores(), T = prop(u, "title", 8, ""), E = prop(u, "forceModal", 8, !1), D = prop(u, "zIndex", 24, () => void 0), O = createEventDispatcher(), k = 11, j = /* @__PURE__ */ mutable_source(!1), M = (0, import_shortid.generate)(), N = /* @__PURE__ */ mutable_source(0), P = /* @__PURE__ */ mutable_source(-1), F = /* @__PURE__ */ mutable_source(BASE_Z_INDEX), L = /* @__PURE__ */ mutable_source(""), R = (l, u, f, p, m) => {
 		let v = `
       --scale-factor: ${W(l)};
       --spacing: 11px;
@@ -51402,10 +51404,10 @@ function Drawer(l, u) {
     `;
 	};
 	function z() {
-		get$2(F) || (j() && (modal.set(!0), resizable.set(!1)), observe(), set(F, !0), N("drawerShow", L), openDrawers.update((l) => [...l, L]), addOverlay(L));
+		get$2(j) || (E() && (modal.set(!0), resizable.set(!1)), observe(), set(j, !0), O("drawerShow", M), openDrawers.update((l) => [...l, M]), addOverlay(M));
 	}
 	function B() {
-		get$2(F) && (set(F, !1), N("drawerHide", L), openDrawers.update((l) => l.filter((l) => l !== L)), removeOverlay(L), unobserve());
+		get$2(j) && (set(j, !1), O("drawerHide", M), openDrawers.update((l) => l.filter((l) => l !== M)), removeOverlay(M), unobserve());
 	}
 	setContext("drawer", {
 		hide: B,
@@ -51413,7 +51415,7 @@ function Drawer(l, u) {
 		modal,
 		resizable
 	});
-	let V = (l) => l < .5 ? 2 * l * l : 1 - (-2 * l + 2) ** 2 / 2, H = () => ({
+	let V = (l) => l < .5 ? 2 * l * l : 1 - (-2 * l + 2) ** 2 / 2, H = (l) => ({
 		duration: 260,
 		css: (l) => {
 			let u = V(l);
@@ -51422,20 +51424,20 @@ function Drawer(l, u) {
           opacity: ${u};
         `;
 		}
-	}), U = () => ({
+	}), U = (l) => ({
 		duration: 260,
 		css: (l) => `opacity: ${V(l)};`
 	}), W = (l) => 1 - (1 - 1 / (l * l + 1)) * .1;
 	onDestroy(() => {
-		get$2(F) && B();
+		get$2(j) && B();
 	}), legacy_pre_effect(() => p(), () => {
-		set(T, p().length - p().indexOf(L) - 1);
+		set(N, p().length - p().indexOf(M) - 1);
 	}), legacy_pre_effect(() => m(), () => {
-		set(E, m().indexOf(L));
-	}), legacy_pre_effect(() => (deep_read_state(M()), get$2(E), BASE_Z_INDEX), () => {
-		set(D, M() ?? (get$2(E) === -1 ? 1001 : 1001 + get$2(E)));
-	}), legacy_pre_effect(() => (get$2(T), v(), y(), b(), get$2(D)), () => {
-		set(O, R(get$2(T), v(), y(), b(), get$2(D)));
+		set(P, m().indexOf(M));
+	}), legacy_pre_effect(() => (deep_read_state(D()), get$2(P), BASE_Z_INDEX), () => {
+		set(F, D() ?? (get$2(P) === -1 ? 1001 : 1001 + get$2(P)));
+	}), legacy_pre_effect(() => (get$2(N), v(), y(), b(), get$2(F)), () => {
+		set(L, R(get$2(N), v(), y(), b(), get$2(F)));
 	}), legacy_pre_effect_reset();
 	var K = {
 		show: z,
@@ -51450,18 +51452,18 @@ function Drawer(l, u) {
 				let y;
 				var S = sibling(v, 2);
 				let w;
-				var E = child(S), j = child(E), M = (l) => {
+				var E = child(S), D = child(E), O = (l) => {
 					var f = comment();
 					slot(first_child(f), u, "title", {}, null), append$1(l, f);
-				}, N = (l) => {
+				}, k = (l) => {
 					var u = root_4$6(), f = child(u, !0);
-					reset(u), template_effect(() => set_text(f, k() || "Bindings")), append$1(l, u);
+					reset(u), template_effect(() => set_text(f, T() || "Bindings")), append$1(l, u);
 				};
-				if_block(j, (l) => {
-					untrack(() => f.title) ? l(M) : l(N, !1);
+				if_block(D, (l) => {
+					untrack(() => f.title) ? l(O) : l(k, !1);
 				});
-				var P = sibling(j, 2), F = child(P);
-				Button(F, {
+				var j = sibling(D, 2), M = child(j);
+				Button(M, {
 					secondary: !0,
 					quiet: !0,
 					$$events: { click: B },
@@ -51470,9 +51472,9 @@ function Drawer(l, u) {
 					},
 					$$slots: { default: !0 }
 				});
-				var L = sibling(F, 2);
-				slot(L, u, "buttons", {}, null);
-				var R = sibling(L, 2), z = (l) => {
+				var P = sibling(M, 2);
+				slot(P, u, "buttons", {}, null);
+				var R = sibling(P, 2), z = (l) => {
 					ActionButton(l, {
 						size: "M",
 						quiet: !0,
@@ -51496,27 +51498,27 @@ function Drawer(l, u) {
 				};
 				if_block(R, (l) => {
 					x() && l(z);
-				}), reset(P), reset(E);
+				}), reset(j), reset(E);
 				var V = sibling(E, 2);
 				slot(V, u, "body", {}, null);
 				var W = sibling(V, 2);
 				let K;
 				reset(S), reset(m), template_effect((l, u, f) => {
-					y = set_class(v, 1, "underlay svelte-1vcgmkq", null, y, l), set_style(v, `z-index: ${get$2(D) - 1}`), w = set_class(S, 1, "drawer svelte-1vcgmkq", null, w, u), set_style(S, get$2(O)), K = set_class(W, 1, "overlay svelte-1vcgmkq", null, K, f);
+					y = set_class(v, 1, "underlay svelte-1vcgmkq", null, y, l), set_style(v, `z-index: ${get$2(F) - 1}`), w = set_class(S, 1, "drawer svelte-1vcgmkq", null, w, u), set_style(S, get$2(L)), K = set_class(W, 1, "overlay svelte-1vcgmkq", null, K, f);
 				}, [
 					() => ({ hidden: !b() }),
 					() => ({
-						stacked: get$2(T) > 0,
+						stacked: get$2(N) > 0,
 						modal: b()
 					}),
-					() => ({ hidden: b() || get$2(T) === 0 })
+					() => ({ hidden: b() || get$2(N) === 0 })
 				]), transition(3, v, () => U), transition(3, S, () => H), append$1(l, m);
 			},
 			$$slots: { default: !0 }
 		});
 	};
 	if_block(J, (l) => {
-		get$2(F) && l(Y);
+		get$2(j) && l(Y);
 	}), append$1(l, q), bind_prop(u, "show", z), bind_prop(u, "hide", B);
 	var X = pop(K);
 	return w(), X;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.39.19",
+  "version": "3.39.20",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -105,5 +105,5 @@
       }
     }
   },
-  "gitHead": "b4c900a2cf83659df74f4373aeea3a0140164476"
+  "gitHead": "20794a65fa61d7d5fe90dd923aebc037a68af4d4"
 }

package/src/Avatar/Avatar.svelte

@@ -1,7 +1,9 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/avatar/dist/index-vars.css"
 
-  let sizes = new Map([
+  type AvatarSize = "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL"
+
+  let sizes = new Map<AvatarSize, string>([
     ["XXS", "--spectrum-alias-avatar-size-50"],
     ["XS", "--spectrum-alias-avatar-size-75"],
     ["S", "--spectrum-alias-avatar-size-200"],
@@ -10,28 +12,35 @@
     ["XL", "--spectrum-alias-avatar-size-600"],
     ["XXL", "--spectrum-alias-avatar-size-700"],
   ])
-  export let size = "M"
-  export let url = ""
-  export let disabled = false
-  export let initials = "JD"
-  export let color = ""
+  export let size: AvatarSize = "M"
+  export let url: string = ""
+  export let disabled: boolean = false
+  export let initials: string = "JD"
+  export let color: string = ""
+
+  const defaultColor = "#3aab87"
 
-  const DefaultColor = "#3aab87"
+  let avatarColor: string
+  let style: string
 
   $: avatarColor = color || getColor(initials)
   $: style = getStyle(size, avatarColor)
 
-  const getColor = initials => {
+  const getColor = (initials: string): string => {
     if (!initials?.length) {
-      return DefaultColor
+      return defaultColor
     }
     const code = initials[0].toLowerCase().charCodeAt(0)
     const hue = ((code % 26) / 26) * 360
     return `hsl(${hue}, 50%, 50%)`
   }
 
-  const getStyle = (sizeKey, color) => {
-    const size = `var(${sizes.get(sizeKey)})`
+  const getStyle = (sizeKey: AvatarSize, color: string): string => {
+    const sizeValue = sizes.get(sizeKey)
+    if (!sizeValue) {
+      return `background:${color};`
+    }
+    const size = `var(${sizeValue})`
     const fontSize = `calc(${size} / 2)`
     return `width:${size}; height:${size}; font-size:${fontSize}; background:${color};`
   }

package/src/Drawer/Drawer.svelte

@@ -1,25 +1,34 @@
-<script context="module">
-  import { get, writable } from "svelte/store"
+<script lang="ts" context="module">
+  import { get, writable, type Writable } from "svelte/store"
 
   // Observe this class name if possible in order to know how to size the
   // drawer. If this doesn't exist we'll use a fixed size.
   const drawerContainer = "drawer-container"
 
   // Context level stores to keep drawers in sync
-  const openDrawers = writable([])
-  const modal = writable(false)
-  const resizable = writable(true)
-  const drawerLeft = writable(null)
-  const drawerWidth = writable(null)
+  const openDrawers = writable<string[]>([])
+  const modal = writable<boolean>(false)
+  const resizable = writable<boolean>(true)
+  const drawerLeft = writable<number | null>(null)
+  const drawerWidth = writable<number | null>(null)
 
   // Resize observer to keep track of size changes
-  let observer
+  let observer: ResizeObserver | null = null
+
+  interface DrawerContext {
+    hide: () => void
+    show: () => void
+    modal: Writable<boolean>
+    resizable: Writable<boolean>
+  }
 
   // Starts observing the target node to watching to size changes.
   // Invoked when the first drawer of a chain is rendered.
   const observe = () => {
-    const target = document.getElementsByClassName(drawerContainer)[0]
-    if (observer || !target) {
+    const target = document.getElementsByClassName(drawerContainer)[0] as
+      | Element
+      | undefined
+    if (observer || !(target instanceof HTMLElement)) {
       return
     }
     observer = new ResizeObserver(entries => {
@@ -56,9 +65,10 @@
   }
 </script>
 
-<script>
+<script lang="ts">
   import { generate } from "shortid"
   import { createEventDispatcher, onDestroy, setContext } from "svelte"
+  import type { TransitionConfig } from "svelte/transition"
   import Portal from "svelte-portal"
   import ActionButton from "../ActionButton/ActionButton.svelte"
   import Button from "../Button/Button.svelte"
@@ -70,15 +80,24 @@
     BASE_Z_INDEX,
   } from "../Modal/overlayStack"
 
-  export let title = ""
-  export let forceModal = false
-  export let zIndex = undefined
+  interface DrawerEvents {
+    drawerShow: string
+    drawerHide: string
+  }
+
+  export let title: string = ""
+  export let forceModal: boolean = false
+  export let zIndex: number | undefined = undefined
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<DrawerEvents>()
   const spacing = 11
 
-  let visible = false
-  let drawerId = generate()
+  let visible: boolean = false
+  let drawerId: string = generate()
+  let depth: number = 0
+  let stackIndex: number = -1
+  let computedZIndex: number = BASE_Z_INDEX
+  let style: string = ""
 
   $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
   $: stackIndex = $overlayStack.indexOf(drawerId)
@@ -86,7 +105,13 @@
     zIndex ?? (stackIndex === -1 ? BASE_Z_INDEX : BASE_Z_INDEX + stackIndex)
   $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal, computedZIndex)
 
-  const getStyle = (depth, left, width, modal, zIndex) => {
+  const getStyle = (
+    depth: number,
+    left: number | null,
+    width: number | null,
+    modal: boolean,
+    zIndex: number | undefined
+  ): string => {
     let style = `
       --scale-factor: ${getScaleFactor(depth)};
       --spacing: ${spacing}px;
@@ -105,7 +130,7 @@
     `
   }
 
-  export function show() {
+  export function show(): void {
     if (visible) {
       return
     }
@@ -120,7 +145,7 @@
     addOverlay(drawerId)
   }
 
-  export function hide() {
+  export function hide(): void {
     if (!visible) {
       return
     }
@@ -131,23 +156,23 @@
     unobserve()
   }
 
-  setContext("drawer", {
+  setContext<DrawerContext>("drawer", {
     hide,
     show,
     modal,
     resizable,
   })
 
-  const easeInOutQuad = x => {
+  const easeInOutQuad = (x: number): number => {
     return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
   }
 
   // Use a custom svelte transition here because the built-in slide
   // transition has a horrible overshoot
-  const drawerSlide = () => {
+  const drawerSlide = (_node: Element): TransitionConfig => {
     return {
       duration: 260,
-      css: t => {
+      css: (t: number) => {
         const f = easeInOutQuad(t)
         const yOffset = (1 - f) * 200
         return `
@@ -160,16 +185,16 @@
 
   // Custom fade transition because the default svelte one doesn't work any more
   // with svelte 4
-  const drawerFade = () => {
+  const drawerFade = (_node: Element): TransitionConfig => {
     return {
       duration: 260,
-      css: t => {
+      css: (t: number) => {
         return `opacity: ${easeInOutQuad(t)};`
       },
     }
   }
 
-  const getScaleFactor = depth => {
+  const getScaleFactor = (depth: number): number => {
     // Quadratic function approaching a limit of 1 as depth tends to infinity
     const lim = 1 - 1 / (depth * depth + 1)
     // Scale drawers between 1 and 0.9 as depth approaches infinity

package/src/Drawer/DrawerContent.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let padding = true
+<script lang="ts">
+  export let padding: boolean = true
 </script>
 
 <div class="drawer-contents" class:padding>