@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/actionBarItem/ActionBarOverlay.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Popover_1 = tslib_1.__importStar(require("../popover/Popover"));
+const DEFAULT_PLACEMENT = Popover_1.PLACEMENT_MAP.BOTTOM;
+const DEFAULT_WIDTH = 250;
+const ActionBarOverlay = (0, react_1.forwardRef)((props, ref) => {
+    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT, ...remainingProps } = props;
+    const adjustedStyles = { ...style, width };
+    const adjustedClassName = preRender && !show ? (0, classnames_1.default)(className, 'position-offscreen') : className;
+    const popoverTitleClasses = (0, classnames_1.default)('ActionBarItemPopover text-color-dark', className);
+    const popoverContentClasses = (0, classnames_1.default)('ActionBarItemPopover', className);
+    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, { ref: ref, id: id, onClick: onClick, placement: placement, ...remainingProps, style: adjustedStyles, className: adjustedClassName, children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, { className: popoverTitleClasses, children: title }), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, { className: popoverContentClasses, children: children })] }));
+});
+exports.default = ActionBarOverlay;

package/lib/es/src/components/activity/Activity.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+import type { RefComponent } from '../../utils/RefComponent';
+declare const STATUS_MAP: {
+    readonly AVAILABLE: "available";
+    readonly DRIVING: "driving";
+    readonly RESTING: "resting";
+    readonly WORKING: "working";
+};
+export type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
+declare const SIZE_MAP: {
+    readonly SIZE_SM: "sm";
+    readonly SIZE_LG: "lg";
+    readonly SIZE_XL: "xl";
+};
+export type ActivitySize = ObjectValues<typeof SIZE_MAP>;
+export type ActivityProps = {
+    /**
+     * Defines the type of activity.
+     *
+     * Possible values are `Activity.AVAILABLE`, `Activity.DRIVING`, `Activity.RESTING` or `Activity.WORKING`.
+     */
+    activity: ActivityStatus;
+    /**
+     * Define how large the component should be rendered.
+     *
+     * Possible values are `Activity.SIZE_SM`, `Activity.SIZE_LG` or `Activity.SIZE_XL`.
+     */
+    bsSize?: ActivitySize;
+    /**
+     * The actual duration value to be shown.
+     */
+    duration?: string | ReactNode;
+    /**
+     * Indicates whether the activity is outdated.
+     *
+     * @default false
+     */
+    isOutdated?: boolean;
+    /**
+     * Callback function for when the component is clicked.
+     */
+    onClick?: VoidFunction;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+};
+type ActivityType = RefComponent<ActivityProps> & typeof STATUS_MAP & typeof SIZE_MAP;
+declare const Activity: ActivityType;
+export default Activity;

package/lib/es/src/components/activity/Activity.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const STATUS_MAP = {
+    AVAILABLE: 'available',
+    DRIVING: 'driving',
+    RESTING: 'resting',
+    WORKING: 'working',
+};
+const icons = {
+    [STATUS_MAP.AVAILABLE]: 'rioglyph-status-available',
+    [STATUS_MAP.WORKING]: 'rioglyph-status-working',
+    [STATUS_MAP.DRIVING]: 'rioglyph-status-driving',
+    [STATUS_MAP.RESTING]: 'rioglyph-status-resting',
+};
+const SIZE_MAP = { SIZE_SM: 'sm', SIZE_LG: 'lg', SIZE_XL: 'xl' };
+const Activity = (0, react_1.forwardRef)((props, ref) => {
+    const { activity, duration, isOutdated = false, bsSize, onClick = () => { }, className = '', ...remainingProps } = props;
+    if (!activity) {
+        return null;
+    }
+    const wrapperClassNames = (0, classnames_1.default)('activity', `activity-${activity}`, isOutdated && 'opacity-50', bsSize && `activity-${bsSize}`, className && className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, ...remainingProps, className: wrapperClassNames, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("span", { className: 'activity-icon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icons[activity]}` }) }), duration && (0, jsx_runtime_1.jsx)("span", { className: 'activity-text', children: duration })] }));
+});
+// statics
+Object.assign(Activity, STATUS_MAP);
+Object.assign(Activity, SIZE_MAP);
+exports.default = Activity;

package/lib/es/src/components/animatedNumber/AnimatedNumber.d.ts

@@ -0,0 +1,78 @@
+import React, { type HTMLAttributes } from 'react';
+export type AnimatedNumberProps = HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The start value.
+     */
+    start: number;
+    /**
+     * The end value.
+     */
+    end: number;
+    /**
+     * A prefix to be added to the final string.
+     */
+    prefix?: string;
+    /**
+     * A unit suffix to be added to the final string.
+     */
+    unit?: string;
+    /**
+     * The speed in milliseconds to count up or down.
+     *
+     * @default 10
+     */
+    speed?: number;
+    /**
+     * Enables to count backwards.
+     *
+     * @default false
+     */
+    decreasing?: boolean;
+    /**
+     * Callback function to be invoked when the end value is reached.
+     */
+    onEnd?: VoidFunction;
+    /**
+     * Additional classes to be set on the wrapping element.
+     */
+    className?: string;
+};
+export declare const AnimatedNumber: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The start value.
+     */
+    start: number;
+    /**
+     * The end value.
+     */
+    end: number;
+    /**
+     * A prefix to be added to the final string.
+     */
+    prefix?: string;
+    /**
+     * A unit suffix to be added to the final string.
+     */
+    unit?: string;
+    /**
+     * The speed in milliseconds to count up or down.
+     *
+     * @default 10
+     */
+    speed?: number;
+    /**
+     * Enables to count backwards.
+     *
+     * @default false
+     */
+    decreasing?: boolean;
+    /**
+     * Callback function to be invoked when the end value is reached.
+     */
+    onEnd?: VoidFunction;
+    /**
+     * Additional classes to be set on the wrapping element.
+     */
+    className?: string;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default AnimatedNumber;

package/lib/es/src/components/animatedNumber/AnimatedNumber.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedNumber = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useInterval_1 = tslib_1.__importDefault(require("../../hooks/useInterval"));
+const TIMER = 10;
+exports.AnimatedNumber = (0, react_1.forwardRef)((props, ref) => {
+    const { start, end, prefix = '', unit = '', speed = TIMER, decreasing = false, onEnd = () => { }, className = '', ...remainingProps } = props;
+    const [value, setValue] = (0, react_1.useState)(start);
+    const shallContinueRunning = decreasing ? value > end : value < end;
+    (0, useInterval_1.default)(() => {
+        setValue(currentValue => (decreasing ? currentValue - 1 : currentValue + 1));
+    }, shallContinueRunning ? speed : null);
+    (0, react_1.useEffect)(() => {
+        if (!shallContinueRunning) {
+            onEnd();
+        }
+    });
+    return (0, jsx_runtime_1.jsx)("span", { ref: ref, ...remainingProps, className: className, children: `${prefix}${value}${unit}` });
+});
+exports.default = exports.AnimatedNumber;

package/lib/es/src/components/applicationHeader/AppMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type AppMenuProps = {
+    label?: string | React.ReactNode;
+    appMenuItems?: ModulePropType[];
+    appNavigator?: React.ReactNode;
+    appNavigatorClassName?: string;
+    onToggleAppMenu?: (isShown: boolean) => void;
+};
+declare const AppMenu: (props: AppMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default AppMenu;

package/lib/es/src/components/applicationHeader/AppMenu.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const AppMenuDropdown_1 = tslib_1.__importDefault(require("./AppMenuDropdown"));
+const AppMenuContent_1 = tslib_1.__importDefault(require("./AppMenuContent"));
+const AppMenu = (props) => {
+    const { label = 'Unknown', appMenuItems = [], appNavigatorClassName, appNavigator, onToggleAppMenu, ...remainingProps } = props;
+    const hasItems = !!(appMenuItems?.length || appNavigator);
+    const wrapperClassNames = (0, classnames_1.default)('ModuleNavigation AppMenu', 'user-select-none', { hasModules: hasItems }, !appNavigator && 'pointer-events-none', appNavigatorClassName && appNavigatorClassName);
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: wrapperClassNames, children: (0, jsx_runtime_1.jsx)(AppMenuDropdown_1.default, { title: label, caret: hasItems, onToggleAppMenu: onToggleAppMenu, children: appNavigator && (0, jsx_runtime_1.jsx)(AppMenuContent_1.default, { appMenuItems: appMenuItems, appNavigator: appNavigator }) }) }));
+};
+exports.default = AppMenu;

package/lib/es/src/components/applicationHeader/AppMenuContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type AppMenuContentProps = {
+    appMenuItems: ModulePropType[];
+    appNavigator?: React.ReactNode;
+};
+declare const AppMenuContent: (props: AppMenuContentProps) => import("react/jsx-runtime").JSX.Element;
+export default AppMenuContent;

package/lib/es/src/components/applicationHeader/AppMenuContent.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppMenuContent = (props) => {
+    const { appMenuItems, appNavigator } = props;
+    // In case there is a navigation component injected into the header,
+    // render this component
+    if (appNavigator) {
+        return ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', children: appNavigator }, 'app-navigator'));
+    }
+    // If there is a list of appMenuItems given, render them as a list
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: appMenuItems.map(module => {
+            return ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', children: module.route }, `link-icon-${module.key}`));
+        }) }));
+};
+exports.default = AppMenuContent;

package/lib/es/src/components/applicationHeader/AppMenuDropdown.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+export type AppMenuDropdownProps = {
+    title: string | React.ReactNode;
+    caret?: boolean;
+    onToggleAppMenu?: (isOpen: boolean) => void;
+};
+export declare const AppMenuDropdown: (props: PropsWithChildren<AppMenuDropdownProps>) => import("react/jsx-runtime").JSX.Element;
+export default AppMenuDropdown;

package/lib/es/src/components/applicationHeader/AppMenuDropdown.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppMenuDropdown = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
+const ToggleButton = (props) => {
+    const { title, caret } = props;
+    const toggleClassName = (0, classnames_1.default)('ModuleNavigation-dropdown', 'dropdown-toggle justify-content-between', {
+        inactive: !caret,
+    });
+    return ((0, jsx_runtime_1.jsxs)("a", { className: toggleClassName, role: 'button', id: 'basic-nav-dropdown', children: [(0, jsx_runtime_1.jsx)("span", { children: title }), caret && (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
+};
+const DropdownMenu = (props) => {
+    const { children } = props;
+    if ((0, isEmpty_1.default)(children)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", { role: 'menu', className: 'dropdown-menu ModuleNavigation-dropdown-menu', children: children }));
+};
+const AppMenuDropdownOpener = (0, react_1.forwardRef)((props, ref) => {
+    const { open, children, onDropdownClick } = props;
+    return ((0, jsx_runtime_1.jsx)("li", { ref: ref, className: (0, classnames_1.default)('dropdown', { open }), onClick: onDropdownClick, children: children }));
+});
+const AppMenuDropdown = (props) => {
+    const { title, caret = false, onToggleAppMenu = noop_1.default, children } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const wrapperRef = (0, useClickOutside_1.default)(() => setIsOpen(false));
+    const handleDropdownClick = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggleAppMenu(newState);
+    };
+    const openWithChildren = !(0, isEmpty_1.default)(children) && isOpen;
+    return ((0, jsx_runtime_1.jsxs)(AppMenuDropdownOpener, { open: openWithChildren, onDropdownClick: handleDropdownClick, ref: wrapperRef, children: [(0, jsx_runtime_1.jsx)(ToggleButton, { title: title, caret: caret }), (0, jsx_runtime_1.jsx)(DropdownMenu, { children: children })] }));
+};
+exports.AppMenuDropdown = AppMenuDropdown;
+exports.default = exports.AppMenuDropdown;

package/lib/es/src/components/applicationHeader/ApplicationActionBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type ApplicationActionBarProps = {
+    items?: React.ReactNode[];
+    nodeRef?: React.MutableRefObject<HTMLUListElement | null> | undefined;
+    className?: string;
+};
+declare const ApplicationActionBar: (props: ApplicationActionBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ApplicationActionBar;

package/lib/es/src/components/applicationHeader/ApplicationActionBar.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ApplicationActionBar = (props) => {
+    const { items, nodeRef, className = '', ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: `ApplicationActionBar nav navbar-nav navbar-right ${className}`, ref: nodeRef, children: items?.map((item, index) => {
+            return ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', className: 'navigationItem', children: item }, index));
+        }) }));
+};
+exports.default = ApplicationActionBar;

package/lib/es/src/components/applicationHeader/ApplicationHeader.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+export type ModulePropType = {
+    /**
+     * Unique key for the sub-module navigation component of an app.
+     */
+    key: string;
+    /**
+     * The navigation link component used for rendering the name and for routing.
+     *
+     * @example
+     *
+     * ```tsx
+     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>
+     * ```
+     */
+    route: React.ReactNode;
+};
+export type ApplicationHeaderProps = {
+    /**
+     * The service name shown as the navigator dropdown label.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`
+     * as homeRoute into the header. For example:
+     *
+     * @example
+     *
+     * ```tsx
+     * <NavLink to='https://home.rio.cloud' />
+     * ```
+     */
+    homeRoute?: React.ReactNode;
+    /**
+     * Defines to either show the home icon or the RIO logo as brand logo.
+     */
+    showHomeIcon?: boolean;
+    /**
+     * The component for the navigation between apps which will be shown inside the main dropdown.
+     *
+     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a
+     * simple list In this case, use the prop `appMenuItems`.
+     *
+     * If no appNavigator is defined, the dropdown menu will not be rendered.
+     */
+    appNavigator?: React.ReactNode;
+    /**
+     * Additional class names that are added to the appNavigator.
+     */
+    appNavigatorClassName?: string;
+    /**
+     * List of application navigation link components.
+     */
+    appMenuItems?: ModulePropType[];
+    /**
+     * List of submodule navigation component of an app.
+     *
+     * Items collapse into a dropdown if remaining space in the header is not sufficient.
+     */
+    navItems?: ModulePropType[];
+    /**
+     * List of external smart components.
+     *
+     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components
+     * are based on the `ActionBarItem`.
+     */
+    actionBarItems?: React.ReactNode[];
+    /**
+     * Callback function triggered when the application menu is open or closed.
+     *
+     * @param isOpen The new "open" state.
+     */
+    onToggleAppMenu?: (isOpen: boolean) => void;
+    /**
+     * Additional class names that are added to the wrapper component.
+     */
+    className?: string;
+};
+export declare const ApplicationHeader: React.ForwardRefExoticComponent<ApplicationHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationHeader;

package/lib/es/src/components/applicationHeader/ApplicationHeader.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApplicationHeader = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const AppMenu_1 = tslib_1.__importDefault(require("./AppMenu"));
+const ApplicationActionBar_1 = tslib_1.__importDefault(require("./ApplicationActionBar"));
+const MobileSubmoduleNavigation_1 = tslib_1.__importDefault(require("./MobileSubmoduleNavigation"));
+const MobileAppMenu_1 = tslib_1.__importDefault(require("./MobileAppMenu"));
+const useResizeObserver_1 = tslib_1.__importDefault(require("../../hooks/useResizeObserver"));
+const NavItems_1 = tslib_1.__importDefault(require("./NavItems"));
+const SCREEN_SM = 768; // @screen-sm: 768px;
+exports.ApplicationHeader = (0, react_1.forwardRef)((props, ref) => {
+    const { homeRoute = '', showHomeIcon = true, label, className, appNavigator, appNavigatorClassName, appMenuItems, navItems, actionBarItems = [], onToggleAppMenu = () => { }, ...remainingProps } = props;
+    const actionBarRef = (0, react_1.useRef)(null);
+    const [navRef, entry] = (0, useResizeObserver_1.default)();
+    const contentRect = entry?.contentRect;
+    (0, react_1.useImperativeHandle)(ref, () => navRef, [navRef]);
+    const getContentRect = (0, react_1.useCallback)((key) => {
+        if (contentRect) {
+            const value = contentRect[key];
+            return typeof value === 'number' && Math.round(value);
+        }
+    }, [contentRect]);
+    // If container width cannot be properly read initially, fall back to window width.
+    // This fixes ugly jumping on mobile header and desktop header on mount.
+    const containerWidth = getContentRect('width') || window.innerWidth;
+    const isMobileWidth = containerWidth <= SCREEN_SM;
+    const hasActionBarItems = !(0, isEmpty_1.default)(actionBarItems);
+    const wrapperClassNames = (0, classnames_1.default)('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+    return ((0, jsx_runtime_1.jsxs)("nav", { ...remainingProps, className: wrapperClassNames, ref: navRef, children: [isMobileWidth && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MobileAppMenu_1.default, { showHomeIcon: showHomeIcon, homeRoute: homeRoute, appMenuItems: appMenuItems, appNavigator: appNavigator, onToggleAppMenu: onToggleAppMenu }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1-0 display-flex gap-10', children: [(0, jsx_runtime_1.jsx)(MobileSubmoduleNavigation_1.default, { className: 'flex-1-1', label: label, navItems: navItems }), hasActionBarItems && (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { className: 'mobile', nodeRef: actionBarRef, items: actionBarItems })] })] })), !isMobileWidth && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'navbar-header', children: (0, jsx_runtime_1.jsx)("span", { className: `navbar-brand ${showHomeIcon ? 'home-icon' : ''}`, children: homeRoute }) }), label && ((0, jsx_runtime_1.jsx)(AppMenu_1.default, { label: label, appMenuItems: appMenuItems, appNavigator: appNavigator, appNavigatorClassName: appNavigatorClassName, onToggleAppMenu: onToggleAppMenu }, 'AppMenu')), (0, isEmpty_1.default)(navItems) && (0, jsx_runtime_1.jsx)("ul", { className: 'SubmoduleNavigation nav' }), !(0, isEmpty_1.default)(navItems) && ((0, jsx_runtime_1.jsx)(NavItems_1.default, { navItems: navItems, containerWidth: containerWidth, actionBarItems: actionBarItems }, 'NavItems')), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { nodeRef: actionBarRef, items: actionBarItems })] }))] }));
+});
+const Divider = () => ((0, jsx_runtime_1.jsx)("div", { className: 'divider display-flex align-items-center', children: (0, jsx_runtime_1.jsx)("div", { className: 'width-3 height-20 bg-lighter' }) }));
+exports.default = exports.ApplicationHeader;

package/lib/es/src/components/applicationHeader/CollapsedNavItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+type CollapsedNavItemProps = {
+    show: boolean;
+    navItems: ModulePropType[];
+    actionBarItems: React.ReactNode[];
+    onDropdownClick: () => void;
+    onItemClick: () => void;
+};
+declare const CollapsedNavItem: React.ForwardRefExoticComponent<CollapsedNavItemProps & React.RefAttributes<HTMLLIElement>>;
+export default CollapsedNavItem;

package/lib/es/src/components/applicationHeader/CollapsedNavItem.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = require("react");
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const CollapsedNavItem = (0, react_1.forwardRef)((props, ref) => {
+    const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;
+    if ((0, isEmpty_1.default)(navItems) && (0, isEmpty_1.default)(actionBarItems)) {
+        return null;
+    }
+    const collapsedDropdownClass = show ? 'open' : '';
+    return ((0, jsx_runtime_1.jsxs)("li", { className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref, children: [(0, jsx_runtime_1.jsx)("a", { id: 'basic-nav-dropdown', role: 'button', className: 'dropdown-toggle text-color-gray', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: onDropdownClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-horizontal', "aria-hidden": 'true' }) }), (0, jsx_runtime_1.jsx)("ul", { className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown', children: navItems.map(navItem => {
+                    return ((0, jsx_runtime_1.jsx)("li", { className: 'submodule', onClick: onItemClick, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
+                }) })] }, 'collapsed-dropdown'));
+});
+exports.default = CollapsedNavItem;

package/lib/es/src/components/applicationHeader/MobileAppMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type MobileAppMenuProps = {
+    homeRoute: React.ReactNode;
+    showHomeIcon: boolean;
+    appMenuItems?: ModulePropType[];
+    appNavigator?: React.ReactNode;
+    onToggleAppMenu: (isShown: boolean) => void;
+};
+declare const MobileAppMenu: (props: MobileAppMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default MobileAppMenu;

package/lib/es/src/components/applicationHeader/MobileAppMenu.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const MobileHeaderModal_1 = tslib_1.__importDefault(require("./MobileHeaderModal"));
+const MobileAppMenu = (props) => {
+    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;
+    const [isShown, setIsShown] = (0, react_1.useState)(false);
+    const handleToggleNavigation = () => {
+        const newState = !isShown;
+        setIsShown(newState);
+        onToggleAppMenu(newState);
+    };
+    const hasAppContent = !((0, isNil_1.default)(appMenuItems) && (0, isNil_1.default)(appNavigator));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'navbar-header min-width-50 padding-5 ' +
+                    'overflow-hidden position-relative display-flex align-items-center', onClick: handleToggleNavigation, children: [(0, jsx_runtime_1.jsx)("span", { className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`, children: !hasAppContent && homeRoute }), hasAppContent && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute right-2 bottom-0 text-color-white rotate-45', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-triangle-right' }) }))] }), appNavigator && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation, children: (0, jsx_runtime_1.jsx)("div", { className: 'width-100pct height-100pct', children: appNavigator }) })), appMenuItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation, children: appMenuItems.map(module => ((0, jsx_runtime_1.jsx)("li", { role: 'presentation', children: module.route }, `link-icon-${module.key}`))) }))] }));
+};
+exports.default = MobileAppMenu;

package/lib/es/src/components/applicationHeader/MobileHeaderModal.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+export type MobileHeaderModalProps = {
+    show?: boolean;
+    showClose?: boolean;
+    modalClassName?: string;
+    onClose?: () => void;
+    className?: string;
+};
+declare const MobileHeaderModal: (props: PropsWithChildren<MobileHeaderModalProps>) => import("react/jsx-runtime").JSX.Element;
+export default MobileHeaderModal;

package/lib/es/src/components/applicationHeader/MobileHeaderModal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const portalRoot_1 = require("../../utils/portalRoot");
+const OFFSET_POSITION = -1000;
+const MobileHeaderModal = (props) => {
+    const { show = false, showClose = true, modalClassName, className, onClose = () => { }, children } = props;
+    const wrapperClasses = (0, classnames_1.default)('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
+    const modalClasses = (0, classnames_1.default)('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
+    const modalRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
+    const pageHeight = window.innerHeight - 30;
+    const offset = OFFSET_POSITION - window.innerHeight;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { className: wrapperClasses, initial: { opacity: 0, top: offset }, animate: { opacity: 1, y: 0, top: 0 }, exit: { opacity: 0, transition: { duration: 0.3 }, top: offset }, children: [(0, jsx_runtime_1.jsx)("div", { className: modalClasses, style: { height: `${pageHeight}px` }, children: children }), showClose && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +
+                                    'text-size-20 text-color-dark', onClick: onClose, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))] })) }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: 'bottom-sheet-backdrop', initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 } })) })] }), modalRoot) }));
+};
+exports.default = MobileHeaderModal;

package/lib/es/src/components/applicationHeader/MobileSubmoduleNavigation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type MobileSubmoduleNavigationProps = {
+    label: React.ReactNode;
+    navItems?: ModulePropType[];
+    className?: string;
+};
+declare const MobileSubmoduleNavigation: (props: MobileSubmoduleNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export default MobileSubmoduleNavigation;

package/lib/es/src/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const MobileHeaderModal_1 = tslib_1.__importDefault(require("./MobileHeaderModal"));
+const MobileSubmoduleNavigation = (props) => {
+    const { navItems = [], label, className } = props;
+    const [isShown, setIsShown] = (0, react_1.useState)(false);
+    const handleToggleNavigation = () => setIsShown(!isShown);
+    const hasNavItems = !(0, isEmpty_1.default)(navItems);
+    const classes = (0, classnames_1.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
+    const labelClasses = (0, classnames_1.default)(hasNavItems
+        ? 'text-size-12 text-color-dark line-height-14'
+        : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, onClick: handleToggleNavigation, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 display-flex flex-column align-items-center width-0', children: [(0, jsx_runtime_1.jsx)("div", { className: labelClasses, children: label }), (0, jsx_runtime_1.jsx)("div", { className: 'text-medium width-100pct', children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", { className: 'ellipsis-1', children: react_1.default.cloneElement(navItem.route, {
+                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
+                                onClick: (event) => event.preventDefault(),
+                            }) }, navItem.key))) })] }), hasNavItems && ((0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-color-dark', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-down' }) })), hasNavItems && ((0, jsx_runtime_1.jsx)(MobileHeaderModal_1.default, { show: isShown, children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("div", { className: 'margin-y-15 font-size-20', children: react_1.default.cloneElement(navItem.route, {
+                        className: 'text-size-20 text-color-darker',
+                    }) }, navItem.key))) }))] }));
+};
+exports.default = MobileSubmoduleNavigation;

package/lib/es/src/components/applicationHeader/NavItems.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ModulePropType } from './ApplicationHeader';
+export type NavItemsProps = {
+    navItems?: ModulePropType[];
+    containerWidth: number;
+    actionBarItems?: React.ReactNode[];
+};
+export declare const NavItems: (props: NavItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default NavItems;