@onesaz/ui 0.3.4 → 0.3.6

package/dist/index.d.ts

@@ -678,11 +678,14 @@ interface ComboboxOption {
     label: string;
     disabled?: boolean;
 }
-interface ComboboxSingleProps {
-    options: ComboboxOption[];
-    value?: ComboboxOption | null;
-    defaultValue?: ComboboxOption | null;
-    onChange?: (value: ComboboxOption | null) => void;
+type ComboboxPrimitiveOption = string;
+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;
@@ -693,12 +696,15 @@ interface ComboboxSingleProps {
     openOnFocus?: boolean;
     inputValue?: string;
     onInputChange?: (value: string) => void;
-}
-interface ComboboxMultipleProps {
-    options: ComboboxOption[];
-    value?: ComboboxOption[];
-    defaultValue?: ComboboxOption[];
-    onChange?: (value: ComboboxOption[]) => void;
+    simpleOptions?: boolean;
+    labelKey?: string;
+    valueKey?: string;
+}
+interface ComboboxMultipleProps<T extends ComboboxOptionInput = ComboboxOptionInput> {
+    options: T[];
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
@@ -713,6 +719,9 @@ interface ComboboxMultipleProps {
     selectAll?: boolean;
     /** Label for select-all option */
     selectAllLabel?: string;
+    simpleOptions?: boolean;
+    labelKey?: string;
+    valueKey?: string;
     /** Maximum number of items to display as chips before showing "+N more" */
     maxDisplayItems?: number;
 }

package/dist/index.js

@@ -2975,6 +2975,38 @@ var Combobox = React30.forwardRef(
       openOnFocus = true,
       className
     } = props;
+    const labelKey = props.labelKey ?? "label";
+    const valueKey = props.valueKey ?? "value";
+    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];
+        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);
@@ -2988,19 +3020,22 @@ var Combobox = React30.forwardRef(
     const multiValue = isMultiple ? props.value !== void 0 ? props.value : internalMultiValue : [];
     const search = props.inputValue !== void 0 ? props.inputValue : internalSearch;
     const filteredOptions = React30.useMemo(() => {
-      if (!search) return options;
-      return options.filter(
+      if (!search) return normalizedOptions;
+      return normalizedOptions.filter(
         (option) => option.label.toLowerCase().includes(search.toLowerCase())
       );
-    }, [options, search]);
+    }, [normalizedOptions, search]);
     const selectedOptions = isMultiple ? multiValue : [];
-    const selectableOptions = React30.useMemo(
-      () => options.filter((option) => !option.disabled),
-      [options]
+    const selectedValueKeys = React30.useMemo(
+      () => new Set(selectedOptions.map((option) => getOptionValue(option))),
+      [selectedOptions, getOptionValue]
     );
-    const allSelected = isMultiple && selectableOptions.length > 0 && selectableOptions.every(
-      (option) => multiValue.some((item) => item.value === option.value)
+    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) => selectedValueKeys.has(option.value));
     const handleSingleSelect = (option) => {
       if (!isMultiple) {
         if (props.value === void 0) {
@@ -3015,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);
         }
@@ -3026,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);
         }
@@ -3047,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();
@@ -3112,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",
@@ -3138,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",
@@ -3302,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",
@@ -5916,7 +5952,9 @@ var PlaygroundContent = () => {
         {
           options: comboboxOptions,
           value: comboboxValue,
-          onChange: setComboboxValue,
+          onChange: (nextValue) => {
+            setComboboxValue(nextValue);
+          },
           placeholder: "Search frameworks..."
         }
       )