@etsoo/materialui 1.3.8 → 1.3.9

package/lib/ComboBoxMultiple.js

@@ -16,6 +16,7 @@ const checkedIcon = React.createElement(CheckBoxIcon, { fontSize: "small" });
  * @returns Component
  */
 export function ComboBoxMultiple(props) {
+    var _a;
     // Labels
     const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading");
     // Destruct
@@ -33,7 +34,7 @@ export function ComboBoxMultiple(props) {
         ? localOptions.filter((o) => o[idField] === idValue)
         : idValues != null
             ? localOptions.filter((o) => idValues === null || idValues === void 0 ? void 0 : idValues.includes(o[idField]))
-            : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+            : (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.concat()) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.concat();
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
@@ -122,7 +123,7 @@ export function ComboBoxMultiple(props) {
                     ? stateValue
                     : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                 // Set value
-                setInputValue(value);
+                setInputValue(value.concat());
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);

package/lib/DnDList.d.ts

@@ -1,4 +1,5 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
+import { SortingStrategy } from "@dnd-kit/sortable";
 import { DataTypes } from "@etsoo/shared";
 import { Theme } from "@mui/material";
 import React, { CSSProperties } from "react";
@@ -76,6 +77,10 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
      * Methods ref
      */
     mRef?: React.Ref<DnDListRef<D>>;
+    /**
+     * Sorting strategy
+     */
+    sortingStrategy?: "rect" | "vertical" | "horizontal" | "rectSwapping" | (() => SortingStrategy);
     /**
      * Data change handler
      */

package/lib/DnDList.js

@@ -44,7 +44,7 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { keyField, height = 360, itemRenderer, labelField, mRef, onChange, onFormChange, onDragEnd } = props;
+    const { keyField, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
     // Theme
     const theme = useTheme();
     // States
@@ -129,11 +129,14 @@ export function DnDList(props) {
             import("@dnd-kit/core"),
             import("@dnd-kit/sortable"),
             import("@dnd-kit/utilities")
-        ]).then(([{ DndContext }, { SortableContext, useSortable, verticalListSortingStrategy }, { CSS }]) => {
+        ]).then(([{ DndContext }, { SortableContext, useSortable, rectSortingStrategy, rectSwappingStrategy, horizontalListSortingStrategy, verticalListSortingStrategy }, { CSS }]) => {
             setDnd([
                 DndContext,
                 SortableContext,
                 useSortable,
+                rectSortingStrategy,
+                rectSwappingStrategy,
+                horizontalListSortingStrategy,
                 verticalListSortingStrategy,
                 CSS
             ]);
@@ -142,7 +145,18 @@ export function DnDList(props) {
     if (dnd == null) {
         return React.createElement(Skeleton, { variant: "rectangular", width: "100%", height: height });
     }
-    const [DndContextType, SortableContextType, useSortableType, verticalListSortingStrategyType, CSSType] = dnd;
+    const [DndContextType, SortableContextType, useSortableType, rectSortingStrategyType, rectSwappingStrategyType, horizontalListSortingStrategyType, verticalListSortingStrategyType, CSSType] = dnd;
+    const strategy = typeof sortingStrategy === "function"
+        ? sortingStrategy()
+        : sortingStrategy === "rect"
+            ? rectSortingStrategyType
+            : sortingStrategy === "rectSwapping"
+                ? rectSwappingStrategyType
+                : sortingStrategy === "horizontal"
+                    ? horizontalListSortingStrategyType
+                    : sortingStrategy === "vertical"
+                        ? verticalListSortingStrategyType
+                        : undefined;
     let getItemStyle = props.getItemStyle;
     if (getItemStyle == null) {
         getItemStyle = (index, isDragging) => DnDItemStyle(index, isDragging, theme);
@@ -186,7 +200,7 @@ export function DnDList(props) {
             .forEach((input) => input.addEventListener("change", () => doFormChange()));
     };
     const children = (React.createElement(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
-        React.createElement(SortableContextType, { items: items, strategy: verticalListSortingStrategyType }, items.map((item, index) => {
+        React.createElement(SortableContextType, { items: items, strategy: strategy }, items.map((item, index) => {
             const id = item[keyField];
             return (React.createElement(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
         }))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
     "@etsoo/appscript": "^1.4.41",
     "@etsoo/notificationbase": "^1.1.28",
     "@etsoo/react": "^1.7.7",
-    "@etsoo/shared": "^1.2.10",
-    "@mui/icons-material": "^5.14.7",
-    "@mui/material": "^5.14.7",
+    "@etsoo/shared": "^1.2.12",
+    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.14.8",
     "@mui/x-data-grid": "^6.12.1",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
@@ -82,7 +82,7 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@babel/runtime-corejs3": "^7.22.15",
-    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",
     "@typescript-eslint/eslint-plugin": "^6.6.0",

package/src/ComboBoxMultiple.tsx

@@ -142,7 +142,7 @@ export function ComboBoxMultiple<
       ? localOptions.filter((o) => o[idField] === idValue)
       : idValues != null
       ? localOptions.filter((o) => idValues?.includes(o[idField]))
-      : defaultValue ?? value;
+      : defaultValue?.concat() ?? value?.concat();
 
   // State
   // null for controlled
@@ -267,7 +267,7 @@ export function ComboBoxMultiple<
         }
         onChange={(event, value, reason, details) => {
           // Set value
-          setInputValue(value);
+          setInputValue(value.concat());
 
           // Custom
           if (onChange != null) onChange(event, value, reason, details);

package/src/DnDList.tsx

@@ -4,8 +4,12 @@ import type {
   DragStartEvent,
   UniqueIdentifier
 } from "@dnd-kit/core";
-import type {
+import {
   SortableContext,
+  SortingStrategy,
+  horizontalListSortingStrategy,
+  rectSortingStrategy,
+  rectSwappingStrategy,
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
@@ -157,6 +161,16 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
    */
   mRef?: React.Ref<DnDListRef<D>>;
 
+  /**
+   * Sorting strategy
+   */
+  sortingStrategy?:
+    | "rect"
+    | "vertical"
+    | "horizontal"
+    | "rectSwapping"
+    | (() => SortingStrategy);
+
   /**
    * Data change handler
    */
@@ -192,6 +206,7 @@ export function DnDList<
     itemRenderer,
     labelField,
     mRef,
+    sortingStrategy,
     onChange,
     onFormChange,
     onDragEnd
@@ -318,6 +333,9 @@ export function DnDList<
         typeof DndContext,
         typeof SortableContext,
         typeof useSortable,
+        typeof rectSortingStrategy,
+        typeof rectSwappingStrategy,
+        typeof horizontalListSortingStrategy,
         typeof verticalListSortingStrategy,
         typeof CSS
       ]
@@ -331,13 +349,23 @@ export function DnDList<
     ]).then(
       ([
         { DndContext },
-        { SortableContext, useSortable, verticalListSortingStrategy },
+        {
+          SortableContext,
+          useSortable,
+          rectSortingStrategy,
+          rectSwappingStrategy,
+          horizontalListSortingStrategy,
+          verticalListSortingStrategy
+        },
         { CSS }
       ]) => {
         setDnd([
           DndContext,
           SortableContext,
           useSortable,
+          rectSortingStrategy,
+          rectSwappingStrategy,
+          horizontalListSortingStrategy,
           verticalListSortingStrategy,
           CSS
         ]);
@@ -353,10 +381,26 @@ export function DnDList<
     DndContextType,
     SortableContextType,
     useSortableType,
+    rectSortingStrategyType,
+    rectSwappingStrategyType,
+    horizontalListSortingStrategyType,
     verticalListSortingStrategyType,
     CSSType
   ] = dnd;
 
+  const strategy: SortingStrategy | undefined =
+    typeof sortingStrategy === "function"
+      ? sortingStrategy()
+      : sortingStrategy === "rect"
+      ? rectSortingStrategyType
+      : sortingStrategy === "rectSwapping"
+      ? rectSwappingStrategyType
+      : sortingStrategy === "horizontal"
+      ? horizontalListSortingStrategyType
+      : sortingStrategy === "vertical"
+      ? verticalListSortingStrategyType
+      : undefined;
+
   let getItemStyle = props.getItemStyle;
   if (getItemStyle == null) {
     getItemStyle = (index, isDragging) =>
@@ -420,10 +464,7 @@ export function DnDList<
 
   const children = (
     <DndContextType onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-      <SortableContextType
-        items={items}
-        strategy={verticalListSortingStrategyType}
-      >
+      <SortableContextType items={items} strategy={strategy}>
         {items.map((item, index) => {
           const id = item[keyField] as unknown as UniqueIdentifier;
           return (