@uxf/ui 11.100.1 → 11.102.0

package/components.d.ts

@@ -40,6 +40,7 @@ import * as lightboxStories from "./lightbox/lightbox.stories";
 import * as listItemStories from "./list-item/list-item.stories";
 import * as loaderStories from "./loader/loader.stories";
 import * as lozengeStories from "./lozenge/lozenge.stories";
+import * as menuStories from "./menu/menu.stories";
 import * as messageStories from "./message/message.stories";
 import * as modalStories from "./modal/modal.stories";
 import * as modalDialogStories from "./modal-dialog/modal-dialog.stories";
@@ -48,6 +49,7 @@ import * as multiComboboxStories from "./multi-combobox/multi-combobox.stories";
 import * as multiSelectStories from "./multi-select/multi-select.stories";
 import * as paginationStories from "./pagination/pagination.stories";
 import * as paperStories from "./paper/paper.stories";
+import * as popoverStories from "./popover/popover.stories";
 import * as radioStories from "./radio/radio.stories";
 import * as radioGroupStories from "./radio-group/radio-group.stories";
 import * as rasterImageStories from "./raster-image/raster-image.stories";
@@ -230,6 +232,10 @@ export declare const components: {
         readonly title: "Lozenge";
         readonly stories: typeof lozengeStories;
     };
+    readonly menu: {
+        readonly title: "Menu";
+        readonly stories: typeof menuStories;
+    };
     readonly message: {
         readonly title: "Message";
         readonly stories: typeof messageStories;
@@ -262,6 +268,10 @@ export declare const components: {
         readonly title: "Paper";
         readonly stories: typeof paperStories;
     };
+    readonly popover: {
+        readonly title: "Popover";
+        readonly stories: typeof popoverStories;
+    };
     readonly radio: {
         readonly title: "Radio";
         readonly stories: typeof radioStories;

package/components.js

@@ -77,6 +77,7 @@ const lightboxStories = __importStar(require("./lightbox/lightbox.stories"));
 const listItemStories = __importStar(require("./list-item/list-item.stories"));
 const loaderStories = __importStar(require("./loader/loader.stories"));
 const lozengeStories = __importStar(require("./lozenge/lozenge.stories"));
+const menuStories = __importStar(require("./menu/menu.stories"));
 const messageStories = __importStar(require("./message/message.stories"));
 const modalStories = __importStar(require("./modal/modal.stories"));
 const modalDialogStories = __importStar(require("./modal-dialog/modal-dialog.stories"));
@@ -85,6 +86,7 @@ const multiComboboxStories = __importStar(require("./multi-combobox/multi-combob
 const multiSelectStories = __importStar(require("./multi-select/multi-select.stories"));
 const paginationStories = __importStar(require("./pagination/pagination.stories"));
 const paperStories = __importStar(require("./paper/paper.stories"));
+const popoverStories = __importStar(require("./popover/popover.stories"));
 const radioStories = __importStar(require("./radio/radio.stories"));
 const radioGroupStories = __importStar(require("./radio-group/radio-group.stories"));
 const rasterImageStories = __importStar(require("./raster-image/raster-image.stories"));
@@ -267,6 +269,10 @@ exports.components = {
         title: "Lozenge",
         stories: lozengeStories
     },
+    "menu": {
+        title: "Menu",
+        stories: menuStories
+    },
     "message": {
         title: "Message",
         stories: messageStories
@@ -299,6 +305,10 @@ exports.components = {
         title: "Paper",
         stories: paperStories
     },
+    "popover": {
+        title: "Popover",
+        stories: popoverStories
+    },
     "radio": {
         title: "Radio",
         stories: radioStories

package/css/badge.css

@@ -1,16 +1,34 @@
+:root {
+    --uxf-badge-size: theme("space.8");
+    --uxf-badge-font-size: theme("fontSize.base");
+}
+
 .uxf-badge {
     @apply bg-primary inline-flex shrink-0 items-center justify-center font-bold text-white;
 
+    font-size: var(--uxf-badge-font-size);
+    height: var(--uxf-badge-size);
+    min-width: var(--uxf-badge-size);
+
     &--size-small {
-        @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;
+        --uxf-badge-size: theme("space.6");
+        --uxf-badge-font-size: theme("fontSize.sm");
+
+        @apply rounded-[12px] px-1.5;
     }
 
     &--size-medium {
-        @apply h-8 min-w-[32px] rounded-[16px] px-2 text-base;
+        --uxf-badge-size: theme("space.8");
+        --uxf-badge-font-size: theme("fontSize.base");
+
+        @apply rounded-[16px] px-2;
     }
 
     &--size-large {
-        @apply h-10 min-w-[40px] rounded-[20px] px-2 text-lg;
+        --uxf-badge-size: theme("space.10");
+        --uxf-badge-font-size: theme("fontSize.lg");
+
+        @apply rounded-[20px] px-2;
     }
 
     :root .dark & {

package/css/menu.css

@@ -0,0 +1,113 @@
+:root {
+    --uxf-menu-item-background-color: inherit;
+    --uxf-menu-icon-size: 16px;
+    --uxf-menu-item-gap: 12px;
+    --uxf-menu-item-px: 12px;
+    --uxf-menu-item-border-radius: 8px;
+}
+
+.uxf-menu {
+    font-size: theme("fontSize.sm");
+    padding: 4px;
+}
+
+.uxf-menu-item {
+    align-items: center;
+    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);
+    height: 44px;
+    margin-bottom: 2px;
+    padding: 4px var(--uxf-menu-item-px);
+    width: 100%;
+
+    &:hover {
+        --uxf-menu-item-background-color: var(--uxf-color-base-surface-main-hover);
+    }
+
+    &.is-active:not(.uxf-menu-item--level-1),
+    &.is-active.has-no-children {
+        --uxf-menu-item-background-color: #e5e7eb;
+
+        font-weight: 500;
+    }
+}
+
+.uxf-menu-item__right-element {
+    align-items: center;
+    display: flex;
+
+    .uxf-badge {
+        --uxf-badge-size: 16px;
+        --uxf-badge-font-size: 12px;
+
+        font-weight: normal;
+        padding: 0 4px;
+    }
+}
+
+.uxf-menu-item__icon {
+    height: var(--uxf-menu-icon-size);
+    width: var(--uxf-menu-icon-size);
+}
+
+.uxf-menu-item__label {
+    flex-grow: 1;
+    text-align: left;
+
+    @apply truncate;
+}
+
+.uxf-menu-item__open-icon {
+    @apply transition-transform duration-200;
+
+    height: 20px;
+    width: 20px;
+
+    &.is-close {
+        transform: rotate(-90deg);
+    }
+}
+
+.uxf-menu__submenu {
+    padding-left: calc(var(--uxf-menu-item-gap) + var(--uxf-menu-icon-size));
+    position: relative;
+
+    &::before {
+        background-color: #e5e7eb;
+        bottom: 0;
+        content: "";
+        left: calc(var(--uxf-menu-item-px) + var(--uxf-menu-icon-size) / 2);
+        position: absolute;
+        top: 0;
+        width: 1px;
+    }
+
+    .uxf-menu-item {
+        position: relative;
+
+        &:hover {
+            &::before {
+                background-color: #0f1012;
+                bottom: 0;
+                content: "";
+                left: calc(-1 * (var(--uxf-menu-icon-size) / 2));
+                position: absolute;
+                top: 0;
+                width: 2px;
+            }
+        }
+    }
+}
+
+.uxf-menu__popover {
+    background-color: var(--uxf-color-base-surface-main);
+    border: 1px solid var(--uxf-color-base-border-border);
+    border-radius: 8px;
+    box-shadow: theme("boxShadow.sm");
+    padding: 4px;
+}

package/dialog/dialog.d.ts

@@ -1,6 +1,6 @@
 import { UseFloatingReturn } from "@floating-ui/react";
 import { DialogVariants } from "@uxf/ui/dialog/theme";
-import React, { FC, HTMLProps, ReactNode, Ref } from "react";
+import React, { CSSProperties, FC, HTMLProps, ReactNode, Ref } from "react";
 type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Partial<Record<string, unknown>>;
 export type DialogVariant = keyof DialogVariants;
 export interface DialogProps {
@@ -10,9 +10,10 @@ export interface DialogProps {
     forwardedRef: Ref<HTMLDivElement>;
     getFloatingProps: GetFloatingElementProps;
     isOpen: boolean;
+    style?: CSSProperties;
     variant?: DialogVariant;
 }
-type DialogProviderProps = Pick<DialogProps, "variant" | "className" | "children">;
+type DialogProviderProps = Pick<DialogProps, "variant" | "className" | "children" | "style">;
 export declare const Dialog: React.NamedExoticComponent<DialogProps>;
 type DialogCloseHandler = () => void;
 export declare function useDialog(dialogConfig?: {

package/dialog/dialog.js

@@ -45,7 +45,7 @@ exports.Dialog = (0, react_2.memo)((props) => {
     var _a, _b;
     return (react_2.default.createElement(react_1.FloatingPortal, null,
         react_2.default.createElement(show_1.Show, { when: props.isOpen },
-            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, lockScroll: true },
+            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, lockScroll: true, style: props.style },
                 react_2.default.createElement(react_1.FloatingFocusManager, { context: props.context, guards: true, initialFocus: 0, modal: true },
                     react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
                         react_2.default.createElement("div", { className: "uxf-dialog__body" },
@@ -78,7 +78,7 @@ function useDialog(dialogConfig) {
     const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
     const latestContext = (0, use_latest_1.useLatest)(context);
     const DialogProvider = (0, react_2.useCallback)((config) => {
-        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), variant: config === null || config === void 0 ? void 0 : config.variant }, content));
+        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), style: config === null || config === void 0 ? void 0 : config.style, variant: config === null || config === void 0 ? void 0 : config.variant }, content));
     }, [latestContext, refs.setFloating, getFloatingProps, content]);
     return {
         openDialog: setContent,

package/input/input-element.d.ts

@@ -1,5 +1,5 @@
 import { FormControlProps } from "@uxf/ui/types/form-control-props";
-import React, { CSSProperties, KeyboardEventHandler } from "react";
+import React, { ClipboardEventHandler, CSSProperties, InputEventHandler, KeyboardEventHandler } from "react";
 type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
 export interface InputElementProps extends FormControlProps<string> {
     "aria-describedby"?: string;
@@ -9,7 +9,9 @@ export interface InputElementProps extends FormControlProps<string> {
     form?: string;
     id?: string;
     inputMode?: InputMode;
+    onBeforeInput?: InputEventHandler<HTMLInputElement>;
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    onPaste?: ClipboardEventHandler<HTMLInputElement>;
     placeholder?: string;
     type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url" | "time";
     maxLength?: number | undefined;

package/input/input-element.js

@@ -39,6 +39,6 @@ const react_1 = __importStar(require("react"));
 exports.InputElement = (0, react_1.forwardRef)((props, ref) => {
     const onChange = (event) => props.onChange(event.target.value, event);
     const ariaAndDataAttrs = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
-    return (react_1.default.createElement("input", { ...ariaAndDataAttrs, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, style: props.style, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
+    return (react_1.default.createElement("input", { ...ariaAndDataAttrs, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBeforeInput: props.onBeforeInput, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onPaste: props.onPaste, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, style: props.style, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
 });
 exports.InputElement.displayName = "UxfUiInputElement";

package/menu/README.md

@@ -0,0 +1,29 @@
+# Menu
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/menu.css");
+```
+
+## How to use active item
+
+```tsx
+// app directory
+import { usePathname } from "next/navigation";
+import { usePageParams } from "@app-routes";
+
+const pathname = usePathname();
+const pathParams = usePageParams();
+
+<Menu configuration={...} router={{pathname, pathParams}}/>
+```
+
+```tsx
+// pages directory 
+import { useRouter } from "next/router";
+
+const router = useRouter();
+
+<Menu configuration={...} router={router}
+```

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

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { IconName } from "../../icon/types";
+import { NextLink } from "../../utils/next-link";
+interface MenuItemButtonProps {
+    icon?: IconName;
+    label: string;
+    hasChildren?: boolean;
+    LinkComponent?: NextLink | "a";
+    href?: string;
+    onClick?: () => void;
+    isOpen?: boolean;
+    level?: number;
+    isActive?: boolean;
+    badge?: ReactElement;
+}
+export declare function MenuItemButton(props: MenuItemButtonProps): ReactElement;
+export {};

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItemButton = MenuItemButton;
+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) {
+    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 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("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("button", { className: className, onClick: props.onClick, title: props.label }, content));
+}

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

@@ -0,0 +1,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;
+    isPopoverEnabled?: boolean;
+}
+export declare function MenuItem(props: Props): React.JSX.Element;
+export {};

package/menu/components/menu-item.js

@@ -0,0 +1,67 @@
+"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 });
+exports.MenuItem = MenuItem;
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const throw_error_1 = require("@uxf/core/utils/throw-error");
+const react_1 = __importStar(require("react"));
+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 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: () => setIsOpen((prev) => !prev) }));
+    if ((0, is_nil_1.isNil)(props.item.children) || (0, is_empty_1.isEmpty)(props.item.children)) {
+        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 }));
+    });
+    if (!props.isPopoverEnabled) {
+        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)));
+}

package/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from "./menu";
+export type { MenuProps } from "./menu";

package/menu/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var menu_1 = require("./menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });

package/menu/menu.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { RouterPathParams } from "../types/path-params";
+import { MenuItemConfiguration } from "./types";
+export type MenuConfiguration = MenuItemConfiguration[];
+export type SimpleRouter = {
+    pathname: string | null;
+    pathParams?: RouterPathParams | null;
+};
+export interface MenuProps {
+    configuration: MenuConfiguration;
+    router: SimpleRouter;
+    className?: string;
+    isPopoverEnabled?: boolean;
+}
+export declare function Menu(props: MenuProps): React.JSX.Element;

package/menu/menu.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.Menu = Menu;
+const react_1 = __importDefault(require("react"));
+const menu_item_1 = require("./components/menu-item");
+function createActiveTree(menuItem, router) {
+    var _a, _b, _c, _d;
+    const children = (_a = menuItem.children) === null || _a === void 0 ? void 0 : _a.map((child) => createActiveTree(child, router));
+    return {
+        isActive: (children === null || children === void 0 ? void 0 : children.some((child) => child.isActive)) ||
+            ((_b = menuItem.routeMatcher) === null || _b === void 0 ? void 0 : _b.call(menuItem, (_c = router.pathname) !== null && _c !== void 0 ? _c : "", (_d = router.pathParams) !== null && _d !== void 0 ? _d : {})) ||
+            false,
+        children,
+    };
+}
+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 })))));
+}

package/menu/menu.spec.d.ts

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

package/menu/menu.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const menu_stories_1 = require("./menu.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(menu_stories_1.Default, null));

package/menu/menu.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/menu/menu.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const badge_1 = require("../badge");
+const menu_1 = require("./menu");
+const CONFIGURATION = [
+    {
+        label: "UXF Web",
+        href: "https://www.uxf.cz",
+        icon: "eye",
+    },
+    {
+        label: "Link without children",
+        href: "/examples/ui/menu/Default",
+        icon: "camera",
+        badge: react_1.default.createElement("div", { className: "text-xs font-semibold text-neutral-500" }, "12"),
+    },
+    {
+        label: "Link with children",
+        icon: "file",
+        badge: react_1.default.createElement(badge_1.Badge, null, "5"),
+        children: [
+            { label: "Link 1", icon: "bars" },
+            { label: "Link 2", href: "/examples", icon: "copy" },
+            { label: "Link with very very long text", href: "/examples", icon: "copy" },
+        ],
+    },
+    {
+        label: "Link with very very long text",
+        icon: "file",
+        badge: react_1.default.createElement(badge_1.Badge, null, "5"),
+    },
+];
+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: {} } })));
+}

package/menu/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { IconName } from "../icon/types";
+import { RouterPathParams } from "../types/path-params";
+import { NextLink } from "../utils/next-link";
+export type ActiveTreeNode = {
+    isActive: boolean;
+    children?: ActiveTreeNode[];
+};
+export interface MenuItemConfiguration {
+    as?: NextLink | "a";
+    href?: string;
+    onClick?: () => void;
+    icon?: IconName;
+    label: string;
+    children?: MenuItemConfiguration[];
+    routeMatcher?: (pathname: string, pathParams?: RouterPathParams) => boolean;
+    badge?: ReactElement;
+}

package/menu/types.js

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