@vuu-ui/vuu-ui-controls 0.8.10-debug → 0.8.11-debug

package/esm/index.js

@@ -3,8 +3,8 @@ import { useId as useId4 } from "@vuu-ui/vuu-layout";
 import { Input } from "@salt-ds/core";
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback26,
-  useRef as useRef24
+  useCallback as useCallback27,
+  useRef as useRef25
 } from "react";
 
 // src/common-hooks/collectionProvider.tsx
@@ -172,15 +172,13 @@ function useResizeObserver(ref, dimensions2, onResize, reportInitialSize = false
 }
 
 // src/common-hooks/selectionTypes.ts
+var isSingleSelection = (s) => s === void 0 || s === "default" || s === "deselectable";
+var isMultiSelection = (s) => s === "multiple" || (s == null ? void 0 : s.startsWith("extended")) === true;
 var selectionIsDisallowed = (selection) => selection === "none";
 var allowMultipleSelection = (selectionStrategy, specialKey = false) => selectionStrategy === "multiple" || selectionStrategy === "multiple-special-key" && specialKey;
 var deselectionIsAllowed = (selection) => selection !== "none" && selection !== "default";
-var hasSelection = (selected) => {
-  return Array.isArray(selected) ? selected.length > 0 : selected !== null && selected !== void 0;
-};
-var getFirstSelectedItem = (selected) => {
-  return Array.isArray(selected) ? selected[0] : selected;
-};
+var hasSelection = (selected) => selected !== void 0 && selected.length > 0;
+var getFirstSelectedItem = (selected) => selected[0];
 
 // src/common-hooks/useCollectionItems.ts
 import { useCallback as useCallback3, useMemo, useRef as useRef3, useState as useState2, isValidElement as isValidElement3 } from "react";
@@ -285,7 +283,7 @@ var sourceItems = (source, options) => {
     } else {
       return source.map(
         (item, index) => {
-          var _a, _b;
+          var _a2, _b;
           return {
             childNodes: sourceItems(
               item.childNodes,
@@ -294,7 +292,7 @@ var sourceItems = (source, options) => {
             description: item.description,
             expanded: item.expanded,
             value: item,
-            label: (_b = (_a = options == null ? void 0 : options.itemToString) == null ? void 0 : _a.call(options, item)) != null ? _b : itemToString(item)
+            label: (_b = (_a2 = options == null ? void 0 : options.itemToString) == null ? void 0 : _a2.call(options, item)) != null ? _b : itemToString(item)
           };
         }
       );
@@ -389,8 +387,8 @@ var getDefaultFilterRegex = (value) => new RegExp(`(${escapeRegExp(leftTrim(valu
 var getDefaultFilter = (inputValue = "", getFilterRegex = getDefaultFilterRegex) => (itemValue = "") => Boolean(itemValue.length) && Boolean(inputValue.length) && itemValue.match(getFilterRegex(inputValue)) !== null;
 
 // src/list/common-hooks/utils/isSelected.ts
-function isSelected(selected, item) {
-  const isSelected2 = Array.isArray(selected) ? selected.includes(item.id) : selected === item.id;
+function isSelected(selectedId, item) {
+  const isSelected2 = Array.isArray(selectedId) ? selectedId.includes(item.id) : selectedId === item.id;
   return isSelected2;
 }
 
@@ -463,14 +461,14 @@ var useCollectionItems = ({
   // revealSelected = false,
   source
 }) => {
-  var _a;
+  var _a2;
   const { getItemId } = options;
   const [, forceUpdate] = useState2(null);
   const inheritedCollectionHook = useCollection();
   const dataRef = useRef3([]);
   const flattenedDataRef = useRef3([]);
   const EMPTY_COLLECTION = useMemo(() => [], []);
-  const filterPattern = useRef3((_a = options.filterPattern) != null ? _a : "");
+  const filterPattern = useRef3((_a2 = options.filterPattern) != null ? _a2 : "");
   const {
     getFilterRegex = getDefaultFilterRegex,
     noChildrenLabel,
@@ -482,13 +480,13 @@ var useCollectionItems = ({
   const addMetadataToItems = useCallback3(
     (items, indexer, level = 1, path = "", results = [], flattenedCollection2 = [], flattenedSource2 = []) => {
       items.forEach((item, i, all) => {
-        var _a2, _b;
+        var _a3, _b;
         const isCollapsibleHeader = item.header && options.collapsibleHeaders;
         const isNonCollapsibleGroupNode = item.childNodes && options.collapsibleHeaders === false;
         const isLeaf3 = !item.childNodes || item.childNodes.length === 0;
         const nonCollapsible = isNonCollapsibleGroupNode || isLeaf3 && !isCollapsibleHeader;
         const childPath = path ? `${path}.${i}` : `item-${i}`;
-        const id = (_a2 = item.id) != null ? _a2 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
+        const id = (_a3 = item.id) != null ? _a3 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
         const expanded = nonCollapsible ? void 0 : (_b = item.expanded) != null ? _b : isExpanded2();
         const normalisedItem = {
           ...item,
@@ -601,8 +599,8 @@ var useCollectionItems = ({
     (id, target = collectionItems) => {
       const sourceWithId = target.find(
         (i) => {
-          var _a2;
-          return i.id === id || ((_a2 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a2.length) && isParentPath(i.id, id);
+          var _a3;
+          return i.id === id || ((_a3 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a3.length) && isParentPath(i.id, id);
         }
       );
       if ((sourceWithId == null ? void 0 : sourceWithId.id) === id) {
@@ -614,15 +612,26 @@ var useCollectionItems = ({
     },
     [flattenedSource, collectionItems]
   );
+  const indexOfItemById = useCallback3(
+    (id, target = collectionItems) => {
+      const sourceWithId = target.find(
+        (i) => {
+          var _a3;
+          return i.id === id || ((_a3 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a3.length) && isParentPath(i.id, id);
+        }
+      );
+      const idx = sourceWithId ? dataRef.current.indexOf(sourceWithId) : -1;
+      if (idx !== -1) {
+        return idx;
+      }
+      throw Error(`useCollectionData indexOfItemById, id ${id} not found `);
+    },
+    [collectionItems]
+  );
   const toCollectionItem = useCallback3(
     (item) => {
       const collectionItem = flattenedDataRef.current.find(
-        (i) => (
-          // const collectionItem = collectionItemsRef.current.find((i) =>
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
-          isValidElement3(i.value) ? i.label === item : i.value === item
-        )
+        (i) => isValidElement3(i.value) ? i.label === item : i.value === item
       );
       if (collectionItem) {
         return collectionItem;
@@ -658,9 +667,9 @@ var useCollectionItems = ({
       if (Array.isArray(selectedCollectionItem)) {
         return selectedCollectionItem.map((i) => i.id);
       } else if (selectedCollectionItem) {
-        return selectedCollectionItem.id;
+        return [selectedCollectionItem.id];
       } else {
-        return null;
+        return [];
       }
     },
     [itemToCollectionItem]
@@ -740,6 +749,7 @@ var useCollectionItems = ({
     expandGroupItem,
     // why not toggle, or just rely on setdata ?
     setFilterPattern,
+    indexOfItemById,
     itemById,
     itemToId,
     toCollectionItem,
@@ -756,7 +766,11 @@ import { Children as Children2, cloneElement as cloneElement2, forwardRef, useRe
 
 // src/dropdown/useDropdownBase.ts
 import { useControlled as useControlled2, useForkRef } from "@salt-ds/core";
-import { useCallback as useCallback4, useRef as useRef5, useState as useState3 } from "react";
+import {
+  useCallback as useCallback4,
+  useRef as useRef5,
+  useState as useState3
+} from "react";
 
 // src/dropdown/useClickAway.ts
 import { useEffect as useEffect3, useRef as useRef4 } from "react";
@@ -774,16 +788,16 @@ var useClickAway = ({
   useEffect3(() => {
     const [clickHandler, escapeKeyHandler] = isOpen ? [
       (evt) => {
-        var _a, _b;
+        var _a2, _b;
         const targetElement = evt.target;
-        if (!((_a = popperRef.current) == null ? void 0 : _a.contains(targetElement)) && !((_b = rootRef.current) == null ? void 0 : _b.contains(targetElement))) {
-          onClose();
+        if (!((_a2 = popperRef.current) == null ? void 0 : _a2.contains(targetElement)) && !((_b = rootRef.current) == null ? void 0 : _b.contains(targetElement))) {
+          onClose("click-away");
         }
       },
       (e) => {
         if (e.key === "Escape") {
           if (openRef.current) {
-            onClose();
+            onClose("Escape");
             e.stopPropagation();
           }
         }
@@ -820,7 +834,7 @@ var useDropdownBase = ({
   rootRef,
   width
 }) => {
-  var _a;
+  var _a2;
   const justFocused = useRef5(null);
   const popperRef = useRef5(null);
   const popperCallbackRef = useCallback4((element) => {
@@ -833,16 +847,19 @@ var useDropdownBase = ({
     state: "isOpen"
   });
   const [popup, setPopup] = useState3({
-    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
+    width: (_a2 = popupWidthProp != null ? popupWidthProp : width) != null ? _a2 : 0
   });
   const showDropdown = useCallback4(() => {
     setIsOpen(true);
     onOpenChange == null ? void 0 : onOpenChange(true);
   }, [onOpenChange, setIsOpen]);
-  const hideDropdown = useCallback4(() => {
-    setIsOpen(false);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange, setIsOpen]);
+  const hideDropdown = useCallback4(
+    (reason) => {
+      setIsOpen(false);
+      onOpenChange == null ? void 0 : onOpenChange(false, reason);
+    },
+    [onOpenChange, setIsOpen]
+  );
   useClickAway({
     popperRef,
     rootRef,
@@ -874,12 +891,15 @@ var useDropdownBase = ({
   );
   const handleKeydown = useCallback4(
     (evt) => {
-      if ((evt.key === "Tab" || evt.key === "Escape") && isOpen) {
+      if (
+        /* evt.key === "Tab" || */
+        evt.key === "Escape" && isOpen
+      ) {
         if (evt.key === "Escape") {
           evt.stopPropagation();
           evt.preventDefault();
         }
-        hideDropdown();
+        hideDropdown(evt.key);
       } else if (openKeys.includes(evt.key) && !isOpen) {
         evt.preventDefault();
         showDropdown();
@@ -889,6 +909,23 @@ var useDropdownBase = ({
     },
     [hideDropdown, isOpen, onKeyDownProp, openKeys, showDropdown]
   );
+  const handleBlur = useCallback4(
+    (evt) => {
+      var _a3;
+      console.log("useDropdownBase blur", {
+        popperRef: popperRef.current,
+        relatedTarget: evt.relatedTarget
+      });
+      if (isOpen) {
+        if ((_a3 = popperRef.current) == null ? void 0 : _a3.contains(evt.relatedTarget)) {
+        } else {
+          console.log("hide dropdown");
+          hideDropdown("blur");
+        }
+      }
+    },
+    [hideDropdown, isOpen]
+  );
   const fullWidth = fullWidthProp != null ? fullWidthProp : false;
   const measurements2 = fullWidth ? WidthOnly : NO_OBSERVER;
   useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
@@ -900,6 +937,7 @@ var useDropdownBase = ({
     onClick: disabled || openOnFocus ? void 0 : handleTriggerToggle,
     onFocus: handleTriggerFocus,
     role: "listbox",
+    onBlur: handleBlur,
     onKeyDown: disabled ? void 0 : handleKeydown,
     style: { width: fullWidth ? void 0 : width }
   };
@@ -907,7 +945,7 @@ var useDropdownBase = ({
     id: componentId,
     width: popup.width
   };
-  const popupComponentRef = useForkRef(popperCallbackRef, popperRef);
+  const popupComponentRef = useForkRef(popperCallbackRef, popupComponent.ref);
   return {
     componentProps: dropdownComponentProps,
     popupComponentRef,
@@ -924,6 +962,7 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var classBase = "vuuDropdown";
 var DropdownBase = forwardRef(
   function Dropdown({
+    PopupProps,
     "aria-labelledby": ariaLabelledByProp,
     children,
     className: classNameProp,
@@ -936,7 +975,7 @@ var DropdownBase = forwardRef(
     onOpenChange,
     openKeys,
     openOnFocus,
-    placement = "below",
+    placement = "below-full-width",
     popupWidth,
     width,
     ...htmlAttributes
@@ -1000,13 +1039,21 @@ var DropdownBase = forwardRef(
         className: cx(className2, `${classBase}-popup-component`),
         id: id2,
         ref: popupComponentRef,
-        width: ownWidth != null ? ownWidth : width2
+        width: placement.endsWith("full-width") ? "100%" : ownWidth != null ? ownWidth : width2
       });
     };
     const ref = useForkRef2(rootRef, forwardedRef);
     return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className, id: idProp, ref, children: [
       getTriggerComponent(),
-      isOpen && /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(Popup, { anchorElement: rootRef, placement, children: getPopupComponent() }) })
+      isOpen && /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(
+        Popup,
+        {
+          ...PopupProps,
+          anchorElement: rootRef,
+          placement,
+          children: getPopupComponent()
+        }
+      ) })
     ] });
   }
 );
@@ -1075,8 +1122,8 @@ import { useForkRef as useForkRef6 } from "@salt-ds/core";
 import {
   cloneElement as cloneElement5,
   forwardRef as forwardRef7,
-  useCallback as useCallback24,
-  useRef as useRef22
+  useCallback as useCallback25,
+  useRef as useRef23
 } from "react";
 import { useId as useId3 } from "@vuu-ui/vuu-layout";
 
@@ -1318,9 +1365,9 @@ function nextItemIdx(count, key, idx) {
   }
 }
 var getIndexOfSelectedItem = (items, selected) => {
-  const selectedItem = getFirstSelectedItem(selected);
-  if (selectedItem) {
-    return items.indexOf(selectedItem);
+  const selectedItemId = Array.isArray(selected) ? getFirstSelectedItem(selected) : void 0;
+  if (selectedItemId) {
+    return items.findIndex((item) => item.id === selectedItemId);
   } else {
     return -1;
   }
@@ -1456,6 +1503,7 @@ var useKeyboardNavigation = ({
   const ignoreFocus = useRef7(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
   const handleFocus = useCallback6(() => {
+    console.trace(`List useKeyboard focus`);
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else {
@@ -1519,6 +1567,7 @@ var useKeyboardNavigation = ({
   );
   const handleKeyDown = useCallback6(
     (e) => {
+      console.log("handleKeyDown");
       if (itemCount > 0 && isNavigationKey(e)) {
         e.preventDefault();
         e.stopPropagation();
@@ -1619,23 +1668,18 @@ var useSelection = ({
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const emptyValue = useCallback7(() => {
-    return isMultipleSelect || isExtendedSelect ? [] : null;
-  }, [isMultipleSelect, isExtendedSelect]);
   const [selected, setSelected] = useControlled({
     controlled: selectedProp,
-    default: defaultSelected != null ? defaultSelected : emptyValue(),
+    default: defaultSelected != null ? defaultSelected : [],
     name: "UseSelection",
     state: "selected"
   });
   const isItemSelected = useCallback7(
-    (itemId) => {
-      return Array.isArray(selected) ? selected.includes(itemId) : selected === itemId;
-    },
+    (itemId) => selected.includes(itemId),
     [selected]
   );
   const selectDeselectable = useCallback7(
-    (itemId) => isItemSelected(itemId) ? null : itemId,
+    (itemId) => isItemSelected(itemId) ? [] : [itemId],
     [isItemSelected]
   );
   const selectMultiple = useCallback7(
@@ -1675,17 +1719,14 @@ var useSelection = ({
         if (preserveExistingSelection && !rangeSelect) {
           newSelected = selectMultiple(id);
         } else if (rangeSelect) {
-          newSelected = selectRange(
-            idx,
-            preserveExistingSelection
-          );
+          newSelected = selectRange(idx, preserveExistingSelection);
         } else {
           newSelected = [id];
         }
       } else if (isDeselectable) {
         newSelected = selectDeselectable(id);
       } else {
-        newSelected = id;
+        newSelected = [id];
       }
       if (newSelected !== selected) {
         setSelected(newSelected);
@@ -2014,13 +2055,13 @@ import { forwardRef as forwardRef3 } from "react";
 import cx4 from "classnames";
 
 // src/list/CheckboxIcon.tsx
-import React from "react";
 import cx3 from "classnames";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var classBase3 = "vuuCheckboxIcon";
 var CheckboxIcon = ({
   checked = false,
   ...htmlAttributes
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx5(
   "span",
   {
     ...htmlAttributes,
@@ -2029,13 +2070,13 @@ var CheckboxIcon = ({
 );
 
 // src/list/ListItem.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var classBase4 = "vuuListItem";
 var ListItemProxy = forwardRef3(function ListItemNextProxy({
   height,
   ...htmlAttributes
 }, forwardedRef) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ...htmlAttributes,
@@ -2080,8 +2121,8 @@ var ListItem = forwardRef3(
         ref: forwardedRef,
         style,
         children: [
-          showCheckbox && /* @__PURE__ */ jsx5(CheckboxIcon, { "aria-hidden": true, checked: selected }),
-          children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ jsx5("span", { className: `${classBase4}-textWrapper`, children: label || children }) : /* @__PURE__ */ jsx5(
+          showCheckbox && /* @__PURE__ */ jsx6(CheckboxIcon, { "aria-hidden": true, checked: selected }),
+          children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ jsx6("span", { className: `${classBase4}-textWrapper`, children: label || children }) : /* @__PURE__ */ jsx6(
             Highlighter,
             {
               matchPattern: itemTextHighlightPattern,
@@ -2102,18 +2143,17 @@ import {
   cloneElement as cloneElement4,
   forwardRef as forwardRef5,
   isValidElement as isValidElement4,
-  useCallback as useCallback22,
-  useRef as useRef20,
+  useCallback as useCallback23,
+  useRef as useRef21,
   useState as useState10
 } from "react";
 
 // src/list/useList.ts
 import { useLayoutEffectSkipFirst } from "@vuu-ui/vuu-layout";
 import {
-  useCallback as useCallback19,
-  useEffect as useEffect5,
-  useMemo as useMemo8,
-  useRef as useRef17
+  useCallback as useCallback20,
+  useMemo as useMemo9,
+  useRef as useRef18
 } from "react";
 
 // src/drag-drop/dragDropTypesNext.ts
@@ -2196,7 +2236,7 @@ var useGlobalDragDrop = ({
 };
 
 // src/drag-drop/DragDropProvider.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var NO_DRAG_CONTEXT = {
   isDragSource: false,
   isDropTarget: false,
@@ -2299,10 +2339,10 @@ var DragDropProvider = ({
       registerDragDropParty
     ]
   );
-  return /* @__PURE__ */ jsx6(DragDropContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx7(DragDropContext.Provider, { value: contextValue, children });
 };
 var useDragDropProvider = (id) => {
-  var _a, _b;
+  var _a2, _b;
   const {
     dragSources,
     dropTargets,
@@ -2311,7 +2351,7 @@ var useDragDropProvider = (id) => {
     registerDragDropParty
   } = useContext2(DragDropContext);
   if (id) {
-    const isDragSource = (_a = dragSources == null ? void 0 : dragSources.has(id)) != null ? _a : false;
+    const isDragSource = (_a2 = dragSources == null ? void 0 : dragSources.has(id)) != null ? _a2 : false;
     const isDropTarget = (_b = dropTargets == null ? void 0 : dropTargets.has(id)) != null ? _b : false;
     return {
       isDragSource,
@@ -2352,10 +2392,86 @@ var DragDropState = class {
 };
 
 // src/drag-drop/useDragDropNaturalMovementNext.tsx
-import { useCallback as useCallback14, useMemo as useMemo6, useRef as useRef13, useState as useState5 } from "react";
+import { useCallback as useCallback14, useMemo as useMemo7, useRef as useRef13, useState as useState5 } from "react";
 
 // src/drag-drop/useDragDisplacers.ts
-import { useCallback as useCallback13, useMemo as useMemo5, useRef as useRef12 } from "react";
+import { useCallback as useCallback13, useMemo as useMemo6, useRef as useRef12 } from "react";
+
+// src/drag-drop/Draggable.tsx
+import { useForkRef as useForkRef3 } from "@salt-ds/core";
+import cx5 from "classnames";
+import {
+  forwardRef as forwardRef4,
+  useCallback as useCallback12,
+  useMemo as useMemo5
+} from "react";
+import { PopupComponent as Popup2, Portal as Portal2 } from "@vuu-ui/vuu-popups";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
+var Draggable = forwardRef4(function Draggable2({ wrapperClassName, element, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+  const callbackRef = useCallback12(
+    (el) => {
+      if (el) {
+        el.innerHTML = "";
+        el.appendChild(element);
+        if (scale !== 1) {
+          el.style.transform = `scale(${scale},${scale})`;
+        }
+      }
+    },
+    [element, scale]
+  );
+  const forkedRef = useForkRef3(forwardedRef, callbackRef);
+  const position = useMemo5(
+    () => ({
+      left: 0,
+      top: 0
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx8(Portal2, { children: /* @__PURE__ */ jsx8(
+    Popup2,
+    {
+      anchorElement: { current: document.body },
+      placement: "absolute",
+      position,
+      children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: cx5("vuuDraggable", ...makeClassNames(wrapperClassName)),
+          ref: forkedRef,
+          onTransitionEnd,
+          style
+        }
+      )
+    }
+  ) });
+});
+var createDragSpacer = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-spacer";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+var createDropIndicatorPosition = () => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicatorPosition";
+  return spacer;
+};
+var createDropIndicator = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicator";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
 
 // src/drag-drop/drop-target-utils.ts
 var LEFT_RIGHT = ["left", "right"];
@@ -2561,81 +2677,21 @@ function constrainRect(targetRect, constraintRect) {
 }
 var dropTargetsDebugString = (dropTargets) => dropTargets.map(
   (d, i) => {
-    var _a;
+    var _a2;
     return `
 ${d.isDraggedItem ? "*" : " "}[${i}] width : ${Math.floor(
       d.size
     )}    ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(
       d.mid
-    )})  ${(_a = d.element) == null ? void 0 : _a.textContent} `;
+    )})  ${(_a2 = d.element) == null ? void 0 : _a2.textContent} `;
   }
 ).join("");
 
-// src/drag-drop/Draggable.tsx
-import { useForkRef as useForkRef3 } from "@salt-ds/core";
-import cx5 from "classnames";
-import {
-  forwardRef as forwardRef4,
-  useCallback as useCallback12
-} from "react";
-import { PortalDeprecated } from "@vuu-ui/vuu-popups";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
-var Draggable = forwardRef4(function Draggable2({ wrapperClassName, element, onTransitionEnd, style, scale = 1 }, forwardedRef) {
-  const callbackRef = useCallback12(
-    (el) => {
-      if (el) {
-        el.innerHTML = "";
-        el.appendChild(element);
-        if (scale !== 1) {
-          el.style.transform = `scale(${scale},${scale})`;
-        }
-      }
-    },
-    [element, scale]
-  );
-  const forkedRef = useForkRef3(forwardedRef, callbackRef);
-  return /* @__PURE__ */ jsx7(PortalDeprecated, { children: /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: cx5("vuuDraggable", ...makeClassNames(wrapperClassName)),
-      ref: forkedRef,
-      onTransitionEnd,
-      style
-    }
-  ) });
-});
-var createDragSpacer = (transitioning) => {
-  const spacer = document.createElement("div");
-  spacer.className = "vuuDraggable-spacer";
-  if (transitioning) {
-    spacer.addEventListener("transitionend", () => {
-      transitioning.current = false;
-    });
-  }
-  return spacer;
-};
-var createDropIndicatorPosition = () => {
-  const spacer = document.createElement("div");
-  spacer.className = "vuuDraggable-dropIndicatorPosition";
-  return spacer;
-};
-var createDropIndicator = (transitioning) => {
-  const spacer = document.createElement("div");
-  spacer.className = "vuuDraggable-dropIndicator";
-  if (transitioning) {
-    spacer.addEventListener("transitionend", () => {
-      transitioning.current = false;
-    });
-  }
-  return spacer;
-};
-
 // src/drag-drop/useDragDisplacers.ts
 var useDragDisplacers = (orientation = "horizontal") => {
   const animationFrame = useRef12(0);
   const transitioning = useRef12(false);
-  const spacers = useMemo5(
+  const spacers = useMemo6(
     // We only need to listen for transition end on one of the spacers
     () => [createDragSpacer(transitioning), createDragSpacer()],
     []
@@ -2914,7 +2970,7 @@ var useDragDropNaturalMovement = ({
       viewportRange
     ]
   );
-  const [showPopup, hidePopup] = useMemo6(() => {
+  const [showPopup, hidePopup] = useMemo7(() => {
     let popupShowing = false;
     const show = (dropTarget) => {
       if (!popupShowing) {
@@ -2982,7 +3038,7 @@ var useDragDropNaturalMovement = ({
     [containerRef, displaceItem, displaceLastItem, hidePopup, showPopup]
   );
   const drop = useCallback14(() => {
-    var _a;
+    var _a2;
     clearSpacers();
     const { current: dropTargets } = measuredDropTargets;
     const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
@@ -3009,7 +3065,7 @@ var useDragDropNaturalMovement = ({
     }
     setShowOverflow(false);
     if (containerRef.current) {
-      const scrollTop = (_a = containerRef.current) == null ? void 0 : _a.scrollTop;
+      const scrollTop = (_a2 = containerRef.current) == null ? void 0 : _a2.scrollTop;
       if (indexOfDraggedItem < dropTargets.length) {
         containerRef.current.scrollTop = scrollTop;
       }
@@ -3033,9 +3089,9 @@ var useDragDropNaturalMovement = ({
 import { useCallback as useCallback16, useRef as useRef14, useState as useState6 } from "react";
 
 // src/drag-drop/useDropIndicator.ts
-import { useCallback as useCallback15, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo8 } from "react";
 var useDropIndicator = () => {
-  const spacer = useMemo7(() => createDropIndicatorPosition(), []);
+  const spacer = useMemo8(() => createDropIndicatorPosition(), []);
   const clearSpacer = useCallback15(() => spacer.remove(), [spacer]);
   const positionDropIndicator = useCallback15(
     (dropTarget, dropZone2 = "end") => {
@@ -3055,7 +3111,7 @@ var useDropIndicator = () => {
 };
 
 // src/drag-drop/useDragDropIndicator.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var NOT_OVERFLOWED2 = ':not([data-overflowed="true"])';
 var NOT_HIDDEN2 = ':not([aria-hidden="true"])';
 var useDragDropIndicator = ({
@@ -3177,7 +3233,7 @@ var useDragDropIndicator = ({
             height: 2
           };
           setDropIndicator(
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               Draggable,
               {
                 wrapperClassName: "dropIndicatorContainer",
@@ -3307,7 +3363,7 @@ var useDragDropIndicator = ({
 // src/drag-drop/useDragDropNext.tsx
 import {
   useCallback as useCallback18,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef16,
   useState as useState7
@@ -3379,7 +3435,7 @@ var useAutoScroll = ({
 };
 
 // src/drag-drop/useDragDropNext.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var NULL_DRAG_DROP_RESULT = {
   beginDrag: () => void 0,
   drag: () => void 0,
@@ -3450,6 +3506,7 @@ var useDragDropNext = ({
   const dragMouseMoveHandlerRef = useRef16();
   const dragMouseUpHandlerRef = useRef16();
   const attachDragHandlers = useCallback18(() => {
+    console.log("attach drag handlers");
     const { current: dragMove } = dragMouseMoveHandlerRef;
     const { current: dragUp } = dragMouseUpHandlerRef;
     if (dragMove && dragUp) {
@@ -3458,9 +3515,11 @@ var useDragDropNext = ({
     }
   }, []);
   const removeDragHandlers = useCallback18(() => {
+    console.log("remove drag handlers");
     const { current: dragMove } = dragMouseMoveHandlerRef;
     const { current: dragUp } = dragMouseUpHandlerRef;
     if (dragMove && dragUp) {
+      console.log("... we have both handlers");
       document.removeEventListener("mousemove", dragMove, false);
       document.removeEventListener("mouseup", dragUp, false);
     }
@@ -3485,9 +3544,9 @@ var useDragDropNext = ({
     [containerRef, itemQuery, orientation]
   );
   const terminateDrag = useCallback18(() => {
-    var _a;
+    var _a2;
     const { current: toIndex } = dropIndexRef;
-    const droppedItem = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+    const droppedItem = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
       `${itemQuery}[data-index="${toIndex}"]`
     );
     if (droppedItem) {
@@ -3523,8 +3582,8 @@ var useDragDropNext = ({
   const useDragDropHook = allowDragDrop === true || allowDragDrop === "natural-movement" ? useDragDropNaturalMovement : allowDragDrop === "drop-indicator" ? useDragDropIndicator : noDragDrop;
   const onScrollingStopped = useCallback18(
     (scrollDirection, scrollPos, atEnd) => {
-      var _a;
-      (_a = handleScrollStopRef.current) == null ? void 0 : _a.call(handleScrollStopRef, scrollDirection, scrollPos, atEnd);
+      var _a2;
+      (_a2 = handleScrollStopRef.current) == null ? void 0 : _a2.call(handleScrollStopRef, scrollDirection, scrollPos, atEnd);
     },
     []
   );
@@ -3535,12 +3594,12 @@ var useDragDropNext = ({
   });
   const handleDrop = useCallback18(
     (fromIndex, toIndex, options) => {
-      var _a;
+      var _a2;
       dropPosRef.current = toIndex;
       if (options.isExternal) {
         onDrop == null ? void 0 : onDrop(fromIndex, toIndex, {
           ...options,
-          payload: (_a = dragDropStateRef.current) == null ? void 0 : _a.payload
+          payload: (_a2 = dragDropStateRef.current) == null ? void 0 : _a2.payload
         });
       } else {
         onDrop == null ? void 0 : onDrop(fromIndex, toIndex, options);
@@ -3667,7 +3726,6 @@ var useDragDropNext = ({
       dragDropStateRef.current = dragDropState;
       const { draggableElement, mouseOffset, initialDragElement } = dragDropState;
       const { current: container } = containerRef;
-      console.log({ container, draggableElement, initialDragElement });
       if (container && draggableElement) {
         const containerRect = container.getBoundingClientRect();
         const draggableRect = draggableElement.getBoundingClientRect();
@@ -3705,7 +3763,7 @@ var useDragDropNext = ({
         } = dragElement;
         setDraggableStatus({
           isDragging: true,
-          draggable: /* @__PURE__ */ jsx9(
+          draggable: /* @__PURE__ */ jsx10(
             Draggable,
             {
               element: cloneElement3(dragElement),
@@ -3809,7 +3867,7 @@ var useDragDropNext = ({
       settlingItemRef.current = null;
     }
   }, [containerRef, itemQuery, settlingItem, terminateDrag]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (id && (isDragSource || isDropTarget)) {
       register(id, resumeDrag);
     }
@@ -3822,6 +3880,90 @@ var useDragDropNext = ({
   };
 };
 
+// src/list/useListDrop.ts
+import { useCallback as useCallback19, useEffect as useEffect6, useRef as useRef17 } from "react";
+var useListDrop = ({
+  dataHook,
+  onDrop,
+  onMoveListItem,
+  selected,
+  setHighlightedIndex,
+  setSelected
+}) => {
+  const selectedByIndexRef = useRef17([]);
+  const dataHookRef = useRef17(dataHook);
+  dataHookRef.current = dataHook;
+  const adjustIndex = useCallback19(
+    (index, fromIndex, toIndex) => {
+      if (index === fromIndex) {
+        return toIndex;
+      } else if (index < Math.min(fromIndex, toIndex) || index > Math.max(fromIndex, toIndex)) {
+        return index;
+      }
+      if (fromIndex < index) {
+        return index - 1;
+      } else {
+        return index + 1;
+      }
+    },
+    []
+  );
+  const reorderSelectedIndices = useCallback19(
+    (selected2, fromIndex, toIndex) => {
+      const selectedIndices = selected2.map(
+        (id) => dataHookRef.current.indexOfItemById(id)
+      );
+      return selectedIndices.map(
+        (item) => adjustIndex(item, fromIndex, toIndex)
+      );
+    },
+    [adjustIndex]
+  );
+  const handleDrop = useCallback19(
+    (fromIndex, toIndex, options) => {
+      if (hasSelection(selected)) {
+        selectedByIndexRef.current = reorderSelectedIndices(
+          selected,
+          fromIndex,
+          toIndex
+        );
+      }
+      if (options.isExternal) {
+        onDrop == null ? void 0 : onDrop(fromIndex, toIndex, options);
+      } else {
+        onMoveListItem == null ? void 0 : onMoveListItem(fromIndex, toIndex);
+      }
+      setHighlightedIndex(-1);
+    },
+    [
+      selected,
+      setHighlightedIndex,
+      reorderSelectedIndices,
+      onDrop,
+      onMoveListItem
+    ]
+  );
+  const handleDropSettle = useCallback19(
+    (toIndex) => {
+      setHighlightedIndex(toIndex);
+    },
+    [setHighlightedIndex]
+  );
+  useEffect6(() => {
+    const { current: selectedByIndex } = selectedByIndexRef;
+    if (hasSelection(selectedByIndex)) {
+      selectedByIndexRef.current = [];
+      const postDropSelected = Array.isArray(selectedByIndex) ? selectedByIndex.map((i) => dataHook.data[i].id) : dataHook.data[selectedByIndex].id;
+      selectedByIndexRef.current = [];
+      setSelected(postDropSelected);
+    }
+  }, [dataHook.data, setSelected]);
+  return {
+    handleDrop,
+    onDropSettle: handleDropSettle
+  };
+};
+
 // src/list/useList.ts
 var useList = ({
   allowDragDrop = false,
@@ -3856,14 +3998,15 @@ var useList = ({
   tabToSelect,
   viewportRange
 }) => {
-  const selectedByIndexRef = useRef17(null);
-  const lastSelection = useRef17(selected || defaultSelected);
+  const lastSelection = useRef18(
+    selected || defaultSelected
+  );
   const handleKeyboardNavigation = (evt, nextIndex) => {
-    var _a, _b;
-    (_b = (_a = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a, evt, nextIndex);
+    var _a2, _b;
+    (_b = (_a2 = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a2, evt, nextIndex);
     onKeyboardNavigation == null ? void 0 : onKeyboardNavigation(evt, nextIndex);
   };
-  const handleSelect = useCallback19(
+  const handleSelect = useCallback20(
     (evt, selectedId) => {
       if (onSelect) {
         if (selectedId !== null) {
@@ -3873,29 +4016,35 @@ var useList = ({
     },
     [dataHook, onSelect]
   );
-  const scrollContainer = useMemo8(() => {
-    var _a, _b;
+  const scrollContainer = useMemo9(() => {
+    var _a2, _b;
     if (scrollContainerRef) {
       return scrollContainerRef;
     } else {
       return {
-        current: (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelector(".vuuList-scrollContainer")) != null ? _b : null
+        current: (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(".vuuList-scrollContainer")) != null ? _b : null
       };
     }
-  }, []);
-  const handleSelectionChange = useCallback19(
+  }, [containerRef, scrollContainerRef]);
+  const handleSelectionChange = useCallback20(
     (evt, selected2) => {
       if (onSelectionChange) {
-        if (Array.isArray(selected2)) {
+        if (isSingleSelection(selectionStrategy)) {
+          const [selectedItem] = selected2;
+          onSelectionChange(
+            evt,
+            dataHook.itemById(selectedItem)
+          );
+        } else if (isMultiSelection(selectionStrategy)) {
           const selectedItems = selected2.map((id2) => dataHook.itemById(id2));
-          onSelectionChange(evt, selectedItems);
-        } else if (selected2) {
-          const item = dataHook.itemById(selected2);
-          onSelectionChange(evt, item);
+          onSelectionChange(
+            evt,
+            selectedItems
+          );
         }
       }
     },
-    [dataHook, onSelectionChange]
+    [dataHook, onSelectionChange, selectionStrategy]
   );
   const {
     highlightedIndex,
@@ -3925,7 +4074,7 @@ var useList = ({
     highlightedIdx: highlightedIndex,
     collectionHook: dataHook
   });
-  const handleDragStart = useCallback19(
+  const handleDragStart = useCallback20(
     (dragDropState) => {
       setHighlightedIndex(-1);
       onDragStart == null ? void 0 : onDragStart(dragDropState);
@@ -3945,76 +4094,20 @@ var useList = ({
     selectionKeys,
     tabToSelect
   });
-  const adjustIndex = useCallback19(
-    (item, fromIndex, toIndex) => {
-      const index = dataHook.data.indexOf(item);
-      if (index === fromIndex) {
-        return toIndex;
-      } else if (index < Math.min(fromIndex, toIndex) || index > Math.max(fromIndex, toIndex)) {
-        return index;
-      }
-      if (fromIndex < index) {
-        return index - 1;
-      } else {
-        return index + 1;
-      }
-    },
-    [dataHook.data]
-  );
-  const reorderSelectedIndices = useCallback19(
-    (selected2, fromIndex, toIndex) => {
-      if (Array.isArray(selected2)) {
-        return selected2.map((item) => adjustIndex(item, fromIndex, toIndex));
-      } else {
-        return adjustIndex(selected2, fromIndex, toIndex);
-      }
-    },
-    [adjustIndex]
-  );
-  const handleDrop = useCallback19(
-    (fromIndex, toIndex, options) => {
-      if (hasSelection(selectionHook.selected)) {
-        selectedByIndexRef.current = reorderSelectedIndices(
-          selectionHook.selected,
-          fromIndex,
-          toIndex
-        );
-      }
-      if (options.isExternal) {
-        onDrop == null ? void 0 : onDrop(fromIndex, toIndex, options);
-      } else {
-        onMoveListItem == null ? void 0 : onMoveListItem(fromIndex, toIndex);
-      }
-      setHighlightedIndex(-1);
-    },
-    [
-      selectionHook.selected,
-      setHighlightedIndex,
-      reorderSelectedIndices,
-      onDrop,
-      onMoveListItem
-    ]
-  );
-  const handleDropSettle = useCallback19(
-    (toIndex) => {
-      setHighlightedIndex(toIndex);
-    },
-    [setHighlightedIndex]
-  );
+  const { handleDrop, onDropSettle } = useListDrop({
+    dataHook,
+    onDrop,
+    onMoveListItem,
+    selected: selectionHook.selected,
+    setHighlightedIndex,
+    setSelected: selectionHook.setSelected
+  });
   const { setSelected } = selectionHook;
-  useEffect5(() => {
-    const { current: selectedByIndex } = selectedByIndexRef;
-    if (hasSelection(selectedByIndex)) {
-      const postDropSelected = Array.isArray(selectedByIndex) ? selectedByIndex.map((i) => dataHook.data[i]) : dataHook.data[selectedByIndex];
-      selectedByIndexRef.current = null;
-      setSelected(postDropSelected);
-    }
-  }, [dataHook.data, setSelected]);
   useLayoutEffectSkipFirst(() => {
     if (hasSelection(lastSelection.current)) {
-      setSelected(Array.isArray(lastSelection.current) ? [] : null);
+      setSelected([]);
     }
-  }, [setSelected, dataHook.data]);
+  }, [selected, dataHook.data, setSelected]);
   const {
     onMouseDown,
     isDragging,
@@ -4029,8 +4122,7 @@ var useList = ({
     itemQuery: ".vuuListItem",
     onDragStart: handleDragStart,
     onDrop: handleDrop,
-    onDropSettle: handleDropSettle,
-    // selected: selectionHook.selected,
+    onDropSettle,
     viewportRange
   });
   const { onKeyDown: typeaheadOnKeyDown } = useTypeahead({
@@ -4040,15 +4132,15 @@ var useList = ({
     typeToNavigate: true,
     items: dataHook.data
   });
-  const handleKeyDown = useCallback19(
+  const handleKeyDown = useCallback20(
     (evt) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       if (!evt.defaultPrevented) {
         typeaheadOnKeyDown == null ? void 0 : typeaheadOnKeyDown(evt);
       }
       navigationKeyDown(evt);
       if (!evt.defaultPrevented) {
-        (_b = (_a = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _b.call(_a, evt);
+        (_b = (_a2 = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
       }
       if (!evt.defaultPrevented) {
         (_c = collapsibleHook == null ? void 0 : collapsibleHook.onKeyDown) == null ? void 0 : _c.call(collapsibleHook, evt);
@@ -4073,7 +4165,7 @@ var useList = ({
     stickyHeaders
   });
   const isScrolling = isViewportScrolling.current || isDragDropScrolling.current;
-  const handleMouseMove = useCallback19(
+  const handleMouseMove = useCallback20(
     (evt) => {
       if (!isScrolling && !disabled && !isDragging) {
         navigationMouseMove();
@@ -4099,8 +4191,8 @@ var useList = ({
     ]
   );
   const getActiveDescendant = () => {
-    var _a;
-    return highlightedIndex === void 0 || highlightedIndex === -1 || disableAriaActiveDescendant ? void 0 : (_a = dataHook.data[highlightedIndex]) == null ? void 0 : _a.id;
+    var _a2;
+    return highlightedIndex === void 0 || highlightedIndex === -1 || disableAriaActiveDescendant ? void 0 : (_a2 = dataHook.data[highlightedIndex]) == null ? void 0 : _a2.id;
   };
   lastSelection.current = selectionHook.selected;
   const listControlProps = {
@@ -4128,6 +4220,7 @@ var useList = ({
     listItemHeaderHandlers: collapsibleHook,
     listControlProps,
     scrollIntoView,
+    //TODO given that we firs onSelect and onSelectionCHange with Item(s), should we return Item(s) here ?
     selected: selectionHook.selected,
     setHighlightedIndex,
     setIgnoreFocus: keyboardHook.setIgnoreFocus,
@@ -4137,7 +4230,7 @@ var useList = ({
 };
 
 // src/list/useListHeight.ts
-import { useCallback as useCallback20, useMemo as useMemo9, useRef as useRef18, useState as useState8 } from "react";
+import { useCallback as useCallback21, useMemo as useMemo10, useRef as useRef19, useState as useState8 } from "react";
 var getContentHeight = (itemCount, itemHeight, itemGapSize = 0) => {
   if (itemCount === 0) {
     return 0;
@@ -4159,12 +4252,11 @@ var useListHeight = ({
 }) => {
   const [measuredItemHeight, setMeasuredItemHeight] = useState8(itemHeightProp);
   const [, forceUpdate] = useState8({});
-  const proxyItemRef = useRef18(null);
-  const [contentHeight, computedListHeight] = useMemo9(() => {
+  const proxyItemRef = useRef19(null);
+  const [contentHeight, computedListHeight] = useMemo10(() => {
     let result = 0;
     const itemHeight = measuredItemHeight != null ? measuredItemHeight : itemHeightProp;
     const contentHeight2 = getContentHeight(itemCount, itemHeight, itemGapSize);
-    console.log(`contentHeight ${contentHeight2}`);
     if (height !== void 0) {
       return [contentHeight2, void 0];
     }
@@ -4189,12 +4281,12 @@ var useListHeight = ({
     itemHeightProp,
     measuredItemHeight
   ]);
-  const handleRowHeight = useCallback20(({ height: height2 }) => {
+  const handleRowHeight = useCallback21(({ height: height2 }) => {
     if (typeof height2 === "number") {
       setMeasuredItemHeight(height2);
     }
   }, []);
-  const rowHeightProxyRef = useCallback20((el) => {
+  const rowHeightProxyRef = useCallback21((el) => {
     proxyItemRef.current = el;
     forceUpdate({});
   }, []);
@@ -4210,7 +4302,7 @@ var useListHeight = ({
 
 // src/list/useScrollPosition.ts
 import { useIsomorphicLayoutEffect as useIsomorphicLayoutEffect2 } from "@salt-ds/core";
-import { useCallback as useCallback21, useMemo as useMemo10, useRef as useRef19, useState as useState9 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo11, useRef as useRef20, useState as useState9 } from "react";
 var getRange = (scrollPos, height, itemCount, itemHeight) => {
   const viewportRowCount = Math.ceil(height / itemHeight);
   const from = Math.floor(scrollPos / itemHeight);
@@ -4229,10 +4321,10 @@ var useScrollPosition = ({
   itemSize: listItemHeight,
   onViewportScroll
 }) => {
-  const firstVisibleRowRef = useRef19(0);
-  const lastVisibleRowRef = useRef19(0);
-  const scrollPosRef = useRef19(0);
-  const range = useMemo10(() => {
+  const firstVisibleRowRef = useRef20(0);
+  const lastVisibleRowRef = useRef20(0);
+  const scrollPosRef = useRef20(0);
+  const range = useMemo11(() => {
     return getRange(
       scrollPosRef.current,
       listHeight,
@@ -4244,7 +4336,7 @@ var useScrollPosition = ({
   useIsomorphicLayoutEffect2(() => {
     setViewportRange(range);
   }, [range]);
-  const handleVerticalScroll = useCallback21(
+  const handleVerticalScroll = useCallback22(
     (e) => {
       const scrollTop = e.target.scrollTop;
       if (scrollTop !== scrollPosRef.current) {
@@ -4279,7 +4371,7 @@ var useScrollPosition = ({
 };
 
 // src/list/List.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 import { createElement } from "react";
 var defaultEmptyMessage = "No data to display";
 var classBase5 = "vuuList";
@@ -4329,16 +4421,17 @@ var List = forwardRef5(function List2({
   source,
   style: styleProp,
   stickyHeaders,
+  tabIndex = 0,
   tabToSelect,
   ...htmlAttributes
 }, forwardedRef) {
-  var _a, _b;
+  var _a2, _b;
   const id = useId2(idProp);
-  const containerRef = useRef20(null);
-  const scrollContainerRef = useRef20(null);
-  const contentContainerRef = useRef20(null);
+  const containerRef = useRef21(null);
+  const scrollContainerRef = useRef21(null);
+  const contentContainerRef = useRef21(null);
   const [size, setSize] = useState10();
-  const handleResize = useCallback22((size2) => {
+  const handleResize = useCallback23((size2) => {
     setSize(size2);
   }, []);
   const collectionHook = useCollectionItems({
@@ -4371,7 +4464,7 @@ var List = forwardRef5(function List2({
   const { onVerticalScroll, viewportRange } = useScrollPosition({
     containerSize: (
       // TODO whats the right way to handle string values - ie percentages
-      (_b = (_a = listClientHeight != null ? listClientHeight : computedListHeight) != null ? _a : size == null ? void 0 : size.height) != null ? _b : 0
+      (_b = (_a2 = listClientHeight != null ? listClientHeight : computedListHeight) != null ? _a2 : size == null ? void 0 : size.height) != null ? _b : 0
     ),
     itemCount: collectionHook.data.length,
     itemGapSize,
@@ -4449,13 +4542,13 @@ var List = forwardRef5(function List2({
   };
   const getItemHeight = getItemHeightProp === void 0 ? () => itemHeightProp : getItemHeightProp;
   function renderCollectionItem(list, item, idx) {
-    var _a2, _b2;
+    var _a3, _b2;
     const { disabled, value, id: itemId, label } = item;
     const isChildItem = isValidElement4(value);
     const listItemProps = {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore until we refactor this whole section
-      className: cx6((_a2 = value == null ? void 0 : value.props) == null ? void 0 : _a2.className, {
+      className: cx6((_a3 = value == null ? void 0 : value.props) == null ? void 0 : _a3.className, {
         vuuHighlighted: idx.value === highlightedIndex,
         vuuFocusVisible: appliedFocusVisible === idx.value,
         [`vuuDraggable-dragAway`]: draggedItemIndex === idx.value
@@ -4473,7 +4566,7 @@ var List = forwardRef5(function List2({
       showCheckbox: checkable
     };
     list.push(
-      isChildItem ? cloneElement4(value, listItemProps) : /* @__PURE__ */ jsx10(ListItem4, { ...listItemProps })
+      isChildItem ? cloneElement4(value, listItemProps) : /* @__PURE__ */ jsx11(ListItem4, { ...listItemProps })
     );
     idx.value += 1;
   }
@@ -4484,7 +4577,7 @@ var List = forwardRef5(function List2({
       renderCollectionItems(items, idx, idx.value + count) || []
     ) : header;
     list.push(
-      /* @__PURE__ */ jsx10("div", { role: "group", children: childItems2 }, id2)
+      /* @__PURE__ */ jsx11("div", { role: "group", children: childItems2 }, id2)
     );
   };
   const renderCollectionItems = (items, idx = { value: 0 }, end = items.length) => {
@@ -4505,13 +4598,14 @@ var List = forwardRef5(function List2({
   };
   function renderEmpty() {
     if (emptyMessage || showEmptyMessage) {
-      return /* @__PURE__ */ jsx10("span", { className: `${classBase5}-empty-message`, children: emptyMessage != null ? emptyMessage : defaultEmptyMessage });
+      return /* @__PURE__ */ jsx11("span", { className: `${classBase5}-empty-message`, children: emptyMessage != null ? emptyMessage : defaultEmptyMessage });
     } else {
       return null;
     }
   }
+  const isEmpty = collectionHook.data.length === 0;
   const renderContent = () => {
-    if (collectionHook.data.length) {
+    if (!isEmpty) {
       const itemsToRender = collectionHook.data;
       return renderCollectionItems(itemsToRender);
     } else {
@@ -4538,6 +4632,7 @@ var List = forwardRef5(function List2({
       className: cx6(classBase5, className, {
         [`${classBase5}-collapsible`]: collapsibleHeaders,
         [`${classBase5}-contentSized`]: computedListHeight !== void 0,
+        [`${classBase5}-empty`]: isEmpty,
         vuuFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE
       }),
       height: computedListHeight != null ? computedListHeight : height,
@@ -4547,10 +4642,10 @@ var List = forwardRef5(function List2({
       role: "listbox",
       onScroll: onVerticalScroll,
       style: { ...styleProp, ...sizeStyles },
-      tabIndex: listDisabled || disableFocus ? void 0 : 0,
+      tabIndex: listDisabled || disableFocus ? void 0 : tabIndex,
       children: [
-        /* @__PURE__ */ jsx10(ListItemProxy, { ref: rowHeightProxyRef, height: itemHeightProp }),
-        collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsx10(Fragment2, { children: /* @__PURE__ */ jsx10(ListPlaceholder, {}) }) : /* @__PURE__ */ jsx10("div", { className: `${classBase5}-viewport`, ref: scrollContainerRef, children: /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx11(ListItemProxy, { ref: rowHeightProxyRef, height: itemHeightProp }),
+        collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsx11(Fragment2, { children: /* @__PURE__ */ jsx11(ListPlaceholder, {}) }) : /* @__PURE__ */ jsx11("div", { className: `${classBase5}-viewport`, ref: scrollContainerRef, children: /* @__PURE__ */ jsxs4(
           "div",
           {
             className: `${classBase5}-scrollingContentContainer`,
@@ -4592,10 +4687,10 @@ function clsx() {
 }
 
 // src/list/VirtualizedList.tsx
-import { forwardRef as forwardRef6, memo, useRef as useRef21 } from "react";
+import { forwardRef as forwardRef6, memo, useRef as useRef22 } from "react";
 
 // src/list/useVirtualization.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/list/keyset.ts
 var KeySet = class {
@@ -4644,7 +4739,7 @@ var useVirtualization = ({
   listItemHeight,
   viewportRange
 }) => {
-  const keys = useMemo11(() => new KeySet(0, 1), []);
+  const keys = useMemo12(() => new KeySet(0, 1), []);
   const rowHeightWithGap = listItemHeight + listItemGapSize;
   const lo = Math.max(0, viewportRange.from - renderBuffer);
   const hi = Math.min(data.length, viewportRange.to + renderBuffer);
@@ -4661,7 +4756,7 @@ var useVirtualization = ({
 };
 
 // src/list/VirtualizedList.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultEmptyMessage2 = "No data to display";
 var withBaseName2 = makePrefixer2("saltList");
 var ListItem3 = memo(ListItem);
@@ -4711,8 +4806,8 @@ var VirtualizedList = forwardRef6(function List3({
   ...htmlAttributes
 }, forwardedRef) {
   const id = useIdMemo(idProp);
-  const rootRef = useRef21(null);
-  const rowHeightProxyRef = useRef21(null);
+  const rootRef = useRef22(null);
+  const rowHeightProxyRef = useRef22(null);
   const collectionHook = useCollectionItems({
     id,
     label: "List",
@@ -4748,9 +4843,7 @@ var VirtualizedList = forwardRef6(function List3({
     collectionHook,
     containerRef: rootRef,
     defaultHighlightedIndex: defaultHighlightedIdx,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
     disabled: listDisabled,
     disableTypeToSelect,
     highlightedIndex: highlightedIdxProp,
@@ -4759,9 +4852,7 @@ var VirtualizedList = forwardRef6(function List3({
     onSelectionChange,
     onHighlight,
     restoreLastFocus,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionStrategy,
     selectionKeys,
     stickyHeaders,
@@ -4790,7 +4881,7 @@ var VirtualizedList = forwardRef6(function List3({
     const [key, offset, pos, item] = row;
     const index = pos - 1;
     list.push(
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         ListItem3,
         {
           "aria-setsize": collectionHook.data.length,
@@ -4823,7 +4914,7 @@ var VirtualizedList = forwardRef6(function List3({
   }
   function renderEmpty() {
     if (emptyMessage || showEmptyMessage) {
-      return /* @__PURE__ */ jsx11("span", { className: withBaseName2("empty-message"), children: emptyMessage != null ? emptyMessage : defaultEmptyMessage2 });
+      return /* @__PURE__ */ jsx12("span", { className: withBaseName2("empty-message"), children: emptyMessage != null ? emptyMessage : defaultEmptyMessage2 });
     } else {
       return null;
     }
@@ -4844,7 +4935,7 @@ var VirtualizedList = forwardRef6(function List3({
     maxWidth: maxWidth != null ? maxWidth : width,
     maxHeight: maxHeight != null ? maxHeight : listHeight
   };
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ...htmlAttributes,
@@ -4863,7 +4954,7 @@ var VirtualizedList = forwardRef6(function List3({
           className: withBaseName2("scrollingContentContainer"),
           style: { height: contentHeight },
           children: [
-            /* @__PURE__ */ jsx11(ListItemProxy, { ref: rowHeightProxyRef }),
+            /* @__PURE__ */ jsx12(ListItemProxy, { ref: rowHeightProxyRef }),
             renderContent()
           ]
         }
@@ -4874,12 +4965,12 @@ var VirtualizedList = forwardRef6(function List3({
 
 // src/list/RadioIcon.tsx
 import cx7 from "classnames";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var classBase6 = "vuuRadioIcon";
 var RadioIcon = ({
   checked = false,
   ...htmlAttributes
-}) => /* @__PURE__ */ jsx12(
+}) => /* @__PURE__ */ jsx13(
   "span",
   {
     ...htmlAttributes,
@@ -4889,7 +4980,7 @@ var RadioIcon = ({
 
 // src/dropdown/useDropdown.ts
 import { useControlled as useControlled4 } from "@salt-ds/core";
-import { useCallback as useCallback23, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback24, useMemo as useMemo13 } from "react";
 var useDropdown = ({
   collectionHook,
   defaultHighlightedIndex: defaultHighlightedIndexProp,
@@ -4906,23 +4997,36 @@ var useDropdown = ({
   selected,
   selectionStrategy
 }) => {
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
+  const isMultiSelect = isMultiSelection(selectionStrategy);
   const [isOpen, setIsOpen] = useControlled4({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
-  const handleSelectionChange = useCallback23(
+  const handleSelectionChange = useCallback24(
     (evt, selected2) => {
+      console.log(`useDropdown onSelectionChange`, {
+        selected: selected2
+      });
       if (!isMultiSelect) {
         setIsOpen(false);
         onOpenChange == null ? void 0 : onOpenChange(false);
       }
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, selected2);
+      if (Array.isArray(selected2)) {
+        onSelectionChange == null ? void 0 : onSelectionChange(
+          null,
+          selected2
+        );
+      } else if (selected2) {
+        onSelectionChange == null ? void 0 : onSelectionChange(
+          null,
+          selected2
+        );
+      }
     },
     [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
   );
-  const handleSelect = useCallback23(
+  const handleSelect = useCallback24(
     (evt, selected2) => {
       if (!isMultiSelect) {
         setIsOpen(false);
@@ -4946,15 +5050,15 @@ var useDropdown = ({
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
-  const handleOpenChange = useCallback23(
+  const handleOpenChange = useCallback24(
     (open) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open);
     },
     [onOpenChange, setIsOpen]
   );
-  const triggerLabel = useMemo12(() => {
-    if (isMultiSelect && Array.isArray(listHook.selected)) {
+  const triggerLabel = useMemo13(() => {
+    if (Array.isArray(listHook.selected)) {
       const selectedItems = listHook.selected.map(
         (id) => collectionHook.itemById(id)
       );
@@ -4966,11 +5070,8 @@ var useDropdown = ({
       } else {
         return `${selectedItems.length} items selected`;
       }
-    } else {
-      const selectedItem = listHook.selected;
-      return selectedItem == null ? void 0 : itemToString2(collectionHook.itemById(selectedItem));
     }
-  }, [collectionHook, isMultiSelect, itemToString2, listHook.selected]);
+  }, [collectionHook, itemToString2, listHook.selected]);
   return {
     isOpen,
     onOpenChange: handleOpenChange,
@@ -4980,7 +5081,7 @@ var useDropdown = ({
 };
 
 // src/dropdown/Dropdown.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var Dropdown2 = forwardRef7(function Dropdown3({
   "aria-label": ariaLabel,
   children,
@@ -5002,8 +5103,8 @@ var Dropdown2 = forwardRef7(function Dropdown3({
   ...props
 }, forwardedRef) {
   const id = useId3(idProp);
-  const rootRef = useRef22(null);
-  const listRef = useRef22(null);
+  const rootRef = useRef23(null);
+  const listRef = useRef23(null);
   const forkedRef = useForkRef6(rootRef, forwardedRef);
   const collectionHook = useCollectionItems({
     id,
@@ -5028,7 +5129,6 @@ var Dropdown2 = forwardRef7(function Dropdown3({
     highlightedIndex: ListProps3 == null ? void 0 : ListProps3.highlightedIndex,
     isOpen: isOpenProp,
     itemToString: itemToString2,
-    label: "Dropdown",
     listRef,
     onHighlight: ListProps3 == null ? void 0 : ListProps3.onHighlight,
     onOpenChange,
@@ -5037,14 +5137,13 @@ var Dropdown2 = forwardRef7(function Dropdown3({
     selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionStrategy
   });
-  const collectionItemsToItem = useCallback24(
-    (itemIdOrItemIds) => {
-      if (Array.isArray(itemIdOrItemIds)) {
-        return itemIdOrItemIds.map(
-          (id2) => collectionHook.itemById(id2)
-        );
-      } else if (itemIdOrItemIds) {
-        return collectionHook.itemById(itemIdOrItemIds);
+  const itemIdToItem = useCallback25(
+    (itemId) => {
+      if (Array.isArray(itemId)) {
+        const items = itemId.map((id2) => collectionHook.itemById(id2));
+        return items;
+      } else {
+        return collectionHook.itemById(itemId);
       }
     },
     [collectionHook]
@@ -5064,7 +5163,7 @@ var Dropdown2 = forwardRef7(function Dropdown3({
         })
       );
     } else {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         DropdownButton,
         {
           label: triggerLabel,
@@ -5074,7 +5173,7 @@ var Dropdown2 = forwardRef7(function Dropdown3({
       );
     }
   };
-  return /* @__PURE__ */ jsx13(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx14(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs6(
     DropdownBase,
     {
       ...props,
@@ -5086,7 +5185,7 @@ var Dropdown2 = forwardRef7(function Dropdown3({
       width,
       children: [
         getTriggerComponent(),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           List,
           {
             ListItem: ListItem4,
@@ -5097,7 +5196,7 @@ var Dropdown2 = forwardRef7(function Dropdown3({
             onSelectionChange,
             onSelect,
             ref: listRef,
-            selected: collectionItemsToItem(selected),
+            selected: selected === void 0 ? void 0 : itemIdToItem(selected),
             selectionStrategy
           }
         )
@@ -5110,8 +5209,8 @@ var Dropdown2 = forwardRef7(function Dropdown3({
 import { useControlled as useControlled5 } from "@salt-ds/core";
 import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2 } from "@vuu-ui/vuu-layout";
 import {
-  useCallback as useCallback25,
-  useRef as useRef23,
+  useCallback as useCallback26,
+  useRef as useRef24,
   useState as useState11
 } from "react";
 var EnterOnly = ["Enter"];
@@ -5120,6 +5219,7 @@ var useCombobox = ({
   ariaLabel,
   collectionHook,
   defaultIsOpen,
+  defaultSelected,
   defaultValue,
   onBlur,
   onFocus,
@@ -5128,12 +5228,15 @@ var useCombobox = ({
   id,
   initialHighlightedIndex = -1,
   isOpen: isOpenProp,
+  itemCount,
+  itemsToString,
   itemToString: itemToString2 = itemToString,
   listRef,
   onOpenChange,
   onSelectionChange,
+  onSetSelectedText,
+  selected: selectedProp,
   selectionStrategy,
-  stringToItem,
   value: valueProp,
   InputProps: inputProps = {
     onBlur,
@@ -5142,21 +5245,11 @@ var useCombobox = ({
     onSelect
   }
 }) => {
-  var _a;
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
-  const selectedValue = (_a = collectionHook.stringToCollectionItem(
-    valueProp != null ? valueProp : defaultValue
-  )) != null ? _a : null;
-  const {
-    data: indexPositions,
-    itemToCollectionItem,
-    setFilterPattern,
-    stringToCollectionItem
-  } = collectionHook;
-  const setHighlightedIndexRef = useRef23(null);
-  const setSelectedRef = useRef23(null);
-  const ignoreSelectOnFocus = useRef23(true);
-  const selectedRef = useRef23(selectedValue);
+  const isMultiSelect = isMultiSelection(selectionStrategy);
+  const { setFilterPattern } = collectionHook;
+  const setHighlightedIndexRef = useRef24(null);
+  const selectedRef = useRef24(isMultiSelect ? [] : null);
+  const ignoreSelectOnFocus = useRef24(true);
   const [isOpen, setIsOpen] = useControlled5({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
@@ -5164,116 +5257,138 @@ var useCombobox = ({
   });
   const [value, setValue] = useControlled5({
     controlled: void 0,
-    default: defaultValue != null ? defaultValue : "",
+    default: defaultValue != null ? defaultValue : valueProp,
     name: "ComboBox",
     state: "value"
   });
-  const collectionItemsToItem = useCallback25(
-    (sel) => {
-      if (Array.isArray(sel)) {
-        return sel.map((i) => i.value);
-      } else if (sel) {
-        return sel.value;
-      } else {
-        return sel;
-      }
-    },
-    []
-  );
   const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] = useState11(true);
-  const [quickSelection, setQuickSelection] = useState11(false);
-  const highlightSelectedItem = useCallback25(
-    (selected2 = selectedRef.current) => {
-      var _a2, _b;
-      if (Array.isArray(selected2)) {
-        console.log("TODO multi selection");
-      } else if (selected2 == null) {
-        (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
-      } else {
-        const indexOfSelectedItem = indexPositions.indexOf(selected2);
-        (_b = setHighlightedIndexRef.current) == null ? void 0 : _b.call(setHighlightedIndexRef, indexOfSelectedItem);
-      }
-    },
-    [indexPositions]
-  );
-  const setTextValue = useCallback25(
-    (value2) => {
+  const highlightSelectedItem = useCallback26((selected2) => {
+    var _a2;
+    if (Array.isArray(selected2)) {
+      console.log("TODO multi selection");
+    } else if (selected2 == null) {
+      (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
+    }
+  }, []);
+  const setTextValue = useCallback26(
+    (value2, applyFilter = true) => {
       setValue(value2);
-      setFilterPattern(value2 === "" ? void 0 : value2);
+      if (applyFilter) {
+        setFilterPattern(value2 === "" ? void 0 : value2);
+      }
     },
     [setFilterPattern, setValue]
   );
-  const reconcileInput = useCallback25(
-    (selected2 = selectedRef.current) => {
-      var _a2;
-      let value2 = "";
+  const reconcileInput = useCallback26(
+    (selected2) => {
+      let newValue = allowFreeText ? value != null ? value : "" : "";
       if (Array.isArray(selected2)) {
-        console.log("TODO multi selection");
-      } else if (selected2 != null && selected2.value !== null) {
-        value2 = itemToString2(selected2.value);
+        if (selected2.length === 1) {
+          newValue = itemToString2(selected2[0]);
+        } else if (selected2.length > 1) {
+          newValue = (itemsToString == null ? void 0 : itemsToString(selected2)) || "";
+        }
+      } else if (selected2) {
+        newValue = itemToString2(selected2);
       }
-      setTextValue(value2);
-      if (value2 === "") {
-        (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
+      if (newValue !== value) {
+        setTextValue(newValue, !isMultiSelect);
+        onSetSelectedText == null ? void 0 : onSetSelectedText(newValue);
+        return true;
       } else {
-        highlightSelectedItem(selected2);
+        return false;
       }
     },
-    [highlightSelectedItem, itemToString2, setTextValue]
+    [
+      allowFreeText,
+      isMultiSelect,
+      itemToString2,
+      itemsToString,
+      onSetSelectedText,
+      setTextValue,
+      value
+    ]
   );
-  const applySelection = useCallback25(
-    (evt, selected2) => {
-      if (!isMultiSelect) {
-        setIsOpen(false);
+  const applySelection = useCallback26(() => {
+    const { current: selected2 } = selectedRef;
+    if (reconcileInput(selected2)) {
+      if (selected2) {
+        if (Array.isArray(selected2)) {
+          onSelectionChange == null ? void 0 : onSelectionChange(
+            null,
+            selected2
+          );
+        } else if (selected2) {
+          onSelectionChange == null ? void 0 : onSelectionChange(
+            null,
+            selected2
+          );
+        }
+      }
+    }
+  }, [onSelectionChange, reconcileInput]);
+  const selectFreeTextInputValue = useCallback26(() => {
+    if (allowFreeText) {
+      const text = value == null ? void 0 : value.trim();
+      const { current: selected2 } = selectedRef;
+      if (text) {
+        if (itemCount === 0 && text) {
+          if (isMultiSelect) {
+            onSelectionChange == null ? void 0 : onSelectionChange(null, [
+              text
+            ]);
+          } else {
+            onSelectionChange == null ? void 0 : onSelectionChange(null, text);
+          }
+          selectedRef.current = null;
+          return true;
+        } else if (selected2 && !isMultiSelect) {
+          if (selected2 && !Array.isArray(selected2) && itemToString2(selected2) === text) {
+          }
+        }
+      }
+    }
+    return false;
+  }, [
+    allowFreeText,
+    value,
+    itemCount,
+    isMultiSelect,
+    onSelectionChange,
+    itemToString2
+  ]);
+  const handleOpenChange = useCallback26(
+    (open, closeReason) => {
+      if (open && isMultiSelect) {
+        setTextValue("", false);
+      }
+      setIsOpen(open);
+      onOpenChange == null ? void 0 : onOpenChange(open);
+      if (!open && closeReason !== "Escape") {
+        if (!selectFreeTextInputValue()) {
+          applySelection();
+        }
       }
-      selectedRef.current = selected2;
-      reconcileInput(selected2);
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, collectionItemsToItem(selected2 != null ? selected2 : null));
     },
     [
-      collectionItemsToItem,
+      applySelection,
       isMultiSelect,
-      onSelectionChange,
-      reconcileInput,
-      setIsOpen
+      onOpenChange,
+      selectFreeTextInputValue,
+      setIsOpen,
+      setTextValue
     ]
   );
-  const handleSelectionChange = useCallback25(
+  const handleSelectionChange = useCallback26(
     (evt, selected2) => {
+      selectedRef.current = selected2;
       if (!isMultiSelect) {
-        const selectedCollectionItem = itemToCollectionItem(selected2);
-        applySelection(evt, selectedCollectionItem);
-      }
-    },
-    [applySelection, isMultiSelect, itemToCollectionItem]
-  );
-  const handleFirstItemSelection = useCallback25(
-    (evt) => {
-      if (!allowFreeText && evt.key === "Enter" && quickSelection) {
-        const [firstItem] = indexPositions;
-        applySelection(evt, firstItem);
+        handleOpenChange(false, "select");
       }
     },
-    [allowFreeText, applySelection, indexPositions, quickSelection]
+    [handleOpenChange, isMultiSelect]
   );
-  const handleInputKeyDown = useCallback25(
-    (evt) => {
-      if ("Escape" === evt.key) {
-        if (allowFreeText) {
-          setTextValue("");
-        } else {
-          reconcileInput();
-        }
-      } else if ("Tab" === evt.key) {
-        if (!allowFreeText) {
-          reconcileInput();
-        }
-      }
-      handleFirstItemSelection(evt);
-    },
-    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]
-  );
-  const handleKeyboardNavigation = useCallback25(() => {
+  const handleKeyboardNavigation = useCallback26(() => {
     setDisableAriaActiveDescendant(false);
   }, []);
   const {
@@ -5282,41 +5397,26 @@ var useCombobox = ({
     highlightedIndex,
     listControlProps,
     listHandlers: listHookListHandlers,
-    selected,
-    setSelected
+    selected
   } = useList({
     collectionHook,
     containerRef: listRef,
     defaultHighlightedIndex: initialHighlightedIndex,
+    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
     disableAriaActiveDescendant,
     disableHighlightOnFocus: true,
     disableTypeToSelect: true,
-    label: "useComboBox",
     onKeyboardNavigation: handleKeyboardNavigation,
-    onKeyDown: handleInputKeyDown,
+    // onKeyDown: handleInputKeyDown,
     onSelectionChange: handleSelectionChange,
-    // we are controlling selection from a ref value - is this right ?
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    selected: selectedRef.current,
+    selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionKeys: EnterOnly,
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
   setHighlightedIndexRef.current = setHighlightedIndex;
-  setSelectedRef.current = setSelected;
-  const handleOpenChange = useCallback25(
-    (open) => {
-      setIsOpen(open);
-      if (!open) {
-        setQuickSelection(false);
-      }
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange, setIsOpen]
-  );
   const { onClick: listHandlersOnClick } = listHookListHandlers;
-  const handleListClick = useCallback25(
+  const handleListClick = useCallback26(
     (evt) => {
       var _a2;
       (_a2 = document.getElementById(`${id}-input`)) == null ? void 0 : _a2.focus();
@@ -5324,7 +5424,7 @@ var useCombobox = ({
     },
     [id, listHandlersOnClick]
   );
-  const handleInputChange = useCallback25(
+  const handleInputChange = useCallback26(
     (evt) => {
       const newValue = evt.target.value;
       setValue(newValue);
@@ -5332,20 +5432,14 @@ var useCombobox = ({
         setFilterPattern(newValue);
       } else {
         setFilterPattern(void 0);
-        selectedRef.current = null;
-        onSelectionChange == null ? void 0 : onSelectionChange(
-          evt,
-          null
-        );
       }
       setIsOpen(true);
-      setQuickSelection(newValue.length > 0 && !allowFreeText);
     },
-    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]
+    [setFilterPattern, setIsOpen, setValue]
   );
   const { onFocus: inputOnFocus = onFocus } = inputProps;
   const { onFocus: listOnFocus } = listControlProps;
-  const handleInputFocus = useCallback25(
+  const handleInputFocus = useCallback26(
     (evt) => {
       setDisableAriaActiveDescendant(false);
       listOnFocus == null ? void 0 : listOnFocus(evt);
@@ -5353,70 +5447,29 @@ var useCombobox = ({
     },
     [inputOnFocus, listOnFocus]
   );
-  const listFocused = useCallback25(
+  const listFocused = useCallback26(
     (evt) => {
       const element = evt.relatedTarget;
       return (element == null ? void 0 : element.id) === `${id}-list`;
     },
     [id]
   );
-  const selectInputValue = useCallback25(
-    (evt) => {
-      var _a2;
-      const text = value.trim();
-      if (text) {
-        const selectedCollectionItem = stringToCollectionItem(
-          text
-        );
-        if (selectedCollectionItem) {
-          if (Array.isArray(selectedCollectionItem)) {
-          } else if (selectedCollectionItem !== selected) {
-            (_a2 = setSelectedRef.current) == null ? void 0 : _a2.call(setSelectedRef, selectedCollectionItem);
-            onSelectionChange == null ? void 0 : onSelectionChange(
-              evt,
-              selectedCollectionItem.value
-            );
-          }
-        } else if (stringToItem) {
-          const item = stringToItem(text);
-          if (item) {
-            console.log("we have a new item");
-          }
-        }
-      }
-    },
-    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]
-  );
   const { onBlur: inputOnBlur = onBlur } = inputProps;
   const { onBlur: listOnBlur } = listControlProps;
-  const handleInputBlur = useCallback25(
+  const handleInputBlur = useCallback26(
     (evt) => {
       if (listFocused(evt)) {
       } else {
         listOnBlur == null ? void 0 : listOnBlur(evt);
         inputOnBlur == null ? void 0 : inputOnBlur(evt);
-        if (allowFreeText) {
-          selectInputValue(evt);
-        } else {
-          reconcileInput();
-        }
         setDisableAriaActiveDescendant(true);
         ignoreSelectOnFocus.current = true;
-        setIsOpen(false);
       }
     },
-    [
-      listFocused,
-      listOnBlur,
-      inputOnBlur,
-      allowFreeText,
-      setIsOpen,
-      selectInputValue,
-      reconcileInput
-    ]
+    [listFocused, listOnBlur, inputOnBlur]
   );
   const { onSelect: inputOnSelect } = inputProps;
-  const handleInputSelect = useCallback25(
+  const handleInputSelect = useCallback26(
     (event) => {
       if (ignoreSelectOnFocus.current) {
         ignoreSelectOnFocus.current = false;
@@ -5429,16 +5482,13 @@ var useCombobox = ({
   );
   useLayoutEffectSkipFirst2(() => {
     if (hasSelection(selected)) {
-      highlightSelectedItem();
+      highlightSelectedItem(selected);
     } else {
       setHighlightedIndex(initialHighlightedIndex);
     }
-    if (indexPositions.length === 0) {
-      setIsOpen(false);
-    }
   }, [
     highlightSelectedItem,
-    indexPositions.length,
+    itemCount,
     initialHighlightedIndex,
     selected,
     setHighlightedIndex,
@@ -5447,7 +5497,8 @@ var useCombobox = ({
   const mergedInputProps = {
     ...inputProps.inputProps,
     // "aria-owns": listId,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    autoComplete: "off"
   };
   return {
     focusVisible,
@@ -5464,7 +5515,6 @@ var useCombobox = ({
       role: "combobox",
       value
     },
-    // listControlProps,
     listControlProps: {
       ...listControlProps,
       onBlur: handleInputBlur,
@@ -5474,57 +5524,69 @@ var useCombobox = ({
       ...listHookListHandlers,
       onClick: handleListClick
     },
-    selected
+    selected: selectedRef.current
   };
 };
 
 // src/list/ChevronIcon.tsx
 import cx8 from "classnames";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var classBase7 = "vuuChevronIcon";
 var ChevronIcon = (props) => {
   const { direction, ...htmlAttributes } = props;
-  return /* @__PURE__ */ jsx14("span", { ...htmlAttributes, className: cx8(classBase7, direction) });
+  return /* @__PURE__ */ jsx15("span", { ...htmlAttributes, className: cx8(classBase7, direction) });
 };
 
 // src/combo-box/ComboBox.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var ComboBox = forwardRef8(function Combobox({
   InputProps: InputProps5,
   ListProps: ListProps3,
+  PopupProps,
   ListItem: ListItem4,
   "aria-label": ariaLabel,
   allowFreeText,
   children,
   defaultIsOpen,
+  defaultSelected,
   defaultValue,
   disabled,
   onBlur,
   onFocus,
   onChange,
   onSelect,
+  onSetSelectedText,
   getFilterRegex,
   id: idProp,
   initialHighlightedIndex = -1,
   isOpen: isOpenProp,
-  itemToString: itemToString2,
+  itemToString: itemToString2 = itemToString,
+  itemsToString,
   onOpenChange: onOpenChangeProp,
   onSelectionChange,
+  selected: selectedProp,
   selectionStrategy,
   source,
-  stringToItem,
   value: valueProp,
   width = 180,
   ...props
 }, forwardedRef) {
   const id = useId4(idProp);
-  const listRef = useRef24(null);
+  const listRef = useRef25(null);
+  const valueFromSelected = (item) => {
+    return Array.isArray(item) && item.length > 0 ? item[0] : void 0;
+  };
+  const getInitialValue = (items1, items2) => {
+    const item = items1 ? valueFromSelected(items1) : items2 ? valueFromSelected(items2) : void 0;
+    return item ? itemToString2(item) : "";
+  };
+  const initialValue = getInitialValue(selectedProp, defaultSelected);
   const collectionHook = useCollectionItems({
     id,
     source,
     children,
     options: {
-      filterPattern: valueProp != null ? valueProp : defaultValue,
+      filterPattern: initialValue,
       getFilterRegex,
       itemToString: itemToString2
     }
@@ -5544,9 +5606,12 @@ var ComboBox = forwardRef8(function Combobox({
     ariaLabel,
     collectionHook,
     defaultIsOpen,
+    defaultSelected,
     defaultValue,
     disabled,
     initialHighlightedIndex,
+    itemCount: collectionHook.data.length,
+    label: props.title,
     listRef,
     onBlur,
     onFocus,
@@ -5555,39 +5620,33 @@ var ComboBox = forwardRef8(function Combobox({
     id,
     isOpen: isOpenProp,
     itemToString: itemToString2,
-    label: "ComboBox",
+    itemsToString,
     onOpenChange: onOpenChangeProp,
     onSelectionChange,
+    onSetSelectedText,
+    selected: selectedProp,
     selectionStrategy,
-    stringToItem,
-    value: valueProp
+    value: initialValue
   });
-  const collectionItemsToItem = useCallback26(
-    (sel) => {
-      if (Array.isArray(sel)) {
-        return sel.map((i) => i.value);
-      } else if (sel) {
-        return sel.value;
-      } else {
-        return sel;
-      }
-    },
-    []
-  );
-  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ jsx15(
+  const handleDropdownIconClick = useCallback27(() => {
+    if (isOpen) {
+      onOpenChange(false, "toggle");
+    } else {
+      onOpenChange(true);
+    }
+  }, [isOpen, onOpenChange]);
+  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ jsx16(
     ChevronIcon,
     {
       direction: isOpen ? "up" : "down",
-      onClick: () => {
-        onOpenChange(!isOpen);
-      }
+      onClick: handleDropdownIconClick
     }
   );
-  return /* @__PURE__ */ jsx15(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx16(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs7(
     DropdownBase,
     {
       ...props,
-      fullWidth: true,
+      PopupProps,
       id,
       isOpen,
       onOpenChange,
@@ -5595,7 +5654,7 @@ var ComboBox = forwardRef8(function Combobox({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           Input,
           {
             ...inputProps,
@@ -5604,11 +5663,12 @@ var ComboBox = forwardRef8(function Combobox({
             endAdornment
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           List,
           {
             ...ListProps3,
             ListItem: ListItem4,
+            defaultSelected: void 0,
             focusVisible,
             highlightedIndex,
             itemTextHighlightPattern: String(inputProps.value) || void 0,
@@ -5616,8 +5676,9 @@ var ComboBox = forwardRef8(function Combobox({
             listHandlers,
             onSelectionChange,
             ref: listRef,
-            selected: collectionItemsToItem(selected),
-            selectionStrategy
+            selected,
+            selectionStrategy,
+            tabIndex: -1
           }
         )
       ]
@@ -5662,8 +5723,8 @@ function applyRules(rules, value) {
 
 // src/editable/useEditableText.ts
 import {
-  useCallback as useCallback27,
-  useRef as useRef25,
+  useCallback as useCallback28,
+  useRef as useRef26,
   useState as useState12
 } from "react";
 var dispatchCommitEvent = (el) => {
@@ -5677,13 +5738,13 @@ var useEditableText = ({
 }) => {
   const [message, setMessage] = useState12();
   const [value, setValue] = useState12(initialValue);
-  const initialValueRef = useRef25(initialValue);
-  const isDirtyRef = useRef25(false);
-  const hasCommittedRef = useRef25(false);
-  const handleBlur = useCallback27(() => {
+  const initialValueRef = useRef26(initialValue);
+  const isDirtyRef = useRef26(false);
+  const hasCommittedRef = useRef26(false);
+  const handleBlur = useCallback28(() => {
     console.log("blur");
   }, []);
-  const handleKeyDown = useCallback27(
+  const handleKeyDown = useCallback28(
     (evt) => {
       if (evt.key === "Enter") {
         evt.stopPropagation();
@@ -5715,7 +5776,7 @@ var useEditableText = ({
     },
     [clientSideEditValidationCheck, onCommit, value]
   );
-  const handleChange = useCallback27(
+  const handleChange = useCallback28(
     (evt) => {
       const { value: value2 } = evt.target;
       isDirtyRef.current = value2 !== initialValueRef.current;
@@ -5743,13 +5804,13 @@ var useEditableText = ({
 // src/editable-label/EditableLabel.tsx
 import cx9 from "classnames";
 import {
-  useCallback as useCallback28,
+  useCallback as useCallback29,
   useLayoutEffect as useLayoutEffect3,
   forwardRef as forwardRef9,
-  useRef as useRef26
+  useRef as useRef27
 } from "react";
 import { Input as Input2, useControlled as useControlled6 } from "@salt-ds/core";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var classBase8 = "vuuEditableLabel";
 var EditableLabel = forwardRef9(function EditableLabel2({
   className: classNameProp,
@@ -5762,8 +5823,8 @@ var EditableLabel = forwardRef9(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
-  const inputRef = useRef26(null);
-  const editingRef = useRef26(false);
+  const inputRef = useRef27(null);
+  const editingRef = useRef27(false);
   const [value, setValue] = useControlled6({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : "",
@@ -5776,13 +5837,13 @@ var EditableLabel = forwardRef9(function EditableLabel2({
     name: "EditableLabel",
     state: "editing"
   });
-  const setEditing = useCallback28(
+  const setEditing = useCallback29(
     (value2) => {
       _setEditing(editingRef.current = value2);
     },
     [_setEditing]
   );
-  const initialValue = useRef26(value);
+  const initialValue = useRef27(value);
   useLayoutEffect3(() => {
     if (editing) {
       if (inputRef.current !== null) {
@@ -5791,7 +5852,7 @@ var EditableLabel = forwardRef9(function EditableLabel2({
       }
     }
   }, [editing, inputRef]);
-  const enterEditMode = useCallback28(() => {
+  const enterEditMode = useCallback29(() => {
     setEditing(true);
     onEnterEditMode && onEnterEditMode();
   }, [onEnterEditMode, setEditing]);
@@ -5836,7 +5897,7 @@ var EditableLabel = forwardRef9(function EditableLabel2({
   const className = cx9(classBase8, classNameProp, {
     [`${classBase8}-editing`]: editing
   });
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ...restProps,
@@ -5844,7 +5905,7 @@ var EditableLabel = forwardRef9(function EditableLabel2({
       onDoubleClick: handleDoubleClick,
       "data-text": value,
       ref: forwardedRef,
-      children: editing ? /* @__PURE__ */ jsx16(
+      children: editing ? /* @__PURE__ */ jsx17(
         Input2,
         {
           inputProps: { className: `${classBase8}-input`, spellCheck: false },
@@ -5857,7 +5918,7 @@ var EditableLabel = forwardRef9(function EditableLabel2({
           textAlign: "left",
           variant: "secondary"
         }
-      ) : /* @__PURE__ */ jsx16("span", { className: `${classBase8}-label`, children: value })
+      ) : /* @__PURE__ */ jsx17("span", { className: `${classBase8}-label`, children: value })
     }
   );
 });
@@ -5866,10 +5927,10 @@ var EditableLabel = forwardRef9(function EditableLabel2({
 import { Input as Input3 } from "@salt-ds/core";
 import cx10 from "classnames";
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var classBase9 = "vuuExpandoInput";
 var ExpandoInput = forwardRef10(function ExpandoInput2({ className: classNameProp, value, inputProps, ...InputProps5 }, forwardedRef) {
-  return /* @__PURE__ */ jsx17("div", { className: cx10(classBase9, classNameProp), "data-text": value, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18("div", { className: cx10(classBase9, classNameProp), "data-text": value, children: /* @__PURE__ */ jsx18(
     Input3,
     {
       ...InputProps5,
@@ -5884,7 +5945,7 @@ var ExpandoInput = forwardRef10(function ExpandoInput2({ className: classNamePro
 });
 
 // src/inputs/Checkbox.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
   return /* @__PURE__ */ jsxs8(
@@ -5894,7 +5955,7 @@ var Checkbox = (props) => {
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ jsx18(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ jsx19(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -5902,28 +5963,29 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
   return /* @__PURE__ */ jsxs9("div", { className: "vuuRadioButton", onClick, children: [
     /* @__PURE__ */ jsxs9("div", { className: "radio", children: [
-      /* @__PURE__ */ jsx19("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ jsx19(RadioIcon, { checked })
+      /* @__PURE__ */ jsx20("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ jsx20(RadioIcon, { checked })
     ] }),
     label
   ] });
 };
 
-// src/instrument-search/InstrumentSearch.tsx
-import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-layout";
-import { TableNext } from "@vuu-ui/vuu-table";
-import { FormField, FormFieldLabel, Input as Input4 } from "@salt-ds/core";
-import cx11 from "classnames";
-import { useCallback as useCallback29, useState as useState13 } from "react";
+// src/instrument-picker/InstrumentPicker.tsx
+import { useId as useId5 } from "@vuu-ui/vuu-layout";
+import {
+  TableNext
+} from "@vuu-ui/vuu-table";
+import { Input as Input4 } from "@salt-ds/core";
+import { forwardRef as forwardRef11, useMemo as useMemo15 } from "react";
 
-// src/instrument-search/SearchCell.tsx
+// src/instrument-picker/SearchCell.tsx
 import { registerComponent } from "@vuu-ui/vuu-utils";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var classBase10 = "vuuSearchCell";
 var SearchCell = ({
   column,
@@ -5933,7 +5995,7 @@ var SearchCell = ({
   const key = columnMap[column.name];
   const value = row[key];
   return /* @__PURE__ */ jsxs10("div", { className: classBase10, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx20("span", { "data-icon": "draggable" }),
+    /* @__PURE__ */ jsx21("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -5942,9 +6004,176 @@ registerComponent("search-cell", SearchCell, "cell-renderer", {
   serverDataType: "private"
 });
 
+// src/instrument-picker/useInstrumentPicker.ts
+import { useCallback as useCallback30, useMemo as useMemo14, useState as useState13 } from "react";
+var useInstrumentPicker = ({
+  columnMap,
+  dataSource,
+  defaultIsOpen,
+  isOpen: isOpenProp,
+  onSelect,
+  searchColumns
+}) => {
+  const [value, setValue] = useState13("");
+  const [isOpen, setIsOpen] = useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen != null ? defaultIsOpen : false,
+    name: "useDropdownList"
+  });
+  console.log({ dataSource });
+  const baseFilterPattern = useMemo14(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const handleOpenChange = useCallback30(
+    (open) => {
+      setIsOpen(open);
+    },
+    [setIsOpen]
+  );
+  const handleInputChange = useCallback30(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      setValue(value2);
+      if (value2 && value2.trim().length) {
+        const filter = baseFilterPattern.replaceAll("__VALUE__", value2);
+        dataSource.filter = {
+          filter
+        };
+      } else {
+        dataSource.filter = {
+          filter: ""
+        };
+      }
+      setIsOpen(true);
+    },
+    [baseFilterPattern, dataSource, setIsOpen]
+  );
+  const handleSelectRow = useCallback30(
+    (row) => {
+      const { name } = columnMap;
+      const { [name]: value2 } = row;
+      setValue(value2);
+      setIsOpen(false);
+      onSelect(row);
+    },
+    [columnMap, onSelect, setIsOpen]
+  );
+  const inputProps = {
+    onChange: handleInputChange
+  };
+  const controlProps = {};
+  const tableHandlers = {
+    onSelect: handleSelectRow
+  };
+  return {
+    controlProps,
+    inputProps,
+    isOpen,
+    onOpenChange: handleOpenChange,
+    tableHandlers,
+    value
+  };
+};
+
+// src/instrument-picker/InstrumentPicker.tsx
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var classBase11 = "vuuInstrumentPicker";
+var InstrumentPicker = forwardRef11(function InstrumentPicker2({
+  TableProps: { dataSource, ...TableProps3 },
+  className,
+  columnMap,
+  disabled,
+  id: idProp,
+  onSelect,
+  schema,
+  searchColumns,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const id = useId5(idProp);
+  const {
+    controlProps,
+    inputProps,
+    isOpen,
+    onOpenChange,
+    tableHandlers,
+    value
+  } = useInstrumentPicker({ columnMap, dataSource, onSelect, searchColumns });
+  const endAdornment = useMemo15(() => /* @__PURE__ */ jsx22("span", { "data-icon": "chevron-down" }), []);
+  return /* @__PURE__ */ jsxs11(
+    DropdownBase,
+    {
+      ...htmlAttributes,
+      fullWidth: true,
+      id,
+      isOpen,
+      onOpenChange,
+      openOnFocus: true,
+      placement: "below-full-width",
+      ref: forwardedRef,
+      width,
+      children: [
+        /* @__PURE__ */ jsx22(
+          Input4,
+          {
+            ...inputProps,
+            disabled,
+            ...controlProps,
+            endAdornment,
+            value
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          TableNext,
+          {
+            rowHeight: 25,
+            renderBufferSize: 100,
+            ...TableProps3,
+            ...tableHandlers,
+            className: `${classBase11}-list`,
+            height: 200,
+            dataSource,
+            showColumnHeaders: false
+          }
+        )
+      ]
+    }
+  );
+});
+
 // src/instrument-search/InstrumentSearch.tsx
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var classBase11 = "vuuInstrumentSearch";
+import { registerComponent as registerComponent3 } from "@vuu-ui/vuu-layout";
+import { TableNext as TableNext2 } from "@vuu-ui/vuu-table";
+import { FormField, FormFieldLabel, Input as Input5 } from "@salt-ds/core";
+import cx11 from "classnames";
+import { useCallback as useCallback31, useState as useState14 } from "react";
+
+// src/instrument-search/SearchCell.tsx
+import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var classBase12 = "vuuSearchCell";
+var SearchCell2 = ({
+  column,
+  columnMap,
+  row
+}) => {
+  const key = columnMap[column.name];
+  const value = row[key];
+  return /* @__PURE__ */ jsxs12("div", { className: classBase12, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx23("span", { "data-icon": "draggable" }),
+    value
+  ] });
+};
+console.log("register SearchCell");
+registerComponent2("search-cell", SearchCell2, "cell-renderer", {
+  serverDataType: "private"
+});
+
+// src/instrument-search/InstrumentSearch.tsx
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+var classBase13 = "vuuInstrumentSearch";
 var defaultTableConfig = {
   columns: [
     { name: "bbg", hidden: true },
@@ -5961,16 +6190,16 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ jsx21("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ jsx24("span", { "data-icon": "search" });
 var InstrumentSearch = ({
-  TableProps: TableProps2,
+  TableProps: TableProps3,
   className,
   dataSource,
   searchColumn = "description",
   ...htmlAttributes
 }) => {
-  const [searchState, setSearchState] = useState13({ searchText: "", filter: "" });
-  const handleChange = useCallback29(
+  const [searchState, setSearchState] = useState14({ searchText: "", filter: "" });
+  const handleChange = useCallback31(
     (evt) => {
       const { value } = evt.target;
       const filter = `name starts "${value}"`;
@@ -5989,11 +6218,11 @@ var InstrumentSearch = ({
     },
     [dataSource, searchColumn]
   );
-  return /* @__PURE__ */ jsxs11("div", { ...htmlAttributes, className: cx11(classBase11, className), children: [
-    /* @__PURE__ */ jsxs11(FormField, { className: `${classBase11}-inputField`, children: [
-      /* @__PURE__ */ jsx21(FormFieldLabel, {}),
-      /* @__PURE__ */ jsx21(
-        Input4,
+  return /* @__PURE__ */ jsxs13("div", { ...htmlAttributes, className: cx11(classBase13, className), children: [
+    /* @__PURE__ */ jsxs13(FormField, { className: `${classBase13}-inputField`, children: [
+      /* @__PURE__ */ jsx24(FormFieldLabel, {}),
+      /* @__PURE__ */ jsx24(
+        Input5,
         {
           endAdornment: searchIcon,
           value: searchState.searchText,
@@ -6001,21 +6230,22 @@ var InstrumentSearch = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx21(
-      TableNext,
+    /* @__PURE__ */ jsx24(
+      TableNext2,
       {
         rowHeight: 25,
         config: defaultTableConfig,
         renderBufferSize: 100,
-        ...TableProps2,
-        className: `${classBase11}-list`,
+        ...TableProps3,
+        className: `${classBase13}-list`,
         dataSource,
         showColumnHeaders: false
       }
     )
   ] });
 };
-registerComponent2("InstrumentSearch", InstrumentSearch, "view");
+var _a;
+(_a = registerComponent3) == null ? void 0 : _a("InstrumentSearch", InstrumentSearch, "view");
 
 // src/price-ticker/PriceTicker.tsx
 import {
@@ -6023,10 +6253,10 @@ import {
   isValidNumber,
   numericFormatter
 } from "@vuu-ui/vuu-utils";
-import { memo as memo2, useMemo as useMemo13, useRef as useRef27 } from "react";
+import { memo as memo2, useMemo as useMemo16, useRef as useRef28 } from "react";
 import cx12 from "classnames";
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-var classBase12 = "vuuPriceTicker";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var classBase14 = "vuuPriceTicker";
 var getValueFormatter = (decimals) => numericFormatter({
   type: {
     name: "number",
@@ -6045,30 +6275,30 @@ var PriceTicker = memo2(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = useRef27(INITIAL_VALUE);
+    const ref = useRef28(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = useMemo13(() => getValueFormatter(decimals), [decimals]);
+    const formatNumber = useMemo16(() => getValueFormatter(decimals), [decimals]);
     const direction = isValidNumber(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ jsxs12("div", { ...htmlAttributes, className: cx12(classBase12, className, direction), children: [
+    return /* @__PURE__ */ jsxs14("div", { ...htmlAttributes, className: cx12(classBase14, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ jsx22("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ jsx25("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
 PriceTicker.displayName = "PriceTicker";
 
 // src/tabstrip/Tabstrip.tsx
-import { asReactElements, OverflowContainer, useId as useId5 } from "@vuu-ui/vuu-layout";
+import { asReactElements, OverflowContainer, useId as useId6 } from "@vuu-ui/vuu-layout";
 import { Button as Button2 } from "@salt-ds/core";
 import cx13 from "classnames";
-import React3, { useMemo as useMemo15, useRef as useRef31 } from "react";
+import React2, { useMemo as useMemo18, useRef as useRef32 } from "react";
 
 // src/tabstrip/useTabstrip.ts
 import { dispatchMouseEvent as dispatchMouseEvent3 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback33,
-  useRef as useRef30
+  useCallback as useCallback35,
+  useRef as useRef31
 } from "react";
 
 // src/tabstrip/TabMenuOptions.ts
@@ -6102,27 +6332,27 @@ var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditabl
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
 import { isValidNumber as isValidNumber2, MEASURES } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback30, useMemo as useMemo14, useRef as useRef28 } from "react";
+import { useCallback as useCallback32, useMemo as useMemo17, useRef as useRef29 } from "react";
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = useRef28(false);
-  const suspendAnimation = useCallback30(() => {
+  const animationSuspendedRef = useRef29(false);
+  const suspendAnimation = useCallback32(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = useCallback30(() => {
+  const resumeAnimation = useCallback32(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = useCallback30(() => {
-    var _a, _b;
-    (_a = containerRef.current) == null ? void 0 : _a.style.setProperty("--tab-thumb-transition", "none");
+  const onTransitionEnd = useCallback32(() => {
+    var _a2, _b;
+    (_a2 = containerRef.current) == null ? void 0 : _a2.style.setProperty("--tab-thumb-transition", "none");
     (_b = containerRef.current) == null ? void 0 : _b.removeEventListener("transitionend", onTransitionEnd);
   }, [containerRef]);
-  const lastSelectedRef = useRef28(-1);
-  return useMemo14(() => {
-    var _a, _b;
+  const lastSelectedRef = useRef29(-1);
+  return useMemo17(() => {
+    var _a2, _b;
     let offset = 0;
     let size = 0;
     if (lastSelectedRef.current !== -1) {
-      const oldSelected = (_a = containerRef.current) == null ? void 0 : _a.querySelector(".vuuTab-selected");
+      const oldSelected = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(".vuuTab-selected");
       const newSelected = (_b = containerRef.current) == null ? void 0 : _b.querySelector(
         `[data-index="${activeTabIndex}"] .vuuTab`
       );
@@ -6137,8 +6367,8 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
           const speed = orientation === "horizontal" ? 1100 : 700;
           const duration = Math.abs(offset / speed);
           requestAnimationFrame(() => {
-            var _a2, _b2, _c, _d;
-            (_a2 = containerRef.current) == null ? void 0 : _a2.style.setProperty(
+            var _a3, _b2, _c, _d;
+            (_a3 = containerRef.current) == null ? void 0 : _a3.style.setProperty(
               "--tab-thumb-offset",
               "0px"
             );
@@ -6192,9 +6422,9 @@ import {
   getFocusableElement
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback31,
-  useRef as useRef29,
-  useState as useState14
+  useCallback as useCallback33,
+  useRef as useRef30,
+  useState as useState15
 } from "react";
 import {
   ArrowDown as ArrowDown2,
@@ -6252,23 +6482,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = useRef29(false);
-  const focusedRef = useRef29(-1);
-  const [hasFocus, setHasFocus] = useState14(false);
-  const [, forceRefresh] = useState14({});
+  const mouseClickPending = useRef30(false);
+  const focusedRef = useRef30(-1);
+  const [hasFocus, setHasFocus] = useState15(false);
+  const [, forceRefresh] = useState15({});
   const [highlightedIdx, _setHighlightedIdx] = useControlled7({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = useCallback31(
+  const setHighlightedIdx = useCallback33(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = useRef29(false);
-  const focusTab = useCallback31(
+  const keyboardNavigation = useRef30(false);
+  const focusTab = useCallback33(
     (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(tabIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -6308,14 +6538,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = useCallback31(
+  const getIndexCount = useCallback33(
     () => {
-      var _a, _b;
-      return (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
+      var _a2, _b;
+      return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = useCallback31(
+  const nextFocusableItemIdx = useCallback33(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -6335,7 +6565,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = useCallback31(
+  const navigateChildItems = useCallback33(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -6357,14 +6587,14 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = useCallback31(() => {
+  const highlightedTabHasMenu = useCallback33(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateTabMenu = useCallback31(() => {
+  const activateTabMenu = useCallback33(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -6372,7 +6602,7 @@ var useKeyboardNavigation2 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback31(
+  const handleKeyDown = useCallback33(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -6397,7 +6627,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = useCallback31(() => {
+  const handleFocus = useCallback33(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -6407,7 +6637,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = useCallback31(() => {
+  const handleContainerMouseDown = useCallback33(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -6445,7 +6675,7 @@ var useKeyboardNavigation2 = ({
 
 // src/tabstrip/useSelection.ts
 import { useControlled as useControlled8 } from "@salt-ds/core";
-import { useCallback as useCallback32 } from "react";
+import { useCallback as useCallback34 } from "react";
 var defaultSelectionKeys2 = ["Enter", " "];
 var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
 var useSelection2 = ({
@@ -6460,18 +6690,18 @@ var useSelection2 = ({
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = useCallback32(
+  const isSelectionEvent = useCallback34(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = useCallback32(
+  const selectItem = useCallback34(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = useCallback32(
+  const handleKeyDown = useCallback34(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -6482,7 +6712,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = useCallback32(
+  const onClick = useCallback34(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -6522,7 +6752,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = useRef30(activeTabIndexProp);
+  const lastSelection = useRef31(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -6552,7 +6782,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = useCallback33(
+  const handleDrop = useCallback35(
     (fromIndex, toIndex) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -6594,7 +6824,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = useCallback33(
+  const handleExitEditMode = useCallback35(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -6606,7 +6836,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = useCallback33(
+  const handleClick = useCallback35(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -6614,7 +6844,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = useCallback33(
+  const getEditableLabel = useCallback35(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -6623,7 +6853,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = useCallback33(
+  const tabInEditMode = useCallback35(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -6633,7 +6863,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = useCallback33(
+  const editTab = useCallback35(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
@@ -6642,7 +6872,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = useCallback33(
+  const handleKeyDown = useCallback35(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -6654,7 +6884,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = useCallback33(
+  const handleCloseTabFromMenu = useCallback35(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -6667,14 +6897,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = useCallback33(
+  const handleRenameTabFromMenu = useCallback35(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = useCallback33(
+  const handleTabMenuAction = useCallback35(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -6690,7 +6920,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = useCallback33(() => {
+  const handleTabMenuClose = useCallback35(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -6702,7 +6932,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = useCallback33(
+  const onSwitchWrappedItemIntoView = useCallback35(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -6715,7 +6945,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = useCallback33(() => {
+  const handleAddTabClick = useCallback35(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -6748,9 +6978,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
-var classBase13 = "vuuTabstrip";
+var classBase15 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -6773,7 +7003,7 @@ var Tabstrip = ({
   style: styleProp,
   ...htmlAttributes
 }) => {
-  const rootRef = useRef31(null);
+  const rootRef = useRef32(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -6795,13 +7025,13 @@ var Tabstrip = ({
     onMoveTab,
     orientation
   });
-  const id = useId5(idProp);
-  const className = cx13(classBase13, `${classBase13}-${orientation}`, classNameProp);
+  const id = useId6(idProp);
+  const className = cx13(classBase15, `${classBase15}-${orientation}`, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = useMemo15(
+  const tabs = useMemo18(
     () => asReactElements(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
@@ -6811,7 +7041,7 @@ var Tabstrip = ({
         showMenuButton = showTabMenuButton
       } = child.props;
       const selected = index === activeTabIndex;
-      return React3.cloneElement(child, {
+      return React2.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
         closeable,
@@ -6833,7 +7063,7 @@ var Tabstrip = ({
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase13}-addTabButton`,
+          className: `${classBase15}-addTabButton`,
           "data-icon": "add",
           "data-overflow-priority": "1",
           key: "addButton",
@@ -6859,8 +7089,8 @@ var Tabstrip = ({
       tabstripHook.navigationProps
     ]
   );
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsx26(
       OverflowContainer,
       {
         ...htmlAttributes,
@@ -6883,17 +7113,17 @@ var Tabstrip = ({
 import { useForkRef as useForkRef7 } from "@salt-ds/core";
 import cx15 from "classnames";
 import {
-  forwardRef as forwardRef11,
-  useCallback as useCallback34,
-  useRef as useRef32
+  forwardRef as forwardRef12,
+  useCallback as useCallback36,
+  useRef as useRef33
 } from "react";
 
 // src/tabstrip/TabMenu.tsx
 import { PopupMenu } from "@vuu-ui/vuu-popups";
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo19 } from "react";
 import cx14 from "classnames";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var classBase14 = "vuuTabMenu";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var classBase16 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -6903,7 +7133,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = useMemo16(
+  const [menuBuilder, menuOptions] = useMemo19(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -6922,10 +7152,10 @@ var TabMenu = ({
     ],
     [allowClose, allowRename, controlledComponentId, index]
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     PopupMenu,
     {
-      className: classBase14,
+      className: classBase16,
       menuBuilder,
       menuActionHandler: onMenuAction,
       menuLocation: cx14("tab", location),
@@ -6937,10 +7167,10 @@ var TabMenu = ({
 };
 
 // src/tabstrip/Tab.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var classBase15 = "vuuTab";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var classBase17 = "vuuTab";
 var noop = () => void 0;
-var Tab = forwardRef11(function Tab2({
+var Tab = forwardRef12(function Tab2({
   ariaControls,
   children,
   className,
@@ -6969,10 +7199,10 @@ var Tab = forwardRef11(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = useRef32(null);
-  const editableRef = useRef32(null);
+  const rootRef = useRef33(null);
+  const editableRef = useRef33(null);
   const setForkRef = useForkRef7(ref, rootRef);
-  const handleClick = useCallback34(
+  const handleClick = useCallback36(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -6997,7 +7227,7 @@ var Tab = forwardRef11(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx28(
         EditableLabel,
         {
           editing,
@@ -7022,18 +7252,18 @@ var Tab = forwardRef11(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: cx15(classBase15, {
-        [`${classBase15}-closeable`]: closeable,
+      className: cx15(classBase17, {
+        [`${classBase17}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
-        [`${classBase15}-editing`]: editing,
-        [`${classBase15}-selected`]: selected || void 0,
-        [`${classBase15}-vertical`]: orientation === "vertical",
+        [`${classBase17}-editing`]: editing,
+        [`${classBase17}-selected`]: selected || void 0,
+        [`${classBase17}-vertical`]: orientation === "vertical",
         [`vuuFocusVisible`]: focusVisible
       }),
       onClick: handleClick,
@@ -7043,15 +7273,15 @@ var Tab = forwardRef11(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ jsx25("div", { className: `${classBase15}-main`, children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28("div", { className: `${classBase17}-main`, children: /* @__PURE__ */ jsx28(
           "span",
           {
-            className: `${classBase15}-text`,
+            className: `${classBase17}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ jsx25(
+        showMenuButton ? /* @__PURE__ */ jsx28(
           TabMenu,
           {
             allowClose: closeable,
@@ -7069,21 +7299,21 @@ var Tab = forwardRef11(function Tab2({
 });
 
 // src/tree/Tree.tsx
-import { useForkRef as useForkRef8, useIdMemo as useId6 } from "@salt-ds/core";
+import { useForkRef as useForkRef8, useIdMemo as useId7 } from "@salt-ds/core";
 import cx16 from "classnames";
 import {
-  forwardRef as forwardRef12,
-  useRef as useRef39
+  forwardRef as forwardRef13,
+  useRef as useRef40
 } from "react";
 
 // src/tree/list-dom-utils.ts
 function listItemIndex2(listItemEl) {
-  var _a;
+  var _a2;
   if (listItemEl) {
     let idx = listItemEl.dataset.idx;
     if (idx) {
       return parseInt(idx, 10);
-    } else if (idx = (_a = listItemEl.ariaPosInSet) != null ? _a : "-1") {
+    } else if (idx = (_a2 = listItemEl.ariaPosInSet) != null ? _a2 : "-1") {
       return parseInt(idx, 10) - 1;
     }
   }
@@ -7092,7 +7322,7 @@ var closestListItem2 = (el) => el.closest("[data-idx],[aria-posinset]");
 var closestListItemIndex2 = (el) => listItemIndex2(closestListItem2(el));
 
 // src/tree/use-items-with-ids.ts
-import { useCallback as useCallback35, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback37, useMemo as useMemo20 } from "react";
 var PathSeparators2 = /* @__PURE__ */ new Set(["/", "-", "."]);
 var isPathSeparator2 = (char) => PathSeparators2.has(char);
 var isParentPath2 = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator2(childPath[parentPath.length]);
@@ -7116,7 +7346,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = useCallback35(
+  const isExpanded2 = useCallback37(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -7125,17 +7355,17 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = useCallback35(
+  const normalizeItems = useCallback37(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
-        var _a;
+        var _a2;
         const isCollapsibleHeader = item.header && collapsibleHeaders;
         const isNonCollapsibleGroupNode = item.childNodes && collapsibleHeaders === false;
         const isLeaf3 = !item.childNodes || item.childNodes.length === 0;
         const nonCollapsible = isNonCollapsibleGroupNode || isLeaf3 && !isCollapsibleHeader;
         const childPath = path ? `${path}.${i}` : `${i}`;
-        const id = (_a = item.id) != null ? _a : `${idRoot}-${childPath}`;
+        const id = (_a2 = item.id) != null ? _a2 : `${idRoot}-${childPath}`;
         const expanded = nonCollapsible ? void 0 : isExpanded2(id);
         const normalisedItem = {
           ...item,
@@ -7169,15 +7399,15 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = useMemo17(() => {
+  const [count, sourceWithIds, flattenedSource] = useMemo20(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = useCallback35(
+  const sourceItemById = useCallback37(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
-          var _a;
-          return i.id === id || ((_a = i == null ? void 0 : i.childNodes) == null ? void 0 : _a.length) && isParentPath2(i.id, id);
+          var _a2;
+          return i.id === id || ((_a2 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a2.length) && isParentPath2(i.id, id);
         }
       );
       if ((sourceWithId == null ? void 0 : sourceWithId.id) === id) {
@@ -7193,8 +7423,8 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 
 // src/tree/use-selection.ts
 import {
-  useCallback as useCallback36,
-  useRef as useRef33
+  useCallback as useCallback38,
+  useRef as useRef34
 } from "react";
 import { useControlled as useControlled9 } from "@salt-ds/core";
 var SINGLE = "single";
@@ -7217,8 +7447,8 @@ var useSelection3 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = useRef33(-1);
-  const isSelectionEvent = useCallback36(
+  const lastActive = useRef34(-1);
+  const isSelectionEvent = useCallback38(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
@@ -7227,7 +7457,7 @@ var useSelection3 = ({
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = useCallback36(
+  const selectItemAtIndex = useCallback38(
     (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
       const { current: active } = lastActive;
       const isSelected2 = selected == null ? void 0 : selected.includes(id);
@@ -7268,7 +7498,7 @@ var useSelection3 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = useCallback36(
+  const handleKeyDown = useCallback38(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -7293,7 +7523,7 @@ var useSelection3 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = useCallback36(
+  const handleKeyboardNavigation = useCallback38(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -7306,7 +7536,7 @@ var useSelection3 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = useCallback36(
+  const handleClick = useCallback38(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -7341,18 +7571,18 @@ var useSelection3 = ({
 
 // src/tree/use-viewport-tracking.ts
 import {
-  useCallback as useCallback37,
-  useEffect as useEffect6,
+  useCallback as useCallback39,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef34
+  useRef as useRef35
 } from "react";
 var HeightOnly3 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = useRef34(0);
-  const scrolling = useRef34(false);
-  const rootHeight = useRef34(0);
-  const rootScrollHeight = useRef34(0);
-  const scrollIntoView = useCallback37(
+  const scrollTop = useRef35(0);
+  const scrolling = useRef35(false);
+  const rootHeight = useRef35(0);
+  const rootScrollHeight = useRef35(0);
+  const scrollIntoView = useCallback39(
     (el) => {
       const targetEl = el.ariaExpanded ? el.firstChild : el;
       const headerHeight = stickyHeaders ? 30 : 0;
@@ -7373,10 +7603,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = useCallback37((e) => {
+  const scrollHandler = useCallback39((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const { current: rootEl } = root;
     if (rootEl) {
       rootEl.addEventListener("scroll", scrollHandler);
@@ -7404,9 +7634,9 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     }
   }, [highlightedIdx, root, scrollIntoView]);
-  useEffect6(() => {
+  useEffect7(() => {
   }, [stickyHeaders]);
-  const onResize = useCallback37(({ height, scrollHeight }) => {
+  const onResize = useCallback39(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -7415,10 +7645,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-import { useCallback as useCallback41, useRef as useRef38 } from "react";
+import { useCallback as useCallback43, useRef as useRef39 } from "react";
 
 // src/tree/use-keyboard-navigation.ts
-import { useCallback as useCallback38, useMemo as useMemo18, useRef as useRef35 } from "react";
+import { useCallback as useCallback40, useMemo as useMemo21, useRef as useRef36 } from "react";
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -7568,7 +7798,7 @@ var useKeyboardNavigation3 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo18(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo21(
     () => ({
       bwd: ArrowUp3,
       fwd: ArrowDown3
@@ -7580,14 +7810,14 @@ var useKeyboardNavigation3 = ({
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = useCallback38(
+  const setHighlightedIndex = useCallback40(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = useCallback38(
+  const nextFocusableItemIdx = useCallback40(
     (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {
       let nextIdx = nextItemIdx3(treeNodes.length, key, idx);
       while (nextIdx !== -1 && (key === ArrowFwd && nextIdx < treeNodes.length || key === ArrowBwd && nextIdx > 0) && !isFocusable3(treeNodes[nextIdx])) {
@@ -7597,10 +7827,10 @@ var useKeyboardNavigation3 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = useRef35(true);
-  const ignoreFocus = useRef35(false);
+  const keyBoardNavigation = useRef36(true);
+  const ignoreFocus = useRef36(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = useCallback38(() => {
+  const handleFocus = useCallback40(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -7613,7 +7843,7 @@ var useKeyboardNavigation3 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = useCallback38(
+  const navigateChildItems = useCallback40(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -7628,7 +7858,7 @@ var useKeyboardNavigation3 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = useCallback38(
+  const handleKeyDown = useCallback40(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey3(e, "vertical")) {
         e.preventDefault();
@@ -7639,7 +7869,7 @@ var useKeyboardNavigation3 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = useMemo18(
+  const listProps = useMemo21(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -7677,7 +7907,7 @@ var useKeyboardNavigation3 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-import { useRef as useRef36, useState as useState15 } from "react";
+import { useRef as useRef37, useState as useState16 } from "react";
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -7699,10 +7929,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = useRef36(source);
-  const statefulSource = useRef36(source);
-  const indexPositions = useRef36(populateIndices(source));
-  const [, forceUpdate] = useState15({});
+  const externalSource = useRef37(source);
+  const statefulSource = useRef37(source);
+  const indexPositions = useRef37(populateIndices(source));
+  const [, forceUpdate] = useState16({});
   if (source !== externalSource.current) {
     externalSource.current = source;
     statefulSource.current = source;
@@ -7722,7 +7952,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-import { useCallback as useCallback39, useRef as useRef37 } from "react";
+import { useCallback as useCallback41, useRef as useRef38 } from "react";
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -7732,23 +7962,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = useRef37(source);
-  const stateSource = useRef37(fullSource.current);
-  const setSource = useCallback39(
+  const fullSource = useRef38(source);
+  const stateSource = useRef38(fullSource.current);
+  const setSource = useCallback41(
     (value) => {
       setVisibleData(stateSource.current = value);
     },
     [setVisibleData]
   );
-  const expandNode = useCallback39(
+  const expandNode = useCallback41(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = useCallback39(
+  const collapseNode = useCallback41(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = useCallback39(
+  const handleKeyDown = useCallback41(
     (e) => {
       if (e.key === ArrowRight3 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -7774,7 +8004,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = useCallback39(
+  const handleClick = useCallback41(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -7800,14 +8030,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-import { useCallback as useCallback40 } from "react";
+import { useCallback as useCallback42 } from "react";
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = useCallback40(
+  const handleKeyDown = useCallback42(
     (e) => {
       if (e.key === ArrowLeft3) {
         const node = indexPositions[highlightedIdx];
@@ -7844,11 +8074,11 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = useRef38(EMPTY_ARRAY2);
+  const lastSelection = useRef39(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
-    var _a, _b;
-    (_b = (_a = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a, evt, nextIdx);
+    var _a2, _b;
+    (_b = (_a2 = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a2, evt, nextIdx);
   };
   const { highlightedIdx, ...keyboardHook } = useKeyboardNavigation3({
     treeNodes: dataHook.indexPositions,
@@ -7877,20 +8107,20 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = useCallback41(
+  const handleClick = useCallback43(
     (evt) => {
-      var _a, _b, _c;
-      (_a = collapsibleHook.listItemHandlers) == null ? void 0 : _a.onClick(evt);
+      var _a2, _b, _c;
+      (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
       if (!evt.defaultPrevented) {
         (_c = (_b = selectionHook.listItemHandlers) == null ? void 0 : _b.onClick) == null ? void 0 : _c.call(_b, evt);
       }
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = useCallback41(
+  const handleKeyDown = useCallback43(
     (evt) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      (_b = (_a = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a, evt);
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      (_b = (_a2 = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
       if (!evt.defaultPrevented) {
         (_d = (_c = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _d.call(_c, evt);
       }
@@ -7909,8 +8139,8 @@ var useTree = ({
     ]
   );
   const getActiveDescendant = () => {
-    var _a;
-    return highlightedIdx === void 0 || highlightedIdx === -1 ? void 0 : (_a = dataHook.indexPositions[highlightedIdx]) == null ? void 0 : _a.id;
+    var _a2;
+    return highlightedIdx === void 0 || highlightedIdx === -1 ? void 0 : (_a2 = dataHook.indexPositions[highlightedIdx]) == null ? void 0 : _a2.id;
   };
   lastSelection.current = selectionHook.selected;
   const listProps = {
@@ -7937,14 +8167,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
-var classBase16 = "vuuTree";
+var classBase18 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ jsx26("li", { ...props, children });
+  return /* @__PURE__ */ jsx29("li", { ...props, children });
 };
-var Tree = forwardRef12(function Tree2({
+var Tree = forwardRef13(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -7958,11 +8188,11 @@ var Tree = forwardRef12(function Tree2({
   source,
   ...htmlAttributes
 }, forwardedRef) {
-  var _a;
-  const id = useId6(idProp);
-  const rootRef = useRef39(null);
+  var _a2;
+  const id = useId7(idProp);
+  const rootRef = useRef40(null);
   const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
-    revealSelected: revealSelected ? (_a = selectedProp != null ? selectedProp : defaultSelected) != null ? _a : false : void 0
+    revealSelected: revealSelected ? (_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : false : void 0
   });
   const handleSelectionChange = (evt, selected2) => {
     if (onSelectionChange) {
@@ -8003,14 +8233,14 @@ var Tree = forwardRef12(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs17(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ jsx26("span", { className: `${classBase16}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ jsx26("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ jsx29("span", { className: `${classBase18}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ jsx29("span", { children: item.label })
           ]
         }
       )
@@ -8028,9 +8258,9 @@ var Tree = forwardRef12(function Tree2({
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: cx16(`${classBase16}Node`, {
+          className: cx16(`${classBase18}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase16}Node-toggle`]: !allowGroupSelect
+            [`${classBase18}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -8038,20 +8268,20 @@ var Tree = forwardRef12(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ jsxs15("div", { className: `${classBase16}Node-label`, children: [
-          /* @__PURE__ */ jsx26("span", { className: `${classBase16}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ jsxs17("div", { className: `${classBase18}Node-label`, children: [
+          /* @__PURE__ */ jsx29("span", { className: `${classBase18}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ jsxs15("div", { className: `${classBase16}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ jsx26(
+        ] }) : /* @__PURE__ */ jsxs17("div", { className: `${classBase18}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ jsx29(
             "span",
             {
-              className: `${classBase16}Node-icon`,
+              className: `${classBase18}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ jsx26("span", { children: title })
+          /* @__PURE__ */ jsx29("span", { children: title })
         ] }),
-        /* @__PURE__ */ jsx26("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ jsx29("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -8068,12 +8298,12 @@ var Tree = forwardRef12(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: cx16(classBase16, className),
+      className: cx16(classBase18, className),
       id: `Tree-${id}`,
       ref: useForkRef8(rootRef, forwardedRef),
       role: "tree",
@@ -8097,41 +8327,63 @@ Tree.displayName = "Tree";
 var Tree_default = Tree;
 
 // src/vuu-input/VuuInput.tsx
-import { Input as Input5 } from "@salt-ds/core";
+import { isValidNumber as isValidNumber3 } from "@vuu-ui/vuu-utils";
+import { Input as Input6 } from "@salt-ds/core";
 import cx17 from "classnames";
 import {
-  useCallback as useCallback42
+  useCallback as useCallback44
 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var classBase17 = "vuuInput";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var classBase19 = "vuuInput";
 var VuuInput = ({
   className,
   onCommit,
   onKeyDown,
+  type,
   ...props
 }) => {
-  const handleKeyDown = useCallback42(
+  const commitValue = useCallback44(
+    (evt, value) => {
+      console.log(`commit value ${value}`);
+      if (type === "number") {
+        const numericValue = parseFloat(value);
+        if (isValidNumber3(numericValue)) {
+          onCommit(evt, numericValue);
+        } else {
+          throw Error("Invalid value");
+        }
+      } else if (type === "boolean") {
+        onCommit(evt, Boolean(value));
+      } else {
+        onCommit(evt, value);
+      }
+    },
+    [onCommit, type]
+  );
+  const handleKeyDown = useCallback44(
     (evt) => {
       if (evt.key === "Enter") {
         evt.preventDefault();
         evt.stopPropagation();
-        onCommit(evt);
+        const { value } = evt.target;
+        commitValue(evt, value);
       }
       onKeyDown == null ? void 0 : onKeyDown(evt);
     },
-    [onCommit, onKeyDown]
+    [commitValue, onKeyDown]
   );
-  const handleBlur = useCallback42(
+  const handleBlur = useCallback44(
     (evt) => {
-      onCommit(evt);
+      const { value } = evt.target;
+      commitValue(evt, value);
     },
-    [onCommit]
+    [commitValue]
   );
-  return /* @__PURE__ */ jsx27(
-    Input5,
+  return /* @__PURE__ */ jsx30(
+    Input6,
     {
       ...props,
-      className: cx17(classBase17, className),
+      className: cx17(classBase19, className),
       onBlur: handleBlur,
       onKeyDown: handleKeyDown
     }
@@ -8165,6 +8417,7 @@ export {
   HeightOnly,
   Highlighter,
   Home,
+  InstrumentPicker,
   InstrumentSearch,
   LIST_FOCUS_VISIBLE,
   List,
@@ -8221,9 +8474,11 @@ export {
   isFocusable,
   isGroupNode,
   isHeader,
+  isMultiSelection,
   isNavigationKey,
   isParentPath,
   isSelected,
+  isSingleSelection,
   itemToString,
   listItemElement,
   listItemId,