@etsoo/materialui 1.6.12 → 1.6.13

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -1,6 +1,8 @@
 import { ButtonProps } from "@mui/material/Button";
 import { IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
 import { DnDSortableListProps } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -64,6 +66,10 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/cjs/ButtonPopupCheckbox.js

@@ -22,7 +22,7 @@ const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 const DnDSortableList_1 = require("./DnDSortableList");
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value = [], items, itemSize = { xs: 12, md: 6, lx: 4 }, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = react_1.default.createRef();
     // Refs
@@ -45,7 +45,7 @@ function ButtonPopupList(props) {
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, 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) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: itemSize, 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)
@@ -81,7 +81,7 @@ function ButtonPopupCheckbox(props) {
     // App
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, value = [], inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (typeof labelField === "function")
             return labelField(data);
         if (labelField in data) {
@@ -130,7 +130,7 @@ function ButtonPopupCheckbox(props) {
                 setSelectedIds(ids);
                 onValueChange?.(ids);
             },
-            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, itemSize: itemSize, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
                     tempSelectedIds.current = ids;
                 } })),
             fullScreen: app.smDown

package/lib/cjs/ButtonPopupRadio.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from "@mui/material/Button";
 import { DataTypes, IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -63,6 +65,10 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "ch
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/cjs/ButtonPopupRadio.js

@@ -21,7 +21,7 @@ const FlexBox_1 = require("./FlexBox");
 const ReactApp_1 = require("./app/ReactApp");
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, itemSize = { xs: 12, md: 6, lx: 4 }, onAdd, onValueChange } = props;
     // Ref
     const inputRef = react_1.default.useRef(null);
     // State
@@ -38,7 +38,7 @@ function ButtonPopupList(props) {
                         : undefined;
                     setCurrentValue(value);
                     onValueChange(value);
-                }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: items.map((item) => ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Radio_1.default, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), 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 () => {
+                }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: items.map((item) => ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Radio_1.default, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), 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();
@@ -66,7 +66,7 @@ function ButtonPopupRadio(props) {
     // App
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { addSplitter, inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
@@ -115,7 +115,7 @@ function ButtonPopupRadio(props) {
                 setCurrentValue(id);
                 onValueChange?.(id);
             },
-            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, itemSize: itemSize, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
                     tempSelectedId.current = id;
                 } })),
             fullScreen: app.smDown

package/lib/cjs/DnDSortableList.d.ts

@@ -91,7 +91,7 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
     /**
      * Drag start handler
      */
-    onDragStart?: (items: D[], source: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
     /**
      * Drag end handler
      */

package/lib/cjs/DnDSortableList.js

@@ -123,7 +123,28 @@ function DnDSortableList(props) {
             }
         };
     }, [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) => {
+    function handleDragEnd(...args) {
+        // Event
+        const event = args[0];
+        // Cancelled
+        if (event.canceled)
+            return;
+        if ((0, sortable_1.isSortableOperation)(event.operation) && event.operation.source) {
+            const { initialIndex, index } = event.operation.source;
+            if (initialIndex === index)
+                return;
+            // Clone
+            const newItems = [...items];
+            // Removed item
+            const [removed] = newItems.splice(initialIndex, 1);
+            // Insert to the destination index
+            newItems.splice(index, 0, removed);
+            changeItems(newItems);
+            // Drag end handler
+            onDragEnd?.(newItems, ...args);
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { onDragStart: (event) => onDragStart?.(items, event), onDragEnd: (event, manager) => handleDragEnd(event, manager), 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/mjs/ButtonPopupCheckbox.d.ts

@@ -1,6 +1,8 @@
 import { ButtonProps } from "@mui/material/Button";
 import { IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
 import { DnDSortableListProps } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -64,6 +66,10 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/mjs/ButtonPopupCheckbox.js

@@ -16,7 +16,7 @@ import FormLabel from "@mui/material/FormLabel";
 import { DnDSortableList } from "./DnDSortableList";
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value = [], items, itemSize = { xs: 12, md: 6, lx: 4 }, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = React.createRef();
     // Refs
@@ -39,7 +39,7 @@ function ButtonPopupList(props) {
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, 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) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { size: itemSize, 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)
@@ -75,7 +75,7 @@ export function ButtonPopupCheckbox(props) {
     // App
     const app = useRequiredAppContext();
     // Destruct
-    const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, value = [], inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (typeof labelField === "function")
             return labelField(data);
         if (labelField in data) {
@@ -124,7 +124,7 @@ export function ButtonPopupCheckbox(props) {
                 setSelectedIds(ids);
                 onValueChange?.(ids);
             },
-            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
+            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, itemSize: itemSize, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
                     tempSelectedIds.current = ids;
                 } })),
             fullScreen: app.smDown

package/lib/mjs/ButtonPopupRadio.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from "@mui/material/Button";
 import { DataTypes, IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -63,6 +65,10 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "ch
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/mjs/ButtonPopupRadio.js

@@ -15,7 +15,7 @@ import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, itemSize = { xs: 12, md: 6, lx: 4 }, onAdd, onValueChange } = props;
     // Ref
     const inputRef = React.useRef(null);
     // State
@@ -32,7 +32,7 @@ function ButtonPopupList(props) {
                         : undefined;
                     setCurrentValue(value);
                     onValueChange(value);
-                }, children: _jsx(Grid, { container: true, spacing: 0, children: items.map((item) => (_jsx(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: _jsx(FormControlLabel, { control: _jsx(Radio, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), 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 () => {
+                }, children: _jsx(Grid, { container: true, spacing: 0, children: items.map((item) => (_jsx(Grid, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: _jsx(FormControlLabel, { control: _jsx(Radio, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), 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();
@@ -60,7 +60,7 @@ export function ButtonPopupRadio(props) {
     // App
     const app = useRequiredAppContext();
     // Destruct
-    const { addSplitter, inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
@@ -109,7 +109,7 @@ export function ButtonPopupRadio(props) {
                 setCurrentValue(id);
                 onValueChange?.(id);
             },
-            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
+            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, itemSize: itemSize, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
                     tempSelectedId.current = id;
                 } })),
             fullScreen: app.smDown

package/lib/mjs/DnDSortableList.d.ts

@@ -91,7 +91,7 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
     /**
      * Drag start handler
      */
-    onDragStart?: (items: D[], source: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
     /**
      * Drag end handler
      */

package/lib/mjs/DnDSortableList.js

@@ -1,7 +1,7 @@
 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 { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
 import { DragDropProvider } from "@dnd-kit/react";
 /**
  * DnD sortable item default style
@@ -115,7 +115,28 @@ export function DnDSortableList(props) {
             }
         };
     }, [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) => {
+    function handleDragEnd(...args) {
+        // Event
+        const event = args[0];
+        // Cancelled
+        if (event.canceled)
+            return;
+        if (isSortableOperation(event.operation) && event.operation.source) {
+            const { initialIndex, index } = event.operation.source;
+            if (initialIndex === index)
+                return;
+            // Clone
+            const newItems = [...items];
+            // Removed item
+            const [removed] = newItems.splice(initialIndex, 1);
+            // Insert to the destination index
+            newItems.splice(index, 0, removed);
+            changeItems(newItems);
+            // Drag end handler
+            onDragEnd?.(newItems, ...args);
+        }
+    }
+    return (_jsx(DragDropProvider, { onDragStart: (event) => onDragStart?.(items, event), onDragEnd: (event, manager) => handleDragEnd(event, manager), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.12",
+  "version": "1.6.13",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ButtonPopupCheckbox.tsx

@@ -2,7 +2,7 @@ import Button, { ButtonProps } from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import React from "react";
 import { DataTypes, IdType } from "@etsoo/shared";
-import Grid from "@mui/material/Grid";
+import Grid, { GridSize } from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import AddIcon from "@mui/icons-material/Add";
@@ -18,6 +18,7 @@ import {
   DnDSortableListProps,
   DnDSortableListRef
 } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 type DnDItemType = {
   id: IdType;
@@ -99,6 +100,11 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
    */
   required?: boolean;
 
+  /**
+   * Item size
+   */
+  itemSize?: ResponsiveStyleValue<GridSize>;
+
   /**
    * Value
    */
@@ -107,7 +113,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
 
 type ButtonPopupListProps<D extends DnDItemType> = Pick<
   ButtonPopupCheckboxProps<D>,
-  "addSplitter" | "labelField" | "labels" | "onAdd" | "value"
+  "addSplitter" | "labelField" | "labels" | "onAdd" | "value" | "itemSize"
 > &
   Required<Pick<ButtonPopupCheckboxProps<D>, "labelFormatter">> & {
     /**
@@ -130,6 +136,7 @@ function ButtonPopupList<D extends DnDItemType>(
     addSplitter = /\s*[,;]\s*/,
     value = [],
     items,
+    itemSize = { xs: 12, md: 6, lx: 4 },
     labelField,
     labelFormatter,
     labels,
@@ -180,7 +187,7 @@ function ButtonPopupList<D extends DnDItemType>(
           { sortable: { index }, ref, handleRef }
         ) => (
           <Grid
-            size={{ xs: 12, md: 6, lg: 4 }}
+            size={itemSize}
             display="flex"
             justifyContent="flex-start"
             alignItems="center"
@@ -281,6 +288,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
     addSplitter,
     value = [],
     inputName,
+    itemSize,
     label,
     labelEnd,
     labelFormatter = (data) => {
@@ -353,6 +361,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
           items={items}
           labelFormatter={labelFormatter}
           labelField={labelField}
+          itemSize={itemSize}
           labels={labels}
           onAdd={onAdd}
           onValueChange={(ids) => {

package/src/ButtonPopupRadio.tsx

@@ -2,7 +2,7 @@ import Button, { ButtonProps } from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import React from "react";
 import { DataTypes, IdType, NumberUtils } from "@etsoo/shared";
-import Grid from "@mui/material/Grid";
+import Grid, { GridSize } from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import AddIcon from "@mui/icons-material/Add";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -12,6 +12,7 @@ import FormLabel from "@mui/material/FormLabel";
 import RadioGroup from "@mui/material/RadioGroup";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 type DnDItemType = {
   id: IdType;
@@ -93,6 +94,11 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<
    */
   required?: boolean;
 
+  /**
+   * Item size
+   */
+  itemSize?: ResponsiveStyleValue<GridSize>;
+
   /**
    * Value
    */
@@ -101,7 +107,7 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<
 
 type ButtonPopupListProps<D extends DnDItemType> = Pick<
   ButtonPopupRadioProps<D>,
-  "addSplitter" | "labels" | "onAdd" | "value"
+  "addSplitter" | "labels" | "onAdd" | "value" | "itemSize"
 > &
   Required<Pick<ButtonPopupRadioProps<D>, "labelFormatter">> & {
     /**
@@ -126,6 +132,7 @@ function ButtonPopupList<D extends DnDItemType>(
     items,
     labelFormatter,
     labels,
+    itemSize = { xs: 12, md: 6, lx: 4 },
     onAdd,
     onValueChange
   } = props;
@@ -159,7 +166,7 @@ function ButtonPopupList<D extends DnDItemType>(
         <Grid container spacing={0}>
           {items.map((item) => (
             <Grid
-              size={{ xs: 12, md: 6, lg: 4 }}
+              size={itemSize}
               display="flex"
               justifyContent="flex-start"
               alignItems="center"
@@ -233,6 +240,7 @@ export function ButtonPopupRadio<D extends DnDItemType>(
   const {
     addSplitter,
     inputName,
+    itemSize,
     label,
     labelEnd,
     labelFormatter = (data) => {
@@ -305,6 +313,7 @@ export function ButtonPopupRadio<D extends DnDItemType>(
           addSplitter={addSplitter}
           value={currentValue}
           items={items}
+          itemSize={itemSize}
           labelFormatter={labelFormatter}
           labels={labels}
           onAdd={onAdd}

package/src/DnDSortableList.tsx

@@ -1,7 +1,7 @@
 import { DataTypes, IdType } from "@etsoo/shared";
 import React from "react";
 import { CSSProperties, Theme, useTheme } from "@mui/material/styles";
-import { useSortable } from "@dnd-kit/react/sortable";
+import { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
 import { DragDropEvents, DragDropProvider } from "@dnd-kit/react";
 
 /**
@@ -126,7 +126,7 @@ export type DnDSortableListProps<
    */
   onDragStart?: (
     items: D[],
-    source: Parameters<DragDropEvents["dragstart"]>[0]
+    event: Parameters<DragDropEvents["dragstart"]>[0]
   ) => void;
 
   /**
@@ -293,10 +293,37 @@ export function DnDSortableList<
     };
   }, [items, labelFn, changeItems]);
 
+  function handleDragEnd(...args: Parameters<DragDropEvents["dragend"]>) {
+    // Event
+    const event = args[0];
+
+    // Cancelled
+    if (event.canceled) return;
+
+    if (isSortableOperation(event.operation) && event.operation.source) {
+      const { initialIndex, index } = event.operation.source;
+      if (initialIndex === index) return;
+
+      // Clone
+      const newItems = [...items];
+
+      // Removed item
+      const [removed] = newItems.splice(initialIndex, 1);
+
+      // Insert to the destination index
+      newItems.splice(index, 0, removed);
+
+      changeItems(newItems);
+
+      // Drag end handler
+      onDragEnd?.(newItems, ...args);
+    }
+  }
+
   return (
     <DragDropProvider
-      onDragStart={(source) => onDragStart?.(items, source)}
-      onDragEnd={(source, target) => onDragEnd?.(items, source, target)}
+      onDragStart={(event) => onDragStart?.(items, event)}
+      onDragEnd={(event, manager) => handleDragEnd(event, manager)}
     >
       <Component {...componentProps}>
         {items.map((item, index) => {