@vellira-ui/core 2.30.0 → 2.32.0

package/dist/useSelect.d.ts

@@ -3,20 +3,28 @@ export interface SelectOptionLike extends NavigableItem {
     label: string;
     value: string;
 }
+export type SelectStateValue = string | string[];
 export interface UseSelectParams<TOption extends SelectOptionLike> {
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
+    value?: SelectStateValue;
+    defaultValue?: SelectStateValue;
+    onValueChange?: (value: SelectStateValue) => void;
+    /** @deprecated Use onValueChange. */
+    onChange?: (value: SelectStateValue) => void;
     options: TOption[];
+    multiple?: boolean;
+    maxSelected?: number;
+    closeOnSelect?: boolean;
     disabled?: boolean;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export declare const useSelect: <TOption extends SelectOptionLike>({ value, defaultValue, onChange, options, disabled, open, defaultOpen, onOpenChange, }: UseSelectParams<TOption>) => {
-    selectedValue: string;
-    setSelectedValue: (next: string) => void;
+export declare const useSelect: <TOption extends SelectOptionLike>({ value, defaultValue, onValueChange, onChange, options, multiple, maxSelected, closeOnSelect, disabled, open, defaultOpen, onOpenChange, }: UseSelectParams<TOption>) => {
+    selectedValue: SelectStateValue;
+    selectedValues: string[];
+    setSelectedValue: (next: SelectStateValue) => void;
     selectedOption: TOption | undefined;
+    selectedOptions: TOption[];
     isOpen: boolean;
     open: boolean;
     setIsOpen: (next: boolean) => void;

package/dist/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../src/useSelect.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe,CAAC,OAAO,SAAS,gBAAgB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,SAAS,gBAAgB,EAAE,wFASzD,eAAe,CAAC,OAAO,CAAC;;;;;;;;;;;;;6BAoDX,MAAM;wBAAN,MAAM;;;CAgDrB,CAAC"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../src/useSelect.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEjD,MAAM,WAAW,eAAe,CAAC,OAAO,SAAS,gBAAgB;IAC/D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,SAAS,gBAAgB,EAAE,6IAazD,eAAe,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;6BAmEX,MAAM;wBAAN,MAAM;;;CAsFrB,CAAC"}

package/dist/useSelect.js

@@ -1,11 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useControllableState } from './useControllableState.js';
 import { useKeyboardNavigation, } from './useKeyboardNavigation.js';
-export const useSelect = ({ value, defaultValue, onChange, options, disabled = false, open, defaultOpen = false, onOpenChange, }) => {
+export const useSelect = ({ value, defaultValue, onValueChange, onChange, options, multiple = false, maxSelected, closeOnSelect = !multiple, disabled = false, open, defaultOpen = false, onOpenChange, }) => {
     const [selectedValue, setSelectedValue] = useControllableState({
         value,
-        defaultValue: defaultValue ?? '',
-        onChange,
+        defaultValue: defaultValue ?? (multiple ? [] : ''),
+        onChange: onValueChange ?? onChange,
     });
     const [isOpen, setIsOpen] = useControllableState({
         value: open,
@@ -13,13 +13,19 @@ export const useSelect = ({ value, defaultValue, onChange, options, disabled = f
         onChange: onOpenChange,
     });
     const [activeIndex, setActiveIndex] = useState(-1);
-    const selectedOption = useMemo(() => options.find((option) => option.value === selectedValue), [options, selectedValue]);
+    const selectedValues = useMemo(() => Array.isArray(selectedValue)
+        ? selectedValue
+        : selectedValue
+            ? [selectedValue]
+            : [], [selectedValue]);
+    const selectedOption = useMemo(() => options.find((option) => selectedValues.includes(option.value)), [options, selectedValues]);
+    const selectedOptions = useMemo(() => options.filter((option) => selectedValues.includes(option.value)), [options, selectedValues]);
     const getInitialActiveIndex = useCallback(() => {
-        const selectedIndex = options.findIndex((option) => option.value === selectedValue && !option.disabled);
+        const selectedIndex = options.findIndex((option) => selectedValues.includes(option.value) && !option.disabled);
         if (selectedIndex >= 0)
             return selectedIndex;
         return options.findIndex((option) => !option.disabled);
-    }, [options, selectedValue]);
+    }, [options, selectedValues]);
     const openDropdown = useCallback(() => {
         if (disabled)
             return;
@@ -39,12 +45,41 @@ export const useSelect = ({ value, defaultValue, onChange, options, disabled = f
         openDropdown();
     }, [closeDropdown, disabled, isOpen, openDropdown]);
     const selectValue = useCallback((nextValue) => {
+        if (nextValue === '') {
+            setSelectedValue(multiple ? [] : '');
+            closeDropdown();
+            return;
+        }
         const nextOption = options.find((option) => option.value === nextValue);
         if (!nextOption || nextOption.disabled)
             return;
+        if (multiple) {
+            const isSelected = selectedValues.includes(nextValue);
+            if (!isSelected &&
+                typeof maxSelected === 'number' &&
+                selectedValues.length >= maxSelected) {
+                return;
+            }
+            const nextValues = selectedValues.includes(nextValue)
+                ? selectedValues.filter((value) => value !== nextValue)
+                : [...selectedValues, nextValue];
+            setSelectedValue(nextValues);
+            if (closeOnSelect) {
+                closeDropdown();
+            }
+            return;
+        }
         setSelectedValue(nextValue);
         closeDropdown();
-    }, [closeDropdown, options, setSelectedValue]);
+    }, [
+        closeDropdown,
+        closeOnSelect,
+        maxSelected,
+        multiple,
+        options,
+        selectedValues,
+        setSelectedValue,
+    ]);
     const selectActiveOption = useCallback(() => {
         const activeOption = options[activeIndex];
         if (!activeOption)
@@ -63,8 +98,10 @@ export const useSelect = ({ value, defaultValue, onChange, options, disabled = f
     });
     return {
         selectedValue,
+        selectedValues,
         setSelectedValue,
         selectedOption,
+        selectedOptions,
         isOpen,
         open: isOpen,
         setIsOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/core",
-  "version": "2.30.0",
+  "version": "2.32.0",
   "description": "Shared logic and hooks for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",