@vuu-ui/vuu-ui-controls 3.3.11 → 3.3.12

package/package.json

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

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 { 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";
@@ -98,7 +98,7 @@ const AvailableListItem = ({ className: classNameProp, index, item, onAdd, searc
         ]
     });
 };
-const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, itemTypeName, allItems, selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, createCustomItemProps, ...htmlAttributes }, forwardedRef) {
+const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, itemTypeName, allItems, selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-item-picker",
@@ -196,14 +196,7 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, ite
                             }, item.name))
                     })
                 ]
-            }),
-            createCustomItemProps ? /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-item-buttons`,
-                children: /*#__PURE__*/ jsx(Button, {
-                    onClick: createCustomItemProps.onClickCreateCustomItem,
-                    children: createCustomItemProps.buttonLabel
-                })
-            }) : 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 } 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,11 +1,10 @@
 import { ListBoxProps } from "@salt-ds/core";
 import { ItemTypeName } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes } from "react";
-import { CreateCustomItemProps, ItemDescriptor, ItemPickerHookProps } from "./useItemPicker";
+import { ItemDescriptor, ItemPickerHookProps } from "./useItemPicker";
 export declare const classBaseListItem = "vuuItemPickerListItem";
 export interface ItemPickerProps extends ItemPickerHookProps, HTMLAttributes<HTMLDivElement>, Pick<ListBoxProps<ItemDescriptor>, "selected" | "onSelectionChange"> {
     itemTypeName: ItemTypeName;
-    createCustomItemProps?: CreateCustomItemProps;
 }
 /** 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

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

@@ -11,15 +11,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: (newSelectedItems: readonly ItemDescriptor[]) => void;
 }
 export declare const getItemLabel: (item: ItemDescriptor) => string;
 export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, onSelectedItemsChange, }: ItemPickerHookProps) => {