ding-react-admin 2.0.8 → 2.0.9

package/src/components/navMenu.css

@@ -13,6 +13,113 @@
   white-space: nowrap;
 }
 
+.ding-admin-nav-menu--wrap-labels .ant-menu-title-content {
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+}
+
+.ding-admin-nav-menu--wrap-labels .ding-admin-menu-label {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  line-height: 1.3;
+}
+
+.ding-admin-nav-menu--item-divider-full.ant-menu-root
+  > .ant-menu-item
+  + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-full.ant-menu-root
+  > .ant-menu-item
+  + .ant-menu-submenu,
+.ding-admin-nav-menu--item-divider-full.ant-menu-root
+  > .ant-menu-submenu
+  + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-full.ant-menu-root
+  > .ant-menu-submenu
+  + .ant-menu-submenu,
+.ding-admin-nav-menu--item-divider-full .ant-menu-sub > .ant-menu-item + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-full
+  .ant-menu-sub
+  > .ant-menu-item
+  + .ant-menu-submenu,
+.ding-admin-nav-menu--item-divider-full
+  .ant-menu-sub
+  > .ant-menu-submenu
+  + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-full
+  .ant-menu-sub
+  > .ant-menu-submenu
+  + .ant-menu-submenu {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-item
+  + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-item
+  + .ant-menu-submenu,
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-submenu
+  + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-submenu
+  + .ant-menu-submenu,
+.ding-admin-nav-menu--item-divider-inset .ant-menu-sub > .ant-menu-item + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-item
+  + .ant-menu-submenu,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-submenu
+  + .ant-menu-item,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-submenu
+  + .ant-menu-submenu {
+  position: relative;
+}
+
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-item
+  + .ant-menu-item::before,
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-item
+  + .ant-menu-submenu::before,
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-submenu
+  + .ant-menu-item::before,
+.ding-admin-nav-menu--item-divider-inset.ant-menu-root
+  > .ant-menu-submenu
+  + .ant-menu-submenu::before,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-item
+  + .ant-menu-item::before,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-item
+  + .ant-menu-submenu::before,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-submenu
+  + .ant-menu-item::before,
+.ding-admin-nav-menu--item-divider-inset
+  .ant-menu-sub
+  > .ant-menu-submenu
+  + .ant-menu-submenu::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 16px;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
 /* Mobile drawer: wrap long labels instead of truncating */
 .ant-drawer .ding-admin-menu-label {
   white-space: normal;

package/src/context/AppThemeProvider.tsx

@@ -46,7 +46,7 @@ function readStoredDensity(key: string): ThemeDensity {
   } catch {
     /* ignore */
   }
-  return "comfortable";
+  return "compact";
 }
 
 const DEFAULT_MODE_KEY = "ding-react-admin-theme-mode";

package/src/crud/InlineFormSet.tsx

@@ -20,15 +20,25 @@ export type InlineFormSetStackedProps = InlineFormSetBaseProps & {
   /** Field sources in each row — used when appending an empty row. */
   sources: string[];
   renderRow: (ctx: InlineRowContext) => ReactNode;
+  /** Optional card title per row (defaults to "Item N"). */
+  getCardTitle?: (ctx: InlineRowContext) => ReactNode;
+  /** Optional content below the row list (e.g. combined preview). */
+  footer?: ReactNode;
 };
 
-function emptyRow(sources: string[]) {
+function emptyRow(sources: string[], defaults?: Record<string, unknown>) {
   const row: Record<string, unknown> = {};
-  for (const source of sources) row[source] = undefined;
+  for (const source of sources) {
+    row[source] = defaults?.[source] ?? undefined;
+  }
   return row;
 }
 
-function useInlineRows(field: string, sources: string[]) {
+function useInlineRows(
+  field: string,
+  sources: string[],
+  defaultRow?: Record<string, unknown>,
+) {
   const { control } = useFormContext<FieldValues>();
   const { fields, append, remove } = useFieldArray({
     control,
@@ -36,7 +46,7 @@ function useInlineRows(field: string, sources: string[]) {
     keyName: "rowKey",
   });
 
-  const appendEmpty = () => append(emptyRow(sources));
+  const appendEmpty = () => append(emptyRow(sources, defaultRow));
 
   return { fields, remove, appendEmpty };
 }
@@ -48,12 +58,13 @@ export function InlineFormSet({
   payloadKey,
   transformRows,
   columns,
+  defaultRow,
 }: InlineFormSetProps) {
   const sources = useMemo(
     () => columns.map((col) => col.source),
     [columns],
   );
-  const { fields, remove, appendEmpty } = useInlineRows(field, sources);
+  const { fields, remove, appendEmpty } = useInlineRows(field, sources, defaultRow);
 
   useRegisterPayloadField(field);
   useRegisterInlineField(field, sources, payloadKey, transformRows);
@@ -120,8 +131,11 @@ export function InlineFormSetStacked({
   transformRows,
   sources,
   renderRow,
+  getCardTitle,
+  footer,
+  defaultRow,
 }: InlineFormSetStackedProps) {
-  const { fields, remove, appendEmpty } = useInlineRows(field, sources);
+  const { fields, remove, appendEmpty } = useInlineRows(field, sources, defaultRow);
 
   useRegisterPayloadField(field);
   useRegisterInlineField(field, sources, payloadKey, transformRows);
@@ -130,11 +144,17 @@ export function InlineFormSetStacked({
     <div style={{ marginTop: 24 }}>
       <Typography.Title level={5}>{label ?? "Related items"}</Typography.Title>
       <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-        {fields.map((rowField, index) => (
+        {fields.map((rowField, index) => {
+          const rowContext = {
+            field,
+            index,
+            name: (source: string) => nestedFieldPath(field, index, source),
+          };
+          return (
           <Card
             key={rowField.rowKey}
             size="small"
-            title={`Item ${index + 1}`}
+            title={getCardTitle?.(rowContext) ?? `Item ${index + 1}`}
             extra={
               <Button
                 type="link"
@@ -146,17 +166,15 @@ export function InlineFormSetStacked({
               </Button>
             }
           >
-            {renderRow({
-              field,
-              index,
-              name: (source) => nestedFieldPath(field, index, source),
-            })}
+            {renderRow(rowContext)}
           </Card>
-        ))}
+          );
+        })}
       </Space>
       <Button type="dashed" style={{ marginTop: 8 }} onClick={appendEmpty}>
         Add item
       </Button>
+      {footer}
     </div>
   );
 }

package/src/crud/ResourceList.tsx

@@ -1,5 +1,5 @@
 import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons";
-import { App, Button, Card, Space, Table, Typography } from "antd";
+import { App, Button, Card, Pagination, Space, Table, theme, Typography } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import type {
   SortOrder as AntSortOrder,
@@ -9,9 +9,12 @@ import {
   createContext,
   useCallback,
   useContext,
+  useLayoutEffect,
   useMemo,
+  useRef,
   useState,
   type Key,
+  type CSSProperties,
   type ReactNode,
 } from "react";
 import { Link } from "react-router-dom";
@@ -33,6 +36,7 @@ import type {
 import { useListQueryState } from "./utils/useListQueryState";
 import { useAbortableEffect } from "./utils/useAbortableEffect";
 import { isAbortError } from "../data/abortError";
+import "./resourceListTable.css";
 
 type ResourceListContextValue = {
   filterValues: Record<string, unknown>;
@@ -54,6 +58,11 @@ export type ResourceListProps = {
   newPath?: string;
   /** Merged into every list request (not synced to URL). */
   staticFilter?: Record<string, unknown>;
+  /**
+   * Debounce delay for `TextFilter` before syncing to URL / refetching (ms).
+   * Default 300. Per-field override: `TextFilter debounceMs`.
+   */
+  textFilterDebounceMs?: number;
   editMode?: EditMode;
   syncQueryParams?: boolean;
   children: ReactNode;
@@ -78,6 +87,64 @@ export type ResourceListProps = {
   permissions?: ResourcePermissions;
 };
 
+function formatCellValue(value: unknown): ReactNode {
+  if (value == null || value === "") return "—";
+  return String(value);
+}
+
+function withFirstColumnEditLink<T extends Record<string, unknown>>(
+  columns: ColumnsType<T>,
+  options: {
+    showEdit: boolean;
+    showQuickEdit: boolean;
+    pathPrefix: string;
+    openEditModal: (id: string | number) => void;
+  },
+): ColumnsType<T> {
+  if (columns.length === 0 || (!options.showEdit && !options.showQuickEdit)) {
+    return columns;
+  }
+
+  const [first, ...rest] = columns;
+  const originalRender = first.render;
+
+  return [
+    {
+      ...first,
+      render: (value, row, index) => {
+        const rendered = originalRender
+          ? originalRender(value, row, index)
+          : formatCellValue(value);
+        const content = rendered as ReactNode;
+
+        if (options.showEdit) {
+          return (
+            <Link
+              to={`${options.pathPrefix}/${String(row.id)}`}
+              className="ding-admin-row-edit-link"
+            >
+              {content}
+            </Link>
+          );
+        }
+
+        return (
+          <Button
+            type="link"
+            size="small"
+            className="ding-admin-row-edit-link"
+            style={{ padding: 0, height: "auto", textAlign: "inherit" }}
+            onClick={() => options.openEditModal(row.id as string | number)}
+          >
+            {content}
+          </Button>
+        );
+      },
+    },
+    ...rest,
+  ];
+}
+
 function ResourceListTable<T extends Record<string, unknown>>({
   resource,
   title,
@@ -117,7 +184,10 @@ function ResourceListTable<T extends Record<string, unknown>>({
   const dp = useDataProvider();
   const can = usePermissions();
   const { message, modal } = App.useApp();
+  const { token } = theme.useToken();
   const { columns, sortOrders, sortPriorities } = useListContext();
+  const tableWrapRef = useRef<HTMLDivElement>(null);
+  const [tableScrollY, setTableScrollY] = useState<number>();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<T[]>([]);
   const [total, setTotal] = useState(0);
@@ -178,6 +248,66 @@ function ResourceListTable<T extends Record<string, unknown>>({
   const showBulkActions = availableBulkActions.length > 0;
 
   const selectedCount = selectedIds.size;
+
+  useLayoutEffect(() => {
+    const wrap = tableWrapRef.current;
+    if (!wrap) return;
+
+    const scrollParent = wrap.closest(".ding-admin-scroll") as HTMLElement | null;
+    scrollParent?.classList.add("ding-admin-resource-list-scroll");
+
+    const applyScrollY = () => {
+      if (wrap.clientHeight <= 0) return;
+
+      const paginationEl = wrap.querySelector(
+        ".ding-admin-resource-list-pagination",
+      ) as HTMLElement | null;
+      const tableHead = wrap.querySelector(
+        ".ant-table-header",
+      ) as HTMLElement | null;
+
+      const paginationHeight = paginationEl?.offsetHeight ?? 0;
+      const paginationMargin = paginationEl
+        ? parseFloat(getComputedStyle(paginationEl).marginTop) +
+          parseFloat(getComputedStyle(paginationEl).marginBottom)
+        : 0;
+      const headHeight = tableHead?.offsetHeight ?? 0;
+      const tableBody = wrap.querySelector(
+        ".ant-table-body",
+      ) as HTMLElement | null;
+      const horizontalScrollbar =
+        tableBody && tableBody.scrollWidth > tableBody.clientWidth
+          ? tableBody.offsetHeight - tableBody.clientHeight
+          : 0;
+
+      const next = Math.max(
+        120,
+        Math.floor(
+          wrap.clientHeight -
+            headHeight -
+            paginationHeight -
+            paginationMargin -
+            horizontalScrollbar -
+            8,
+        ),
+      );
+
+      setTableScrollY((prev) => (prev === next ? prev : next));
+    };
+
+    applyScrollY();
+
+    const resizeObserver = new ResizeObserver(() => applyScrollY());
+    resizeObserver.observe(wrap);
+
+    window.addEventListener("resize", applyScrollY);
+    return () => {
+      scrollParent?.classList.remove("ding-admin-resource-list-scroll");
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", applyScrollY);
+    };
+  }, [showBulkActions, selectedCount, total, loading]);
+
   const allPageSelected =
     data.length > 0 &&
     data.every((row) => selectedIds.has(row.id as string | number));
@@ -251,7 +381,7 @@ function ResourceListTable<T extends Record<string, unknown>>({
       }
 
       const field = resolveField(sorter);
-      if (field) {
+      if (field && !Array.isArray(sorter) && sorter.order) {
         queryActions.toggleSort(field);
         return;
       }
@@ -405,7 +535,14 @@ function ResourceListTable<T extends Record<string, unknown>>({
       return col;
     });
 
-    if (!showActionsColumn) return built;
+    if (!showActionsColumn) {
+      return withFirstColumnEditLink(built, {
+        showEdit,
+        showQuickEdit,
+        pathPrefix,
+        openEditModal: queryActions.openEditModal,
+      });
+    }
 
     const rowHelpers: ResourceListRowActionsHelpers = {
       reload: () => void load(),
@@ -448,7 +585,12 @@ function ResourceListTable<T extends Record<string, unknown>>({
         </Space>
       ),
     };
-    return [...built, action];
+    return withFirstColumnEditLink([...built, action], {
+      showEdit,
+      showQuickEdit,
+      pathPrefix,
+      openEditModal: queryActions.openEditModal,
+    });
   }, [
     columns,
     showActionsColumn,
@@ -465,6 +607,19 @@ function ResourceListTable<T extends Record<string, unknown>>({
     load,
   ]);
 
+  const handlePaginationChange = useCallback(
+    (page: number, pageSize: number) => {
+      if (pageSize !== queryState.perPage) {
+        queryActions.setPerPage(pageSize);
+        return;
+      }
+      if (page !== queryState.page) {
+        queryActions.setPage(page);
+      }
+    },
+    [queryActions, queryState.page, queryState.perPage],
+  );
+
   const showModal =
     formChildren &&
     (queryState.createModal || queryState.editId != null) &&
@@ -521,35 +676,49 @@ function ResourceListTable<T extends Record<string, unknown>>({
             running={bulkRunning || loading}
           />
         ) : null}
-        <Table<T>
-          rowKey="id"
-          loading={loading}
-          columns={tableColumns}
-          dataSource={data}
-          scroll={{ x: "max-content" }}
-          rowSelection={
-            showBulkActions
-              ? {
-                  selectedRowKeys,
-                  onChange: handleRowSelectionChange,
-                  preserveSelectedRowKeys: true,
-                }
-              : undefined
+        <div
+          ref={tableWrapRef}
+          className="ding-admin-resource-list-table"
+          style={
+            {
+              "--ding-scroll-thumb": token.colorTextQuaternary,
+              "--ding-scroll-thumb-hover": token.colorTextTertiary,
+            } as CSSProperties
           }
-          pagination={{
-            current: queryState.page,
-            pageSize: queryState.perPage,
-            total,
-            showSizeChanger: true,
-            onChange: (p, ps) => {
-              queryActions.setPage(p);
-              if (ps) queryActions.setPerPage(ps);
-            },
-          }}
-          onChange={(_pag, _filters, sorter) => {
-            handleTableSortChange(sorter as SorterResult<T> | SorterResult<T>[]);
-          }}
-        />
+        >
+          <Table<T>
+            rowKey="id"
+            loading={loading}
+            columns={tableColumns}
+            dataSource={data}
+            scroll={{
+              x: "max-content",
+              ...(tableScrollY ? { y: tableScrollY } : {}),
+            }}
+            rowSelection={
+              showBulkActions
+                ? {
+                    selectedRowKeys,
+                    onChange: handleRowSelectionChange,
+                    preserveSelectedRowKeys: true,
+                  }
+                : undefined
+            }
+            pagination={false}
+            onChange={(_pag, _filters, sorter) => {
+              handleTableSortChange(sorter as SorterResult<T> | SorterResult<T>[]);
+            }}
+          />
+          <div className="ding-admin-resource-list-pagination">
+            <Pagination
+              current={queryState.page}
+              pageSize={queryState.perPage}
+              total={total}
+              showSizeChanger
+              onChange={handlePaginationChange}
+            />
+          </div>
+        </div>
       </Card>
       {showModal ? (
         <ResourceFormModal
@@ -573,6 +742,7 @@ export function ResourceList({
   pathPrefix,
   newPath,
   staticFilter,
+  textFilterDebounceMs,
   editMode = "page",
   syncQueryParams = true,
   children,
@@ -613,13 +783,18 @@ export function ResourceList({
 
   return (
     <ResourceListContext.Provider value={listCtx}>
-      <FilterContextProvider values={filterValues} setFilterValue={setFilterValue}>
+      <FilterContextProvider
+        values={filterValues}
+        setFilterValue={setFilterValue}
+        textFilterDebounceMs={textFilterDebounceMs}
+      >
         <ListContextProvider
           toggleSort={queryActions.toggleSort}
           sort={queryState.sort}
         >
-          {children}
-          <ResourceListTable
+          <div className="ding-admin-resource-list-root">
+            {children}
+            <ResourceListTable
             resource={resource}
             title={title}
             pathPrefix={pathPrefix}
@@ -636,6 +811,7 @@ export function ResourceList({
             queryState={queryState}
             queryActions={queryActions}
           />
+          </div>
         </ListContextProvider>
       </FilterContextProvider>
     </ResourceListContext.Provider>

package/src/crud/context/FilterContext.tsx

@@ -8,12 +8,15 @@ import {
   type ReactNode,
 } from "react";
 import type { FilterDefinition } from "../types";
+import { DEFAULT_TEXT_FILTER_DEBOUNCE_MS } from "../filters/TextFilter";
 
 type FilterContextValue = {
   registerFilter: (def: FilterDefinition) => () => void;
   filters: FilterDefinition[];
   values: Record<string, unknown>;
   setFilterValue: (source: string, value: unknown) => void;
+  /** Default debounce for `TextFilter` controls on this list (ms). */
+  textFilterDebounceMs: number;
 };
 
 const FilterContext = createContext<FilterContextValue | null>(null);
@@ -22,10 +25,12 @@ export function FilterContextProvider({
   children,
   values,
   setFilterValue,
+  textFilterDebounceMs = DEFAULT_TEXT_FILTER_DEBOUNCE_MS,
 }: {
   children: ReactNode;
   values: Record<string, unknown>;
   setFilterValue: (source: string, value: unknown) => void;
+  textFilterDebounceMs?: number;
 }) {
   const [filters, setFilters] = useState<FilterDefinition[]>([]);
 
@@ -49,8 +54,9 @@ export function FilterContextProvider({
       values,
       setFilterValue,
       registerFilter,
+      textFilterDebounceMs,
     }),
-    [filters, values, setFilterValue, registerFilter],
+    [filters, values, setFilterValue, registerFilter, textFilterDebounceMs],
   );
 
   return (

package/src/crud/fields/BooleanField.tsx

@@ -7,6 +7,7 @@ export type BooleanFieldProps = BaseSourceProps & {
   required?: boolean;
   rules?: FieldRules;
   hideLabel?: boolean;
+  disabled?: boolean;
 };
 
 export function BooleanField({
@@ -16,6 +17,7 @@ export function BooleanField({
   required,
   rules,
   hideLabel,
+  disabled: disabledProp,
 }: BooleanFieldProps) {
   return (
     <FieldWrapper
@@ -30,7 +32,7 @@ export function BooleanField({
         <Switch
           checked={Boolean(value)}
           onChange={onChange}
-          disabled={disabled}
+          disabled={disabled || disabledProp}
         />
       )}
     </FieldWrapper>

package/src/crud/fields/DateField.tsx

@@ -1,9 +1,11 @@
 import { DatePicker } from "antd";
-import dayjs from "dayjs";
 import type { BaseSourceProps, FieldRules } from "../types";
+import { parseDayjsValue } from "../utils/parseDayjsValue";
 import { FieldWrapper } from "./FieldWrapper";
 
 const DATE_FORMAT = "YYYY-MM-DD";
+const DATE_TIME_FORMAT = `${DATE_FORMAT} HH:mm:ss`;
+const PARSE_FORMATS = [DATE_FORMAT, DATE_TIME_FORMAT, "YYYY-MM-DDTHH:mm:ss", "YYYY-MM-DDTHH:mm:ssZ"];
 
 export type DateFieldProps = BaseSourceProps & {
   name?: string;
@@ -33,18 +35,18 @@ export function DateField({
     >
       {({ value, onChange, onBlur, disabled }) => (
         <DatePicker
-          value={value ? dayjs(String(value)) : null}
+          value={parseDayjsValue(value, showTime ? [...PARSE_FORMATS, DATE_TIME_FORMAT] : PARSE_FORMATS)}
           onChange={(d) =>
             onChange(
               d
-                ? d.format(showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT)
+                ? d.format(showTime ? DATE_TIME_FORMAT : DATE_FORMAT)
                 : null,
             )
           }
           onBlur={onBlur}
           showTime={showTime}
           disabled={disabled}
-          format={showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT}
+          format={showTime ? DATE_TIME_FORMAT : DATE_FORMAT}
           style={{ width: "100%" }}
         />
       )}

package/src/crud/fields/DateTimeField.tsx

@@ -0,0 +1,9 @@
+import type { DateFieldProps } from "./DateField";
+import { DateField } from "./DateField";
+
+export type DateTimeFieldProps = Omit<DateFieldProps, "showTime">;
+
+/** Shorthand for `<DateField showTime />` — date + time via Ant Design DatePicker. */
+export function DateTimeField(props: DateTimeFieldProps) {
+  return <DateField showTime {...props} />;
+}