import { __InputWrapperProps, BoxProps, Factory, MantineSpacing, StylesApiProps } from '@mantine/core'; import { ForwardedRef, ReactNode } from 'react'; import { CustomComponentThemeExtend } from '../../utils/createFactoryComponent.js'; import { CollectionColumnDef } from './CollectionColumn.types.js'; import { CollectionLayout } from './layouts/CollectionLayout.types.js'; import { CollectionLayouts } from './layouts/CollectionLayouts.js'; /** * Base props shared by both column-based and children-based patterns */ interface BaseCollectionProps extends __InputWrapperProps, BoxProps, StylesApiProps { /** * The default value each new item should have */ newItem: T | (() => T); /** * The list of items to display inside the collection * * @default [] */ value?: T[]; /** * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense. * * This method is required when using this component with ReactHookForm. * * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm. * * @param originalItem The original item * @param itemIndex The index of the original item */ getItemId?: (originalItem: T, itemIndex: number) => string; /** * Unused, has no effect */ onFocus?: () => void; /** * Function called whenever the value needs to be updated * * @param value The whole list of items after the change */ onChange?: (value: T[]) => void; /** * Function called after an item is removed from the collection using the remove button * * @param itemIndex The index of the item that was removed */ onRemoveItem?: (itemIndex: number) => void; /** * Function that gets called whenever a collection item needs to be reordered * * @param payload The origin and destination index of the item to reorder */ onReorderItem?: (payload: { from: number; to: number; }) => void; /** * Function that gets called when a new item needs to be added to the collection * * @param value The value of the item to insert * @param index The index of the new item to insert */ onInsertItem?: (value: T, index: number) => void; /** * Whether the collection should have drag and drop behavior enabled * * @default false */ draggable?: boolean; /** * Whether the collection is disabled, or in other words in read only mode * * @default false */ disabled?: boolean; /** * Whether the collection is readOnly. If true, the collection will not allow adding or removing items * * @default false */ readOnly?: boolean; /** * Function that determines if the add item button should be enabled given the current items of the collection. * The button is always enabled if this props remains undefined * * @param values The current items of the collection */ allowAdd?: boolean | ((values: T[]) => boolean); /** * The label of the add item button * * @default "Add item" */ addLabel?: ReactNode; /** * The tooltip text displayed when hovering over the disabled add item button * * @default 'There is already an empty item' */ addDisabledTooltip?: string; /** * The gap between the collection items * * @default 'sm' */ gap?: MantineSpacing; /** * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item * * @default false */ required?: boolean; } /** * Collection with column-based layout */ interface CollectionWithColumns extends BaseCollectionProps { /** * Column definitions for the collection */ columns: Array>; /** * Layout component to use for rendering * @default CollectionLayouts.Horizontal */ layout?: CollectionLayout; /** * Must not have children when using columns */ children?: never; } /** * Collection with legacy children render prop */ interface CollectionWithChildren extends BaseCollectionProps { /** * A render function called for each item passed in the `value` prop. * * @param item The current item's value * @param index The current item's index */ children: (item: T, index: number) => ReactNode; /** * Must not have columns when using children */ columns?: never; /** * Must not have layout when using children */ layout?: never; } /** * Collection props - either columns OR children, never both */ export type CollectionProps = CollectionWithColumns | CollectionWithChildren; export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle' | 'removeButton'; export type CollectionFactory = Factory<{ props: CollectionProps; ref: HTMLDivElement; stylesNames: CollectionStylesNames; }>; export declare function Collection(props: CollectionProps & { ref?: ForwardedRef; }): import("react").JSX.Element; export declare namespace Collection { var displayName: string; var extend: CustomComponentThemeExtend<{ props: CollectionProps; ref: HTMLDivElement; stylesNames: CollectionStylesNames; }>; export { CollectionLayouts as Layouts }; } export declare namespace Collection { type Props = CollectionProps; type StylesNames = CollectionStylesNames; type Factory = CollectionFactory; } export {}; //# sourceMappingURL=Collection.d.ts.map