@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type ApplicationLayoutBodyProps = {
+    /**
+     * Show scroll to top button after scrolling the content.
+     *
+     * @default true
+     */
+    enableScrollToTop?: boolean;
+    /**
+     * Always show vertical scrollbar to prevent the content from jumping.
+     *
+     * @default true
+     */
+    forceScrollbar?: boolean;
+    /**
+     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content
+     * and to reset the scrolling like when the pathname changes from an body internal menu.
+     */
+    scrollResetTrigger?: any;
+    /**
+     * The ApplicationLayoutBodyBanner component.
+     */
+    banner?: React.ReactNode;
+    /**
+     * The `ApplicationLayoutBodyNavigation` component.
+     */
+    navigation?: React.ReactNode;
+    /**
+     * Optional bottom bar component or a simple string.
+     */
+    bottomBar?: React.ReactNode;
+    /**
+     * Height of the bottomBar in pixel.
+     *
+     * @default 54
+     */
+    bottomBarHeight?: number;
+    /**
+     * Additional class names that are added to the inner module-content component.
+     */
+    innerClassName?: string;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBody;

package/src/components/applicationLayout/ApplicationLayoutBody.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, } from 'react';
+import debounce from 'lodash/fp/debounce';
+import classNames from 'classnames';
+import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
+const RESIZE_THROTTLING = 200;
+const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
+const ApplicationLayoutBody = forwardRef((props, ref) => {
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children, ...remainingProps } = props;
+    const [offset, setOffset] = useState(0);
+    const moduleContentRef = useRef(null);
+    const layoutBodyRef = useRef(null);
+    // Use imperative handle to expose the internal layout ref. Usually this is used to
+    // expose internal function without exposing the underlying DOM element.
+    // In this case however, we want access to the element to trigger functions like scrollIntoView()
+    useImperativeHandle(ref, () => layoutBodyRef?.current, []);
+    // Reset scroll position when children are different. This fixes the issue of
+    // changing body content (like in another route) and still having the same scroll position
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (moduleContentRef.current) {
+            moduleContentRef.current.scrollTop(0);
+            setOffset(0);
+        }
+    }, [scrollResetTrigger]);
+    useEffect(() => {
+        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {
+            layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
+        }
+    }, [bottomBarHeight]);
+    const handleScroll = debounce(RESIZE_THROTTLING)(() => {
+        if (moduleContentRef.current) {
+            setOffset(moduleContentRef.current.getScrollTop());
+        }
+    });
+    const handleToTop = () => {
+        if (!moduleContentRef.current) {
+            return;
+        }
+        const scrollWrapper = moduleContentRef.current.container;
+        const scrollingElement = scrollWrapper.firstElementChild;
+        const currentScroll = scrollingElement?.scrollTop ?? 0;
+        const scrollThreshold = 10;
+        if (currentScroll > scrollThreshold) {
+            window.requestAnimationFrame(handleToTop);
+            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollWrapper.classList.add('is-scrolling-to-top');
+            setOffset(currentScroll);
+        }
+        else {
+            scrollWrapper.classList.remove('is-scrolling-to-top');
+        }
+    };
+    const classes = classNames('ApplicationLayoutBody', bottomBar && 'has-footer', className);
+    const innerClasses = classNames('module-content', innerClassName && innerClassName);
+    const offsetThreshold = window.innerHeight * 0.1;
+    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { ...remainingProps, ref: layoutBodyRef, className: classes, children: [_jsxs("div", { className: 'module-content-wrapper', children: [navigation && navigation, banner && banner, _jsx(SmoothScrollbars, { ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll, children: _jsx("div", { className: 'scrollbar-content', children: children }) })] }), enableScrollToTop && (_jsx("span", { className: scrollToTopClasses, children: _jsx("button", { type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop, children: _jsx("span", { className: 'rioglyph rioglyph-arrow-up' }) }) }))] }), bottomBar && bottomBar] }));
+});
+export default ApplicationLayoutBody;

package/src/components/applicationLayout/ApplicationLayoutBodyBanner.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type ApplicationLayoutBodyBannerProps = {
+    /**
+     * One of the `text-color` utility classes.
+     * @default `text-color-white`
+     */
+    textColor?: string;
+    /**
+     * One of the `bg-color` utility classes.
+     * @default `bg-primary`
+     */
+    backgroundColor?: string;
+    /**
+     * Allows sticky banner while scrolling.
+     * @default false
+     */
+    isSticky?: boolean;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBodyBanner;

package/src/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const DEFAULT_TEXT_COLOR = 'text-color-white';
+const DEFAULT_BACKGROUND_COLOR = 'bg-primary';
+const ApplicationLayoutBodyBanner = forwardRef((props, ref) => {
+    const { textColor = DEFAULT_TEXT_COLOR, backgroundColor = DEFAULT_BACKGROUND_COLOR, isSticky = true, className, children, ...remainingProps } = props;
+    const bannerClasses = classNames('ApplicationLayoutBodyBanner', textColor, backgroundColor, isSticky && 'position-sticky top-0 z-index-3', className);
+    return (_jsx("div", { ...remainingProps, ref: ref, className: bannerClasses, children: children }));
+});
+export default ApplicationLayoutBodyBanner;

package/src/components/applicationLayout/ApplicationLayoutBodyBottomBar.d.ts

@@ -0,0 +1,30 @@
+import { type PropsWithChildren, type ForwardRefExoticComponent, type RefAttributes } from 'react';
+type ButtonAlignmentLeft = 'left';
+type ButtonAlignmentRight = 'right';
+export type ApplicationLayoutBodyBottomBarProps = {
+    /**
+     * Additional class names that are added to the respective component
+     */
+    className?: string;
+    /**
+     * Use same paddings (left and right) as the ApplicationLayoutBody.
+     * @default false
+     */
+    useBodyPaddings?: boolean;
+    /**
+     * Tells the buttons if they are left or right aligned.
+     * Default behavior is: 1st button left and 2nd button right.
+     *
+     * Possible values are:
+     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or
+     * `left`, `right`
+     */
+    buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;
+};
+type Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;
+type ApplicationLayoutBodyBottomBarType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {
+    LEFT: ButtonAlignmentLeft;
+    RIGHT: ButtonAlignmentRight;
+};
+declare const ApplicationLayoutBodyBottomBar: ApplicationLayoutBodyBottomBarType;
+export default ApplicationLayoutBodyBottomBar;

package/src/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import classNames from 'classnames';
+const ApplicationLayoutBodyBottomBar = forwardRef((props, ref) => {
+    const { className, buttonAlignment, useBodyPaddings = false, children, ...remainingProps } = props;
+    const classes = classNames('ApplicationLayoutBodyBottomBar', buttonAlignment === 'left' && 'justify-content-start', buttonAlignment === 'right' && 'justify-content-end', buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between', useBodyPaddings && 'use-body-padding', className && className);
+    return (_jsx("div", { ref: ref, ...remainingProps, className: classes, children: children }));
+});
+ApplicationLayoutBodyBottomBar.LEFT = 'left';
+ApplicationLayoutBodyBottomBar.RIGHT = 'right';
+export default ApplicationLayoutBodyBottomBar;

package/src/components/applicationLayout/ApplicationLayoutBodyNavigation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ApplicationLayoutBodyNavigationProps = {
+    /**
+     * Additional class names that are added to the respective component. Example: `has-offset`.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutBodyNavigation: React.ForwardRefExoticComponent<ApplicationLayoutBodyNavigationProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutBodyNavigation;

package/src/components/applicationLayout/ApplicationLayoutBodyNavigation.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const ApplicationLayoutBodyNavigation = forwardRef((props, ref) => {
+    const { className, children, ...remainingProps } = props;
+    const navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);
+    return (_jsx("div", { ref: ref, ...remainingProps, className: navigationClasses, children: children }));
+});
+export default ApplicationLayoutBodyNavigation;

package/src/components/applicationLayout/ApplicationLayoutHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ApplicationLayoutHeaderProps = {
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
+};
+declare const ApplicationLayoutHeader: React.ForwardRefExoticComponent<ApplicationLayoutHeaderProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutHeader;

package/src/components/applicationLayout/ApplicationLayoutHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const ApplicationLayoutHeader = forwardRef((props, ref) => {
+    const { className, children, ...remainingProps } = props;
+    const classes = classNames('ApplicationLayoutHeader', className);
+    return (_jsx("div", { ref: ref, ...remainingProps, className: classes, id: 'ApplicationLayoutHeader', children: children }));
+});
+export default ApplicationLayoutHeader;

package/src/components/applicationLayout/ApplicationLayoutSidebar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ApplicationLayoutSidebarProps = {
+    /**
+     * Additional class names that are added to the respective component
+     */
+    className?: string;
+};
+declare const ApplicationLayoutSidebar: React.ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ApplicationLayoutSidebar;

package/src/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const ApplicationLayoutSidebar = forwardRef((props, ref) => {
+    const { className, children, ...remainingProps } = props;
+    const classes = classNames('ApplicationLayoutSidebar', className);
+    return (_jsx("div", { ref: ref, ...remainingProps, className: classes, children: children }));
+});
+export default ApplicationLayoutSidebar;

package/src/components/applicationLayout/SubNavigation.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ModulePropType } from '../applicationHeader/ApplicationHeader';
+export type SubNavigationProps = {
+    navItems?: ModulePropType[];
+    className?: string;
+};
+declare const SubNavigation: React.ForwardRefExoticComponent<SubNavigationProps & React.RefAttributes<HTMLDivElement>>;
+export default SubNavigation;

package/src/components/applicationLayout/SubNavigation.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const SubNavigation = forwardRef((props, ref) => {
+    const { className, navItems = [], ...remainingProps } = props;
+    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);
+    return (_jsx("div", { ref: ref, ...remainingProps, className: navigationClasses, children: _jsx("ul", { className: 'SubmoduleNavigation nav', children: navItems.map(navItem => (_jsx("li", { className: 'submodule', "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key))) }) }));
+});
+export default SubNavigation;

package/src/components/aspectRatioPlaceholder/AspectRatioPlaceholder.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+export type AspectRatioPlaceholderProps = {
+    /** Defines the aspect ratio width. @default 16 */
+    height?: number;
+    /** Defines the aspect ratio height. @default 9 */
+    width?: number;
+    /** Additional class names that are added to the wrapping element. */
+    className?: string;
+};
+declare const AspectRatioPlaceholder: (props: AspectRatioPlaceholderProps & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export default AspectRatioPlaceholder;

package/src/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AspectRatioPlaceholder = (props) => {
+    const { width = 16, height = 9, className = '', children } = props;
+    return (_jsx("div", { className: `position-relative ${className}`, style: { aspectRatio: `${width} / ${height}` }, children: children }));
+};
+export default AspectRatioPlaceholder;

package/src/components/assetTree/AssetTree.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+export type AssetTreeProps = {
+    /**
+     * Defines if the component will overlap the body content.
+     *
+     * @default false
+     */
+    fly?: boolean;
+    /**
+     * Defines whether or not the sidebar is resizable.
+     *
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Defines whether the component has a border or not.
+     *
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Defines the width of the component. The value is set as inline style.
+     * Note: when component is resizable it will take the provided
+     * width in px only and convert it to number in case.
+     *
+     * @default 350
+     */
+    width?: number;
+    /**
+     * Defines the minimum width of the component in px that will take effect when resizing.
+     *
+     * @default 100
+     */
+    minWidth?: number;
+    /**
+     * Defines the maximum width of the component in px that will take effect when resizing.
+     *
+     * @default 0
+     */
+    maxWidth?: number;
+    /**
+     * Defines the height of the component in px.
+     */
+    height?: number;
+    /**
+     * Defines whether the component is open or not.
+     *
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Callback for when the tree visibility is toggled.
+     * @param isOpen
+     * @returns
+     */
+    onToggleTree?: (isOpen: boolean) => void;
+    /**
+     * The id of the category which is currently active and shall be shown.
+     */
+    currentCategoryId?: string;
+    /**
+     * Callback for handling change of category.
+     * @param selectedCategoryId
+     * @returns
+     */
+    onCategoryChange?: (selectedCategoryId: string) => void;
+    /**
+     * Callback for when the resize is done.
+     */
+    onResizeEnd?: VoidFunction;
+    /**
+     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.
+     *
+     * @default false
+     */
+    useOffscreen?: boolean;
+    /**
+     * Additional classes added on the wrapper element.
+     */
+    className?: string;
+};
+declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<AssetTreeProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>>;
+export default AssetTree;

package/src/components/assetTree/AssetTree.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo, useState, useRef, forwardRef } from 'react';
+import classNames from 'classnames';
+import head from 'lodash/fp/head';
+import isArray from 'lodash/fp/isArray';
+import noop from 'lodash/fp/noop';
+import invariant from 'tiny-invariant';
+import TreeCategory from './TreeCategory';
+import Resizer from '../resizer/Resizer';
+import TreeSidebar from './TreeSidebar';
+import getWidthInBoundaries from '../../utils/getWidthInBoundaries';
+import mergeRefs from '../../utils/mergeRefs';
+import usePrevious from '../../usePrevious';
+import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
+const DEFAULT_WIDTH = 350;
+const DEFAULT_MIN_WIDTH = 100;
+const DEFAULT_MAX_WIDTH = 0;
+const TreeMode = {
+    MODE_FLY: 'fly',
+    MODE_FLUID: 'fluid',
+};
+const getSidebarBodyRef = (sidebarRef) => head(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));
+const getCurrentCategoryElement = (children, currentCategoryId) => {
+    return isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
+};
+const renderTreesOffscreen = (children, categoryId) => {
+    return React.Children.map(children, child => {
+        const offscreenClasses = classNames('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
+        return _jsx("div", { className: offscreenClasses, children: child });
+    });
+};
+// Check if the child is a React element and if it has the type TreeCategory
+const isTreeCategory = (child) => {
+    return React.isValidElement(child) && child.type === TreeCategory;
+};
+const AssetTree = memo(forwardRef((props, ref) => {
+    const { className, resizable = true, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, height, bordered = false, currentCategoryId, isOpen = true, useOffscreen = false, fly = false, onCategoryChange = noop, onToggleTree = noop, onResizeEnd = noop, children = [], ...remainingProps } = props;
+    const getSidebarMode = (isFly) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);
+    const [treeWidth, setTreeWidth] = useState(width);
+    const [isResize, setIsResize] = useState(false);
+    const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));
+    const sidebarRef = useRef(null);
+    const mergedRefs = mergeRefs([ref, sidebarRef]);
+    // Update internal state when props change
+    const previousWidth = usePrevious(width);
+    if (previousWidth !== width) {
+        setTreeWidth(width);
+    }
+    const [previousMode, setPreviousMode] = useState(fly);
+    if (previousMode !== fly) {
+        setSidebarMode(getSidebarMode(fly));
+        setPreviousMode(fly);
+    }
+    const childrenArray = React.Children.toArray(children);
+    // check for children type of TreeCategory and throw error in case
+    invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
+    const classes = classNames('AssetTree', className, !isOpen && 'closed', bordered && 'border', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
+    const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');
+    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+    const resizeLimitStyle = { left: resizeIndicatorPosition };
+    const firstChild = head(childrenArray);
+    const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;
+    const style = {
+        width: treeWidth,
+        height,
+    };
+    const handleToggleTreeContent = () => onToggleTree(!isOpen);
+    const handleSelectCategory = (selectedCategoryId) => {
+        onCategoryChange(selectedCategoryId);
+        if (!isOpen) {
+            handleToggleTreeContent();
+        }
+        else if (isOpen && currentCategoryId === selectedCategoryId) {
+            handleToggleTreeContent();
+        }
+    };
+    const handleResize = (diff) => {
+        const halfWindowWidth = window.innerWidth * 0.5;
+        const usedMaxWidth = maxWidth || halfWindowWidth;
+        // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is
+        // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar
+        // to old width
+        setTreeWidth(oldWidth => {
+            const updatedWidth = oldWidth - diff;
+            return getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
+        });
+    };
+    const handleResizeStart = () => {
+        const body = getSidebarBodyRef(sidebarRef);
+        if (body) {
+            body.classList.add('pointer-events-none');
+        }
+        setIsResize(true);
+    };
+    const handleResizeEnd = () => {
+        const body = getSidebarBodyRef(sidebarRef);
+        if (body) {
+            body.classList.remove('pointer-events-none');
+        }
+        setIsResize(false);
+        onResizeEnd();
+    };
+    return (_jsxs("div", { ...remainingProps, className: classes, style: style, ref: mergedRefs, children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", { className: 'AssetTreeContent', children: [_jsx(TreeSidebar, { onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent, children: isArray(children) ? children : [children] }), _jsx(SmoothScrollbars, { slideIn: true, className: 'AssetTreeBody', children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category })] }), resizable && isOpen && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: Resizer.RIGHT }))] }));
+}));
+Object.assign(AssetTree, TreeMode);
+export default AssetTree;