feat(*): make useListCollection more flexible

Author: cschroeter

packages/react/CHANGELOG.md

@@ -6,6 +6,10 @@
   - Added `Carousel.AutoplayIndicator` component for conditionally rendering content based on autoplay state
   - Added `Carousel.ProgressText` component for displaying current page progress (e.g., "1 / 5")
 
+### Changed
+
+- **useListCollection**: Updated `initialItems` to accept `readonly` arrays for better compatibility with immutable data patterns.
+
 ### Fixed
 
 - **Combobox**:

packages/react/src/components/collection/use-list-collection.ts

@@ -6,7 +6,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
   /**
    * The initial items to display in the collection.
    */
-  initialItems: T[]
+  initialItems: T[] | readonly T[]
   /**
    * The filter function to use to filter the items.
    */
@@ -24,15 +24,15 @@ export function useListCollection<T>(props: UseListCollectionProps<T>): UseListC
   const [items, setItemsImpl] = useState(initialItems)
   const [filterText, setFilterText] = useState<string>('')
 
-  const setItems = useEvent((items: T[]) => {
+  const setItems = useEvent((items: T[] | readonly T[]) => {
     setItemsImpl(items)
     setFilterText('')
   })
 
   const collectionOptionsRef = useRef(collectionOptions)
   collectionOptionsRef.current = collectionOptions
 
-  const create = useCallback((items: T[]) => {
+  const create = useCallback((items: T[] | readonly T[]) => {
     return createListCollection({ ...collectionOptionsRef.current, items })
   }, [])
 

packages/solid/CHANGELOG.md

@@ -6,6 +6,10 @@
   - Added `Carousel.AutoplayIndicator` component for conditionally rendering content based on autoplay state
   - Added `Carousel.ProgressText` component for displaying current page progress (e.g., "1 / 5")
 
+### Changed
+
+- **useListCollection**: Updated `initialItems` to accept `readonly` arrays for better compatibility with immutable data patterns.
+
 ### Fixed
 
 - **Combobox**:

packages/solid/src/components/collection/use-list-collection.ts

@@ -6,7 +6,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
   /**
    * The initial items to display in the collection.
    */
-  initialItems: T[]
+  initialItems: T[] | readonly T[]
   /**
    * The filter function to use to filter the items.
    */
@@ -29,15 +29,15 @@ export function useListCollection<T>(props: MaybeAccessor<UseListCollectionProps
     return localProps.initialItems
   }
 
-  const [items, setItemsImpl] = createSignal<T[]>(init())
+  const [items, setItemsImpl] = createSignal<T[] | readonly T[]>(init())
   const [filterText, setFilterText] = createSignal('')
 
-  const setItems = (newItems: T[]) => {
+  const setItems = (newItems: T[] | readonly T[]) => {
     setItemsImpl(newItems)
     setFilterText('')
   }
 
-  const create = (itemsToCreate: T[]) => {
+  const create = (itemsToCreate: T[] | readonly T[]) => {
     const [, collectionOptions] = splittedProps()
     return createListCollection({ ...collectionOptions, items: itemsToCreate })
   }

packages/svelte/CHANGELOG.md

@@ -12,6 +12,10 @@ description: All notable changes will be documented in this file.
   - Added `Carousel.AutoplayIndicator` component for conditionally rendering content based on autoplay state
   - Added `Carousel.ProgressText` component for displaying current page progress (e.g., "1 / 5")
 
+### Changed
+
+- **useListCollection**: Updated `initialItems` to accept `readonly` arrays for better compatibility with immutable data patterns.
+
 ### Fixed
 
 - **Slider**: Fixed `Slider.ValueText` not displaying default value when no children provided

packages/svelte/src/lib/components/collection/use-list-collection.svelte.ts

@@ -6,7 +6,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
   /**
    * The initial items to display in the collection.
    */
-  initialItems: T[]
+  initialItems: T[] | readonly T[]
   /**
    * The filter function to use to filter the items.
    */
@@ -24,15 +24,15 @@ export function useListCollection<T>(props: MaybeFunction<UseListCollectionProps
     return [{ initialItems, filter, limit }, collectionOptions]
   })
 
-  let items = $state<T[]>(untrack(() => localProps.initialItems))
+  let items = $state<T[] | readonly T[]>(untrack(() => localProps.initialItems))
   let filterText = $state('')
 
-  const setItems = (newItems: T[]) => {
+  const setItems = (newItems: T[] | readonly T[]) => {
     items = newItems
     filterText = ''
   }
 
-  const create = (itemsToCreate: T[]) => {
+  const create = (itemsToCreate: T[] | readonly T[]) => {
     return createListCollection({ ...collectionOptions, items: itemsToCreate })
   }
 

packages/vue/CHANGELOG.md

@@ -6,6 +6,10 @@
   - Added `Carousel.AutoplayIndicator` component for conditionally rendering content based on autoplay state
   - Added `Carousel.ProgressText` component for displaying current page progress (e.g., "1 / 5")
 
+### Changed
+
+- **useListCollection**: Updated `initialItems` to accept `readonly` arrays for better compatibility with immutable data patterns.
+
 ### Fixed
 
 - **Combobox**:

packages/vue/src/components/collection/use-list-collection.ts

@@ -5,7 +5,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
   /**
    * The initial items to display in the collection.
    */
-  initialItems: T[]
+  initialItems: T[] | readonly T[]
   /**
    * The filter function to use to filter the items.
    */
@@ -28,15 +28,15 @@ export function useListCollection<T>(props: MaybeRef<UseListCollectionProps<T>>)
     return initialItems
   }
 
-  const items = ref(init()) as Ref<T[]>
+  const items = ref(init()) as Ref<T[] | readonly T[]>
   const filterText = ref('')
 
-  const setItems = (newItems: T[]) => {
+  const setItems = (newItems: T[] | readonly T[]) => {
     items.value = newItems
     filterText.value = ''
   }
 
-  const create = (itemsToCreate: T[]) => {
+  const create = (itemsToCreate: T[] | readonly T[]) => {
     const [, collectionOptions] = resolvedProps.value
     return createListCollection({ ...collectionOptions, items: itemsToCreate })
   }