@coveord/plasma-mantine/dist/cjs/components/Collection/Collection.d.ts

A Plasma flavoured Mantine theme

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';
/**
 * Base props shared by both column-based and children-based patterns
 */
interface BaseCollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {
    /**
     * 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 'md'
     */
    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<T> extends BaseCollectionProps<T> {
    /**
     * Column definitions for the collection
     */
    columns: Array<CollectionColumnDef<T>>;
    /**
     * 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<T> extends BaseCollectionProps<T> {
    /**
     * 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<T> = CollectionWithColumns<T> | CollectionWithChildren<T>;
export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle' | 'removeButton';
export type CollectionFactory = Factory<{
    props: CollectionProps<unknown>;
    ref: HTMLDivElement;
    stylesNames: CollectionStylesNames;
}>;
export declare const Collection: {
    <T>(props: CollectionProps<T> & {
        ref?: ForwardedRef<HTMLDivElement>;
    }): import("react/jsx-runtime").JSX.Element;
    displayName: string;
    extend: CustomComponentThemeExtend<{
        props: CollectionProps<unknown>;
        ref: HTMLDivElement;
        stylesNames: CollectionStylesNames;
    }>;
    Layouts: {
        readonly Horizontal: {
            ({ children }: import("./layouts/shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime").JSX.Element;
            Body: <T>(props: import("./layouts/shared/layoutConstants.js").LayoutBodyProps<T> & {
                ref?: ForwardedRef<HTMLDivElement>;
            }) => import("react/jsx-runtime").JSX.Element;
            Header: (props: import("./layouts/shared/layoutConstants.js").LayoutHeaderProps & {
                ref?: ForwardedRef<HTMLDivElement>;
            }) => import("react/jsx-runtime").JSX.Element;
            displayName: string;
        };
        readonly Vertical: {
            ({ children }: import("./layouts/shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime").JSX.Element;
            Body: <T>(props: import("./layouts/shared/layoutConstants.js").LayoutBodyProps<T> & {
                ref?: ForwardedRef<HTMLDivElement>;
            }) => import("react/jsx-runtime").JSX.Element;
            Header: (_props: import("./layouts/shared/layoutConstants.js").LayoutHeaderProps & {
                ref?: ForwardedRef<HTMLDivElement>;
            }) => null;
            displayName: string;
        };
    };
};
export {};
//# sourceMappingURL=Collection.d.ts.map