@nocobase/client-v2 2.1.0-beta.9 → 2.2.0-beta.1

package/es/components/form/filter/CollectionFilter.d.ts

@@ -0,0 +1,51 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { Collection } from '@nocobase/flow-engine';
+import { type ButtonProps, type PopoverProps } from 'antd';
+import React, { FC } from 'react';
+import { CompiledFilter } from './useFilterActionProps';
+export interface CollectionFilterProps {
+    /** Collection whose fields drive the filter row's field picker. */
+    collection: Collection | undefined;
+    /** Previously compiled filter param used to seed the editable filter group. */
+    initialValue?: CompiledFilter;
+    /** Called on Submit or Reset with the compiled NocoBase filter param (`undefined` when cleared). */
+    onChange: (filter: CompiledFilter) => void;
+    /** Translator. Defaults to identity. */
+    t?: (key: string, options?: Record<string, any>) => string;
+    /** Whitelist of root-level field names to expose. */
+    filterableFieldNames?: string[];
+    /**
+     * Blacklist of root-level field names to drop. Mirrors v1's `nonfilterable: [...]` on `Filter.Action`. When both `filterableFieldNames` and this prop are supplied, both apply (final = whitelist ∩ ¬blacklist).
+     */
+    nonfilterableFieldNames?: string[];
+    /**
+     * Bypass the `filterableFieldNames` whitelist.
+     *
+     * Legacy escape hatch — prefer adjusting `filterableFieldNames` / `nonfilterableFieldNames` instead.
+     */
+    noIgnore?: boolean;
+    /** Override the trigger button's label. Defaults to `t('Filter')`, or the v1-style `t('{{count}} filter items', { count })` when conditions are present. */
+    buttonText?: React.ReactNode;
+    /** Swap the default `t('Filter')` label for v1's `t('{{count}} filter items', { count })` when conditions are present. Defaults to `true`. */
+    showCount?: boolean;
+    /** Pass-through props for the antd `<Popover>`. */
+    popoverProps?: Omit<PopoverProps, 'open' | 'onOpenChange' | 'content' | 'children'>;
+    /** Pass-through props for the trigger `<Button>`. */
+    buttonProps?: Omit<ButtonProps, 'icon' | 'type' | 'children' | 'onClick'>;
+    /** Min-width applied to the popover body. Defaults to `520`. */
+    popoverMinWidth?: number;
+}
+/**
+ * Filter button bound to a collection. Renders an antd `<Popover>` over a `<Button>`; the popover hosts a multi-condition filter form (field picker, operator, value). Submit dismisses the popover and emits the compiled filter via `onChange`; Reset keeps the popover open and emits `undefined`.
+ *
+ * Pair with `<ExtendCollectionsProvider>` when the target collection is client-only (e.g. a `schema-only` server collection that isn't auto-published to the v2 data source).
+ */
+export declare const CollectionFilter: FC<CollectionFilterProps>;
+export default CollectionFilter;

package/es/components/form/filter/CollectionFilterItem.d.ts

@@ -0,0 +1,53 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { Collection } from '@nocobase/flow-engine';
+import React, { FC } from 'react';
+export interface CollectionFilterItemValue {
+    path: string;
+    operator: string;
+    /** Operator-dependent — string for default ops, descriptor for $date*, etc. */
+    value: any;
+}
+export interface CollectionFilterItemProps {
+    /** Reactive filter row managed by the parent `FilterContainer`. */
+    value: CollectionFilterItemValue;
+    /** Target collection whose fields populate the field selector. */
+    collection: Collection;
+    /** Whitelist of field names to expose; empty/undefined means all filterable fields. */
+    filterableFieldNames?: string[];
+    /**
+     * Blacklist of field names to drop. Mirrors v1's `nonfilterable: [...]` on `Filter.Action`. When both whitelist and blacklist are supplied, both apply (final = whitelist ∩ ¬blacklist).
+     */
+    nonfilterableFieldNames?: string[];
+    /**
+     * Bypass the `filterableFieldNames` whitelist (matches the legacy FilterItem `noIgnore`).
+     *
+     * Legacy escape hatch — prefer adjusting `filterableFieldNames` / `nonfilterableFieldNames` instead.
+     */
+    noIgnore?: boolean;
+    /** Translator; defaults to identity so callers can omit it. */
+    t?: (key: string) => string;
+    /** Optional v2 app registry used to resolve plugin-provided operator components. */
+    app?: {
+        getComponent?: (name: string) => React.ComponentType<any> | undefined;
+    };
+}
+/**
+ * Filter row bound directly to a `Collection`, with no `FlowModel` dependency. Use this from settings pages or other surfaces that need a filter UI but don't have (and shouldn't synthesise) a block model just to satisfy `FilterItem`. Pair with `FilterContainer` via either an inline wrapper or `createCollectionFilterItem(collection)`.
+ *
+ * The field selector is an antd `Cascader`, mirroring v1's `Filter.Action` so association fields (belongsTo / m2o / etc.) can be drilled into — picking `user.username` is a first-class action. The value renderer is delegated to `FilterValueInput`, which dispatches to interface-specific controls (the smart date picker for `$date*` operators, tag-mode Select for array/enum, etc.) the same way v1's `DynamicComponent` did.
+ */
+export declare const CollectionFilterItem: FC<CollectionFilterItemProps>;
+/**
+ * Convenience factory returning a `FilterContainer`-compatible `FilterItem` component bound to a specific collection. Avoids creating an inline closure on every parent render, which would otherwise reset any focused inner antd control.
+ */
+export declare function createCollectionFilterItem(collection: Collection, bound?: Pick<CollectionFilterItemProps, 'filterableFieldNames' | 'nonfilterableFieldNames' | 'noIgnore' | 't' | 'app'>): React.FC<{
+    value: CollectionFilterItemValue;
+}>;
+export default CollectionFilterItem;

package/es/components/form/filter/CollectionFilterPanel.d.ts

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { Collection } from '@nocobase/flow-engine';
+import React from 'react';
+import { type CompiledFilter } from './useFilterActionProps';
+export interface CollectionFilterPanelRef {
+    getFilter: () => CompiledFilter;
+    reset: () => void;
+}
+export interface CollectionFilterPanelProps {
+    /** Collection whose fields drive the filter row's field picker. */
+    collection: Collection | undefined;
+    /** Previously compiled filter param used to seed the editable filter group. */
+    initialValue?: CompiledFilter;
+    /** Called when the condition group structure changes or `reset()` is invoked. */
+    onChange?: (filter: CompiledFilter) => void;
+    /** Translator. Defaults to identity. */
+    t?: (key: string, options?: Record<string, unknown>) => string;
+    /** Whitelist of root-level field names to expose. */
+    filterableFieldNames?: string[];
+    /**
+     * Blacklist of root-level field names to drop. Mirrors v1's `nonfilterable: [...]` on `Filter.Action`.
+     */
+    nonfilterableFieldNames?: string[];
+    /** Bypass the `filterableFieldNames` whitelist. */
+    noIgnore?: boolean;
+}
+/**
+ * Inline collection filter editor for forms and drawers. Unlike `CollectionFilter`, this does not render a trigger button, popover, or nested `<form>`, so it can safely live inside an antd form and be submitted by the outer drawer action.
+ */
+export declare const CollectionFilterPanel: React.ForwardRefExoticComponent<CollectionFilterPanelProps & React.RefAttributes<CollectionFilterPanelRef>>;
+export default CollectionFilterPanel;

package/es/components/form/filter/DateFilterDynamicComponent.d.ts

@@ -0,0 +1,57 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { type Dayjs } from 'dayjs';
+import React from 'react';
+/**
+ * Value shape used by NocoBase's `$date*` filter operators. Two flavours:
+ *
+ * - For "Exact day" mode: a **formatted string** at the granularity of the picker — `"2026-02-15"` (date), `"2026-02"` (month), `"2026"` (year), `"2026-Q1"` (quarter). For `$dateBetween` (`isRange`), a `[string, string]` tuple. Strings (not Dayjs) so the value serializes verbatim into the query string the same way v1 does (`filter=%7B%22$and%22:[%7B%22lockedTs%22:%7B%22$dateOn%22:%222026-02%22%7D%7D]%7D`).
+ * - For relative modes (Today / Past 3 days / This Week / …): a `{ type, number?, unit? }` descriptor that the server resolves to a concrete range at query time.
+ */
+export type DateFilterValue = string | [string, string] | {
+    type: string;
+    number?: number;
+    unit?: 'day' | 'week' | 'month' | 'year';
+} | null | undefined;
+export interface DateFilterDynamicComponentProps {
+    value?: DateFilterValue;
+    onChange?: (value: DateFilterValue) => void;
+    /** `true` for `$dateBetween`; renders a `DatePicker.RangePicker`. */
+    isRange?: boolean;
+    /**
+     * Translator. Defaults to identity so callers can omit it when running outside a translation context (tests, storybook).
+     */
+    t?: (key: string) => string;
+}
+type PickerMode = 'date' | 'month' | 'quarter' | 'year';
+/**
+ * The exact format strings NocoBase's `$date*` server operators expect per picker granularity. Mirrors v1's `getPickerFormat` output under `underFilter=true`, so the URL-encoded query stays identical.
+ *
+ * Exported for unit tests and for downstream callers that need to parse / format `$date*` values outside this component.
+ */
+export declare const FORMAT_BY_PICKER: Record<PickerMode, string>;
+/**
+ * Parse a granularity-formatted string back into a `Dayjs`. Returns `null` on missing or unparseable input so the DatePicker's controlled-value contract stays clean.
+ */
+export declare const parseDateFilterValue: (value: string | undefined, picker: PickerMode) => Dayjs | null;
+/**
+ * Format a `Dayjs` (typically from `DatePicker.onChange`) into the server-facing string at the active picker's granularity. Returns `undefined` for empty input so callers can drop the value entirely.
+ */
+export declare const formatDateFilterValue: (value: Dayjs | null | undefined, picker: PickerMode) => string | undefined;
+/**
+ * v2 port of v1's `DateFilterDynamicComponent` — a multi-mode value input for the `$date*` operator family. Three sub-controls glued in a `Space.Compact` row:
+ *
+ * 1. Mode select — `Exact day` / `Past` / `Next` / `Today` / `This Week` / … Picking a relative mode emits a `{ type, number?, unit? }` descriptor that the server resolves at query time; picking `Exact day` emits a raw `Dayjs` instead.
+ * 2. Picker granularity — only when mode is `Exact day`: `Date` / `Month` / `Quarter` / `Year`. Controls the antd `DatePicker`'s `picker` mode so admins can filter to e.g. "any day in 2026-03".
+ * 3. Date input — antd `DatePicker` for single dates, or `DatePicker.RangePicker` when `isRange` is true (used by `$dateBetween`).
+ *
+ * v1 wired its own `<DatePicker.FilterWithPicker>` for the third slot; v2 inlines the picker-granularity selector here so we don't have to fork antd's DatePicker. Drops v1's `@emotion/css` (uses antd token spacing) and the `useCompile` schema-template chain (call sites pass a plain `t` translator).
+ */
+export declare const DateFilterDynamicComponent: React.FC<DateFilterDynamicComponentProps>;
+export default DateFilterDynamicComponent;

package/es/components/form/filter/FilterValueInput.d.ts

@@ -0,0 +1,34 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import type { FilterOperator, FilterOption } from '../../../flow/components/filter/useFilterOptions';
+type ComponentRegistryApp = {
+    getComponent?: (name: string) => React.ComponentType<any> | undefined;
+};
+export interface FilterValueInputProps {
+    /** The currently selected leaf field option from the field picker. */
+    field?: FilterOption;
+    /** The currently selected operator (full object, not just `.value`). */
+    operator?: FilterOperator;
+    /** Current value. Shape depends on operator/field. */
+    value: any;
+    /** Notify the parent when the user edits the value. */
+    onChange: (value: any) => void;
+    /** Translator used by sub-renderers. */
+    t?: (key: string) => string;
+    /** Optional placeholder for the fallback `Input`. */
+    placeholder?: string;
+    /** Optional v2 app registry used to resolve plugin-provided operator components. */
+    app?: ComponentRegistryApp;
+}
+/**
+ * Interface-aware value renderer for filter rows. Returns `null` for `noValue` operators (`$empty`, `$notEmpty`). Otherwise dispatches the effective `x-component` (operator schema > field uiSchema > Input) to a small registry of antd controls.
+ */
+export declare const FilterValueInput: React.FC<FilterValueInputProps>;
+export default FilterValueInput;

package/es/components/form/filter/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+export { CollectionFilter } from './CollectionFilter';
+export type { CollectionFilterProps } from './CollectionFilter';
+export { CollectionFilterPanel } from './CollectionFilterPanel';
+export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
+export type { CompiledFilter } from './useFilterActionProps';

package/es/components/form/filter/useFilterActionProps.d.ts

@@ -0,0 +1,99 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { Collection } from '@nocobase/flow-engine';
+import { FilterOption, UseFilterOptionsArgs } from '../../../flow/components/filter/useFilterOptions';
+import { CollectionFilterItemValue, createCollectionFilterItem } from './CollectionFilterItem';
+/** A single condition row (`{ path, operator, value }`) or a nested group. */
+export type FilterGroupItem = CollectionFilterItemValue | FilterGroupValue;
+/**
+ * Reactive shape consumed by `FilterContainer` / `FilterGroup`. `logic` is the join (`$and` / `$or`) and `items` is a heterogeneous list of leaf conditions and nested groups.
+ */
+export type FilterGroupValue = {
+    logic: '$and' | '$or';
+    items: FilterGroupItem[];
+};
+/** Compiled filter param accepted by NocoBase resource `list`. */
+export type CompiledFilter = Record<string, unknown> | undefined;
+interface FilterCtxModel {
+    translate: (key: string) => string;
+    dispatchEvent: (event: 'submit' | 'reset' | (string & {})) => void;
+}
+export interface FilterCtx {
+    model: FilterCtxModel;
+}
+export declare function decompileFilterGroup(filter: CompiledFilter): FilterGroupValue | undefined;
+/**
+ * Compile a reactive filter group into the `{ $and: [{ path: { op: val } }] }` envelope accepted by NocoBase's resource `list` filter param. Returns `undefined` when the group is empty so callers can drop the param.
+ *
+ * Mirrors v1's `removeNullCondition` + filter compile path, but works on the v2 `{ logic, items }` group structure rather than v1's Formily-bracketed `$and.0.path.$eq` shape:
+ *
+ * - Rows missing `path` or `operator` are dropped (still mid-edit).
+ * - Rows whose `value` is empty (`undefined`, `''`, `[]`, `{}`) are dropped — matches v1, which sends `filter={}` for a row with only a field/operator picked. Sending `{lockedTs:{}}` would 500.
+ * - Dotted association paths (`user.createdBy.password`) are expanded into nested objects — matches v1's payload shape, which the server resolves along the association chain rather than treating the dotted string as a single key.
+ * - Empty groups (after pruning) propagate as `undefined` so the outermost caller can drop the whole `filter` param.
+ */
+export declare function compileFilterGroup(group: FilterGroupValue | undefined): CompiledFilter;
+/** Which footer button triggered the apply — useful for closing a popover on Submit but keeping it open on Reset. */
+export type FilterApplyAction = 'submit' | 'reset';
+export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
+    /** Collection whose fields populate the filter row's field picker. */
+    collection: Collection | undefined;
+    /** Previously compiled filter param used to seed the editable filter group. */
+    initialValue?: CompiledFilter;
+    /**
+     * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
+     */
+    onApply: (filter: CompiledFilter, action: FilterApplyAction) => void;
+}
+export interface UseFilterActionPropsResult {
+    /**
+     * Reactive filter group state. Pass directly to `<FilterContent value={...}>`. Stable across renders.
+     */
+    value: FilterGroupValue;
+    /** Field-option tree (for inspection or custom badges). */
+    options: FilterOption[];
+    /** Bound `FilterItem` component to plug into `<FilterContent FilterItem={...}>`. */
+    FilterItem: ReturnType<typeof createCollectionFilterItem> | undefined;
+    /**
+     * Ready-to-use `ctx` for `<FilterContent ctx={...}>`. Wires Submit / Reset buttons to `onSubmit` / `onReset` below.
+     */
+    ctx: FilterCtx;
+    /** Imperative trigger — submit current group as a compiled filter. */
+    onSubmit: () => void;
+    /** Imperative trigger — clear the group and emit an empty filter. */
+    onReset: () => void;
+    /**
+     * Count of top-level condition rows. Useful for showing a badge like `Filter (3)` on the trigger button — matches v1's `field.title = t('{{count}} filter items', { count })`.
+     */
+    conditionCount: number;
+}
+/**
+ * v2 equivalent of v1's `useFilterActionProps` for non-schema surfaces (settings pages, panels, side drawers). Bundles three things v1's hook returned implicitly through schema:
+ *
+ * - A reactive `{ logic, items }` group state that `<FilterContent>` reads.
+ * - A bound `FilterItem` component (driven by `createCollectionFilterItem`).
+ * - A `ctx` object that turns `<FilterContent>`'s `dispatchEvent('submit' | 'reset')` into a compiled filter param passed to `onApply`.
+ *
+ * Pair with antd `Popover` to recreate the legacy `Filter.Action` UX:
+ *
+ * ```tsx
+ * const { value, ctx, FilterItem, onSubmit, conditionCount } = useFilterActionProps({
+ *   collection,
+ *   onApply: (filter) => listRequest.run(filter),
+ *   t,
+ * });
+ * return (
+ *   <Popover content={<FilterContent value={value} ctx={ctx} FilterItem={FilterItem} />}>
+ *     <Button>{t('Filter')}{conditionCount ? ` (${conditionCount})` : ''}</Button>
+ *   </Popover>
+ * );
+ * ```
+ */
+export declare function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult;
+export {};

package/es/components/form/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+export * from './createFormRegistry';
+export * from './filter';
+export * from './DialogFormLayout';
+export * from './DrawerFormLayout';
+export * from './EnvVariableInput';
+export * from './FileSizeInput';
+export * from './JsonTextArea';
+export * from './PasswordInput';
+export * from './RemoteSelect';
+export * from './ScanInput';
+export * from './TypedVariableInput';
+export * from './VariableInput';

package/es/components/form/table/RowOverlayPreview.d.ts

@@ -0,0 +1,27 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import type { RowSnapshot } from './utils';
+/**
+ * Floating clone of the row being dragged, rendered inside a `<DragOverlay>`
+ * so it follows the cursor while the source row stays in place. We inject the
+ * snapshot's `outerHTML` straight into a mini `<table>` so every antd class
+ * (`ant-table-cell`, `ant-table-selection-column`, theme tokens, etc.) is
+ * preserved. A `<colgroup>` re-applies the measured cell widths so the clone
+ * lines up column-for-column with the source row; the wrapper's pinned
+ * `height` + table `height:100%` keeps vertical sizing consistent regardless
+ * of which antd table size variant the caller picked.
+ *
+ * The wrapper also carries `overlayCellStylesClassName` so the index numeric
+ * (`.nb-table-index`) is hidden while dragging — only the handle + checkbox
+ * are surfaced inside the floating clone.
+ */
+export declare function RowOverlayPreview(props: {
+    snapshot: RowSnapshot;
+}): React.JSX.Element;

package/es/components/form/table/SelectionCell.d.ts

@@ -0,0 +1,36 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+export interface SelectionCellProps {
+    /** Whether the row is currently selected — drives the index/checkbox swap. */
+    checked: boolean;
+    /** Zero-based row index (within the current page). `TableIndex` displays it as `index + 1`. */
+    index: number;
+    /** Render the drag handle on the left gutter. Mutually exclusive with `showStandaloneHandle`. */
+    showHandle: boolean;
+    /** Render the row index numeric. When `false` only the antd checkbox is shown (default antd UX). */
+    showIndex: boolean;
+    /** The original antd checkbox node produced by `rowSelection.renderCell`. */
+    originalNode: React.ReactNode;
+}
+/**
+ * The body half of the rowSelection column. Renders, in order:
+ *   1. An absolute-positioned drag handle pinned to the left gutter (only
+ *      when `showHandle` is true). The parent `<td>` must be
+ *      `position: relative` for the handle to land inside the gutter —
+ *      `selectionGutterClassName` in `styles.ts` adds that.
+ *   2. A `.nb-row-selection-cell` wrapper that contains both the row index
+ *      and the checkbox. CSS in `indexSwapClassName` swaps which one is
+ *      visible depending on hover / `checked` state.
+ *
+ * When `showIndex` is false we drop the swap entirely and render only the
+ * original antd checkbox — matches the default antd selection column UX for
+ * tables that don't want the index numeric.
+ */
+export declare function SelectionCell(props: SelectionCellProps): React.JSX.Element;

package/es/components/form/table/Table.d.ts

@@ -0,0 +1,82 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { type TableProps as AntdTableProps } from 'antd';
+import React from 'react';
+import { type RowKey } from './utils';
+/**
+ * Default initial page size for `Table`. Exposed so consumers can seed their
+ * controlled `pageSize` state with the same value the component would use if
+ * they relied purely on the built-in pagination defaults.
+ */
+export declare const DEFAULT_PAGE_SIZE = 50;
+/**
+ * Default `pageSizeOptions` injected into the pagination config. Matches the
+ * v1 settings-page table so users see the same choices across versions.
+ * Consumers can override by passing their own `pageSizeOptions` in
+ * `pagination`.
+ */
+export declare const PAGE_SIZE_OPTIONS: readonly number[];
+export interface TableProps<RecordType extends object = any> extends AntdTableProps<RecordType> {
+    /**
+     * Required so drag-sort, hover-swap and row identity work. Accepts the same
+     * shape as antd `Table.rowKey`. When passed as a function it gets the
+     * record + index and must return a serializable id.
+     */
+    rowKey: RowKey<RecordType>;
+    /**
+     * Show row index (1, 2, 3, …) in the rowSelection column by default; hovering
+     * a row or selecting it reveals the checkbox in the same cell. Requires
+     * `rowSelection` — the index lives in the selection column. Defaults to
+     * `true`.
+     */
+    showIndex?: boolean;
+    /**
+     * Enable vertical drag-and-drop row reordering. When true, rows show a drag
+     * handle on the left and `onSortEnd` fires after each drop. Defaults to
+     * `false`; the rest of the table behaves like a plain antd Table.
+     */
+    isDraggable?: boolean;
+    /**
+     * Called after a row is dropped onto another. Only used when `isDraggable`
+     * is true. The caller persists the move (e.g. `resource.move(...)`) and
+     * refreshes `dataSource` — this component does NOT mutate the data array.
+     */
+    onSortEnd?: (from: RecordType, to: RecordType) => void | Promise<void>;
+    /**
+     * Hide the drag handle entirely while still keeping `isDraggable` on. Useful
+     * when the caller wants to embed `<SortHandle />` inside a custom column.
+     * Defaults to `true`.
+     */
+    showSortHandle?: boolean;
+    /**
+     * Override the width of the auto-inserted handle column when `rowSelection`
+     * is absent. When `rowSelection` is provided the handle is rendered inside
+     * the selection column instead, so this prop is ignored.
+     */
+    sortHandleColumnWidth?: number;
+}
+/**
+ * Generic v2 settings-page table primitive. Built on antd's `Table` and adds:
+ *
+ * - Row-index ↔ checkbox swap inside the selection column (`showIndex`,
+ *   on by default): index visible at rest, checkbox shows on hover or when
+ *   selected. Both elements are absolutely positioned inside the cell so
+ *   they share the same center anchor and never compete for layout space.
+ * - Optional vertical drag-and-drop reordering (`isDraggable`): handle is
+ *   absolute-positioned in a 32px left gutter so the checkbox column stays
+ *   visually centered. The drag overlay renders an `outerHTML` clone of the
+ *   source `<tr>`; the index is suppressed inside the clone so the row
+ *   being moved doesn't display a stale ordinal.
+ *
+ * Use this in place of antd `Table` for any settings-page list. When
+ * `isDraggable` is false the component is a thin pass-through to antd Table
+ * plus the index swap, so it is safe as the default table on any page.
+ */
+export declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
+export default Table;

package/es/components/form/table/constants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+/**
+ * Pixel reservation on the left side of the rowSelection column for the drag
+ * handle. Used by the runtime `selectionGutterClassName` (real table) and by
+ * the drag overlay `overlayCellStylesClassName` (floating clone) so both
+ * variants put the handle in the same gutter position.
+ */
+export declare const SORT_HANDLE_GUTTER = 32;

package/es/components/form/table/dnd/SortableRow.d.ts

@@ -0,0 +1,40 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import React from 'react';
+type DragSortRowContextValue = {
+    attributes?: DraggableAttributes;
+    listeners?: SyntheticListenerMap;
+    setActivatorNodeRef?: (node: HTMLElement | null) => void;
+};
+export declare const DragSortRowContext: React.Context<DragSortRowContextValue>;
+/**
+ * Activator handle that initiates a row drag. Reads `attributes` / `listeners`
+ * / `setActivatorNodeRef` from the surrounding `DragSortRowContext` provided
+ * by `SortableRow`, so the handle can sit anywhere within the row's cells
+ * (typically a dedicated first column).
+ */
+export declare const SortHandle: React.FC<{
+    id?: string | number;
+    style?: React.CSSProperties;
+}>;
+/**
+ * Drop-in replacement for antd Table's `<tr>` body row that wires `useSortable`
+ * keyed by the `data-row-key` attribute antd injects. Pass via
+ * `Table.components.body.row` and wrap the `<tbody>` with `DndContext` +
+ * `SortableContext`. The `DragSortRowContext` it provides lets `SortHandle`
+ * be placed anywhere inside the row, not just on the row itself.
+ */
+export declare const SortableRow: React.FC<{
+    rowIndex?: number;
+    className?: string;
+    [key: string]: any;
+}>;
+export {};

package/{lib/hooks → es/components/form/table/dnd}/index.d.ts

@@ -6,6 +6,4 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-export * from './useApp';
-export * from './usePlugin';
-export * from './useRouter';
+export * from './SortableRow';

package/es/components/form/table/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+export * from './Table';

package/es/components/form/table/styles.d.ts

@@ -0,0 +1,51 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+/**
+ * Restore horizontal scrolling on `.ant-table-content` so wide tables in
+ * narrow containers (drawer / settings panel) scroll their inner `<table>`
+ * instead of getting clipped or forcing the outer container to grow.
+ *
+ * `width: max-content` on the inner `<table>` lets columns size to their
+ * natural width; `min-width: 100%` keeps the table filling the viewport
+ * when total column width is smaller than the container.
+ */
+export declare const tableScrollClassName: string;
+/**
+ * Reserve a `SORT_HANDLE_GUTTER`-wide gap on the left of the rowSelection
+ * column so the handle's `left:0` lands inside a `position:relative` cell.
+ * Padding is mirrored on both the header `<th>` and body `<td>` so the
+ * "select all" checkbox stays vertically aligned with body checkboxes.
+ *
+ * The class is a module-level constant — emotion's hash is stable across
+ * re-renders, so the caller doesn't need a `useMemo` to keep referential
+ * equality.
+ */
+export declare const selectionGutterClassName: string;
+/**
+ * Index ↔ checkbox hover swap CSS. Both `.nb-table-index` and the antd
+ * checkbox (wrapped in `.nb-origin-node`) are absolutely positioned and
+ * centered inside `.nb-row-selection-cell`, so they share the same anchor
+ * without one displacing the other. `display: none/flex` flips so they never
+ * overlap mid-transition.
+ */
+export declare const indexSwapClassName: string;
+/**
+ * Self-contained styles for the drag-overlay clone. The runtime
+ * `selectionGutterClassName` + `indexSwapClassName` are scoped to AntdTable's
+ * emotion hash, so they don't reach the cloned `<tr>` injected via
+ * `dangerouslySetInnerHTML`. This class replays the minimal subset that the
+ * clone needs:
+ *   - selection column gutter + `position: relative` so the absolute handle
+ *     lands correctly
+ *   - hide the row index inside the overlay (drag preview shouldn't carry
+ *     a stale ordinal)
+ *   - force the checkbox (`.nb-origin-node`) absolute-centered and visible
+ *     regardless of hover/checked state, so the selection cell isn't empty
+ */
+export declare const overlayCellStylesClassName: string;