ding-react-admin 2.0.8 → 2.0.9

package/src/crud/fields/ReferenceField.tsx

@@ -9,6 +9,7 @@ import type {
   ReferenceProps,
 } from "../types";
 import { valueAsId, resolveOptionLabel } from "../utils/choiceSelectionUtils";
+import { referenceSelectDropdownProps } from "../utils/referenceSelectDropdownProps";
 import { referenceSelectNotFoundContent } from "../utils/referenceSelectNotFoundContent";
 import { useChoices } from "../utils/useChoices";
 import { FieldWrapper } from "./FieldWrapper";
@@ -42,6 +43,8 @@ export type ReferenceFieldProps = BaseSourceProps &
     referenceModalWidth?: number;
     /** When false, hide add/edit buttons. Default true when `referenceForm` is set. */
     referenceActions?: boolean;
+    popupMatchSelectWidth?: boolean | number;
+    popupMinWidth?: number;
   };
 
 type ReferenceFieldSelectProps = Omit<
@@ -77,6 +80,8 @@ function ReferenceFieldSelect({
   referenceDefaultValues,
   referenceModalWidth,
   referenceActions = true,
+  popupMatchSelectWidth,
+  popupMinWidth,
 }: ReferenceFieldSelectProps) {
   const [searchText, setSearchText] = useState<string | undefined>();
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -124,6 +129,7 @@ function ReferenceFieldSelect({
 
   const select = (
     <Select
+      {...referenceSelectDropdownProps({ popupMatchSelectWidth, popupMinWidth })}
       value={selectValue}
       onChange={(next) => {
         onChange(next);
@@ -192,6 +198,8 @@ export function ReferenceField({
   referenceDefaultValues,
   referenceModalWidth,
   referenceActions = true,
+  popupMatchSelectWidth,
+  popupMinWidth,
 }: ReferenceFieldProps) {
   const embeddedRecord = useWatch({
     name: recordSource ?? "",
@@ -230,6 +238,8 @@ export function ReferenceField({
           referenceDefaultValues={referenceDefaultValues}
           referenceModalWidth={referenceModalWidth}
           referenceActions={referenceActions}
+          popupMatchSelectWidth={popupMatchSelectWidth}
+          popupMinWidth={popupMinWidth}
         />
       )}
     </FieldWrapper>

package/src/crud/fields/ReferenceManyField.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import { useWatch } from "react-hook-form";
 import type { BaseSourceProps, FieldRules, ReferenceProps } from "../types";
 import { valuesAsIds } from "../utils/choiceSelectionUtils";
+import { referenceSelectDropdownProps } from "../utils/referenceSelectDropdownProps";
 import { referenceSelectNotFoundContent } from "../utils/referenceSelectNotFoundContent";
 import { useChoices } from "../utils/useChoices";
 import { FieldWrapper } from "./FieldWrapper";
@@ -18,6 +19,7 @@ export type ReferenceManyFieldProps = BaseSourceProps &
     search?: boolean;
     allowClear?: boolean;
     hideLabel?: boolean;
+    disabled?: boolean;
     referenceForm?: ReactNode;
     referencePermissions?: ResourcePermissions;
     referenceTitle?: string;
@@ -25,6 +27,8 @@ export type ReferenceManyFieldProps = BaseSourceProps &
     referenceModalWidth?: number;
     /** When false, hide add button even if catalog defines a form. Default true. */
     referenceActions?: boolean;
+    popupMatchSelectWidth?: boolean | number;
+    popupMinWidth?: number;
   };
 
 type ReferenceManyFieldSelectProps = Omit<
@@ -56,6 +60,8 @@ function ReferenceManyFieldSelect({
   referenceDefaultValues,
   referenceModalWidth,
   referenceActions = true,
+  popupMatchSelectWidth,
+  popupMinWidth,
 }: ReferenceManyFieldSelectProps) {
   const [searchText, setSearchText] = useState<string | undefined>();
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -88,6 +94,7 @@ function ReferenceManyFieldSelect({
 
   const select = (
     <Select
+      {...referenceSelectDropdownProps({ popupMatchSelectWidth, popupMinWidth })}
       mode="multiple"
       value={selectValue}
       onChange={onChange}
@@ -149,6 +156,7 @@ export function ReferenceManyField({
   search,
   allowClear = true,
   hideLabel,
+  disabled: disabledProp,
   lazy = true,
   recordSource,
   fetchSelected = true,
@@ -158,6 +166,8 @@ export function ReferenceManyField({
   referenceDefaultValues,
   referenceModalWidth,
   referenceActions = true,
+  popupMatchSelectWidth,
+  popupMinWidth,
 }: ReferenceManyFieldProps) {
   const embeddedRecords = useWatch({
     name: recordSource ?? "",
@@ -185,7 +195,7 @@ export function ReferenceManyField({
           fetchSelected={fetchSelected}
           value={value}
           onChange={onChange}
-          disabled={disabled}
+          disabled={disabled || disabledProp}
           selectedRecords={recordSource ? embeddedRecords : undefined}
           referenceForm={referenceForm}
           referencePermissions={referencePermissions}
@@ -193,6 +203,8 @@ export function ReferenceManyField({
           referenceDefaultValues={referenceDefaultValues}
           referenceModalWidth={referenceModalWidth}
           referenceActions={referenceActions}
+          popupMatchSelectWidth={popupMatchSelectWidth}
+          popupMinWidth={popupMinWidth}
         />
       )}
     </FieldWrapper>

package/src/crud/fields/TextAreaField.tsx

@@ -0,0 +1,58 @@
+import { Input } from "antd";
+import type { CSSProperties } from "react";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+
+export type TextAreaFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  placeholder?: string;
+  inputStyle?: CSSProperties;
+  hideLabel?: boolean;
+  rows?: number;
+  maxLength?: number;
+  showCount?: boolean;
+  autoSize?: boolean | { minRows?: number; maxRows?: number };
+};
+
+export function TextAreaField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  placeholder,
+  inputStyle,
+  hideLabel,
+  rows = 4,
+  maxLength,
+  showCount,
+  autoSize,
+}: TextAreaFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <Input.TextArea
+          value={value as string | undefined}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          style={inputStyle}
+          rows={autoSize ? undefined : rows}
+          maxLength={maxLength}
+          showCount={showCount}
+          autoSize={autoSize}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/fields/TimeField.tsx

@@ -0,0 +1,48 @@
+import { TimePicker } from "antd";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { parseDayjsValue } from "../utils/parseDayjsValue";
+import { FieldWrapper } from "./FieldWrapper";
+
+const DEFAULT_TIME_FORMAT = "HH:mm:ss";
+const PARSE_FORMATS = [DEFAULT_TIME_FORMAT, "HH:mm", "H:mm:ss", "H:mm"];
+
+export type TimeFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  hideLabel?: boolean;
+  /** Output / display format. Default `HH:mm:ss` (Django TimeField). */
+  format?: string;
+};
+
+export function TimeField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  hideLabel,
+  format = DEFAULT_TIME_FORMAT,
+}: TimeFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <TimePicker
+          value={parseDayjsValue(value, PARSE_FORMATS)}
+          onChange={(d) => onChange(d ? d.format(format) : null)}
+          onBlur={onBlur}
+          disabled={disabled}
+          format={format}
+          style={{ width: "100%" }}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/filters/ReferenceFilter.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import type { BaseSourceProps, ChoiceOption, ReferenceProps } from "../types";
 import { useRegisterFilter } from "../context/FilterContext";
 import { useChoices } from "../utils/useChoices";
+import { referenceSelectDropdownProps } from "../utils/referenceSelectDropdownProps";
 import { referenceSelectNotFoundContent } from "../utils/referenceSelectNotFoundContent";
 
 export type SelectFilterProps = BaseSourceProps & {
@@ -85,6 +86,8 @@ function ReferenceFilterInput({
   search,
   lazy = true,
   fetchSelected = true,
+  popupMatchSelectWidth,
+  popupMinWidth,
   value,
   onChange,
 }: ReferenceFilterProps & {
@@ -106,6 +109,7 @@ function ReferenceFilterInput({
 
   return (
     <Select
+      {...referenceSelectDropdownProps({ popupMatchSelectWidth, popupMinWidth })}
       allowClear
       mode={multiple ? "multiple" : undefined}
       placeholder={label ?? source}
@@ -141,6 +145,8 @@ export function ReferenceFilter({
   search,
   lazy = true,
   fetchSelected = true,
+  popupMatchSelectWidth,
+  popupMinWidth,
 }: ReferenceFilterProps) {
   const def = useMemo(
     () => ({
@@ -165,6 +171,8 @@ export function ReferenceFilter({
           search={search}
           lazy={lazy}
           fetchSelected={fetchSelected}
+          popupMatchSelectWidth={popupMatchSelectWidth}
+          popupMinWidth={popupMinWidth}
           value={value}
           onChange={onChange}
         />
@@ -181,6 +189,8 @@ export function ReferenceFilter({
       search,
       lazy,
       fetchSelected,
+      popupMatchSelectWidth,
+      popupMinWidth,
     ],
   );
   useRegisterFilter(def);

package/src/crud/filters/TextFilter.tsx

@@ -1,13 +1,85 @@
 import { Input } from "antd";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { BaseSourceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
+import { useFilterContext, useRegisterFilter } from "../context/FilterContext";
+import { useDebouncedValue } from "../utils/useDebouncedValue";
+
+/** Default debounce for list text filters (ms). */
+export const DEFAULT_TEXT_FILTER_DEBOUNCE_MS = 300;
 
 export type TextFilterProps = BaseSourceProps & {
   placeholder?: string;
+  /**
+   * Debounce delay before applying the filter to the list / URL (ms).
+   * Defaults to `ResourceList` `textFilterDebounceMs`, then {@link DEFAULT_TEXT_FILTER_DEBOUNCE_MS}.
+   * Set `0` for immediate apply (legacy behavior).
+   */
+  debounceMs?: number;
 };
 
-export function TextFilter({ source, label, placeholder }: TextFilterProps) {
+function normalizeFilterText(value: unknown): string | undefined {
+  if (value === undefined || value === null || value === "") return undefined;
+  return String(value);
+}
+
+function TextFilterInput({
+  value,
+  onChange,
+  placeholder,
+  debounceMs,
+}: {
+  value: unknown;
+  onChange: (value: unknown) => void;
+  placeholder?: string;
+  debounceMs: number;
+}) {
+  const [draft, setDraft] = useState(() => (value as string) ?? "");
+  const debouncedDraft = useDebouncedValue(draft, debounceMs);
+
+  useEffect(() => {
+    setDraft((value as string) ?? "");
+  }, [value]);
+
+  useEffect(() => {
+    if (debounceMs <= 0) return;
+    // Ignore stale debounced values while the user is still typing or after an immediate clear.
+    if (debouncedDraft !== draft) return;
+    const next = normalizeFilterText(debouncedDraft);
+    const current = normalizeFilterText(value);
+    if (next !== current) {
+      onChange(next);
+    }
+  }, [debouncedDraft, draft, debounceMs, onChange, value]);
+
+  return (
+    <Input
+      allowClear
+      placeholder={placeholder}
+      value={draft}
+      onChange={(e) => {
+        const nextDraft = e.target.value;
+        setDraft(nextDraft);
+        if (debounceMs <= 0 || nextDraft === "") {
+          onChange(normalizeFilterText(nextDraft));
+        }
+      }}
+      style={{ minWidth: 160 }}
+    />
+  );
+}
+
+export function TextFilter({
+  source,
+  label,
+  placeholder,
+  debounceMs: debounceMsProp,
+}: TextFilterProps) {
+  const filterCtx = useFilterContext();
+  const debounceMs =
+    debounceMsProp ??
+    filterCtx?.textFilterDebounceMs ??
+    DEFAULT_TEXT_FILTER_DEBOUNCE_MS;
+
   const def = useMemo(
     () => ({
       key: source,
@@ -20,16 +92,15 @@ export function TextFilter({ source, label, placeholder }: TextFilterProps) {
         value: unknown;
         onChange: (value: unknown) => void;
       }) => (
-        <Input
-          allowClear
+        <TextFilterInput
+          value={value}
+          onChange={onChange}
           placeholder={placeholder ?? label ?? source}
-          value={(value as string) ?? ""}
-          onChange={(e) => onChange(e.target.value || undefined)}
-          style={{ minWidth: 160 }}
+          debounceMs={debounceMs}
         />
       ),
     }),
-    [source, label, placeholder],
+    [source, label, placeholder, debounceMs],
   );
   useRegisterFilter(def);
   return null;

package/src/crud/index.ts

@@ -17,9 +17,13 @@ export { FormSteps, FormStep } from "./FormSteps";
 export type { FormStepsProps, FormStepProps } from "./FormSteps";
 
 export { TextField } from "./fields/TextField";
+export { TextAreaField } from "./fields/TextAreaField";
+export type { TextAreaFieldProps } from "./fields/TextAreaField";
 export { NumberField } from "./fields/NumberField";
 export { BooleanField } from "./fields/BooleanField";
 export { DateField } from "./fields/DateField";
+export { DateTimeField } from "./fields/DateTimeField";
+export { TimeField } from "./fields/TimeField";
 export { SelectField } from "./fields/SelectField";
 export { PasswordField } from "./fields/PasswordField";
 export { ReferenceField } from "./fields/ReferenceField";
@@ -45,7 +49,11 @@ export { ReferenceManyColumn } from "./columns/ReferenceManyColumn";
 export { ImageColumn } from "./columns/ImageColumn";
 export { CustomColumn } from "./columns/CustomColumn";
 
-export { TextFilter } from "./filters/TextFilter";
+export {
+  TextFilter,
+  DEFAULT_TEXT_FILTER_DEBOUNCE_MS,
+} from "./filters/TextFilter";
+export type { TextFilterProps } from "./filters/TextFilter";
 export { NumberFilter } from "./filters/NumberFilter";
 export { BooleanFilter } from "./filters/BooleanFilter";
 export { DateFilter } from "./filters/DateFilter";

package/src/crud/resourceListTable.css

@@ -0,0 +1,113 @@
+.ding-admin-scroll.ding-admin-resource-list-scroll,
+.ding-admin-scroll:has(.ding-admin-resource-list-root) {
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+}
+
+.ding-admin-resource-list-root {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.ding-admin-resource-list-root > :not(.ant-card) {
+  flex-shrink: 0;
+}
+
+.ding-admin-resource-list-root > .ant-card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.ding-admin-resource-list-root > .ant-card > .ant-card-head {
+  flex-shrink: 0;
+}
+
+.ding-admin-resource-list-root > .ant-card > .ant-card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.ding-admin-resource-list-root > .ant-card > .ant-card-body > :not(.ding-admin-resource-list-table) {
+  flex-shrink: 0;
+}
+
+.ding-admin-resource-list-table {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.ding-admin-resource-list-table .ant-spin-nested-loading,
+.ding-admin-resource-list-table .ant-spin-container,
+.ding-admin-resource-list-table .ant-table-wrapper,
+.ding-admin-resource-list-table .ant-table,
+.ding-admin-resource-list-table .ant-table-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.ding-admin-resource-list-table .ant-table-header {
+  flex-shrink: 0;
+}
+
+.ding-admin-resource-list-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+}
+
+.ding-admin-resource-list-table .ant-table-body,
+.ding-admin-resource-list-table .ant-table-content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ding-scroll-thumb) transparent;
+}
+
+.ding-admin-resource-list-table .ant-table-body::-webkit-scrollbar,
+.ding-admin-resource-list-table .ant-table-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ding-admin-resource-list-table .ant-table-body::-webkit-scrollbar-track,
+.ding-admin-resource-list-table .ant-table-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ding-admin-resource-list-table .ant-table-body::-webkit-scrollbar-thumb,
+.ding-admin-resource-list-table .ant-table-content::-webkit-scrollbar-thumb {
+  background-color: var(--ding-scroll-thumb);
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+.ding-admin-resource-list-table .ant-table-body::-webkit-scrollbar-thumb:hover,
+.ding-admin-resource-list-table .ant-table-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ding-scroll-thumb-hover);
+}
+
+.ding-admin-resource-list-table .ant-table-body::-webkit-scrollbar-corner,
+.ding-admin-resource-list-table .ant-table-content::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.ding-admin-resource-list-table .ding-admin-row-edit-link {
+  color: var(--ant-color-primary);
+}
+
+.ding-admin-resource-list-table .ding-admin-row-edit-link:hover {
+  color: var(--ant-color-primary-hover, var(--ant-color-primary));
+}

package/src/crud/types.ts

@@ -42,6 +42,13 @@ export type ReferenceProps = {
    * already embedded in the form record. Set `false` to never call `getOne`.
    */
   fetchSelected?: boolean;
+  /**
+   * When false (default), the options dropdown may be wider than the input.
+   * Pass true to match input width, or a number for a fixed popup width.
+   */
+  popupMatchSelectWidth?: boolean | number;
+  /** Minimum popup width in px when `popupMatchSelectWidth` is false. Default 360. */
+  popupMinWidth?: number;
 };
 
 export type DisplayProps = {
@@ -75,6 +82,8 @@ export type InlineFormSetBaseProps = {
   /** API key when different from `field`. */
   payloadKey?: string;
   transformRows?: (rows: Record<string, unknown>[]) => unknown;
+  /** Values applied when appending a new inline row (e.g. `{ is_active: true }`). */
+  defaultRow?: Record<string, unknown>;
 };
 
 /** Passed to each tabular inline column's `cell` renderer. */

package/src/crud/utils/parseDayjsValue.ts

@@ -0,0 +1,14 @@
+import dayjs, { type Dayjs } from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+
+dayjs.extend(customParseFormat);
+
+export function parseDayjsValue(
+  value: unknown,
+  formats: string[],
+): Dayjs | null {
+  if (value == null || value === "") return null;
+  if (dayjs.isDayjs(value)) return value;
+  const parsed = dayjs(String(value), formats, true);
+  return parsed.isValid() ? parsed : dayjs(String(value)).isValid() ? dayjs(String(value)) : null;
+}

package/src/crud/utils/referenceSelectDropdownProps.ts

@@ -0,0 +1,30 @@
+import type { SelectProps } from "antd";
+
+export const REFERENCE_SELECT_POPUP_MIN_WIDTH = 360;
+
+export type ReferenceSelectDropdownOptions = {
+  /** When false (default), the dropdown may be wider than the input. */
+  popupMatchSelectWidth?: boolean | number;
+  /** Minimum popup width in px when `popupMatchSelectWidth` is false. */
+  popupMinWidth?: number;
+};
+
+/** Ant Design Select props so reference dropdowns are not clipped to input width. */
+export function referenceSelectDropdownProps(
+  options: ReferenceSelectDropdownOptions = {},
+): Pick<SelectProps, "popupMatchSelectWidth" | "styles"> {
+  const popupMatchSelectWidth = options.popupMatchSelectWidth ?? false;
+  if (popupMatchSelectWidth !== false) {
+    return { popupMatchSelectWidth };
+  }
+
+  const minWidth = options.popupMinWidth ?? REFERENCE_SELECT_POPUP_MIN_WIDTH;
+  return {
+    popupMatchSelectWidth: false,
+    styles: {
+      popup: {
+        root: { minWidth },
+      },
+    },
+  };
+}

package/src/crud/utils/useDebouncedValue.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+/** Returns `value` after it stays unchanged for `delayMs`. When `delayMs <= 0`, returns `value` immediately. */
+export function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    if (delayMs <= 0) {
+      setDebounced(value);
+      return;
+    }
+    const timer = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return delayMs <= 0 ? value : debounced;
+}

package/src/index.ts

@@ -114,6 +114,7 @@ export type {
   AuthPageLayoutProps,
   LoginPageProps,
   NavItem,
+  NavMenuItemDivider,
   RouteAccess,
   ThemeDensity,
   ThemeMode,
@@ -130,9 +131,12 @@ export {
   FormSteps,
   FormStep,
   TextField,
+  TextAreaField,
   NumberField,
   BooleanField,
   DateField,
+  DateTimeField,
+  TimeField,
   SelectField,
   PasswordField,
   ReferenceField,
@@ -149,6 +153,7 @@ export {
   ImageColumn,
   CustomColumn,
   TextFilter,
+  DEFAULT_TEXT_FILTER_DEBOUNCE_MS,
   NumberFilter,
   BooleanFilter,
   DateFilter,
@@ -182,6 +187,7 @@ export type {
   FormStepProps,
   InlineFormSetLayout,
   ResourceListProps,
+  TextFilterProps,
   BaseSourceProps,
   ChoiceOption,
   ChoicesLoader,
@@ -196,6 +202,7 @@ export type {
   InlineFormSetBaseProps,
   InlineRowContext,
   InlineFieldRegistration,
+  TextAreaFieldProps,
   FieldWrapperProps,
   ImageFieldProps,
   FileFieldProps,