@rainbow-oh/yee-c 0.14.6 → 0.14.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.14.6",
+  "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/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.6";
+export const version = "0.14.7";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;