@etsoo/materialui 1.0.1

package/lib/DataGridEx.js

@@ -0,0 +1,329 @@
+import { css } from '@emotion/css';
+import { GridAlignGet, ScrollerGrid, useCombinedRefs } from '@etsoo/react';
+import { Utils } from '@etsoo/shared';
+import { Box, Checkbox, Paper, TableSortLabel, useTheme } from '@mui/material';
+import React from 'react';
+import { DataGridRenderers } from './DataGridRenderers';
+// Borders
+const boldBorder = '2px solid rgba(224, 224, 224, 1)';
+const thinBorder = '1px solid rgba(224, 224, 224, 1)';
+// Scroll bar size
+const scrollbarSize = 16;
+// Minimum width
+const minWidth = 120;
+const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
+    return css({
+        '.DataGridEx-Selected': {
+            backgroundColor: selectedColor
+        },
+        '.DataGridEx-Hover:not(.DataGridEx-Selected)': {
+            backgroundColor: hoverColor
+        },
+        '& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)': {
+            backgroundColor: alternatingColors[0]
+        },
+        '& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)': {
+            backgroundColor: alternatingColors[1]
+        },
+        '& .DataGridEx-Cell-Border': {
+            borderBottom: thinBorder
+        }
+    });
+};
+const rowItems = (div, callback) => {
+    const row = div.dataset['row'];
+    if (div.parentElement == null || row == null)
+        return;
+    doRowItems(div.parentElement, parseFloat(row), callback);
+};
+const doRowItems = (parent, rowIndex, callback) => {
+    if (parent == null || rowIndex == null)
+        return;
+    parent === null || parent === void 0 ? void 0 : parent.querySelectorAll(`div[data-row="${rowIndex}"]`).forEach((rowItem) => {
+        callback(rowItem);
+    });
+};
+/**
+ * Extended datagrid columns calculation
+ * @param columns
+ * @returns Total width and unset items
+ */
+export function DataGridExCalColumns(columns) {
+    return columns.reduce((previousValue, currentItem) => {
+        var _a, _b;
+        previousValue.total +=
+            (_b = (_a = currentItem.width) !== null && _a !== void 0 ? _a : currentItem.minWidth) !== null && _b !== void 0 ? _b : minWidth;
+        if (currentItem.width == null)
+            previousValue.unset++;
+        return previousValue;
+    }, {
+        total: 0,
+        unset: 0
+    });
+}
+/**
+ * Extended DataGrid with VariableSizeGrid
+ * @param props Props
+ * @returns Component
+ */
+export function DataGridEx(props) {
+    // Theme
+    const theme = useTheme();
+    const defaultHeaderRenderer = (states) => {
+        const { orderBy } = states;
+        return (React.createElement(Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight }, columns.map((column, index) => {
+            // Destruct
+            const { align, field, header, headerCellRenderer, sortable, sortAsc = true, type } = column;
+            // Header text
+            const headerText = header !== null && header !== void 0 ? header : field;
+            // Cell props
+            const cellProps = {};
+            // Sortable
+            let sortLabel;
+            if (headerCellRenderer) {
+                sortLabel = headerCellRenderer({
+                    cellProps,
+                    column,
+                    columnIndex: checkable ? index - 1 : index,
+                    states
+                });
+            }
+            else if (sortable && field != null) {
+                const active = orderBy === field;
+                sortLabel = (React.createElement(TableSortLabel, { active: active, direction: sortAsc ? 'asc' : 'desc', onClick: (_event) => {
+                        if (active)
+                            column.sortAsc = !sortAsc;
+                        handleSort(field, column.sortAsc);
+                    } }, headerText));
+            }
+            else {
+                sortLabel = headerText;
+            }
+            return (React.createElement(Box, { key: field !== null && field !== void 0 ? field : index.toString(), textAlign: GridAlignGet(align, type), width: columnWidth(index) },
+                React.createElement(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps }, sortLabel)));
+        })));
+    };
+    function defaultFooterRenderer(rows, states) {
+        return (React.createElement(Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1 }, columns.map((column, index) => {
+            // Destruct
+            const { align, field, type } = column;
+            // Cell props
+            const cellProps = {};
+            // Cell
+            const cell = footerItemRenderer
+                ? footerItemRenderer(rows, {
+                    column,
+                    index: checkable ? index - 1 : index,
+                    states,
+                    cellProps,
+                    checkable
+                })
+                : undefined;
+            return (React.createElement(Box, { key: 'bottom-' + (field !== null && field !== void 0 ? field : index.toString()), textAlign: GridAlignGet(align, type), width: columnWidth(index) },
+                React.createElement(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps }, cell)));
+        })));
+    }
+    // Destruct
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = '#f6f9fb', idField = 'id', mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = '#edf4fb', width, ...rest } = props;
+    if (checkable) {
+        const cbColumn = {
+            field: 'selected',
+            header: '',
+            sortable: false,
+            width: 50,
+            cellRenderer: ({ cellProps, data, selected }) => {
+                cellProps.sx = {
+                    padding: '4px!important'
+                };
+                return (React.createElement(Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
+                        var _a;
+                        (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.selectItem(data, checked);
+                    } }));
+            },
+            headerCellRenderer: ({ cellProps, states }) => {
+                // 2 = border height
+                const hpad = (headerHeight - 42) / 2;
+                cellProps.sx = {
+                    padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
+                };
+                return (React.createElement(Checkbox, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
+                        states.selectedItems.length < states.loadedItems, checked: states.selectedItems.length > 0, onChange: (_event, checked) => { var _a; return (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.selectAll(checked); } }));
+            }
+        };
+        // Update to the latest version
+        if (columns[0].field === 'selected') {
+            columns[0] = cbColumn;
+        }
+        else {
+            columns.unshift(cbColumn);
+        }
+    }
+    const refs = React.useRef({});
+    const mRefLocal = useCombinedRefs(mRef, (ref) => {
+        if (ref == null)
+            return;
+        refs.current.ref = ref;
+    });
+    // New sort
+    const handleSort = (field, asc) => {
+        reset({ orderBy: field, orderByAsc: asc });
+    };
+    // Reset
+    const reset = (add) => {
+        var _a;
+        (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.reset(add);
+    };
+    // Show hover tooltip for trucated text
+    const handleMouseEnter = (event) => {
+        const div = event.currentTarget;
+        const { innerText, offsetWidth, scrollWidth } = div;
+        if (offsetWidth < scrollWidth) {
+            div.title = innerText;
+        }
+        else {
+            div.title = '';
+        }
+    };
+    // selectedRowIndex state
+    const selectedRowIndex = React.useRef(-1);
+    const handleMouseDown = (event) => {
+        const div = event.currentTarget;
+        const row = div.dataset['row'];
+        if (div.parentElement == null || row == null)
+            return;
+        const rowIndex = parseFloat(row);
+        // No change
+        if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
+            return;
+        if (selectedRowIndex.current != -1) {
+            doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
+                preDiv.classList.remove('DataGridEx-Selected');
+            });
+        }
+        rowItems(div, (currentDiv) => {
+            currentDiv.classList.add('DataGridEx-Selected');
+        });
+        selectedRowIndex.current = rowIndex;
+    };
+    const handleMouseOver = (event) => {
+        rowItems(event.currentTarget, (div) => {
+            div.classList.add('DataGridEx-Hover');
+        });
+    };
+    const handleMouseOut = (event) => {
+        rowItems(event.currentTarget, (div) => {
+            div.classList.remove('DataGridEx-Hover');
+        });
+    };
+    /**
+     * Item renderer
+     */
+    const itemRenderer = ({ columnIndex, rowIndex, style, data, selectedItems }) => {
+        // Column
+        const { align, cellRenderer = DataGridRenderers.defaultCellRenderer, field, type, valueFormatter, renderProps } = columns[columnIndex];
+        // Props
+        const formatProps = {
+            data,
+            field,
+            rowIndex,
+            columnIndex
+        };
+        let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+        if (borderRowsCount != null &&
+            borderRowsCount > 0 &&
+            (rowIndex + 1) % borderRowsCount === 0) {
+            rowClass += ` DataGridEx-Cell-Border`;
+        }
+        // Selected
+        const selected = data != null &&
+            (selectedRowIndex.current === rowIndex ||
+                selectedItems.some((selectedItem) => selectedItem != null &&
+                    selectedItem[idField] === data[idField]));
+        if (selected) {
+            rowClass += ` DataGridEx-Selected`;
+        }
+        const cellProps = {
+            className: 'DataGridEx-Cell',
+            textAlign: GridAlignGet(align, type)
+        };
+        const child = cellRenderer({
+            data,
+            field,
+            formattedValue: valueFormatter
+                ? valueFormatter(formatProps)
+                : undefined,
+            selected,
+            type,
+            rowIndex,
+            columnIndex,
+            cellProps,
+            renderProps
+        });
+        return (React.createElement("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data) },
+            React.createElement(Box, { ...cellProps, onMouseEnter: handleMouseEnter }, child)));
+    };
+    // Column width calculator
+    const widthCalculator = React.useMemo(() => DataGridExCalColumns(columns), [columns]);
+    // Column width
+    const columnWidth = React.useCallback((index) => {
+        // Ignore null case
+        if (width == null)
+            return 0;
+        // Column
+        const column = columns[index];
+        if (column.width != null)
+            return column.width;
+        // More space
+        const leftWidth = width -
+            widthCalculator.total -
+            (width < 800 ? 0 : scrollbarSize);
+        // Shared width
+        const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
+        return (column.minWidth || minWidth) + sharedWidth;
+    }, [columns, width]);
+    // Table
+    const table = React.useMemo(() => {
+        var _a;
+        const defaultOrderByAsc = defaultOrderBy
+            ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
+            : undefined;
+        return (React.createElement(ScrollerGrid, { className: Utils.mergeClasses('DataGridEx-Body', 'DataGridEx-CustomBar', className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
+                headerHeight -
+                (hideFooter ? 0 : bottomHeight + 1) -
+                scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width !== null && width !== void 0 ? width : 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
+    }, [width]);
+    return (React.createElement(Paper, { sx: {
+            fontSize: '0.875rem',
+            height,
+            '& .DataGridEx-Cell': {
+                padding: 2,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            '& .DataGridEx-CustomBar': {
+                '@media (min-width: 800px)': {
+                    '::-webkit-scrollbar': {
+                        width: scrollbarSize,
+                        height: scrollbarSize,
+                        backgroundColor: '#f6f6f6'
+                    },
+                    '::-webkit-scrollbar-thumb': {
+                        backgroundColor: 'rgba(0,0,0,0.4)',
+                        borderRadius: '2px'
+                    },
+                    '::-webkit-scrollbar-track-piece:start': {
+                        background: 'transparent'
+                    },
+                    '::-webkit-scrollbar-track-piece:end': {
+                        background: 'transparent'
+                    }
+                }
+            }
+        } },
+        React.createElement("div", { className: "DataGridEx-CustomBar", style: {
+                width,
+                overflowX: 'auto',
+                overflowY: 'hidden'
+            } }, table)));
+}

package/lib/DataGridRenderers.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DataGridExFooterItemRendererProps } from './DataGridEx';
+import { GridCellRendererProps } from '@etsoo/react';
+/**
+ * Data grid renderers
+ */
+export declare namespace DataGridRenderers {
+    /**
+     * Default cell renderer
+     * @param param Props
+     * @returns Component
+     */
+    function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }: GridCellRendererProps<T>): React.ReactNode;
+    /**
+     * Default footer item renderer
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
+     * @returns Component
+     */
+    function defaultFooterItemRenderer<T extends object>(_rows: T[], { index, states, checkable }: DataGridExFooterItemRendererProps<T>, location?: number): string | undefined;
+}

package/lib/DataGridRenderers.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { CircularProgress } from '@mui/material';
+import { DateUtils, NumberUtils } from '@etsoo/shared';
+import CheckIcon from '@mui/icons-material/Check';
+import ClearIcon from '@mui/icons-material/Clear';
+import { DateText } from './texts/DateText';
+import { GridDataType } from '@etsoo/react';
+/**
+ * Data grid renderers
+ */
+export var DataGridRenderers;
+(function (DataGridRenderers) {
+    /**
+     * Default cell renderer
+     * @param param Props
+     * @returns Component
+     */
+    function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }) {
+        // Is loading
+        if (data == null) {
+            // First column, show loading indicator
+            if (columnIndex === 0)
+                return React.createElement(CircularProgress, { size: 15 });
+            // Others return undefined
+            return undefined;
+        }
+        // No formatted value and data field
+        if (formattedValue == null && field == null)
+            return undefined;
+        // Cell value
+        const value = formattedValue !== null && formattedValue !== void 0 ? formattedValue : data[field];
+        if (value == null)
+            return undefined;
+        // For date time
+        // Conversion if necessary
+        if (type === GridDataType.Date || type === GridDataType.DateTime) {
+            const dateValue = value instanceof Date ? value : new Date(value);
+            const option = type === GridDataType.DateTime ? 'ds' : 'd';
+            const nearDays = renderProps === null || renderProps === void 0 ? void 0 : renderProps.nearDays;
+            if (nearDays != null) {
+                return (React.createElement(DateText, { value: dateValue, locale: renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, timeZone: renderProps === null || renderProps === void 0 ? void 0 : renderProps.timeZone, options: option, nearDays: nearDays }));
+            }
+            return DateUtils.format(dateValue, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, option, renderProps === null || renderProps === void 0 ? void 0 : renderProps.timeZone);
+        }
+        // For numbers
+        if (typeof value === 'number') {
+            if (type === GridDataType.Money || type === GridDataType.IntMoney)
+                return NumberUtils.formatMoney(value, renderProps === null || renderProps === void 0 ? void 0 : renderProps.currency, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, type === GridDataType.IntMoney, renderProps === null || renderProps === void 0 ? void 0 : renderProps.numberFormatOptions);
+            else
+                return NumberUtils.format(value, renderProps === null || renderProps === void 0 ? void 0 : renderProps.culture, renderProps === null || renderProps === void 0 ? void 0 : renderProps.numberFormatOptions);
+        }
+        // For boolean
+        if (typeof value === 'boolean') {
+            // Add style
+            if ('align' in cellProps) {
+                cellProps.sx = {
+                    paddingTop: '12px!important',
+                    paddingBottom: '6px!important'
+                };
+            }
+            else {
+                cellProps.sx = {
+                    paddingTop: '16px!important',
+                    paddingBottom: '8px!important'
+                };
+            }
+            if (value)
+                return React.createElement(CheckIcon, { fontSize: "small" });
+            else
+                return React.createElement(ClearIcon, { fontSize: "small", color: "warning" });
+        }
+        // To string
+        return new String(value);
+    }
+    DataGridRenderers.defaultCellRenderer = defaultCellRenderer;
+    /**
+     * Default footer item renderer
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
+     * @returns Component
+     */
+    function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 0) {
+        const { selectedItems, loadedItems, hasNextPage } = states;
+        if (index === location) {
+            if (checkable) {
+                return [
+                    selectedItems.length,
+                    loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
+                ].join(' / ');
+            }
+            else {
+                return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
+            }
+        }
+        return undefined;
+    }
+    DataGridRenderers.defaultFooterItemRenderer = defaultFooterItemRenderer;
+})(DataGridRenderers || (DataGridRenderers = {}));

package/lib/DialogButton.d.ts

@@ -0,0 +1,54 @@
+import { Breakpoint, ButtonProps } from '@mui/material';
+import React from 'react';
+export interface DialogButtonProps extends ButtonProps {
+    /**
+     * Button label
+     */
+    buttonLabel?: string;
+    /**
+     * Dialog content
+     */
+    content: string;
+    /**
+     * Show content in pre component
+     */
+    contentPre?: boolean;
+    /**
+     * Default is label
+     */
+    dialogTitle?: string;
+    /**
+     * Disable the scroll lock behavior.
+     * @default false
+     */
+    disableScrollLock?: boolean;
+    /**
+     * Show fullscreen dialog
+     */
+    fullScreen?: boolean;
+    /**
+     * If `true`, the dialog stretches to `maxWidth`.
+     *
+     * Notice that the dialog width grow is limited by the default margin.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Other layouts
+     */
+    inputs?: React.ReactNode;
+    /**
+     * Max width of the dialog
+     */
+    maxWidth?: Breakpoint | false;
+    /**
+     * Icon button
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * Dialog button
+ * @param props Props
+ * @returns Component
+ */
+export declare function DialogButton(props: DialogButtonProps): JSX.Element;

package/lib/DialogButton.js

@@ -0,0 +1,45 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material';
+import React from 'react';
+import { Labels } from './app/Labels';
+/**
+ * Dialog button
+ * @param props Props
+ * @returns Component
+ */
+export function DialogButton(props) {
+    var _a;
+    // Labels shared with NotificationMU
+    const labels = Labels.NotificationMU;
+    // Destruct
+    const { buttonLabel = labels.alertOK, children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, fullWidth, icon, inputs, maxWidth, onClick, title, ...rest } = props;
+    // Open state
+    const [open, setOpen] = React.useState(false);
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+    // Onclick handler
+    const onClickLocal = (event) => {
+        // Stop propagation
+        event.stopPropagation();
+        event.preventDefault();
+        // Show dialog
+        handleClickOpen();
+        // Additional callback
+        if (onClick)
+            onClick(event);
+    };
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        icon == null ? (React.createElement(Button, { ...rest, title: title, onClick: onClickLocal }, children)) : (React.createElement(IconButton, { ...rest, onClick: onClickLocal, title: title !== null && title !== void 0 ? title : children === null || children === void 0 ? void 0 : children.toString() }, icon)),
+        React.createElement(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
+                // The dialog will be embeded and the click event will bubble up
+                // Stop propatation but will also cancel onClose and onBackdropClick event
+                event.stopPropagation();
+            } },
+            React.createElement(DialogTitle, null, (_a = dialogTitle !== null && dialogTitle !== void 0 ? dialogTitle : title) !== null && _a !== void 0 ? _a : children),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, { component: contentPre ? 'pre' : 'span' }, content),
+                inputs),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: () => setOpen(false) }, buttonLabel)))));
+}

package/lib/DnDList.d.ts

@@ -0,0 +1,87 @@
+import { UniqueIdentifier } from '@dnd-kit/core';
+import { DataTypes } from '@etsoo/shared';
+import { Theme } from '@mui/material';
+import React, { CSSProperties } from 'react';
+/**
+ * DnD item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export declare const DnDItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
+    padding: string;
+    zIndex: string | number;
+    background: string;
+};
+/**
+ * DnD list forward ref
+ */
+export interface DnDListRef<D extends object> {
+    /**
+     * Add item
+     * @param item New item
+     */
+    addItem(item: D): void;
+    /**
+     * Add items
+     * @param items items
+     */
+    addItems(items: D[]): void;
+    /**
+     * Delete item
+     * @param index Item index
+     */
+    deleteItem(index: number): void;
+    /**
+     * Edit item
+     * @param newItem New item
+     * @param index Index
+     */
+    editItem(newItem: D, index: number): boolean;
+}
+/**
+ * DnD sortable list properties
+ */
+export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+    /**
+     * Item renderer
+     */
+    itemRenderer: (item: D, index: number, nodeRef: React.ComponentProps<any>, actionNodeRef: React.ComponentProps<any>) => React.ReactElement;
+    /**
+     * List items
+     */
+    items: D[];
+    /**
+     * Unique key field
+     */
+    keyField: K;
+    /**
+     * Label field
+     */
+    labelField: K;
+    /**
+     * Methods ref
+     */
+    mRef?: React.Ref<DnDListRef<D>>;
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
+}
+/**
+ * DnD (Drag and Drop) sortable list
+ * @param props Props
+ * @returns Component
+ */
+export declare function DnDList<D extends {
+    id: UniqueIdentifier;
+}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): JSX.Element;