ConfigurationGroupBuilderModal

A full-screen modal that combines a sidebar ItemSelector (on desktop) or a Drawer (on mobile) with a DynamicList for assembling an ordered array of configuration group items. The configurationGroup prop scopes the available item types. A floating save button appears only when at least one item has been selected, and it calls onClose with the resulting array.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (newData?: any) => void | Yes | — | Called when the modal closes. Receives the selected items array when the user saves. | | title | string | Yes | — | Title displayed in the modal header. | | configurationGroup | 'fields' \| 'slots' \| 'filters' \| 'headerActions' \| 'listActions' \| 'dividerGroups' \| 'importCols' \| 'exportCols' | Yes | — | Scopes which item types are available in the selector. | | subtitle | string | No | — | Subtitle displayed below the title in the header. | | data | any[] \| null | No | [] | Initial array of selected items pre-loaded into the list. | | 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. |

Usage

Basic

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Build Slots</button>
      <ConfigurationGroupBuilderModal
        isOpen={open}
        onClose={(newData) => {
          if (newData) setItems(newData);
          setOpen(false);
        }}
        title="Slots Builder"
        subtitle="Add and order slot items"
        configurationGroup="slots"
        data={items}
      />
    </>
  );
}