diff --git a/src/figma-make/components/base/multi-select.tsx b/src/figma-make/components/base/multi-select.tsx index 63ebdd36..656073c6 100644 --- a/src/figma-make/components/base/multi-select.tsx +++ b/src/figma-make/components/base/multi-select.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import { Check, ChevronsUpDown, X } from 'lucide-react'; +import { Check, ChevronsUpDown, X, Loader2 } from 'lucide-react'; import { cn } from '@/lib/helper'; import { Button } from '@/figma-make/components/base/button'; import { @@ -29,6 +29,8 @@ interface MultiSelectProps { selected: string[]; onChange: (selected: string[]) => void; onSearchChange?: (value: string) => void; + onLoadMore?: () => void; + isLoadingMore?: boolean; placeholder?: string; className?: string; disabled?: boolean; @@ -39,6 +41,8 @@ export function MultiSelect({ selected, onChange, onSearchChange, + onLoadMore, + isLoadingMore, placeholder = 'Select items...', className, disabled, @@ -115,7 +119,18 @@ export function MultiSelect({ onValueChange={onSearchChange} /> No item found. - + { + const target = e.currentTarget; + if ( + target.scrollHeight - target.scrollTop <= + target.clientHeight + 1 + ) { + onLoadMore?.(); + } + }} + > {options.map((option) => ( ))} + {isLoadingMore && ( +
+ +
+ )}