@rufous/ui 0.3.20 → 0.3.22

package/dist/main.cjs

@@ -4773,6 +4773,7 @@ function DataGrid({
   const menuRef = (0, import_react23.useRef)(null);
   const [showManageColumns, setShowManageColumns] = (0, import_react23.useState)(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react23.useState)(false);
+  const [focusFilterIdx, setFocusFilterIdx] = (0, import_react23.useState)(-1);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
   const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
   const [advancedFilters, setAdvancedFilters] = (0, import_react23.useState)([
@@ -4821,9 +4822,13 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  const onFiltersChangeRef = (0, import_react23.useRef)(onFiltersChange);
   (0, import_react23.useEffect)(() => {
-    onFiltersChange?.(advancedFilters);
-  }, [advancedFilters, onFiltersChange]);
+    onFiltersChangeRef.current = onFiltersChange;
+  });
+  (0, import_react23.useEffect)(() => {
+    onFiltersChangeRef.current?.(advancedFilters);
+  }, [advancedFilters]);
   const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
       setSortField(fieldKey);
@@ -5092,6 +5097,7 @@ function DataGrid({
       if (!firstCol) return prev;
       return [{ column: String(firstCol.field), operator: getDefaultOperator(firstCol.type), value: "", logic: "AND" }];
     });
+    setFocusFilterIdx(-1);
     setShowAdvancedFilter(false);
   };
   const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
@@ -5143,7 +5149,18 @@ function DataGrid({
         },
         col.headerName,
         col.sortable !== false && /* @__PURE__ */ import_react23.default.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronsUpDown, { size: 14 }))
-      ), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
+      ), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement(
+        "button",
+        {
+          className: "dg-th-filter-btn",
+          onClick: () => {
+            const idx2 = advancedFilters.findIndex((f) => f.column === colField);
+            setFocusFilterIdx(idx2);
+            setShowAdvancedFilter(true);
+          }
+        },
+        /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11 })
+      ), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -5372,7 +5389,7 @@ function DataGrid({
         className: "dg-filter-input",
         placeholder: "Value\u2026",
         value: f.value,
-        autoFocus: idx === advancedFilters.length - 1,
+        autoFocus: focusFilterIdx >= 0 ? idx === focusFilterIdx : idx === advancedFilters.length - 1,
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
       }
     ));
@@ -9071,6 +9088,14 @@ function getTopLevelSelected(nodes, selected) {
   }
   return result;
 }
+function getAllSelected(nodes, selected) {
+  const result = [];
+  for (const node of nodes) {
+    if (selected.has(String(node.id))) result.push(node);
+    if (node.children?.length) result.push(...getAllSelected(node.children, selected));
+  }
+  return result;
+}
 function filterTree(nodes, query) {
   if (!query) return nodes;
   const q = query.toLowerCase();
@@ -9099,6 +9124,7 @@ function TreeNodeItem({
   selected,
   expanded,
   selectionMode,
+  allowChildSelection,
   onToggleExpand,
   onSelect,
   isFiltering
@@ -9106,7 +9132,7 @@ function TreeNodeItem({
   const nodeId = String(node.id);
   const hasChildren = !!node.children?.length;
   const isExpanded = isFiltering || expanded.has(nodeId);
-  const state = getNodeState(node, selected);
+  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nodeId) ? "checked" : "unchecked";
   return /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
@@ -9126,16 +9152,8 @@ function TreeNodeItem({
       },
       isExpanded ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 14 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronRight, { size: 14 })
     ) : /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__expand-ph" }),
-    selectionMode === "multiple" && /* @__PURE__ */ import_react49.default.createElement(
-      "span",
-      {
-        className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
-      },
-      state === "checked" && /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 10, strokeWidth: 3 }),
-      state === "partial" && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__cb-dash" })
-    ),
-    selectionMode === "single" && /* @__PURE__ */ import_react49.default.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
-    /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label)
+    /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label),
+    /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__check", "aria-hidden": "true" }, state === "partial" ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Minus, { size: 13, strokeWidth: 2.5 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 13, strokeWidth: 2.5 }))
   ), hasChildren && isExpanded && /* @__PURE__ */ import_react49.default.createElement("div", null, node.children.map((child) => /* @__PURE__ */ import_react49.default.createElement(
     TreeNodeItem,
     {
@@ -9145,6 +9163,7 @@ function TreeNodeItem({
       selected,
       expanded,
       selectionMode,
+      allowChildSelection,
       onToggleExpand,
       onSelect,
       isFiltering
@@ -9158,6 +9177,7 @@ function TreeSelect({
   onNodeSelect,
   onNodeUnselect,
   selectionMode = "single",
+  allowChildSelection = false,
   placeholder = "Select",
   filter = false,
   filterInputAutoFocus = false,
@@ -9278,15 +9298,25 @@ function TreeSelect({
   const handleSelect = (node) => {
     const nodeId = String(node.id);
     if (isMultiple) {
-      const state = getNodeState(node, selectedSet);
-      const descendants = collectDescendants(node);
       const newSet = new Set(selectedSet);
-      if (state === "checked" || state === "partial") {
-        descendants.forEach((id) => newSet.delete(id));
-        onNodeUnselect?.({ node });
+      if (allowChildSelection) {
+        const state = getNodeState(node, selectedSet);
+        const descendants = collectDescendants(node);
+        if (state === "checked" || state === "partial") {
+          descendants.forEach((id) => newSet.delete(id));
+          onNodeUnselect?.({ node });
+        } else {
+          descendants.forEach((id) => newSet.add(id));
+          onNodeSelect?.({ node });
+        }
       } else {
-        descendants.forEach((id) => newSet.add(id));
-        onNodeSelect?.({ node });
+        if (newSet.has(nodeId)) {
+          newSet.delete(nodeId);
+          onNodeUnselect?.({ node });
+        } else {
+          newSet.add(nodeId);
+          onNodeSelect?.({ node });
+        }
       }
       onChange?.({ value: setToRecord(newSet) });
     } else {
@@ -9319,7 +9349,7 @@ function TreeSelect({
     onNodeUnselect?.({ node });
   };
   const filteredTree = filterTree(options, filterQuery);
-  const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
+  const tagNodes = isMultiple ? allowChildSelection ? getTopLevelSelected(options, selectedSet) : getAllSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
   const hasValue = tagNodes.length > 0;
   const isFloating = open || hasValue || focused;
   const rootClasses = [
@@ -9417,6 +9447,7 @@ function TreeSelect({
           selected: selectedSet,
           expanded: expandedKeys,
           selectionMode,
+          allowChildSelection,
           onToggleExpand: handleToggleExpand,
           onSelect: handleSelect,
           isFiltering: !!filterQuery
@@ -9550,7 +9581,9 @@ function SmartSelect({
   value,
   onChange,
   onSearchChange,
+  searchResults = [],
   debounceMs = 300,
+  searchThreshold = 10,
   getOptionLabel,
   getOptionValue,
   getOptionSubLabel,
@@ -9588,14 +9621,20 @@ function SmartSelect({
     return flattenTree(options, getOptionChildren);
   }, [options, getOptionChildren]);
   const flatOptionsList = (0, import_react51.useMemo)(() => flatItems.map((f) => f.option), [flatItems]);
+  const displayOptions = (0, import_react51.useMemo)(() => {
+    if (!searchResults.length) return flatOptionsList;
+    const localKeys = new Set(flatOptionsList.map((o) => getValue(o)));
+    const serverOnly = searchResults.filter((o) => !localKeys.has(getValue(o)));
+    return [...flatOptionsList, ...serverOnly];
+  }, [flatOptionsList, searchResults, getValue]);
   const depthMap = (0, import_react51.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
     return map;
   }, [flatItems, getValue]);
   const lookup = (0, import_react51.useMemo)(
-    () => buildLookup(options, getOptionChildren, getValue),
-    [options, getOptionChildren, getValue]
+    () => buildLookup(displayOptions, getOptionChildren, getValue),
+    [displayOptions, getOptionChildren, getValue]
   );
   const selectedKeys = (0, import_react51.useMemo)(() => {
     if (multiple) {
@@ -9607,21 +9646,27 @@ function SmartSelect({
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
     if (!inputValue) {
-      onSearchChange("");
+      onSearchChange("", 0);
       return;
     }
-    const hasLocalMatch = flatOptionsList.some(
-      (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
-    );
-    if (hasLocalMatch) return;
+    const q = inputValue.toLowerCase();
+    let localCount = 0;
+    for (const opt of flatOptionsList) {
+      if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
+        localCount++;
+        if (localCount >= searchThreshold) break;
+      }
+    }
+    if (localCount >= searchThreshold) return;
+    const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue);
+      onSearchChange(inputValue, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue);
+        onSearchChange(inputValue, needed);
       }, debounceMs);
     }
-  }, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = (0, import_react51.useCallback)((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -9673,34 +9718,28 @@ function SmartSelect({
       {
         key,
         ...rest,
-        className: muiClass,
+        className: [
+          muiClass,
+          "rf-select__option",
+          isSelected ? "rf-select__option--selected" : ""
+        ].filter(Boolean).join(" "),
         style: {
           ...muiStyle,
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          padding: "8px 16px",
           paddingLeft: 16 + depth * 20,
-          fontSize: "0.9rem",
-          color: "rgba(0,0,0,0.87)",
-          cursor: "pointer",
-          userSelect: "none",
-          minHeight: 40,
-          boxSizing: "border-box",
-          fontWeight: isSelected ? 500 : void 0,
-          backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
-          listStyle: "none"
+          listStyle: "none",
+          alignItems: subLabel ? "flex-start" : void 0
         }
       },
-      /* @__PURE__ */ import_react51.default.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
-      /* @__PURE__ */ import_react51.default.createElement("span", { style: {
-        color: "var(--primary-color, #a41b06)",
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        opacity: isSelected ? 1 : 0,
-        transition: "opacity 0.1s"
-      } }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
+      /* @__PURE__ */ import_react51.default.createElement(
+        "span",
+        {
+          className: "rf-select__option-label",
+          style: subLabel ? { display: "flex", flexDirection: "column", whiteSpace: "normal" } : void 0
+        },
+        /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)),
+        subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)
+      ),
+      /* @__PURE__ */ import_react51.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
   const computedFilterOptions = (0, import_react51.useCallback)((opts, inputValue) => {
@@ -9708,10 +9747,12 @@ function SmartSelect({
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      const filteredRest = inputValue ? unselected.filter(
-        (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
-      ) : unselected;
-      return [...selected, ...filteredRest];
+      if (!inputValue) return [...selected, ...unselected];
+      const q2 = inputValue.toLowerCase();
+      const filteredUnselected = unselected.filter(
+        (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
+      ).slice(0, searchThreshold);
+      return [...selected, ...filteredUnselected];
     }
     if (value != null) {
       const selectedLabel = getOptionLabel(value);
@@ -9727,12 +9768,12 @@ function SmartSelect({
     const q = inputValue.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
-    );
-  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
+    ).slice(0, searchThreshold);
+  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold]);
   return /* @__PURE__ */ import_react51.default.createElement(
     Autocomplete,
     {
-      options: flatOptionsList,
+      options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
       onInputChange: handleInputChange,

package/dist/main.css

@@ -1370,6 +1370,12 @@ pre {
 .rf-tsn__row:hover {
   background: rgba(241, 91, 36, 0.06);
 }
+.rf-tsn__row--active {
+  background: rgba(164, 27, 6, 0.08);
+}
+.rf-tsn__row--active:hover {
+  background: rgba(164, 27, 6, 0.12);
+}
 .rf-tsn__row--active .rf-tsn__label {
   color: rgba(0, 0, 0, 0.87);
   font-weight: 500;
@@ -1397,56 +1403,17 @@ pre {
   flex-shrink: 0;
   display: inline-block;
 }
-.rf-tsn__cb {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 4px;
+.rf-tsn__check {
+  color: var(--primary-color, #a41b06);
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: border-color 0.15s, background 0.15s;
-  background: var(--surface-color);
-  color: transparent;
-}
-.rf-tsn__cb--checked {
-  background: var(--primary-color);
-  border-color: var(--primary-color);
-  color: #fff;
-}
-.rf-tsn__cb--partial {
-  border-color: var(--primary-color);
-}
-.rf-tsn__cb-dash {
-  display: block;
-  width: 8px;
-  height: 2px;
-  background: var(--primary-color);
-  border-radius: 1px;
-}
-.rf-tsn__radio {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 50%;
-  flex-shrink: 0;
-  transition: border-color 0.15s;
-  position: relative;
-}
-.rf-tsn__radio--checked {
-  border-color: var(--primary-color);
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.1s;
 }
-.rf-tsn__radio--checked::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
-  background: var(--primary-color);
-  border-radius: 50%;
+.rf-tsn__row--active .rf-tsn__check {
+  opacity: 1;
 }
 .rf-tsn__label {
   font-size: 0.875rem;

package/dist/main.d.cts

@@ -1830,7 +1830,13 @@ interface TreeSelectProps {
     filterInputAutoFocus?: boolean;
     /** Clear filter text when the dropdown closes */
     resetFilterOnHide?: boolean;
-    /** PrimeReact compat — accepted but not used (checkboxes handle multi-select) */
+    /**
+     * When **true**, selecting a parent selects all its descendants and vice-versa (cascade).
+     * When **false** (default), every node is selected/deselected independently — no cascade.
+     * Only relevant in `multiple` mode.
+     */
+    allowChildSelection?: boolean;
+    /** PrimeReact compat — accepted but not used */
     metaKeySelection?: boolean;
     /** Disable the whole control */
     disabled?: boolean;
@@ -1854,7 +1860,7 @@ interface TreeSelectProps {
     className?: string;
     sx?: SxProp;
 }
-declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
+declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, allowChildSelection, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
 
 interface UserOption {
     id?: string | number;
@@ -1909,15 +1915,28 @@ interface SmartSelectProps<T = any> {
     /** Called when selection changes */
     onChange?: (value: T | T[] | null) => void;
     /**
-     * Called when the typed text finds no local match —
-     * use this to trigger an API / server search.
+     * Called when local matches fall below `searchThreshold`.
+     * Receives the current query and how many more records are needed to fill the threshold.
+     * Use this to trigger an API / server search and update `searchResults`.
      */
-    onSearchChange?: (query: string) => void;
+    onSearchChange?: (query: string, needed: number) => void;
+    /**
+     * Results returned by the API for the current query.
+     * Merged with local matches (duplicates excluded) to fill up to `searchThreshold`.
+     * Reset this to [] when the query is cleared.
+     */
+    searchResults?: T[];
     /**
      * Debounce delay in ms before `onSearchChange` fires.
      * Defaults to 300 ms. Pass 0 to disable debouncing.
      */
     debounceMs?: number;
+    /**
+     * Max results to show when a query is active.
+     * If local matches are fewer than this, `onSearchChange` fires with how many more are needed.
+     * Defaults to 10. Pass 0 to always call the API.
+     */
+    searchThreshold?: number;
     /** Primary display label for an option (required) */
     getOptionLabel: (option: T) => string;
     /** Unique key for an option — defaults to the label string */
@@ -1971,7 +1990,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, debounceMs, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, searchResults, debounceMs, searchThreshold, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';

package/dist/main.d.ts

@@ -1830,7 +1830,13 @@ interface TreeSelectProps {
     filterInputAutoFocus?: boolean;
     /** Clear filter text when the dropdown closes */
     resetFilterOnHide?: boolean;
-    /** PrimeReact compat — accepted but not used (checkboxes handle multi-select) */
+    /**
+     * When **true**, selecting a parent selects all its descendants and vice-versa (cascade).
+     * When **false** (default), every node is selected/deselected independently — no cascade.
+     * Only relevant in `multiple` mode.
+     */
+    allowChildSelection?: boolean;
+    /** PrimeReact compat — accepted but not used */
     metaKeySelection?: boolean;
     /** Disable the whole control */
     disabled?: boolean;
@@ -1854,7 +1860,7 @@ interface TreeSelectProps {
     className?: string;
     sx?: SxProp;
 }
-declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
+declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, allowChildSelection, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
 
 interface UserOption {
     id?: string | number;
@@ -1909,15 +1915,28 @@ interface SmartSelectProps<T = any> {
     /** Called when selection changes */
     onChange?: (value: T | T[] | null) => void;
     /**
-     * Called when the typed text finds no local match —
-     * use this to trigger an API / server search.
+     * Called when local matches fall below `searchThreshold`.
+     * Receives the current query and how many more records are needed to fill the threshold.
+     * Use this to trigger an API / server search and update `searchResults`.
      */
-    onSearchChange?: (query: string) => void;
+    onSearchChange?: (query: string, needed: number) => void;
+    /**
+     * Results returned by the API for the current query.
+     * Merged with local matches (duplicates excluded) to fill up to `searchThreshold`.
+     * Reset this to [] when the query is cleared.
+     */
+    searchResults?: T[];
     /**
      * Debounce delay in ms before `onSearchChange` fires.
      * Defaults to 300 ms. Pass 0 to disable debouncing.
      */
     debounceMs?: number;
+    /**
+     * Max results to show when a query is active.
+     * If local matches are fewer than this, `onSearchChange` fires with how many more are needed.
+     * Defaults to 10. Pass 0 to always call the API.
+     */
+    searchThreshold?: number;
     /** Primary display label for an option (required) */
     getOptionLabel: (option: T) => string;
     /** Unique key for an option — defaults to the label string */
@@ -1971,7 +1990,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, debounceMs, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, searchResults, debounceMs, searchThreshold, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';

package/dist/main.js

@@ -4628,6 +4628,7 @@ function DataGrid({
   const menuRef = useRef10(null);
   const [showManageColumns, setShowManageColumns] = useState9(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = useState9(false);
+  const [focusFilterIdx, setFocusFilterIdx] = useState9(-1);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
   const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
   const [advancedFilters, setAdvancedFilters] = useState9([
@@ -4676,9 +4677,13 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  const onFiltersChangeRef = useRef10(onFiltersChange);
   useEffect9(() => {
-    onFiltersChange?.(advancedFilters);
-  }, [advancedFilters, onFiltersChange]);
+    onFiltersChangeRef.current = onFiltersChange;
+  });
+  useEffect9(() => {
+    onFiltersChangeRef.current?.(advancedFilters);
+  }, [advancedFilters]);
   const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
       setSortField(fieldKey);
@@ -4947,6 +4952,7 @@ function DataGrid({
       if (!firstCol) return prev;
       return [{ column: String(firstCol.field), operator: getDefaultOperator(firstCol.type), value: "", logic: "AND" }];
     });
+    setFocusFilterIdx(-1);
     setShowAdvancedFilter(false);
   };
   const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
@@ -4998,7 +5004,18 @@ function DataGrid({
         },
         col.headerName,
         col.sortable !== false && /* @__PURE__ */ React75.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ React75.createElement(ChevronsUpDown, { size: 14 }))
-      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ React75.createElement(Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
+      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement(
+        "button",
+        {
+          className: "dg-th-filter-btn",
+          onClick: () => {
+            const idx2 = advancedFilters.findIndex((f) => f.column === colField);
+            setFocusFilterIdx(idx2);
+            setShowAdvancedFilter(true);
+          }
+        },
+        /* @__PURE__ */ React75.createElement(Filter, { size: 11 })
+      ), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -5227,7 +5244,7 @@ function DataGrid({
         className: "dg-filter-input",
         placeholder: "Value\u2026",
         value: f.value,
-        autoFocus: idx === advancedFilters.length - 1,
+        autoFocus: focusFilterIdx >= 0 ? idx === focusFilterIdx : idx === advancedFilters.length - 1,
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
       }
     ));
@@ -8961,7 +8978,7 @@ import React106, {
   useCallback as useCallback10
 } from "react";
 import ReactDOM10 from "react-dom";
-import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, X as X3, Search as Search2, Check } from "lucide-react";
+import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, X as X3, Search as Search2, Check, Minus } from "lucide-react";
 function collectDescendants(node) {
   const ids = [String(node.id)];
   node.children?.forEach((c) => ids.push(...collectDescendants(c)));
@@ -8995,6 +9012,14 @@ function getTopLevelSelected(nodes, selected) {
   }
   return result;
 }
+function getAllSelected(nodes, selected) {
+  const result = [];
+  for (const node of nodes) {
+    if (selected.has(String(node.id))) result.push(node);
+    if (node.children?.length) result.push(...getAllSelected(node.children, selected));
+  }
+  return result;
+}
 function filterTree(nodes, query) {
   if (!query) return nodes;
   const q = query.toLowerCase();
@@ -9023,6 +9048,7 @@ function TreeNodeItem({
   selected,
   expanded,
   selectionMode,
+  allowChildSelection,
   onToggleExpand,
   onSelect,
   isFiltering
@@ -9030,7 +9056,7 @@ function TreeNodeItem({
   const nodeId = String(node.id);
   const hasChildren = !!node.children?.length;
   const isExpanded = isFiltering || expanded.has(nodeId);
-  const state = getNodeState(node, selected);
+  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nodeId) ? "checked" : "unchecked";
   return /* @__PURE__ */ React106.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ React106.createElement(
     "div",
     {
@@ -9050,16 +9076,8 @@ function TreeNodeItem({
       },
       isExpanded ? /* @__PURE__ */ React106.createElement(ChevronDown2, { size: 14 }) : /* @__PURE__ */ React106.createElement(ChevronRight2, { size: 14 })
     ) : /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__expand-ph" }),
-    selectionMode === "multiple" && /* @__PURE__ */ React106.createElement(
-      "span",
-      {
-        className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
-      },
-      state === "checked" && /* @__PURE__ */ React106.createElement(Check, { size: 10, strokeWidth: 3 }),
-      state === "partial" && /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__cb-dash" })
-    ),
-    selectionMode === "single" && /* @__PURE__ */ React106.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
-    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__label" }, node.label)
+    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__label" }, node.label),
+    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__check", "aria-hidden": "true" }, state === "partial" ? /* @__PURE__ */ React106.createElement(Minus, { size: 13, strokeWidth: 2.5 }) : /* @__PURE__ */ React106.createElement(Check, { size: 13, strokeWidth: 2.5 }))
   ), hasChildren && isExpanded && /* @__PURE__ */ React106.createElement("div", null, node.children.map((child) => /* @__PURE__ */ React106.createElement(
     TreeNodeItem,
     {
@@ -9069,6 +9087,7 @@ function TreeNodeItem({
       selected,
       expanded,
       selectionMode,
+      allowChildSelection,
       onToggleExpand,
       onSelect,
       isFiltering
@@ -9082,6 +9101,7 @@ function TreeSelect({
   onNodeSelect,
   onNodeUnselect,
   selectionMode = "single",
+  allowChildSelection = false,
   placeholder = "Select",
   filter = false,
   filterInputAutoFocus = false,
@@ -9202,15 +9222,25 @@ function TreeSelect({
   const handleSelect = (node) => {
     const nodeId = String(node.id);
     if (isMultiple) {
-      const state = getNodeState(node, selectedSet);
-      const descendants = collectDescendants(node);
       const newSet = new Set(selectedSet);
-      if (state === "checked" || state === "partial") {
-        descendants.forEach((id) => newSet.delete(id));
-        onNodeUnselect?.({ node });
+      if (allowChildSelection) {
+        const state = getNodeState(node, selectedSet);
+        const descendants = collectDescendants(node);
+        if (state === "checked" || state === "partial") {
+          descendants.forEach((id) => newSet.delete(id));
+          onNodeUnselect?.({ node });
+        } else {
+          descendants.forEach((id) => newSet.add(id));
+          onNodeSelect?.({ node });
+        }
       } else {
-        descendants.forEach((id) => newSet.add(id));
-        onNodeSelect?.({ node });
+        if (newSet.has(nodeId)) {
+          newSet.delete(nodeId);
+          onNodeUnselect?.({ node });
+        } else {
+          newSet.add(nodeId);
+          onNodeSelect?.({ node });
+        }
       }
       onChange?.({ value: setToRecord(newSet) });
     } else {
@@ -9243,7 +9273,7 @@ function TreeSelect({
     onNodeUnselect?.({ node });
   };
   const filteredTree = filterTree(options, filterQuery);
-  const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
+  const tagNodes = isMultiple ? allowChildSelection ? getTopLevelSelected(options, selectedSet) : getAllSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
   const hasValue = tagNodes.length > 0;
   const isFloating = open || hasValue || focused;
   const rootClasses = [
@@ -9341,6 +9371,7 @@ function TreeSelect({
           selected: selectedSet,
           expanded: expandedKeys,
           selectionMode,
+          allowChildSelection,
           onToggleExpand: handleToggleExpand,
           onSelect: handleSelect,
           isFiltering: !!filterQuery
@@ -9474,7 +9505,9 @@ function SmartSelect({
   value,
   onChange,
   onSearchChange,
+  searchResults = [],
   debounceMs = 300,
+  searchThreshold = 10,
   getOptionLabel,
   getOptionValue,
   getOptionSubLabel,
@@ -9512,14 +9545,20 @@ function SmartSelect({
     return flattenTree(options, getOptionChildren);
   }, [options, getOptionChildren]);
   const flatOptionsList = useMemo3(() => flatItems.map((f) => f.option), [flatItems]);
+  const displayOptions = useMemo3(() => {
+    if (!searchResults.length) return flatOptionsList;
+    const localKeys = new Set(flatOptionsList.map((o) => getValue(o)));
+    const serverOnly = searchResults.filter((o) => !localKeys.has(getValue(o)));
+    return [...flatOptionsList, ...serverOnly];
+  }, [flatOptionsList, searchResults, getValue]);
   const depthMap = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
     return map;
   }, [flatItems, getValue]);
   const lookup = useMemo3(
-    () => buildLookup(options, getOptionChildren, getValue),
-    [options, getOptionChildren, getValue]
+    () => buildLookup(displayOptions, getOptionChildren, getValue),
+    [displayOptions, getOptionChildren, getValue]
   );
   const selectedKeys = useMemo3(() => {
     if (multiple) {
@@ -9531,21 +9570,27 @@ function SmartSelect({
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
     if (!inputValue) {
-      onSearchChange("");
+      onSearchChange("", 0);
       return;
     }
-    const hasLocalMatch = flatOptionsList.some(
-      (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
-    );
-    if (hasLocalMatch) return;
+    const q = inputValue.toLowerCase();
+    let localCount = 0;
+    for (const opt of flatOptionsList) {
+      if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
+        localCount++;
+        if (localCount >= searchThreshold) break;
+      }
+    }
+    if (localCount >= searchThreshold) return;
+    const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue);
+      onSearchChange(inputValue, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue);
+        onSearchChange(inputValue, needed);
       }, debounceMs);
     }
-  }, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = useCallback11((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -9597,34 +9642,28 @@ function SmartSelect({
       {
         key,
         ...rest,
-        className: muiClass,
+        className: [
+          muiClass,
+          "rf-select__option",
+          isSelected ? "rf-select__option--selected" : ""
+        ].filter(Boolean).join(" "),
         style: {
           ...muiStyle,
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          padding: "8px 16px",
           paddingLeft: 16 + depth * 20,
-          fontSize: "0.9rem",
-          color: "rgba(0,0,0,0.87)",
-          cursor: "pointer",
-          userSelect: "none",
-          minHeight: 40,
-          boxSizing: "border-box",
-          fontWeight: isSelected ? 500 : void 0,
-          backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
-          listStyle: "none"
+          listStyle: "none",
+          alignItems: subLabel ? "flex-start" : void 0
         }
       },
-      /* @__PURE__ */ React108.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
-      /* @__PURE__ */ React108.createElement("span", { style: {
-        color: "var(--primary-color, #a41b06)",
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        opacity: isSelected ? 1 : 0,
-        transition: "opacity 0.1s"
-      } }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
+      /* @__PURE__ */ React108.createElement(
+        "span",
+        {
+          className: "rf-select__option-label",
+          style: subLabel ? { display: "flex", flexDirection: "column", whiteSpace: "normal" } : void 0
+        },
+        /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)),
+        subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)
+      ),
+      /* @__PURE__ */ React108.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
   const computedFilterOptions = useCallback11((opts, inputValue) => {
@@ -9632,10 +9671,12 @@ function SmartSelect({
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      const filteredRest = inputValue ? unselected.filter(
-        (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
-      ) : unselected;
-      return [...selected, ...filteredRest];
+      if (!inputValue) return [...selected, ...unselected];
+      const q2 = inputValue.toLowerCase();
+      const filteredUnselected = unselected.filter(
+        (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
+      ).slice(0, searchThreshold);
+      return [...selected, ...filteredUnselected];
     }
     if (value != null) {
       const selectedLabel = getOptionLabel(value);
@@ -9651,12 +9692,12 @@ function SmartSelect({
     const q = inputValue.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
-    );
-  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value]);
+    ).slice(0, searchThreshold);
+  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold]);
   return /* @__PURE__ */ React108.createElement(
     Autocomplete,
     {
-      options: flatOptionsList,
+      options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
       onInputChange: handleInputChange,

package/package.json

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