diff --git a/package-lock.json b/package-lock.json index 3c53b7cd..82a2ddf7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17881,7 +17881,7 @@ }, "packages/default-icons": { "name": "@konturio/default-icons", - "version": "2.2.2", + "version": "2.3.2", "devDependencies": { "@figma-export/cli": "^4.3.0", "@figma-export/output-components-as-svgr": "^4.2.0", @@ -17897,7 +17897,7 @@ }, "packages/floating": { "name": "@konturio/floating", - "version": "1.1.1", + "version": "1.1.2", "dependencies": { "@floating-ui/core": "^1.2.4", "@floating-ui/react": "^0.21.1", @@ -17926,10 +17926,10 @@ }, "packages/ui-kit": { "name": "@konturio/ui-kit", - "version": "5.1.10", + "version": "5.1.12", "dependencies": { "@floating-ui/react-dom": "^1.3.0", - "@konturio/floating": "^1.1.1", + "@konturio/floating": "^1.1.2", "downshift": "^8.0.0", "nanoid": "^4.0.2", "react-is": "^18.2.0", @@ -18892,7 +18892,7 @@ "version": "file:packages/ui-kit", "requires": { "@floating-ui/react-dom": "^1.3.0", - "@konturio/floating": "^1.1.1", + "@konturio/floating": "^1.1.2", "downshift": "^8.0.0", "nanoid": "^4.0.2", "react-is": "^18.2.0", diff --git a/packages/ui-kit/src/Select/components/MultiselectChipWithSearch/index.tsx b/packages/ui-kit/src/Select/components/MultiselectChipWithSearch/index.tsx index d367d307..c0b270e1 100644 --- a/packages/ui-kit/src/Select/components/MultiselectChipWithSearch/index.tsx +++ b/packages/ui-kit/src/Select/components/MultiselectChipWithSearch/index.tsx @@ -55,6 +55,7 @@ export function MultiselectChipWithSearch({ withResetButton = true, type = 'classic', filter = defaultFilterByTitle, + transformSearchResults, itemToString = defaultItemToString, className, }: { @@ -69,20 +70,23 @@ export function MultiselectChipWithSearch({ error?: boolean; type?: 'classic' | 'inline'; filter?: (item: I, search: string) => boolean; + /** + * Apply any modifications (sorting etc) to the filtered items here + */ + transformSearchResults?: (items: I[], search: string) => I[]; itemToString?: (item: I | null) => string; className?: string; }) { const [inputValue, setInputValue] = useState(''); - const filteredItems = useMemo( - () => - getFilteredList({ - list: items, - exclude: selectedItems, - search: inputValue, - filter, - }), - [items, selectedItems, filter, inputValue], - ); + const resultItems = useMemo(() => { + const filtered = getFilteredList({ + list: items, + exclude: selectedItems, + search: inputValue, + filter, + }); + return transformSearchResults ? transformSearchResults(filtered, inputValue) : filtered; + }, [items, selectedItems, filter, transformSearchResults, inputValue]); const { getDropdownProps, removeSelectedItem, reset } = useMultipleSelection({ selectedItems: selectedItems, @@ -111,7 +115,7 @@ export function MultiselectChipWithSearch({ const { isOpen, getToggleButtonProps, getLabelProps, getMenuProps, getInputProps, highlightedIndex, getItemProps } = useCombobox({ - items: filteredItems, + items: resultItems, itemToString: itemToString, defaultHighlightedIndex: 0, // after selection, highlight the first item. selectedItem: null, @@ -207,8 +211,8 @@ export function MultiselectChipWithSearch({
    {isOpen && - (filteredItems.length ? ( - filteredItems.map((item, index) => ( + (resultItems.length ? ( + resultItems.map((item, index) => (