@etsoo/materialui 1.6.11 → 1.6.12

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps } from "@mui/material/Button";
-import { DataTypes, IdType } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
+import { DnDSortableListProps } from "./DnDSortableList";
 type DnDItemType = {
     id: IdType;
 };
@@ -23,7 +24,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
     /**
      * Label field in items
      */
-    labelField: DataTypes.Keys<D>;
+    labelField: DnDSortableListProps<D>["labelField"];
     /**
      * Label formatter
      * @param item Item to be formatted

package/lib/cjs/ButtonPopupCheckbox.js

@@ -19,7 +19,7 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const FlexBox_1 = require("./FlexBox");
 const ReactApp_1 = require("./app/ReactApp");
 const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
-const DnDList_1 = require("./DnDList");
+const DnDSortableList_1 = require("./DnDSortableList");
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -40,18 +40,18 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIdsHandler([...value]);
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDSortableList_1.DnDSortableList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onChange: (items) => {
                     const ids = items
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
                                     const checked = e.target.checked;
                                     const newIds = [
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
                                     setSelectedIdsHandler(newIds);
-                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
+                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), mRef: dndRef }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();
@@ -82,6 +82,8 @@ function ButtonPopupCheckbox(props) {
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
     const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
+        if (typeof labelField === "function")
+            return labelField(data);
         if (labelField in data) {
             return data[labelField];
         }

package/lib/cjs/DnDSortableList.d.ts

@@ -0,0 +1,105 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import React from "react";
+import { CSSProperties, Theme } from "@mui/material/styles";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { DragDropEvents } from "@dnd-kit/react";
+/**
+ * DnD sortable item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export declare const DnDSortableItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
+    padding: string;
+    transform: string;
+    zIndex: string | number;
+    boxShadow: string;
+    background: string;
+};
+/**
+ * DnD sortable list forward ref
+ */
+export interface DnDSortableListRef<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;
+    /**
+     * Get all items
+     */
+    getItems(): D[];
+}
+/**
+ * DnD sortable list props
+ */
+export type DnDSortableListProps<D extends object, E extends React.ElementType = React.ElementType> = {
+    /**
+     * Component type to render the list into
+     * Default is React.Fragment
+     */
+    component?: E;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<E>;
+    /**
+     * List items
+     */
+    items: D[];
+    /**
+     * Id field
+     */
+    idField?: DataTypes.Keys<D> | ((item: D) => IdType);
+    /**
+     * Label field
+     */
+    labelField: DataTypes.Keys<D, string> | ((item: D) => string);
+    /**
+     * Methods ref
+     */
+    mRef?: React.Ref<DnDSortableListRef<D>>;
+    /**
+     * Item renderer
+     */
+    itemRenderer: (data: D, style: CSSProperties, state: ReturnType<typeof useSortable<D>>) => React.ReactElement;
+    /**
+     * Get list item style callback
+     */
+    itemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+    /**
+     * Drag start handler
+     */
+    onDragStart?: (items: D[], source: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[], ...args: Parameters<DragDropEvents["dragend"]>) => void;
+};
+/**
+ * DnD sortable list component
+ * @param props Props
+ * @returns Component
+ */
+export declare function DnDSortableList<D extends object, E extends React.ElementType = React.ElementType>(props: DnDSortableListProps<D, E>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DnDSortableList.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DnDSortableItemStyle = void 0;
+exports.DnDSortableList = DnDSortableList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("@mui/material/styles");
+const sortable_1 = require("@dnd-kit/react/sortable");
+const react_2 = require("@dnd-kit/react");
+/**
+ * DnD sortable item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+const DnDSortableItemStyle = (index, isDragging, theme) => ({
+    padding: theme.spacing(1),
+    transform: isDragging ? "scale(1.03)" : "none",
+    zIndex: isDragging ? 1 : "auto",
+    boxShadow: isDragging
+        ? `-1px 0 8px 0 ${theme.palette.grey[400]}, 0px 8px 8px 0 ${theme.palette.grey[200]}`
+        : "none",
+    background: isDragging
+        ? theme.palette.primary.light
+        : index % 2 === 0
+            ? theme.palette.grey[100]
+            : theme.palette.grey[50]
+});
+exports.DnDSortableItemStyle = DnDSortableItemStyle;
+function SortableItem(props) {
+    const theme = (0, styles_1.useTheme)();
+    const { id, data, index, itemRenderer, itemStyle = (index, isDragging) => (0, exports.DnDSortableItemStyle)(index, isDragging, theme) } = props;
+    const state = (0, sortable_1.useSortable)({ id, data, index });
+    const style = itemStyle(index, state.isDragging);
+    return itemRenderer(data, style, state);
+}
+/**
+ * DnD sortable list component
+ * @param props Props
+ * @returns Component
+ */
+function DnDSortableList(props) {
+    // Destruct
+    const Component = props.component || react_1.default.Fragment;
+    const { componentProps, idField, itemRenderer, itemStyle, labelField, mRef, onChange, onDragStart, onDragEnd } = props;
+    const idFn = typeof idField === "function"
+        ? idField
+        : (item) => !idField
+            ? Reflect.get(item, "id")
+            : item[idField];
+    const labelFn = react_1.default.useCallback(typeof labelField === "function"
+        ? labelField
+        : (item) => item[labelField], [labelField]);
+    // States
+    const [items, setItems] = react_1.default.useState([]);
+    react_1.default.useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    const changeItems = react_1.default.useCallback((newItems) => {
+        // Possible to alter items with the handler
+        onChange?.(newItems);
+        // Update state
+        setItems(newItems);
+    }, [onChange]);
+    // Methods
+    react_1.default.useImperativeHandle(mRef, () => {
+        return {
+            addItem(newItem) {
+                // Existence check
+                if (items.some((item) => labelFn(item) === labelFn(newItem))) {
+                    return false;
+                }
+                // Clone
+                const newItems = [newItem, ...items];
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            addItems(inputItems) {
+                // Clone
+                const newItems = [...items];
+                // Insert items
+                inputItems.forEach((newItem) => {
+                    // Existence check
+                    if (newItems.some((item) => labelFn(item) === labelFn(newItem))) {
+                        return;
+                    }
+                    newItems.push(newItem);
+                });
+                // Update the state
+                changeItems(newItems);
+                return newItems.length - items.length;
+            },
+            editItem(newItem, index) {
+                // Existence check
+                const newIndex = items.findIndex((item) => labelFn(item) === labelFn(newItem));
+                if (newIndex >= 0 && newIndex !== index) {
+                    // Label field is the same with a different item
+                    return false;
+                }
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1, newItem);
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            deleteItem(index) {
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1);
+                // Update the state
+                changeItems(newItems);
+            },
+            getItems() {
+                return items;
+            }
+        };
+    }, [items, labelFn, changeItems]);
+    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { onDragStart: (source) => onDragStart?.(items, source), onDragEnd: (source, target) => onDragEnd?.(items, source, target), children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, children: items.map((item, index) => {
+                const id = idFn(item);
+                return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, index: index, data: item, itemRenderer: itemRenderer, itemStyle: itemStyle }, id));
+            }) }) }));
+}

package/lib/cjs/index.d.ts

@@ -54,7 +54,7 @@ export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
-export * from "./DnDList";
+export * from "./DnDSortableList";
 export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";

package/lib/cjs/index.js

@@ -70,7 +70,7 @@ __exportStar(require("./DataLoadField"), exports);
 __exportStar(require("./DataSteps"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./DialogButton"), exports);
-__exportStar(require("./DnDList"), exports);
+__exportStar(require("./DnDSortableList"), exports);
 __exportStar(require("./DownUpButton"), exports);
 __exportStar(require("./DraggablePaperComponent"), exports);
 __exportStar(require("./EmailInput"), exports);

package/lib/mjs/ButtonPopupCheckbox.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps } from "@mui/material/Button";
-import { DataTypes, IdType } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
+import { DnDSortableListProps } from "./DnDSortableList";
 type DnDItemType = {
     id: IdType;
 };
@@ -23,7 +24,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
     /**
      * Label field in items
      */
-    labelField: DataTypes.Keys<D>;
+    labelField: DnDSortableListProps<D>["labelField"];
     /**
      * Label formatter
      * @param item Item to be formatted

package/lib/mjs/ButtonPopupCheckbox.js

@@ -13,7 +13,7 @@ import TextField from "@mui/material/TextField";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
-import { DnDList } from "./DnDList";
+import { DnDSortableList } from "./DnDSortableList";
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -34,18 +34,18 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIdsHandler([...value]);
     }, [value]);
-    return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onFormChange: (items) => {
+    return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDSortableList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onChange: (items) => {
                     const ids = items
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
                                     const checked = e.target.checked;
                                     const newIds = [
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
                                     setSelectedIdsHandler(newIds);
-                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
+                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), mRef: dndRef }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();
@@ -76,6 +76,8 @@ export function ButtonPopupCheckbox(props) {
     const app = useRequiredAppContext();
     // Destruct
     const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
+        if (typeof labelField === "function")
+            return labelField(data);
         if (labelField in data) {
             return data[labelField];
         }

package/lib/mjs/DnDSortableList.d.ts

@@ -0,0 +1,105 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import React from "react";
+import { CSSProperties, Theme } from "@mui/material/styles";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { DragDropEvents } from "@dnd-kit/react";
+/**
+ * DnD sortable item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export declare const DnDSortableItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
+    padding: string;
+    transform: string;
+    zIndex: string | number;
+    boxShadow: string;
+    background: string;
+};
+/**
+ * DnD sortable list forward ref
+ */
+export interface DnDSortableListRef<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;
+    /**
+     * Get all items
+     */
+    getItems(): D[];
+}
+/**
+ * DnD sortable list props
+ */
+export type DnDSortableListProps<D extends object, E extends React.ElementType = React.ElementType> = {
+    /**
+     * Component type to render the list into
+     * Default is React.Fragment
+     */
+    component?: E;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<E>;
+    /**
+     * List items
+     */
+    items: D[];
+    /**
+     * Id field
+     */
+    idField?: DataTypes.Keys<D> | ((item: D) => IdType);
+    /**
+     * Label field
+     */
+    labelField: DataTypes.Keys<D, string> | ((item: D) => string);
+    /**
+     * Methods ref
+     */
+    mRef?: React.Ref<DnDSortableListRef<D>>;
+    /**
+     * Item renderer
+     */
+    itemRenderer: (data: D, style: CSSProperties, state: ReturnType<typeof useSortable<D>>) => React.ReactElement;
+    /**
+     * Get list item style callback
+     */
+    itemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+    /**
+     * Drag start handler
+     */
+    onDragStart?: (items: D[], source: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[], ...args: Parameters<DragDropEvents["dragend"]>) => void;
+};
+/**
+ * DnD sortable list component
+ * @param props Props
+ * @returns Component
+ */
+export declare function DnDSortableList<D extends object, E extends React.ElementType = React.ElementType>(props: DnDSortableListProps<D, E>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DnDSortableList.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "@mui/material/styles";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { DragDropProvider } from "@dnd-kit/react";
+/**
+ * DnD sortable item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export const DnDSortableItemStyle = (index, isDragging, theme) => ({
+    padding: theme.spacing(1),
+    transform: isDragging ? "scale(1.03)" : "none",
+    zIndex: isDragging ? 1 : "auto",
+    boxShadow: isDragging
+        ? `-1px 0 8px 0 ${theme.palette.grey[400]}, 0px 8px 8px 0 ${theme.palette.grey[200]}`
+        : "none",
+    background: isDragging
+        ? theme.palette.primary.light
+        : index % 2 === 0
+            ? theme.palette.grey[100]
+            : theme.palette.grey[50]
+});
+function SortableItem(props) {
+    const theme = useTheme();
+    const { id, data, index, itemRenderer, itemStyle = (index, isDragging) => DnDSortableItemStyle(index, isDragging, theme) } = props;
+    const state = useSortable({ id, data, index });
+    const style = itemStyle(index, state.isDragging);
+    return itemRenderer(data, style, state);
+}
+/**
+ * DnD sortable list component
+ * @param props Props
+ * @returns Component
+ */
+export function DnDSortableList(props) {
+    // Destruct
+    const Component = props.component || React.Fragment;
+    const { componentProps, idField, itemRenderer, itemStyle, labelField, mRef, onChange, onDragStart, onDragEnd } = props;
+    const idFn = typeof idField === "function"
+        ? idField
+        : (item) => !idField
+            ? Reflect.get(item, "id")
+            : item[idField];
+    const labelFn = React.useCallback(typeof labelField === "function"
+        ? labelField
+        : (item) => item[labelField], [labelField]);
+    // States
+    const [items, setItems] = React.useState([]);
+    React.useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    const changeItems = React.useCallback((newItems) => {
+        // Possible to alter items with the handler
+        onChange?.(newItems);
+        // Update state
+        setItems(newItems);
+    }, [onChange]);
+    // Methods
+    React.useImperativeHandle(mRef, () => {
+        return {
+            addItem(newItem) {
+                // Existence check
+                if (items.some((item) => labelFn(item) === labelFn(newItem))) {
+                    return false;
+                }
+                // Clone
+                const newItems = [newItem, ...items];
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            addItems(inputItems) {
+                // Clone
+                const newItems = [...items];
+                // Insert items
+                inputItems.forEach((newItem) => {
+                    // Existence check
+                    if (newItems.some((item) => labelFn(item) === labelFn(newItem))) {
+                        return;
+                    }
+                    newItems.push(newItem);
+                });
+                // Update the state
+                changeItems(newItems);
+                return newItems.length - items.length;
+            },
+            editItem(newItem, index) {
+                // Existence check
+                const newIndex = items.findIndex((item) => labelFn(item) === labelFn(newItem));
+                if (newIndex >= 0 && newIndex !== index) {
+                    // Label field is the same with a different item
+                    return false;
+                }
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1, newItem);
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            deleteItem(index) {
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1);
+                // Update the state
+                changeItems(newItems);
+            },
+            getItems() {
+                return items;
+            }
+        };
+    }, [items, labelFn, changeItems]);
+    return (_jsx(DragDropProvider, { onDragStart: (source) => onDragStart?.(items, source), onDragEnd: (source, target) => onDragEnd?.(items, source, target), children: _jsx(Component, { ...componentProps, children: items.map((item, index) => {
+                const id = idFn(item);
+                return (_jsx(SortableItem, { id: id, index: index, data: item, itemRenderer: itemRenderer, itemStyle: itemStyle }, id));
+            }) }) }));
+}

package/lib/mjs/index.d.ts

@@ -54,7 +54,7 @@ export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
-export * from "./DnDList";
+export * from "./DnDSortableList";
 export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";

package/lib/mjs/index.js

@@ -54,7 +54,7 @@ export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
-export * from "./DnDList";
+export * from "./DnDSortableList";
 export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.11",
+  "version": "1.6.12",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -36,8 +36,7 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.53",
@@ -46,7 +45,7 @@
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.8",
     "@mui/material": "^7.3.8",
-    "@mui/x-data-grid": "^8.27.1",
+    "@mui/x-data-grid": "^8.27.3",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.1",