@vuu-ui/vuu-ui-controls 4.1.0 → 5.0.0-alpha.1

package/package.json

@@ -1,26 +1,25 @@
 {
-  "version": "4.1.0",
+  "version": "5.0.0-alpha.1",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
   "scripts": {
-    "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.1.0",
-    "@vuu-ui/vuu-protocol-types": "4.1.0",
-    "@vuu-ui/vuu-table-types": "4.1.0"
+    "@vuu-ui/vuu-data-types": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-protocol-types": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-table-types": "5.0.0-alpha.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.1.0",
-    "@vuu-ui/vuu-data-react": "4.1.0",
-    "@vuu-ui/vuu-layout": "4.1.0",
-    "@vuu-ui/vuu-popups": "4.1.0",
-    "@vuu-ui/vuu-table": "4.1.0",
-    "@vuu-ui/vuu-utils": "4.1.0",
+    "@vuu-ui/vuu-context-menu": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-data-react": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-layout": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-popups": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-table": "5.0.0-alpha.1",
+    "@vuu-ui/vuu-utils": "5.0.0-alpha.1",
     "@salt-ds/core": "1.74.0",
     "@salt-ds/icons": "1.18.4",
     "@salt-ds/styles": "0.4.2",
@@ -43,9 +42,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./src/index.js",
-      "default": "./src/index.js",
-      "types": "./types/index.d.ts"
+      "default": "./src/index.js"
     }
   },
   "module": "./src/index.js",

package/src/context-panel-provider/ContextPanelProvider.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState } from "react";
-import { isUnconfiguredProperty, layoutFromJson, useLayoutOperation } from "@vuu-ui/vuu-layout";
+import { createContext, isValidElement, useCallback, useContext, useState } from "react";
 import { Dialog, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
 const UndefinedShowContextPanel = ()=>{
     console.warn("[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider");
@@ -8,54 +7,43 @@ const UndefinedShowContextPanel = ()=>{
 const ContextPanelContext = /*#__PURE__*/ createContext({
     showContextPanel: UndefinedShowContextPanel
 });
-const ContextPanelProvider = ({ children, hideContextPanel: hideContextPanelProp, showContextPanel: showContextPanelProp })=>{
+const ContextPanelProvider = ({ children, hideContextPanel: hideContextPanelProp, resolveComponent, showContextPanel: showContextPanelProp })=>{
     const { hideContextPanel: inheritedHideContextPanel, showContextPanel: inheritedShowContextPanel } = useContext(ContextPanelContext);
-    const { showComponentInContextPanel } = useLayoutOperation();
     const [dialog, setDialog] = useState(null);
     const handleOpenChange = useCallback((isOpen)=>{
         if (!isOpen) setDialog(null);
     }, []);
     const hideContextPanel = hideContextPanelProp ?? inheritedHideContextPanel;
-    const showContextPanel = useCallback((elementOrComponentType, title, props)=>{
-        if (showContextPanelProp) showContextPanelProp(elementOrComponentType, title, props);
-        else if (inheritedShowContextPanel !== UndefinedShowContextPanel) inheritedShowContextPanel(elementOrComponentType, title, props);
-        else if (isUnconfiguredProperty(showComponentInContextPanel)) {
-            if ("string" == typeof elementOrComponentType) {
-                const component = "string" == typeof elementOrComponentType ? layoutFromJson({
-                    type: elementOrComponentType,
-                    props
-                }, "") : elementOrComponentType;
-                setDialog(/*#__PURE__*/ jsxs(Dialog, {
-                    open: true,
-                    onOpenChange: handleOpenChange,
-                    children: [
-                        /*#__PURE__*/ jsx(DialogCloseButton, {
-                            appearance: "transparent",
-                            "data-embedded": true,
-                            "data-icon": "close",
-                            onClick: ()=>setDialog(null),
-                            sentiment: "neutral"
-                        }),
-                        /*#__PURE__*/ jsx(DialogHeader, {
-                            header: title
-                        }),
-                        /*#__PURE__*/ jsx(DialogContent, {
-                            children: component
-                        })
-                    ]
-                }));
-            }
-        } else {
-            const component = "string" == typeof elementOrComponentType ? {
-                type: elementOrComponentType,
-                props
-            } : elementOrComponentType;
-            showComponentInContextPanel(component, title);
+    const showContextPanel = useCallback((component, title, componentProps)=>{
+        const resolvedComponent = "string" == typeof component && resolveComponent ? resolveComponent(component, componentProps) : component;
+        if (showContextPanelProp) showContextPanelProp(resolvedComponent, title, componentProps);
+        else if (inheritedShowContextPanel !== UndefinedShowContextPanel) inheritedShowContextPanel(resolvedComponent, title, componentProps);
+        else {
+            if (!/*#__PURE__*/ isValidElement(resolvedComponent)) throw new Error(`Context panel component "${component}" requires a configured resolver`);
+            setDialog(/*#__PURE__*/ jsxs(Dialog, {
+                open: true,
+                onOpenChange: handleOpenChange,
+                children: [
+                    /*#__PURE__*/ jsx(DialogCloseButton, {
+                        appearance: "transparent",
+                        "data-embedded": true,
+                        "data-icon": "close",
+                        onClick: ()=>setDialog(null),
+                        sentiment: "neutral"
+                    }),
+                    /*#__PURE__*/ jsx(DialogHeader, {
+                        header: title
+                    }),
+                    /*#__PURE__*/ jsx(DialogContent, {
+                        children: resolvedComponent
+                    })
+                ]
+            }));
         }
     }, [
         handleOpenChange,
         inheritedShowContextPanel,
-        showComponentInContextPanel,
+        resolveComponent,
         showContextPanelProp
     ]);
     return /*#__PURE__*/ jsxs(ContextPanelContext.Provider, {

package/src/drag-drop/useDragDrop.js

@@ -292,6 +292,7 @@ const useDragDrop = ({ allowDragDrop, containerRef, draggableClassName, getDragP
             scrollableContainerRef.current = scrollableContainer;
             const containerRect = scrollableContainer.getBoundingClientRect();
             const draggableRect = dragElement.getBoundingClientRect();
+            const dragElementStyle = getComputedStyle(dragElement);
             const dragDropState = dragDropStateRef.current = new DragDropState(mousePosition, dragElement);
             setDragBoundaries(containerRect, draggableRect);
             beginDrag(dragElement);
@@ -303,7 +304,12 @@ const useDragDrop = ({ allowDragDrop, containerRef, draggableClassName, getDragP
                     onDropped: terminateDrag,
                     onTransitionEnd: terminateDrag,
                     ref: dragDropState.setDraggable,
-                    style: constrainRect(draggableRect, containerRect),
+                    style: {
+                        ...constrainRect(draggableRect, containerRect),
+                        backgroundColor: dragElementStyle.backgroundColor,
+                        color: dragElementStyle.color,
+                        font: dragElementStyle.font
+                    },
                     wrapperClassName: draggableClassName
                 }),
                 draggedItemIndex: parseInt(index)

package/src/icon-button/Icon.js

@@ -17,6 +17,7 @@ const Icon_Icon = ({ className, name, size, style: styleProp, ...htmlAttributes
     } : styleProp;
     return /*#__PURE__*/ jsx("span", {
         ...htmlAttributes,
+        "aria-hidden": true,
         className: clsx(classBase, className),
         "data-icon": name,
         role: "img",

package/src/icon-button/IconButton.js

@@ -16,10 +16,10 @@ const IconButton_IconButton = /*#__PURE__*/ forwardRef(function({ "aria-label":
     });
     return /*#__PURE__*/ jsx(Button, {
         ...buttonProps,
+        "aria-label": ariaLabel,
         className: clsx(classBase, className),
         ref: ref,
         children: /*#__PURE__*/ jsx(Icon, {
-            "aria-label": ariaLabel,
             name: icon,
             size: size
         })

package/src/index.js

@@ -26,7 +26,6 @@ export * from "./vuu-typeahead-input/index.js";
 export { ContextPanelProvider, useContextPanel, useHideContextPanel } from "./context-panel-provider/ContextPanelProvider.js";
 export { HoverOverlay } from "./hover-overlay/HoverOverlay.js";
 export { ItemPicker } from "./item-picker/ItemPicker.js";
-export { ModalProvider, useModal } from "./modal-provider/ModalProvider.js";
 export { Prompt } from "./prompt/Prompt.js";
 export { SortableList, SortableOption } from "./sortable-list/SortableList.js";
 export { TimeInput } from "./time-input/TimeInput.js";

package/src/instrument-picker/TablePicker.css.js

@@ -7,6 +7,7 @@ const css = `
 }
 
 .vuuTablePicker-floating-table {
+  background: var(--salt-container-primary-background);
   border: solid 1px var(--salt-container-secondary-borderColor);
   padding: var(--salt-spacing-100) 0;
   z-index: var(--salt-zIndex-popout);

package/src/instrument-picker/useTablePicker.js

@@ -1,8 +1,9 @@
 import { flip, size, useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { useFloatingUI } from "@salt-ds/core";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { isStringColumn, toColumnName, useData } from "@vuu-ui/vuu-utils";
 import { isNavigationKey, isRowSelectionKey, useControlledTableNavigation } from "@vuu-ui/vuu-table";
+import { isStringColumn, toColumnName } from "@vuu-ui/vuu-utils";
+import { useData } from "@vuu-ui/core";
+import { useCallback, useMemo, useRef, useState } from "react";
 const defaultRowToString = (dataRow)=>Object.values(dataRow).join(" ");
 const useTablePicker = ({ TableProps, onSelect, rowToString = defaultRowToString, schema, searchColumns = schema.columns.filter(isStringColumn).map(toColumnName) })=>{
     const { VuuDataSource } = useData();

package/src/item-picker/ItemPicker.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Input, ListBox, Option } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
@@ -32,7 +32,7 @@ const useSorting = (id, index)=>{
         ref
     };
 };
-const SelectedListItem = ({ className: classNameProp, index, item, onRemove, searchPattern = "", ...optionProps })=>{
+const DefaultSelectedListItem = ({ className: classNameProp, index, item, onRemove, searchPattern = "", ...optionProps })=>{
     const { handleRef, ref } = useSorting(item.name, index);
     const value = getItemLabel(item);
     const valueWithHighlighting = applyHighlighting(value, searchPattern);
@@ -73,7 +73,7 @@ const SelectedListItem = ({ className: classNameProp, index, item, onRemove, sea
         ]
     });
 };
-const AvailableListItem = ({ className: classNameProp, index, item, onAdd, searchPattern = "", disabled, ...optionProps })=>{
+const DefaultAvailableListItem = ({ className: classNameProp, index, item, onAdd, searchPattern = "", disabled, ...optionProps })=>{
     const value = getItemLabel(item);
     const valueWithHighlighting = applyHighlighting(value, searchPattern);
     return /*#__PURE__*/ jsxs(Option, {
@@ -98,7 +98,14 @@ const AvailableListItem = ({ className: classNameProp, index, item, onAdd, searc
         ]
     });
 };
-const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, itemTypeName, allItems, selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
+const getOptionName = (option)=>{
+    if (option) {
+        const { name } = option.dataset;
+        if (name) return name;
+    }
+    throw Error("[ItemPicker] list option has no data-name");
+};
+const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ AvailableListItem = DefaultAvailableListItem, SelectedListItem = DefaultSelectedListItem, className, itemTypeName = 'Item', searchForm = true, allItems, layout = 'v-selected-available', selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-item-picker",
@@ -117,13 +124,6 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, ite
         maxSelections
     });
     const listRef = useRef(null);
-    const getOptionName = (option)=>{
-        if (option) {
-            const { name } = option.dataset;
-            if (name) return name;
-        }
-        throw Error("[ItemPicker] list option has no data-name");
-    };
     const handleDragEnd = useCallback(()=>{
         setTimeout(()=>{
             const listItems = listRef.current?.querySelectorAll(".saltOption");
@@ -133,19 +133,72 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, ite
             }
         }, 300);
     }, [
-        availableItemsFiltered,
-        selectedItemsFiltered
+        onReorderSelectedItems
     ]);
     const searchPlaceholderText = `Find ${singularForm(itemTypeName)}`;
     const maxSelectionsSubHeading = maxSelections ? `(${maxSelections} max)` : "";
     const selectedItemsHeading = `${selectedItemsCount} ${1 === selectedItemsCount ? singularForm(itemTypeName) : pluralForm(itemTypeName)} in view ${maxSelectionsSubHeading}`;
     const availableItemsHeading = `${availableItemsCount} available ${1 === availableItemsCount ? singularForm(itemTypeName) : pluralForm(itemTypeName)}`;
+    const selectedList = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-sectionHeader`,
+                children: selectedItemsHeading
+            }),
+            /*#__PURE__*/ jsx(DragDropProvider, {
+                onDragEnd: handleDragEnd,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    className: `${classBase}-selectedList`,
+                    onSelectionChange: onSelectionChange,
+                    ref: listRef,
+                    selected: selected,
+                    children: selectedItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(SelectedListItem, {
+                            item: item,
+                            index: index,
+                            onRemove: onRemoveItemFromSelectedList,
+                            searchPattern: searchText.toLowerCase(),
+                            value: item
+                        }, item.name))
+                })
+            })
+        ]
+    });
+    const availableList = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
+                children: availableItemsHeading
+            }),
+            /*#__PURE__*/ jsx(ListBox, {
+                className: `${classBase}-availableList`,
+                selected: NO_SELECTION,
+                children: availableItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(AvailableListItem, {
+                        item: item,
+                        index: index,
+                        onAdd: onAddItemToSelectedList,
+                        searchPattern: searchText.toLowerCase(),
+                        value: item,
+                        disabled: selectedItemsCount === maxSelections
+                    }, item.name))
+            })
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         ...htmlAttributes,
         className: clsx(classBase, className),
         ref: forwardedRef,
         children: [
-            /*#__PURE__*/ jsx("form", {
+            searchForm ? /*#__PURE__*/ jsx("form", {
+                className: `${classBase}-search`,
+                role: "search",
+                children: /*#__PURE__*/ jsx(Input, {
+                    startAdornment: searchIcon,
+                    placeholder: searchPlaceholderText,
+                    ref: searchCallbackRef,
+                    value: searchText,
+                    onChange: onChangeSearchInput
+                })
+            }) : /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-search`,
                 role: "search",
                 children: /*#__PURE__*/ jsx(Input, {
@@ -156,46 +209,19 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, ite
                     onChange: onChangeSearchInput
                 })
             }),
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-scrollContainer vuuScrollable`,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-sectionHeader`,
-                        children: selectedItemsHeading
-                    }),
-                    /*#__PURE__*/ jsx(DragDropProvider, {
-                        onDragEnd: handleDragEnd,
-                        children: /*#__PURE__*/ jsx(ListBox, {
-                            className: `${classBase}-selectedList`,
-                            onSelectionChange: onSelectionChange,
-                            ref: listRef,
-                            selected: selected,
-                            children: selectedItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(SelectedListItem, {
-                                    item: item,
-                                    index: index,
-                                    onRemove: onRemoveItemFromSelectedList,
-                                    searchPattern: searchText.toLowerCase(),
-                                    value: item
-                                }, item.name))
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
-                        children: availableItemsHeading
-                    }),
-                    /*#__PURE__*/ jsx(ListBox, {
-                        className: `${classBase}-availableList`,
-                        selected: NO_SELECTION,
-                        children: availableItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(AvailableListItem, {
-                                item: item,
-                                index: index,
-                                onAdd: onAddItemToSelectedList,
-                                searchPattern: searchText.toLowerCase(),
-                                value: item,
-                                disabled: selectedItemsCount === maxSelections
-                            }, item.name))
-                    })
-                ]
+                children: 'v-selected-available' === layout ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        selectedList,
+                        availableList
+                    ]
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        availableList,
+                        selectedList
+                    ]
+                })
             })
         ]
     });

package/src/prompt/Prompt.css.js

@@ -1,5 +1,6 @@
 const css = `
 .vuuPrompt {
+  max-width: var(--vuuPrompt-maxWidth);
   min-height: var(--vuuPrompt-minHeight, 257px);
   min-width: var(--vuuPrompt-minWidth, 380px);
 

package/src/table-search/SearchCell.css.js

@@ -3,8 +3,10 @@ const css = `
   --vuu-icon-left: 0;
   --vuu-icon-size: 16px;
   --vuu-icon-top: -1px;
-  color: var(--background-cell-color);
-  z-index: -1;
+  color: inherit;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
   align-items: center;
   padding: 0 8px;
   display: flex;

package/src/table-search/SearchCell.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { applyHighlighting } from "@vuu-ui/vuu-table";
+import { Icon } from "../icon-button/index.js";
 import SearchCell from "./SearchCell.css";
 const classBase = "vuuSearchCell";
 const SearchCell_SearchCell = ({ column, dataRow, searchPattern = "" })=>{
@@ -16,8 +17,8 @@ const SearchCell_SearchCell = ({ column, dataRow, searchPattern = "" })=>{
         className: classBase,
         tabIndex: -1,
         children: [
-            /*#__PURE__*/ jsx("span", {
-                "data-icon": "draggable"
+            /*#__PURE__*/ jsx(Icon, {
+                name: "draggable"
             }),
             valueWithHighlighting
         ]

package/src/table-search/TableSearch.css.js

@@ -1,6 +1,10 @@
 const css = `
 .vuuTableSearch {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   height: 100%;
+  min-height: 0;
   padding: var(--vuuTableSearch-padding, 12px);
   flex-direction: column;
   display: flex;

package/src/table-search/TableSearch.js

@@ -16,7 +16,7 @@ const defaultConfig = {
 const searchIcon = /*#__PURE__*/ jsx("span", {
     "data-icon": "search"
 });
-const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus = false, className, placeHolder, searchColumns, ...htmlAttributes })=>{
+const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus = false, baseFilter, className, placeHolder, searchColumns, ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-table-search",
@@ -30,6 +30,7 @@ const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...
         TableProps?.config
     ]);
     const { dataSource, onChange, searchState } = useTableSearch({
+        baseFilter,
         dataSource: dataSourceProp,
         searchColumns
     });
@@ -46,6 +47,7 @@ const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...
             /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-inputField`,
                 children: /*#__PURE__*/ jsx(Input, {
+                    bordered: true,
                     inputProps: {
                         onKeyDown
                     },

package/src/table-search/useTableSearch.js

@@ -1,5 +1,5 @@
-import { useCallback, useMemo, useState } from "react";
-const useTableSearch = ({ dataSource, searchColumns })=>{
+import { useCallback, useEffect, useMemo, useState } from "react";
+const useTableSearch = ({ baseFilter = "", dataSource, searchColumns })=>{
     const [searchState, setSearchState] = useState({
         searchText: "",
         filter: ""
@@ -14,12 +14,20 @@ const useTableSearch = ({ dataSource, searchColumns })=>{
             searchText: value,
             filter
         });
-        if (dataSource) dataSource.filter = {
-            filter
+    }, [
+        baseFilterPattern
+    ]);
+    useEffect(()=>{
+        dataSource.filter = {
+            filter: [
+                baseFilter,
+                searchState.filter
+            ].filter(Boolean).map((filter)=>`(${filter})`).join(" and ")
         };
     }, [
-        baseFilterPattern,
-        dataSource
+        baseFilter,
+        dataSource,
+        searchState.filter
     ]);
     return {
         dataSource,

package/src/tabstrip/Tabstrip.js

@@ -67,7 +67,7 @@ const Tabstrip_Tabstrip = ({ activeTabIndex: activeTabIndexProp, allowAddTab, al
             key: "addButton",
             onClick: onClickAddTab,
             variant: "secondary",
-            tabIndex: -1
+            tabIndex: -1 === activeTabIndex ? 0 : -1
         }) : []), [
         children,
         allowAddTab,

package/types/context-panel-provider/ContextPanelProvider.d.ts

@@ -1,17 +1,14 @@
 import { type ReactElement, type ReactNode } from "react";
-/**
- * If component is a string, the component will be read from the
- * comoponent registry. In that case, componentProps can be used
- * to pass props to the component.
- */
 export type ShowContextPanel = (component: string | ReactElement, title: string, componentProps?: unknown) => void;
 export interface ContextPanelProps {
     hideContextPanel?: () => void;
     showContextPanel: ShowContextPanel;
 }
+export type ResolveContextPanelComponent = (component: string, componentProps?: unknown) => ReactElement;
 export declare const ContextPanelContext: import("react").Context<ContextPanelProps>;
-export declare const ContextPanelProvider: ({ children, hideContextPanel: hideContextPanelProp, showContextPanel: showContextPanelProp, }: Partial<ContextPanelProps> & {
+export declare const ContextPanelProvider: ({ children, hideContextPanel: hideContextPanelProp, resolveComponent, showContextPanel: showContextPanelProp, }: Partial<ContextPanelProps> & {
     children: ReactNode;
+    resolveComponent?: ResolveContextPanelComponent;
 }) => import("react").JSX.Element;
 export declare function useContextPanel(): ShowContextPanel;
 export declare function useHideContextPanel(): (() => void) | undefined;

package/types/icon-button/Icon.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     name: string;
     size?: number;

package/types/icon-button/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@salt-ds/core";
+import { type ButtonProps } from "@salt-ds/core";
 export interface IconButtonProps extends Omit<ButtonProps, "children"> {
     icon: string;
     size?: number;

package/types/index.d.ts

@@ -13,9 +13,8 @@ export { HoverOverlay, type HoverOverlayProps, } from "./hover-overlay/HoverOver
 export * from "./icon-button";
 export * from "./instrument-picker";
 export { ItemPicker, type ItemPickerProps } from "./item-picker/ItemPicker";
-export { type ItemDescriptor } from "./item-picker/useItemPicker";
+export type { ItemDescriptor, SelectedItemsChangeHandler as SelectedItemChangeHandler } from "./item-picker/useItemPicker";
 export * from "./measured-container";
-export { ModalProvider, useModal } from "./modal-provider/ModalProvider";
 export * from "./overflow-container";
 export * from "./price-ticker";
 export { Prompt, type PromptProps } from "./prompt/Prompt";

package/types/instrument-picker/useTablePicker.d.ts

@@ -1,5 +1,5 @@
-import { ChangeEvent, KeyboardEventHandler, RefCallback } from "react";
 import type { TableConfig, TableRowSelectHandler } from "@vuu-ui/vuu-table-types";
+import { type ChangeEvent, type KeyboardEventHandler, type RefCallback } from "react";
 import type { TablePickerProps } from "./TablePicker";
 export interface TablePickerHookProps extends Pick<TablePickerProps, "TableProps" | "onSelect" | "rowToString" | "schema" | "searchColumns"> {
     defaultIsOpen?: boolean;

package/types/item-picker/ItemPicker.d.ts

@@ -1,13 +1,34 @@
-import { ListBoxProps } from "@salt-ds/core";
-import { ItemTypeName } from "@vuu-ui/vuu-utils";
-import { HTMLAttributes } from "react";
-import { ItemDescriptor, ItemPickerHookProps } from "./useItemPicker";
+import { type ListBoxProps, type OptionProps } from "@salt-ds/core";
+import { type ItemTypeName } from "@vuu-ui/vuu-utils";
+import { type ComponentType, type HTMLAttributes, type MouseEventHandler } from "react";
+import { type ItemDescriptor, type ItemPickerHookProps } from "./useItemPicker";
 export declare const classBaseListItem = "vuuItemPickerListItem";
+export type ItemPickerLayout = 'v-available-selected' | 'v-selected-available';
 export interface ItemPickerProps extends ItemPickerHookProps, HTMLAttributes<HTMLDivElement>, Pick<ListBoxProps<ItemDescriptor>, "selected" | "onSelectionChange"> {
-    itemTypeName: ItemTypeName;
+    AvailableListItem?: ComponentType<AvailableListItemProps>;
+    SelectedListItem?: ComponentType<SelectedListItemProps>;
+    itemTypeName?: ItemTypeName;
+    /**
+     * Display order of SelectedItems List / AvailableItems List
+     */
+    layout?: ItemPickerLayout;
+    searchForm?: boolean;
+}
+interface SelectedListItemProps extends OptionProps {
+    index: number;
+    item: ItemDescriptor;
+    onRemove: MouseEventHandler<HTMLButtonElement>;
+    searchPattern?: Lowercase<string>;
+}
+interface AvailableListItemProps extends OptionProps {
+    index: number;
+    item: ItemDescriptor;
+    onAdd: MouseEventHandler<HTMLButtonElement>;
+    searchPattern?: Lowercase<string>;
 }
 /** Generic controlled component that displays items in a 'picker' that are available to search, select, reorder or deselect.
  * As input props, all available items, currently selected items, search text and callback functions for changes in selected items and search text
  * must be supplied by the client.
  */
 export declare const ItemPicker: import("react").ForwardRefExoticComponent<ItemPickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/types/item-picker/useItemPicker.d.ts

@@ -1,4 +1,5 @@
-import { FormEventHandler, MouseEventHandler } from "react";
+import { type FormEventHandler, type MouseEventHandler } from "react";
+export type SelectedItemsChangeHandler = (newSelectedItems: readonly ItemDescriptor[]) => void;
 /** This is a public description of an Item that can be displayed in the ItemPicker component, defining all the
  * mandatory and option attributes that can be defined by the client. */
 export interface ItemDescriptor {
@@ -15,7 +16,7 @@ export interface ItemPickerHookProps {
     allItems: ItemDescriptor[];
     selectedItems: ItemDescriptor[];
     maxSelections?: number;
-    onSelectedItemsChange: (newSelectedItems: readonly ItemDescriptor[]) => void;
+    onSelectedItemsChange: SelectedItemsChangeHandler;
 }
 export declare const getItemLabel: (item: ItemDescriptor) => string;
 export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, onSelectedItemsChange, }: ItemPickerHookProps) => {