@rufous/ui 0.2.86 → 0.2.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/main.cjs +8 -7
  2. package/dist/main.d.cts +1 -1
  3. package/dist/main.d.ts +1 -1
  4. package/dist/main.js +8 -7
  5. package/package.json +1 -1
package/dist/main.cjs CHANGED
@@ -4919,6 +4919,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
4919
4919
  const [focusedIdx, setFocusedIdx] = (0, import_react24.useState)(-1);
4920
4920
  const [popupStyle, setPopupStyle] = (0, import_react24.useState)({});
4921
4921
  const containerRef = (0, import_react24.useRef)(null);
4922
+ const popupRef = (0, import_react24.useRef)(null);
4922
4923
  const listRef = (0, import_react24.useRef)(null);
4923
4924
  const inputId = (0, import_react24.useRef)(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
4924
4925
  const sxClass = useSx(sx);
@@ -4957,7 +4958,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
4957
4958
  (0, import_react24.useEffect)(() => {
4958
4959
  if (!open) return;
4959
4960
  const handleOutside = (e) => {
4960
- if (containerRef.current && !containerRef.current.contains(e.target)) {
4961
+ if (containerRef.current && !containerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
4961
4962
  closePopup();
4962
4963
  }
4963
4964
  };
@@ -4970,14 +4971,14 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
4970
4971
  window.removeEventListener("resize", calcPopupStyle);
4971
4972
  };
4972
4973
  }, [open, closePopup, calcPopupStyle]);
4973
- const selectOption = (0, import_react24.useCallback)((opt) => {
4974
+ const selectOption = (0, import_react24.useCallback)((opt, event) => {
4974
4975
  if (opt.disabled) return;
4975
4976
  if (multiple) {
4976
4977
  const already = isSelected(opt.value);
4977
4978
  const next = already ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
4978
- onChange?.(next);
4979
+ onChange?.(event, next);
4979
4980
  } else {
4980
- onChange?.(opt.value);
4981
+ onChange?.(event, opt.value);
4981
4982
  closePopup();
4982
4983
  }
4983
4984
  }, [multiple, isSelected, selectedValues, onChange, closePopup]);
@@ -5013,7 +5014,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
5013
5014
  }
5014
5015
  if (focusedIdx >= 0) {
5015
5016
  const opt = selectableOpts[focusedIdx];
5016
- if (opt) selectOption(opt);
5017
+ if (opt) selectOption(opt, e);
5017
5018
  }
5018
5019
  } else if (e.key === "Escape") {
5019
5020
  closePopup();
@@ -5089,7 +5090,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
5089
5090
  ),
5090
5091
  helperText && /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
5091
5092
  open && !disabled && import_react_dom5.default.createPortal(
5092
- /* @__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) => {
5093
+ /* @__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) => {
5093
5094
  const selected = isSelected(opt.value);
5094
5095
  const focused = focusedIdx === idx;
5095
5096
  return /* @__PURE__ */ import_react24.default.createElement(
@@ -5109,7 +5110,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
5109
5110
  onMouseEnter: () => setFocusedIdx(idx),
5110
5111
  onMouseLeave: () => setFocusedIdx(-1),
5111
5112
  onMouseDown: (e) => e.preventDefault(),
5112
- onClick: () => selectOption(opt)
5113
+ onClick: (e) => selectOption(opt, e)
5113
5114
  },
5114
5115
  /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
5115
5116
  /* @__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 CHANGED
@@ -838,7 +838,7 @@ type SelectOption = {
838
838
  interface SelectProps {
839
839
  options: SelectOption[] | string[];
840
840
  value?: string | number | null;
841
- onChange?: (value: string | number | null) => void;
841
+ onChange?: (event: React__default.SyntheticEvent, value: string | number | (string | number)[] | null) => void;
842
842
  label?: string;
843
843
  placeholder?: string;
844
844
  variant?: "outlined" | "filled" | "standard";
package/dist/main.d.ts CHANGED
@@ -838,7 +838,7 @@ type SelectOption = {
838
838
  interface SelectProps {
839
839
  options: SelectOption[] | string[];
840
840
  value?: string | number | null;
841
- onChange?: (value: string | number | null) => void;
841
+ onChange?: (event: React__default.SyntheticEvent, value: string | number | (string | number)[] | null) => void;
842
842
  label?: string;
843
843
  placeholder?: string;
844
844
  variant?: "outlined" | "filled" | "standard";
package/dist/main.js CHANGED
@@ -4794,6 +4794,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
4794
4794
  const [focusedIdx, setFocusedIdx] = useState10(-1);
4795
4795
  const [popupStyle, setPopupStyle] = useState10({});
4796
4796
  const containerRef = useRef10(null);
4797
+ const popupRef = useRef10(null);
4797
4798
  const listRef = useRef10(null);
4798
4799
  const inputId = useRef10(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
4799
4800
  const sxClass = useSx(sx);
@@ -4832,7 +4833,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
4832
4833
  useEffect10(() => {
4833
4834
  if (!open) return;
4834
4835
  const handleOutside = (e) => {
4835
- if (containerRef.current && !containerRef.current.contains(e.target)) {
4836
+ if (containerRef.current && !containerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
4836
4837
  closePopup();
4837
4838
  }
4838
4839
  };
@@ -4845,14 +4846,14 @@ var Select = React76.forwardRef(function Select2(props, ref) {
4845
4846
  window.removeEventListener("resize", calcPopupStyle);
4846
4847
  };
4847
4848
  }, [open, closePopup, calcPopupStyle]);
4848
- const selectOption = useCallback4((opt) => {
4849
+ const selectOption = useCallback4((opt, event) => {
4849
4850
  if (opt.disabled) return;
4850
4851
  if (multiple) {
4851
4852
  const already = isSelected(opt.value);
4852
4853
  const next = already ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
4853
- onChange?.(next);
4854
+ onChange?.(event, next);
4854
4855
  } else {
4855
- onChange?.(opt.value);
4856
+ onChange?.(event, opt.value);
4856
4857
  closePopup();
4857
4858
  }
4858
4859
  }, [multiple, isSelected, selectedValues, onChange, closePopup]);
@@ -4888,7 +4889,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
4888
4889
  }
4889
4890
  if (focusedIdx >= 0) {
4890
4891
  const opt = selectableOpts[focusedIdx];
4891
- if (opt) selectOption(opt);
4892
+ if (opt) selectOption(opt, e);
4892
4893
  }
4893
4894
  } else if (e.key === "Escape") {
4894
4895
  closePopup();
@@ -4964,7 +4965,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
4964
4965
  ),
4965
4966
  helperText && /* @__PURE__ */ React76.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
4966
4967
  open && !disabled && ReactDOM4.createPortal(
4967
- /* @__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) => {
4968
+ /* @__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) => {
4968
4969
  const selected = isSelected(opt.value);
4969
4970
  const focused = focusedIdx === idx;
4970
4971
  return /* @__PURE__ */ React76.createElement(
@@ -4984,7 +4985,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
4984
4985
  onMouseEnter: () => setFocusedIdx(idx),
4985
4986
  onMouseLeave: () => setFocusedIdx(-1),
4986
4987
  onMouseDown: (e) => e.preventDefault(),
4987
- onClick: () => selectOption(opt)
4988
+ onClick: (e) => selectOption(opt, e)
4988
4989
  },
4989
4990
  /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
4990
4991
  /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.2.86",
4
+ "version": "0.2.87",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/main.css",