@etsoo/materialui 1.6.11 → 1.6.13

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[], 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/mjs/DnDSortableList.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "@mui/material/styles";
+import { isSortableOperation, 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]);
+    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/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.13",
   "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",

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";
@@ -13,7 +13,12 @@ import TextField from "@mui/material/TextField";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
-import { DnDList, DnDListRef } from "./DnDList";
+import {
+  DnDSortableList,
+  DnDSortableListProps,
+  DnDSortableListRef
+} from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 type DnDItemType = {
   id: IdType;
@@ -46,7 +51,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
   /**
    * Label field in items
    */
-  labelField: DataTypes.Keys<D>;
+  labelField: DnDSortableListProps<D>["labelField"];
 
   /**
    * Label formatter
@@ -95,6 +100,11 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
    */
   required?: boolean;
 
+  /**
+   * Item size
+   */
+  itemSize?: ResponsiveStyleValue<GridSize>;
+
   /**
    * Value
    */
@@ -103,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">> & {
     /**
@@ -126,6 +136,7 @@ function ButtonPopupList<D extends DnDItemType>(
     addSplitter = /\s*[,;]\s*/,
     value = [],
     items,
+    itemSize = { xs: 12, md: 6, lx: 4 },
     labelField,
     labelFormatter,
     labels,
@@ -134,7 +145,7 @@ function ButtonPopupList<D extends DnDItemType>(
   } = props;
 
   // Methods
-  const dndRef = React.createRef<DnDListRef<D>>();
+  const dndRef = React.createRef<DnDSortableListRef<D>>();
 
   // Refs
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -158,32 +169,37 @@ function ButtonPopupList<D extends DnDItemType>(
 
   return (
     <VBox gap={2}>
-      <DnDList<D>
+      <DnDSortableList<D>
         component={Grid}
         componentProps={{ container: true, spacing: 0 }}
         items={items}
         labelField={labelField}
-        onFormChange={(items) => {
+        onChange={(items) => {
           const ids = items
             .filter((item) => tempSelectedIds.current.includes(item.id))
             .map((item) => item.id);
 
           onValueChange(ids);
         }}
-        itemRenderer={(item, index, nodeRef, actionNodeRef) => (
+        itemRenderer={(
+          item,
+          style,
+          { sortable: { index }, ref, handleRef }
+        ) => (
           <Grid
-            size={{ xs: 12, md: 6, lg: 4 }}
+            size={itemSize}
             display="flex"
             justifyContent="flex-start"
             alignItems="center"
             gap={1}
-            {...nodeRef}
+            ref={ref}
+            style={style}
           >
             <IconButton
               style={{ cursor: "move" }}
               size="small"
               title={labels?.dragIndicator}
-              {...actionNodeRef}
+              ref={handleRef}
             >
               <DragIndicatorIcon />
             </IconButton>
@@ -206,9 +222,8 @@ function ButtonPopupList<D extends DnDItemType>(
             />
           </Grid>
         )}
-        height={200}
         mRef={dndRef}
-      ></DnDList>
+      ></DnDSortableList>
       {onAdd && (
         <HBox gap={1}>
           <TextField
@@ -273,9 +288,12 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
     addSplitter,
     value = [],
     inputName,
+    itemSize,
     label,
     labelEnd,
     labelFormatter = (data) => {
+      if (typeof labelField === "function") return labelField(data);
+
       if (labelField in data) {
         return data[labelField] as string;
       }
@@ -343,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}