@rufous/ui 0.2.85 → 0.2.87

package/dist/main.cjs

@@ -2079,17 +2079,17 @@ function AutocompleteInner(props, _ref) {
       setInputStr(v != null ? getOptionLabel(v) : "");
     }
   }, [value, multiple, getOptionLabel, controlledInput]);
-  const selectOption = (opt) => {
+  const selectOption = (opt, event) => {
     if (getOptionDisabled?.(opt)) return;
     if (multiple) {
       const already = isSelected(opt);
       const next = already ? selectedValues.filter((v) => !isEqual(v, opt)) : [...selectedValues, opt];
-      onChange?.(next);
+      onChange?.(event, next, already ? "removeOption" : "selectOption");
       setInputStr("");
       onInputChange?.("");
       inputRef.current?.focus();
     } else {
-      onChange?.(opt);
+      onChange?.(event, opt, "selectOption");
       setInputStr(getOptionLabel(opt));
       onInputChange?.(getOptionLabel(opt));
       closePopup(true);
@@ -2098,7 +2098,7 @@ function AutocompleteInner(props, _ref) {
   };
   const clearAll = (e) => {
     e.stopPropagation();
-    onChange?.(multiple ? [] : null);
+    onChange?.(e, multiple ? [] : null, "clear");
     setInputStr("");
     onInputChange?.("");
     inputRef.current?.focus();
@@ -2106,7 +2106,7 @@ function AutocompleteInner(props, _ref) {
   const removeTag = (opt, e) => {
     e.stopPropagation();
     const next = selectedValues.filter((v) => !isEqual(v, opt));
-    onChange?.(next);
+    onChange?.(e, next, "removeOption");
   };
   const handleInputChange = (e) => {
     const v = e.target.value;
@@ -2144,9 +2144,9 @@ function AutocompleteInner(props, _ref) {
         return;
       }
       if (focusedIdx >= 0 && focusedIdx < selectableOptions.length) {
-        selectOption(selectableOptions[focusedIdx].option);
+        selectOption(selectableOptions[focusedIdx].option, e);
       } else if (freeSolo && activeInput) {
-        onChange?.(activeInput);
+        onChange?.(e, activeInput, "freeSolo");
         if (!multiple) closePopup();
       }
     } else if (e.key === "Escape") {
@@ -2309,7 +2309,7 @@ function AutocompleteInner(props, _ref) {
         onMouseEnter: () => setFocusedIdx(flatIdx),
         onMouseLeave: () => setFocusedIdx(-1),
         onMouseDown: (e) => e.preventDefault(),
-        onClick: () => selectOption(option)
+        onClick: (e) => selectOption(option, e)
       },
       renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react18.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
       !renderOption && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react18.default.createElement(CheckIcon, null))
@@ -2537,7 +2537,7 @@ var AddressLookup = ({
     {
       options: countries.map((c) => c.name),
       value: value.country || null,
-      onChange: (v) => handleCountryChange(v || ""),
+      onChange: (_e, v) => handleCountryChange(v || ""),
       label: "Country",
       fullWidth: true,
       required,
@@ -2548,7 +2548,7 @@ var AddressLookup = ({
     {
       options: states.map((s2) => s2.name),
       value: value.state || null,
-      onChange: (v) => handleStateChange(v || ""),
+      onChange: (_e, v) => handleStateChange(v || ""),
       label: "State",
       fullWidth: true,
       required,
@@ -2559,7 +2559,7 @@ var AddressLookup = ({
     {
       options: cities.map((c) => c.name),
       value: value.city || null,
-      onChange: (v) => handleChange("city", v || ""),
+      onChange: (_e, v) => handleChange("city", v || ""),
       label: "City",
       fullWidth: true,
       required,
@@ -4919,6 +4919,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
   const [focusedIdx, setFocusedIdx] = (0, import_react24.useState)(-1);
   const [popupStyle, setPopupStyle] = (0, import_react24.useState)({});
   const containerRef = (0, import_react24.useRef)(null);
+  const popupRef = (0, import_react24.useRef)(null);
   const listRef = (0, import_react24.useRef)(null);
   const inputId = (0, import_react24.useRef)(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
@@ -4957,7 +4958,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
   (0, import_react24.useEffect)(() => {
     if (!open) return;
     const handleOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
         closePopup();
       }
     };
@@ -4970,14 +4971,14 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  const selectOption = (0, import_react24.useCallback)((opt) => {
+  const selectOption = (0, import_react24.useCallback)((opt, event) => {
     if (opt.disabled) return;
     if (multiple) {
       const already = isSelected(opt.value);
       const next = already ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
-      onChange?.(next);
+      onChange?.(event, next);
     } else {
-      onChange?.(opt.value);
+      onChange?.(event, opt.value);
       closePopup();
     }
   }, [multiple, isSelected, selectedValues, onChange, closePopup]);
@@ -5013,7 +5014,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
       }
       if (focusedIdx >= 0) {
         const opt = selectableOpts[focusedIdx];
-        if (opt) selectOption(opt);
+        if (opt) selectOption(opt, e);
       }
     } else if (e.key === "Escape") {
       closePopup();
@@ -5089,7 +5090,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
     ),
     helperText && /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
     open && !disabled && import_react_dom5.default.createPortal(
-      /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react24.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+      /* @__PURE__ */ import_react24.default.createElement("div", { ref: popupRef, className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react24.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
         const selected = isSelected(opt.value);
         const focused = focusedIdx === idx;
         return /* @__PURE__ */ import_react24.default.createElement(
@@ -5109,7 +5110,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
             onMouseEnter: () => setFocusedIdx(idx),
             onMouseLeave: () => setFocusedIdx(-1),
             onMouseDown: (e) => e.preventDefault(),
-            onClick: () => selectOption(opt)
+            onClick: (e) => selectOption(opt, e)
           },
           /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
           /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(CheckIcon2, null))

package/dist/main.d.cts

@@ -674,7 +674,7 @@ interface AutocompleteProps<T = string> {
     /** Controlled value — T for single, T[] for multiple, null to clear */
     value?: T | T[] | null;
     /** Called when the value changes */
-    onChange?: (value: T | T[] | null) => void;
+    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 */
@@ -838,7 +838,7 @@ type SelectOption = {
 interface SelectProps {
     options: SelectOption[] | string[];
     value?: string | number | null;
-    onChange?: (value: string | number | null) => void;
+    onChange?: (event: React__default.SyntheticEvent, value: string | number | (string | number)[] | null) => void;
     label?: string;
     placeholder?: string;
     variant?: "outlined" | "filled" | "standard";

package/dist/main.d.ts

@@ -674,7 +674,7 @@ interface AutocompleteProps<T = string> {
     /** Controlled value — T for single, T[] for multiple, null to clear */
     value?: T | T[] | null;
     /** Called when the value changes */
-    onChange?: (value: T | T[] | null) => void;
+    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 */
@@ -838,7 +838,7 @@ type SelectOption = {
 interface SelectProps {
     options: SelectOption[] | string[];
     value?: string | number | null;
-    onChange?: (value: string | number | null) => void;
+    onChange?: (event: React__default.SyntheticEvent, value: string | number | (string | number)[] | null) => void;
     label?: string;
     placeholder?: string;
     variant?: "outlined" | "filled" | "standard";

package/dist/main.js

@@ -1918,17 +1918,17 @@ function AutocompleteInner(props, _ref) {
       setInputStr(v != null ? getOptionLabel(v) : "");
     }
   }, [value, multiple, getOptionLabel, controlledInput]);
-  const selectOption = (opt) => {
+  const selectOption = (opt, event) => {
     if (getOptionDisabled?.(opt)) return;
     if (multiple) {
       const already = isSelected(opt);
       const next = already ? selectedValues.filter((v) => !isEqual(v, opt)) : [...selectedValues, opt];
-      onChange?.(next);
+      onChange?.(event, next, already ? "removeOption" : "selectOption");
       setInputStr("");
       onInputChange?.("");
       inputRef.current?.focus();
     } else {
-      onChange?.(opt);
+      onChange?.(event, opt, "selectOption");
       setInputStr(getOptionLabel(opt));
       onInputChange?.(getOptionLabel(opt));
       closePopup(true);
@@ -1937,7 +1937,7 @@ function AutocompleteInner(props, _ref) {
   };
   const clearAll = (e) => {
     e.stopPropagation();
-    onChange?.(multiple ? [] : null);
+    onChange?.(e, multiple ? [] : null, "clear");
     setInputStr("");
     onInputChange?.("");
     inputRef.current?.focus();
@@ -1945,7 +1945,7 @@ function AutocompleteInner(props, _ref) {
   const removeTag = (opt, e) => {
     e.stopPropagation();
     const next = selectedValues.filter((v) => !isEqual(v, opt));
-    onChange?.(next);
+    onChange?.(e, next, "removeOption");
   };
   const handleInputChange = (e) => {
     const v = e.target.value;
@@ -1983,9 +1983,9 @@ function AutocompleteInner(props, _ref) {
         return;
       }
       if (focusedIdx >= 0 && focusedIdx < selectableOptions.length) {
-        selectOption(selectableOptions[focusedIdx].option);
+        selectOption(selectableOptions[focusedIdx].option, e);
       } else if (freeSolo && activeInput) {
-        onChange?.(activeInput);
+        onChange?.(e, activeInput, "freeSolo");
         if (!multiple) closePopup();
       }
     } else if (e.key === "Escape") {
@@ -2148,7 +2148,7 @@ function AutocompleteInner(props, _ref) {
         onMouseEnter: () => setFocusedIdx(flatIdx),
         onMouseLeave: () => setFocusedIdx(-1),
         onMouseDown: (e) => e.preventDefault(),
-        onClick: () => selectOption(option)
+        onClick: (e) => selectOption(option, e)
       },
       renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ React69.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
       !renderOption && /* @__PURE__ */ React69.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React69.createElement(CheckIcon, null))
@@ -2376,7 +2376,7 @@ var AddressLookup = ({
     {
       options: countries.map((c) => c.name),
       value: value.country || null,
-      onChange: (v) => handleCountryChange(v || ""),
+      onChange: (_e, v) => handleCountryChange(v || ""),
       label: "Country",
       fullWidth: true,
       required,
@@ -2387,7 +2387,7 @@ var AddressLookup = ({
     {
       options: states.map((s2) => s2.name),
       value: value.state || null,
-      onChange: (v) => handleStateChange(v || ""),
+      onChange: (_e, v) => handleStateChange(v || ""),
       label: "State",
       fullWidth: true,
       required,
@@ -2398,7 +2398,7 @@ var AddressLookup = ({
     {
       options: cities.map((c) => c.name),
       value: value.city || null,
-      onChange: (v) => handleChange("city", v || ""),
+      onChange: (_e, v) => handleChange("city", v || ""),
       label: "City",
       fullWidth: true,
       required,
@@ -4794,6 +4794,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
   const [focusedIdx, setFocusedIdx] = useState10(-1);
   const [popupStyle, setPopupStyle] = useState10({});
   const containerRef = useRef10(null);
+  const popupRef = useRef10(null);
   const listRef = useRef10(null);
   const inputId = useRef10(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
@@ -4832,7 +4833,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
   useEffect10(() => {
     if (!open) return;
     const handleOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
         closePopup();
       }
     };
@@ -4845,14 +4846,14 @@ var Select = React76.forwardRef(function Select2(props, ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  const selectOption = useCallback4((opt) => {
+  const selectOption = useCallback4((opt, event) => {
     if (opt.disabled) return;
     if (multiple) {
       const already = isSelected(opt.value);
       const next = already ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
-      onChange?.(next);
+      onChange?.(event, next);
     } else {
-      onChange?.(opt.value);
+      onChange?.(event, opt.value);
       closePopup();
     }
   }, [multiple, isSelected, selectedValues, onChange, closePopup]);
@@ -4888,7 +4889,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
       }
       if (focusedIdx >= 0) {
         const opt = selectableOpts[focusedIdx];
-        if (opt) selectOption(opt);
+        if (opt) selectOption(opt, e);
       }
     } else if (e.key === "Escape") {
       closePopup();
@@ -4964,7 +4965,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
     ),
     helperText && /* @__PURE__ */ React76.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
     open && !disabled && ReactDOM4.createPortal(
-      /* @__PURE__ */ React76.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React76.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+      /* @__PURE__ */ React76.createElement("div", { ref: popupRef, className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React76.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
         const selected = isSelected(opt.value);
         const focused = focusedIdx === idx;
         return /* @__PURE__ */ React76.createElement(
@@ -4984,7 +4985,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
             onMouseEnter: () => setFocusedIdx(idx),
             onMouseLeave: () => setFocusedIdx(-1),
             onMouseDown: (e) => e.preventDefault(),
-            onClick: () => selectOption(opt)
+            onClick: (e) => selectOption(opt, e)
           },
           /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
           /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))

package/package.json

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