@uxf/cms 11.92.3 → 11.93.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/cms",
-    "version": "11.92.3",
+    "version": "11.93.1",
     "description": "UXF Cms",
     "author": "UXFans <dev@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -29,13 +29,13 @@
         "@dnd-kit/sortable": "10.0.0",
         "@dnd-kit/utilities": "3.2.2",
         "@floating-ui/react": "0.27.16",
-        "@uxf/core": "11.91.0",
-        "@uxf/core-react": "11.91.0",
-        "@uxf/data-grid": "11.92.3",
-        "@uxf/form": "11.92.3",
+        "@uxf/core": "11.93.0",
+        "@uxf/core-react": "11.93.0",
+        "@uxf/data-grid": "11.93.1",
+        "@uxf/form": "11.93.1",
         "@uxf/router": "11.92.0",
-        "@uxf/ui": "11.92.3",
-        "@uxf/wysiwyg": "11.92.3",
+        "@uxf/ui": "11.93.1",
+        "@uxf/wysiwyg": "11.93.1",
         "axios": "1.13.2",
         "axios-hooks": "5.1.1",
         "es6-error": "4.1.1",

package/pages/content-builder/content-field.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentField = void 0;
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
+const use_sortable_items_1 = require("@uxf/core-react/dnd/hooks/use-sortable-items");
 const button_1 = require("@uxf/ui/button");
 const dialog_panel_1 = require("@uxf/ui/dialog/dialog-panel");
 const icon_1 = require("@uxf/ui/icon");
@@ -14,7 +15,6 @@ const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const form_content_1 = require("./components/form-content");
 const details_visibility_context_1 = require("./context/details-visibility-context");
-const use_sortable_1 = require("./hooks/use-sortable");
 const ContentField = (props) => {
     const { fields, remove, insert, move } = (0, react_hook_form_1.useFieldArray)({
         name: `${props.name}.data`,
@@ -24,8 +24,8 @@ const ContentField = (props) => {
         insert(index + 1, { type: component.getConfig().type, content: null });
         (0, modal_service_1.closeModal)();
     };
-    const { memoizedSensors, activeItem, itemsIds, dropAnimationConfig, onDragStart, onDragEnd, onDragCancel } = (0, use_sortable_1.useSortable)({
-        fields,
+    const { memoizedSensors, activeItem, itemsIds, dropAnimationConfig, onDragStart, onDragEnd, onDragCancel } = (0, use_sortable_items_1.useSortableItems)({
+        items: fields,
         handleDragEnd: move,
     });
     const activeItemIndex = fields.findIndex((f) => f.id === (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id));

package/pages/content-builder/hooks/use-sortable.d.ts

@@ -1,15 +0,0 @@
-import { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
-type Props = {
-    fields: any[];
-    handleDragEnd: (activeIndex: number, overIndex: number) => void;
-};
-export declare const useSortable: ({ fields, handleDragEnd }: Props) => {
-    memoizedSensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
-    dropAnimationConfig: import("@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation").DropAnimationOptions;
-    itemsIds: any[];
-    activeItem: any;
-    onDragStart: ({ active }: DragStartEvent) => void;
-    onDragEnd: ({ active, over }: DragEndEvent) => void;
-    onDragCancel: () => void;
-};
-export {};

package/pages/content-builder/hooks/use-sortable.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSortable = void 0;
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
-const react_1 = require("react");
-const useSortable = ({ fields, handleDragEnd }) => {
-    const [sortableItems, setSortableItems] = (0, react_1.useState)(fields);
-    const [activeElement, setActiveElement] = (0, react_1.useState)(null);
-    const activeItem = (0, react_1.useMemo)(() => sortableItems.find((item) => item.id === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.id)), [activeElement, sortableItems]);
-    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
-        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const memoizedSensors = (0, react_1.useMemo)(() => sensors, []);
-    const idsStringified = JSON.stringify(sortableItems.map((i) => i.id));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const itemsIds = (0, react_1.useMemo)(() => sortableItems.map((i) => i.id), [idsStringified]);
-    (0, react_1.useEffect)(() => {
-        setSortableItems(fields);
-    }, [fields]);
-    const dropAnimationConfig = {
-        sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
-            styles: {
-                active: {
-                    opacity: "0.4",
-                },
-            },
-        }),
-    };
-    const onDragStart = (0, react_1.useCallback)(({ active }) => {
-        setActiveElement(active);
-    }, [setActiveElement]);
-    const onDragEnd = (0, react_1.useCallback)(({ active, over }) => {
-        if (over && active.id !== over.id) {
-            const activeIndex = sortableItems.findIndex(({ id }) => id === active.id);
-            const overIndex = sortableItems.findIndex(({ id }) => id === over.id);
-            const resorted = (0, sortable_1.arrayMove)(sortableItems, activeIndex, overIndex);
-            handleDragEnd(activeIndex, overIndex);
-            setSortableItems(resorted);
-        }
-        setActiveElement(null);
-    }, [setActiveElement, setSortableItems, handleDragEnd, sortableItems]);
-    const onDragCancel = (0, react_1.useCallback)(() => {
-        setActiveElement(null);
-    }, [setActiveElement]);
-    return {
-        memoizedSensors,
-        dropAnimationConfig,
-        itemsIds,
-        activeItem,
-        onDragStart,
-        onDragEnd,
-        onDragCancel,
-    };
-};
-exports.useSortable = useSortable;