@rainbow-oh/yee-c 0.12.1 → 0.13.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/Table/demo/controlled-filter.js

@@ -0,0 +1,105 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/demo/controlled-filter.tsx
+var controlled_filter_exports = {};
+__export(controlled_filter_exports, {
+  default: () => controlled_filter_default
+});
+module.exports = __toCommonJS(controlled_filter_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("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" }
+];
+var controlled_filter_default = () => {
+  const { messageApi, messageHolder } = import_yee_c.message.useMessage();
+  const [nameKeyword, setNameKeyword] = (0, import_react.useState)("");
+  const [genders, setGenders] = (0, import_react.useState)([]);
+  const 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: (value, record) => value === record.gender
+      }
+    }
+  ];
+  const handleChange = (info) => {
+    var _a, _b, _c;
+    if (info.action !== "filter")
+      return;
+    const filters = (_a = info.filters) != null ? _a : {};
+    const name = (_b = filters.name) != null ? _b : "";
+    if (name !== nameKeyword) {
+      messageApi.info(`Fetch: /api/users?name=${name}`);
+      setNameKeyword(name);
+    }
+    setGenders((_c = filters.gender) != null ? _c : []);
+  };
+  const data = allData.filter((item) => {
+    const matchName = nameKeyword ? item.name.toLowerCase().includes(nameKeyword.toLowerCase()) : true;
+    const matchGender = genders.length ? genders.includes(item.gender) : true;
+    return matchName && matchGender;
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, messageHolder, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true, style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { onClick: () => setNameKeyword("") }, "Reset name search"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { onClick: () => setGenders([]) }, "Reset gender filter")), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Table,
+    {
+      columns,
+      dataSource: data,
+      onChange: handleChange,
+      pagination: false
+    }
+  ));
+};

package/dist/cjs/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/cjs/Table/hooks/useFilter.js

@@ -36,17 +36,71 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Table/hooks/useFilter.ts
 var useFilter_exports = {};
 __export(useFilter_exports, {
-  default: () => useFilter
+  default: () => useFilter,
+  isControlledFilter: () => isControlledFilter
 });
 module.exports = __toCommonJS(useFilter_exports);
 var import_react = require("react");
 var isEmptyFilterValue = (value) => value === "" || Array.isArray(value) && value.length === 0;
+var isControlledFilter = (column) => {
+  var _a;
+  return ((_a = column == null ? void 0 : column.filter) == null ? void 0 : _a.filteredValue) !== void 0;
+};
 var normalizeValue = (value) => value === null || value === void 0 ? "" : String(value).toLowerCase();
+var mergeRecords = (internalRecords, columnMap) => {
+  const controlled = [];
+  columnMap.forEach((column, dataIndex) => {
+    var _a;
+    if (!isControlledFilter(column))
+      return;
+    const value = (_a = column.filter) == null ? void 0 : _a.filteredValue;
+    if (!isEmptyFilterValue(value)) {
+      controlled.push({ dataIndex, value });
+    }
+  });
+  const merged = internalRecords.filter(
+    (record) => !isControlledFilter(columnMap.get(record.dataIndex))
+  );
+  if (!controlled.length && merged.length === internalRecords.length) {
+    return internalRecords;
+  }
+  return [...merged, ...controlled];
+};
+var applyFilters = (data, records, columnMap) => {
+  const handled = records.filter(
+    ({ dataIndex, value }) => Boolean(dataIndex) && columnMap.has(dataIndex) && !isEmptyFilterValue(value)
+  );
+  if (!handled.length) {
+    return data;
+  }
+  return data.filter((item) => {
+    return handled.every(({ dataIndex, value }) => {
+      var _a, _b;
+      const column = columnMap.get(dataIndex);
+      if (isControlledFilter(column) && !((_a = column == null ? void 0 : column.filter) == null ? void 0 : _a.onFilter)) {
+        return true;
+      }
+      const customFilter = (_b = column == null ? void 0 : column.filter) == null ? void 0 : _b.onFilter;
+      if (customFilter) {
+        return Array.isArray(value) ? value.some((filterValue) => customFilter(filterValue, item)) : customFilter(value, item);
+      }
+      const targetValue = normalizeValue(item[dataIndex]);
+      if (Array.isArray(value)) {
+        return value.some(
+          (filterValue) => targetValue === normalizeValue(filterValue)
+        );
+      }
+      return targetValue.includes(normalizeValue(value));
+    });
+  });
+};
 function useFilter({
   data,
   columns
 }) {
-  const [filterRecords, setFilterRecords] = (0, import_react.useState)([]);
+  const [internalRecords, setInternalRecords] = (0, import_react.useState)(
+    []
+  );
   const columnMap = (0, import_react.useMemo)(
     () => new Map(
       columns.flatMap(
@@ -56,52 +110,36 @@ function useFilter({
     [columns]
   );
   (0, import_react.useEffect)(() => {
-    setFilterRecords((current) => {
+    setInternalRecords((current) => {
       const next = current.filter(({ dataIndex }) => columnMap.has(dataIndex));
       return next.length === current.length ? current : next;
     });
   }, [columnMap]);
-  const onFilter = ({ value, dataIndex }) => {
-    setFilterRecords((current) => {
-      if (isEmptyFilterValue(value)) {
-        return current.filter((item) => item.dataIndex !== dataIndex);
-      }
-      const index = current.findIndex((item) => item.dataIndex === dataIndex);
-      if (index === -1) {
-        return [...current, { dataIndex, value }];
-      }
-      return current.map(
-        (item, itemIndex) => itemIndex === index ? __spreadProps(__spreadValues({}, item), { value }) : item
-      );
-    });
-  };
-  const filtered = (0, import_react.useMemo)(() => {
-    const handled = filterRecords.filter(
-      ({ dataIndex, value }) => Boolean(dataIndex) && columnMap.has(dataIndex) && !isEmptyFilterValue(value)
-    );
-    if (!handled.length) {
-      return data;
-    }
-    return data.filter((item) => {
-      return handled.every(({ dataIndex, value }) => {
-        var _a, _b;
-        const customFilter = (_b = (_a = columnMap.get(dataIndex)) == null ? void 0 : _a.filter) == null ? void 0 : _b.onFilter;
-        if (customFilter) {
-          return Array.isArray(value) ? value.some((filterValue) => customFilter(filterValue, item)) : customFilter(value, item);
-        }
-        const targetValue = normalizeValue(item[dataIndex]);
-        if (Array.isArray(value)) {
-          return value.some(
-            (filterValue) => targetValue === normalizeValue(filterValue)
-          );
-        }
-        return targetValue.includes(normalizeValue(value));
-      });
-    });
-  }, [columnMap, data, filterRecords]);
+  const activeRecords = (0, import_react.useMemo)(
+    () => mergeRecords(internalRecords, columnMap),
+    [internalRecords, columnMap]
+  );
+  const filtered = (0, import_react.useMemo)(
+    () => applyFilters(data, activeRecords, columnMap),
+    [columnMap, data, activeRecords]
+  );
+  const onFilter = (0, import_react.useCallback)(
+    ({ value, dataIndex }) => {
+      const nextInternal = isEmptyFilterValue(value) ? internalRecords.filter((item) => item.dataIndex !== dataIndex) : internalRecords.some((item) => item.dataIndex === dataIndex) ? internalRecords.map(
+        (item) => item.dataIndex === dataIndex ? __spreadProps(__spreadValues({}, item), { value }) : item
+      ) : [...internalRecords, { dataIndex, value }];
+      setInternalRecords(nextInternal);
+      const nextActive = mergeRecords(nextInternal, columnMap);
+      return {
+        data: applyFilters(data, nextActive, columnMap),
+        filterRecords: nextActive
+      };
+    },
+    [internalRecords, columnMap, data]
+  );
   return {
     data: filtered,
-    filterRecords,
+    filterRecords: activeRecords,
     onFilter
   };
 }

package/dist/cjs/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/cjs/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
          */

package/dist/cjs/Table/table.js

@@ -248,6 +248,27 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     },
     [onSortInternal, onChange, pagination, current, pageSize, filters]
   );
+  const handleFilter = import_react.default.useCallback(
+    (options) => {
+      const next = onFilterInternal(options);
+      const emitted = next.filterRecords.filter(
+        (record) => record.dataIndex !== options.dataIndex
+      );
+      emitted.push({ dataIndex: options.dataIndex, value: options.value });
+      onChange == null ? void 0 : onChange({
+        pagination: pagination === false ? void 0 : { current, pageSize },
+        sorter: sorters,
+        filters: Object.fromEntries(
+          emitted.map(({ dataIndex, value }) => [dataIndex, value])
+        ),
+        // Filtered but not yet re-sorted; symmetric with handleSort, whose
+        // payload is sorted but not re-paginated.
+        currentDataSource: next.data,
+        action: "filter"
+      });
+    },
+    [onFilterInternal, onChange, pagination, current, pageSize, sorters]
+  );
   const { expandedRowKeys, onExpand } = (0, import_useExpand.default)(
     expandable,
     allKeys,
@@ -259,7 +280,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onCheckAll,
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
-  const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
   const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
     left: false,
     right: false
@@ -309,29 +329,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
       return unchanged ? current2 : nextWidths;
     });
   }, [wrapedColumnsRef]);
-  (0, import_react.useEffect)(() => {
-    if (prevFilterRecordsRef.current === filterRecords)
-      return;
-    prevFilterRecordsRef.current = filterRecords;
-    if (!onChange)
-      return;
-    onChange({
-      pagination: pagination === false ? void 0 : { current, pageSize },
-      sorter: sorters,
-      filters,
-      currentDataSource: sortedData,
-      action: "filter"
-    });
-  }, [
-    filterRecords,
-    filters,
-    sortedData,
-    pagination,
-    current,
-    pageSize,
-    sorters,
-    onChange
-  ]);
   (0, import_react.useEffect)(() => {
     const content = contentRef.current;
     const tableElement = tableRef.current;
@@ -387,7 +384,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
         sorters,
         onSort: handleSort,
         onCheckAll,
-        onInternalFilter: onFilterInternal,
+        onInternalFilter: handleFilter,
         resizingKey,
         onResizeStart,
         onResizeStep

package/dist/cjs/Table/theader/cell.js

@@ -84,7 +84,6 @@ var HeadCell = (props) => {
     classNames,
     showSorterTooltip = true,
     tableActionBarShowOnHover,
-    internalFilters,
     style,
     width,
     colSpan,
@@ -112,7 +111,6 @@ var HeadCell = (props) => {
     "classNames",
     "showSorterTooltip",
     "tableActionBarShowOnHover",
-    "internalFilters",
     "style",
     "width",
     "colSpan",
@@ -190,7 +188,6 @@ var HeadCell = (props) => {
         __spreadProps(__spreadValues({}, rest), {
           filter,
           column: props,
-          internalFilters,
           onInternalFilter,
           dataIndex
         })

package/dist/cjs/Table/theader/filter.js

@@ -56,6 +56,7 @@ var areFilterValuesEqual = (a, b) => {
 };
 var hasFilterValue = (value) => Array.isArray(value) ? value.length > 0 : value !== "";
 var HeaderFilter = import_react.default.memo((props) => {
+  var _a;
   const { filter, column, getPopupContainer, onInternalFilter } = props;
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
   const { locale } = (0, import_locale.useLocale)();
@@ -77,12 +78,28 @@ var HeaderFilter = import_react.default.memo((props) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const [selectNodes, setSelectNodes] = (0, import_react.useState)([]);
   const [searchValue, setSearchValue] = (0, import_react.useState)("");
+  const controlled = filter.filteredValue !== void 0;
+  (0, import_react.useEffect)(() => {
+    if (!controlled || open)
+      return;
+    const value = filter.filteredValue;
+    if (Array.isArray(value)) {
+      setSelectNodes([...value]);
+      setSearchValue("");
+    } else {
+      setSearchValue(String(value));
+      setSelectNodes([]);
+    }
+    const committed = Array.isArray(value) ? [...value] : value;
+    committedValueRef.current = committed;
+    setCommittedValue(committed);
+  }, [controlled, filter.filteredValue, open]);
   (0, import_react.useEffect)(() => {
     if (!open)
       return;
     const raf = requestAnimationFrame(() => {
-      var _a;
-      (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
     });
     return () => cancelAnimationFrame(raf);
   }, [open]);
@@ -139,8 +156,8 @@ var HeaderFilter = import_react.default.memo((props) => {
     const inputValue = getStrLower(searchValue);
     const filteredItems = inputValue ? items.filter(
       (item) => {
-        var _a;
-        return (_a = getStrLower(item.label)) == null ? void 0 : _a.includes(getStrLower(searchValue));
+        var _a2;
+        return (_a2 = getStrLower(item.label)) == null ? void 0 : _a2.includes(getStrLower(searchValue));
       }
     ) : items;
     if (filterMode === "menu") {
@@ -186,7 +203,7 @@ var HeaderFilter = import_react.default.memo((props) => {
     }
     setOpen(nextOpen);
   };
-  const isFiltered = filtered != null ? filtered : hasFilterValue(committedValue);
+  const isFiltered = filtered != null ? filtered : controlled ? hasFilterValue((_a = filter.filteredValue) != null ? _a : "") : hasFilterValue(committedValue);
   const renderTrigger = () => {
     const trigger = typeof icon === "function" ? icon(isFiltered) : /* @__PURE__ */ import_react.default.createElement(
       import_Button.default,

package/dist/cjs/TextArea/style/index.less

@@ -90,7 +90,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/cjs/VerificationCode/style/index.less

@@ -19,7 +19,7 @@
     }
 
     &:focus {
-      border-color: var(--yee-input-content-focus-border-color);
+      border-color: var(--yee-input-focus-border-color);
       outline: none;
       box-shadow: var(--yee-verification-code-item-focus-box-shadow);
     }

package/dist/cjs/style/color.blue.css

@@ -33,7 +33,8 @@
   --yee-color-text-auxiliary: #f5f5f5;
   --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;
@@ -545,9 +546,7 @@
   --yee-date-picker-time-disabled-bg-color: var(--yee-disabled-bg-color);
 
   --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-option-active-bg-color);
   --yee-range-picker-hover-border-color: var(--yee-primary1-color);
@@ -569,7 +568,7 @@
   /* --Input-- */
 
   --yee-input-hover-border-color: #75b9f0;
-  --yee-input-content-focus-border-color: #75b9f0;
+  --yee-input-focus-border-color: #75b9f0;
   --yee-input-focus-bs-color: rgba(117, 185, 240, 0.24);
   --yee-input-border-color: var(--yee-color-border);
   --yee-input-content-bg-color: var(--yee-color-bg-container);
@@ -630,7 +629,7 @@
     --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-primary1-color);
@@ -1310,7 +1309,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);