@budibase/bbui 3.3.1 → 3.3.2

package/dist/bbui.mjs

@@ -3694,25 +3694,9 @@ class StatusLight extends SvelteComponent {
     });
   }
 }
-const Strategies = {
-  StartToStart: "StartToStart",
-  // e.g. left alignment
-  EndToEnd: "EndToEnd",
-  // e.g. right alignment
-  StartToEnd: "StartToEnd",
-  // e.g. right-outside alignment
-  EndToStart: "EndToStart",
-  // e.g. left-outside alignment
-  MidPoint: "MidPoint",
-  // centers relative to midpoints
-  ScreenEdge: "ScreenEdge"
-  // locks to screen edge
-};
 function positionDropdown(f, u) {
   let p, m = u;
-  const v = () => {
-    y(m);
-  }, y = (w) => {
+  const v = () => y(m), y = (w) => {
     const {
       anchor: T,
       align: D,
@@ -3732,8 +3716,8 @@ function positionDropdown(f, u) {
       maxHeight: L,
       minWidth: N ? $.width : P,
       maxWidth: N ? $.width : R,
-      left: null,
-      top: null
+      left: 0,
+      top: 0
     };
     if (typeof Z == "function")
       oe = Z($, ee, {
@@ -3745,54 +3729,53 @@ function positionDropdown(f, u) {
         !oe.maxHeight && Y && (oe.maxHeight = Ie);
       }, se = (Ie) => {
         switch (Ie) {
-          case Strategies.StartToStart:
+          case "StartToStart":
           default:
             oe.left = $.left;
             break;
-          case Strategies.EndToEnd:
+          case "EndToEnd":
             oe.left = $.right - ee.width;
             break;
-          case Strategies.StartToEnd:
+          case "StartToEnd":
             oe.left = $.right + W;
             break;
-          case Strategies.EndToStart:
+          case "EndToStart":
             oe.left = $.left - ee.width - W;
             break;
-          case Strategies.MidPoint:
+          case "MidPoint":
             oe.left = $.left + $.width / 2 - ee.width / 2;
             break;
-          case Strategies.ScreenEdge:
+          case "ScreenEdge":
             oe.left = te - ee.width - pe;
             break;
         }
       }, xe = (Ie) => {
         switch (Ie) {
-          case Strategies.StartToStart:
+          case "StartToStart":
             oe.top = $.top, de(he - $.top - pe);
             break;
-          case Strategies.EndToEnd:
+          case "EndToEnd":
             oe.top = $.bottom - ee.height, de($.bottom - pe);
             break;
-          case Strategies.StartToEnd:
+          case "StartToEnd":
           default:
             oe.top = $.bottom + W, de(he - $.bottom - pe);
             break;
-          case Strategies.EndToStart:
+          case "EndToStart":
             oe.top = $.top - ee.height - W, de($.top - pe);
             break;
-          case Strategies.MidPoint:
+          case "MidPoint":
             oe.top = $.top + $.height / 2 - ee.height / 2;
             break;
-          case Strategies.ScreenEdge:
+          case "ScreenEdge":
             oe.top = he - ee.height - pe, de(he - 2 * pe);
             break;
         }
       };
-      se(D === "right" ? Strategies.EndToEnd : D === "right-outside" || D === "right-context-menu" ? Strategies.StartToEnd : D === "left-outside" || D === "left-context-menu" ? Strategies.EndToStart : D === "center" ? Strategies.MidPoint : Strategies.StartToStart), D === "right-outside" || D === "left-outside" ? xe(Strategies.MidPoint) : D === "right-context-menu" || D === "left-context-menu" ? (xe(Strategies.StartToStart), oe.top -= 5) : xe(Strategies.StartToEnd), we() && (D === "left" ? se(Strategies.EndToEnd) : D === "right-outside" && se(Strategies.EndToStart)), be() && (K ? (xe(Strategies.MidPoint), be() && xe(Strategies.ScreenEdge), se(Strategies.StartToEnd), we() && se(Strategies.EndToStart)) : xe(D === "left-outside" || D === "right-outside" ? Strategies.ScreenEdge : Strategies.EndToStart));
+      se(D === "right" ? "EndToEnd" : D === "right-outside" || D === "right-context-menu" ? "StartToEnd" : D === "left-outside" || D === "left-context-menu" ? "EndToStart" : D === "center" ? "MidPoint" : "StartToStart"), D === "right-outside" || D === "left-outside" ? xe("MidPoint") : D === "right-context-menu" || D === "left-context-menu" ? (xe("StartToStart"), oe.top && (oe.top -= 5)) : xe("StartToEnd"), we() && (D === "left" ? se("EndToEnd") : D === "right-outside" && se("EndToStart")), be() && (K ? (xe("MidPoint"), be() && xe("ScreenEdge"), se("StartToEnd"), we() && se("EndToStart")) : xe(D === "left-outside" || D === "right-outside" ? "ScreenEdge" : "EndToStart"));
     }
-    Object.entries(oe).forEach(([we, be]) => {
-      be != null ? f.style[we] = `${be.toFixed(0)}px` : f.style[we] = null;
-    });
+    for (const [we, be] of Object.entries(oe))
+      f.style.setProperty(we, be ? `${be}px` : null);
   }, k = (w) => {
     m = w, p && p.disconnect();
     const { anchor: T } = w;
@@ -4131,7 +4114,7 @@ const animationDuration = 260, clickOutside_function = () => {
 function instance$1S(f, u, p) {
   let m, { $$slots: v = {}, $$scope: y } = u;
   const k = createEventDispatcher();
-  let { anchor: w } = u, { align: T = "right" } = u, { portalTarget: D } = u, { minWidth: L } = u, { maxWidth: R } = u, { maxHeight: P } = u, { open: N = !1 } = u, { useAnchorWidth: W = !1 } = u, { dismissible: Z = !0 } = u, { offset: Y = 4 } = u, { customHeight: K } = u, { animate: $ = !0 } = u, { customZindex: ee } = u, { handlePostionUpdate: te } = u, { showPopover: he = !0 } = u, { clickOutsideOverride: pe = !1 } = u, { resizable: oe = !0 } = u, { wrap: we = !1 } = u, be, de = !1;
+  let { anchor: w } = u, { align: T = "right" } = u, { portalTarget: D = void 0 } = u, { minWidth: L = void 0 } = u, { maxWidth: R = void 0 } = u, { maxHeight: P = void 0 } = u, { open: N = !1 } = u, { useAnchorWidth: W = !1 } = u, { dismissible: Z = !0 } = u, { offset: Y = 4 } = u, { customHeight: K = void 0 } = u, { animate: $ = !0 } = u, { customZindex: ee = void 0 } = u, { handlePostionUpdate: te = void 0 } = u, { showPopover: he = !0 } = u, { clickOutsideOverride: pe = !1 } = u, { resizable: oe = !0 } = u, { wrap: we = !1 } = u, be, de = !1;
   const se = () => {
     k("open"), p(0, N = !0);
   }, xe = () => {
@@ -4145,10 +4128,9 @@ function instance$1S(f, u, p) {
         qe = Be === w, Be = Be.parentNode;
       qe && ge.stopPropagation(), xe();
     }
-  };
-  function le(ge) {
+  }, le = (ge) => {
     pe && N && ge.key === "Escape" && xe();
-  }
+  };
   onDestroy(() => {
     clearTimeout(be);
   });
@@ -6915,13 +6897,13 @@ function create_fragment$1K(f) {
   };
 }
 function instance$1J(f, u, p) {
-  let { value: m = null } = u, { id: v = null } = u, { placeholder: y = "Choose an option or type" } = u, { disabled: k = !1 } = u, { readonly: w = !1 } = u, { options: T = [] } = u, { getOptionLabel: D = (be) => be } = u, { getOptionValue: L = (be) => be } = u;
+  let { value: m = void 0 } = u, { id: v = void 0 } = u, { placeholder: y = "Choose an option or type" } = u, { disabled: k = !1 } = u, { readonly: w = !1 } = u, { options: T = [] } = u, { getOptionLabel: D = (be) => `${be}` } = u, { getOptionValue: L = (be) => `${be}` } = u;
   const R = createEventDispatcher();
   let P = !1, N = !1, W;
   const Z = (be) => {
     R("change", be), p(8, P = !1);
   }, Y = (be) => {
-    const de = be.target.value;
+    const de = be.currentTarget.value;
     R("type", de), Z(de);
   }, K = (be) => {
     R("pick", be), Z(be);
@@ -32338,15 +32320,15 @@ function create_fragment$1q(f) {
   };
 }
 function instance$1p(f, u, p) {
-  let m, { value: v = !1 } = u, { id: y = null } = u, { text: k = null } = u, { disabled: w = !1 } = u, { readonly: T = !1 } = u, { size: D } = u, { indeterminate: L = !1 } = u;
+  let m, { value: v = !1 } = u, { id: y = void 0 } = u, { text: k = void 0 } = u, { disabled: w = !1 } = u, { readonly: T = !1 } = u, { size: D = "M" } = u, { indeterminate: L = !1 } = u;
   const R = createEventDispatcher(), P = (N) => {
-    R("change", N.target.checked);
+    R("change", N.currentTarget.checked);
   };
   return f.$$set = (N) => {
     "value" in N && p(0, v = N.value), "id" in N && p(1, y = N.id), "text" in N && p(2, k = N.text), "disabled" in N && p(3, w = N.disabled), "readonly" in N && p(4, T = N.readonly), "size" in N && p(8, D = N.size), "indeterminate" in N && p(5, L = N.indeterminate);
   }, f.$$.update = () => {
     f.$$.dirty & /*size*/
-    256 && p(6, m = `spectrum-Checkbox--size${D || "M"}`);
+    256 && p(6, m = `spectrum-Checkbox--size${D}`);
   }, [v, y, k, w, T, L, m, P, D];
 }
 class Checkbox extends SvelteComponent {
@@ -48490,7 +48472,7 @@ function create_fragment$16(f) {
   };
 }
 function instance$15(f, u, p) {
-  let { direction: m = "vertical" } = u, { value: v = [] } = u, { options: y = [] } = u, { disabled: k = !1 } = u, { readonly: w = !1 } = u, { getOptionLabel: T = (N) => N } = u, { getOptionValue: D = (N) => N } = u;
+  let { direction: m = "vertical" } = u, { value: v = [] } = u, { options: y = [] } = u, { disabled: k = !1 } = u, { readonly: w = !1 } = u, { getOptionLabel: T = (N) => `${N}` } = u, { getOptionValue: D = (N) => N } = u;
   const L = createEventDispatcher(), R = (N) => {
     v.includes(N) ? L("change", v.filter((W) => W !== N)) : L("change", [...v, N]);
   }, P = (N) => R(N);
@@ -58592,7 +58574,93 @@ class InternalRenderer extends SvelteComponent {
     super(), init$1(this, u, instance$p, create_fragment$p, safe_not_equal, { value: 1 });
   }
 }
-var global$1 = typeof global < "u" ? global : typeof self < "u" ? self : typeof window < "u" ? window : {}, _defineProp;
+var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function getDefaultExportFromCjs(f) {
+  return f && f.__esModule && Object.prototype.hasOwnProperty.call(f, "default") ? f.default : f;
+}
+function createCommonjsModule(f) {
+  var u = { exports: {} };
+  return f(u, u.exports), u.exports;
+}
+var indexOf$1 = [].indexOf, indexof = function(f, u) {
+  if (indexOf$1)
+    return f.indexOf(u);
+  for (var p = 0; p < f.length; ++p)
+    if (f[p] === u)
+      return p;
+  return -1;
+}, vmBrowserify = createCommonjsModule(function(module, exports) {
+  var iFrame = null, Object_keys = function(f) {
+    if (Object.keys)
+      return Object.keys(f);
+    var u = [];
+    for (var p in f)
+      u.push(p);
+    return u;
+  }, forEach = function(f, u) {
+    if (f.forEach)
+      return f.forEach(u);
+    for (var p = 0; p < f.length; p++)
+      u(f[p], p, f);
+  }, defineProp = function() {
+    try {
+      return Object.defineProperty({}, "_", {}), function(f, u, p) {
+        Object.defineProperty(f, u, { writable: !0, enumerable: !1, configurable: !0, value: p });
+      };
+    } catch {
+      return function(u, p, m) {
+        u[p] = m;
+      };
+    }
+  }(), globals = ["Array", "Boolean", "Date", "Error", "EvalError", "Function", "Infinity", "JSON", "Math", "NaN", "Number", "Object", "RangeError", "ReferenceError", "RegExp", "String", "SyntaxError", "TypeError", "URIError", "decodeURI", "decodeURIComponent", "encodeURI", "encodeURIComponent", "escape", "eval", "isFinite", "isNaN", "parseFloat", "parseInt", "undefined", "unescape", "window", "document"];
+  function Context() {
+  }
+  Context.prototype = {};
+  var Script = exports.Script = function(f) {
+    if (!(this instanceof Script))
+      return new Script(f);
+    iFrame || ((iFrame = document.createElement("iframe")).setAttribute("sandbox", "allow-scripts allow-same-origin"), iFrame.style || (iFrame.style = {}), iFrame.style.display = "none", document.body.appendChild(iFrame)), this.code = f, this.iFrame = iFrame;
+  };
+  Script.prototype.runInContext = function(f) {
+    if (!(f instanceof Context))
+      throw new TypeError("needs a 'context' argument.");
+    var u = this.iFrame.contentWindow, p = Object_keys(u);
+    let m = [];
+    var v = u.eval, y = u.execScript;
+    forEach(Object_keys(f), function(T) {
+      if (u[T] !== void 0) {
+        let D = { key: T, value: u[T] };
+        m.push(D);
+      }
+      u[T] = f[T];
+    }), !v && y && (y.call(u, "null"), v = u.eval);
+    var k = Object_keys(u), w = v.call(u, this.code);
+    return forEach(Object_keys(u), function(T) {
+      (T in f || indexof(k, T) === -1) && (indexof(globals, T) === -1 ? f[T] = u[T] : defineProp(f, T, u[T])), indexof(p, T) === -1 && delete u[T];
+    }), forEach(m, function(T) {
+      u[T.key] = T.value;
+    }), w;
+  }, Script.prototype.runInThisContext = function() {
+    return eval(this.code);
+  }, Script.prototype.runInNewContext = function(f) {
+    var u = Script.createContext(f), p = this.runInContext(u);
+    return forEach(Object_keys(u), function(m) {
+      f[m] = u[m];
+    }), p;
+  }, forEach(Object_keys(Script.prototype), function(f) {
+    exports[f] = Script[f] = function(u) {
+      var p = Script(u);
+      return p[f].apply(p, [].slice.call(arguments, 1));
+    };
+  }), exports.createScript = function(f) {
+    return exports.Script(f);
+  }, exports.createContext = Script.createContext = function(f) {
+    var u = new Context();
+    return typeof f == "object" && forEach(Object_keys(f), function(p) {
+      u[p] = f[p];
+    }), u;
+  };
+}), global$1 = typeof global < "u" ? global : typeof self < "u" ? self : typeof window < "u" ? window : {}, _defineProp;
 function Object_keys(f) {
   if (Object.keys)
     return Object.keys(f);
@@ -58633,6 +58701,9 @@ function otherRunInContext(f, u) {
   var p = Object_keys(global$1);
   return p.push("with (this.__ctx__){return eval(this.__code__)}"), Function.apply(null, p).apply({ __code__: f, __ctx__: u });
 }
+function createScript(f) {
+  return new Script(f);
+}
 function createContext(f) {
   if (isContext(f))
     return f;
@@ -58641,6 +58712,12 @@ function createContext(f) {
     u[p] = f[p];
   }), u;
 }
+function runInContext(f, u, p) {
+  return new Script(f).runInContext(u, p);
+}
+function runInThisContext(f, u) {
+  return new Script(f).runInThisContext(u);
+}
 function isContext(f) {
   return f instanceof Context;
 }
@@ -58675,7 +58752,7 @@ Context.prototype = {}, Script.prototype.runInContext = function(f) {
     f[m] = u[m];
   }), p;
 };
-var _indexOf = [].indexOf;
+var vm = { runInContext, isContext, createContext, createScript, Script, runInThisContext, runInNewContext }, _indexOf = [].indexOf;
 function indexOf(f, u) {
   if (_indexOf)
     return f.indexOf(u);
@@ -58684,14 +58761,6 @@ function indexOf(f, u) {
       return p;
   return -1;
 }
-var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function getDefaultExportFromCjs(f) {
-  return f && f.__esModule && Object.prototype.hasOwnProperty.call(f, "default") ? f.default : f;
-}
-function createCommonjsModule(f) {
-  var u = { exports: {} };
-  return f(u, u.exports), u.exports;
-}
 var utils$3 = createCommonjsModule(function(f, u) {
   u.__esModule = !0, u.extend = k, u.indexOf = function(L, R) {
     for (var P = 0, N = L.length; P < N; P++)
@@ -65358,9 +65427,9 @@ var rng_1 = Object.defineProperty({ default: _default }, "__esModule", { value:
   function R(P) {
     return P && P.__esModule ? P : { default: P };
   }
-}), uuid_1 = createCommonjsModule(function(f) {
+}), uuid$1 = commonjsBrowser, uuid_1 = createCommonjsModule(function(f) {
   f.exports.uuid = function() {
-    return commonjsBrowser.v4();
+    return uuid$1.v4();
   };
 }), lib = { array: array$1, code, collection, comparison: comparison$1, html: html_1, i18n, inflection, match, math: math$1, misc, number: number$1, object: object$1, path: path_1, regex: regex$2, string: string$1, url: url_1, uuid: uuid_1 }, handlebarsHelpers = createCommonjsModule(function(f) {
   f.exports = function(u, p) {
@@ -69527,12 +69596,13 @@ function findHBSBlocks(f) {
   return p ?? [];
 }
 function browserJSSetup() {
-  setJSRunner((f, u) => {
-    createContext(u);
-    const p = runInNewContext(frontendWrapJS(f), u, { timeout: 1e3 });
-    if (p.error)
-      throw new UserScriptError(p.error);
-    return p.result;
+  const f = isTest() ? vm : vmBrowserify;
+  setJSRunner((u, p) => {
+    f.createContext(p);
+    const m = frontendWrapJS(u), v = f.runInNewContext(m, p);
+    if (v.error)
+      throw new UserScriptError(v.error);
+    return v.result;
   });
 }
 function defaultJSSetup() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "b4b42fa71fec8b50f97ef3662395b22d12571a46"
+  "gitHead": "5ffd630cc8ca4b533986ee1d830404a496365385"
 }

package/src/Actions/{position_dropdown.js → position_dropdown.ts}

@@ -8,27 +8,52 @@
 
 // Strategies are defined as [Popover]To[Anchor].
 // They can apply for both horizontal and vertical alignment.
-const Strategies = {
-  StartToStart: "StartToStart", // e.g. left alignment
-  EndToEnd: "EndToEnd", // e.g. right alignment
-  StartToEnd: "StartToEnd", // e.g. right-outside alignment
-  EndToStart: "EndToStart", // e.g. left-outside alignment
-  MidPoint: "MidPoint", // centers relative to midpoints
-  ScreenEdge: "ScreenEdge", // locks to screen edge
+type Strategy =
+  | "StartToStart"
+  | "EndToEnd"
+  | "StartToEnd"
+  | "EndToStart"
+  | "MidPoint"
+  | "ScreenEdge"
+
+export interface Styles {
+  maxHeight?: number
+  minWidth?: number
+  maxWidth?: number
+  offset?: number
+  left: number
+  top: number
 }
 
-export default function positionDropdown(element, opts) {
-  let resizeObserver
+export type UpdateHandler = (
+  anchorBounds: DOMRect,
+  elementBounds: DOMRect,
+  styles: Styles
+) => Styles
+
+interface Opts {
+  anchor?: HTMLElement
+  align: string
+  maxHeight?: number
+  maxWidth?: number
+  minWidth?: number
+  useAnchorWidth: boolean
+  offset: number
+  customUpdate?: UpdateHandler
+  resizable: boolean
+  wrap: boolean
+}
+
+export default function positionDropdown(element: HTMLElement, opts: Opts) {
+  let resizeObserver: ResizeObserver
   let latestOpts = opts
 
   // We need a static reference to this function so that we can properly
   // clean up the scroll listener.
-  const scrollUpdate = () => {
-    updatePosition(latestOpts)
-  }
+  const scrollUpdate = () => updatePosition(latestOpts)
 
   // Updates the position of the dropdown
-  const updatePosition = opts => {
+  const updatePosition = (opts: Opts) => {
     const {
       anchor,
       align,
@@ -51,12 +76,12 @@ export default function positionDropdown(element, opts) {
     const winWidth = window.innerWidth
     const winHeight = window.innerHeight
     const screenOffset = 8
-    let styles = {
+    let styles: Styles = {
       maxHeight,
       minWidth: useAnchorWidth ? anchorBounds.width : minWidth,
       maxWidth: useAnchorWidth ? anchorBounds.width : maxWidth,
-      left: null,
-      top: null,
+      left: 0,
+      top: 0,
     }
 
     // Ignore all our logic for custom logic
@@ -81,67 +106,67 @@ export default function positionDropdown(element, opts) {
       }
 
       // Applies a dynamic max height constraint if appropriate
-      const applyMaxHeight = height => {
+      const applyMaxHeight = (height: number) => {
         if (!styles.maxHeight && resizable) {
           styles.maxHeight = height
         }
       }
 
       // Applies the X strategy to our styles
-      const applyXStrategy = strategy => {
+      const applyXStrategy = (strategy: Strategy) => {
         switch (strategy) {
-          case Strategies.StartToStart:
+          case "StartToStart":
           default:
             styles.left = anchorBounds.left
             break
-          case Strategies.EndToEnd:
+          case "EndToEnd":
             styles.left = anchorBounds.right - elementBounds.width
             break
-          case Strategies.StartToEnd:
+          case "StartToEnd":
             styles.left = anchorBounds.right + offset
             break
-          case Strategies.EndToStart:
+          case "EndToStart":
             styles.left = anchorBounds.left - elementBounds.width - offset
             break
-          case Strategies.MidPoint:
+          case "MidPoint":
             styles.left =
               anchorBounds.left +
               anchorBounds.width / 2 -
               elementBounds.width / 2
             break
-          case Strategies.ScreenEdge:
+          case "ScreenEdge":
             styles.left = winWidth - elementBounds.width - screenOffset
             break
         }
       }
 
       // Applies the Y strategy to our styles
-      const applyYStrategy = strategy => {
+      const applyYStrategy = (strategy: Strategy) => {
         switch (strategy) {
-          case Strategies.StartToStart:
+          case "StartToStart":
             styles.top = anchorBounds.top
             applyMaxHeight(winHeight - anchorBounds.top - screenOffset)
             break
-          case Strategies.EndToEnd:
+          case "EndToEnd":
             styles.top = anchorBounds.bottom - elementBounds.height
             applyMaxHeight(anchorBounds.bottom - screenOffset)
             break
-          case Strategies.StartToEnd:
+          case "StartToEnd":
           default:
             styles.top = anchorBounds.bottom + offset
             applyMaxHeight(winHeight - anchorBounds.bottom - screenOffset)
             break
-          case Strategies.EndToStart:
+          case "EndToStart":
             styles.top = anchorBounds.top - elementBounds.height - offset
             applyMaxHeight(anchorBounds.top - screenOffset)
             break
-          case Strategies.MidPoint:
+          case "MidPoint":
             styles.top =
               anchorBounds.top +
               anchorBounds.height / 2 -
               elementBounds.height / 2
             break
-          case Strategies.ScreenEdge:
+          case "ScreenEdge":
             styles.top = winHeight - elementBounds.height - screenOffset
             applyMaxHeight(winHeight - 2 * screenOffset)
             break
@@ -150,81 +175,78 @@ export default function positionDropdown(element, opts) {
 
       // Determine X strategy
       if (align === "right") {
-        applyXStrategy(Strategies.EndToEnd)
+        applyXStrategy("EndToEnd")
       } else if (align === "right-outside" || align === "right-context-menu") {
-        applyXStrategy(Strategies.StartToEnd)
+        applyXStrategy("StartToEnd")
       } else if (align === "left-outside" || align === "left-context-menu") {
-        applyXStrategy(Strategies.EndToStart)
+        applyXStrategy("EndToStart")
       } else if (align === "center") {
-        applyXStrategy(Strategies.MidPoint)
+        applyXStrategy("MidPoint")
       } else {
-        applyXStrategy(Strategies.StartToStart)
+        applyXStrategy("StartToStart")
       }
 
       // Determine Y strategy
       if (align === "right-outside" || align === "left-outside") {
-        applyYStrategy(Strategies.MidPoint)
+        applyYStrategy("MidPoint")
       } else if (
         align === "right-context-menu" ||
         align === "left-context-menu"
       ) {
-        applyYStrategy(Strategies.StartToStart)
-        styles.top -= 5 // Manual adjustment for action menu padding
+        applyYStrategy("StartToStart")
+        if (styles.top) {
+          styles.top -= 5 // Manual adjustment for action menu padding
+        }
       } else {
-        applyYStrategy(Strategies.StartToEnd)
+        applyYStrategy("StartToEnd")
       }
 
       // Handle screen overflow
       if (doesXOverflow()) {
         // Swap left to right
         if (align === "left") {
-          applyXStrategy(Strategies.EndToEnd)
+          applyXStrategy("EndToEnd")
         }
         // Swap right-outside to left-outside
         else if (align === "right-outside") {
-          applyXStrategy(Strategies.EndToStart)
+          applyXStrategy("EndToStart")
         }
       }
       if (doesYOverflow()) {
         // If wrapping, lock to the bottom of the screen and also reposition to
         // the side to not block the anchor
         if (wrap) {
-          applyYStrategy(Strategies.MidPoint)
+          applyYStrategy("MidPoint")
           if (doesYOverflow()) {
-            applyYStrategy(Strategies.ScreenEdge)
+            applyYStrategy("ScreenEdge")
           }
-          applyXStrategy(Strategies.StartToEnd)
+          applyXStrategy("StartToEnd")
           if (doesXOverflow()) {
-            applyXStrategy(Strategies.EndToStart)
+            applyXStrategy("EndToStart")
           }
         }
         // Othewise invert as normal
         else {
           // If using an outside strategy then lock to the bottom of the screen
           if (align === "left-outside" || align === "right-outside") {
-            applyYStrategy(Strategies.ScreenEdge)
+            applyYStrategy("ScreenEdge")
           }
           // Otherwise flip above
           else {
-            applyYStrategy(Strategies.EndToStart)
+            applyYStrategy("EndToStart")
           }
         }
       }
     }
 
-    // Apply styles
-    Object.entries(styles).forEach(([style, value]) => {
-      if (value != null) {
-        element.style[style] = `${value.toFixed(0)}px`
-      } else {
-        element.style[style] = null
-      }
-    })
+    for (const [key, value] of Object.entries(styles)) {
+      element.style.setProperty(key, value ? `${value}px` : null)
+    }
   }
 
   // The actual svelte action callback which creates observers on the relevant
   // DOM elements
-  const update = newOpts => {
+  const update = (newOpts: Opts) => {
     latestOpts = newOpts
 
     // Cleanup old state

package/src/Form/Core/Checkbox.svelte

@@ -1,22 +1,23 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/checkbox/dist/index-vars.css"
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import type { ChangeEventHandler } from "svelte/elements"
 
   export let value = false
-  export let id = null
-  export let text = null
+  export let id: string | undefined = undefined
+  export let text: string | undefined = undefined
   export let disabled = false
   export let readonly = false
-  export let size
+  export let size: "S" | "M" | "L" | "XL" = "M"
   export let indeterminate = false
 
   const dispatch = createEventDispatcher()
-  const onChange = event => {
-    dispatch("change", event.target.checked)
+  const onChange: ChangeEventHandler<HTMLInputElement> = event => {
+    dispatch("change", event.currentTarget.checked)
   }
 
-  $: sizeClass = `spectrum-Checkbox--size${size || "M"}`
+  $: sizeClass = `spectrum-Checkbox--size${size}`
 </script>
 
 <label

package/src/Form/Core/CheckboxGroup.svelte

@@ -1,19 +1,24 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts" generics="O, V">
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import "@spectrum-css/radio/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let direction = "vertical"
-  export let value = []
-  export let options = []
+  export let direction: "horizontal" | "vertical" = "vertical"
+  export let value: V[] = []
+  export let options: O[] = []
   export let disabled = false
   export let readonly = false
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option: O) => `${option}`
+  export let getOptionValue = (option: O) => option as unknown as V
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ change: V[] }>()
 
-  const onChange = optionValue => {
+  const onChange = (optionValue: V) => {
     if (!value.includes(optionValue)) {
       dispatch("change", [...value, optionValue])
     } else {

package/src/Form/Core/Combobox.svelte

@@ -1,4 +1,10 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+</script>
+
+<script lang="ts" generics="O">
+  import type { ChangeEventHandler } from "svelte/elements"
+
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
@@ -6,33 +12,38 @@
   import clickOutside from "../../Actions/click_outside"
   import Popover from "../../Popover/Popover.svelte"
 
-  export let value = null
-  export let id = null
+  export let value: string | undefined = undefined
+  export let id: string | undefined = undefined
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let options: O[] = []
+  export let getOptionLabel = (option: O) => `${option}`
+  export let getOptionValue = (option: O) => `${option}`
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{
+    change: string
+    blur: void
+    type: string
+    pick: string
+  }>()
 
   let open = false
   let focus = false
   let anchor
 
-  const selectOption = value => {
+  const selectOption = (value: string) => {
     dispatch("change", value)
     open = false
   }
 
-  const onType = e => {
-    const value = e.target.value
+  const onType: ChangeEventHandler<HTMLInputElement> = e => {
+    const value = e.currentTarget.value
     dispatch("type", value)
     selectOption(value)
   }
 
-  const onPick = value => {
+  const onPick = (value: string) => {
     dispatch("pick", value)
     selectOption(value)
   }

package/src/Popover/Popover.svelte

@@ -1,28 +1,33 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
+  // @ts-expect-error no types for the version of svelte-portal we're on.
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
-  import positionDropdown from "../Actions/position_dropdown"
+  import positionDropdown, {
+    type UpdateHandler,
+  } from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
   import Context from "../context"
+  import type { KeyboardEventHandler } from "svelte/elements"
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ open: void; close: void }>()
 
-  export let anchor
-  export let align = "right"
-  export let portalTarget
-  export let minWidth
-  export let maxWidth
-  export let maxHeight
+  export let anchor: HTMLElement
+  export let align: "left" | "right" | "left-outside" | "right-outside" =
+    "right"
+  export let portalTarget: string | undefined = undefined
+  export let minWidth: number | undefined = undefined
+  export let maxWidth: number | undefined = undefined
+  export let maxHeight: number | undefined = undefined
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 4
-  export let customHeight
+  export let customHeight: string | undefined = undefined
   export let animate = true
-  export let customZindex
-  export let handlePostionUpdate
+  export let customZindex: string | undefined = undefined
+  export let handlePostionUpdate: UpdateHandler | undefined = undefined
   export let showPopover = true
   export let clickOutsideOverride = false
   export let resizable = true
@@ -30,7 +35,7 @@
 
   const animationDuration = 260
 
-  let timeout
+  let timeout: ReturnType<typeof setTimeout>
   let blockPointerEvents = false
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
@@ -65,13 +70,13 @@
     }
   }
 
-  const handleOutsideClick = e => {
+  const handleOutsideClick = (e: MouseEvent) => {
     if (clickOutsideOverride) {
       return
     }
     if (open) {
       // Stop propagation if the source is the anchor
-      let node = e.target
+      let node = e.target as Node | null
       let fromAnchor = false
       while (!fromAnchor && node && node.parentNode) {
         fromAnchor = node === anchor
@@ -86,7 +91,7 @@
     }
   }
 
-  function handleEscape(e) {
+  const handleEscape: KeyboardEventHandler<HTMLDivElement> = e => {
     if (!clickOutsideOverride) {
       return
     }