@onesaz/ui 0.3.5 → 0.3.6

package/dist/index.d.ts

@@ -679,12 +679,13 @@ interface ComboboxOption {
     disabled?: boolean;
 }
 type ComboboxPrimitiveOption = string;
-type ComboboxObjectOption = Record<string, unknown>;
-interface ComboboxSingleProps {
-    options: ComboboxOption[] | ComboboxPrimitiveOption[] | ComboboxObjectOption[];
-    value?: ComboboxOption | null;
-    defaultValue?: ComboboxOption | null;
-    onChange?: (value: ComboboxOption | null) => void;
+type ComboboxObjectOption = object;
+type ComboboxOptionInput = ComboboxPrimitiveOption | ComboboxObjectOption;
+interface ComboboxSingleProps<T extends ComboboxOptionInput = ComboboxOptionInput> {
+    options: T[];
+    value?: T | null;
+    defaultValue?: T | null;
+    onChange?: (value: T | null) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
@@ -699,11 +700,11 @@ interface ComboboxSingleProps {
     labelKey?: string;
     valueKey?: string;
 }
-interface ComboboxMultipleProps {
-    options: ComboboxOption[] | ComboboxPrimitiveOption[] | ComboboxObjectOption[];
-    value?: ComboboxOption[];
-    defaultValue?: ComboboxOption[];
-    onChange?: (value: ComboboxOption[]) => void;
+interface ComboboxMultipleProps<T extends ComboboxOptionInput = ComboboxOptionInput> {
+    options: T[];
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;

package/dist/index.js

@@ -2977,21 +2977,36 @@ var Combobox = React30.forwardRef(
     } = props;
     const labelKey = props.labelKey ?? "label";
     const valueKey = props.valueKey ?? "value";
-    const normalizedOptions = React30.useMemo(() => {
-      return (options ?? []).map((option) => {
-        if (typeof option === "string") {
-          return { label: option, value: option };
-        }
+    const getOptionLabel = React30.useCallback(
+      (option) => {
+        if (typeof option === "string") return option;
         const record = option;
         const maybeLabel = record[labelKey];
+        return typeof maybeLabel === "string" ? maybeLabel : String(maybeLabel ?? "");
+      },
+      [labelKey]
+    );
+    const getOptionValue = React30.useCallback(
+      (option) => {
+        if (typeof option === "string") return option;
+        const record = option;
         const maybeValue = record[valueKey];
-        return {
-          label: typeof maybeLabel === "string" ? maybeLabel : String(maybeLabel ?? ""),
-          value: typeof maybeValue === "string" ? maybeValue : String(maybeValue ?? ""),
-          disabled: Boolean(option.disabled)
-        };
-      });
-    }, [options, labelKey, valueKey]);
+        if (maybeValue !== void 0 && maybeValue !== null) {
+          return String(maybeValue);
+        }
+        return getOptionLabel(option);
+      },
+      [valueKey, getOptionLabel]
+    );
+    const normalizedOptions = React30.useMemo(
+      () => (options ?? []).map((option) => ({
+        raw: option,
+        label: getOptionLabel(option),
+        value: getOptionValue(option),
+        disabled: Boolean(option.disabled)
+      })),
+      [options, getOptionLabel, getOptionValue]
+    );
     const [open, setOpen] = React30.useState(false);
     const [internalSearch, setInternalSearch] = React30.useState("");
     const containerRef = React30.useRef(null);
@@ -3011,13 +3026,16 @@ var Combobox = React30.forwardRef(
       );
     }, [normalizedOptions, search]);
     const selectedOptions = isMultiple ? multiValue : [];
+    const selectedValueKeys = React30.useMemo(
+      () => new Set(selectedOptions.map((option) => getOptionValue(option))),
+      [selectedOptions, getOptionValue]
+    );
+    const singleValueKey = singleValue ? getOptionValue(singleValue) : null;
     const selectableOptions = React30.useMemo(
       () => normalizedOptions.filter((option) => !option.disabled),
       [normalizedOptions]
     );
-    const allSelected = isMultiple && selectableOptions.length > 0 && selectableOptions.every(
-      (option) => multiValue.some((item) => item.value === option.value)
-    );
+    const allSelected = isMultiple && selectableOptions.length > 0 && selectableOptions.every((option) => selectedValueKeys.has(option.value));
     const handleSingleSelect = (option) => {
       if (!isMultiple) {
         if (props.value === void 0) {
@@ -3032,8 +3050,9 @@ var Combobox = React30.forwardRef(
     };
     const handleMultiSelect = (option) => {
       if (isMultiple) {
-        const exists = multiValue.some((item) => item.value === option.value);
-        const newValue = exists ? multiValue.filter((item) => item.value !== option.value) : [...multiValue, option];
+        const optionKey = getOptionValue(option);
+        const exists = multiValue.some((item) => getOptionValue(item) === optionKey);
+        const newValue = exists ? multiValue.filter((item) => getOptionValue(item) !== optionKey) : [...multiValue, option];
         if (props.value === void 0) {
           setInternalMultiValue(newValue);
         }
@@ -3043,7 +3062,7 @@ var Combobox = React30.forwardRef(
     const handleRemoveItem = (optionValue, e) => {
       e.stopPropagation();
       if (isMultiple) {
-        const newValue = multiValue.filter((v) => v.value !== optionValue);
+        const newValue = multiValue.filter((v) => getOptionValue(v) !== optionValue);
         if (props.value === void 0) {
           setInternalMultiValue(newValue);
         }
@@ -3064,9 +3083,9 @@ var Combobox = React30.forwardRef(
       if (!isMultiple) return;
       const nextValue = allSelected ? [] : selectableOptions;
       if (props.value === void 0) {
-        setInternalMultiValue(nextValue);
+        setInternalMultiValue(nextValue.map((option) => option.raw));
       }
-      props.onChange?.(nextValue);
+      props.onChange?.(nextValue.map((option) => option.raw));
     };
     const handleClearSingle = (e) => {
       e.stopPropagation();
@@ -3129,12 +3148,12 @@ var Combobox = React30.forwardRef(
                 {
                   className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs font-medium",
                   children: [
-                    option.label,
+                    getOptionLabel(option),
                     /* @__PURE__ */ jsx30(
                       "button",
                       {
                         type: "button",
-                        onClick: (e) => handleRemoveItem(option.value, e),
+                        onClick: (e) => handleRemoveItem(getOptionValue(option), e),
                         className: "ml-1 rounded-full hover:bg-background/50",
                         children: /* @__PURE__ */ jsx30(
                           "svg",
@@ -3155,14 +3174,14 @@ var Combobox = React30.forwardRef(
                     )
                   ]
                 },
-                option.value
+                getOptionValue(option)
               )),
               remainingCount > 0 && /* @__PURE__ */ jsxs15("span", { className: "text-xs text-muted-foreground", children: [
                 "+",
                 remainingCount,
                 " more"
               ] })
-            ] }) }) : /* @__PURE__ */ jsx30("span", { className: cn(!singleValue && "text-muted-foreground"), children: singleValue?.label ?? placeholder }),
+            ] }) }) : /* @__PURE__ */ jsx30("span", { className: cn(!singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
             /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
               isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx30(
                 "button",
@@ -3319,13 +3338,13 @@ var Combobox = React30.forwardRef(
             }
           ),
           filteredOptions.map((option) => {
-            const isSelected = isMultiple ? multiValue.some((item) => item.value === option.value) : option.value === singleValue?.value;
+            const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
             return /* @__PURE__ */ jsxs15(
               "button",
               {
                 type: "button",
                 disabled: option.disabled,
-                onClick: () => isMultiple ? handleMultiSelect(option) : handleSingleSelect(option),
+                onClick: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw),
                 className: cn(
                   "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
                   "hover:bg-muted hover:text-foreground",
@@ -5933,7 +5952,9 @@ var PlaygroundContent = () => {
         {
           options: comboboxOptions,
           value: comboboxValue,
-          onChange: setComboboxValue,
+          onChange: (nextValue) => {
+            setComboboxValue(nextValue);
+          },
           placeholder: "Search frameworks..."
         }
       )