@rainbow-oh/yee-c 0.14.6 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.14.6",
+  "version": "0.15.0",
   "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/index.ts

@@ -29,9 +29,13 @@ Form.List = List;
 
 export type {
   FieldGroupProps,
+  FieldProps,
   FieldStatus,
   FieldStatusData,
+  FieldTooltip,
   FormInstance,
+  FormListField,
+  FormListOperation,
   FormListProps,
   FormProps,
   Rule as FormRule,

package/src/Input/style/index.less

@@ -45,6 +45,7 @@
     box-shadow: none;
     height: auto;
     padding: 0;
+    border-radius: 0;
   }
 
   &-inner {

package/src/InputNumber/style/index.less

@@ -13,6 +13,7 @@
   border-radius: var(--yee-input-border-radius, 4px);
   background-color: var(--yee-input-content-bg-color);
   transition: all 0.3s;
+  overflow: hidden;
 
   &:not(@{pls}-disabled):hover {
     border-color: var(--yee-input-hover-border-color);

package/src/Select/hooks/useSelectKeyboard.ts

@@ -261,8 +261,13 @@ export default function useSelectKeyboard({
         handleEnter();
         break;
       case 'Escape':
-        event.preventDefault();
-        handleEscape();
+        // Only swallow Escape while open so outer layers (e.g. a Dialog's
+        // useEsc listening on document) still receive it when closed.
+        if (open) {
+          event.preventDefault();
+          event.stopPropagation();
+          handleEscape();
+        }
         break;
       default:
     }

package/src/Selector/selector.tsx

@@ -284,12 +284,17 @@ const Selector = React.forwardRef(
         aria-disabled={disabled || undefined}
         onKeyDown={(event) => {
           if (disabled) return;
-          // For non-searchable single select, handle Enter to open dropdown
-          if (!searchable && event.key === 'Enter' && !open) {
-            onOpenChange?.(true);
+          // Enter opens the dropdown while it is closed
+          if (event.key === 'Enter' && !open && onOpenChange) {
+            event.preventDefault();
+            onOpenChange(true);
+          }
+          // Input forwards this handler for its own keydowns; handling them
+          // here too would fire the handler twice per keypress. Only handle
+          // events that originate on the container (non-searchable focus).
+          if (event.target !== inputRef.current) {
+            externalOnKeyDown?.(event as React.KeyboardEvent<HTMLInputElement>);
           }
-          // Also call external onKeyDown if provided
-          externalOnKeyDown?.(event as React.KeyboardEvent<HTMLInputElement>);
         }}
         ref={ref}
       >

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/TableSelect/hooks/useTableSelectKeyboard.ts

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react';
+import type { TableSelectDataType } from '../interface';
+
+type KeyType = string | number;
+
+interface UseTableSelectKeyboardParams {
+  open: boolean;
+  disabled?: boolean;
+  dataSource: Array<TableSelectDataType>;
+  rowKey: string | ((record: any) => string);
+  selectionType: 'radio' | 'checkbox';
+  selectedRowKeys: Array<KeyType>;
+  searchValue: string;
+  onSelect: (keys: Array<KeyType>, rows: Array<TableSelectDataType>) => void;
+  onClose: () => void;
+}
+
+/**
+ * Keyboard navigation for the popup table. The highlight is positional (like a
+ * hover cursor): `activeRow` is a rendered row index, and Space selects the
+ * record displayed there. The rendered order is the filter→sort→paginate
+ * result inside Table and is not derivable from `dataSource`, so the row count
+ * and the highlighted row's key are both read from the popup DOM.
+ */
+export default function useTableSelectKeyboard({
+  open,
+  disabled,
+  dataSource,
+  rowKey,
+  selectionType,
+  selectedRowKeys,
+  searchValue,
+  onSelect,
+  onClose,
+}: UseTableSelectKeyboardParams) {
+  const popupRef = useRef<HTMLDivElement | null>(null);
+  // 1-based index of the highlighted row (`tr[data-row-index]`), 0 = none.
+  const [activeRow, setActiveRow] = useState(0);
+
+  useEffect(() => {
+    setActiveRow(0);
+  }, [open, searchValue]);
+
+  const getRecordKey = (item: TableSelectDataType) =>
+    typeof rowKey === 'function' ? rowKey(item) : item[rowKey];
+
+  const getRowCount = () =>
+    popupRef.current?.querySelectorAll('tr[data-row-index]').length ?? 0;
+
+  useEffect(() => {
+    if (!open || activeRow < 1) return;
+    const rowEl = popupRef.current?.querySelector(
+      `tr[data-row-index="${activeRow}"]`,
+    ) as HTMLElement | null;
+    if (!rowEl) return;
+    // Manual scroll instead of scrollIntoView: the popup renders in a portal,
+    // and scrollIntoView would scroll the page as well as the popup.
+    let parent = rowEl.parentElement;
+    while (parent && parent !== popupRef.current) {
+      const { overflowY } = window.getComputedStyle(parent);
+      if (
+        /(auto|scroll)/.test(overflowY) &&
+        parent.scrollHeight > parent.clientHeight
+      ) {
+        const parentRect = parent.getBoundingClientRect();
+        const rowRect = rowEl.getBoundingClientRect();
+        if (rowRect.bottom > parentRect.bottom) {
+          parent.scrollTop += rowRect.bottom - parentRect.bottom;
+        } else if (rowRect.top < parentRect.top) {
+          parent.scrollTop -= parentRect.top - rowRect.top;
+        }
+        return;
+      }
+      parent = parent.parentElement;
+    }
+  }, [activeRow, open]);
+
+  const selectActiveRow = () => {
+    const rowEl = popupRef.current?.querySelector(
+      `tr[data-row-index="${activeRow}"]`,
+    );
+    const inputEl = rowEl?.querySelector(
+      'input[type="radio"],input[type="checkbox"]',
+    ) as HTMLInputElement | null;
+    if (!inputEl || inputEl.disabled) return;
+
+    const record = dataSource.find(
+      (item) => String(getRecordKey(item)) === inputEl.value,
+    );
+    if (!record) return;
+    const key = getRecordKey(record);
+
+    if (selectionType === 'radio') {
+      // Same shape as the click path: arrays, normalized by the consumer.
+      onSelect([key], [record]);
+      onClose();
+      return;
+    }
+
+    const checked = selectedRowKeys.some((k) => String(k) === String(key));
+    const nextKeys = checked
+      ? selectedRowKeys.filter((k) => String(k) !== String(key))
+      : [...selectedRowKeys, key];
+    const rows = dataSource.filter((item) =>
+      nextKeys.some((k) => String(getRecordKey(item)) === String(k)),
+    );
+    onSelect(nextKeys, rows);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || disabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setActiveRow(Math.min(activeRow + 1, getRowCount()));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setActiveRow(activeRow <= 1 ? getRowCount() : activeRow - 1);
+        break;
+      case ' ':
+        // With nothing highlighted, space keeps its native input behavior.
+        if (activeRow > 0) {
+          event.preventDefault();
+          selectActiveRow();
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        // Stop the event from reaching outer layers (e.g. a Dialog's useEsc
+        // listening on document) so only the dropdown closes.
+        event.stopPropagation();
+        onClose();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return { popupRef, activeRow, handleKeyDown };
+}

package/src/TableSelect/index.en-US.md

@@ -31,45 +31,45 @@ A component for selecting one or more options from table data, combining feature
 
 ### TableSelectProps
 
-| Property | Type | Description | Default Value |
-| --- | --- | --- | --- |
-| prefixCls | `string` | Custom class name prefix | `'yee-table-select'` |
-| className | `string` | Root element class name | - |
-| style | `React.CSSProperties` | Root element inline styles | - |
-| rowKey | `string \| ((record: any) => string)` | Unique identifier field name for data | `'id'` |
-| columns | `Array<any>` | Table column configuration | - |
-| dataSource | `Array<InDataType>` | Data source | - |
-| rowSelection | `RowSelectionType` | Row selection configuration | - |
-| value | `SelectionKeyType \| SelectionKeyType[]` | Controlled value | - |
-| defaultValue | `SelectionKeyType \| SelectionKeyType[]` | Default value | - |
-| disabled | `boolean` | Whether disabled | - |
-| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
-| placement | `'bottomLeft' \| 'topLeft'` | Popup placement | `'bottomLeft'` |
-| searchable | `boolean` | Whether searchable | `true` |
-| searchOnInput | `boolean` | Whether to search while typing | `true` |
-| allowClear | `boolean` | Whether allow clear | `true` |
-| closable | `boolean` | Whether tags are closable | `true` |
-| placeholder | `string` | Placeholder text | - |
-| optionLabelProp | `string \| ((option: InDataType) => string)` | Option label property | `'name'` |
-| type | `'radio' \| 'checkbox'` | Selection type | `'radio'` |
-| options | `TagType[]` | Preset options | - |
-| isShowFilter | `boolean` | Whether to show filter (All/Selected for multiple) | `true` |
-| containerId | `string` | Container ID (for popup mounting) | - |
-| io | `'out'` | Input direction | - |
-| onChange | `(keys, data, checked, changeData) => void` | Selection change callback | - |
-| onSearch | `(value: string, e?) => void` | Search callback | - |
-| onOpenChange | `(open: boolean) => void` | Popup state change callback | - |
+| Property        | Type                                                  | Description                                                | Default Value        |
+| --------------- | ----------------------------------------------------- | ---------------------------------------------------------- | -------------------- |
+| prefixCls       | `string`                                              | Custom class name prefix                                   | `'yee-table-select'` |
+| className       | `string`                                              | Root element class name                                    | -                    |
+| style           | `React.CSSProperties`                                 | Root element inline styles                                 | -                    |
+| rowKey          | `string \| ((record: any) => string)`                 | Unique identifier field name for data                      | `'id'`               |
+| columns         | `Array<any>`                                          | Table column configuration                                 | -                    |
+| dataSource      | `Array<TableSelectDataType>`                          | Data source                                                | -                    |
+| rowSelection    | `RowSelectionType`                                    | Row selection configuration                                | -                    |
+| value           | `SelectionKeyType \| SelectionKeyType[]`              | Controlled value                                           | -                    |
+| defaultValue    | `SelectionKeyType \| SelectionKeyType[]`              | Default value                                              | -                    |
+| disabled        | `boolean`                                             | Whether disabled                                           | -                    |
+| loading         | `boolean`                                             | Whether data is loading; displays a gray loading indicator | `false`              |
+| placement       | `'bottomLeft' \| 'topLeft'`                           | Popup placement                                            | `'bottomLeft'`       |
+| searchable      | `boolean`                                             | Whether searchable                                         | `true`               |
+| searchOnInput   | `boolean`                                             | Whether to search while typing                             | `true`               |
+| allowClear      | `boolean`                                             | Whether allow clear                                        | `true`               |
+| closable        | `boolean`                                             | Whether tags are closable                                  | `true`               |
+| placeholder     | `string`                                              | Placeholder text                                           | -                    |
+| optionLabelProp | `string \| ((option: TableSelectDataType) => string)` | Option label property                                      | `'name'`             |
+| type            | `'radio' \| 'checkbox'`                               | Selection type                                             | `'radio'`            |
+| options         | `TagType[]`                                           | Preset options                                             | -                    |
+| isShowFilter    | `boolean`                                             | Whether to show filter (All/Selected for multiple)         | `true`               |
+| containerId     | `string`                                              | Container ID (for popup mounting)                          | -                    |
+| io              | `'out'`                                               | Input direction                                            | -                    |
+| onChange        | `(keys, data, checked, changeData) => void`           | Selection change callback                                  | -                    |
+| onSearch        | `(value: string, e?) => void`                         | Search callback                                            | -                    |
+| onOpenChange    | `(open: boolean) => void`                             | Popup state change callback                                | -                    |
 
 ### RowSelectionType
 
 Row selection configuration, inherited from Table component's RowSelectionType.
 
-| Property | Type | Description | Default Value |
-| --- | --- | --- | --- |
-| type | `'radio' \| 'checkbox'` | Single/multiple selection | - |
-| selectedRowKeys | `Array<SelectionKeyType> \| SelectionKeyType` | (Controlled) selected row keys | - |
-| defaultSelectedRowKeys | `Array<SelectionKeyType> \| SelectionKeyType` | Default selected row keys | - |
-| onChange | `(selectedRowKeys, selectedRows) => void` | Callback when selection changes | - |
+| Property               | Type                                          | Description                     | Default Value |
+| ---------------------- | --------------------------------------------- | ------------------------------- | ------------- |
+| type                   | `'radio' \| 'checkbox'`                       | Single/multiple selection       | -             |
+| selectedRowKeys        | `Array<SelectionKeyType> \| SelectionKeyType` | (Controlled) selected row keys  | -             |
+| defaultSelectedRowKeys | `Array<SelectionKeyType> \| SelectionKeyType` | Default selected row keys       | -             |
+| onChange               | `(selectedRowKeys, selectedRows) => void`     | Callback when selection changes | -             |
 
 ## Methods
 
@@ -77,17 +77,20 @@ Row selection configuration, inherited from Table component's RowSelectionType.
 
 InternalTable is an internal component of TableSelect and typically doesn't need to be used directly.
 
-| Property | Type | Description | Default Value |
-| --- | --- | --- | --- |
-| rowKey | `string` | Unique identifier field name for data | - |
-| columns | `Array<any>` | Table column configuration | - |
-| dataSource | `Array<InDataType>` | Data source | - |
-| rowSelection | `RowSelectionType` | Row selection configuration | - |
-| type | `'radio' \| 'checkbox'` | Selection type | - |
-| value | `SelectedKeyType \| Array<SelectedKeyType>` | Selected value | - |
-| isShowFilter | `boolean` | Whether to show filter | `true` |
-| visible | `boolean` | Whether popup is visible | - |
+| Property     | Type                                        | Description                                                            | Default Value |
+| ------------ | ------------------------------------------- | ---------------------------------------------------------------------- | ------------- |
+| rowKey       | `string`                                    | Unique identifier field name for data                                  | -             |
+| columns      | `Array<any>`                                | Table column configuration                                             | -             |
+| dataSource   | `Array<TableSelectDataType>`                | Data source                                                            | -             |
+| rowSelection | `RowSelectionType`                          | Row selection configuration                                            | -             |
+| type         | `'radio' \| 'checkbox'`                     | Selection type                                                         | -             |
+| value        | `SelectedKeyType \| Array<SelectedKeyType>` | Selected value                                                         | -             |
+| isShowFilter | `boolean`                                   | Whether to show filter                                                 | `true`        |
+| visible      | `boolean`                                   | Whether popup is visible                                               | -             |
+| popupRef     | `React.RefObject<HTMLDivElement \| null>`   | Ref to the popup root element, used internally for keyboard navigation | -             |
 
 ## Notes
 
+- When the dropdown is open, keyboard is supported: `↑`/`↓` move the highlight across rows, `Space` selects/toggles the highlighted row, `Esc` closes the dropdown; the text caret always stays in the input; press `Enter` while closed to open the dropdown
+
 - Adapted for mobile (popup constrained with max-width/height and scrollable)