@rainbow-oh/yee-c 0.14.5 → 0.14.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.14.5",
+  "version": "0.14.7",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Form/Field.required.test.tsx

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, render, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+// act 需要（仓库无全局 vitest setup，逐文件声明）
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import Field from './Field';
+import FieldContext from './FieldContext';
+import FormContext from './FormContext';
+import Group from './Group';
+import { FormStore } from './form-store';
+
+const formContextValue = { prefixCls: 'yee-form' } as const;
+
+function Harness({ required }: { required: boolean }) {
+  return (
+    <Field name="username" required={required}>
+      <input />
+    </Field>
+  );
+}
+
+function GroupHarness({ required }: { required: boolean }) {
+  return (
+    <Group required={required} label="组">
+      <Field name="a">
+        <input />
+      </Field>
+    </Group>
+  );
+}
+
+function renderField(required: boolean) {
+  // 测试无 LocaleProvider，默认必填文案为空串（不渲染错误 DOM），手动设置
+  const formStore = new FormStore();
+  formStore.setDefaultValidateMessage('该字段必填');
+  const store = formStore.getForm();
+  const { container, rerender } = render(
+    <FormContext.Provider value={formContextValue}>
+      <FieldContext.Provider value={store}>
+        <Harness required={required} />
+      </FieldContext.Provider>
+    </FormContext.Provider>,
+  );
+  const rerenderWith = (nextRequired: boolean) =>
+    rerender(
+      <FormContext.Provider value={formContextValue}>
+        <FieldContext.Provider value={store}>
+          <Harness required={nextRequired} />
+        </FieldContext.Provider>
+      </FormContext.Provider>,
+    );
+  const errorEl = () => container.querySelector('.yee-form-item-additional-error');
+  return { store, rerenderWith, errorEl };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+// required 触发校验报错后，把 required 改为 false，错误应立即消失：
+// 1) store 里注册的 entity 必须读到最新 props（旧实现是首帧快照，重校验仍失败）
+// 2) required/rules 变化时需对已报错字段重新校验，否则旧错误无人清除
+describe('Field required 运行时切换', () => {
+  it('报错后 required 改为 false，错误立即消失', async () => {
+    const { store, rerenderWith, errorEl } = renderField(true);
+
+    await act(async () => {
+      await store.validateField('username');
+    });
+    expect(store.getFieldValidate('username')).not.toBeNull();
+    expect(errorEl()).not.toBeNull();
+
+    rerenderWith(false);
+
+    expect(store.getFieldValidate('username')).toBeNull();
+    // 错误文案经 AnimatePresence 退出动画移除，jsdom 需等动画结束
+    await waitFor(() => expect(errorEl()).toBeNull());
+  });
+
+  it('required 改为 false 后再次校验通过', async () => {
+    const { store, rerenderWith } = renderField(true);
+
+    await act(async () => {
+      await store.validateField('username');
+    });
+    rerenderWith(false);
+
+    await act(async () => {
+      await store.validateField('username');
+    });
+    expect(store.getFieldValidate('username')).toBeNull();
+  });
+
+  it('未报错字段在 rules 变化时保持无错（不骚扰未触碰字段）', () => {
+    const { store, rerenderWith } = renderField(true);
+    rerenderWith(false);
+    expect(store.getFieldValidate('username')).toBeNull();
+  });
+
+  it('报错后 required 保持 true 且值仍为空，重校验仍报错', async () => {
+    const { store, rerenderWith, errorEl } = renderField(true);
+
+    await act(async () => {
+      await store.validateField('username');
+    });
+    rerenderWith(true);
+
+    expect(store.getFieldValidate('username')).not.toBeNull();
+    expect(errorEl()).not.toBeNull();
+  });
+});
+
+describe('Group required 运行时切换', () => {
+  it('报错后 required 改为 false，submit 不再报组错误', async () => {
+    const store = new FormStore().getForm();
+    const { rerender } = render(
+      <FormContext.Provider value={formContextValue}>
+        <FieldContext.Provider value={store}>
+          <GroupHarness required />
+        </FieldContext.Provider>
+      </FormContext.Provider>,
+    );
+
+    let errors: unknown[] = [];
+    await act(async () => {
+      errors = await store.submit();
+    });
+    expect(errors.length).toBeGreaterThan(0);
+
+    rerender(
+      <FormContext.Provider value={formContextValue}>
+        <FieldContext.Provider value={store}>
+          <GroupHarness required={false} />
+        </FieldContext.Provider>
+      </FormContext.Provider>,
+    );
+
+    await act(async () => {
+      errors = await store.submit();
+    });
+    expect(errors).toHaveLength(0);
+  });
+});

package/src/Form/Field.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { HelpCircle } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
-import React, { useContext, useLayoutEffect, useMemo, useReducer } from 'react';
+import React, { useContext, useLayoutEffect, useMemo, useReducer, useRef } from 'react';
 import Tooltip from '../Tooltip';
 import FieldContext from './FieldContext';
 import FormContext from './FormContext';
@@ -45,6 +45,7 @@ const Field: React.FC<FieldProps> = (props) => {
   const {
     getCallbacks,
     getFieldStatus,
+    getFieldValidate,
     getFieldValue,
     getFieldsValue,
     setFieldsValue,
@@ -74,14 +75,43 @@ const Field: React.FC<FieldProps> = (props) => {
     return stringifyPath(fullFieldNamePath);
   }, [fullFieldNamePath]);
 
+  // Registration happens once per field name, but the store (validateField)
+  // reads validation config off entity.props on every validation pass — the
+  // getter keeps those reads on the latest render's props so runtime changes
+  // to required/rules take effect.
+  const propsRef = useRef(props);
+  propsRef.current = props;
+
   useLayoutEffect(() => {
     const unregister = registerFieldEntities?.({
-      props: { ...props, name: normalizedName },
+      get props() {
+        return { ...propsRef.current, name: normalizedName };
+      },
       onStoreChange: forceUpdate,
     });
     return unregister;
   }, [normalizedName, registerFieldEntities]);
 
+  // JSON signature (not reference) because rules is typically an inline array
+  // literal; validator functions are dropped, but the getter above already
+  // makes the next natural validation use them.
+  const validateSignature = useMemo(
+    () => JSON.stringify({ required, rules }),
+    [required, rules],
+  );
+  const prevValidateSignatureRef = useRef(validateSignature);
+
+  useLayoutEffect(() => {
+    const prev = prevValidateSignatureRef.current;
+    prevValidateSignatureRef.current = validateSignature;
+    if (prev === validateSignature) return;
+    // Only re-check fields already showing a validation message — pristine
+    // fields must not start erroring just because rules changed.
+    if (getFieldValidate?.(normalizedName)) {
+      void validateField?.(normalizedName);
+    }
+  }, [validateSignature, normalizedName]);
+
   const isRequired = () => {
     return (
       (Array.isArray(rules) && rules.find((rule) => rule.required)) || required

package/src/Form/Group.tsx

@@ -107,11 +107,16 @@ const Group: React.FC<FieldGroupProps> = (props) => {
     return () => unsubscribes.forEach((fn) => fn());
   }, [childNames, formInstance]);
 
-  // Register group validator to FormStore
+  // Register group validator to FormStore. The closure is registered once, so
+  // it reads the latest validate (and its required/rules/childNames captures)
+  // through a ref — otherwise runtime prop changes never take effect.
+  const validateRef = useRef(validate);
+  validateRef.current = validate;
+
   useEffect(() => {
     const unregister = formInstance.registerGroupEntity(groupId, {
       validate: async (force) => {
-        const result = await validate(force);
+        const result = await validateRef.current(force);
         setErrors(result);
         forceUpdate();
         return result;

package/src/Form/List.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+// act 需要（仓库无全局 vitest setup，逐文件声明）
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import Field from './Field';
+import FieldContext from './FieldContext';
+import List from './List';
+import { FormStore } from './form-store';
+
+function renderListWithStore() {
+  const store = new FormStore().getForm();
+  const { getByTestId } = render(
+    <FieldContext.Provider value={store}>
+      <List name="options">
+        {(fields) => (
+          <div data-testid="rows">
+            {fields.map((field) => (
+              <Field key={field.key} name={[field.name, 'label']}>
+                <input />
+              </Field>
+            ))}
+          </div>
+        )}
+      </List>
+    </FieldContext.Provider>,
+  );
+  return { getByTestId, store };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+// List 只在自身 render 时读 store：外部 form.setFieldsValue 整体替换 List 值时
+// 若不订阅自身 path，行数不刷新、新行永不挂载（app 侧 issue #99 首开不显示的根因）
+describe('Form.List 外部 setFieldsValue 驱动重渲染', () => {
+  it('整体替换 List 值后行数更新', () => {
+    const { getByTestId, store } = renderListWithStore();
+    expect(getByTestId('rows').children.length).toBe(0);
+
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }, { label: 'c' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(3);
+  });
+
+  it('缩减 List 值后行数同步减少', () => {
+    const { getByTestId, store } = renderListWithStore();
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(2);
+
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(1);
+  });
+
+  it('resetFields 后行数清零', () => {
+    const { getByTestId, store } = renderListWithStore();
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(2);
+
+    act(() => {
+      store.resetFields();
+    });
+    expect(getByTestId('rows').children.length).toBe(0);
+  });
+
+  it('行内编辑不重渲染 List（长度未变时跳过）', () => {
+    let renders = 0;
+    const store = new FormStore().getForm();
+    render(
+      <FieldContext.Provider value={store}>
+        <List name="options">
+          {() => {
+            renders += 1;
+            return null;
+          }}
+        </List>
+      </FieldContext.Provider>,
+    );
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }] });
+    });
+    const afterInit = renders;
+
+    act(() => {
+      store.setFieldsValue({ 'options.0.label': 'z' });
+    });
+    expect(renders).toBe(afterInit);
+  });
+
+  it('订阅按 path 隔离：改无关字段不触发渲染，改本 List path 触发', () => {
+    let renders = 0;
+    const store = new FormStore().getForm();
+    render(
+      <FieldContext.Provider value={store}>
+        <List name="options">
+          {() => {
+            renders += 1;
+            return null;
+          }}
+        </List>
+      </FieldContext.Provider>,
+    );
+    const before = renders;
+
+    act(() => {
+      store.setFieldsValue({ other: 'x' });
+    });
+    expect(renders).toBe(before);
+
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }] });
+    });
+    expect(renders).toBeGreaterThan(before);
+  });
+});

package/src/Form/List.tsx

@@ -28,7 +28,7 @@ const List: React.FC<FormListProps> = ({
   children,
   initialValue = [],
 }) => {
-  const { getFieldValue, setFieldsValue, validateFields } =
+  const { getFieldValue, setFieldsValue, validateFields, subscribe } =
     useContext(FieldContext);
 
   // Normalize list name path
@@ -49,6 +49,9 @@ const List: React.FC<FormListProps> = ({
   // State for triggering re-renders
   const [, forceUpdate] = useState(0);
 
+  // 上一次渲染的行数：订阅回调里跳过行内编辑（长度未变）触发的无效重渲染
+  const listLengthRef = useRef(0);
+
   // Initialize list value - Fix: use prefixName instead of listNamePath
   useLayoutEffect(() => {
     const pathStr = prefixName.join('.');
@@ -59,6 +62,24 @@ const List: React.FC<FormListProps> = ({
     }
   }, [prefixName, initialValue, getFieldValue, setFieldsValue]);
 
+  // Subscribe to the list's own path: List re-reads the store only on its own render,
+  // so a whole-value replacement via form.setFieldsValue (row count changed) never
+  // re-rendered it and new rows never mounted. Field instances already refresh through
+  // registerFieldEntities, but the row count lives here. Aligned with rc-field-form.
+  useLayoutEffect(
+    () =>
+      subscribe?.(prefixName.join('.'), () => {
+        // isRelatedNamePath 双向前缀匹配，行内编辑（options.i.label）也命中本 watcher；
+        // 但 List 渲染输出只取决于行数，行内 Field 会经 registerFieldEntities 自行刷新，
+        // 长度未变则跳过，避免大列表逐键全列表重渲染
+        const next = getFieldValue?.(prefixName.join('.'));
+        const nextLen = Array.isArray(next) ? next.length : 0;
+        if (nextLen === listLengthRef.current) return;
+        forceUpdate((prev) => prev + 1);
+      }),
+    [prefixName, subscribe, getFieldValue],
+  );
+
   // Get current list value
   const getListValue = (): any[] => {
     const pathStr = prefixName.join('.');
@@ -120,7 +141,6 @@ const List: React.FC<FormListProps> = ({
         setFieldsValue?.({ [pathStr]: newList }, 'update' as any);
       }
       keyManager.id += 1;
-      forceUpdate((prev) => prev + 1);
     };
 
     const remove = (index: number | number[]) => {
@@ -137,7 +157,6 @@ const List: React.FC<FormListProps> = ({
       // Update list values
       const newList = currentValue.filter((_, i) => !indexSet.has(i));
       setFieldsValue?.({ [pathStr]: newList }, 'update' as any);
-      forceUpdate((prev) => prev + 1);
     };
 
     const moveFunc = (from: number, to: number) => {
@@ -160,6 +179,7 @@ const List: React.FC<FormListProps> = ({
       // Move list values
       const newList = move(currentValue, from, to);
       setFieldsValue?.({ [pathStr]: newList }, 'update' as any);
+      // 同长度重排不会触发上方订阅回调（长度未变被跳过），须显式重渲染
       forceUpdate((prev) => prev + 1);
     };
 
@@ -168,6 +188,7 @@ const List: React.FC<FormListProps> = ({
 
   // Build field list - removed useMemo, compute directly
   const listValue = getListValue();
+  listLengthRef.current = listValue.length;
 
   // Ensure enough keys
   while (keyManager.keys.length < listValue.length) {

package/src/Selector/style/index.less

@@ -54,8 +54,8 @@
       height: var(--yee-selector-large-height);
     }
 
-    &:focus-within,
-    &:focus {
+    &:not(@{pls}-disabled):focus-within,
+    &:not(@{pls}-disabled):focus {
       @{pls}-input-wrapper {
         z-index: 1;
         opacity: var(--yee-selector-input-focus-opacity);

package/src/style/color.css

@@ -29,7 +29,7 @@
   --yee-color-text: #39364e;
   --yee-color-text-secondary: #696969;
   --yee-color-text-description: #7c7c7c;
-  --yee-color-text-disabled: #bfbfbf;
+  --yee-color-text-disabled: #b8b8b8;
   --yee-color-text-highlight: #f58220;
   --yee-color-text-auxiliary: #d1d1d1;
   --yee-color-split: #e7e7e7;
@@ -37,7 +37,7 @@
   --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-disabled: #f5f5f5;
   --yee-color-bg-head: #f8f8f8;
   --yee-color-bg-rail: #f5f5f5;
   --yee-color-bg-fill: #ededed;
@@ -493,7 +493,7 @@
   --yee-checkbox-checked-after-border-color: #fff;
   --yee-checkbox-disabled-unchecked-bg-color: var(--yee-color-bg-disabled);
   --yee-checkbox-disabled-checked-bg-color: var(--yee-color-bg-disabled);
-  --yee-checkbox-disabled-checked-border-color: var(--yee-color-border);
+  --yee-checkbox-disabled-checked-border-color: var(--yee-color-text-disabled);
   --yee-checkbox-disabled-checked-after-border-color: var(
     --yee-color-text-disabled
   );
@@ -1223,7 +1223,7 @@
   --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 */
+  /* 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);
@@ -1339,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 */
 }

package/src/style/color.gemini.css

@@ -79,7 +79,7 @@
   /* ================= 背景 ================= */
   --yee-color-bg-layout: #f1f2f4;
   --yee-color-bg-head: #fff;
-  --yee-color-bg-disabled: #f2f3f5;
+  --yee-color-bg-disabled: #f5f5f5;
   /* 衍生:规范 --hover(极浅悬浮底) */
   --yee-color-bg-hover: rgba(109, 93, 252, 3.5%);
 

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.14.5";
+export const version = "0.14.7";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;