@rainbow-oh/yee-c 0.12.1 → 0.13.0

package/dist/cjs/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-10T08:27:12.495Z
+ * Generated on 2026-09-14T07:04:58.616Z
  */
 
 /* ========== color.css ========== */
@@ -41,7 +41,8 @@
   --yee-color-text-auxiliary: #d1d1d1;
   --yee-color-split: #e7e7e7;
   --yee-color-border: #cbd6e2;
-  --yee-color-border-hover-focus: #75b9f0;
+  --yee-color-border-hover: #75b9f0;
+  --yee-color-border-focus: #75b9f0;
   --yee-color-bg-highlight: rgba(245, 130, 32, 16%);
   --yee-color-bg-disabled: #f5f8fa;
   --yee-color-bg-head: #f8f8f8;
@@ -493,7 +494,7 @@
   /* --Checkbox-- */
   --yee-checkbox-bg-color: var(--yee-color-bg-container);
   --yee-checkbox-border-color: var(--yee-color-border);
-  --yee-checkbox-hover-border-color: var(--yee-color-border-hover-focus);
+  --yee-checkbox-hover-border-color: var(--yee-color-border-hover);
   --yee-checkbox-checked-bg-color: var(--yee-color-primary);
   --yee-checkbox-checked-border-color: var(--yee-color-primary);
   --yee-checkbox-checked-after-border-color: #fff;
@@ -536,9 +537,7 @@
   --yee-date-picker-time-disabled-color: var(--yee-color-text-disabled);
   --yee-date-picker-time-disabled-bg-color: transparent;
   --yee-range-picker-trigger-border-color: var(--yee-color-border);
-  --yee-range-picker-trigger-hover-border-color: var(
-    --yee-color-border-hover-focus
-  );
+  --yee-range-picker-trigger-hover-border-color: var(--yee-color-border-hover);
   --yee-range-picker-checked-bg-color: var(--yee-color-option-active-bg);
   --yee-range-picker-hover-border-color: var(--yee-color-primary);
   --yee-range-picker-panel-bg-color: #fff;
@@ -555,8 +554,8 @@
   );
 
   /* --Input-- */
-  --yee-input-hover-border-color: var(--yee-color-border-hover-focus);
-  --yee-input-content-focus-border-color: var(--yee-color-border-hover-focus);
+  --yee-input-hover-border-color: var(--yee-color-border-hover);
+  --yee-input-focus-border-color: var(--yee-color-border-focus);
   --yee-input-focus-bs-color: rgba(117, 185, 240, 24%);
   --yee-input-border-color: var(--yee-color-border);
   --yee-input-content-bg-color: var(--yee-color-bg-container);
@@ -608,7 +607,7 @@
   --yee-radio-inner-disabled-after-checked-bg-color: var(
     --yee-color-text-disabled
   );
-  --yee-radio-inner-hover-border-color: var(--yee-color-border-hover-focus);
+  --yee-radio-inner-hover-border-color: var(--yee-color-border-hover);
   --yee-radio-label-button-border-color: var(--yee-color-border);
   --yee-radio-label-button-bg-color: var(--yee-color-bg-container);
   --yee-radio-label-button-hover-color: var(--yee-color-primary);
@@ -1153,7 +1152,7 @@
 
   /* --Selector-- */
   --yee-selector-border-color: var(--yee-color-border);
-  --yee-selector-hover-border-color: var(--yee-color-border-hover-focus);
+  --yee-selector-hover-border-color: var(--yee-color-border-hover);
   --yee-selector-focus-border-color: var(--yee-color-primary);
   --yee-selector-disabled-bg-color: var(--yee-input-disabled-bg-color);
 
@@ -1228,9 +1227,13 @@
   --yee-text-color-highlight: var(--yee-color-text-highlight);
   --yee-text-color-secondary: var(--yee-color-text-secondary);
   --yee-border-color: var(--yee-color-border);
-  --yee-border-color-hover-focus: var(--yee-color-border-hover-focus);
+  --yee-border-color-hover-focus: var(--yee-color-border-focus);
   --yee-placeholder-color: var(--yee-color-placeholder);
 
+    /* deprecated:2026-09-11 hover/focus 拆分为 --yee-color-border-hover / --yee-color-border-focus */
+  --yee-color-border-hover-focus: var(--yee-color-border-focus);
+  /* deprecated:2026-09-11 更名 --yee-input-focus-border-color */
+  --yee-input-content-focus-border-color: var(--yee-input-focus-border-color);
   /* deprecated-aliases:end */
 
   /* deprecated-aliases:start
@@ -1343,7 +1346,7 @@
   --yee-timepicker-bg-color: var(--yee-time-picker-bg-color);
   --yee-treeselect-dropdown-bg-color: var(--yee-tree-select-dropdown-bg-color);
 
-  /* deprecated-aliases:end */
+    /* deprecated-aliases:end */
 }
 
 

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.12.1";
+export declare const version = "0.13.0";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.12.1";
+var version = "0.13.0";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Form/style/index.less

@@ -99,6 +99,7 @@
     &&-error {
       --yee-input-border-color: var(--yee-color-error);
       --yee-input-hover-border-color: var(--yee-color-error-hover);
+      --yee-input-focus-border-color: var(--yee-color-error-hover);
       --yee-input-focus-bs-color: var(--yee-color-error-border);
       --yee-checkbox-border-color: var(--yee-color-error);
     }
@@ -106,6 +107,7 @@
     &&-warning {
       --yee-input-border-color: var(--yee-color-warning);
       --yee-input-hover-border-color: var(--yee-color-warning-hover);
+      --yee-input-focus-border-color: var(--yee-color-warning-hover);
       --yee-input-focus-bs-color: var(--yee-color-warning-border);
       --yee-checkbox-border-color: var(--yee-color-warning);
     }
@@ -113,6 +115,7 @@
     &&-success {
       --yee-input-border-color: var(--yee-color-success);
       --yee-input-hover-border-color: var(--yee-color-success-hover);
+      --yee-input-focus-border-color: var(--yee-color-success-hover);
       --yee-input-focus-bs-color: var(--yee-color-success-border);
       --yee-checkbox-border-color: var(--yee-color-success);
     }
@@ -120,6 +123,7 @@
     &&-info {
       --yee-input-border-color: var(--yee-color-info);
       --yee-input-hover-border-color: var(--yee-color-info-hover);
+      --yee-input-focus-border-color: var(--yee-color-info-hover);
       --yee-input-focus-bs-color: var(--yee-color-info-border);
       --yee-checkbox-border-color: var(--yee-color-info);
     }

package/dist/esm/Input/style/index.less

@@ -20,7 +20,7 @@
   }
 
   &:not(@{pls}-disabled):not(@{pls}-borderless):focus-within {
-    border-color: var(--yee-input-hover-border-color);
+    border-color: var(--yee-input-focus-border-color);
     box-shadow: 0 0 0 2px var(--yee-input-focus-bs-color);
   }
 

package/dist/esm/InputNumber/style/index.less

@@ -20,7 +20,7 @@
 
   &:not(@{pls}-disabled):not(@{pls}-borderless)&-focused {
     box-shadow: 0 0 0 2px var(--yee-input-focus-bs-color);
-    border-color: var(--yee-input-hover-border-color);
+    border-color: var(--yee-input-focus-border-color);
   }
 
   &-prefix {

package/dist/esm/Search/style/index.less

@@ -21,7 +21,7 @@
   }
 
   &:focus-within {
-    border-color: var(--yee-input-content-focus-border-color);
+    border-color: var(--yee-input-focus-border-color);
     box-shadow: var(--yee-search-focus-box-shadow);
   }
 

package/dist/esm/Selector/style/index.less

@@ -22,7 +22,7 @@
   }
 
   &:not(@{pls}-disabled):focus-within {
-    border-color: var(--yee-input-hover-border-color);
+    border-color: var(--yee-input-focus-border-color);
     box-shadow: 0 0 0 2px var(--yee-input-focus-bs-color);
   }
 

package/dist/esm/Table/demo/controlled-filter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Table/demo/controlled-filter.js

@@ -0,0 +1,122 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, message, Space, Table } from "../..";
+import React, { useState } from 'react';
+var allData = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  gender: 'male'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  gender: 'male'
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  gender: 'male'
+}, {
+  key: '4',
+  name: 'Jon Snow',
+  age: 42,
+  gender: 'female'
+}, {
+  key: '5',
+  name: 'Arya Stark',
+  age: 16,
+  gender: 'female'
+}];
+export default (function () {
+  var _message$useMessage = message.useMessage(),
+    messageApi = _message$useMessage.messageApi,
+    messageHolder = _message$useMessage.messageHolder;
+
+  // Server-side search: keep the keyword controlled, refetch in onChange.
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    nameKeyword = _useState2[0],
+    setNameKeyword = _useState2[1];
+
+  // Controlled local filter: the tree selection lives in the parent state.
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    genders = _useState4[0],
+    setGenders = _useState4[1];
+  var columns = [{
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    filter: {
+      searchable: true,
+      // No onFilter: no local matching, the search hits the "server".
+      filteredValue: nameKeyword
+    }
+  }, {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age'
+  }, {
+    title: 'Gender',
+    dataIndex: 'gender',
+    key: 'gender',
+    filter: {
+      filterMode: 'tree',
+      items: [{
+        label: 'Male',
+        key: 'male'
+      }, {
+        label: 'Female',
+        key: 'female'
+      }],
+      filteredValue: genders,
+      onFilter: function onFilter(value, record) {
+        return value === record.gender;
+      }
+    }
+  }];
+  var handleChange = function handleChange(info) {
+    var _info$filters, _filters$name, _filters$gender;
+    if (info.action !== 'filter') return;
+    var filters = (_info$filters = info.filters) !== null && _info$filters !== void 0 ? _info$filters : {};
+
+    // The committing column's key is always present in the payload — with its
+    // empty value on clear — so both setting and clearing are mirrored here.
+    var name = (_filters$name = filters.name) !== null && _filters$name !== void 0 ? _filters$name : '';
+    if (name !== nameKeyword) {
+      // Pretend to refetch with ?name=<keyword>.
+      messageApi.info("Fetch: /api/users?name=".concat(name));
+      setNameKeyword(name);
+    }
+    setGenders((_filters$gender = filters.gender) !== null && _filters$gender !== void 0 ? _filters$gender : []);
+  };
+  var data = allData.filter(function (item) {
+    var matchName = nameKeyword ? item.name.toLowerCase().includes(nameKeyword.toLowerCase()) : true;
+    var matchGender = genders.length ? genders.includes(item.gender) : true;
+    return matchName && matchGender;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, messageHolder, /*#__PURE__*/React.createElement(Space, {
+    block: true,
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setNameKeyword('');
+    }
+  }, "Reset name search"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setGenders([]);
+    }
+  }, "Reset gender filter")), /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: data,
+    onChange: handleChange,
+    pagination: false
+  }));
+});

package/dist/esm/Table/hooks/useFilter.d.ts

@@ -8,12 +8,16 @@ type FilterRecord = {
     value: FilterInput;
     dataIndex: string;
 };
+export declare const isControlledFilter: (column?: ColumnProps) => boolean;
 export default function useFilter({ data, columns, }: {
     data: Array<Record<string, unknown>>;
     columns: ColumnProps[];
 }): {
     data: Record<string, unknown>[];
     filterRecords: FilterRecord[];
-    onFilter: ({ value, dataIndex }: FilterOptions) => void;
+    onFilter: ({ value, dataIndex }: FilterOptions) => {
+        data: Record<string, unknown>[];
+        filterRecords: FilterRecord[];
+    };
 };
 export {};

package/dist/esm/Table/hooks/useFilter.js

@@ -4,102 +4,145 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 var isEmptyFilterValue = function isEmptyFilterValue(value) {
   return value === '' || Array.isArray(value) && value.length === 0;
 };
+export var isControlledFilter = function isControlledFilter(column) {
+  var _column$filter;
+  return (column === null || column === void 0 || (_column$filter = column.filter) === null || _column$filter === void 0 ? void 0 : _column$filter.filteredValue) !== undefined;
+};
 var normalizeValue = function normalizeValue(value) {
   return value === null || value === undefined ? '' : String(value).toLowerCase();
 };
-export default function useFilter(_ref) {
-  var data = _ref.data,
-    columns = _ref.columns;
+
+// Controlled columns (`filteredValue` defined) always take their value from
+// the prop; internal records for them are ignored entirely — a commit on a
+// controlled column must not leak into the merged state while the parent has
+// not (yet) applied the new prop value.
+var mergeRecords = function mergeRecords(internalRecords, columnMap) {
+  var controlled = [];
+  columnMap.forEach(function (column, dataIndex) {
+    var _column$filter2;
+    if (!isControlledFilter(column)) return;
+    var value = (_column$filter2 = column.filter) === null || _column$filter2 === void 0 ? void 0 : _column$filter2.filteredValue;
+    if (!isEmptyFilterValue(value)) {
+      controlled.push({
+        dataIndex: dataIndex,
+        value: value
+      });
+    }
+  });
+  var merged = internalRecords.filter(function (record) {
+    return !isControlledFilter(columnMap.get(record.dataIndex));
+  });
+  if (!controlled.length && merged.length === internalRecords.length) {
+    return internalRecords;
+  }
+  return [].concat(_toConsumableArray(merged), controlled);
+};
+var applyFilters = function applyFilters(data, records, columnMap) {
+  var handled = records.filter(function (_ref) {
+    var dataIndex = _ref.dataIndex,
+      value = _ref.value;
+    return Boolean(dataIndex) && columnMap.has(dataIndex) && !isEmptyFilterValue(value);
+  });
+  if (!handled.length) {
+    return data;
+  }
+  return data.filter(function (item) {
+    return handled.every(function (_ref2) {
+      var _column$filter3, _column$filter4;
+      var dataIndex = _ref2.dataIndex,
+        value = _ref2.value;
+      var column = columnMap.get(dataIndex);
+
+      // Controlled column without `onFilter` is server-side: the data the
+      // consumer renders is already filtered upstream, pass it through.
+      if (isControlledFilter(column) && !(column !== null && column !== void 0 && (_column$filter3 = column.filter) !== null && _column$filter3 !== void 0 && _column$filter3.onFilter)) {
+        return true;
+      }
+      var customFilter = column === null || column === void 0 || (_column$filter4 = column.filter) === null || _column$filter4 === void 0 ? void 0 : _column$filter4.onFilter;
+      if (customFilter) {
+        return Array.isArray(value) ? value.some(function (filterValue) {
+          return customFilter(filterValue, item);
+        }) : customFilter(value, item);
+      }
+      var targetValue = normalizeValue(item[dataIndex]);
+      if (Array.isArray(value)) {
+        return value.some(function (filterValue) {
+          return targetValue === normalizeValue(filterValue);
+        });
+      }
+      return targetValue.includes(normalizeValue(value));
+    });
+  });
+};
+export default function useFilter(_ref3) {
+  var data = _ref3.data,
+    columns = _ref3.columns;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    filterRecords = _useState2[0],
-    setFilterRecords = _useState2[1];
+    internalRecords = _useState2[0],
+    setInternalRecords = _useState2[1];
   var columnMap = useMemo(function () {
     return new Map(columns.flatMap(function (column) {
       return column.dataIndex ? [[column.dataIndex, column]] : [];
     }));
   }, [columns]);
   useEffect(function () {
-    setFilterRecords(function (current) {
-      var next = current.filter(function (_ref2) {
-        var dataIndex = _ref2.dataIndex;
+    setInternalRecords(function (current) {
+      var next = current.filter(function (_ref4) {
+        var dataIndex = _ref4.dataIndex;
         return columnMap.has(dataIndex);
       });
       return next.length === current.length ? current : next;
     });
   }, [columnMap]);
-  var onFilter = function onFilter(_ref3) {
-    var value = _ref3.value,
-      dataIndex = _ref3.dataIndex;
-    setFilterRecords(function (current) {
-      if (isEmptyFilterValue(value)) {
-        return current.filter(function (item) {
-          return item.dataIndex !== dataIndex;
-        });
-      }
-      var index = current.findIndex(function (item) {
-        return item.dataIndex === dataIndex;
-      });
-      if (index === -1) {
-        return [].concat(_toConsumableArray(current), [{
-          dataIndex: dataIndex,
-          value: value
-        }]);
-      }
-      return current.map(function (item, itemIndex) {
-        return itemIndex === index ? _objectSpread(_objectSpread({}, item), {}, {
-          value: value
-        }) : item;
-      });
-    });
-  };
+  var activeRecords = useMemo(function () {
+    return mergeRecords(internalRecords, columnMap);
+  }, [internalRecords, columnMap]);
   var filtered = useMemo(function () {
-    var handled = filterRecords.filter(function (_ref4) {
-      var dataIndex = _ref4.dataIndex,
-        value = _ref4.value;
-      return Boolean(dataIndex) && columnMap.has(dataIndex) && !isEmptyFilterValue(value);
-    });
-    if (!handled.length) {
-      return data;
-    }
-    return data.filter(function (item) {
-      return handled.every(function (_ref5) {
-        var _columnMap$get;
-        var dataIndex = _ref5.dataIndex,
-          value = _ref5.value;
-        var customFilter = (_columnMap$get = columnMap.get(dataIndex)) === null || _columnMap$get === void 0 || (_columnMap$get = _columnMap$get.filter) === null || _columnMap$get === void 0 ? void 0 : _columnMap$get.onFilter;
-        if (customFilter) {
-          return Array.isArray(value) ? value.some(function (filterValue) {
-            return customFilter(filterValue, item);
-          }) : customFilter(value, item);
-        }
-        var targetValue = normalizeValue(item[dataIndex]);
-        if (Array.isArray(value)) {
-          return value.some(function (filterValue) {
-            return targetValue === normalizeValue(filterValue);
-          });
-        }
-        return targetValue.includes(normalizeValue(value));
-      });
-    });
-  }, [columnMap, data, filterRecords]);
+    return applyFilters(data, activeRecords, columnMap);
+  }, [columnMap, data, activeRecords]);
+
+  // Mirrors useSorter.onSort: computes the next state synchronously and
+  // returns it, so callers can emit onChange with the result in the same tick.
+  var onFilter = useCallback(function (_ref5) {
+    var value = _ref5.value,
+      dataIndex = _ref5.dataIndex;
+    var nextInternal = isEmptyFilterValue(value) ? internalRecords.filter(function (item) {
+      return item.dataIndex !== dataIndex;
+    }) : internalRecords.some(function (item) {
+      return item.dataIndex === dataIndex;
+    }) ? internalRecords.map(function (item) {
+      return item.dataIndex === dataIndex ? _objectSpread(_objectSpread({}, item), {}, {
+        value: value
+      }) : item;
+    }) : [].concat(_toConsumableArray(internalRecords), [{
+      dataIndex: dataIndex,
+      value: value
+    }]);
+    setInternalRecords(nextInternal);
+    var nextActive = mergeRecords(nextInternal, columnMap);
+    return {
+      data: applyFilters(data, nextActive, columnMap),
+      filterRecords: nextActive
+    };
+  }, [internalRecords, columnMap, data]);
   return {
     data: filtered,
-    filterRecords: filterRecords,
+    filterRecords: activeRecords,
     onFilter: onFilter
   };
 }

package/dist/esm/Table/index.d.ts

@@ -2,7 +2,7 @@ import Column from './column';
 import Summary from './summary';
 import InternalTable from './table';
 import Head from './theader';
-export type { ColumnProps, HeaderCell, PaginationType, RowSelectionType, TableBodyComponents, TableComponents, TableProps, TableRowRendererProps, onChangeParams, } from './interface';
+export type { ColumnProps, FilterValue, HeaderCell, PaginationType, RowSelectionType, TableBodyComponents, TableComponents, TableProps, TableRowRendererProps, onChangeParams, } from './interface';
 type TableType = typeof InternalTable & {
     Column: typeof Column;
     Summary: typeof Summary;

package/dist/esm/Table/interface.d.ts

@@ -62,11 +62,13 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
         [prop: string]: number;
     };
     showSorterTooltip?: boolean;
-    internalFilters?: {
-        [dataIndex: string]: boolean;
-    };
     onSort?: (dataIndex: string, sorter: any) => void;
-    onInternalFilter?: (dataIndex: string, value: string) => void;
+    onInternalFilter?: (options: {
+        dataIndex: string;
+        value: FilterValue | FilterValue[];
+        type?: 'filter' | 'search';
+        column: WrapedColumnProps;
+    }) => void;
     /**
      * `resizeKey` of the column currently being dragged, if any
      */
@@ -188,6 +190,14 @@ export interface ColumnProps {
          * Whether searchable, when items is undefined, it acts as a search component
          */
         searchable?: boolean;
+        /**
+         * Controlled filter state. When defined, this column's filter state is
+         * controlled: the dropdown echo, icon highlight and the `filters` in
+         * onChange all derive from it. With no `onFilter`, local matching is
+         * skipped entirely (server mode — filter in your onChange handler).
+         * Reset with `[]` / `''`.
+         */
+        filteredValue?: FilterValue | FilterValue[];
         /**
          * Filter icon
          */