@uxf/cms 10.0.0-beta.9 → 10.0.1

package/config/container.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
+import { FunctionParametersGenerator } from "@uxf/router";
 import { NextPageContext } from "next";
-import UserResponse, { FileResponse } from "../api";
 import { LinkProps } from "next/link";
-import { FunctionParametersGenerator } from "@uxf/router";
+import { ReactNode } from "react";
+import UserResponse, { FileResponse } from "../api";
 export interface NotificationServiceInterface {
     info: (message: ReactNode) => void;
     success: (message: ReactNode) => void;

package/deprecated/api/api-client.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const axios_1 = __importDefault(require("axios"));
 const ForbiddenError_1 = require("../../errors/ForbiddenError");
 const NetworkError_1 = require("../../errors/NetworkError");
 const UnauthorizedError_1 = require("../../errors/UnauthorizedError");
-const axios_1 = __importDefault(require("axios"));
 const getClient = (options = {}) => {
     const client = axios_1.default.create(options);
     // Add a request interceptor

package/deprecated/hoc/with-authenticate.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withAuthenticate = void 0;
-const UnauthorizedError_1 = require("../../errors/UnauthorizedError");
+const react_1 = __importStar(require("react"));
 const api_1 = require("../../api");
+const config_1 = require("../../config");
+const UnauthorizedError_1 = require("../../errors/UnauthorizedError");
 const user_1 = require("../redux/user");
-const react_1 = __importStar(require("react"));
 const cms_authorizator_1 = __importDefault(require("../security/cms-authorizator"));
-const config_1 = require("../../config");
 // TODO component any
 const withAuthenticate = (config) => (Component) => {
     var _a;

package/deprecated/redux/configure-store.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initializeStore = void 0;
+const extension_1 = require("@redux-devtools/extension");
 const redux_1 = require("redux");
-const redux_devtools_extension_1 = require("redux-devtools-extension");
 const reducer_1 = __importDefault(require("../redux/entities/reducer"));
 const reducer_2 = __importDefault(require("../redux/user/reducer"));
 // TODO: create root reducer to have possibility reset store on logout...
 const initializeStore = (initialState = {}) => (0, redux_1.createStore)((0, redux_1.combineReducers)({
     entities: reducer_1.default,
     user: reducer_2.default,
-}), initialState, (0, redux_devtools_extension_1.composeWithDevTools)((0, redux_1.applyMiddleware)()));
+}), initialState, (0, extension_1.composeWithDevTools)((0, redux_1.applyMiddleware)()));
 exports.initializeStore = initializeStore;

package/deprecated/redux/entities/actions.d.ts

@@ -1,7 +1,7 @@
+import { Schema } from "@uxf/data-grid";
 import { EntityMetaSchema } from "../../../api";
 import { EntityFormSchema } from "../../types/form";
 import { ActionsUnion } from "../redux-helper";
-import { Schema } from "@uxf/data-grid";
 export interface IState {
     meta: Record<string, EntityMetaSchema>;
     form: Record<string, EntityFormSchema>;

package/deprecated/redux/entities/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./selectors";
 export * from "./actions";
+export * from "./selectors";

package/deprecated/redux/entities/index.js

@@ -14,5 +14,5 @@ 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("./selectors"), exports);
 __exportStar(require("./actions"), exports);
+__exportStar(require("./selectors"), exports);

package/deprecated/redux/entities/selectors.d.ts

@@ -1,7 +1,7 @@
 import { Schema } from "@uxf/data-grid";
 import { EntityMetaSchema } from "../../../api";
-import { IReduxState } from "../types";
 import { EntityFormSchema } from "../../types/form";
+import { IReduxState } from "../types";
 export declare const metaSchemaExistsSelector: (state: IReduxState) => boolean;
 export declare const metaSchemaSelector: (entityAlias: string) => (state: IReduxState) => EntityMetaSchema;
 export declare const gridSchemaExistsSelector: (entityAlias: string) => (state: IReduxState) => boolean;

package/deprecated/redux/index.d.ts

@@ -1,3 +1,3 @@
-export { withReduxStore } from "./with-redux-store";
-export * from "./types";
 export { useSelector } from "react-redux";
+export * from "./types";
+export { withReduxStore } from "./with-redux-store";

package/deprecated/redux/index.js

@@ -14,9 +14,9 @@ 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 });
-exports.useSelector = exports.withReduxStore = void 0;
-var with_redux_store_1 = require("./with-redux-store");
-Object.defineProperty(exports, "withReduxStore", { enumerable: true, get: function () { return with_redux_store_1.withReduxStore; } });
-__exportStar(require("./types"), exports);
+exports.withReduxStore = exports.useSelector = void 0;
 var react_redux_1 = require("react-redux");
 Object.defineProperty(exports, "useSelector", { enumerable: true, get: function () { return react_redux_1.useSelector; } });
+__exportStar(require("./types"), exports);
+var with_redux_store_1 = require("./with-redux-store");
+Object.defineProperty(exports, "withReduxStore", { enumerable: true, get: function () { return with_redux_store_1.withReduxStore; } });

package/deprecated/redux/types.d.ts

@@ -1,5 +1,5 @@
 import { ActionTypes as EntitiesActionTypes, IState as IEntitiesState } from "../redux/entities/actions";
-import { ActionTypes as UserActionTypes, IState as IUserState } from "../redux/user/actions";
+import { IState as IUserState, ActionTypes as UserActionTypes } from "../redux/user/actions";
 export interface IReduxState {
     entities: IEntitiesState;
     user: IUserState;

package/deprecated/redux/user/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./selectors";
 export * from "./actions";
+export * from "./selectors";

package/deprecated/redux/user/index.js

@@ -14,5 +14,5 @@ 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("./selectors"), exports);
 __exportStar(require("./actions"), exports);
+__exportStar(require("./selectors"), exports);

package/forms/change-password-form/change-password-form.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChangePasswordForm = void 0;
-const react_1 = __importDefault(require("react"));
 const form_1 = require("@uxf/form/form");
 const text_input_1 = require("@uxf/form/text-input");
 const button_1 = require("@uxf/ui/button");
-const widget_1 = require("../../ui/widget");
+const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
+const widget_1 = require("../../ui/widget");
 const ChangePasswordForm = (props) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { defaultValues, ...formProps } = props;

package/forms/components/wysiwyg-input/wysiwyg-input.d.ts

@@ -1,10 +1,10 @@
 import { FormControlProps } from "@uxf/ui/types";
 import { WysiwygContent, WysiwygPlugin } from "@uxf/wysiwyg";
 import { CreateAllPluginsOptions } from "@uxf/wysiwyg/create-all-plugins-with-ui";
+import { WysiwygRecursivePlugin } from "@uxf/wysiwyg/types";
+import { WysiwygEditorProps } from "@uxf/wysiwyg/wysiwyg-editor";
 import React, { KeyboardEventHandler, ReactNode } from "react";
 import { FieldValues, UseControllerProps } from "react-hook-form";
-import { WysiwygEditorProps } from "@uxf/wysiwyg/wysiwyg-editor";
-import { WysiwygRecursivePlugin } from "@uxf/wysiwyg/types";
 export type UIWysiwygInputProps = FormControlProps<WysiwygContent, HTMLDivElement> & {
     allPluginsOptions?: CreateAllPluginsOptions;
     autoComplete?: string;

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

@@ -27,13 +27,13 @@ exports.WysiwygInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const cx_1 = require("@uxf/core/utils/cx");
+const file_1 = require("@uxf/core/utils/file");
+const form_component_1 = require("@uxf/ui/form-component");
 const wysiwyg_1 = require("@uxf/wysiwyg");
 const create_all_plugins_with_ui_1 = require("@uxf/wysiwyg/create-all-plugins-with-ui");
 const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const file_1 = require("@uxf/core/utils/file");
 const api_1 = require("../../../api");
-const form_component_1 = require("@uxf/ui/form-component");
 function WysiwygInput(props) {
     var _a, _b, _c, _d, _e;
     const { field, fieldState } = (0, react_hook_form_1.useController)({

package/forms/forgotten-password-form/forgotten-password-form.js

@@ -27,8 +27,8 @@ exports.ForgottenPasswordForm = void 0;
 const form_1 = require("@uxf/form/form");
 const text_input_1 = require("@uxf/form/text-input");
 const button_1 = require("@uxf/ui/button");
-const react_1 = __importStar(require("react"));
 const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const ForgottenPasswordForm = (props) => {
     // eslint-disable-next-line react/destructuring-assignment

package/forms/invite-user-form/invite-user-form.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,8 +11,8 @@ const multi_combobox_1 = require("@uxf/form/multi-combobox");
 const text_input_1 = require("@uxf/form/text-input");
 const button_1 = require("@uxf/ui/button");
 const react_1 = __importDefault(require("react"));
-const widget_1 = require("../../ui/widget");
 const react_hook_form_1 = require("react-hook-form");
+const widget_1 = require("../../ui/widget");
 const InviteUserForm = (props) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { defaultValues, ...formProps } = props;

package/forms/login-form/login-form.js

@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginForm = void 0;
-const react_1 = __importStar(require("react"));
 const form_1 = require("@uxf/form/form");
 const text_input_1 = require("@uxf/form/text-input");
 const button_1 = require("@uxf/ui/button");
 const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const LoginForm = (props) => {
     // eslint-disable-next-line react/destructuring-assignment

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createUseAxiosRequest = void 0;
 const axios_hooks_1 = require("axios-hooks");
+const react_1 = require("react");
 // eslint-disable-next-line import/no-cycle
 const config_1 = require("../../config");
-const react_1 = require("react");
 const createUseAxiosRequest = (axiosInstance, requestConfig) => {
     const useAxios = (0, axios_hooks_1.makeUseAxios)({
         axios: axiosInstance,

package/lib/layout/breadcrumbs.js

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumbs = void 0;
-const react_1 = __importDefault(require("react"));
-const link_1 = __importDefault(require("next/link"));
 const icon_1 = require("@uxf/ui/icon");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
 const Breadcrumbs = (props) => {
     if (props.items.length === 0) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: "uxf-typo-body mb-4 flex flex-wrap items-center text-lightLow" }, props.items.map((item, index) => (react_1.default.createElement("span", { className: "mr-2 last:mr-0", key: index },
-        !!index && react_1.default.createElement(icon_1.Icon, { className: "mr-2 inline", name: "angleRight", size: 16 }),
-        item.href ? (react_1.default.createElement(link_1.default, { href: item.href, className: "transition-colors hover:text-lightHigh" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-breadcrumbs" }, props.items.map((item, index) => (react_1.default.createElement("span", { className: "uxf-cms-breadcrumbs__item", key: index },
+        !!index && react_1.default.createElement(icon_1.Icon, { className: "uxf-cms-breadcrumbs__divide-icon", name: "angleRight", size: 16 }),
+        item.href ? (react_1.default.createElement(link_1.default, { href: item.href, className: "uxf-cms-breadcrumbs__link" },
             react_1.default.createElement("span", null, item.title))) : (react_1.default.createElement("span", null, item.title)))))));
 };
 exports.Breadcrumbs = Breadcrumbs;

package/lib/layout/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./layout";
 export * from "./breadcrumbs";
+export * from "./layout";
 export * from "./types";

package/lib/layout/index.js

@@ -14,6 +14,6 @@ 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("./layout"), exports);
 __exportStar(require("./breadcrumbs"), exports);
+__exportStar(require("./layout"), exports);
 __exportStar(require("./types"), exports);

package/lib/layout/layout-container.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutContainer = void 0;
 const react_1 = __importDefault(require("react"));
 const maxWidthClassName = {
-    narrow: "max-w-[788px]",
-    wide: "max-w-[1024px]",
+    narrow: "uxf-cms-layout__container--narrow",
+    wide: "uxf-cms-layout__container--wide",
     fullWidth: "",
     none: "",
 };
@@ -17,6 +17,6 @@ const LayoutContainer = (props) => {
     if (type === "none") {
         return react_1.default.createElement(react_1.default.Fragment, null, props.children);
     }
-    return (react_1.default.createElement("div", { className: `${maxWidthClassName[type]} mx-auto px-4 md:px-10 ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
+    return (react_1.default.createElement("div", { className: `${maxWidthClassName[type]} uxf-cms-layout__container ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
 };
 exports.LayoutContainer = LayoutContainer;

package/lib/layout/layout.js

@@ -1,43 +1,45 @@
 "use strict";
+"use client";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = void 0;
+const loader_1 = require("@uxf/ui/loader/loader");
 const head_1 = __importDefault(require("next/head"));
 const react_1 = __importDefault(require("react"));
 const config_1 = require("../../config");
-const sidebar_1 = require("./sidebar");
-const styles_1 = require("./styles");
 const breadcrumbs_1 = require("./breadcrumbs");
-const loader_1 = require("@uxf/ui/loader/loader");
 const layout_container_1 = require("./layout-container");
+const sidebar_1 = require("./sidebar");
+const styles_1 = require("./styles");
 const Layout = (props) => {
-    var _a;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { Header, Logo, MessageBar, TitleRightContainer, ToolbarRight, breadcrumbs, children, containerType, headerContainerType, loading, mainClassName, menuConfiguration, subtitle, title, stickyHeader, CustomHeader, } = props;
+    var _a, _b;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(head_1.default, null,
             react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
             react_1.default.createElement("meta", { charSet: "utf-8" }),
-            react_1.default.createElement("title", null, `${title} | ${(_a = config_1.config.get("app-name")) !== null && _a !== void 0 ? _a : ""}`)),
-        react_1.default.createElement("div", { className: "flex" },
-            react_1.default.createElement("div", { className: "flex w-full bg-gray-100 dark:bg-gray-900 dark:text-darkHigh" },
-                react_1.default.createElement(sidebar_1.Sidebar, { menuConfiguration: menuConfiguration, Logo: Logo }),
-                react_1.default.createElement("main", { className: `min-h-screen w-full pb-16 md:ml-[var(--drawerWidth)] md:w-[calc(100%_-_var(--drawerWidth))] md:pb-0 ${mainClassName !== null && mainClassName !== void 0 ? mainClassName : ""}`, style: { "--drawerWidth": `${styles_1.drawerWidth}px` } }, loading ? (react_1.default.createElement("div", { className: "flex h-96 flex-col items-center justify-center" },
-                    react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement("title", null, `${props.title} | ${config_1.config.get("app-name") || ""}`)),
+        react_1.default.createElement("div", { className: "uxf-cms-layout" },
+            react_1.default.createElement("div", { className: "uxf-cms-layout__wrapper" },
+                react_1.default.createElement(sidebar_1.Sidebar, { menuConfiguration: props.menuConfiguration, Logo: props.Logo }),
+                react_1.default.createElement("main", { className: `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`, style: { "--drawer-width": `${styles_1.drawerWidth}px` } }, props.loading ? (react_1.default.createElement("div", { className: "uxf-cms-layout__loading" },
+                    react_1.default.createElement("div", { className: "uxf-cms-layout__loading-inner" },
                         react_1.default.createElement(loader_1.Loader, null),
-                        react_1.default.createElement("p", { className: "mt-2" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    CustomHeader ? (CustomHeader) : (react_1.default.createElement("div", { className: `${Header ? "bg-white dark:bg-gray-950" : ""} ${stickyHeader ? "sticky top-0 z-10 bg-white shadow-md dark:bg-gray-950" : ""}` },
-                        ToolbarRight && (react_1.default.createElement("div", { className: "flex h-12 items-center justify-end bg-sidebar-background px-6 text-darkMedium" }, ToolbarRight)),
-                        MessageBar,
-                        react_1.default.createElement(layout_container_1.LayoutContainer, { type: headerContainerType !== null && headerContainerType !== void 0 ? headerContainerType : containerType, className: "pb-9 pt-12" },
-                            breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: breadcrumbs }),
-                            react_1.default.createElement("div", { className: "flex items-center justify-between" },
-                                react_1.default.createElement("h1", { className: "uxf-typo-h4" }, title),
-                                TitleRightContainer),
-                            subtitle,
-                            Header))),
-                    react_1.default.createElement(layout_container_1.LayoutContainer, { type: containerType }, children))))))));
+                        react_1.default.createElement("p", { className: "uxf-cms-layout__loading-text" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    props.CustomHeader ? (props.CustomHeader) : (react_1.default.createElement("div", { className: `${props.Header ? "uxf-cms-layout__header" : ""} ${props.stickyHeader ? "uxf-cms-layout__header--sticky" : ""}` },
+                        props.ToolbarRight && (react_1.default.createElement("div", { className: "uxf-cms-layout__toolbar" }, props.ToolbarRight)),
+                        props.MessageBar,
+                        react_1.default.createElement(layout_container_1.LayoutContainer, { type: (_b = props.headerContainerType) !== null && _b !== void 0 ? _b : props.containerType, className: "uxf-cms-layout__container--basic" },
+                            react_1.default.createElement("div", { className: "uxf-cms-layout__avatar-title-wrapper" },
+                                props.Avatar,
+                                react_1.default.createElement("div", { className: "uxf-cms-layout__breadcrumbs-title-wrapper" },
+                                    props.breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: props.breadcrumbs }),
+                                    react_1.default.createElement("div", { className: "uxf-cms-layout__title-wrapper" },
+                                        react_1.default.createElement("h1", { className: "uxf-cms-layout__title" }, props.title),
+                                        props.TitleRightContainer),
+                                    props.subtitle,
+                                    props.Header))))),
+                    react_1.default.createElement(layout_container_1.LayoutContainer, { type: props.containerType }, props.children))))))));
 };
 exports.Layout = Layout;

package/lib/layout/sidebar.js

@@ -25,38 +25,52 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidebar = void 0;
 const react_1 = __importStar(require("react"));
+const tw_screens_1 = require("../../ui/tw-tokens/tw-screens");
 const menu_1 = require("../menu");
-const styles_1 = require("./styles");
-const user_menu_1 = require("../menu/ui/user-menu");
 const mobile_bar_1 = require("../menu/mobile-bar");
-const useOnMount_1 = require("@uxf/core/hooks/useOnMount");
+const user_menu_1 = require("../menu/ui/user-menu");
+const styles_1 = require("./styles");
 const uxfLogo = (react_1.default.createElement("svg", { width: "134", height: "30", viewBox: "0 0 179 40" },
     react_1.default.createElement("path", { fill: "#FFF", fillRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", clipRule: "evenodd" }),
     react_1.default.createElement("path", { fill: "#FFF", fillRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", clipRule: "evenodd" })));
 const Sidebar = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { menuConfiguration, Logo, CustomSidebar } = props;
+    var _a, _b;
     const [deviceHeight, setDeviceHeight] = (0, react_1.useState)(0);
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
     const toggleMenu = () => setIsMenuOpen((prev) => !prev);
-    (0, useOnMount_1.useOnMount)(() => {
-        const handleDeviceHeight = () => {
-            var _a, _b;
-            setDeviceHeight((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight);
+    (0, react_1.useEffect)(() => {
+        const handler = () => { var _a, _b; return setDeviceHeight((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight); };
+        handler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const handler = () => {
+            if (!window.matchMedia(`(min-width: ${tw_screens_1.twScreens.md})`).matches && isMenuOpen) {
+                document.body.style.overflow = "hidden";
+            }
+            else {
+                document.body.style.overflow = "";
+            }
         };
-        handleDeviceHeight();
-        window.addEventListener("resize", handleDeviceHeight);
+        handler();
+        window.addEventListener("resize", handler);
         return () => {
-            window.removeEventListener("resize", handleDeviceHeight);
+            document.body.style.overflow = "";
+            window.removeEventListener("resize", handler);
         };
-    });
-    return (CustomSidebar !== null && CustomSidebar !== void 0 ? CustomSidebar : (react_1.default.createElement("div", { className: "sidebar fixed z-1 flex w-full flex-col max-md:z-[15] md:w-[var(--drawerWidth)]", style: { "--drawerWidth": `${styles_1.drawerWidth}px` } },
-        react_1.default.createElement("div", { className: `h-[calc(var(--deviceHeight)_-_48px)] flex-col bg-sidebar-background pt-5 md:h-screen ${isMenuOpen ? "flex" : "hidden md:flex"}`, style: { "--deviceHeight": `${deviceHeight}px` } },
-            react_1.default.createElement("div", { className: "sidebar__logo px-4" }, Logo !== null && Logo !== void 0 ? Logo : uxfLogo),
-            menuConfiguration && menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: `sidebar__nav grow overflow-auto px-2 md:px-0 ${menuConfiguration[0].type === "super-section" ? "mt-4" : "mt-8"}` },
-                    react_1.default.createElement(menu_1.Menu, { menu: menuConfiguration })),
-                react_1.default.createElement(user_menu_1.UserMenu, { menu: menuConfiguration })))),
-        menuConfiguration && react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: menuConfiguration, toggleMenu: toggleMenu }))));
+    }, [isMenuOpen]);
+    return ((_a = props.CustomSidebar) !== null && _a !== void 0 ? _a : (react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: { "--drawer-width": `${styles_1.drawerWidth}px` } },
+        react_1.default.createElement("div", { className: `uxf-cms-sidebar__content ${isMenuOpen ? "uxf-cms-sidebar__content--open" : "uxf-cms-sidebar__content--closed"}`, style: { "--device-height": `${deviceHeight}px` } },
+            react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_b = props.Logo) !== null && _b !== void 0 ? _b : uxfLogo),
+            props.menuConfiguration && props.menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${props.menuConfiguration[0].type === "super-section"
+                        ? "uxf-cms-sidebar__nav--super-section"
+                        : ""}` },
+                    react_1.default.createElement(menu_1.Menu, { menu: props.menuConfiguration })),
+                react_1.default.createElement(user_menu_1.UserMenu, { menu: props.menuConfiguration })))),
+        props.menuConfiguration && (react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: props.menuConfiguration, toggleMenu: toggleMenu })))));
 };
 exports.Sidebar = Sidebar;

package/lib/layout/types.d.ts

@@ -6,6 +6,7 @@ export interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {
     type?: LayoutContainerType;
 }
 export type LayoutProps = SidebarProps & {
+    Avatar?: ReactNode;
     children?: ReactNode;
     containerType?: LayoutContainerType;
     headerContainerType?: LayoutContainerType;

package/lib/login-layout/login-layout.js

@@ -4,18 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginLayout = void 0;
+const paper_1 = require("@uxf/ui/paper/paper");
 const head_1 = __importDefault(require("next/head"));
 const react_1 = __importDefault(require("react"));
-const paper_1 = require("@uxf/ui/paper/paper");
 const LoginLayout = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { hideTitle, title, subTitle, pageTitle, children, Logo } = props;
-    return (react_1.default.createElement("div", { className: "flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4 dark:bg-gray-900 dark:text-darkHigh" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-login-layout" },
         react_1.default.createElement(head_1.default, null,
-            react_1.default.createElement("title", null, pageTitle || "")),
-        Logo && react_1.default.createElement("div", { className: "mb-8" }, Logo),
-        title && react_1.default.createElement("h1", { className: hideTitle ? "sr-only" : "uxf-typo-h4" }, title),
-        subTitle && react_1.default.createElement("p", { className: "uxf-typo-body mt-2 text-lightMedium" }, subTitle),
-        react_1.default.createElement(paper_1.Paper, { className: "mt-8 w-[448px] max-w-full p-6 dark:bg-gray-950" }, children)));
+            react_1.default.createElement("title", null, props.pageTitle || "")),
+        props.Logo && react_1.default.createElement("div", { className: "uxf-cms-login-layout__logo-wrapper" }, props.Logo),
+        props.title && (react_1.default.createElement("h1", { className: `uxf-cms-login-layout__title ${props.hideTitle ? "uxf-cms-login-layout__title--hidden" : ""}` }, props.title)),
+        props.subTitle && react_1.default.createElement("p", { className: "uxf-cms-login-layout__subtitle" }, props.subTitle),
+        react_1.default.createElement(paper_1.Paper, { className: "uxf-cms-login-layout__body" }, props.children)));
 };
 exports.LoginLayout = LoginLayout;

package/lib/menu/factory.d.ts

@@ -1,10 +1,10 @@
-import { MenuItem, UserMenuData } from "./model";
 import { IconName } from "@uxf/ui/icon/types";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
+import { MenuItem, UserMenuData } from "./model";
 export declare function createCustomContent(title: string, content: ReactNode): MenuItem;
 export declare function createSuperSection(title: string, children?: MenuItem[]): MenuItem;
 export declare function createSection(title: string, icon?: IconName, children?: MenuItem[]): MenuItem;
-export declare function createLink(title: string, routeName: string, routeParams?: any, icon?: IconName): MenuItem;
-export declare function createExternalLink(title: string, href: string, icon?: IconName): MenuItem;
+export declare function createLink(title: string, routeName: string, routeParams?: any, icon?: IconName, endElement?: ReactElement): MenuItem;
+export declare function createExternalLink(title: string, href: string, icon?: IconName, endElement?: ReactElement): MenuItem;
 export declare function createUserMenu(userMenuData: UserMenuData, children?: MenuItem[]): MenuItem;
-export declare function createTableLink(title: string, entityAlias: string, icon?: IconName): MenuItem;
+export declare function createTableLink(title: string, entityAlias: string, icon?: IconName, endElement?: ReactElement): MenuItem;

package/lib/menu/factory.js

@@ -15,25 +15,27 @@ function createSection(title, icon, children) {
     return model_1.MenuItem.create(title, "section").setIcon(icon).setChildren(children);
 }
 exports.createSection = createSection;
-function createLink(title, routeName, routeParams, icon) {
+function createLink(title, routeName, routeParams, icon, endElement) {
     return model_1.MenuItem.create(title, "link")
         .setRoute(routeName, routeParams)
         .setIcon(icon)
+        .setEndElement(endElement)
         .setActiveResolver(active_item_resolver_1.ActiveItemResolver.anyOf([routeName]));
 }
 exports.createLink = createLink;
-function createExternalLink(title, href, icon) {
-    return model_1.MenuItem.create(title, "link").setIsExternal(true).setIcon(icon).setUrl(href);
+function createExternalLink(title, href, icon, endElement) {
+    return model_1.MenuItem.create(title, "link").setIsExternal(true).setIcon(icon).setEndElement(endElement).setUrl(href);
 }
 exports.createExternalLink = createExternalLink;
 function createUserMenu(userMenuData, children) {
     return model_1.MenuItem.create("Můj profil", "super-section").setUserMenuData(userMenuData).setChildren(children);
 }
 exports.createUserMenu = createUserMenu;
-function createTableLink(title, entityAlias, icon) {
+function createTableLink(title, entityAlias, icon, endElement) {
     return model_1.MenuItem.create(title, "link")
         .setRoute("cms/table", { entityAlias })
         .setIcon(icon)
+        .setEndElement(endElement)
         .setActiveResolver(active_item_resolver_1.ActiveItemResolver.tableLink());
 }
 exports.createTableLink = createTableLink;

package/lib/menu/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./ui/menu";
-export * from "./ui/menu-item";
+export * from "./active-item-resolver";
 export * from "./factory";
 export * from "./types";
-export * from "./active-item-resolver";
+export * from "./ui/menu";
+export * from "./ui/menu-item";

package/lib/menu/index.js

@@ -14,8 +14,8 @@ 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("./ui/menu"), exports);
-__exportStar(require("./ui/menu-item"), exports);
+__exportStar(require("./active-item-resolver"), exports);
 __exportStar(require("./factory"), exports);
 __exportStar(require("./types"), exports);
-__exportStar(require("./active-item-resolver"), exports);
+__exportStar(require("./ui/menu"), exports);
+__exportStar(require("./ui/menu-item"), exports);

package/lib/menu/mobile-bar.d.ts

@@ -1,6 +1,8 @@
 import { FC } from "react";
 import { MenuItem } from "./model";
-export declare const MobileBar: FC<{
+interface Props {
     menuConfiguration: MenuItem[];
     toggleMenu: () => void;
-}>;
+}
+export declare const MobileBar: FC<Props>;
+export {};