@uxf/cms 12.7.2 → 13.0.0

package/README.md

@@ -16,7 +16,7 @@ It is not a general UI kit (`@uxf/ui`), a form library (`@uxf/form`), or a data
 yarn add @uxf/cms
 ```
 
-Peer dependencies: `@uxf/core`, `@uxf/core-react`, `@uxf/data-grid`, `@uxf/form`, `@uxf/router`, `@uxf/styles`, `@uxf/ui`, `@uxf/wysiwyg`, `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, `@floating-ui/react`, `axios`, `axios-hooks`, `swr`, `react-hook-form`, `next` (>= 13.2.0), `react` (>= 18.2.0), `react-dom` (>= 18.2.0).
+Peer dependencies: `@uxf/core`, `@uxf/core-react`, `@uxf/data-grid`, `@uxf/form`, `@uxf/router`, `@uxf/styles`, `@uxf/ui`, `@uxf/wysiwyg`, `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, `@floating-ui/react`, `axios`, `axios-hooks`, `swr`, `react-hook-form`, `next` (>=15.0.4), `react` (^19.3.0), `react-dom` (^19.3.0).
 
 Because it builds on `@uxf/ui`, `@uxf/form` and `@uxf/data-grid`, complete their setup as well (see [`@uxf/ui`](../ui/README.md) and [`@uxf/form`](../form/README.md)) — the `UiContextProvider`, the token layer, and the component CSS they require.
 

package/deprecated/hoc/with-authenticate.js

@@ -40,7 +40,7 @@ exports.withAuthenticate = void 0;
 const react_1 = __importStar(require("react"));
 const api_1 = require("../../api");
 const config_1 = require("../../config");
-const UnauthorizedError_1 = require("../../errors/UnauthorizedError");
+const unauthorized_error_1 = require("../../errors/unauthorized-error");
 const cms_authorizator_1 = __importDefault(require("../security/cms-authorizator"));
 /**
  * @deprecated use restrictedPage instead
@@ -53,7 +53,7 @@ const withAuthenticate = (config) => (Component) => {
                     ? await config_1.container.get("api.getLoggedUser")(ctx)
                     : await (0, api_1.getLoggedUser)(ctx);
                 if (config.allowedRoles && !cms_authorizator_1.default.isGranted(config.allowedRoles, user.roles)) {
-                    throw new UnauthorizedError_1.UnauthorizedError();
+                    throw new unauthorized_error_1.UnauthorizedError();
                 }
                 return typeof Component.getInitialProps === "function" ? await Component.getInitialProps(ctx) : {};
             }

package/forms/components/wysiwyg-input/wysiwyg-input.js

@@ -101,5 +101,5 @@ function WysiwygInput(props) {
                 placeholder: props.placeholder,
                 readOnly: props.isReadOnly,
                 required: props.isRequired,
-            }, editorRef: editorRef, id: id, initialValue: field.value, onChange: field.onChange, plugins: plugins, ...props.editorProps })));
+            }, id: id, initialValue: field.value, onChange: field.onChange, plugins: plugins, ref: editorRef, ...props.editorProps })));
 }

package/lib/api/create-axios-request.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAxiosRequest = void 0;
 const qs_1 = require("@uxf/core/utils/qs");
-const BadRequestError_1 = require("../../errors/BadRequestError");
-const ForbiddenError_1 = require("../../errors/ForbiddenError");
-const NetworkError_1 = require("../../errors/NetworkError");
-const UnauthorizedError_1 = require("../../errors/UnauthorizedError");
+const bad_request_error_1 = require("../../errors/bad-request-error");
+const forbidden_error_1 = require("../../errors/forbidden-error");
+const network_error_1 = require("../../errors/network-error");
+const unauthorized_error_1 = require("../../errors/unauthorized-error");
 /** @deprecated use swr */
 const createAxiosRequest = (baseURL, axiosInstance, requestConfig) => (ctx, url, method, body, query) => {
     var _a;
@@ -21,17 +21,17 @@ const createAxiosRequest = (baseURL, axiosInstance, requestConfig) => (ctx, url,
         .catch((error) => {
         if (error.response) {
             if (error.response.status === 400) {
-                throw new BadRequestError_1.BadRequestError(error.response.data);
+                throw new bad_request_error_1.BadRequestError(error.response.data);
             }
             else if (error.response.status === 401) {
-                throw new UnauthorizedError_1.UnauthorizedError();
+                throw new unauthorized_error_1.UnauthorizedError();
             }
             else if (error.response.status === 403) {
-                throw new ForbiddenError_1.ForbiddenError();
+                throw new forbidden_error_1.ForbiddenError();
             }
         }
         else if (error.request) {
-            throw new NetworkError_1.NetworkError();
+            throw new network_error_1.NetworkError();
         }
         throw error;
     });

package/lib/menu/ui/sub-menu/sub-menu-behaviour.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/menu/ui/sub-menu/sub-menu-behaviour.spec.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const react_2 = __importStar(require("react"));
+const sub_menu_1 = require("./sub-menu");
+const sub_menu_mobile_1 = require("./sub-menu-mobile");
+const VARIANTS = [
+    ["SubMenu", sub_menu_1.SubMenu],
+    ["SubMenuMobile", sub_menu_mobile_1.SubMenuMobile],
+];
+VARIANTS.forEach(([name, Component]) => {
+    test(`${name} passes the node to both its own ref and the trigger's, without reading element.ref`, () => {
+        const consoleError = jest.spyOn(console, "error").mockImplementation(() => undefined);
+        const triggerRef = (0, react_2.createRef)();
+        const componentRef = (0, react_2.createRef)();
+        (0, react_1.render)(react_2.default.createElement(Component, { content: [], ref: componentRef, title: "Menu" },
+            react_2.default.createElement("button", { ref: triggerRef, type: "button" }, "Trigger")));
+        expect(triggerRef.current).toBeInstanceOf(HTMLButtonElement);
+        expect(componentRef.current).toBe(triggerRef.current);
+        expect(consoleError).not.toHaveBeenCalledWith(expect.stringContaining("element.ref"));
+        consoleError.mockRestore();
+    });
+});

package/lib/menu/ui/sub-menu/sub-menu-mobile.d.ts

@@ -1,8 +1,11 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, RefAttributes } from "react";
 import { MenuItem as Model } from "../../model";
 export interface SubMenuProps {
     children: ReactElement;
     content: Model[];
     title: string;
 }
-export declare const SubMenuMobile: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLElement>>;
+export declare function SubMenuMobile(props: SubMenuProps & RefAttributes<HTMLElement>): React.JSX.Element;
+export declare namespace SubMenuMobile {
+    var displayName: string;
+}

package/lib/menu/ui/sub-menu/sub-menu-mobile.js

@@ -33,26 +33,30 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubMenuMobile = void 0;
-const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+exports.SubMenuMobile = SubMenuMobile;
+const use_composed_refs_1 = require("@uxf/core-react/hooks/use-composed-refs");
 const react_1 = __importStar(require("react"));
 const sub_menu_item_1 = require("./sub-menu-item");
 const use_sub_menu_1 = require("./use-sub-menu");
-exports.SubMenuMobile = (0, react_1.forwardRef)(({ children, content, title }, ref) => {
+function SubMenuMobile(props) {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: true });
-    const stableRef = (0, react_1.useMemo)(() => (0, compose_refs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
+    // Any element can be the trigger; its props are only passed through.
+    const trigger = props.children;
+    const stableRef = (0, use_composed_refs_1.useComposedRefs)(props.ref, subMenu.refs.setReference, trigger.props.ref);
+    // `ref` goes after the spread: since React 19 the trigger's props carry its own ref.
+    const referenceProps = {
+        ...trigger.props,
+        ref: stableRef,
+        "data-state": subMenu.open ? "open" : "closed",
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        (0, react_1.cloneElement)(children, subMenu.getReferenceProps({
-            ref: stableRef,
-            ...children.props,
-            "data-state": subMenu.open ? "open" : "closed",
-        })),
+        (0, react_1.cloneElement)(trigger, subMenu.getReferenceProps(referenceProps)),
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper-mobile",
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
             }) },
-            react_1.default.createElement("div", { className: "uxf-cms-sub-menu__title" }, title),
-            content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index })))))));
-});
-exports.SubMenuMobile.displayName = "SubMenuMobile";
+            react_1.default.createElement("div", { className: "uxf-cms-sub-menu__title" }, props.title),
+            props.content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index })))))));
+}
+SubMenuMobile.displayName = "SubMenuMobile";

package/lib/menu/ui/sub-menu/sub-menu.d.ts

@@ -1,7 +1,10 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, RefAttributes } from "react";
 import { MenuItem as Model } from "../../model";
 export interface SubMenuProps {
     children: ReactElement;
     content: Model[];
 }
-export declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLElement>>;
+export declare function SubMenu(props: SubMenuProps & RefAttributes<HTMLElement>): React.JSX.Element;
+export declare namespace SubMenu {
+    var displayName: string;
+}

package/lib/menu/ui/sub-menu/sub-menu.js

@@ -33,24 +33,28 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubMenu = void 0;
-const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+exports.SubMenu = SubMenu;
+const use_composed_refs_1 = require("@uxf/core-react/hooks/use-composed-refs");
 const react_1 = __importStar(require("react"));
 const sub_menu_item_1 = require("./sub-menu-item");
 const use_sub_menu_1 = require("./use-sub-menu");
-exports.SubMenu = (0, react_1.forwardRef)(({ children, content }, ref) => {
+function SubMenu(props) {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: false });
-    const stableRef = (0, react_1.useMemo)(() => (0, compose_refs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
+    // Any element can be the trigger; its props are only passed through.
+    const trigger = props.children;
+    const stableRef = (0, use_composed_refs_1.useComposedRefs)(props.ref, subMenu.refs.setReference, trigger.props.ref);
+    // `ref` goes after the spread: since React 19 the trigger's props carry its own ref.
+    const referenceProps = {
+        ...trigger.props,
+        ref: stableRef,
+        "data-state": subMenu.open ? "open" : "closed",
+    };
     return (react_1.default.createElement("div", { className: "uxf-cms-sub-menu" },
-        (0, react_1.cloneElement)(children, subMenu.getReferenceProps({
-            ref: stableRef,
-            ...children.props,
-            "data-state": subMenu.open ? "open" : "closed",
-        })),
+        (0, react_1.cloneElement)(trigger, subMenu.getReferenceProps(referenceProps)),
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
                 className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper",
-            }) }, content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index })))))));
-});
-exports.SubMenu.displayName = "SubMenu";
+            }) }, props.content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index })))))));
+}
+SubMenu.displayName = "SubMenu";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/cms",
-    "version": "12.7.2",
+    "version": "13.0.0",
     "description": "UXF Cms",
     "author": "UXFans <dev@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -29,42 +29,42 @@
     },
     "peerDependencies": {
         "@floating-ui/react": "^0.27.20",
-        "@uxf/core": "12.7.0",
-        "@uxf/core-react": "12.7.1",
-        "@uxf/data-grid": "12.7.2",
-        "@uxf/dnd": "12.0.0",
-        "@uxf/form": "12.7.1",
-        "@uxf/router": "12.7.0",
-        "@uxf/styles": "12.7.0",
-        "@uxf/ui": "12.7.1",
-        "@uxf/wysiwyg": "12.7.1",
+        "@uxf/core": "13.0.0",
+        "@uxf/core-react": "13.0.0",
+        "@uxf/data-grid": "13.0.0",
+        "@uxf/dnd": "13.0.0",
+        "@uxf/form": "13.0.0",
+        "@uxf/router": "13.0.0",
+        "@uxf/styles": "13.0.0",
+        "@uxf/ui": "13.0.0",
+        "@uxf/wysiwyg": "13.0.0",
         "axios": "^1.20.0",
         "axios-hooks": "^5.1.1",
-        "next": ">=13.2.0",
-        "react": ">=18.2.0",
-        "react-dom": ">=18.2.0",
+        "next": ">=15.0.4",
+        "react": "^19.3.0",
+        "react-dom": "^19.3.0",
         "react-hook-form": "^7.89.0",
         "swr": "^2.5.1"
     },
     "devDependencies": {
         "@floating-ui/react": "^0.27.20",
         "@types/node": "24",
-        "@types/react": "18.3.31",
-        "@types/react-dom": "18.3.7",
-        "@uxf/core": "12.7.0",
-        "@uxf/core-react": "12.7.1",
-        "@uxf/data-grid": "12.7.2",
-        "@uxf/dnd": "12.0.0",
-        "@uxf/form": "12.7.1",
-        "@uxf/router": "12.7.0",
-        "@uxf/styles": "12.7.0",
-        "@uxf/ui": "12.7.1",
-        "@uxf/wysiwyg": "12.7.1",
+        "@types/react": "19.3.0",
+        "@types/react-dom": "19.3.0",
+        "@uxf/core": "13.0.0",
+        "@uxf/core-react": "13.0.0",
+        "@uxf/data-grid": "13.0.0",
+        "@uxf/dnd": "13.0.0",
+        "@uxf/form": "13.0.0",
+        "@uxf/router": "13.0.0",
+        "@uxf/styles": "13.0.0",
+        "@uxf/ui": "13.0.0",
+        "@uxf/wysiwyg": "13.0.0",
         "axios": "^1.20.0",
         "axios-hooks": "^5.1.1",
         "next": "16.3.8",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
+        "react": "19.3.0",
+        "react-dom": "19.3.0",
         "react-hook-form": "^7.89.0",
         "swr": "^2.5.1",
         "tsx": "4.23.15"

package/ui/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import { ImageSource } from "@uxf/core/utils/resizer";
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, RefAttributes } from "react";
 import { AvatarSize, AvatarVariant } from "./theme";
 export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, "src"> {
     alt?: string;
@@ -8,4 +8,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, "src">
     letters?: string;
     variant?: AvatarVariant;
 }
-export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;
+export declare function Avatar(props: AvatarProps & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace Avatar {
+    var displayName: string;
+}

package/ui/avatar/avatar.js

@@ -1,57 +1,27 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
+exports.Avatar = Avatar;
 const cx_1 = require("@uxf/core/utils/cx");
+const omit_1 = require("@uxf/core/utils/omit");
 const raster_image_1 = require("@uxf/ui/raster-image");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const AVATAR_SIZES = {
     sm: 40,
     default: 88,
     lg: 120,
 };
-const Component = (props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { alt, className, size = "default", src, letters, variant = "default", ...restProps } = props;
-    const avatarClassName = (0, cx_1.cx)("cms-avatar", `cms-avatar--size-${size}`, `cms-avatar--variant-${variant}`, className);
-    const imgAlt = alt !== null && alt !== void 0 ? alt : "";
-    if (src) {
-        return (react_1.default.createElement("span", { className: avatarClassName, ref: ref, ...restProps },
-            react_1.default.createElement(raster_image_1.RasterImage, { alt: imgAlt, className: "cms-avatar__image", height: AVATAR_SIZES[size], loading: "lazy", mode: "cover", src: src, width: AVATAR_SIZES[size] })));
+function Avatar(props) {
+    var _a, _b, _c;
+    const size = (_a = props.size) !== null && _a !== void 0 ? _a : "default";
+    const avatarClassName = (0, cx_1.cx)("cms-avatar", `cms-avatar--size-${size}`, `cms-avatar--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.className);
+    const restProps = (0, omit_1.omit)(props, ["ref", "alt", "className", "size", "src", "letters", "variant"]);
+    if (props.src) {
+        return (react_1.default.createElement("span", { className: avatarClassName, ref: props.ref, ...restProps },
+            react_1.default.createElement(raster_image_1.RasterImage, { alt: (_c = props.alt) !== null && _c !== void 0 ? _c : "", className: "cms-avatar__image", height: AVATAR_SIZES[size], loading: "lazy", mode: "cover", src: props.src, width: AVATAR_SIZES[size] })));
     }
-    return (react_1.default.createElement("div", { className: avatarClassName, ...restProps }, letters));
-};
-exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(Component));
-exports.Avatar.displayName = "CmsAvatar";
+    return (react_1.default.createElement("div", { className: avatarClassName, ref: props.ref, ...restProps }, props.letters));
+}
+Avatar.displayName = "CmsAvatar";