@uxf/ui 11.111.2 → 11.112.1

package/css/menu.css

@@ -4,11 +4,25 @@
     --uxf-menu-item-gap: 12px;
     --uxf-menu-item-px: 12px;
     --uxf-menu-item-border-radius: 8px;
+    --uxf-menu-item-icon-width: 20px;
+    --uxf-menu-badge-indicator-color: var(--uxf-color-negative-surface-default);
+    --uxf-menu-badge-indicator-size: 8px;
 }
 
 .uxf-menu {
     font-size: theme("fontSize.sm");
     padding: 4px;
+
+    &.is-collapsed {
+        .uxf-menu-item__badge-indicator {
+            display: block;
+        }
+
+        .uxf-menu-item__label,
+        .uxf-menu-item__right-element {
+            display: none;
+        }
+    }
 }
 
 .uxf-menu-item {
@@ -16,7 +30,6 @@
     background-color: var(--uxf-menu-item-background-color);
     border-radius: var(--uxf-menu-item-border-radius);
     color: black;
-    cursor: pointer;
     display: flex;
     flex-direction: row;
     gap: var(--uxf-menu-item-gap);
@@ -25,12 +38,15 @@
     padding: 4px var(--uxf-menu-item-px);
     width: 100%;
 
-    &:hover {
+    &.is-hoverable:hover {
         --uxf-menu-item-background-color: var(--uxf-color-base-surface-main-hover);
+
+        cursor: pointer;
     }
 
     &.is-active:not(.uxf-menu-item--level-1),
-    &.is-active.has-no-children {
+    &.is-active.has-no-children,
+    .uxf-menu.is-collapsed &.is-active.uxf-menu-item--level-1 {
         --uxf-menu-item-background-color: #e5e7eb;
 
         font-weight: 500;
@@ -50,6 +66,25 @@
     }
 }
 
+.uxf-menu-item__badge-indicator {
+    background-color: var(--uxf-menu-badge-indicator-color);
+    border-radius: 999px;
+    display: none;
+    height: var(--uxf-menu-badge-indicator-size);
+    position: absolute;
+    right: 0;
+    top: -4px;
+    width: var(--uxf-menu-badge-indicator-size);
+}
+
+.uxf-menu-item__icon-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: var(--uxf-menu-item-icon-width);
+}
+
 .uxf-menu-item__icon {
     height: var(--uxf-menu-icon-size);
     width: var(--uxf-menu-icon-size);
@@ -73,7 +108,8 @@
     }
 }
 
-.uxf-menu__submenu {
+.uxf-menu__submenu:not(.uxf-menu__submenu--in-popover),
+.uxf-menu__submenu.is-parent-collapsed {
     padding-left: calc(var(--uxf-menu-item-gap) + var(--uxf-menu-icon-size));
     position: relative;
 
@@ -90,7 +126,7 @@
     .uxf-menu-item {
         position: relative;
 
-        &:hover {
+        &.is-hoverable:hover {
             &::before {
                 background-color: #0f1012;
                 bottom: 0;

package/menu/components/menu-item-button.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { IconName } from "../../icon/types";
 import { NextLink } from "../../utils/next-link";
 interface MenuItemButtonProps {
@@ -13,5 +13,5 @@ interface MenuItemButtonProps {
     isActive?: boolean;
     badge?: ReactElement;
 }
-export declare function MenuItemButton(props: MenuItemButtonProps): ReactElement;
+export declare const MenuItemButton: React.ForwardRefExoticComponent<MenuItemButtonProps & React.RefAttributes<HTMLElement>>;
 export {};

package/menu/components/menu-item-button.js

@@ -1,27 +1,64 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 });
-exports.MenuItemButton = MenuItemButton;
+exports.MenuItemButton = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const icon_1 = require("@uxf/ui/icon");
-const react_1 = __importDefault(require("react"));
-function MenuItemButton(props) {
+const react_1 = __importStar(require("react"));
+exports.MenuItemButton = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const LinkComponent = (_a = props.LinkComponent) !== null && _a !== void 0 ? _a : "a";
     const className = (0, cx_1.cx)(`uxf-menu-item uxf-menu-item--level-${props.level}`, props.isOpen ? "is-open" : "is-close", props.isActive && "is-active", props.hasChildren ? "has-children" : "has-no-children", (0, is_nil_1.isNil)(props.icon) && "uxf-menu-item--no-icon");
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({ onClick: props.onClick, href: props.href, className });
     const content = (react_1.default.createElement(react_1.default.Fragment, null,
         (0, is_not_nil_1.isNotNil)(props.icon) && (react_1.default.createElement("div", { className: "uxf-menu-item__icon-wrapper" },
-            react_1.default.createElement(icon_1.Icon, { className: "uxf-menu-item__icon", name: props.icon }))),
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-menu-item__icon", name: props.icon }),
+            (0, is_not_nil_1.isNotNil)(props.badge) && react_1.default.createElement("div", { className: "uxf-menu-item__badge-indicator" }))),
         react_1.default.createElement("div", { className: "uxf-menu-item__label" }, props.label),
         react_1.default.createElement("div", { className: "uxf-menu-item__right-element" },
             (0, is_not_nil_1.isNotNil)(props.badge) && props.badge,
             props.hasChildren && (react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-menu-item__open-icon", props.isOpen ? "is-open" : "is-close", props.isActive && "is-active"), name: "caretDown" })))));
     if ((0, is_not_nil_1.isNotNil)(props.href)) {
-        return (react_1.default.createElement(LinkComponent, { className: className, href: props.href, onClick: props.onClick, title: props.label }, content));
+        return (react_1.default.createElement(LinkComponent, { ...clickableProps, href: props.href, ref: ref, title: props.label }, content));
+    }
+    if ((0, is_not_nil_1.isNotNil)(props.onClick)) {
+        return (react_1.default.createElement("button", { ...clickableProps, ref: ref, title: props.label }, content));
     }
-    return (react_1.default.createElement("button", { className: className, onClick: props.onClick, title: props.label }, content));
-}
+    return (react_1.default.createElement("div", { className: className, ref: ref, title: props.label }, content));
+});
+exports.MenuItemButton.displayName = "UxfUiMenuItemButton";

package/menu/components/menu-item.d.ts

@@ -2,11 +2,12 @@ import React from "react";
 import { NextLink } from "../../utils/next-link";
 import { ActiveTreeNode, MenuItemConfiguration } from "../types";
 interface Props {
-    item: MenuItemConfiguration;
-    activeTree: ActiveTreeNode;
     LinkComponent?: NextLink | "a";
-    level: number;
+    activeTree: ActiveTreeNode;
+    isCollapsed?: boolean;
     isPopoverEnabled?: boolean;
+    item: MenuItemConfiguration;
+    level: number;
 }
 export declare function MenuItem(props: Props): React.JSX.Element;
 export {};

package/menu/components/menu-item.js

@@ -44,31 +44,39 @@ const popover_1 = require("../../popover/popover");
 const menu_item_button_1 = require("./menu-item-button");
 function MenuItem(props) {
     var _a, _b;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(props.activeTree.isActive);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(props.activeTree.isActive && !props.isCollapsed);
     const button = (react_1.default.createElement(menu_item_button_1.MenuItemButton, { LinkComponent: (_b = (_a = props.item.as) !== null && _a !== void 0 ? _a : props.LinkComponent) !== null && _b !== void 0 ? _b : "a", badge: props.item.badge, hasChildren: (0, is_not_nil_1.isNotNil)(props.item.children) && (0, is_not_empty_1.isNotEmpty)(props.item.children), href: props.item.href, icon: props.item.icon, isActive: props.activeTree.isActive, isOpen: isOpen, label: props.item.label, level: props.level, onClick: () => {
             if ((0, is_not_nil_1.isNotNil)(props.item.onClick)) {
                 props.item.onClick();
             }
             else {
-                setIsOpen((prev) => !prev);
+                if (!props.isCollapsed) {
+                    setIsOpen((prev) => !prev);
+                }
             }
         } }));
     if ((0, is_nil_1.isNil)(props.item.children) || (0, is_empty_1.isEmpty)(props.item.children)) {
+        if (props.isCollapsed) {
+            return (react_1.default.createElement(popover_1.Popover, { placement: "right-start", trigger: "hover" },
+                react_1.default.createElement(popover_1.Popover.Trigger, { asChild: true }, button),
+                !isOpen && (react_1.default.createElement(popover_1.Popover.Content, { className: "uxf-menu__popover" },
+                    react_1.default.createElement(menu_item_button_1.MenuItemButton, { badge: props.item.badge, href: props.item.href, label: props.item.label, level: props.level, onClick: props.item.onClick })))));
+        }
         return button;
     }
     const children = props.item.children.map((item, index) => {
         var _a, _b;
-        return (react_1.default.createElement(MenuItem, { LinkComponent: props.LinkComponent, activeTree: (_b = (_a = props.activeTree.children) === null || _a === void 0 ? void 0 : _a.at(index)) !== null && _b !== void 0 ? _b : (0, throw_error_1.throwError)("Active tree is not defined"), isPopoverEnabled: props.isPopoverEnabled, item: item, key: item.label, level: props.level + 1 }));
+        return (react_1.default.createElement(MenuItem, { LinkComponent: props.LinkComponent, activeTree: (_b = (_a = props.activeTree.children) === null || _a === void 0 ? void 0 : _a.at(index)) !== null && _b !== void 0 ? _b : (0, throw_error_1.throwError)("Active tree is not defined"), isPopoverEnabled: props.isPopoverEnabled, item: item, key: `${item.label}-${props.isCollapsed}-${props.isPopoverEnabled}`, level: props.level + 1 }));
     });
-    if (!props.isPopoverEnabled) {
+    if (!props.isPopoverEnabled && !props.isCollapsed) {
         return (react_1.default.createElement("div", null,
             button,
             react_1.default.createElement("div", { className: "uxf-menu__submenu" }, isOpen && children)));
     }
     return (react_1.default.createElement(popover_1.Popover, { placement: "right-start", trigger: "hover" },
-        react_1.default.createElement(popover_1.Popover.Trigger, null,
-            react_1.default.createElement("div", null,
-                button,
-                isOpen && react_1.default.createElement("div", { className: "uxf-menu__submenu" }, children))),
-        !isOpen && react_1.default.createElement(popover_1.Popover.Content, { className: "uxf-menu__popover" }, children)));
+        react_1.default.createElement(popover_1.Popover.Trigger, { asChild: true }, button),
+        isOpen && !props.isCollapsed && react_1.default.createElement("div", { className: "uxf-menu__submenu" }, children),
+        !isOpen && (react_1.default.createElement(popover_1.Popover.Content, { className: "uxf-menu__popover" },
+            props.isCollapsed && (react_1.default.createElement(menu_item_button_1.MenuItemButton, { badge: props.item.badge, label: props.item.label, level: props.level })),
+            react_1.default.createElement("div", { className: `uxf-menu__submenu uxf-menu__submenu--in-popover ${props.isCollapsed ? "is-parent-collapsed" : ""}` }, children)))));
 }

package/menu/menu.d.ts

@@ -7,9 +7,10 @@ export type SimpleRouter = {
     pathParams?: RouterPathParams | null;
 };
 export interface MenuProps {
-    configuration: MenuConfiguration;
-    router: SimpleRouter;
     className?: string;
+    configuration: MenuConfiguration;
+    isCollapsed?: boolean;
     isPopoverEnabled?: boolean;
+    router: SimpleRouter;
 }
 export declare function Menu(props: MenuProps): React.JSX.Element;

package/menu/menu.js

@@ -19,5 +19,5 @@ function createActiveTree(menuItem, router) {
 function Menu(props) {
     var _a;
     const activeTree = props.configuration.map((item) => createActiveTree(item, props.router));
-    return (react_1.default.createElement("div", { className: `uxf-menu ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.configuration.map((item, index) => (react_1.default.createElement(menu_item_1.MenuItem, { activeTree: activeTree[index], isPopoverEnabled: props.isPopoverEnabled, item: item, key: item.label, level: 1 })))));
+    return (react_1.default.createElement("div", { className: `uxf-menu ${props.isCollapsed ? "is-collapsed" : ""} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.configuration.map((item, index) => (react_1.default.createElement(menu_item_1.MenuItem, { activeTree: activeTree[index], isCollapsed: props.isCollapsed, isPopoverEnabled: props.isPopoverEnabled, item: item, key: `${item.label}-${props.isCollapsed}-${props.isPopoverEnabled}`, level: 1 })))));
 }

package/menu/menu.stories.js

@@ -1,17 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 });
 exports.Default = Default;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const badge_1 = require("../badge");
+const toggle_1 = require("../toggle");
 const menu_1 = require("./menu");
 const CONFIGURATION = [
     {
-        label: "UXF Web",
+        label: "UXF Web (active)",
         href: "https://www.uxf.cz",
         icon: "eye",
+        routeMatcher: () => true,
     },
     {
         label: "Link without children",
@@ -24,7 +56,7 @@ const CONFIGURATION = [
         icon: "file",
         badge: react_1.default.createElement(badge_1.Badge, null, "5"),
         children: [
-            { label: "Link 1", icon: "bars" },
+            { label: "Link 1 (active)", icon: "bars", routeMatcher: () => true },
             { label: "Link 2", href: "/examples", icon: "copy" },
             { label: "Link with very very long text", href: "/examples", icon: "copy" },
         ],
@@ -41,6 +73,11 @@ const CONFIGURATION = [
     },
 ];
 function Default() {
-    return (react_1.default.createElement("div", { className: "fixed inset-y-0 left-0 w-60 bg-white p-1" },
-        react_1.default.createElement(menu_1.Menu, { configuration: CONFIGURATION, router: { pathname: "", pathParams: {} } })));
+    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
+    const [isPopoverEnabled, setIsPopoverEnabled] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(toggle_1.Toggle, { label: "Collapsed", name: "collapsed", onChange: (value) => setIsCollapsed(value !== null && value !== void 0 ? value : false), value: isCollapsed }),
+        react_1.default.createElement(toggle_1.Toggle, { label: "Popover", name: "popover", onChange: (value) => setIsPopoverEnabled(value !== null && value !== void 0 ? value : false), value: isPopoverEnabled }),
+        react_1.default.createElement("div", { className: `fixed bottom-0 left-0 top-28 bg-white p-1 ${isCollapsed ? "w-15" : "w-60"}` },
+            react_1.default.createElement(menu_1.Menu, { configuration: CONFIGURATION, isCollapsed: isCollapsed, isPopoverEnabled: isPopoverEnabled, router: { pathname: "", pathParams: {} } }))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.111.2",
+    "version": "11.112.1",
     "description": "",
     "publishConfig": {
         "access": "public"