@rio-cloud/rio-uikit 2.0.0 → 2.1.0

package/components/actionBarItem/ActionBarItem.d.ts

@@ -13,7 +13,7 @@ export type ActionBarItemProps = {
      */
     id?: string;
     /**
-     * The title property for the subcomponent ActionBarItem.Popover.
+     * The title property for the sub-component ActionBarItem.Popover.
      *
      * This can be a String or another component as well as a React-Intl component.
      */
@@ -21,7 +21,7 @@ export type ActionBarItemProps = {
     /**
      * Additional class names that are added to the respective component.
      *
-     * It can be defined for the parent and all subcomponents.
+     * It can be defined for the parent and all sub-components.
      */
     className?: string;
     /**

package/components/actionBarItem/ActionBarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarItem.js","sources":["../../../src/components/actionBarItem/ActionBarItem.tsx"],"sourcesContent":["import React, {\n    memo,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useState,\n    useRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n    type MemoExoticComponent,\n    type FC,\n} from 'react';\nimport classNames from 'classnames';\nimport { negate } from 'es-toolkit/function';\nimport { delay, head } from 'es-toolkit/compat';\n\nimport ActionBarOverlay from './ActionBarOverlay';\nimport ActionBarItemPopoverContent from './ActionBarItemPopoverContent';\nimport ActionBarItemIcon from './ActionBarItemIcon';\nimport ActionBarItemList from './ActionBarItemList';\nimport ActionBarItemListItem from './ActionBarItemListItem';\nimport ActionBarItemListSeparator from './ActionBarItemListSeparator';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Dialog from '../dialog/Dialog';\n\nconst EVENT = 'mousedown';\nconst CLASSNAME_SHOW = 'show';\nconst CLASSNAME_OFFSCREEN = 'position-offscreen';\n\nconst DEFAULT_POPOVER_WIDTH = 250;\nconst POPOVER_CLOSE_DELAY_IN_MS = 200;\nconst SMALL_RESOLUTION_THRESHOLD_IN_PX = 580;\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\n\nconst hasClass = (element: HTMLElement, className: string) => element.classList.contains(className);\nconst hasNotClass = negate(hasClass);\n\nconst isNotChildNodeOf = (childNode: HTMLElement, parentNode: HTMLElement) => !parentNode.contains(childNode);\n\nconst checkIfSmallResolution = () => {\n    const [isSmallResolution, setIsSmallResolution] = useState(false);\n\n    // We only execute this once. Before it was re-rendered on every change.\n    // Users probably don't switch between display sizes that often therefore it probably makes sense to\n    // avoid the re-rendering or applying an event listener.\n    useEffect(() => {\n        const header = head(document.getElementsByClassName('ApplicationHeader')) as HTMLElement | undefined;\n        const isSmall = header ? header.offsetWidth < SMALL_RESOLUTION_THRESHOLD_IN_PX : false;\n        setIsSmallResolution(isSmall);\n    }, []);\n\n    return isSmallResolution;\n};\n\nconst isActionBarItemPopover = (child: React.ReactElement) =>\n    child.type && (child.type as React.ComponentType<unknown>).displayName === ActionBarItemPopoverContent.displayName;\n\nconst isActionBarItemIcon = (child: React.ReactElement) =>\n    child.type && (child.type as React.ComponentType<unknown>).displayName === ActionBarItemIcon.displayName;\n\nexport type ActionBarItemPopoverWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type ActionBarItemProps = {\n    /**\n     * The id is used to identify the item in the DOM.\n     *\n     * If not provided, a random id is used instead.\n     */\n    id?: string;\n\n    /**\n     * The title property for the subcomponent ActionBarItem.Popover.\n     *\n     * This can be a String or another component as well as a React-Intl component.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional class names that are added to the respective component.\n     *\n     * It can be defined for the parent and all subcomponents.\n     */\n    className?: string;\n\n    /**\n     * Defines if the popover should close when any child element is being clicked.\n     *\n     * @default true\n     */\n    hidePopoverOnClick?: boolean;\n\n    /**\n     * Possible values are `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450` or `500`.\n     *\n     * @default 250\n     */\n    popoverWidth?: ActionBarItemPopoverWidth;\n\n    /**\n     * Additional class names that are added to dialog fallback modal-body element.\n     */\n    mobileDialogBodyClassName?: string;\n};\n\nexport type ActionBarItemComponents = {\n    Icon: typeof ActionBarItemIcon;\n    Popover: typeof ActionBarItemPopoverContent;\n    List: typeof ActionBarItemList;\n    ListItem: typeof ActionBarItemListItem;\n    ListSeparator: typeof ActionBarItemListSeparator;\n};\n\ntype ActionBarItemPropsWithChildren = PropsWithChildren<ActionBarItemProps>;\n\nconst ActionBarItemBase = (props: ActionBarItemPropsWithChildren) => {\n    const {\n        id = getRandomString(),\n        className,\n        mobileDialogBodyClassName = '',\n        children,\n        popoverWidth = DEFAULT_POPOVER_WIDTH,\n        hidePopoverOnClick = true,\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const clickOutsideRef = useRef(null);\n\n    useLayoutEffect(() => {\n        const listener = (event: MouseEvent) => {\n            if (!clickOutsideRef || !clickOutsideRef.current || !isShown) {\n                return;\n            }\n\n            // Since the popover component is based on React Portal and might be offscreen, we need to use\n            // old-school approach and query the DOM for the item ID.\n            const popoverEl = document.getElementById(id);\n\n            if (!popoverEl) {\n                return;\n            }\n\n            // Abort when the ActionBarItemIcon itself has been clicked as there is a toggle function\n            // applied to the icon that takes care of opening and closing\n            const hasIconClickedToClose = (event.target as HTMLElement).offsetParent === clickOutsideRef.current;\n            if (hasIconClickedToClose) {\n                return;\n            }\n\n            // Handle click outside the popover to close it\n            const isClickOutsidePopover = isNotChildNodeOf(event.target as HTMLElement, popoverEl);\n            const isPopoverVisible = hasClass(popoverEl, CLASSNAME_SHOW) && hasNotClass(popoverEl, CLASSNAME_OFFSCREEN);\n\n            if (isPopoverVisible && isClickOutsidePopover) {\n                setIsShown(false);\n                return;\n            }\n\n            // Handle click inside the popover.\n            // Delay the closing of the popover to execute possible actions from within the popover\n            // like clicks on links or buttons\n            if (hidePopoverOnClick) {\n                delay(() => setIsShown(false), POPOVER_CLOSE_DELAY_IN_MS);\n            }\n        };\n\n        document.addEventListener(EVENT, listener);\n        return () => {\n            document.removeEventListener(EVENT, listener);\n        };\n    }, [clickOutsideRef, id, isShown]);\n\n    const classes = classNames('ActionBarItem', className);\n\n    const isSmallScreen = checkIfSmallResolution();\n\n    const onToggle = useCallback(() => setIsShown(!isShown), [setIsShown, isShown]);\n\n    // The children depend on each other, that's why it's easier to convert them once to an array\n    // and then pick the correct elements. In most cases there are only 2 or 3 elements in the children\n    // array so the looping shouldn't be too worrisome.\n    const childrenAsList = React.Children.toArray(children) as React.ReactElement[];\n    const itemPopover = childrenAsList.find(isActionBarItemPopover);\n    const itemIcon = childrenAsList.find(isActionBarItemIcon);\n\n    if (!itemPopover) {\n        return <div className={classes}>{children}</div>;\n    }\n\n    const { useOffscreen = false, title } = itemPopover.props;\n\n    // Filter out the popover and icon component from the list of children as they are handled separately\n    const childrenWithoutPopover = childrenAsList.filter(child => !isActionBarItemPopover(child));\n    const childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(child => !isActionBarItemIcon(child));\n\n    if (isSmallScreen) {\n        return (\n            <div {...(remainingProps as HTMLAttributes<HTMLDivElement>)} className={classes} ref={clickOutsideRef}>\n                {React.cloneElement(itemIcon as React.ReactElement, { onClick: onToggle })}\n                <div onClick={() => setIsShown(false)}>\n                    <Dialog\n                        show={isShown}\n                        onClose={() => setIsShown(false)}\n                        body={itemPopover}\n                        bodyClassName={mobileDialogBodyClassName}\n                        title={title}\n                    />\n                </div>\n                {childrenWithoutPopoverAndIcon}\n            </div>\n        );\n    }\n\n    const overlay = (\n        <ActionBarOverlay\n            id={id}\n            key='child'\n            title={title}\n            width={popoverWidth}\n            preRender={useOffscreen}\n            show={isShown}\n        >\n            {itemPopover}\n        </ActionBarOverlay>\n    );\n\n    return (\n        <div {...(remainingProps as HTMLAttributes<HTMLDivElement>)} className={classes} ref={clickOutsideRef}>\n            <OverlayTrigger\n                onToggle={onToggle}\n                show={isShown || useOffscreen}\n                placement={OverlayTrigger.BOTTOM_END}\n                overlay={overlay}\n                rootClose={false}\n                trigger='click'\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {itemIcon}\n            </OverlayTrigger>\n            {childrenWithoutPopoverAndIcon}\n        </div>\n    );\n};\n\nconst ActionBarItem = memo(ActionBarItemBase) as ActionBarItemComponents &\n    MemoExoticComponent<FC<ActionBarItemPropsWithChildren>>;\n\n// Define static variables on the component type\nActionBarItem.Icon = ActionBarItemIcon;\nActionBarItem.Popover = ActionBarItemPopoverContent;\nActionBarItem.List = ActionBarItemList;\nActionBarItem.ListItem = ActionBarItemListItem;\nActionBarItem.ListSeparator = ActionBarItemListSeparator;\n\nexport default ActionBarItem;\n"],"names":["EVENT","CLASSNAME_SHOW","CLASSNAME_OFFSCREEN","DEFAULT_POPOVER_WIDTH","POPOVER_CLOSE_DELAY_IN_MS","SMALL_RESOLUTION_THRESHOLD_IN_PX","getRandomString","hasClass","element","className","hasNotClass","negate","isNotChildNodeOf","childNode","parentNode","checkIfSmallResolution","isSmallResolution","setIsSmallResolution","useState","useEffect","header","head","isSmall","isActionBarItemPopover","child","ActionBarItemPopoverContent","isActionBarItemIcon","ActionBarItemIcon","ActionBarItemBase","props","id","mobileDialogBodyClassName","children","popoverWidth","hidePopoverOnClick","remainingProps","isShown","setIsShown","clickOutsideRef","useRef","useLayoutEffect","listener","event","popoverEl","isClickOutsidePopover","delay","classes","classNames","isSmallScreen","onToggle","useCallback","childrenAsList","React","itemPopover","itemIcon","jsx","useOffscreen","title","childrenWithoutPopoverAndIcon","Dialog","overlay","ActionBarOverlay","OverlayTrigger","ActionBarItem","memo","ActionBarItemList","ActionBarItemListItem","ActionBarItemListSeparator"],"mappings":"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"}
+{"version":3,"file":"ActionBarItem.js","sources":["../../../src/components/actionBarItem/ActionBarItem.tsx"],"sourcesContent":["import React, {\n    memo,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useState,\n    useRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n    type MemoExoticComponent,\n    type FC,\n} from 'react';\nimport classNames from 'classnames';\nimport { negate } from 'es-toolkit/function';\nimport { delay, head } from 'es-toolkit/compat';\n\nimport ActionBarOverlay from './ActionBarOverlay';\nimport ActionBarItemPopoverContent from './ActionBarItemPopoverContent';\nimport ActionBarItemIcon from './ActionBarItemIcon';\nimport ActionBarItemList from './ActionBarItemList';\nimport ActionBarItemListItem from './ActionBarItemListItem';\nimport ActionBarItemListSeparator from './ActionBarItemListSeparator';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Dialog from '../dialog/Dialog';\n\nconst EVENT = 'mousedown';\nconst CLASSNAME_SHOW = 'show';\nconst CLASSNAME_OFFSCREEN = 'position-offscreen';\n\nconst DEFAULT_POPOVER_WIDTH = 250;\nconst POPOVER_CLOSE_DELAY_IN_MS = 200;\nconst SMALL_RESOLUTION_THRESHOLD_IN_PX = 580;\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\n\nconst hasClass = (element: HTMLElement, className: string) => element.classList.contains(className);\nconst hasNotClass = negate(hasClass);\n\nconst isNotChildNodeOf = (childNode: HTMLElement, parentNode: HTMLElement) => !parentNode.contains(childNode);\n\nconst checkIfSmallResolution = () => {\n    const [isSmallResolution, setIsSmallResolution] = useState(false);\n\n    // We only execute this once. Before it was re-rendered on every change.\n    // Users probably don't switch between display sizes that often therefore it probably makes sense to\n    // avoid the re-rendering or applying an event listener.\n    useEffect(() => {\n        const header = head(document.getElementsByClassName('ApplicationHeader')) as HTMLElement | undefined;\n        const isSmall = header ? header.offsetWidth < SMALL_RESOLUTION_THRESHOLD_IN_PX : false;\n        setIsSmallResolution(isSmall);\n    }, []);\n\n    return isSmallResolution;\n};\n\nconst isActionBarItemPopover = (child: React.ReactElement) =>\n    child.type && (child.type as React.ComponentType<unknown>).displayName === ActionBarItemPopoverContent.displayName;\n\nconst isActionBarItemIcon = (child: React.ReactElement) =>\n    child.type && (child.type as React.ComponentType<unknown>).displayName === ActionBarItemIcon.displayName;\n\nexport type ActionBarItemPopoverWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type ActionBarItemProps = {\n    /**\n     * The id is used to identify the item in the DOM.\n     *\n     * If not provided, a random id is used instead.\n     */\n    id?: string;\n\n    /**\n     * The title property for the sub-component ActionBarItem.Popover.\n     *\n     * This can be a String or another component as well as a React-Intl component.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional class names that are added to the respective component.\n     *\n     * It can be defined for the parent and all sub-components.\n     */\n    className?: string;\n\n    /**\n     * Defines if the popover should close when any child element is being clicked.\n     *\n     * @default true\n     */\n    hidePopoverOnClick?: boolean;\n\n    /**\n     * Possible values are `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450` or `500`.\n     *\n     * @default 250\n     */\n    popoverWidth?: ActionBarItemPopoverWidth;\n\n    /**\n     * Additional class names that are added to dialog fallback modal-body element.\n     */\n    mobileDialogBodyClassName?: string;\n};\n\nexport type ActionBarItemComponents = {\n    Icon: typeof ActionBarItemIcon;\n    Popover: typeof ActionBarItemPopoverContent;\n    List: typeof ActionBarItemList;\n    ListItem: typeof ActionBarItemListItem;\n    ListSeparator: typeof ActionBarItemListSeparator;\n};\n\ntype ActionBarItemPropsWithChildren = PropsWithChildren<ActionBarItemProps>;\n\nconst ActionBarItemBase = (props: ActionBarItemPropsWithChildren) => {\n    const {\n        id = getRandomString(),\n        className,\n        mobileDialogBodyClassName = '',\n        children,\n        popoverWidth = DEFAULT_POPOVER_WIDTH,\n        hidePopoverOnClick = true,\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const clickOutsideRef = useRef(null);\n\n    useLayoutEffect(() => {\n        const listener = (event: MouseEvent) => {\n            if (!clickOutsideRef || !clickOutsideRef.current || !isShown) {\n                return;\n            }\n\n            // Since the popover component is based on React Portal and might be offscreen, we need to use\n            // old-school approach and query the DOM for the item ID.\n            const popoverEl = document.getElementById(id);\n\n            if (!popoverEl) {\n                return;\n            }\n\n            // Abort when the ActionBarItemIcon itself has been clicked as there is a toggle function\n            // applied to the icon that takes care of opening and closing\n            const hasIconClickedToClose = (event.target as HTMLElement).offsetParent === clickOutsideRef.current;\n            if (hasIconClickedToClose) {\n                return;\n            }\n\n            // Handle click outside the popover to close it\n            const isClickOutsidePopover = isNotChildNodeOf(event.target as HTMLElement, popoverEl);\n            const isPopoverVisible = hasClass(popoverEl, CLASSNAME_SHOW) && hasNotClass(popoverEl, CLASSNAME_OFFSCREEN);\n\n            if (isPopoverVisible && isClickOutsidePopover) {\n                setIsShown(false);\n                return;\n            }\n\n            // Handle click inside the popover.\n            // Delay the closing of the popover to execute possible actions from within the popover\n            // like clicks on links or buttons\n            if (hidePopoverOnClick) {\n                delay(() => setIsShown(false), POPOVER_CLOSE_DELAY_IN_MS);\n            }\n        };\n\n        document.addEventListener(EVENT, listener);\n        return () => {\n            document.removeEventListener(EVENT, listener);\n        };\n    }, [clickOutsideRef, id, isShown]);\n\n    const classes = classNames('ActionBarItem', className);\n\n    const isSmallScreen = checkIfSmallResolution();\n\n    const onToggle = useCallback(() => setIsShown(!isShown), [setIsShown, isShown]);\n\n    // The children depend on each other, that's why it's easier to convert them once to an array\n    // and then pick the correct elements. In most cases there are only 2 or 3 elements in the children\n    // array so the looping shouldn't be too worrisome.\n    const childrenAsList = React.Children.toArray(children) as React.ReactElement[];\n    const itemPopover = childrenAsList.find(isActionBarItemPopover);\n    const itemIcon = childrenAsList.find(isActionBarItemIcon);\n\n    if (!itemPopover) {\n        return <div className={classes}>{children}</div>;\n    }\n\n    const { useOffscreen = false, title } = itemPopover.props;\n\n    // Filter out the popover and icon component from the list of children as they are handled separately\n    const childrenWithoutPopover = childrenAsList.filter(child => !isActionBarItemPopover(child));\n    const childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(child => !isActionBarItemIcon(child));\n\n    if (isSmallScreen) {\n        return (\n            <div {...(remainingProps as HTMLAttributes<HTMLDivElement>)} className={classes} ref={clickOutsideRef}>\n                {React.cloneElement(itemIcon as React.ReactElement, { onClick: onToggle })}\n                <div onClick={() => setIsShown(false)}>\n                    <Dialog\n                        show={isShown}\n                        onClose={() => setIsShown(false)}\n                        body={itemPopover}\n                        bodyClassName={mobileDialogBodyClassName}\n                        title={title}\n                    />\n                </div>\n                {childrenWithoutPopoverAndIcon}\n            </div>\n        );\n    }\n\n    const overlay = (\n        <ActionBarOverlay\n            id={id}\n            key='child'\n            title={title}\n            width={popoverWidth}\n            preRender={useOffscreen}\n            show={isShown}\n        >\n            {itemPopover}\n        </ActionBarOverlay>\n    );\n\n    return (\n        <div {...(remainingProps as HTMLAttributes<HTMLDivElement>)} className={classes} ref={clickOutsideRef}>\n            <OverlayTrigger\n                onToggle={onToggle}\n                show={isShown || useOffscreen}\n                placement={OverlayTrigger.BOTTOM_END}\n                overlay={overlay}\n                rootClose={false}\n                trigger='click'\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {itemIcon}\n            </OverlayTrigger>\n            {childrenWithoutPopoverAndIcon}\n        </div>\n    );\n};\n\nconst ActionBarItem = memo(ActionBarItemBase) as ActionBarItemComponents &\n    MemoExoticComponent<FC<ActionBarItemPropsWithChildren>>;\n\n// Define static variables on the component type\nActionBarItem.Icon = ActionBarItemIcon;\nActionBarItem.Popover = ActionBarItemPopoverContent;\nActionBarItem.List = ActionBarItemList;\nActionBarItem.ListItem = ActionBarItemListItem;\nActionBarItem.ListSeparator = ActionBarItemListSeparator;\n\nexport default ActionBarItem;\n"],"names":["EVENT","CLASSNAME_SHOW","CLASSNAME_OFFSCREEN","DEFAULT_POPOVER_WIDTH","POPOVER_CLOSE_DELAY_IN_MS","SMALL_RESOLUTION_THRESHOLD_IN_PX","getRandomString","hasClass","element","className","hasNotClass","negate","isNotChildNodeOf","childNode","parentNode","checkIfSmallResolution","isSmallResolution","setIsSmallResolution","useState","useEffect","header","head","isSmall","isActionBarItemPopover","child","ActionBarItemPopoverContent","isActionBarItemIcon","ActionBarItemIcon","ActionBarItemBase","props","id","mobileDialogBodyClassName","children","popoverWidth","hidePopoverOnClick","remainingProps","isShown","setIsShown","clickOutsideRef","useRef","useLayoutEffect","listener","event","popoverEl","isClickOutsidePopover","delay","classes","classNames","isSmallScreen","onToggle","useCallback","childrenAsList","React","itemPopover","itemIcon","jsx","useOffscreen","title","childrenWithoutPopoverAndIcon","Dialog","overlay","ActionBarOverlay","OverlayTrigger","ActionBarItem","memo","ActionBarItemList","ActionBarItemListItem","ActionBarItemListSeparator"],"mappings":"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"}

package/components/applicationHeader/ApplicationHeader.d.ts

@@ -8,10 +8,7 @@ export type ModulePropType = {
      * The navigation link component used for rendering the name and for routing.
      *
      * @example
-     *
-     * ```tsx
-     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>
-     * ```
+     * <NavLink to='/app/ipsum'>Lorem ipsum</NavLink>
      */
     route: React.ReactNode;
 };
@@ -25,14 +22,13 @@ export type ApplicationHeaderProps = {
      * 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.
+     *
+     * @default true
      */
     showHomeIcon?: boolean;
     /**
@@ -63,11 +59,14 @@ export type ApplicationHeaderProps = {
      *
      * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components
      * are based on the `ActionBarItem`.
+     *
+     * @default []
      */
     actionBarItems?: React.ReactNode[];
     /**
      * Callback function triggered when the application menu is open or closed.
      *
+     * @default () => {}
      * @param isOpen The new "open" state.
      */
     onToggleAppMenu?: (isOpen: boolean) => void;

package/components/applicationHeader/ApplicationHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationHeader.js","sources":["../../../src/components/applicationHeader/ApplicationHeader.tsx"],"sourcesContent":["import React, { useRef, forwardRef, useCallback, useImperativeHandle, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport AppMenu from './AppMenu';\nimport ApplicationActionBar from './ApplicationActionBar';\nimport MobileSubmoduleNavigation from './MobileSubmoduleNavigation';\nimport MobileAppMenu from './MobileAppMenu';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport NavItems from './NavItems';\n\nconst SCREEN_SM = 768; // @screen-sm: 768px;\n\nexport type ModulePropType = {\n    /**\n     * Unique key for the sub-module navigation component of an app.\n     */\n    key: string;\n\n    /**\n     * The navigation link component used for rendering the name and for routing.\n     *\n     * @example\n     *\n     * ```tsx\n     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>\n     * ```\n     */\n    route: React.ReactNode;\n};\n\nexport type ApplicationHeaderProps = {\n    /**\n     * The service name shown as the navigator dropdown label.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`\n     * as homeRoute into the header. For example:\n     *\n     * @example\n     *\n     * ```tsx\n     * <NavLink to='https://home.rio.cloud' />\n     * ```\n     */\n    homeRoute?: React.ReactNode;\n\n    /**\n     * Defines to either show the home icon or the RIO logo as brand logo.\n     */\n    showHomeIcon?: boolean;\n\n    /**\n     * The component for the navigation between apps which will be shown inside the main dropdown.\n     *\n     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a\n     * simple list In this case, use the prop `appMenuItems`.\n     *\n     * If no appNavigator is defined, the dropdown menu will not be rendered.\n     */\n    appNavigator?: React.ReactNode;\n\n    /**\n     * Additional class names that are added to the appNavigator.\n     */\n    appNavigatorClassName?: string;\n\n    /**\n     * List of application navigation link components.\n     */\n    appMenuItems?: ModulePropType[];\n\n    /**\n     * List of submodule navigation component of an app.\n     *\n     * Items collapse into a dropdown if remaining space in the header is not sufficient.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * List of external smart components.\n     *\n     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components\n     * are based on the `ActionBarItem`.\n     */\n    actionBarItems?: React.ReactNode[];\n\n    /**\n     * Callback function triggered when the application menu is open or closed.\n     *\n     * @param isOpen The new \"open\" state.\n     */\n    onToggleAppMenu?: (isOpen: boolean) => void;\n\n    /**\n     * Additional class names that are added to the wrapper component.\n     */\n    className?: string;\n};\n\nexport const ApplicationHeader = forwardRef((props: ApplicationHeaderProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        homeRoute = '',\n        showHomeIcon = true,\n        label,\n        className,\n        appNavigator,\n        appNavigatorClassName,\n        appMenuItems,\n        navItems,\n        actionBarItems = [],\n        onToggleAppMenu = () => {},\n        ...remainingProps\n    } = props;\n\n    const actionBarRef = useRef(null);\n\n    const [navRef, entry] = useResizeObserver();\n\n    const contentRect = entry?.contentRect;\n\n    useImperativeHandle<HTMLDivElement, any>(ref, () => navRef, [navRef]);\n\n    const getContentRect = useCallback(\n        (key: keyof DOMRectReadOnly) => {\n            if (contentRect) {\n                const value = contentRect[key];\n                return typeof value === 'number' && Math.round(value);\n            }\n        },\n        [contentRect]\n    );\n\n    // If container width cannot be properly read initially, fall back to window width.\n    // This fixes ugly jumping on mobile header and desktop header on mount.\n    const containerWidth = getContentRect('width') || window.innerWidth;\n\n    const isMobileWidth = containerWidth <= SCREEN_SM;\n\n    const hasActionBarItems = !isEmpty(actionBarItems);\n\n    const wrapperClassNames = classNames(\n        'ApplicationHeader',\n        'user-select-none',\n        isMobileWidth && 'mobile',\n        className && className\n    );\n\n    return (\n        <nav {...remainingProps} className={wrapperClassNames} ref={navRef}>\n            {isMobileWidth && (\n                <React.Fragment>\n                    <MobileAppMenu\n                        showHomeIcon={showHomeIcon}\n                        homeRoute={homeRoute}\n                        appMenuItems={appMenuItems}\n                        appNavigator={appNavigator}\n                        onToggleAppMenu={onToggleAppMenu}\n                    />\n                    <div className='flex-1-1-0 display-flex gap-10'>\n                        <MobileSubmoduleNavigation className='flex-1-1' label={label} navItems={navItems} />\n                        {hasActionBarItems && <Divider />}\n                        <ApplicationActionBar className='mobile' nodeRef={actionBarRef} items={actionBarItems} />\n                    </div>\n                </React.Fragment>\n            )}\n            {!isMobileWidth && (\n                <React.Fragment>\n                    <div className='navbar-header'>\n                        <span className={`navbar-brand ${showHomeIcon ? 'home-icon' : ''}`}>{homeRoute}</span>\n                    </div>\n                    {label && (\n                        <AppMenu\n                            label={label}\n                            key='AppMenu'\n                            appMenuItems={appMenuItems}\n                            appNavigator={appNavigator}\n                            appNavigatorClassName={appNavigatorClassName}\n                            onToggleAppMenu={onToggleAppMenu}\n                        />\n                    )}\n                    {isEmpty(navItems) && <ul className='SubmoduleNavigation nav' />}\n                    {!isEmpty(navItems) && (\n                        <NavItems\n                            key='NavItems'\n                            navItems={navItems}\n                            containerWidth={containerWidth}\n                            actionBarItems={actionBarItems}\n                        />\n                    )}\n                    <ApplicationActionBar nodeRef={actionBarRef} items={actionBarItems} />\n                </React.Fragment>\n            )}\n        </nav>\n    );\n});\n\nconst Divider = () => (\n    <div className='divider display-flex align-items-center'>\n        <div className='width-3 height-20 bg-lighter' />\n    </div>\n);\n\nexport default ApplicationHeader;\n"],"names":["SCREEN_SM","ApplicationHeader","forwardRef","props","ref","homeRoute","showHomeIcon","label","className","appNavigator","appNavigatorClassName","appMenuItems","navItems","actionBarItems","onToggleAppMenu","remainingProps","actionBarRef","useRef","navRef","entry","useResizeObserver","contentRect","useImperativeHandle","containerWidth","useCallback","key","value","isMobileWidth","hasActionBarItems","isEmpty","wrapperClassNames","classNames","jsxs","React","jsx","MobileAppMenu","MobileSubmoduleNavigation","Divider","ApplicationActionBar","AppMenu","NavItems"],"mappings":"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"}
+{"version":3,"file":"ApplicationHeader.js","sources":["../../../src/components/applicationHeader/ApplicationHeader.tsx"],"sourcesContent":["import React, { useRef, forwardRef, useCallback, useImperativeHandle, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport AppMenu from './AppMenu';\nimport ApplicationActionBar from './ApplicationActionBar';\nimport MobileSubmoduleNavigation from './MobileSubmoduleNavigation';\nimport MobileAppMenu from './MobileAppMenu';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport NavItems from './NavItems';\n\nconst SCREEN_SM = 768; // @screen-sm: 768px;\n\nexport type ModulePropType = {\n    /**\n     * Unique key for the sub-module navigation component of an app.\n     */\n    key: string;\n\n    /**\n     * The navigation link component used for rendering the name and for routing.\n     *\n     * @example\n     * <NavLink to='/app/ipsum'>Lorem ipsum</NavLink>\n     */\n    route: React.ReactNode;\n};\n\nexport type ApplicationHeaderProps = {\n    /**\n     * The service name shown as the navigator dropdown label.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`\n     * as homeRoute into the header. For example:\n     *\n     * @example\n     * <NavLink to='https://home.rio.cloud' />\n     */\n    homeRoute?: React.ReactNode;\n\n    /**\n     * Defines to either show the home icon or the RIO logo as brand logo.\n     *\n     * @default true\n     */\n    showHomeIcon?: boolean;\n\n    /**\n     * The component for the navigation between apps which will be shown inside the main dropdown.\n     *\n     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a\n     * simple list In this case, use the prop `appMenuItems`.\n     *\n     * If no appNavigator is defined, the dropdown menu will not be rendered.\n     */\n    appNavigator?: React.ReactNode;\n\n    /**\n     * Additional class names that are added to the appNavigator.\n     */\n    appNavigatorClassName?: string;\n\n    /**\n     * List of application navigation link components.\n     */\n    appMenuItems?: ModulePropType[];\n\n    /**\n     * List of submodule navigation component of an app.\n     *\n     * Items collapse into a dropdown if remaining space in the header is not sufficient.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * List of external smart components.\n     *\n     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components\n     * are based on the `ActionBarItem`.\n     *\n     * @default []\n     */\n    actionBarItems?: React.ReactNode[];\n\n    /**\n     * Callback function triggered when the application menu is open or closed.\n     *\n     * @default () => {}\n     * @param isOpen The new \"open\" state.\n     */\n    onToggleAppMenu?: (isOpen: boolean) => void;\n\n    /**\n     * Additional class names that are added to the wrapper component.\n     */\n    className?: string;\n};\n\nexport const ApplicationHeader = forwardRef((props: ApplicationHeaderProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        homeRoute = '',\n        showHomeIcon = true,\n        label,\n        className,\n        appNavigator,\n        appNavigatorClassName,\n        appMenuItems,\n        navItems,\n        actionBarItems = [],\n        onToggleAppMenu = () => {},\n        ...remainingProps\n    } = props;\n\n    const actionBarRef = useRef(null);\n\n    const [navRef, entry] = useResizeObserver();\n\n    const contentRect = entry?.contentRect;\n\n    useImperativeHandle<HTMLDivElement, any>(ref, () => navRef, [navRef]);\n\n    const getContentRect = useCallback(\n        (key: keyof DOMRectReadOnly) => {\n            if (contentRect) {\n                const value = contentRect[key];\n                return typeof value === 'number' && Math.round(value);\n            }\n        },\n        [contentRect]\n    );\n\n    // If container width cannot be properly read initially, fall back to window width.\n    // This fixes ugly jumping on mobile header and desktop header on mount.\n    const containerWidth = getContentRect('width') || window.innerWidth;\n\n    const isMobileWidth = containerWidth <= SCREEN_SM;\n\n    const hasActionBarItems = !isEmpty(actionBarItems);\n\n    const wrapperClassNames = classNames(\n        'ApplicationHeader',\n        'user-select-none',\n        isMobileWidth && 'mobile',\n        className && className\n    );\n\n    return (\n        <nav {...remainingProps} className={wrapperClassNames} ref={navRef}>\n            {isMobileWidth && (\n                <React.Fragment>\n                    <MobileAppMenu\n                        showHomeIcon={showHomeIcon}\n                        homeRoute={homeRoute}\n                        appMenuItems={appMenuItems}\n                        appNavigator={appNavigator}\n                        onToggleAppMenu={onToggleAppMenu}\n                    />\n                    <div className='flex-1-1-0 display-flex gap-10'>\n                        <MobileSubmoduleNavigation className='flex-1-1' label={label} navItems={navItems} />\n                        {hasActionBarItems && <Divider />}\n                        <ApplicationActionBar className='mobile' nodeRef={actionBarRef} items={actionBarItems} />\n                    </div>\n                </React.Fragment>\n            )}\n            {!isMobileWidth && (\n                <React.Fragment>\n                    <div className='navbar-header'>\n                        <span className={`navbar-brand ${showHomeIcon ? 'home-icon' : ''}`}>{homeRoute}</span>\n                    </div>\n                    {label && (\n                        <AppMenu\n                            label={label}\n                            key='AppMenu'\n                            appMenuItems={appMenuItems}\n                            appNavigator={appNavigator}\n                            appNavigatorClassName={appNavigatorClassName}\n                            onToggleAppMenu={onToggleAppMenu}\n                        />\n                    )}\n                    {isEmpty(navItems) && <ul className='SubmoduleNavigation nav' />}\n                    {!isEmpty(navItems) && (\n                        <NavItems\n                            key='NavItems'\n                            navItems={navItems}\n                            containerWidth={containerWidth}\n                            actionBarItems={actionBarItems}\n                        />\n                    )}\n                    <ApplicationActionBar nodeRef={actionBarRef} items={actionBarItems} />\n                </React.Fragment>\n            )}\n        </nav>\n    );\n});\n\nconst Divider = () => (\n    <div className='divider display-flex align-items-center'>\n        <div className='width-3 height-20 bg-lighter' />\n    </div>\n);\n\nexport default ApplicationHeader;\n"],"names":["SCREEN_SM","ApplicationHeader","forwardRef","props","ref","homeRoute","showHomeIcon","label","className","appNavigator","appNavigatorClassName","appMenuItems","navItems","actionBarItems","onToggleAppMenu","remainingProps","actionBarRef","useRef","navRef","entry","useResizeObserver","contentRect","useImperativeHandle","containerWidth","useCallback","key","value","isMobileWidth","hasActionBarItems","isEmpty","wrapperClassNames","classNames","jsxs","React","jsx","MobileAppMenu","MobileSubmoduleNavigation","Divider","ApplicationActionBar","AppMenu","NavItems"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAY,KA0FLC,IAAoBC,EAAW,CAACC,GAA+BC,MAAsC;AAC9G,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEEa,IAAeC,EAAO,IAAI,GAE1B,CAACC,GAAQC,CAAK,IAAIC,EAAA,GAElBC,IAAcF,GAAO;AAE3B,EAAAG,EAAyClB,GAAK,MAAMc,GAAQ,CAACA,CAAM,CAAC;AAcpE,QAAMK,IAZiBC;AAAA,IACnB,CAACC,MAA+B;AAC5B,UAAIJ,GAAa;AACb,cAAMK,IAAQL,EAAYI,CAAG;AAC7B,eAAO,OAAOC,KAAU,YAAY,KAAK,MAAMA,CAAK;AAAA,MACxD;AAAA,IACJ;AAAA,IACA,CAACL,CAAW;AAAA,EAAA,EAKsB,OAAO,KAAK,OAAO,YAEnDM,IAAgBJ,KAAkBvB,GAElC4B,IAAoB,CAACC,EAAQhB,CAAc,GAE3CiB,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAJ,KAAiB;AAAA,IACjBnB,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGO,GAAgB,WAAWe,GAAmB,KAAKZ,GACvD,UAAA;AAAA,IAAAS,KACG,gBAAAK,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,cAAA7B;AAAA,UACA,WAAAD;AAAA,UACA,cAAAM;AAAA,UACA,cAAAF;AAAA,UACA,iBAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAkB,EAAC,OAAA,EAAI,WAAU,kCACX,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAA0B,WAAU,YAAW,OAAA7B,GAAc,UAAAK,GAAoB;AAAA,QACjFgB,uBAAsBS,GAAA,EAAQ;AAAA,0BAC9BC,GAAA,EAAqB,WAAU,UAAS,SAAStB,GAAc,OAAOH,EAAA,CAAgB;AAAA,MAAA,EAAA,CAC3F;AAAA,IAAA,GACJ;AAAA,IAEH,CAACc,KACE,gBAAAK,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,gBAAgB5B,IAAe,cAAc,EAAE,IAAK,UAAAD,EAAA,CAAU,GACnF;AAAA,MACCE,KACG,gBAAA2B;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAAhC;AAAA,UAEA,cAAAI;AAAA,UACA,cAAAF;AAAA,UACA,uBAAAC;AAAA,UACA,iBAAAI;AAAA,QAAA;AAAA,QAJI;AAAA,MAAA;AAAA,MAOXe,EAAQjB,CAAQ,KAAK,gBAAAsB,EAAC,MAAA,EAAG,WAAU,2BAA0B;AAAA,MAC7D,CAACL,EAAQjB,CAAQ,KACd,gBAAAsB;AAAA,QAACM;AAAA,QAAA;AAAA,UAEG,UAAA5B;AAAA,UACA,gBAAAW;AAAA,UACA,gBAAAV;AAAA,QAAA;AAAA,QAHI;AAAA,MAAA;AAAA,MAMZ,gBAAAqB,EAACI,GAAA,EAAqB,SAAStB,GAAc,OAAOH,EAAA,CAAgB;AAAA,IAAA,EAAA,CACxE;AAAA,EAAA,GAER;AAER,CAAC,GAEKwB,IAAU,MACZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,2CACX,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B,EAAA,CAClD;"}

package/components/applicationLayout/SubNavigation.d.ts

@@ -1,6 +1,13 @@
 import { ModulePropType } from '../applicationHeader/ApplicationHeader';
 export type SubNavigationProps = {
+    /**
+     * List of navigation items with key and route prop.
+     * The route prop is a react-router NavLink component with an `active` style.
+     */
     navItems?: ModulePropType[];
+    /**
+     * Additional classes for the wrapper element.
+     */
     className?: string;
 };
 declare const SubNavigation: import('react').ForwardRefExoticComponent<SubNavigationProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/applicationLayout/SubNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNavigation.js","sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\nimport classNames from 'classnames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    navItems?: ModulePropType[];\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"names":["SubNavigation","forwardRef","props","ref","className","navItems","remainingProps","navigationClasses","classNames","jsx","navItem"],"mappings":";;;AAYA,MAAMA,IAAgBC,EAAW,CAACC,GAA2BC,MAAa;AACtE,QAAM,EAAE,WAAAC,GAAW,UAAAC,IAAW,CAAA,GAAI,GAAGC,MAAmBJ,GAElDK,IAAoBC,EAAW,iBAAiB,8BAA8BJ,CAAS;AAE7F,SACI,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,2BACT,UAAAJ,EAAS,IAAI,CAAAK,MACV,gBAAAD,EAAC,MAAA,EAAG,WAAU,aAA8B,qBAAmBC,EAAQ,KAClE,UAAAA,EAAQ,SADkBA,EAAQ,GAEvC,CACH,EAAA,CACL,GACJ;AAER,CAAC;"}
+{"version":3,"file":"SubNavigation.js","sources":["../../../src/components/applicationLayout/SubNavigation.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef } from 'react';\nimport classNames from 'classnames';\n\nimport type { ModulePropType } from '../applicationHeader/ApplicationHeader';\n\nexport type SubNavigationProps = {\n    /**\n     * List of navigation items with key and route prop.\n     * The route prop is a react-router NavLink component with an `active` style.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\n\nconst SubNavigation = forwardRef((props: SubNavigationProps, ref: Ref) => {\n    const { className, navItems = [], ...remainingProps } = props;\n\n    const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={navigationClasses}>\n            <ul className='SubmoduleNavigation nav'>\n                {navItems.map(navItem => (\n                    <li className='submodule' key={navItem.key} data-nav-item-key={navItem.key}>\n                        {navItem.route}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n});\n\nexport default SubNavigation;\n"],"names":["SubNavigation","forwardRef","props","ref","className","navItems","remainingProps","navigationClasses","classNames","jsx","navItem"],"mappings":";;;AAoBA,MAAMA,IAAgBC,EAAW,CAACC,GAA2BC,MAAa;AACtE,QAAM,EAAE,WAAAC,GAAW,UAAAC,IAAW,CAAA,GAAI,GAAGC,MAAmBJ,GAElDK,IAAoBC,EAAW,iBAAiB,8BAA8BJ,CAAS;AAE7F,SACI,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,2BACT,UAAAJ,EAAS,IAAI,CAAAK,MACV,gBAAAD,EAAC,MAAA,EAAG,WAAU,aAA8B,qBAAmBC,EAAQ,KAClE,UAAAA,EAAQ,SADkBA,EAAQ,GAEvC,CACH,EAAA,CACL,GACJ;AAER,CAAC;"}

package/components/assetTree/AssetTree.d.ts

@@ -20,6 +20,7 @@ export type AssetTreeProps = {
     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.
      *
@@ -50,6 +51,8 @@ export type AssetTreeProps = {
     isOpen?: boolean;
     /**
      * Callback for when the tree visibility is toggled.
+     *
+     * @default () => {}
      * @param isOpen
      * @returns
      */
@@ -60,12 +63,16 @@ export type AssetTreeProps = {
     currentCategoryId?: string;
     /**
      * Callback for handling change of category.
+     *
+     * @default () => {}
      * @param selectedCategoryId
      * @returns
      */
     onCategoryChange?: (selectedCategoryId: string) => void;
     /**
      * Callback for when the resize is done.
+     *
+     * @default () => {}
      */
     onResizeEnd?: VoidFunction;
     /**

package/components/assetTree/AssetTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetTree.js","sources":["../../../src/components/assetTree/AssetTree.tsx"],"sourcesContent":["import React, { memo, useState, useRef, forwardRef, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { head, isArray, noop } from 'es-toolkit/compat';\nimport invariant from 'tiny-invariant';\n\nimport TreeCategory, { type TreeCategoryProps } from './TreeCategory';\nimport Resizer from '../resizer/Resizer';\nimport TreeSidebar from './TreeSidebar';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport mergeRefs from '../../utils/mergeRefs';\nimport usePrevious from '../../usePrevious';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 0;\n\nconst TreeMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n} as const;\n\nconst getSidebarBodyRef = (sidebarRef: React.MutableRefObject<HTMLDivElement | null>) =>\n    head(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));\n\nconst getCurrentCategoryElement = (children: React.ReactElement[], currentCategoryId: string) => {\n    return isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;\n};\n\nconst renderTreesOffscreen = (children: React.ReactElement[], categoryId: string | undefined) => {\n    return React.Children.map(children, child => {\n        const offscreenClasses = classNames(\n            'TreeOffscreenWrapper',\n            child && child.props.id !== categoryId && 'position-offscreen pointer-events-none'\n        );\n        return <div className={offscreenClasses}>{child}</div>;\n    });\n};\n\nexport type AssetTreeProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     *\n     * @default true\n     */\n    resizable?: boolean;\n\n    /**\n     * Defines whether the component has a border or not.\n     *\n     * @default false\n     */\n    bordered?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as inline style.\n     * Note: when component is resizable it will take the provided\n     * width in px only and convert it to number in case.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width of the component in px that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width of the component in px that will take effect when resizing.\n     *\n     * @default 0\n     */\n    maxWidth?: number;\n\n    /**\n     * Defines the height of the component in px.\n     */\n    height?: number;\n\n    /**\n     * Defines whether the component is open or not.\n     *\n     * @default true\n     */\n    isOpen?: boolean;\n\n    /**\n     * Callback for when the tree visibility is toggled.\n     * @param isOpen\n     * @returns\n     */\n    onToggleTree?: (isOpen: boolean) => void;\n\n    /**\n     * The id of the category which is currently active and shall be shown.\n     */\n    currentCategoryId?: string;\n\n    /**\n     * Callback for handling change of category.\n     * @param selectedCategoryId\n     * @returns\n     */\n    onCategoryChange?: (selectedCategoryId: string) => void;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.\n     *\n     * @default false\n     */\n    useOffscreen?: boolean;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\n// Check if the child is a React element and if it has the type TreeCategory\nconst isTreeCategory = (child: React.ReactNode): child is React.ReactElement<TreeCategoryProps> => {\n    return React.isValidElement(child) && child.type === TreeCategory;\n};\n\nconst AssetTree = memo(\n    forwardRef<HTMLDivElement, PropsWithChildren<AssetTreeProps>>((props, ref) => {\n        const {\n            className,\n            resizable = true,\n            width = DEFAULT_WIDTH,\n            minWidth = DEFAULT_MIN_WIDTH,\n            maxWidth = DEFAULT_MAX_WIDTH,\n            height,\n            bordered = false,\n            currentCategoryId,\n            isOpen = true,\n            useOffscreen = false,\n            fly = false,\n            onCategoryChange = noop,\n            onToggleTree = noop,\n            onResizeEnd = noop,\n            children = [],\n            ...remainingProps\n        } = props;\n\n        const getSidebarMode = (isFly: boolean) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);\n\n        const [treeWidth, setTreeWidth] = useState(width);\n        const [isResize, setIsResize] = useState(false);\n        const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));\n\n        const sidebarRef = useRef<HTMLDivElement>(null);\n\n        const mergedRefs = mergeRefs([ref, sidebarRef]);\n\n        // Update internal state when props change\n        const previousWidth = usePrevious(width);\n        if (previousWidth !== width) {\n            setTreeWidth(width);\n        }\n\n        const [previousMode, setPreviousMode] = useState(fly);\n        if (previousMode !== fly) {\n            setSidebarMode(getSidebarMode(fly));\n            setPreviousMode(fly);\n        }\n\n        const childrenArray = React.Children.toArray(children);\n\n        // check for children type of TreeCategory and throw error in case\n        invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type \"TreeCategory\"');\n\n        const classes = classNames(\n            'AssetTree',\n            className,\n            !isOpen && 'closed',\n            bordered && 'border',\n            sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid'\n        );\n\n        const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');\n\n        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n        const resizeLimitStyle = { left: resizeIndicatorPosition };\n\n        const firstChild = head(childrenArray);\n\n        const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;\n\n        const style = {\n            width: treeWidth,\n            height,\n        };\n\n        const handleToggleTreeContent = () => onToggleTree(!isOpen);\n\n        const handleSelectCategory = (selectedCategoryId: string) => {\n            onCategoryChange(selectedCategoryId);\n\n            if (!isOpen) {\n                handleToggleTreeContent();\n            } else if (isOpen && currentCategoryId === selectedCategoryId) {\n                handleToggleTreeContent();\n            }\n        };\n\n        const handleResize = (diff: number) => {\n            const halfWindowWidth = window.innerWidth * 0.5;\n            const usedMaxWidth = maxWidth || halfWindowWidth;\n\n            // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is\n            // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar\n            // to old width\n            setTreeWidth(oldWidth => {\n                const updatedWidth = oldWidth - diff;\n                return getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n            });\n        };\n\n        const handleResizeStart = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.add('pointer-events-none');\n            }\n            setIsResize(true);\n        };\n\n        const handleResizeEnd = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.remove('pointer-events-none');\n            }\n            setIsResize(false);\n            onResizeEnd();\n        };\n\n        return (\n            <div {...remainingProps} className={classes} style={style} ref={mergedRefs}>\n                <div className={resizeLimitClasses} style={resizeLimitStyle} />\n                <div className='AssetTreeContent'>\n                    <TreeSidebar\n                        onSelectCategory={handleSelectCategory}\n                        currentCategoryId={currentCategoryId}\n                        onClick={handleToggleTreeContent}\n                    >\n                        {isArray(children) ? children : [children]}\n                    </TreeSidebar>\n                    <SmoothScrollbars slideIn className='AssetTreeBody'>\n                        {useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category}\n                    </SmoothScrollbars>\n                </div>\n                {resizable && isOpen && (\n                    <Resizer\n                        onResizeStart={handleResizeStart}\n                        onResize={handleResize}\n                        onResizeEnd={handleResizeEnd}\n                        direction={Resizer.HORIZONTAL}\n                        position={Resizer.RIGHT}\n                    />\n                )}\n            </div>\n        );\n    })\n);\n\nObject.assign(AssetTree, TreeMode);\n\nexport default AssetTree;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","TreeMode","getSidebarBodyRef","sidebarRef","head","getCurrentCategoryElement","children","currentCategoryId","isArray","child","renderTreesOffscreen","categoryId","React","offscreenClasses","classNames","jsx","isTreeCategory","TreeCategory","AssetTree","memo","forwardRef","props","ref","className","resizable","width","minWidth","maxWidth","height","bordered","isOpen","useOffscreen","fly","onCategoryChange","noop","onToggleTree","onResizeEnd","remainingProps","getSidebarMode","isFly","treeWidth","setTreeWidth","useState","isResize","setIsResize","sidebarMode","setSidebarMode","useRef","mergedRefs","mergeRefs","usePrevious","previousMode","setPreviousMode","childrenArray","invariant","classes","resizeLimitClasses","resizeLimitStyle","firstChild","category","style","handleToggleTreeContent","handleSelectCategory","selectedCategoryId","handleResize","diff","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","getWidthInBoundaries","handleResizeStart","body","handleResizeEnd","jsxs","TreeSidebar","SmoothScrollbars","Resizer"],"mappings":"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"}
+{"version":3,"file":"AssetTree.js","sources":["../../../src/components/assetTree/AssetTree.tsx"],"sourcesContent":["import React, { memo, useState, useRef, forwardRef, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { head, isArray, noop } from 'es-toolkit/compat';\nimport invariant from 'tiny-invariant';\n\nimport TreeCategory, { type TreeCategoryProps } from './TreeCategory';\nimport Resizer from '../resizer/Resizer';\nimport TreeSidebar from './TreeSidebar';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport mergeRefs from '../../utils/mergeRefs';\nimport usePrevious from '../../usePrevious';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 0;\n\nconst TreeMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n} as const;\n\nconst getSidebarBodyRef = (sidebarRef: React.MutableRefObject<HTMLDivElement | null>) =>\n    head(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));\n\nconst getCurrentCategoryElement = (children: React.ReactElement[], currentCategoryId: string) => {\n    return isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;\n};\n\nconst renderTreesOffscreen = (children: React.ReactElement[], categoryId: string | undefined) => {\n    return React.Children.map(children, child => {\n        const offscreenClasses = classNames(\n            'TreeOffscreenWrapper',\n            child && child.props.id !== categoryId && 'position-offscreen pointer-events-none'\n        );\n        return <div className={offscreenClasses}>{child}</div>;\n    });\n};\n\nexport type AssetTreeProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     *\n     * @default true\n     */\n    resizable?: boolean;\n\n    /**\n     * Defines whether the component has a border or not.\n     *\n     * @default false\n     */\n    bordered?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as inline style.\n     *\n     * Note: when component is resizable it will take the provided\n     * width in px only and convert it to number in case.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width of the component in px that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width of the component in px that will take effect when resizing.\n     *\n     * @default 0\n     */\n    maxWidth?: number;\n\n    /**\n     * Defines the height of the component in px.\n     */\n    height?: number;\n\n    /**\n     * Defines whether the component is open or not.\n     *\n     * @default true\n     */\n    isOpen?: boolean;\n\n    /**\n     * Callback for when the tree visibility is toggled.\n     *\n     * @default () => {}\n     * @param isOpen\n     * @returns\n     */\n    onToggleTree?: (isOpen: boolean) => void;\n\n    /**\n     * The id of the category which is currently active and shall be shown.\n     */\n    currentCategoryId?: string;\n\n    /**\n     * Callback for handling change of category.\n     *\n     * @default () => {}\n     * @param selectedCategoryId\n     * @returns\n     */\n    onCategoryChange?: (selectedCategoryId: string) => void;\n\n    /**\n     * Callback for when the resize is done.\n     *\n     * @default () => {}\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.\n     *\n     * @default false\n     */\n    useOffscreen?: boolean;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\n// Check if the child is a React element and if it has the type TreeCategory\nconst isTreeCategory = (child: React.ReactNode): child is React.ReactElement<TreeCategoryProps> => {\n    return React.isValidElement(child) && child.type === TreeCategory;\n};\n\nconst AssetTree = memo(\n    forwardRef<HTMLDivElement, PropsWithChildren<AssetTreeProps>>((props, ref) => {\n        const {\n            className,\n            resizable = true,\n            width = DEFAULT_WIDTH,\n            minWidth = DEFAULT_MIN_WIDTH,\n            maxWidth = DEFAULT_MAX_WIDTH,\n            height,\n            bordered = false,\n            currentCategoryId,\n            isOpen = true,\n            useOffscreen = false,\n            fly = false,\n            onCategoryChange = noop,\n            onToggleTree = noop,\n            onResizeEnd = noop,\n            children = [],\n            ...remainingProps\n        } = props;\n\n        const getSidebarMode = (isFly: boolean) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);\n\n        const [treeWidth, setTreeWidth] = useState(width);\n        const [isResize, setIsResize] = useState(false);\n        const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));\n\n        const sidebarRef = useRef<HTMLDivElement>(null);\n\n        const mergedRefs = mergeRefs([ref, sidebarRef]);\n\n        // Update internal state when props change\n        const previousWidth = usePrevious(width);\n        if (previousWidth !== width) {\n            setTreeWidth(width);\n        }\n\n        const [previousMode, setPreviousMode] = useState(fly);\n        if (previousMode !== fly) {\n            setSidebarMode(getSidebarMode(fly));\n            setPreviousMode(fly);\n        }\n\n        const childrenArray = React.Children.toArray(children);\n\n        // check for children type of TreeCategory and throw error in case\n        invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type \"TreeCategory\"');\n\n        const classes = classNames(\n            'AssetTree',\n            className,\n            !isOpen && 'closed',\n            bordered && 'border',\n            sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid'\n        );\n\n        const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');\n\n        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n        const resizeLimitStyle = { left: resizeIndicatorPosition };\n\n        const firstChild = head(childrenArray);\n\n        const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;\n\n        const style = {\n            width: treeWidth,\n            height,\n        };\n\n        const handleToggleTreeContent = () => onToggleTree(!isOpen);\n\n        const handleSelectCategory = (selectedCategoryId: string) => {\n            onCategoryChange(selectedCategoryId);\n\n            if (!isOpen) {\n                handleToggleTreeContent();\n            } else if (isOpen && currentCategoryId === selectedCategoryId) {\n                handleToggleTreeContent();\n            }\n        };\n\n        const handleResize = (diff: number) => {\n            const halfWindowWidth = window.innerWidth * 0.5;\n            const usedMaxWidth = maxWidth || halfWindowWidth;\n\n            // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is\n            // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar\n            // to old width\n            setTreeWidth(oldWidth => {\n                const updatedWidth = oldWidth - diff;\n                return getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n            });\n        };\n\n        const handleResizeStart = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.add('pointer-events-none');\n            }\n            setIsResize(true);\n        };\n\n        const handleResizeEnd = () => {\n            const body = getSidebarBodyRef(sidebarRef);\n            if (body) {\n                body.classList.remove('pointer-events-none');\n            }\n            setIsResize(false);\n            onResizeEnd();\n        };\n\n        return (\n            <div {...remainingProps} className={classes} style={style} ref={mergedRefs}>\n                <div className={resizeLimitClasses} style={resizeLimitStyle} />\n                <div className='AssetTreeContent'>\n                    <TreeSidebar\n                        onSelectCategory={handleSelectCategory}\n                        currentCategoryId={currentCategoryId}\n                        onClick={handleToggleTreeContent}\n                    >\n                        {isArray(children) ? children : [children]}\n                    </TreeSidebar>\n                    <SmoothScrollbars slideIn className='AssetTreeBody'>\n                        {useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category}\n                    </SmoothScrollbars>\n                </div>\n                {resizable && isOpen && (\n                    <Resizer\n                        onResizeStart={handleResizeStart}\n                        onResize={handleResize}\n                        onResizeEnd={handleResizeEnd}\n                        direction={Resizer.HORIZONTAL}\n                        position={Resizer.RIGHT}\n                    />\n                )}\n            </div>\n        );\n    })\n);\n\nObject.assign(AssetTree, TreeMode);\n\nexport default AssetTree;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","TreeMode","getSidebarBodyRef","sidebarRef","head","getCurrentCategoryElement","children","currentCategoryId","isArray","child","renderTreesOffscreen","categoryId","React","offscreenClasses","classNames","jsx","isTreeCategory","TreeCategory","AssetTree","memo","forwardRef","props","ref","className","resizable","width","minWidth","maxWidth","height","bordered","isOpen","useOffscreen","fly","onCategoryChange","noop","onToggleTree","onResizeEnd","remainingProps","getSidebarMode","isFly","treeWidth","setTreeWidth","useState","isResize","setIsResize","sidebarMode","setSidebarMode","useRef","mergedRefs","mergeRefs","usePrevious","previousMode","setPreviousMode","childrenArray","invariant","classes","resizeLimitClasses","resizeLimitStyle","firstChild","category","style","handleToggleTreeContent","handleSelectCategory","selectedCategoryId","handleResize","diff","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","getWidthInBoundaries","handleResizeStart","body","handleResizeEnd","jsxs","TreeSidebar","SmoothScrollbars","Resizer"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,KAAgB,KAChBC,KAAoB,KACpBC,KAAoB,GAEpBC,IAAW;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAChB,GAEMC,IAAoB,CAACC,MACvBC,EAAKD,GAAY,SAAS,uBAAuB,eAAe,CAAC,GAE/DE,KAA4B,CAACC,GAAgCC,MACxDC,EAAQF,CAAQ,IAAIA,EAAS,KAAK,CAAAG,MAASA,KAASA,EAAM,MAAM,OAAOF,CAAiB,IAAID,GAGjGI,KAAuB,CAACJ,GAAgCK,MACnDC,EAAM,SAAS,IAAIN,GAAU,CAAAG,MAAS;AACzC,QAAMI,IAAmBC;AAAA,IACrB;AAAA,IACAL,KAASA,EAAM,MAAM,OAAOE,KAAc;AAAA,EAAA;AAE9C,SAAO,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAmB,UAAAJ,GAAM;AACpD,CAAC,GAyGCO,KAAiB,CAACP,MACbG,EAAM,eAAeH,CAAK,KAAKA,EAAM,SAASQ,IAGnDC,KAAYC;AAAA,EACdC,GAA8D,CAACC,GAAOC,MAAQ;AAC1E,UAAM;AAAA,MACF,WAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,MACZ,OAAAC,IAAQ3B;AAAA,MACR,UAAA4B,IAAW3B;AAAA,MACX,UAAA4B,IAAW3B;AAAA,MACX,QAAA4B;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,mBAAAtB;AAAA,MACA,QAAAuB,IAAS;AAAA,MACT,cAAAC,IAAe;AAAA,MACf,KAAAC,IAAM;AAAA,MACN,kBAAAC,IAAmBC;AAAA,MACnB,cAAAC,IAAeD;AAAA,MACf,aAAAE,IAAcF;AAAA,MACd,UAAA5B,IAAW,CAAA;AAAA,MACX,GAAG+B;AAAA,IAAA,IACHhB,GAEEiB,IAAiB,CAACC,MAAoBA,IAAQtC,EAAS,WAAWA,EAAS,YAE3E,CAACuC,GAAWC,CAAY,IAAIC,EAASjB,CAAK,GAC1C,CAACkB,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxC,CAACG,GAAaC,CAAc,IAAIJ,EAASJ,EAAeN,CAAG,CAAC,GAE5D7B,IAAa4C,GAAuB,IAAI,GAExCC,IAAaC,GAAU,CAAC3B,GAAKnB,CAAU,CAAC;AAI9C,IADsB+C,GAAYzB,CAAK,MACjBA,KAClBgB,EAAahB,CAAK;AAGtB,UAAM,CAAC0B,GAAcC,CAAe,IAAIV,EAASV,CAAG;AACpD,IAAImB,MAAiBnB,MACjBc,EAAeR,EAAeN,CAAG,CAAC,GAClCoB,EAAgBpB,CAAG;AAGvB,UAAMqB,IAAgBzC,EAAM,SAAS,QAAQN,CAAQ;AAGrD,IAAAgD,GAAUD,EAAc,MAAMrC,EAAc,GAAG,wDAAwD;AAEvG,UAAMuC,IAAUzC;AAAA,MACZ;AAAA,MACAS;AAAA,MACA,CAACO,KAAU;AAAA,MACXD,KAAY;AAAA,MACZgB,MAAgB5C,EAAS,WAAW,QAAQ;AAAA,IAAA,GAG1CuD,IAAqB1C,EAAW,wBAAwB6B,KAAY,eAAe,GAGnFc,IAAmB,EAAE,MADK9B,KAAY,OAAO,aAAa,IAC/B,GAE3B+B,IAAatD,EAAKiD,CAAa,GAE/BM,IAAWpD,IAAoBF,GAA0BgD,GAAe9C,CAAiB,IAAImD,GAE7FE,IAAQ;AAAA,MACV,OAAOpB;AAAA,MACP,QAAAZ;AAAA,IAAA,GAGEiC,IAA0B,MAAM1B,EAAa,CAACL,CAAM,GAEpDgC,IAAuB,CAACC,MAA+B;AACzD,MAAA9B,EAAiB8B,CAAkB,GAE9BjC,IAEMA,KAAUvB,MAAsBwD,KACvCF,EAAA,IAFAA,EAAA;AAAA,IAIR,GAEMG,IAAe,CAACC,MAAiB;AACnC,YAAMC,IAAkB,OAAO,aAAa,KACtCC,KAAexC,KAAYuC;AAKjC,MAAAzB,EAAa,CAAA2B,OAAY;AACrB,cAAMC,KAAeD,KAAWH;AAChC,eAAOK,GAAqB5C,GAAUyC,IAAcE,EAAY;AAAA,MACpE,CAAC;AAAA,IACL,GAEME,IAAoB,MAAM;AAC5B,YAAMC,IAAOtE,EAAkBC,CAAU;AACzC,MAAIqE,KACAA,EAAK,UAAU,IAAI,qBAAqB,GAE5C5B,EAAY,EAAI;AAAA,IACpB,GAEM6B,IAAkB,MAAM;AAC1B,YAAMD,IAAOtE,EAAkBC,CAAU;AACzC,MAAIqE,KACAA,EAAK,UAAU,OAAO,qBAAqB,GAE/C5B,EAAY,EAAK,GACjBR,EAAA;AAAA,IACJ;AAEA,WACI,gBAAAsC,EAAC,SAAK,GAAGrC,GAAgB,WAAWkB,GAAS,OAAAK,GAAc,KAAKZ,GAC5D,UAAA;AAAA,MAAA,gBAAAjC,EAAC,OAAA,EAAI,WAAWyC,GAAoB,OAAOC,GAAkB;AAAA,MAC7D,gBAAAiB,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,QAAA,gBAAA3D;AAAA,UAAC4D;AAAA,UAAA;AAAA,YACG,kBAAkBb;AAAA,YAClB,mBAAAvD;AAAA,YACA,SAASsD;AAAA,YAER,UAAArD,EAAQF,CAAQ,IAAIA,IAAW,CAACA,CAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAE7C,gBAAAS,EAAC6D,IAAA,EAAiB,SAAO,IAAC,WAAU,iBAC/B,UAAA7C,IAAerB,GAAqB2C,GAAe9C,CAAiB,IAAIoD,EAAA,CAC7E;AAAA,MAAA,GACJ;AAAA,MACCnC,KAAaM,KACV,gBAAAf;AAAA,QAAC8D;AAAA,QAAA;AAAA,UACG,eAAeN;AAAA,UACf,UAAUP;AAAA,UACV,aAAaS;AAAA,UACb,WAAWI,EAAQ;AAAA,UACnB,UAAUA,EAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,GAER;AAAA,EAER,CAAC;AACL;AAEA,OAAO,OAAO3D,IAAWjB,CAAQ;"}

package/components/assetTree/Tree.d.ts

@@ -25,12 +25,20 @@ export type TreeGroup = {
      * The rioglyph icon name for a group.
      *
      * The prefix `rioglyph-` can be omitted.
+     *
+     * For custom icons and logos, provide an image URL with one of these extensions:
+     * `.png`, `.webp`, `.jpg`, `.jpeg`, `.svg`.
+     * In this case, an img tag is rendered instead of the rioglyph.
      */
     icon?: string;
     /**
      * The rioglyph icon name for a expanded group.
      *
      * The prefix `rioglyph-` can be omitted.
+     *
+     * For custom icons and logos, provide an image URL with one of these extensions:
+     * `.png`, `.webp`, `.jpg`, `.jpeg`, `.svg`.
+     * In this case, an img tag is rendered instead of the rioglyph.
      */
     expandedIcon?: string;
     /**
@@ -67,6 +75,10 @@ export type TreeItem = {
      * - If set to `null`, no icon will be rendered, even if `type` is defined.
      *
      * This allows full control over the icon behavior while maintaining backward compatibility with type-based icons.
+     *
+     * For custom icons and logos, provide an image URL with one of these extensions:
+     * `.png`, `.webp`, `.jpg`, `.jpeg`, `.svg`.
+     * In this case, an img tag is rendered instead of the rioglyph.
      */
     icon?: string | null;
     /**
@@ -197,6 +209,9 @@ export type TreeProps = {
      * @default false
      */
     hideTreeHead?: boolean;
+    /**
+     * Additional custom content that is rendered at the top of the tree component. This can be used for nav pills.
+     */
     treeHeaderContent?: React.ReactElement;
     /**
      * Defines the max-height of the scrollable list.