=
+ list.selectedKeys === 'all' ? new Set(items) : new Set(list.selectedKeys);
+
+ if (list.selectedKeys !== 'all') {
+ keys.forEach(key => {
+ next.delete(key);
+ });
+ }
+
+ list.setSelectedKeys(next);
+ };
+
+ const [value, setValue] = useState('');
+ const selectItem = (key: Key) => {
+ if (list.selectedKeys !== 'all') {
+ const next = list.selectedKeys.add(key);
+ list.setSelectedKeys(next);
+ }
+
+ const input = document.activeElement as HTMLInputElement;
+ setTimeout(() => {
+ setValue('');
+ }, 0);
+ input.focus();
+ };
+
+ return (
+
+ null}
+ >
+ {(item: MultiSelectItemProps) => (
+
+ {item.children}
+
+ )}
+
+
+ {unselected.map((item: MultiSelectItemProps) => (
+
+ {item.children}
+
+ ))}
+
+
+ );
+};
+
+Multiselect.Item = Item;
export default () => {
return (
diff --git a/docs/content/recipes/multiselect-recipe.mdx b/docs/content/recipes/multiselect-recipe.mdx
index 39f39f725c..9f6a3737a3 100644
--- a/docs/content/recipes/multiselect-recipe.mdx
+++ b/docs/content/recipes/multiselect-recipe.mdx
@@ -6,16 +6,6 @@ badge: new
The `` component combines a text input with a listbox, allowing users to filter a list of options to items matching a query, selecting multiple items or adding a new value.
-## Usage
-
-### Import
-
-To import the component you just have to use this code below.
-
-```tsx
-import { MultiSelect } from '@marigold/components';
-```
-
## Example
You can use the `MultiSelect` to enable users to select multiple values and search for them.