🐛 fix(issues): Fix minor bugs for issues #31 and #32 (#33)

🐛 fix(multiselect): add display names and fix hook dependencies

- add display names for MultiSelectValue, MultiSelectContent and MultiSelectItem
- update hook dependencies in MultiSelect components
- fix typos in MultiSelect usage examples

Fixes #31, #32

apps/web/content/docs/components/multi-select.mdx

@@ -74,9 +74,9 @@ import {
         <MultiSelectItem value="vue">Vue</MultiSelectItem>
         <MultiSelectItem value="angular">Angular</MultiSelectItem>
         <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
-    </MultiSelectList>>
+    </MultiSelectList>
   </MultiSelectContent>
-</MultiSel>
+</MultiSelect>
 ```
 
 ## Examples

apps/web/registry/default/ui/multi-select.tsx

@@ -104,7 +104,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
             onValueChangeProp(state, items)
          }
       },
-      [onValueChangeProp],
+      [onValueChangeProp, itemCache],
    )
 
    const [value, setValue] = useControllableState({
@@ -168,6 +168,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       maxCount,
       handleSelect,
       handleDeselect,
+      itemCache
    ])
 
    return (
@@ -325,6 +326,8 @@ const MultiSelectValue = React.forwardRef<
    },
 )
 
+MultiSelectValue.displayName = 'MultiSelectValue'
+
 const MultiSelectSearch = React.forwardRef<
    React.ElementRef<typeof CommandInput>,
    React.ComponentPropsWithoutRef<typeof CommandInput>
@@ -410,6 +413,8 @@ const MultiSelectContent = React.forwardRef<
    )
 })
 
+MultiSelectContent.displayName = 'MultiSelectContent'
+
 type MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &
    Partial<MultiSelectOptionItem> & {
       onSelect?: (value: string, item: MultiSelectOptionItem) => void
@@ -456,7 +461,7 @@ const MultiSelectItem = React.forwardRef<
       React.useEffect(() => {
          if (value)
             itemCache.set(value, item!)
-      }, [selected, value, item])
+      }, [selected, value, item, itemCache])
 
       const disabled = Boolean(
          disabledProp || (!selected && maxCount && contextValue.length >= maxCount),
@@ -495,6 +500,8 @@ const MultiSelectItem = React.forwardRef<
    },
 )
 
+MultiSelectItem.displayName = 'MultiSelectItem'
+
 const MultiSelectGroup = React.forwardRef<
    React.ElementRef<typeof CommandGroup>,
    React.ComponentPropsWithoutRef<typeof CommandGroup>
@@ -585,4 +592,4 @@ export {
    MultiSelectSeparator,
    MultiSelectEmpty,
    renderMultiSelectOptions,
-}
+}

apps/web/registry/miami/ui/multi-select.tsx

@@ -104,7 +104,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
             onValueChangeProp(state, items)
          }
       },
-      [onValueChangeProp],
+      [onValueChangeProp, itemCache],
    )
 
    const [value, setValue] = useControllableState({
@@ -168,6 +168,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       maxCount,
       handleSelect,
       handleDeselect,
+      itemCache
    ])
 
    return (
@@ -325,6 +326,8 @@ const MultiSelectValue = React.forwardRef<
    },
 )
 
+MultiSelectValue.displayName = 'MultiSelectValue'
+
 const MultiSelectSearch = React.forwardRef<
    React.ElementRef<typeof CommandInput>,
    React.ComponentPropsWithoutRef<typeof CommandInput>
@@ -410,6 +413,8 @@ const MultiSelectContent = React.forwardRef<
    )
 })
 
+MultiSelectContent.displayName = 'MultiSelectContent'
+
 type MultiSelectItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> &
    Partial<MultiSelectOptionItem> & {
       onSelect?: (value: string, item: MultiSelectOptionItem) => void
@@ -456,7 +461,7 @@ const MultiSelectItem = React.forwardRef<
       React.useEffect(() => {
          if (value)
             itemCache.set(value, item!)
-      }, [selected, value, item])
+      }, [selected, value, item, itemCache])
 
       const disabled = Boolean(
          disabledProp || (!selected && maxCount && contextValue.length >= maxCount),
@@ -495,6 +500,8 @@ const MultiSelectItem = React.forwardRef<
    },
 )
 
+MultiSelectItem.displayName = 'MultiSelectItem'
+
 const MultiSelectGroup = React.forwardRef<
    React.ElementRef<typeof CommandGroup>,
    React.ComponentPropsWithoutRef<typeof CommandGroup>
@@ -585,4 +592,4 @@ export {
    MultiSelectSeparator,
    MultiSelectEmpty,
    renderMultiSelectOptions,
-}
+}