@uxf/cms 11.74.0 → 11.74.2

package/lib/menu/model.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+class MenuItem {
+    static create(title, type) {
+        return new MenuItem(title, type);
+    }
+    constructor(title, type) {
+        this._title = title;
+        this._type = type;
+        this._children = [];
+    }
+    setContent(content) {
+        this._content = content;
+        return this;
+    }
+    setIcon(icon) {
+        this._icon = icon;
+        return this;
+    }
+    setEndElement(endElement) {
+        this._endElement = endElement;
+        return this;
+    }
+    setChildren(children) {
+        this._children = children !== null && children !== void 0 ? children : empty_array_1.EMPTY_ARRAY;
+        return this;
+    }
+    setRoute(route, routeParams) {
+        this._route = route;
+        this._routeParams = routeParams;
+        return this;
+    }
+    setUrl(url) {
+        this._url = url;
+        return this;
+    }
+    setIsExternal(isExternal) {
+        this._isExternal = isExternal;
+        return this;
+    }
+    setUserMenuData(userMenuData) {
+        this._userMenuData = userMenuData;
+        return this;
+    }
+    setActiveResolver(resolver) {
+        this._activeItemResolver = resolver ? resolver(this) : undefined;
+        return this;
+    }
+    setAllowedRoles(roles) {
+        this._allowedRoles = roles;
+        return this;
+    }
+    isActive(router, activeRoute) {
+        return Boolean(this._activeItemResolver && this._activeItemResolver(router, activeRoute));
+    }
+    hasActiveChildren(router, activeRoute) {
+        return this.children.some((item) => item.isActive(router, activeRoute));
+    }
+    isVisible(loggedUser) {
+        if (this._allowedRoles === undefined) {
+            return true;
+        }
+        for (const allowedRole of this._allowedRoles) {
+            if (loggedUser.roles.includes(allowedRole)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hasVisibleChildren(loggedUser) {
+        return this.children.some((item) => item.isVisible(loggedUser));
+    }
+    get type() {
+        return this._type;
+    }
+    get title() {
+        return this._title;
+    }
+    get children() {
+        return this._children;
+    }
+    get url() {
+        return this._url;
+    }
+    get route() {
+        return this._route;
+    }
+    get routeParams() {
+        return this._routeParams;
+    }
+    get isExternal() {
+        return this._isExternal;
+    }
+    get icon() {
+        return this._icon;
+    }
+    get endElement() {
+        return this._endElement;
+    }
+    get allowedRoles() {
+        return this._allowedRoles;
+    }
+    get content() {
+        return this._content;
+    }
+    get userMenuData() {
+        return this._userMenuData;
+    }
+}
+exports.MenuItem = MenuItem;

package/lib/menu/types.d.ts

@@ -0,0 +1,5 @@
+import { NextRouter } from "next/router";
+import { MenuItem } from "./model";
+export type RouterResolver = (router: NextRouter, activeRoute: string) => boolean;
+export type Resolver = (item: MenuItem) => RouterResolver;
+export type MenuConfiguration = MenuItem[];

package/lib/menu/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/menu/ui/list-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./list-item";
+export * from "./types";

package/lib/menu/ui/list-item/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./list-item"), exports);
+__exportStar(require("./types"), exports);

package/lib/menu/ui/list-item/list-item.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { ListItemProps } from "./types";
+export declare function ListItem<T extends Record<string, any>>(props: ListItemProps<T>): ReactElement;

package/lib/menu/ui/list-item/list-item.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = ListItem;
+const classes_1 = require("@uxf/core/constants/classes");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const icon_1 = require("@uxf/ui/icon");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const config_1 = require("../../../../config");
+const sub_menu_1 = require("../sub-menu/sub-menu");
+function ListItem(props) {
+    var _a, _b, _c, _d;
+    const hasSubMenu = Boolean((_a = props.subMenu) === null || _a === void 0 ? void 0 : _a.length);
+    const Content = (_b = props.children) !== null && _b !== void 0 ? _b : (react_1.default.createElement("div", { className: `uxf-cms-menu__item uxf-cms-menu__item--basic ${props.selected ? classes_1.CLASSES.IS_SELECTED : ""}` },
+        react_1.default.createElement("div", { className: `uxf-cms-menu__icon-wrapper ${props.level === 1 ? "uxf-cms-menu__icon-wrapper--level-one" : ""}` }, (0, is_not_nil_1.isNotNil)(props.icon) && props.level !== 1 && react_1.default.createElement(icon_1.Icon, { name: props.icon, size: 16 })),
+        react_1.default.createElement("div", { className: "uxf-cms-menu__item-label" }, props.label),
+        react_1.default.createElement("div", { className: "uxf-cms-menu__item-end-element" }, props.endElement),
+        hasSubMenu && (react_1.default.createElement(icon_1.Icon, { className: `uxf-cms-menu__caret ${!props.isOpen ? classes_1.CLASSES.IS_OPEN : ""}`, name: "caretDown", size: 16 }))));
+    // eslint-disable-next-line react/destructuring-assignment
+    const Button = ({ className }) => (react_1.default.createElement("button", { className: className, onClick: props.toggle, type: "button" }, Content));
+    if (props.href || props.route) {
+        if (props.subMenu && hasSubMenu && !props.isInitiallyOpen) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(sub_menu_1.SubMenu, { content: props.subMenu },
+                    react_1.default.createElement(link_1.default, { href: (_c = props.href) !== null && _c !== void 0 ? _c : config_1.container.get("route")(props.route, props.params), rel: props.isExternal ? "noreferrer noopener" : undefined, target: props.isExternal ? "_blank" : undefined }, Content)),
+                react_1.default.createElement(Button, { className: "uxf-cms-menu__submenu-button uxf-cms-menu__submenu-button--initially-closed" })));
+        }
+        if (hasSubMenu) {
+            return react_1.default.createElement(Button, { className: "uxf-cms-menu__submenu-button uxf-cms-menu__submenu-button--initially-open" });
+        }
+        return (react_1.default.createElement(link_1.default, { href: (_d = props.href) !== null && _d !== void 0 ? _d : config_1.container.get("route")(props.route, props.params), rel: props.isExternal ? "noreferrer noopener" : undefined, target: props.isExternal ? "_blank" : undefined }, Content));
+    }
+    return Content;
+}

package/lib/menu/ui/list-item/types.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from "@uxf/ui/icon/types";
+import { ReactElement } from "react";
+import { MenuItem } from "../../model";
+export interface ListItemProps<RouteList> {
+    children?: ReactElement;
+    endElement?: ReactElement;
+    href?: string;
+    icon?: IconName;
+    isExternal?: boolean;
+    isInitiallyOpen?: boolean;
+    isOpen?: boolean;
+    label: string;
+    level?: number;
+    params?: any;
+    route?: keyof RouteList;
+    selected?: boolean;
+    subMenu?: MenuItem[];
+    toggle?: () => void;
+}

package/lib/menu/ui/list-item/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/menu/ui/menu-custom-item.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../model";
+export interface MenuCustomItemProps {
+    item: Model;
+}
+export declare const MenuCustomItem: FC<MenuCustomItemProps>;

package/lib/menu/ui/menu-custom-item.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuCustomItem = void 0;
+const react_1 = __importDefault(require("react"));
+const config_1 = require("../../../config");
+const MenuCustomItem = (props) => {
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    if (!props.item.isVisible(loggedUser)) {
+        return null;
+    }
+    return react_1.default.createElement("div", { className: "uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--custom" }, props.item.content);
+};
+exports.MenuCustomItem = MenuCustomItem;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../model";
+export interface MenuItemProps {
+    item: Model;
+}
+export declare const MenuItem: FC<MenuItemProps>;

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

@@ -0,0 +1,55 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const router_1 = require("next/router");
+const react_1 = __importStar(require("react"));
+const config_1 = require("../../../config");
+const list_item_1 = require("./list-item");
+const MenuItem = (props) => {
+    var _a, _b, _c, _d;
+    const router = (0, router_1.useRouter)();
+    const activeRoute = config_1.container.get("useActiveRoute")();
+    const isActive = props.item.isActive(router, activeRoute);
+    const hasActiveChildren = props.item.hasActiveChildren(router, activeRoute);
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    const visibleChildren = props.item.children.filter((i) => i.isVisible(loggedUser));
+    const firstVisibleChild = visibleChildren.at(0);
+    const isInitiallyOpen = (isActive || hasActiveChildren) && props.item.children.length > 0;
+    const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(isInitiallyOpen);
+    const toggle = () => setIsSubmenuOpen((prev) => !prev);
+    if (!props.item.isVisible(loggedUser) ||
+        (props.item.children.length !== 0 && !props.item.hasVisibleChildren(loggedUser))) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--basic" },
+        react_1.default.createElement(list_item_1.ListItem, { endElement: props.item.endElement, href: (_a = props.item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, icon: props.item.icon, isExternal: props.item.isExternal, isInitiallyOpen: isInitiallyOpen, isOpen: isSubmenuOpen, label: props.item.title, params: (_c = (_b = props.item.routeParams) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _c !== void 0 ? _c : null, route: (_d = props.item.route) !== null && _d !== void 0 ? _d : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, selected: isActive, subMenu: props.item.children, toggle: toggle }),
+        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-menu__submenu-list" }, visibleChildren.map((i) => {
+            const isSelected = i.isActive(router, activeRoute);
+            return (react_1.default.createElement(list_item_1.ListItem, { endElement: i.endElement, href: i.url, icon: i.icon, isExternal: i.isExternal, key: i.title, label: i.title, level: 1, params: i.routeParams, route: i.route, selected: isSelected }));
+        })))));
+};
+exports.MenuItem = MenuItem;

package/lib/menu/ui/menu-super-section-item.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../model";
+export interface MenuSuperSectionItemProps {
+    item: Model;
+}
+export declare const MenuSuperSectionItem: FC<MenuSuperSectionItemProps>;

package/lib/menu/ui/menu-super-section-item.js

@@ -0,0 +1,40 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSuperSectionItem = void 0;
+const react_1 = __importStar(require("react"));
+const config_1 = require("../../../config");
+const menu_custom_item_1 = require("./menu-custom-item");
+const menu_item_1 = require("./menu-item");
+const MenuSuperSectionItem = (props) => {
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    return (react_1.default.createElement("div", { className: `uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--super ${props.item.userMenuData ? "uxf-cms-menu__item-wrapper--user-menu" : ""}` },
+        props.item.isVisible(loggedUser) && (react_1.default.createElement("p", { className: "uxf-cms-menu__item uxf-cms-menu__item--super" }, props.item.title)),
+        props.item.children.map((i, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
+            i.type === "custom" && react_1.default.createElement(menu_custom_item_1.MenuCustomItem, { item: i }),
+            (i.type === "section" || i.type === "link") && react_1.default.createElement(menu_item_1.MenuItem, { item: i }))))));
+};
+exports.MenuSuperSectionItem = MenuSuperSectionItem;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../model";
+export interface MenuProps {
+    menu: Model[];
+}
+export declare const Menu: FC<MenuProps>;

package/lib/menu/ui/menu.js

@@ -0,0 +1,37 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const react_1 = __importStar(require("react"));
+const menu_custom_item_1 = require("./menu-custom-item");
+const menu_item_1 = require("./menu-item");
+const menu_super_section_item_1 = require("./menu-super-section-item");
+const Menu = (props) => {
+    return (react_1.default.createElement("div", { className: "uxf-cms-menu" }, props.menu.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
+        item.type === "custom" && react_1.default.createElement(menu_custom_item_1.MenuCustomItem, { item: item }),
+        item.type === "super-section" && react_1.default.createElement(menu_super_section_item_1.MenuSuperSectionItem, { item: item }),
+        (item.type === "section" || item.type === "link") && react_1.default.createElement(menu_item_1.MenuItem, { item: item }))))));
+};
+exports.Menu = Menu;

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../../model";
+export interface MenuItemProps {
+    idPrefix?: string;
+    item: Model;
+}
+export declare const SubMenuItem: FC<MenuItemProps>;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenuItem = void 0;
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const config_1 = require("../../../../config");
+const SubMenuItem = (props) => {
+    var _a;
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    if (!props.item.isVisible(loggedUser)) {
+        return null;
+    }
+    const Content = react_1.default.createElement("div", { className: "uxf-cms-sub-menu__item" }, props.item.title);
+    if (props.item.url || props.item.route) {
+        return (react_1.default.createElement(link_1.default, { href: (_a = props.item.url) !== null && _a !== void 0 ? _a : config_1.container.get("route")(props.item.route, props.item.routeParams), rel: props.item.isExternal ? "noreferrer noopener" : undefined, target: props.item.isExternal ? "_blank" : undefined }, Content));
+    }
+    return Content;
+};
+exports.SubMenuItem = SubMenuItem;

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

@@ -0,0 +1,8 @@
+import React, { ReactElement } 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>>;

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

@@ -0,0 +1,48 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenuMobile = void 0;
+const compose_refs_1 = require("@uxf/core-react/utils/compose-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) => {
+    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]);
+    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",
+        })),
+        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";

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

@@ -0,0 +1,7 @@
+import React, { ReactElement } 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>>;

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

@@ -0,0 +1,46 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenu = void 0;
+const compose_refs_1 = require("@uxf/core-react/utils/compose-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) => {
+    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]);
+    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",
+        })),
+        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";

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

@@ -0,0 +1,49 @@
+export interface SubMenuOptions {
+    isMobile?: boolean;
+}
+export declare function useSubMenu(options: SubMenuOptions): {
+    placement: import("@floating-ui/utils").Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        strategy: import("@floating-ui/utils").Strategy;
+        placement: import("@floating-ui/utils").Placement;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubMenu = useSubMenu;
+const react_1 = require("@floating-ui/react");
+const react_2 = require("react");
+function useSubMenu(options) {
+    const [open, setOpen] = (0, react_2.useState)(false);
+    const data = (0, react_1.useFloating)({
+        middleware: [
+            (0, react_1.offset)(options.isMobile ? 12 : 16),
+            (0, react_1.flip)(),
+            (0, react_1.shift)({ padding: 8 }),
+            (0, react_1.size)({
+                apply({ availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: Math.max(240, availableHeight) + "px",
+                    });
+                },
+            }),
+        ],
+        onOpenChange: setOpen,
+        open,
+        placement: options.isMobile ? "top" : "right-start",
+        whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
+            elementResize: typeof ResizeObserver !== "undefined",
+        }),
+    });
+    const context = data.context;
+    const hover = (0, react_1.useHover)(context, {
+        move: false,
+        delay: 200,
+        handleClose: (0, react_1.safePolygon)(),
+        enabled: !options.isMobile,
+    });
+    const click = (0, react_1.useClick)(context, { enabled: Boolean(options.isMobile) });
+    const focus = (0, react_1.useFocus)(context);
+    const dismiss = (0, react_1.useDismiss)(context);
+    const interactions = (0, react_1.useInteractions)([hover, click, focus, dismiss]);
+    return (0, react_2.useMemo)(() => ({
+        open,
+        setOpen,
+        ...interactions,
+        ...data,
+    }), [open, setOpen, interactions, data]);
+}