@rufous/ui 0.3.0 → 0.3.1

package/dist/main.cjs

@@ -2252,10 +2252,12 @@ function AutocompleteInner(props, _ref) {
     className = "",
     style,
     sx,
+    open: openProp,
     onOpen,
     onClose
   } = props;
-  const [open, setOpen] = (0, import_react19.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react19.useState)(false);
+  const open = openProp !== void 0 ? openProp : internalOpen;
   const [inputStr, setInputStr] = (0, import_react19.useState)("");
   const [filterQuery, setFilterQuery] = (0, import_react19.useState)("");
   const [focusedIdx, setFocusedIdx] = (0, import_react19.useState)(-1);
@@ -2341,20 +2343,20 @@ function AutocompleteInner(props, _ref) {
   const openPopup = (0, import_react19.useCallback)(() => {
     if (disabled) return;
     calcPopupStyle();
-    setOpen(true);
+    if (openProp === void 0) setInternalOpen(true);
     setFocusedIdx(-1);
     setFilterQuery("");
     onOpen?.();
-  }, [disabled, calcPopupStyle, onOpen]);
+  }, [disabled, calcPopupStyle, onOpen, openProp]);
   const closePopup = (0, import_react19.useCallback)((justSelected = false) => {
-    setOpen(false);
+    if (openProp === void 0) setInternalOpen(false);
     setFocusedIdx(-1);
     onClose?.();
     if (!justSelected && !freeSolo && !multiple && value == null) {
       setInputStr("");
       onInputChange?.(null, "");
     }
-  }, [freeSolo, multiple, value, onInputChange, onClose]);
+  }, [openProp, freeSolo, multiple, value, onInputChange, onClose]);
   (0, import_react19.useEffect)(() => {
     if (!open) return;
     const handleOutside = (e) => {
@@ -5133,6 +5135,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
     disabled = false,
     required = false,
     multiple = false,
+    groupBy,
     className = "",
     style,
     sx
@@ -5312,32 +5315,51 @@ 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", { 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(
-          "li",
-          {
-            key: opt.value,
-            "data-idx": idx,
-            role: "option",
-            "aria-selected": selected,
-            "aria-disabled": opt.disabled,
-            className: [
-              "rf-select__option",
-              selected ? "rf-select__option--selected" : "",
-              focused ? "rf-select__option--focused" : "",
-              opt.disabled ? "rf-select__option--disabled" : ""
-            ].filter(Boolean).join(" "),
-            onMouseEnter: () => setFocusedIdx(idx),
-            onMouseLeave: () => setFocusedIdx(-1),
-            onMouseDown: (e) => e.preventDefault(),
-            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))
-        );
-      }))),
+      /* @__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 }, (() => {
+        const renderOpt = (opt, selectableIdx) => {
+          const selected = isSelected(opt.value);
+          const focused = focusedIdx === selectableIdx;
+          return /* @__PURE__ */ import_react24.default.createElement(
+            "li",
+            {
+              key: opt.value,
+              "data-idx": selectableIdx,
+              role: "option",
+              "aria-selected": selected,
+              "aria-disabled": opt.disabled,
+              className: [
+                "rf-select__option",
+                selected ? "rf-select__option--selected" : "",
+                focused ? "rf-select__option--focused" : "",
+                opt.disabled ? "rf-select__option--disabled" : ""
+              ].filter(Boolean).join(" "),
+              onMouseEnter: () => setFocusedIdx(selectableIdx),
+              onMouseLeave: () => setFocusedIdx(-1),
+              onMouseDown: (e) => e.preventDefault(),
+              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))
+          );
+        };
+        let sCounter = 0;
+        const selectableIdxMap = /* @__PURE__ */ new Map();
+        options.forEach((o) => {
+          if (!o.disabled) selectableIdxMap.set(o, sCounter++);
+        });
+        const resolveGroup = groupBy ? groupBy : (o) => o.group ?? "";
+        const hasGroups = groupBy != null || options.some((o) => o.group != null);
+        if (!hasGroups) {
+          return options.map((opt) => renderOpt(opt, selectableIdxMap.get(opt) ?? -1));
+        }
+        const groupMap = /* @__PURE__ */ new Map();
+        options.forEach((opt) => {
+          const g = resolveGroup(opt);
+          if (!groupMap.has(g)) groupMap.set(g, []);
+          groupMap.get(g).push(opt);
+        });
+        return Array.from(groupMap.entries()).map(([groupName, groupOpts]) => /* @__PURE__ */ import_react24.default.createElement("li", { key: groupName, role: "presentation" }, /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__group-header" }, groupName), /* @__PURE__ */ import_react24.default.createElement("ul", { className: "rf-select__group-items", role: "group" }, groupOpts.map((opt) => renderOpt(opt, selectableIdxMap.get(opt) ?? -1)))));
+      })())),
       document.body
     )
   );

package/dist/main.css

@@ -2727,6 +2727,23 @@ pre {
 .rf-select__option--selected .rf-select__option-check {
   opacity: 1;
 }
+.rf-select__group-header {
+  padding: 6px 16px 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--primary-color, #a41b06);
+  background: #fff5f5;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.rf-select__group-items {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+}
 
 /* lib/styles/slider.css */
 .rf-slider {

package/dist/main.d.cts

@@ -762,6 +762,15 @@ interface AutocompleteProps<T = string> {
     style?: CSSProperties;
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /**
+     * Controlled open state. When provided the dropdown respects this value.
+     * Pair with `onOpen` and `onClose` to sync your own state:
+     * ```
+     * const [open, setOpen] = useState(false);
+     * <Autocomplete open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} />
+     * ```
+     */
+    open?: boolean;
     /** Called when the popup opens */
     onOpen?: () => void;
     /** Called when the popup closes */
@@ -919,6 +928,7 @@ type SelectOption = {
     value: string | number;
     label: string;
     disabled?: boolean;
+    group?: string;
 };
 interface SelectProps {
     options: SelectOption[] | string[];
@@ -934,6 +944,8 @@ interface SelectProps {
     disabled?: boolean;
     required?: boolean;
     multiple?: boolean;
+    /** Group options by returning a category string */
+    groupBy?: (option: SelectOption) => string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;

package/dist/main.d.ts

@@ -762,6 +762,15 @@ interface AutocompleteProps<T = string> {
     style?: CSSProperties;
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /**
+     * Controlled open state. When provided the dropdown respects this value.
+     * Pair with `onOpen` and `onClose` to sync your own state:
+     * ```
+     * const [open, setOpen] = useState(false);
+     * <Autocomplete open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} />
+     * ```
+     */
+    open?: boolean;
     /** Called when the popup opens */
     onOpen?: () => void;
     /** Called when the popup closes */
@@ -919,6 +928,7 @@ type SelectOption = {
     value: string | number;
     label: string;
     disabled?: boolean;
+    group?: string;
 };
 interface SelectProps {
     options: SelectOption[] | string[];
@@ -934,6 +944,8 @@ interface SelectProps {
     disabled?: boolean;
     required?: boolean;
     multiple?: boolean;
+    /** Group options by returning a category string */
+    groupBy?: (option: SelectOption) => string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;

package/dist/main.js

@@ -2098,10 +2098,12 @@ function AutocompleteInner(props, _ref) {
     className = "",
     style,
     sx,
+    open: openProp,
     onOpen,
     onClose
   } = props;
-  const [open, setOpen] = useState5(false);
+  const [internalOpen, setInternalOpen] = useState5(false);
+  const open = openProp !== void 0 ? openProp : internalOpen;
   const [inputStr, setInputStr] = useState5("");
   const [filterQuery, setFilterQuery] = useState5("");
   const [focusedIdx, setFocusedIdx] = useState5(-1);
@@ -2187,20 +2189,20 @@ function AutocompleteInner(props, _ref) {
   const openPopup = useCallback2(() => {
     if (disabled) return;
     calcPopupStyle();
-    setOpen(true);
+    if (openProp === void 0) setInternalOpen(true);
     setFocusedIdx(-1);
     setFilterQuery("");
     onOpen?.();
-  }, [disabled, calcPopupStyle, onOpen]);
+  }, [disabled, calcPopupStyle, onOpen, openProp]);
   const closePopup = useCallback2((justSelected = false) => {
-    setOpen(false);
+    if (openProp === void 0) setInternalOpen(false);
     setFocusedIdx(-1);
     onClose?.();
     if (!justSelected && !freeSolo && !multiple && value == null) {
       setInputStr("");
       onInputChange?.(null, "");
     }
-  }, [freeSolo, multiple, value, onInputChange, onClose]);
+  }, [openProp, freeSolo, multiple, value, onInputChange, onClose]);
   useEffect5(() => {
     if (!open) return;
     const handleOutside = (e) => {
@@ -5010,6 +5012,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
     disabled = false,
     required = false,
     multiple = false,
+    groupBy,
     className = "",
     style,
     sx
@@ -5189,32 +5192,51 @@ 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", { 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(
-          "li",
-          {
-            key: opt.value,
-            "data-idx": idx,
-            role: "option",
-            "aria-selected": selected,
-            "aria-disabled": opt.disabled,
-            className: [
-              "rf-select__option",
-              selected ? "rf-select__option--selected" : "",
-              focused ? "rf-select__option--focused" : "",
-              opt.disabled ? "rf-select__option--disabled" : ""
-            ].filter(Boolean).join(" "),
-            onMouseEnter: () => setFocusedIdx(idx),
-            onMouseLeave: () => setFocusedIdx(-1),
-            onMouseDown: (e) => e.preventDefault(),
-            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))
-        );
-      }))),
+      /* @__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 }, (() => {
+        const renderOpt = (opt, selectableIdx) => {
+          const selected = isSelected(opt.value);
+          const focused = focusedIdx === selectableIdx;
+          return /* @__PURE__ */ React76.createElement(
+            "li",
+            {
+              key: opt.value,
+              "data-idx": selectableIdx,
+              role: "option",
+              "aria-selected": selected,
+              "aria-disabled": opt.disabled,
+              className: [
+                "rf-select__option",
+                selected ? "rf-select__option--selected" : "",
+                focused ? "rf-select__option--focused" : "",
+                opt.disabled ? "rf-select__option--disabled" : ""
+              ].filter(Boolean).join(" "),
+              onMouseEnter: () => setFocusedIdx(selectableIdx),
+              onMouseLeave: () => setFocusedIdx(-1),
+              onMouseDown: (e) => e.preventDefault(),
+              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))
+          );
+        };
+        let sCounter = 0;
+        const selectableIdxMap = /* @__PURE__ */ new Map();
+        options.forEach((o) => {
+          if (!o.disabled) selectableIdxMap.set(o, sCounter++);
+        });
+        const resolveGroup = groupBy ? groupBy : (o) => o.group ?? "";
+        const hasGroups = groupBy != null || options.some((o) => o.group != null);
+        if (!hasGroups) {
+          return options.map((opt) => renderOpt(opt, selectableIdxMap.get(opt) ?? -1));
+        }
+        const groupMap = /* @__PURE__ */ new Map();
+        options.forEach((opt) => {
+          const g = resolveGroup(opt);
+          if (!groupMap.has(g)) groupMap.set(g, []);
+          groupMap.get(g).push(opt);
+        });
+        return Array.from(groupMap.entries()).map(([groupName, groupOpts]) => /* @__PURE__ */ React76.createElement("li", { key: groupName, role: "presentation" }, /* @__PURE__ */ React76.createElement("div", { className: "rf-select__group-header" }, groupName), /* @__PURE__ */ React76.createElement("ul", { className: "rf-select__group-items", role: "group" }, groupOpts.map((opt) => renderOpt(opt, selectableIdxMap.get(opt) ?? -1)))));
+      })())),
       document.body
     )
   );

package/package.json

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