RelatedRecordsModal

A full-screen modal that renders a DynamicList to display records related to a parent entity. It can accept a static data array or fetch records from an API via fetchPath. The list is read-only (items are clickable but no mutations are exposed). The list is deferred-mounted until the modal's open animation finishes.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | () => void | Yes | — | Called when the modal closes. | | title | string | Yes | — | Title displayed in the modal header. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | 99999 | CSS z-index of the modal overlay. | | id | string | No | — | HTML id for the modal element. | | fullScreen | boolean | No | — | When true, the modal occupies the full viewport. | | subtitle | string | No | — | Subtitle displayed in the modal header. | | apiBaseUrl | string | No | — | Base URL for the HTTP client. | | useAuthToken | boolean | No | — | When true, uses the authenticated HTTP client. | | data | any[] \| null | No | — | Static array of related records. | | noContentText | string | No | 'No content available' | Text shown when the list is empty. | | noContentIcon | string | No | 'records' | Icon shown when the list is empty. | | startSlots | Slot[] | No | [] | Slots rendered at the start of each list item. | | endSlots | Slot[] | No | [] | Slots rendered at the end of each list item. | | searchPlaceholder | string | No | — | Placeholder for the search input (reserved). | | fetchPath | string | No | — | API path to fetch the related records. | | savePath | string | No | — | API path for saving (reserved). | | payloadKey | string | No | — | Payload key for the save request (reserved). |

Usage

Basic

import React from 'react';
import RelatedRecordsModal from '@/components/modals/RelatedRecordsModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>View Orders</button>
      <RelatedRecordsModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Customer Orders"
        fetchPath="/v1/customers/42/orders"
        useAuthToken
        startSlots={[
          { type: 'text', name: 'order_number', label: 'Order #', config: {} },
        ]}
      />
    </>
  );
}