@rufous/ui 0.2.101 → 0.2.103

package/dist/main.cjs

@@ -1748,7 +1748,7 @@ var Checkbox = ({
 }) => {
   const sxClass = useSx(sx);
   const handleChange = (e) => {
-    if (onChange) onChange(e.target.checked);
+    if (onChange) onChange(e, e.target.checked);
   };
   return /* @__PURE__ */ import_react16.default.createElement("div", { className: ["checkbox-wrapper-13", sxClass].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react16.default.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ import_react16.default.createElement(
     "input",
@@ -2226,10 +2226,13 @@ function AutocompleteInner(props, _ref) {
     onInputChange,
     getOptionLabel = defaultGetLabel,
     isOptionEqualToValue,
+    getOptionSelected,
     groupBy,
     filterOptions,
     renderOption,
+    renderTags,
     getOptionDisabled,
+    filterSelectedOptions = false,
     multiple = false,
     freeSolo = false,
     clearable = true,
@@ -2295,14 +2298,24 @@ function AutocompleteInner(props, _ref) {
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
   const isEqual = (0, import_react19.useCallback)(
-    (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : defaultIsEqual(a, b),
-    [isOptionEqualToValue]
+    (a, b) => {
+      if (isOptionEqualToValue) return isOptionEqualToValue(a, b);
+      if (getOptionSelected) return getOptionSelected(a, b);
+      return defaultIsEqual(a, b);
+    },
+    [isOptionEqualToValue, getOptionSelected]
   );
   const isSelected = (0, import_react19.useCallback)(
     (opt) => selectedValues.some((v) => isEqual(opt, v)),
     [selectedValues, isEqual]
   );
-  const filtered = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, filterQuery, getOptionLabel);
+  const filtered = (() => {
+    let opts = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, filterQuery, getOptionLabel);
+    if (filterSelectedOptions && multiple) {
+      opts = opts.filter((opt) => !isSelected(opt));
+    }
+    return opts;
+  })();
   const flatEntries = [];
   if (groupBy) {
     const groups = {};
@@ -2339,7 +2352,7 @@ function AutocompleteInner(props, _ref) {
     onClose?.();
     if (!justSelected && !freeSolo && !multiple && value == null) {
       setInputStr("");
-      onInputChange?.("");
+      onInputChange?.(null, "");
     }
   }, [freeSolo, multiple, value, onInputChange, onClose]);
   (0, import_react19.useEffect)(() => {
@@ -2376,13 +2389,13 @@ function AutocompleteInner(props, _ref) {
       onChange?.(event, next, already ? "removeOption" : "selectOption");
       setInputStr("");
       setFilterQuery("");
-      onInputChange?.("");
+      onInputChange?.(event, "");
       inputRef.current?.focus();
     } else {
       onChange?.(event, opt, "selectOption");
       setInputStr(getOptionLabel(opt));
       setFilterQuery("");
-      onInputChange?.(getOptionLabel(opt));
+      onInputChange?.(event, getOptionLabel(opt));
       closePopup(true);
     }
     setFocusedIdx(-1);
@@ -2392,7 +2405,7 @@ function AutocompleteInner(props, _ref) {
     onChange?.(e, multiple ? [] : null, "clear");
     setInputStr("");
     setFilterQuery("");
-    onInputChange?.("");
+    onInputChange?.(e, "");
     inputRef.current?.focus();
   };
   const removeTag = (opt, e) => {
@@ -2404,7 +2417,7 @@ function AutocompleteInner(props, _ref) {
     const v = e.target.value;
     setInputStr(v);
     setFilterQuery(v);
-    onInputChange?.(v);
+    onInputChange?.(e, v);
     if (!open) openPopup();
   };
   const handleKeyDown = (e) => {
@@ -2488,7 +2501,10 @@ function AutocompleteInner(props, _ref) {
         }
       }
     },
-    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ import_react19.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react19.default.createElement(
+    multiple && (renderTags ? renderTags(selectedValues, ({ index }) => ({
+      key: index,
+      onDelete: (e) => removeTag(selectedValues[index], e)
+    })) : /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, visibleTags.map((opt, i) => /* @__PURE__ */ import_react19.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react19.default.createElement(
       "button",
       {
         type: "button",
@@ -2498,15 +2514,14 @@ function AutocompleteInner(props, _ref) {
         tabIndex: -1
       },
       /* @__PURE__ */ import_react19.default.createElement(CloseSmIcon, { size: 12 })
-    ))),
-    hiddenCount > 0 && /* @__PURE__ */ import_react19.default.createElement(
+    ))), hiddenCount > 0 && /* @__PURE__ */ import_react19.default.createElement(
       Tooltip,
       {
         title: selectedValues.slice(limitTags).map((o) => getOptionLabel(o)).join(", "),
         placement: "top"
       },
       /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more")
-    ),
+    ))),
     /* @__PURE__ */ import_react19.default.createElement(
       "input",
       {
@@ -2592,28 +2607,27 @@ function AutocompleteInner(props, _ref) {
     const focused = focusedIdx === flatIdx;
     const optDisabled = getOptionDisabled?.(option) ?? false;
     const label2 = getOptionLabel(option);
-    return /* @__PURE__ */ import_react19.default.createElement(
-      "li",
-      {
-        key: label2 + flatIdx,
-        "data-idx": flatIdx,
-        role: "option",
-        "aria-selected": selected,
-        "aria-disabled": optDisabled,
-        className: [
-          "rf-autocomplete__option",
-          selected ? "rf-autocomplete__option--selected" : "",
-          focused ? "rf-autocomplete__option--focused" : "",
-          optDisabled ? "rf-autocomplete__option--disabled" : ""
-        ].filter(Boolean).join(" "),
-        onMouseEnter: () => setFocusedIdx(flatIdx),
-        onMouseLeave: () => setFocusedIdx(-1),
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: (e) => selectOption(option, e)
-      },
-      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react19.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
-      !renderOption && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react19.default.createElement(CheckIcon, null))
-    );
+    const liProps = {
+      key: label2 + flatIdx,
+      "data-idx": flatIdx,
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": optDisabled,
+      className: [
+        "rf-autocomplete__option",
+        selected ? "rf-autocomplete__option--selected" : "",
+        focused ? "rf-autocomplete__option--focused" : "",
+        optDisabled ? "rf-autocomplete__option--disabled" : ""
+      ].filter(Boolean).join(" "),
+      onMouseEnter: () => setFocusedIdx(flatIdx),
+      onMouseLeave: () => setFocusedIdx(-1),
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: (e) => selectOption(option, e)
+    };
+    if (renderOption) {
+      return renderOption(liProps, option, { selected, index: flatIdx });
+    }
+    return /* @__PURE__ */ import_react19.default.createElement("li", { ...liProps }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react19.default.createElement(CheckIcon, null)));
   }
 }
 var Autocomplete = import_react19.default.forwardRef(AutocompleteInner);

package/dist/main.d.cts

@@ -510,7 +510,7 @@ interface CheckboxProps {
   id?: string;
   label?: string;
   checked: boolean;
-  onChange: (checked: boolean) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
   disabled?: boolean;
   className?: string;
   style?: React.CSSProperties;
@@ -697,24 +697,44 @@ interface AutocompleteProps<T = string> {
     onChange?: (event: React__default.SyntheticEvent, value: T | T[] | null, reason: 'selectOption' | 'removeOption' | 'clear' | 'freeSolo') => void;
     /** Controlled text in the input */
     inputValue?: string;
-    /** Called on every keystroke */
-    onInputChange?: (value: string) => void;
+    /** Called on every keystroke — receives the native event and the new input string */
+    onInputChange?: (event: React__default.SyntheticEvent | null, value: string) => void;
     /** Return the string label for an option */
     getOptionLabel?: (option: T) => string;
     /** Decide equality between option and value (useful for objects) */
     isOptionEqualToValue?: (option: T, value: T) => boolean;
+    /** MUI v4 alias for isOptionEqualToValue */
+    getOptionSelected?: (option: T, value: T) => boolean;
     /** Group options by returning a category string */
     groupBy?: (option: T) => string;
     /** Custom option filter — replaces the default substring match */
     filterOptions?: (options: T[], inputValue: string) => T[];
-    /** Custom option renderer */
-    renderOption?: (option: T, state: {
+    /**
+     * Custom option renderer (MUI v5 style).
+     * Receives the li element props as the first argument so you can render your own <li>.
+     * `(props, option, state) => ReactNode`
+     */
+    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement> & {
+        key: React__default.Key;
+    }, option: T, state: {
         selected: boolean;
-        focused: boolean;
         index: number;
     }) => ReactNode;
+    /**
+     * Custom tag renderer in multiple mode.
+     * `(value, getTagProps) => ReactNode`
+     * getTagProps({ index }) returns { key, onDelete }.
+     */
+    renderTags?: (value: T[], getTagProps: (params: {
+        index: number;
+    }) => {
+        key: number;
+        onDelete: (e: React__default.MouseEvent) => void;
+    }) => ReactNode;
     /** Mark specific options as disabled */
     getOptionDisabled?: (option: T) => boolean;
+    /** If true, already-selected options are hidden from the dropdown */
+    filterSelectedOptions?: boolean;
     /** Allow multiple selections */
     multiple?: boolean;
     /** Allow values that are not in the options list */

package/dist/main.d.ts

@@ -510,7 +510,7 @@ interface CheckboxProps {
   id?: string;
   label?: string;
   checked: boolean;
-  onChange: (checked: boolean) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
   disabled?: boolean;
   className?: string;
   style?: React.CSSProperties;
@@ -697,24 +697,44 @@ interface AutocompleteProps<T = string> {
     onChange?: (event: React__default.SyntheticEvent, value: T | T[] | null, reason: 'selectOption' | 'removeOption' | 'clear' | 'freeSolo') => void;
     /** Controlled text in the input */
     inputValue?: string;
-    /** Called on every keystroke */
-    onInputChange?: (value: string) => void;
+    /** Called on every keystroke — receives the native event and the new input string */
+    onInputChange?: (event: React__default.SyntheticEvent | null, value: string) => void;
     /** Return the string label for an option */
     getOptionLabel?: (option: T) => string;
     /** Decide equality between option and value (useful for objects) */
     isOptionEqualToValue?: (option: T, value: T) => boolean;
+    /** MUI v4 alias for isOptionEqualToValue */
+    getOptionSelected?: (option: T, value: T) => boolean;
     /** Group options by returning a category string */
     groupBy?: (option: T) => string;
     /** Custom option filter — replaces the default substring match */
     filterOptions?: (options: T[], inputValue: string) => T[];
-    /** Custom option renderer */
-    renderOption?: (option: T, state: {
+    /**
+     * Custom option renderer (MUI v5 style).
+     * Receives the li element props as the first argument so you can render your own <li>.
+     * `(props, option, state) => ReactNode`
+     */
+    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement> & {
+        key: React__default.Key;
+    }, option: T, state: {
         selected: boolean;
-        focused: boolean;
         index: number;
     }) => ReactNode;
+    /**
+     * Custom tag renderer in multiple mode.
+     * `(value, getTagProps) => ReactNode`
+     * getTagProps({ index }) returns { key, onDelete }.
+     */
+    renderTags?: (value: T[], getTagProps: (params: {
+        index: number;
+    }) => {
+        key: number;
+        onDelete: (e: React__default.MouseEvent) => void;
+    }) => ReactNode;
     /** Mark specific options as disabled */
     getOptionDisabled?: (option: T) => boolean;
+    /** If true, already-selected options are hidden from the dropdown */
+    filterSelectedOptions?: boolean;
     /** Allow multiple selections */
     multiple?: boolean;
     /** Allow values that are not in the options list */

package/dist/main.js

@@ -1582,7 +1582,7 @@ var Checkbox = ({
 }) => {
   const sxClass = useSx(sx);
   const handleChange = (e) => {
-    if (onChange) onChange(e.target.checked);
+    if (onChange) onChange(e, e.target.checked);
   };
   return /* @__PURE__ */ React67.createElement("div", { className: ["checkbox-wrapper-13", sxClass].filter(Boolean).join(" ") }, /* @__PURE__ */ React67.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ React67.createElement(
     "input",
@@ -2072,10 +2072,13 @@ function AutocompleteInner(props, _ref) {
     onInputChange,
     getOptionLabel = defaultGetLabel,
     isOptionEqualToValue,
+    getOptionSelected,
     groupBy,
     filterOptions,
     renderOption,
+    renderTags,
     getOptionDisabled,
+    filterSelectedOptions = false,
     multiple = false,
     freeSolo = false,
     clearable = true,
@@ -2141,14 +2144,24 @@ function AutocompleteInner(props, _ref) {
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
   const isEqual = useCallback2(
-    (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : defaultIsEqual(a, b),
-    [isOptionEqualToValue]
+    (a, b) => {
+      if (isOptionEqualToValue) return isOptionEqualToValue(a, b);
+      if (getOptionSelected) return getOptionSelected(a, b);
+      return defaultIsEqual(a, b);
+    },
+    [isOptionEqualToValue, getOptionSelected]
   );
   const isSelected = useCallback2(
     (opt) => selectedValues.some((v) => isEqual(opt, v)),
     [selectedValues, isEqual]
   );
-  const filtered = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, filterQuery, getOptionLabel);
+  const filtered = (() => {
+    let opts = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, filterQuery, getOptionLabel);
+    if (filterSelectedOptions && multiple) {
+      opts = opts.filter((opt) => !isSelected(opt));
+    }
+    return opts;
+  })();
   const flatEntries = [];
   if (groupBy) {
     const groups = {};
@@ -2185,7 +2198,7 @@ function AutocompleteInner(props, _ref) {
     onClose?.();
     if (!justSelected && !freeSolo && !multiple && value == null) {
       setInputStr("");
-      onInputChange?.("");
+      onInputChange?.(null, "");
     }
   }, [freeSolo, multiple, value, onInputChange, onClose]);
   useEffect5(() => {
@@ -2222,13 +2235,13 @@ function AutocompleteInner(props, _ref) {
       onChange?.(event, next, already ? "removeOption" : "selectOption");
       setInputStr("");
       setFilterQuery("");
-      onInputChange?.("");
+      onInputChange?.(event, "");
       inputRef.current?.focus();
     } else {
       onChange?.(event, opt, "selectOption");
       setInputStr(getOptionLabel(opt));
       setFilterQuery("");
-      onInputChange?.(getOptionLabel(opt));
+      onInputChange?.(event, getOptionLabel(opt));
       closePopup(true);
     }
     setFocusedIdx(-1);
@@ -2238,7 +2251,7 @@ function AutocompleteInner(props, _ref) {
     onChange?.(e, multiple ? [] : null, "clear");
     setInputStr("");
     setFilterQuery("");
-    onInputChange?.("");
+    onInputChange?.(e, "");
     inputRef.current?.focus();
   };
   const removeTag = (opt, e) => {
@@ -2250,7 +2263,7 @@ function AutocompleteInner(props, _ref) {
     const v = e.target.value;
     setInputStr(v);
     setFilterQuery(v);
-    onInputChange?.(v);
+    onInputChange?.(e, v);
     if (!open) openPopup();
   };
   const handleKeyDown = (e) => {
@@ -2334,7 +2347,10 @@ function AutocompleteInner(props, _ref) {
         }
       }
     },
-    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ React70.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React70.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React70.createElement(
+    multiple && (renderTags ? renderTags(selectedValues, ({ index }) => ({
+      key: index,
+      onDelete: (e) => removeTag(selectedValues[index], e)
+    })) : /* @__PURE__ */ React70.createElement(React70.Fragment, null, visibleTags.map((opt, i) => /* @__PURE__ */ React70.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React70.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React70.createElement(
       "button",
       {
         type: "button",
@@ -2344,15 +2360,14 @@ function AutocompleteInner(props, _ref) {
         tabIndex: -1
       },
       /* @__PURE__ */ React70.createElement(CloseSmIcon, { size: 12 })
-    ))),
-    hiddenCount > 0 && /* @__PURE__ */ React70.createElement(
+    ))), hiddenCount > 0 && /* @__PURE__ */ React70.createElement(
       Tooltip,
       {
         title: selectedValues.slice(limitTags).map((o) => getOptionLabel(o)).join(", "),
         placement: "top"
       },
       /* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more")
-    ),
+    ))),
     /* @__PURE__ */ React70.createElement(
       "input",
       {
@@ -2438,28 +2453,27 @@ function AutocompleteInner(props, _ref) {
     const focused = focusedIdx === flatIdx;
     const optDisabled = getOptionDisabled?.(option) ?? false;
     const label2 = getOptionLabel(option);
-    return /* @__PURE__ */ React70.createElement(
-      "li",
-      {
-        key: label2 + flatIdx,
-        "data-idx": flatIdx,
-        role: "option",
-        "aria-selected": selected,
-        "aria-disabled": optDisabled,
-        className: [
-          "rf-autocomplete__option",
-          selected ? "rf-autocomplete__option--selected" : "",
-          focused ? "rf-autocomplete__option--focused" : "",
-          optDisabled ? "rf-autocomplete__option--disabled" : ""
-        ].filter(Boolean).join(" "),
-        onMouseEnter: () => setFocusedIdx(flatIdx),
-        onMouseLeave: () => setFocusedIdx(-1),
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: (e) => selectOption(option, e)
-      },
-      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ React70.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
-      !renderOption && /* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React70.createElement(CheckIcon, null))
-    );
+    const liProps = {
+      key: label2 + flatIdx,
+      "data-idx": flatIdx,
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": optDisabled,
+      className: [
+        "rf-autocomplete__option",
+        selected ? "rf-autocomplete__option--selected" : "",
+        focused ? "rf-autocomplete__option--focused" : "",
+        optDisabled ? "rf-autocomplete__option--disabled" : ""
+      ].filter(Boolean).join(" "),
+      onMouseEnter: () => setFocusedIdx(flatIdx),
+      onMouseLeave: () => setFocusedIdx(-1),
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: (e) => selectOption(option, e)
+    };
+    if (renderOption) {
+      return renderOption(liProps, option, { selected, index: flatIdx });
+    }
+    return /* @__PURE__ */ React70.createElement("li", { ...liProps }, /* @__PURE__ */ React70.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2), /* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React70.createElement(CheckIcon, null)));
   }
 }
 var Autocomplete = React70.forwardRef(AutocompleteInner);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.101",
+  "version": "0.2.103",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",