@vellira-ui/react-native 2.30.0 → 2.31.0

package/README.md

@@ -100,7 +100,7 @@ export function RoleSelect() {
     <Select
       label='Role'
       value={role}
-      onChange={setRole}
+      onValueChange={setRole}
       options={[
         { label: 'Admin', value: 'admin' },
         { label: 'Editor', value: 'editor' },

package/dist/index.js

@@ -1548,8 +1548,11 @@ function Select({
   description,
   value,
   defaultValue,
-  onChange,
-  options,
+  onValueChange,
+  options: optionsProp,
+  multiple = false,
+  maxSelected,
+  closeOnSelect,
   placeholder = "Select...",
   size = "md",
   required = false,
@@ -1564,24 +1567,39 @@ function Select({
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles15);
-  const { selectedValue, setSelectedValue, selectedOption, isOpen, setIsOpen } = useSelect({
+  const options = optionsProp ?? [];
+  const {
+    selectedValue,
+    selectedValues,
+    selectedOption,
+    selectedOptions,
+    isOpen,
+    setIsOpen,
+    selectValue
+  } = useSelect({
     value,
     defaultValue,
-    onChange,
+    onValueChange,
     options,
+    multiple,
+    maxSelected,
+    closeOnSelect,
     disabled
   });
-  const [draftValue, setDraftValue] = useState2(selectedValue);
+  const resolvedSelectedValues = selectedValues ?? [];
+  const resolvedSelectedOptions = selectedOptions ?? [];
+  const selectedValueText = Array.isArray(selectedValue) ? selectedValue[0] ?? "" : selectedValue ?? "";
+  const [draftValue, setDraftValue] = useState2(selectedValueText);
   const hasError = !!error;
   useEffect2(() => {
     if (isOpen) {
-      setDraftValue(selectedValue);
+      setDraftValue(selectedValueText);
     }
-  }, [isOpen, selectedValue]);
+  }, [isOpen, selectedValueText]);
   const resolvedLabel = accessibilityLabel ?? label ?? selectedOption?.label ?? placeholder ?? "Select";
   const openPicker = () => {
     if (disabled) return;
-    setDraftValue(selectedValue);
+    setDraftValue(selectedValueText);
     setIsOpen(true);
   };
   const closePicker = () => {
@@ -1600,9 +1618,10 @@ function Select({
       setIsOpen(false);
       return;
     }
-    setSelectedValue(draftValue);
+    selectValue(draftValue);
     setIsOpen(false);
   };
+  const displayText = multiple && resolvedSelectedOptions.length ? resolvedSelectedOptions.map((option) => option.label).join(", ") : selectedOption?.label ?? placeholder;
   return /* @__PURE__ */ jsxs9(
     FormField,
     {
@@ -1616,8 +1635,8 @@ function Select({
         /* @__PURE__ */ jsx17(
           SelectTrigger,
           {
-            displayText: selectedOption?.label ?? placeholder,
-            isPlaceholder: !selectedOption,
+            displayText,
+            isPlaceholder: resolvedSelectedValues.length === 0,
             isOpen,
             size,
             disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",