@etsoo/materialui 1.6.11 → 1.6.13

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -1,5 +1,8 @@
 import { ButtonProps } from "@mui/material/Button";
-import { DataTypes, IdType } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
+import { DnDSortableListProps } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -23,7 +26,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
@@ -63,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

@@ -19,10 +19,10 @@ 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;
+    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
@@ -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: 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)
                                     ];
                                     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();
@@ -81,7 +81,9 @@ 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) {
             return data[labelField];
         }
@@ -128,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

@@ -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[], event: 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,151 @@
+"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]);
+    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/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,8 @@
 import { ButtonProps } from "@mui/material/Button";
-import { DataTypes, IdType } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
+import { DnDSortableListProps } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -23,7 +26,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
@@ -63,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

@@ -13,10 +13,10 @@ 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;
+    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
@@ -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: 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)
                                     ];
                                     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();
@@ -75,7 +75,9 @@ 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) {
             return data[labelField];
         }
@@ -122,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