@canvas-components/react-components 0.3.21 → 0.3.23

package/README.md

@@ -1,292 +1,292 @@
-# @canvas-components/react-components
-
-`@canvas-components/react-components` 提供一组为表格适配层和业务表单场景准备的 React 基础组件，包含输入类组件、弹层、过渡、虚拟列表、分页和图片预览等能力。
-
-## 功能作用
-
-- 提供统一风格的 React 基础交互组件
-- 为 `@canvas-components/react-list-table` 提供编辑器、弹层和辅助 UI
-- 暴露 `Popup`、`Popconfirm`、`Transition`、`VirtualList` 等可独立复用组件
-
-## 安装方法
-
-```bash
-pnpm add @canvas-components/react-components react@^16.8 react-dom@^16.8
-```
-
-最低依赖版本：
-
-- `react >= 16.8.0`
-- `react-dom >= 16.8.0`
-- `Node.js >= 18.12.0`
-- `pnpm >= 9.0.0`
-
-## 使用方法
-
-```tsx
-import {
-  ReactHomeOutlined,
-  ReactIcon,
-  ReactPopconfirm,
-  ReactPopup,
-  ReactTransition,
-} from "@canvas-components/react-components";
-
-function Demo() {
-  return (
-    <>
-      <ReactIcon name="HomeOutlined" size={20} aria-label="首页" />
-      <ReactHomeOutlined size={20} aria-hidden="true" />
-      <ReactPopconfirm
-        title="确认删除这条记录？"
-        description="删除后不可恢复"
-        onConfirm={() => console.log("confirmed")}
-      >
-        <button type="button">删除</button>
-      </ReactPopconfirm>
-    </>
-  );
-}
-```
-
-### 表单组件
-
-组件可作为受控输入使用，也可以放进普通 HTML 表单或 `ReactForm` 中。以下示例组合文本框、可搜索选择器、日期选择器、复选框、按钮和确认气泡：
-
-```tsx
-import { useState } from "react";
-import {
-  ReactButton,
-  ReactCheckbox,
-  ReactDatePicker,
-  ReactFlex,
-  ReactInput,
-  ReactPopconfirm,
-  ReactSelect,
-} from "@canvas-components/react-components";
-
-export function ProfileForm() {
-  const [name, setName] = useState("林晨");
-  const [team, setTeam] = useState("design");
-  const [date, setDate] = useState("2026-10-18");
-  const [subscribed, setSubscribed] = useState(true);
-
-  return (
-    <form onSubmit={(event) => event.preventDefault()}>
-      <label>
-        姓名
-        <ReactInput value={name} onChange={(event) => setName(event.currentTarget.value)} />
-      </label>
-      <label>
-        团队
-        <ReactSelect
-          value={team}
-          showSearch
-          options={[
-            { value: "design", label: "设计团队" },
-            { value: "engineering", label: "研发团队" },
-          ]}
-          onChange={setTeam}
-        />
-      </label>
-      <ReactDatePicker value={date} onChange={setDate} />
-      <ReactCheckbox
-        checked={subscribed}
-        onChange={(event) => setSubscribed(event.currentTarget.checked)}
-      >
-        接收团队动态
-      </ReactCheckbox>
-      <ReactFlex gap={8}>
-        <ReactButton type="primary" htmlType="submit">保存</ReactButton>
-        <ReactPopconfirm title="确认删除？" onConfirm={() => setName("")}>
-          <ReactButton danger>删除</ReactButton>
-        </ReactPopconfirm>
-      </ReactFlex>
-    </form>
-  );
-}
-```
-
-文档站「React Components」目录为每个组件提供了独立示例，包含组件用途、属性说明和可复制的 JSX 用法；图标目录也列出全部具名图标。
-
-## 组件列表
-
-### 表单与选择
-
-- `ReactInput`
-- `ReactInputNumber`
-- `ReactInputRange`
-- `ReactCheckbox`
-- `ReactRadio`
-- `ReactSelect`
-- `ReactAutoComplete`
-- `ReactCascader`
-- `ReactTreeSelect`
-- `ReactColorPicker`
-- `ReactTextArea`
-- `ReactForm`
-
-`ReactInputNumber` 和 `ReactInputRange` 默认不使用鼠标滚轮调整数值；需要该行为时传入 `changeOnWheel`，例如 `<ReactInputNumber value={count} onChange={setCount} changeOnWheel />`。
-
-### 日期时间
-
-- `ReactDatePicker`
-- `ReactDateRangePicker`
-- `ReactDateTimePicker`
-- `ReactDateTimeRangePicker`
-- `ReactTimePicker`
-- `ReactTimeRangePicker`
-- `ReactMonthPicker`
-- `ReactQuarterPicker`
-- `ReactYearPicker`
-
-### 弹层与反馈
-
-- `ReactPopup`
-- `ReactDropdown`
-- `ReactModal`
-- `ReactDrawer`
-- `ReactPopconfirm`
-- `ReactTooltip`
-- `ReactTransition`
-- `reactMessage`
-
-### 展示、布局与交互
-
-- `ReactPagination`
-- `ReactVirtualList`
-- `ReactWaterfall`
-- `ReactResizablePanels`
-- `ReactImagePreview`
-- `ReactButton`
-- `ReactIcon` 与 831 个 Ant Design 风格具名 SVG 图标（例如 `ReactHomeOutlined`）
-- `ReactFlex` / `ReactRow` / `ReactCol`
-- `ReactFilterPanel`
-
-## 属性说明
-
-### `ReactDropdown`
-
-```tsx
-<ReactDropdown
-  items={[
-    { key: "json", label: "导出 JSON" },
-    { key: "pdf", label: "导出 PDF", description: "实验性功能" },
-  ]}
-  onSelect={(key) => exportFile(key)}
->
-  导出
-</ReactDropdown>
-```
-
-`children` 可省略；只传 `icon` 时触发按钮显示居中的图标，建议同时通过 `triggerProps` 提供 `aria-label`。菜单项支持禁用、图标、说明、拖拽事件和指针进入事件。可用 `open`、`defaultOpen`、`onOpenChange` 控制展开状态；支持方向键、Home、End 和 Esc。
-
-### `ReactPopupProps`
-
-| 属性 | 类型 | 说明 |
-| --- | --- | --- |
-| `open` | `boolean` | 是否显示 |
-| `anchorRef` | `RefObject<HTMLElement \| null>` | 锚点元素引用 |
-| `anchorRect` | `PopupAnchorRect \| null` | 外部传入的锚点矩形 |
-| `placement` | `"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight" \| "rightTop" \| "rightBottom" \| "leftTop" \| "leftBottom"` | 弹层位置 |
-| `offset` | `number` | 与锚点间距 |
-| `matchAnchorWidth` | `boolean` | 是否跟随锚点宽度 |
-| `minWidth` | `number` | 最小宽度 |
-| `zIndex` | `number` | 层级 |
-| `className` | `string` | 外层类名 |
-| `surfaceClassName` | `string` | 面板类名 |
-| `style` | `CSSProperties` | 外层样式 |
-| `surfaceStyle` | `CSSProperties` | 面板样式 |
-| `onOpenChange` | `(open: boolean) => void` | 打开状态变化回调 |
-| `children` | `ReactNode` | 弹层内容 |
-
-### `ReactPopconfirmProps`
-
-| 属性 | 类型 | 说明 |
-| --- | --- | --- |
-| `children` | `ReactNode` | 触发器内容 |
-| `title` | `ReactNode` | 标题 |
-| `description` | `ReactNode` | 描述文本 |
-| `open` / `defaultOpen` | `boolean` | 受控 / 非受控打开状态 |
-| `disabled` | `boolean` | 是否禁用 |
-| `placement` | `ReactPopconfirmPlacement` | 弹层位置 |
-| `offset` | `number` | 触发器与弹层间距 |
-| `zIndex` | `number` | 层级 |
-| `icon` | `ReactNode` | 自定义图标，传 `null` 隐藏默认图标 |
-| `okText` / `cancelText` | `ReactNode` | 按钮文案 |
-| `showCancel` | `boolean` | 是否显示取消按钮 |
-| `confirmLoading` | `boolean` | 是否强制确认按钮 loading |
-| `okButtonProps` / `cancelButtonProps` | `ReactPopconfirmButtonProps` | 按钮透传属性 |
-| `onConfirm` | `(event) => void \| Promise<void>` | 点击确认回调，支持异步 |
-| `onCancel` | `(event) => void` | 点击取消回调 |
-| `onOpenChange` | `(open: boolean) => void` | 状态变化回调 |
-| `className` / `style` | `string` / `CSSProperties` | 触发器样式 |
-| `popupClassName` / `popupStyle` | `string` / `CSSProperties` | 弹层面板样式 |
-
-### `ReactTransitionProps`
-
-| 属性 | 类型 | 说明 |
-| --- | --- | --- |
-| `show` | `boolean` | 是否显示内容 |
-| `name` | `string` | CSS 类名前缀 |
-| `duration` | `number \| { enter?: number; leave?: number }` | 动画时长 |
-| `appear` | `boolean` | 首次显示是否执行进入动画 |
-| `children` | `(state: ReactTransitionState) => ReactNode` | 根据阶段渲染内容 |
-
-### `ReactVirtualListProps<Item>`
-
-| 属性 | 类型 | 说明 |
-| --- | --- | --- |
-| `items` | `Item[]` | 数据列表 |
-| `height` | `number` | 视口高度 |
-| `itemHeight` | `number` | 固定项高度 |
-| `overscan` | `number` | 预渲染项数 |
-| `renderItem` | `(item, index, meta) => ReactNode` | 渲染函数 |
-| `itemKey` | `(item, index) => string \| number` | 列表 key |
-
-## 方法说明
-
-### `ReactTransition`
-
-| 导出 | 说明 |
-| --- | --- |
-| `ReactTransition` | 无包装过渡组件，离场动画结束后自动卸载 |
-| `useReactTransition` | 获取 Vue 风格过渡阶段和 className |
-
-### `ReactVirtualListRef`
-
-| 方法 | 说明 |
-| --- | --- |
-| `scrollTo` | 滚动到指定位置 |
-| `scrollToIndex` | 滚动到指定索引 |
-
-## 其他导出
-
-| 导出 | 说明 |
-| --- | --- |
-| `ReactContentScaleProvider` / `useReactContentScale` | 内容缩放上下文 |
-| `REACT_COMPONENT_PREFIX` | 统一类名前缀 |
-
-## 说明
-
-这个包的导出面比较大，输入类组件大多保持接近原生表单语义；如果需要精确字段，请优先查看对应组件的 `Props` 类型定义。
-
-图标组件使用包内自包含的 SVG 路径数据，不需要安装 Ant Design 或图标数据包。图标名称、尺寸、颜色、旋转和加载动画由 `ReactIconProps` 提供；也可以直接使用 `ReactHomeOutlined` 等具名组件。SVG 路径数据的上游许可和版权信息见随包发布的 `THIRD_PARTY_NOTICES.md`。
-
-### 通用折叠面板
-
-`ReactCollapsePanel` 使用现有方向图标，支持鼠标及 Enter / 空格展开折叠。折叠时保留内容节点和输入草稿。
-
-```tsx
-<ReactCollapsePanel title="位置与尺寸" defaultOpen>
-  <ReactInput placeholder="输入名称" />
-</ReactCollapsePanel>
-```
-
-通过 `open` 与 `onOpenChange` 控制展开状态；`disabled` 禁止切换，`contentClassName` 可定制内容区样式。默认收起。
-
-### 通用拖拽排序
-
-`ReactSortableList` 统一提供与 ListTable 工具栏列排序一致的浮动行、实时让位动画、边缘自动滚动和全屏浮层。通过 `items`（包含 `key`、`parentKey`、`label`）、`renderItem(item, handleProps)` 和 `onOrderChange(parentKey, orderedKeys)` 接入；把 `handleProps` 传给使用现有图标的拖拽手柄。`scrollContainerRef` 指向滚动容器，`disabled` 禁止拖拽，`dragThreshold` 默认 4px。Esc、失焦和指针取消会丢弃排序，放下才提交一次顺序。后续拖拽排序统一复用此组件。
-
-大量节点可传入 `virtual={{ height: 360, itemHeight: 34, overscan: 6 }}` 启用固定行高虚拟列表；组件使用内部滚动容器自动滚动，拖拽命中按完整列表计算，包含尚未挂载的节点。
+# @canvas-components/react-components
+
+`@canvas-components/react-components` 提供一组为表格适配层和业务表单场景准备的 React 基础组件，包含输入类组件、弹层、过渡、虚拟列表、分页和图片预览等能力。
+
+## 功能作用
+
+- 提供统一风格的 React 基础交互组件
+- 为 `@canvas-components/react-list-table` 提供编辑器、弹层和辅助 UI
+- 暴露 `Popup`、`Popconfirm`、`Transition`、`VirtualList` 等可独立复用组件
+
+## 安装方法
+
+```bash
+pnpm add @canvas-components/react-components react@^16.8 react-dom@^16.8
+```
+
+最低依赖版本：
+
+- `react >= 16.8.0`
+- `react-dom >= 16.8.0`
+- `Node.js >= 18.12.0`
+- `pnpm >= 9.0.0`
+
+## 使用方法
+
+```tsx
+import {
+  ReactHomeOutlined,
+  ReactIcon,
+  ReactPopconfirm,
+  ReactPopup,
+  ReactTransition,
+} from "@canvas-components/react-components";
+
+function Demo() {
+  return (
+    <>
+      <ReactIcon name="HomeOutlined" size={20} aria-label="首页" />
+      <ReactHomeOutlined size={20} aria-hidden="true" />
+      <ReactPopconfirm
+        title="确认删除这条记录？"
+        description="删除后不可恢复"
+        onConfirm={() => console.log("confirmed")}
+      >
+        <button type="button">删除</button>
+      </ReactPopconfirm>
+    </>
+  );
+}
+```
+
+### 表单组件
+
+组件可作为受控输入使用，也可以放进普通 HTML 表单或 `ReactForm` 中。以下示例组合文本框、可搜索选择器、日期选择器、复选框、按钮和确认气泡：
+
+```tsx
+import { useState } from "react";
+import {
+  ReactButton,
+  ReactCheckbox,
+  ReactDatePicker,
+  ReactFlex,
+  ReactInput,
+  ReactPopconfirm,
+  ReactSelect,
+} from "@canvas-components/react-components";
+
+export function ProfileForm() {
+  const [name, setName] = useState("林晨");
+  const [team, setTeam] = useState("design");
+  const [date, setDate] = useState("2026-10-18");
+  const [subscribed, setSubscribed] = useState(true);
+
+  return (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <label>
+        姓名
+        <ReactInput value={name} onChange={(event) => setName(event.currentTarget.value)} />
+      </label>
+      <label>
+        团队
+        <ReactSelect
+          value={team}
+          showSearch
+          options={[
+            { value: "design", label: "设计团队" },
+            { value: "engineering", label: "研发团队" },
+          ]}
+          onChange={setTeam}
+        />
+      </label>
+      <ReactDatePicker value={date} onChange={setDate} />
+      <ReactCheckbox
+        checked={subscribed}
+        onChange={(event) => setSubscribed(event.currentTarget.checked)}
+      >
+        接收团队动态
+      </ReactCheckbox>
+      <ReactFlex gap={8}>
+        <ReactButton type="primary" htmlType="submit">保存</ReactButton>
+        <ReactPopconfirm title="确认删除？" onConfirm={() => setName("")}>
+          <ReactButton danger>删除</ReactButton>
+        </ReactPopconfirm>
+      </ReactFlex>
+    </form>
+  );
+}
+```
+
+文档站「React Components」目录为每个组件提供了独立示例，包含组件用途、属性说明和可复制的 JSX 用法；图标目录也列出全部具名图标。
+
+## 组件列表
+
+### 表单与选择
+
+- `ReactInput`
+- `ReactInputNumber`
+- `ReactInputRange`
+- `ReactCheckbox`
+- `ReactRadio`
+- `ReactSelect`
+- `ReactAutoComplete`
+- `ReactCascader`
+- `ReactTreeSelect`
+- `ReactColorPicker`
+- `ReactTextArea`
+- `ReactForm`
+
+`ReactInputNumber` 和 `ReactInputRange` 默认不使用鼠标滚轮调整数值；需要该行为时传入 `changeOnWheel`，例如 `<ReactInputNumber value={count} onChange={setCount} changeOnWheel />`。
+
+### 日期时间
+
+- `ReactDatePicker`
+- `ReactDateRangePicker`
+- `ReactDateTimePicker`
+- `ReactDateTimeRangePicker`
+- `ReactTimePicker`
+- `ReactTimeRangePicker`
+- `ReactMonthPicker`
+- `ReactQuarterPicker`
+- `ReactYearPicker`
+
+### 弹层与反馈
+
+- `ReactPopup`
+- `ReactDropdown`
+- `ReactModal`
+- `ReactDrawer`
+- `ReactPopconfirm`
+- `ReactTooltip`
+- `ReactTransition`
+- `reactMessage`
+
+### 展示、布局与交互
+
+- `ReactPagination`
+- `ReactVirtualList`
+- `ReactWaterfall`
+- `ReactResizablePanels`
+- `ReactImagePreview`
+- `ReactButton`
+- `ReactIcon` 与 831 个 Ant Design 风格具名 SVG 图标（例如 `ReactHomeOutlined`）
+- `ReactFlex` / `ReactRow` / `ReactCol`
+- `ReactFilterPanel`
+
+## 属性说明
+
+### `ReactDropdown`
+
+```tsx
+<ReactDropdown
+  items={[
+    { key: "json", label: "导出 JSON" },
+    { key: "pdf", label: "导出 PDF", description: "实验性功能" },
+  ]}
+  onSelect={(key) => exportFile(key)}
+>
+  导出
+</ReactDropdown>
+```
+
+`children` 可省略；只传 `icon` 时触发按钮显示居中的图标，建议同时通过 `triggerProps` 提供 `aria-label`。菜单项支持禁用、图标、说明、拖拽事件和指针进入事件。可用 `open`、`defaultOpen`、`onOpenChange` 控制展开状态；支持方向键、Home、End 和 Esc。
+
+### `ReactPopupProps`
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `open` | `boolean` | 是否显示 |
+| `anchorRef` | `RefObject<HTMLElement \| null>` | 锚点元素引用 |
+| `anchorRect` | `PopupAnchorRect \| null` | 外部传入的锚点矩形 |
+| `placement` | `"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight" \| "rightTop" \| "rightBottom" \| "leftTop" \| "leftBottom"` | 弹层位置 |
+| `offset` | `number` | 与锚点间距 |
+| `matchAnchorWidth` | `boolean` | 是否跟随锚点宽度 |
+| `minWidth` | `number` | 最小宽度 |
+| `zIndex` | `number` | 层级 |
+| `className` | `string` | 外层类名 |
+| `surfaceClassName` | `string` | 面板类名 |
+| `style` | `CSSProperties` | 外层样式 |
+| `surfaceStyle` | `CSSProperties` | 面板样式 |
+| `onOpenChange` | `(open: boolean) => void` | 打开状态变化回调 |
+| `children` | `ReactNode` | 弹层内容 |
+
+### `ReactPopconfirmProps`
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `children` | `ReactNode` | 触发器内容 |
+| `title` | `ReactNode` | 标题 |
+| `description` | `ReactNode` | 描述文本 |
+| `open` / `defaultOpen` | `boolean` | 受控 / 非受控打开状态 |
+| `disabled` | `boolean` | 是否禁用 |
+| `placement` | `ReactPopconfirmPlacement` | 弹层位置 |
+| `offset` | `number` | 触发器与弹层间距 |
+| `zIndex` | `number` | 层级 |
+| `icon` | `ReactNode` | 自定义图标，传 `null` 隐藏默认图标 |
+| `okText` / `cancelText` | `ReactNode` | 按钮文案 |
+| `showCancel` | `boolean` | 是否显示取消按钮 |
+| `confirmLoading` | `boolean` | 是否强制确认按钮 loading |
+| `okButtonProps` / `cancelButtonProps` | `ReactPopconfirmButtonProps` | 按钮透传属性 |
+| `onConfirm` | `(event) => void \| Promise<void>` | 点击确认回调，支持异步 |
+| `onCancel` | `(event) => void` | 点击取消回调 |
+| `onOpenChange` | `(open: boolean) => void` | 状态变化回调 |
+| `className` / `style` | `string` / `CSSProperties` | 触发器样式 |
+| `popupClassName` / `popupStyle` | `string` / `CSSProperties` | 弹层面板样式 |
+
+### `ReactTransitionProps`
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `show` | `boolean` | 是否显示内容 |
+| `name` | `string` | CSS 类名前缀 |
+| `duration` | `number \| { enter?: number; leave?: number }` | 动画时长 |
+| `appear` | `boolean` | 首次显示是否执行进入动画 |
+| `children` | `(state: ReactTransitionState) => ReactNode` | 根据阶段渲染内容 |
+
+### `ReactVirtualListProps<Item>`
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `items` | `Item[]` | 数据列表 |
+| `height` | `number` | 视口高度 |
+| `itemHeight` | `number` | 固定项高度 |
+| `overscan` | `number` | 预渲染项数 |
+| `renderItem` | `(item, index, meta) => ReactNode` | 渲染函数 |
+| `itemKey` | `(item, index) => string \| number` | 列表 key |
+
+## 方法说明
+
+### `ReactTransition`
+
+| 导出 | 说明 |
+| --- | --- |
+| `ReactTransition` | 无包装过渡组件，离场动画结束后自动卸载 |
+| `useReactTransition` | 获取 Vue 风格过渡阶段和 className |
+
+### `ReactVirtualListRef`
+
+| 方法 | 说明 |
+| --- | --- |
+| `scrollTo` | 滚动到指定位置 |
+| `scrollToIndex` | 滚动到指定索引 |
+
+## 其他导出
+
+| 导出 | 说明 |
+| --- | --- |
+| `ReactContentScaleProvider` / `useReactContentScale` | 内容缩放上下文 |
+| `REACT_COMPONENT_PREFIX` | 统一类名前缀 |
+
+## 说明
+
+这个包的导出面比较大，输入类组件大多保持接近原生表单语义；如果需要精确字段，请优先查看对应组件的 `Props` 类型定义。
+
+图标组件使用包内自包含的 SVG 路径数据，不需要安装 Ant Design 或图标数据包。图标名称、尺寸、颜色、旋转和加载动画由 `ReactIconProps` 提供；也可以直接使用 `ReactHomeOutlined` 等具名组件。SVG 路径数据的上游许可和版权信息见随包发布的 `THIRD_PARTY_NOTICES.md`。
+
+### 通用折叠面板
+
+`ReactCollapsePanel` 使用现有方向图标，支持鼠标及 Enter / 空格展开折叠。折叠时保留内容节点和输入草稿。
+
+```tsx
+<ReactCollapsePanel title="位置与尺寸" defaultOpen>
+  <ReactInput placeholder="输入名称" />
+</ReactCollapsePanel>
+```
+
+通过 `open` 与 `onOpenChange` 控制展开状态；`disabled` 禁止切换，`contentClassName` 可定制内容区样式。默认收起。
+
+### 通用拖拽排序
+
+`ReactSortableList` 统一提供与 ListTable 工具栏列排序一致的浮动行、实时让位动画、边缘自动滚动和全屏浮层。通过 `items`（包含 `key`、`parentKey`、`label`）、`renderItem(item, handleProps)` 和 `onOrderChange(parentKey, orderedKeys)` 接入；把 `handleProps` 传给使用现有图标的拖拽手柄。`scrollContainerRef` 指向滚动容器，`disabled` 禁止拖拽，`dragThreshold` 默认 4px。Esc、失焦和指针取消会丢弃排序，放下才提交一次顺序。后续拖拽排序统一复用此组件。
+
+大量节点可传入 `virtual={{ height: 360, itemHeight: 34, overscan: 6 }}` 启用固定行高虚拟列表；组件使用内部滚动容器自动滚动，拖拽命中按完整列表计算，包含尚未挂载的节点。

package/THIRD_PARTY_NOTICES.md

@@ -1,30 +1,30 @@
-# 第三方版权声明
-
-## Ant Design Icons
-
-本包通过 `@canvas-components/icons` 使用 Ant Design Icons 项目的 SVG 图标路径数据。许可声明随共享图标包发布。
-
-```text
-MIT LICENSE
-
-Copyright (c) 2018-present Ant UED, https://xtech.antfin.com/
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-```
+# 第三方版权声明
+
+## Ant Design Icons
+
+本包通过 `@canvas-components/icons` 使用 Ant Design Icons 项目的 SVG 图标路径数据。许可声明随共享图标包发布。
+
+```text
+MIT LICENSE
+
+Copyright (c) 2018-present Ant UED, https://xtech.antfin.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```

package/dist/index.cjs

@@ -2583,6 +2583,17 @@ function ReactFilterPanel(props) {
   const [tab, setTab] = React.useState(resolveTab(request?.value));
   const [options, setOptions] = React.useState(request?.options ?? []);
   const [loading, setLoading] = React.useState(Boolean(request?.loadOptions));
+  const pendingApplyRef = React.useRef(null);
+  const applyFrameRef = React.useRef(null);
+  const applyTimerRef = React.useRef(null);
+  const cancelPendingApply = () => {
+    if (applyFrameRef.current !== null) cancelAnimationFrame(applyFrameRef.current);
+    if (applyTimerRef.current !== null) clearTimeout(applyTimerRef.current);
+    applyFrameRef.current = null;
+    applyTimerRef.current = null;
+    pendingApplyRef.current = null;
+  };
+  React.useEffect(() => cancelPendingApply, [request]);
   const conditionListRef = React.useRef(null);
   const [conditionListOverflowing, setConditionListOverflowing] = React.useState(false);
   React.useEffect(() => {
@@ -2657,12 +2668,30 @@ function ReactFilterPanel(props) {
     keys.forEach((key) => checked ? next.add(key) : next.delete(key));
     const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
     setDraft(value);
-    if (applyImmediately && request.filterOptionImmediateApply) request.onApply(value);
+    cancelPendingApply();
+    if (applyImmediately && request.filterOptionImmediateApply) {
+      pendingApplyRef.current = () => request.onApply(value);
+      applyFrameRef.current = requestAnimationFrame(() => {
+        applyFrameRef.current = null;
+        applyTimerRef.current = setTimeout(() => {
+          const pending = pendingApplyRef.current;
+          cancelPendingApply();
+          pending?.();
+        }, 0);
+      });
+    }
   };
   const apply = () => {
+    cancelPendingApply();
     request.onApply({ ...draft, filterType: tab });
     request.onClose();
   };
+  const close = () => {
+    const pending = pendingApplyRef.current;
+    cancelPendingApply();
+    pending?.();
+    request.onClose();
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     ReactPopup,
     {
@@ -2672,7 +2701,7 @@ function ReactFilterPanel(props) {
       matchAnchorWidth: false,
       minWidth: 300,
       onOpenChange: (open) => {
-        if (!open) request.onClose();
+        if (!open) close();
       },
       surfaceStyle: { width: 300, height: 460, padding: 12, overflow: "hidden", boxSizing: "border-box" },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
@@ -2809,6 +2838,7 @@ function ReactFilterPanel(props) {
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-footer-actions", style: footerActionsStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
+              cancelPendingApply();
               request.onReset();
               request.onClose();
             }, children: request.texts.resetAction }),

package/dist/index.js

@@ -2562,6 +2562,17 @@ function ReactFilterPanel(props) {
   const [tab, setTab] = useState(resolveTab(request?.value));
   const [options, setOptions] = useState(request?.options ?? []);
   const [loading, setLoading] = useState(Boolean(request?.loadOptions));
+  const pendingApplyRef = useRef(null);
+  const applyFrameRef = useRef(null);
+  const applyTimerRef = useRef(null);
+  const cancelPendingApply = () => {
+    if (applyFrameRef.current !== null) cancelAnimationFrame(applyFrameRef.current);
+    if (applyTimerRef.current !== null) clearTimeout(applyTimerRef.current);
+    applyFrameRef.current = null;
+    applyTimerRef.current = null;
+    pendingApplyRef.current = null;
+  };
+  useEffect(() => cancelPendingApply, [request]);
   const conditionListRef = useRef(null);
   const [conditionListOverflowing, setConditionListOverflowing] = useState(false);
   useEffect(() => {
@@ -2636,12 +2647,30 @@ function ReactFilterPanel(props) {
     keys.forEach((key) => checked ? next.add(key) : next.delete(key));
     const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
     setDraft(value);
-    if (applyImmediately && request.filterOptionImmediateApply) request.onApply(value);
+    cancelPendingApply();
+    if (applyImmediately && request.filterOptionImmediateApply) {
+      pendingApplyRef.current = () => request.onApply(value);
+      applyFrameRef.current = requestAnimationFrame(() => {
+        applyFrameRef.current = null;
+        applyTimerRef.current = setTimeout(() => {
+          const pending = pendingApplyRef.current;
+          cancelPendingApply();
+          pending?.();
+        }, 0);
+      });
+    }
   };
   const apply = () => {
+    cancelPendingApply();
     request.onApply({ ...draft, filterType: tab });
     request.onClose();
   };
+  const close = () => {
+    const pending = pendingApplyRef.current;
+    cancelPendingApply();
+    pending?.();
+    request.onClose();
+  };
   return /* @__PURE__ */ jsx(
     ReactPopup,
     {
@@ -2651,7 +2680,7 @@ function ReactFilterPanel(props) {
       matchAnchorWidth: false,
       minWidth: 300,
       onOpenChange: (open) => {
-        if (!open) request.onClose();
+        if (!open) close();
       },
       surfaceStyle: { width: 300, height: 460, padding: 12, overflow: "hidden", boxSizing: "border-box" },
       children: /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
@@ -2788,6 +2817,7 @@ function ReactFilterPanel(props) {
           ) : null,
           /* @__PURE__ */ jsxs("div", { className: "react-filter-panel-footer-actions", style: footerActionsStyle, children: [
             /* @__PURE__ */ jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
+              cancelPendingApply();
               request.onReset();
               request.onClose();
             }, children: request.texts.resetAction }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/react-components",
-  "version": "0.3.21",
+  "version": "0.3.23",
   "description": "Shared React UI primitives for canvas-components adapters.",
   "license": "MIT",
   "type": "module",
@@ -33,7 +33,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@canvas-components/icons": "0.1.1"
+    "@canvas-components/icons": "0.1.2"
   },
   "scripts": {
     "build": "tsup --config tsup.config.ts"