@vuu-ui/vuu-ui-controls 4.0.0-alpha.1 → 4.0.0-alpha.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.3",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
@@ -11,16 +11,16 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.1"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.3"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.3",
     "@salt-ds/core": "1.67.0",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",

package/src/index.js

@@ -25,6 +25,7 @@ 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 { SelectedItemsChangeHandler as SelectedItemChangeHandler } from "./item-picker/useItemPicker.js";
 export { ModalProvider, useModal } from "./modal-provider/ModalProvider.js";
 export { Prompt } from "./prompt/Prompt.js";
 export { SortableList, SortableOption } from "./sortable-list/SortableList.js";

package/src/item-picker/ItemPicker.css.js

@@ -11,10 +11,6 @@ const css = `
   overflow: hidden;
   container-type: inline-size;
 
-  &.vuuItemPicker-withCalculated {
-    --label-margin-left: 8px;
-  }
-
   & .saltListBox {
     background-color: inherit;
   }

package/src/item-picker/ItemPicker.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Input, ListBox, Option } from "@salt-ds/core";
+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";
 import { applyHighlighting } from "@vuu-ui/vuu-table";
@@ -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, searchForm = true, allItems, selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, createCustomItemProps, ...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,13 +133,56 @@ 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),
@@ -166,54 +209,20 @@ 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))
-                    })
-                ]
-            }),
-            createCustomItemProps ? /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-item-buttons`,
-                children: /*#__PURE__*/ jsx(Button, {
-                    onClick: createCustomItemProps.onClickCreateCustomItem,
-                    children: createCustomItemProps.buttonLabel
+                children: 'v-selected-available' === layout ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        selectedList,
+                        availableList
+                    ]
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        availableList,
+                        selectedList
+                    ]
                 })
-            }) : null
+            })
         ]
     });
 });

package/src/item-picker/useItemPicker.js

@@ -55,10 +55,7 @@ const useItemPicker = ({ allItems, selectedItems, maxSelections, onSelectedItems
         selectedItems,
         onSelectedItemsChange
     ]);
-    const getSelectedItemsFiltered = useMemo(()=>filterItems(selectedItems, searchPattern), [
-        selectedItems,
-        searchPattern
-    ]);
+    const getSelectedItemsFiltered = (latestSelectedItems, latestSearchPattern)=>filterItems(latestSelectedItems, latestSearchPattern);
     const getAvailableItemsFiltered = useMemo(()=>filterItems(allItems, searchPattern).filter(({ name })=>-1 === selectedItems.findIndex((item)=>item.name === name)).toSorted(byItemName), [
         allItems,
         selectedItems,
@@ -71,7 +68,7 @@ const useItemPicker = ({ allItems, selectedItems, maxSelections, onSelectedItems
     return {
         selectedItemsCount: selectedItems.length,
         availableItemsCount: getAvailableItemsCount,
-        selectedItemsFiltered: getSelectedItemsFiltered,
+        selectedItemsFiltered: getSelectedItemsFiltered(selectedItems, searchPattern),
         availableItemsFiltered: getAvailableItemsFiltered,
         searchText: searchPattern,
         onChangeSearchInput: handleChangeSearchInput,

package/types/index.d.ts

@@ -13,7 +13,7 @@ export { HoverOverlay } from "./hover-overlay/HoverOverlay";
 export * from "./icon-button";
 export * from "./instrument-picker";
 export { ItemPicker, type ItemPickerProps } from "./item-picker/ItemPicker";
-export { type ItemDescriptor, type CreateCustomItemProps, } 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";

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

@@ -1,16 +1,34 @@
-import { ListBoxProps } from "@salt-ds/core";
-import { ItemTypeName } from "@vuu-ui/vuu-utils";
-import { HTMLAttributes } from "react";
-import { CreateCustomItemProps, 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;
-    /** Render the search control as a form. Set false when the picker is nested in a form. */
+    AvailableListItem?: ComponentType<AvailableListItemProps>;
+    SelectedListItem?: ComponentType<SelectedListItemProps>;
+    itemTypeName?: ItemTypeName;
+    /**
+     * Display order of SelectedItems List / AvailableItems List
+     */
+    layout?: ItemPickerLayout;
     searchForm?: boolean;
-    createCustomItemProps?: CreateCustomItemProps;
+}
+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 ChangeEventHandler, 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 {
@@ -11,15 +12,11 @@ export interface ItemDescriptor {
     /** Optional string to define groups of items for client reference, not currently used for rendering */
     group?: string;
 }
-export interface CreateCustomItemProps {
-    buttonLabel: string;
-    onClickCreateCustomItem: MouseEventHandler<HTMLButtonElement>;
-}
 export interface ItemPickerHookProps {
     allItems: ItemDescriptor[];
     selectedItems: ItemDescriptor[];
     maxSelections?: number;
-    onSelectedItemsChange: (newSelectedItems: ItemDescriptor[]) => void;
+    onSelectedItemsChange: SelectedItemsChangeHandler;
 }
 export declare const getItemLabel: (item: ItemDescriptor) => string;
 export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, onSelectedItemsChange, }: ItemPickerHookProps) => {
@@ -28,7 +25,7 @@ export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, o
     selectedItemsFiltered: readonly ItemDescriptor[];
     availableItemsFiltered: ItemDescriptor[];
     searchText: string;
-    onChangeSearchInput: FormEventHandler;
+    onChangeSearchInput: ChangeEventHandler;
     onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
     onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
     onReorderSelectedItems: (orderedItemNames: string[]) => void;