@rainbow-oh/yee-c 0.12.1 → 0.13.0

package/src/Table/table-filter.test.tsx

@@ -0,0 +1,343 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import React, { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Table from './table';
+
+import type { FilterValue } from './interface';
+
+const dataSource = [
+  { 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: 'female' },
+];
+
+afterEach(() => {
+  cleanup();
+});
+
+// jsdom has no ResizeObserver; @rc-component/trigger uses it for popup align.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+}
+
+const getTrigger = (container: HTMLElement, index = 0) =>
+  container.querySelectorAll('.yee-table-filter-trigger')[index] as HTMLElement;
+
+const openFilter = (container: HTMLElement, index = 0) => {
+  fireEvent.click(getTrigger(container, index));
+};
+
+// Closed popovers stay mounted in the DOM, so the newest popup is last.
+const getPopup = () =>
+  document.querySelectorAll('.yee-table-filter-content')[
+    document.querySelectorAll('.yee-table-filter-content').length - 1
+  ] as HTMLElement;
+
+const commitSearch = (value: string) => {
+  const popup = getPopup();
+  fireEvent.change(popup.querySelector('input') as HTMLInputElement, {
+    target: { value },
+  });
+  const buttons = popup.querySelectorAll('button');
+  fireEvent.click(buttons[buttons.length - 1]);
+};
+
+const rowCount = (container: HTMLElement) =>
+  container.querySelectorAll('tbody tr').length;
+
+describe('Table filter', () => {
+  it('filters locally with default includes matching and emits onChange once', () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filter: { searchable: true },
+          },
+        ]}
+        dataSource={dataSource}
+        onChange={onChange}
+      />,
+    );
+
+    openFilter(container);
+    commitSearch('jim');
+
+    expect(rowCount(container)).toBe(1);
+    expect(container.textContent).toContain('Jim Green');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0]).toMatchObject({
+      action: 'filter',
+      filters: { name: 'jim' },
+    });
+  });
+
+  it('uses the custom onFilter when provided', () => {
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            filter: {
+              searchable: true,
+              onFilter: (value, record) => record.age === Number(value),
+            },
+          },
+        ]}
+        dataSource={dataSource}
+      />,
+    );
+
+    openFilter(container);
+    commitSearch('32');
+
+    // Default includes matching would find nothing ("32" is not in the names);
+    // the custom filter matches the two rows aged 32.
+    expect(rowCount(container)).toBe(2);
+  });
+
+  it('passes data through when controlled without onFilter and reports the controlled value in filters', () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filter: { searchable: true, filteredValue: 'zzz' },
+          },
+          {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            filter: { searchable: true },
+          },
+        ]}
+        dataSource={dataSource}
+        onChange={onChange}
+      />,
+    );
+
+    // "zzz" matches nothing locally, yet server mode must not drop any rows.
+    expect(rowCount(container)).toBe(3);
+
+    openFilter(container, 1);
+    commitSearch('32');
+
+    expect(rowCount(container)).toBe(2);
+    expect(onChange.mock.calls[0][0]).toMatchObject({
+      action: 'filter',
+      filters: { name: 'zzz', age: '32' },
+    });
+  });
+
+  it('filters locally with onFilter when controlled', () => {
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filter: {
+              searchable: true,
+              filteredValue: 'jim',
+              onFilter: (value, record) =>
+                String(record.name)
+                  .toLowerCase()
+                  .includes(String(value).toLowerCase()),
+            },
+          },
+        ]}
+        dataSource={dataSource}
+      />,
+    );
+
+    expect(rowCount(container)).toBe(1);
+    expect(container.textContent).toContain('Jim Green');
+  });
+
+  it('emits the committed value, highlights the trigger and echoes the value back', () => {
+    const onChange = vi.fn();
+    const Controlled = () => {
+      const [filteredValue, setFilteredValue] = useState<
+        FilterValue | FilterValue[]
+      >('');
+      const handleChange = (info: any) => {
+        onChange(info);
+        setFilteredValue(info.filters.name ?? '');
+      };
+      return (
+        <Table
+          columns={[
+            {
+              title: 'Name',
+              dataIndex: 'name',
+              key: 'name',
+              filter: { searchable: true, filteredValue },
+            },
+          ]}
+          dataSource={dataSource}
+          onChange={handleChange}
+        />
+      );
+    };
+    const { container } = render(<Controlled />);
+
+    // Server mode: data untouched, parent decides what to render.
+    expect(rowCount(container)).toBe(3);
+    expect(getTrigger(container).querySelector('.yee-btn-filled')).toBeNull();
+
+    openFilter(container);
+    commitSearch('jim');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0]).toMatchObject({
+      action: 'filter',
+      filters: { name: 'jim' },
+    });
+
+    // Highlight derives from the controlled prop once the parent applies it.
+    expect(
+      getTrigger(container).querySelector('.yee-btn-filled'),
+    ).not.toBeNull();
+
+    // Re-opening the dropdown echoes the controlled value into the input.
+    openFilter(container);
+    const input = getPopup().querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('jim');
+  });
+
+  it('resets programmatically via filteredValue without emitting onChange', () => {
+    const onChange = vi.fn();
+    const Controlled = () => {
+      const [filteredValue, setFilteredValue] = useState<FilterValue[]>([
+        'male',
+      ]);
+      return (
+        <>
+          <button type="button" onClick={() => setFilteredValue([])}>
+            reset-filters
+          </button>
+          <Table
+            columns={[
+              {
+                title: 'Gender',
+                dataIndex: 'gender',
+                key: 'gender',
+                filter: {
+                  items: [
+                    { label: 'Male', key: 'male' },
+                    { label: 'Female', key: 'female' },
+                  ],
+                  filteredValue,
+                  onFilter: (value, record) => value === record.gender,
+                },
+              },
+            ]}
+            dataSource={dataSource}
+            onChange={onChange}
+          />
+        </>
+      );
+    };
+    const { container, getByText } = render(<Controlled />);
+
+    expect(rowCount(container)).toBe(2);
+    expect(
+      getTrigger(container).querySelector('.yee-btn-filled'),
+    ).not.toBeNull();
+
+    fireEvent.click(getByText('reset-filters'));
+
+    expect(rowCount(container)).toBe(3);
+    expect(getTrigger(container).querySelector('.yee-btn-filled')).toBeNull();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  // Regression: server mode's onChange → fetch → setState round-trip is async,
+  // so commits must not leak into state while the prop has not been applied.
+  it('does not leak a stale controlled value into later onChange payloads when the parent ignores commits', () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filter: { searchable: true, filteredValue: '' },
+          },
+          {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            filter: { searchable: true },
+          },
+        ]}
+        dataSource={dataSource}
+        onChange={onChange}
+      />,
+    );
+
+    // User commits on the controlled column; the parent never applies it.
+    openFilter(container, 0);
+    commitSearch('jim');
+
+    // The controlled column itself: payload reports the clicked value only.
+    expect(onChange.mock.calls[0][0]).toMatchObject({
+      action: 'filter',
+      filters: { name: 'jim' },
+    });
+    // Server passthrough: rows must be untouched despite the commit.
+    expect(rowCount(container)).toBe(3);
+
+    // A commit on the other column must not carry the stale 'jim' along.
+    openFilter(container, 1);
+    commitSearch('32');
+
+    expect(onChange.mock.calls[1][0]).toMatchObject({
+      action: 'filter',
+      filters: { age: '32' },
+    });
+    expect(onChange.mock.calls[1][0].filters).not.toHaveProperty('name');
+  });
+
+  it('does not filter locally from unapplied commits on a controlled column with onFilter', () => {
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            filter: {
+              searchable: true,
+              // Controlled as "no filter"; the parent ignores onChange.
+              filteredValue: [],
+              onFilter: (value, record) => record.age === Number(value),
+            },
+          },
+        ]}
+        dataSource={dataSource}
+      />,
+    );
+
+    openFilter(container);
+    commitSearch('32');
+
+    // The prop says no filter, so no local matching may happen.
+    expect(rowCount(container)).toBe(3);
+  });
+});

package/src/Table/table.tsx

@@ -21,6 +21,7 @@ import useFilter from './hooks/useFilter';
 import usePagination from './hooks/usePagination';
 import useSorter from './hooks/useSorter';
 import type {
+  FilterValue,
   PaginationType,
   TableProps,
   WrapedColumnProps,
@@ -207,6 +208,33 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     [onSortInternal, onChange, pagination, current, pageSize, filters],
   );
 
+  const handleFilter = React.useCallback(
+    (options: { dataIndex: string; value: FilterValue | FilterValue[] }) => {
+      const next = onFilterInternal(options);
+      // Remove-then-re-add: the committing column's entry must be reported
+      // even when the merged records hold no record for it (a controlled
+      // column whose prop value is still empty), so parents can mirror state
+      // from this payload alone. On clear the key is kept with its empty
+      // value, matching antd.
+      const emitted = next.filterRecords.filter(
+        (record) => record.dataIndex !== options.dataIndex,
+      );
+      emitted.push({ dataIndex: options.dataIndex, value: options.value });
+      onChange?.({
+        pagination: pagination === false ? undefined : { 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],
+  );
+
   // Expanded row data
   const { expandedRowKeys, onExpand } = useExpand(
     expandable,
@@ -221,8 +249,6 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     onChange: onSelectionChange,
   } = useSelection({ pageData, dataSource, getRowKey, rowSelection, allKeys });
 
-  // Track filter changes to emit onChange after filtered data is recalculated
-  const prevFilterRecordsRef = useRef(filterRecords);
   const [horizontalScroll, setHorizontalScroll] = React.useState({
     left: false,
     right: false,
@@ -292,30 +318,6 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     });
   }, [wrapedColumnsRef]);
 
-  useEffect(() => {
-    if (prevFilterRecordsRef.current === filterRecords) return;
-
-    prevFilterRecordsRef.current = filterRecords;
-    if (!onChange) return;
-
-    onChange({
-      pagination: pagination === false ? undefined : { current, pageSize },
-      sorter: sorters,
-      filters,
-      currentDataSource: sortedData,
-      action: 'filter',
-    });
-  }, [
-    filterRecords,
-    filters,
-    sortedData,
-    pagination,
-    current,
-    pageSize,
-    sorters,
-    onChange,
-  ]);
-
   // Observers are attached once: both callbacks are referentially stable.
   useEffect(() => {
     const content = contentRef.current;
@@ -380,7 +382,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
         sorters={sorters}
         onSort={handleSort}
         onCheckAll={onCheckAll}
-        onInternalFilter={onFilterInternal}
+        onInternalFilter={handleFilter}
         resizingKey={resizingKey}
         onResizeStart={onResizeStart}
         onResizeStep={onResizeStep}

package/src/Table/theader/cell.tsx

@@ -24,7 +24,6 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     classNames,
     showSorterTooltip = true,
     tableActionBarShowOnHover,
-    internalFilters,
     style,
     width,
     colSpan,
@@ -122,7 +121,6 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
           {...rest}
           filter={filter}
           column={props}
-          internalFilters={internalFilters}
           onInternalFilter={onInternalFilter}
           dataIndex={dataIndex as string}
         />

package/src/Table/theader/filter.tsx

@@ -59,6 +59,27 @@ const HeaderFilter = React.memo((props: any) => {
   const [selectNodes, setSelectNodes] = useState<Array<string | number>>([]);
   const [searchValue, setSearchValue] = useState('');
 
+  // Controlled columns echo `filteredValue` into the local display state.
+  // Only sync while the dropdown is closed so in-progress edits are kept; on
+  // close the committed ref is synced too, so `filterOnClose`'s value diff
+  // doesn't re-commit the echoed value as if the user had changed it.
+  const controlled = filter.filteredValue !== undefined;
+  useEffect(() => {
+    if (!controlled || open) return;
+
+    const value = filter.filteredValue as FilterInput;
+    if (Array.isArray(value)) {
+      setSelectNodes([...value]);
+      setSearchValue('');
+    } else {
+      setSearchValue(String(value));
+      setSelectNodes([]);
+    }
+    const committed: FilterInput = Array.isArray(value) ? [...value] : value;
+    committedValueRef.current = committed;
+    setCommittedValue(committed);
+  }, [controlled, filter.filteredValue, open]);
+
   useEffect(() => {
     if (!open) return;
 
@@ -204,7 +225,11 @@ const HeaderFilter = React.memo((props: any) => {
     setOpen(nextOpen);
   };
 
-  const isFiltered = filtered ?? hasFilterValue(committedValue);
+  const isFiltered =
+    filtered ??
+    (controlled
+      ? hasFilterValue((filter.filteredValue ?? '') as FilterInput)
+      : hasFilterValue(committedValue));
 
   const renderTrigger = () => {
     const trigger =

package/src/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/src/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/src/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);
 

package/src/style/color.crimson.css

@@ -33,7 +33,8 @@
   --yee-color-text-auxiliary: #f5f5f5;
   --yee-color-split: #eeeeee;
   --yee-color-border: #cccccc;
-  --yee-color-border-hover-focus: #7aadc2;
+  --yee-color-border-hover: #7aadc2;
+  --yee-color-border-focus: #7aadc2;
   --yee-color-bg-highlight: rgba(188, 70, 62, 0.16);
   --yee-color-bg-disabled: #f2f2f2;
   --yee-color-bg-head: #fafafa;
@@ -447,7 +448,7 @@
 
   --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: #ffffff;
@@ -494,9 +495,7 @@
   --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);
@@ -517,8 +516,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(122, 173, 194, 0.24);
   --yee-input-border-color: var(--yee-color-border);
   --yee-input-content-bg-color: var(--yee-color-bg-container);
@@ -585,7 +584,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-color-primary);
@@ -1183,7 +1182,7 @@
 
   --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);
 

package/src/style/color.css

@@ -34,7 +34,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;
@@ -486,7 +487,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;
@@ -529,9 +530,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;
@@ -548,8 +547,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);
@@ -601,7 +600,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);
@@ -1146,7 +1145,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);
 
@@ -1221,9 +1220,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
@@ -1336,5 +1339,5 @@
   --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 */
 }