@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/applicationHeader/NavItems.js

@@ -101,7 +101,7 @@ export const NavItems = (props) => {
         }
     };
     const renderNavItem = (navItem, isItemOffscreen) => {
-        return (_jsx("li", Object.assign({ className: `submodule ${isItemOffscreen ? 'offscreen' : ''}`, "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key));
+        return (_jsx("li", { className: `submodule ${isItemOffscreen ? 'offscreen' : ''}`, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
     };
     const renderNavItems = () => {
         if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {
@@ -117,6 +117,6 @@ export const NavItems = (props) => {
     // the computation whether a navItem need to be shown under the collapsed dropdown or not
     // needs to be done after the component did mount to the DOM.
     const classes = classNames('SubmoduleNavigation', 'nav');
-    return (_jsx("ul", Object.assign({ className: classes, ref: navigationRef }, { children: renderNavItems() })));
+    return (_jsx("ul", { className: classes, ref: navigationRef, children: renderNavItems() }));
 };
 export default NavItems;

package/components/applicationLayout/ApplicationLayout.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable import/order */
 import { forwardRef, } from 'react';
@@ -7,14 +6,13 @@ import ApplicationLayoutHeader from './ApplicationLayoutHeader';
 import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
 import ApplicationLayoutBody from './ApplicationLayoutBody';
 import { initDocumentBootstrapping } from '../../utils/init/initDocumentBootstrapping';
-import '../../utils/init/initConfig';
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
 // noinspection JSIgnoredPromiseFromCall
 initDocumentBootstrapping();
 const ApplicationLayout = forwardRef((props, ref) => {
-    const { className, layoutRef, children } = props, remainingProps = __rest(props, ["className", "layoutRef", "children"]);
+    const { className, layoutRef, children, ...remainingProps } = props;
     const classes = classNames('ApplicationLayout', className);
-    return (_jsx("div", Object.assign({}, remainingProps, { ref: ref || layoutRef, className: classes }, { children: children })));
+    return (_jsx("div", { ...remainingProps, ref: ref || layoutRef, className: classes, children: children }));
 });
 ApplicationLayout.Header = ApplicationLayoutHeader;
 ApplicationLayout.Sidebar = ApplicationLayoutSidebar;

package/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -45,6 +45,6 @@ export type ApplicationLayoutBodyProps = {
     className?: string;
 };
 declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBody;

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 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';
@@ -7,11 +6,14 @@ 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 } = props, remainingProps = __rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "scrollResetTrigger", "children"]);
+    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);
-    useImperativeHandle(ref, () => layoutBodyRef, []);
+    // 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>
@@ -22,8 +24,7 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
         }
     }, [scrollResetTrigger]);
     useEffect(() => {
-        var _a;
-        if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {
+        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {
             layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
         }
     }, [bottomBarHeight]);
@@ -33,16 +34,15 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
         }
     });
     const handleToTop = () => {
-        var _a;
         if (!moduleContentRef.current) {
             return;
         }
         const scrollWrapper = moduleContentRef.current.container;
         const scrollingElement = scrollWrapper.firstElementChild;
-        const currentScroll = (_a = scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        const currentScroll = scrollingElement?.scrollTop ?? 0;
         if (currentScroll > 0) {
             window.requestAnimationFrame(handleToTop);
-            scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);
             scrollWrapper.classList.add('is-scrolling-to-top');
             setOffset(currentScroll);
         }
@@ -54,6 +54,6 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
     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", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [_jsxs("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, _jsx(SmoothScrollbars, Object.assign({ ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll }, { children: children }))] })), enableScrollToTop && (_jsx("span", Object.assign({ className: scrollToTopClasses }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: _jsx("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
+    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/components/applicationLayout/ApplicationLayoutBodyBanner.d.ts

@@ -21,6 +21,6 @@ export type ApplicationLayoutBodyBannerProps = {
     className?: string;
 };
 declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBodyBanner;

package/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -1,12 +1,11 @@
-import { __rest } from "tslib";
 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 } = props, remainingProps = __rest(props, ["textColor", "backgroundColor", "isSticky", "className", "children"]);
+    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", Object.assign({}, remainingProps, { ref: ref, className: bannerClasses }, { children: children })));
+    return (_jsx("div", { ...remainingProps, ref: ref, className: bannerClasses, children: children }));
 });
 export default ApplicationLayoutBodyBanner;

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 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 } = props, remainingProps = __rest(props, ["className", "buttonAlignment", "useBodyPaddings", "children"]);
+    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", Object.assign({ ref: ref }, remainingProps, { className: classes }, { children: children })));
+    return (_jsx("div", { ref: ref, ...remainingProps, className: classes, children: children }));
 });
 ApplicationLayoutBodyBottomBar.LEFT = 'left';
 ApplicationLayoutBodyBottomBar.RIGHT = 'right';

package/components/applicationLayout/ApplicationLayoutBodyNavigation.d.ts

@@ -6,6 +6,6 @@ export type ApplicationLayoutBodyNavigationProps = {
     className?: string;
 };
 declare const ApplicationLayoutBodyNavigation: React.ForwardRefExoticComponent<ApplicationLayoutBodyNavigationProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBodyNavigation;

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js

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

package/components/applicationLayout/ApplicationLayoutHeader.d.ts

@@ -6,6 +6,6 @@ export type ApplicationLayoutHeaderProps = {
     className?: string;
 };
 declare const ApplicationLayoutHeader: React.ForwardRefExoticComponent<ApplicationLayoutHeaderProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutHeader;

package/components/applicationLayout/ApplicationLayoutHeader.js

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

package/components/applicationLayout/ApplicationLayoutSidebar.d.ts

@@ -6,6 +6,6 @@ export type ApplicationLayoutSidebarProps = {
     className?: string;
 };
 declare const ApplicationLayoutSidebar: React.ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutSidebar;

package/components/applicationLayout/ApplicationLayoutSidebar.js

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

package/components/applicationLayout/SubNavigation.js

@@ -1,10 +1,9 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 const SubNavigation = forwardRef((props, ref) => {
-    const { className, navItems = [] } = props, remainingProps = __rest(props, ["className", "navItems"]);
+    const { className, navItems = [], ...remainingProps } = props;
     const navigationClasses = classNames('SubNavigation', 'width-100pct overflow-auto', className);
-    return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: _jsx("ul", Object.assign({ className: 'SubmoduleNavigation nav' }, { children: navItems.map(navItem => (_jsx("li", Object.assign({ className: 'submodule', "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key))) })) })));
+    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/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js

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

package/components/assetTree/AssetTree.d.ts

@@ -80,6 +80,6 @@ export type AssetTreeProps = {
     className?: string;
 };
 declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<AssetTreeProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>>;
 export default AssetTree;

package/components/assetTree/AssetTree.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useState, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
@@ -20,14 +19,14 @@ const TreeMode = {
     MODE_FLY: 'fly',
     MODE_FLUID: 'fluid',
 };
-const getSidebarBodyRef = (sidebarRef) => { var _a; return head((_a = sidebarRef === null || sidebarRef === void 0 ? void 0 : sidebarRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('AssetTreeBody')); };
+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", Object.assign({ className: offscreenClasses }, { children: child }));
+        return _jsx("div", { className: offscreenClasses, children: child });
     });
 };
 // Check if the child is a React element and if it has the type TreeCategory
@@ -35,7 +34,7 @@ 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 = [] } = props, remainingProps = __rest(props, ["className", "resizable", "width", "minWidth", "maxWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
+    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);
@@ -101,7 +100,7 @@ const AssetTree = memo(forwardRef((props, ref) => {
         setIsResize(false);
         onResizeEnd();
     };
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: mergedRefs }, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'AssetTreeContent' }, { children: [_jsx(TreeSidebar, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: isArray(children) ? children : [children] })), _jsx(SmoothScrollbars, Object.assign({ 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 }))] })));
+    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;

package/components/assetTree/Tree.d.ts

@@ -45,12 +45,12 @@ export type TreeItem = {
      */
     info?: string | React.ReactNode;
     /**
-     * The type of an item which is also the name of the respective rioplyph icon without the prefix
+     * The type of an item which is also the name of the respective rioglyph icon without the prefix
      * `rioglyph-`.
      */
     type: string;
     /**
-     * The sub type of an item which is also the name of the respective rioplyph icon without the prefix.
+     * The sub type of an item which is also the name of the respective rioglyph icon without the prefix.
      * This could be used to show a secondary paired icon like for fuel type.
      */
     subType?: string;

package/components/assetTree/Tree.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-use-before-define */
 import React, { useEffect, useReducer, useRef, useState } from 'react';
@@ -38,7 +37,7 @@ const filterProps = omit([
 ]);
 const customCompare = (prevProps, nextProps) => isEqual(filterProps(prevProps), filterProps(nextProps));
 const Tree = React.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "treeHeaderContent", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "treeOptionsTooltip", "disableAnimation"]);
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, ...remainingProps } = props;
     const [state, dispatch] = useReducer(treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -118,7 +117,7 @@ const Tree = React.memo((props) => {
     };
     const handleToggleNode = (nodeId) => {
         const nodeContainer = getNodeContainerDomElementById(nodeId);
-        if (!(internalExpandedGroups === null || internalExpandedGroups === void 0 ? void 0 : internalExpandedGroups.current) || !nodeContainer) {
+        if (!internalExpandedGroups?.current || !nodeContainer) {
             return;
         }
         const openGroups = internalExpandedGroups.current;
@@ -136,8 +135,7 @@ const Tree = React.memo((props) => {
         onExpandGroupsChange(newExpandedNodes);
     };
     const getNodeContainerDomElementById = (nodeId) => {
-        var _a;
-        return (_a = treeRef === null || treeRef === void 0 ? void 0 : treeRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
+        return treeRef?.current?.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
     };
     const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
     const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
@@ -167,7 +165,7 @@ const Tree = React.memo((props) => {
             : excludeFromList(selectedGroups, groupId);
         // deselect all items of a node since they will be selected inherently via the group itself
         const itemsInGroup = find((entry) => entry.id === groupId)(state.groupedItems);
-        const itemIdsOfGroup = map((item) => item.id)(itemsInGroup === null || itemsInGroup === void 0 ? void 0 : itemsInGroup.items);
+        const itemIdsOfGroup = map((item) => item.id)(itemsInGroup?.items);
         const updatedSelectedItems = without(itemIdsOfGroup, selectedItems);
         // check if all groups are selected to change the state of TreeSelectAll
         const groupAmount = groups.length;
@@ -226,14 +224,13 @@ const Tree = React.memo((props) => {
             return _jsx(TreeNothingFound, {});
         }
         const result = map((group) => {
-            var _a, _b;
             const groupId = group.id;
             const groupItems = group.items;
-            const isOpen = (_b = (_a = internalExpandedGroups.current) === null || _a === void 0 ? void 0 : _a.includes(groupId)) !== null && _b !== void 0 ? _b : false;
+            const isOpen = internalExpandedGroups.current?.includes(groupId) ?? false;
             const numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
             const isGroupSelected = selectedGroups.includes(groupId);
             const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return (_jsxs(TreeNodeContainer, Object.assign({ groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation }, { children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), _jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }), groupId));
+            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), _jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }, groupId));
         })(groupedItems);
         return result;
     };
@@ -241,7 +238,7 @@ const Tree = React.memo((props) => {
         const { flatItems } = state;
         const hasLeafs = isEmpty(flatItems);
         const getLeafs = () => (_jsx(TreeLeafList, { leafList: flatItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }));
-        return (_jsx(TreeNodeContainer, Object.assign({ disableAnimation: disableAnimation, isOpen: true }, { children: hasLeafs ? _jsx(TreeNothingFound, {}) : getLeafs() })));
+        return (_jsx(TreeNodeContainer, { disableAnimation: disableAnimation, isOpen: true, children: hasLeafs ? _jsx(TreeNothingFound, {}) : getLeafs() }));
     };
     const hasExternalGroups = notEmpty(groups);
     const hasInternalSearchValue = () => notEmpty(state.searchValue);
@@ -273,8 +270,8 @@ const Tree = React.memo((props) => {
     const showSearch = !hideSearch;
     const showSummary = !hideSummary;
     const hasCustomSearch = !isNil(search);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [_jsxs("div", Object.assign({ className: 'TreeHeader' }, { children: [treeHeaderContent, showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && (_jsx("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), _jsx("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
+    return (_jsxs("div", { ...remainingProps, className: treeClassNames, ref: treeRef, children: [_jsxs("div", { className: 'TreeHeader', children: [treeHeaderContent, showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", { className: treeHeadClasses, children: [showSelectAll && (_jsx("div", { className: 'border border-right-only hidden-empty padding-right-10 margin-right-2', children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) })), _jsx("div", { className: 'display-flex justify-content-between align-items-start width-100pct', children: showSummary
                                     ? summary || (_jsx(TreeSummary, { children: map((typeCounter) => (_jsx(TypeCounter, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
-                                    : null })), _jsx(TreeOptions, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] })))] })), _jsx(TreeRoot, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
+                                    : null }), _jsx(TreeOptions, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] }))] }), _jsx(TreeRoot, { maxHeight: scrollHeight, disableAnimation: disableAnimation, children: content })] }));
 }, customCompare);
 export default Tree;

package/components/assetTree/TreeLeaf.js

@@ -8,6 +8,6 @@ import RadioButton from '../radiobutton/RadioButton';
 const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", Object.assign({ className: 'TreeLabel TreeLabelName', onClick: onActiveItem }, { children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (item.name) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] }))] })));
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", { className: 'rioglyph-icon-pair', children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] })), _jsxs("span", { className: 'TreeLabelNameText', children: [_jsx("span", { className: 'TreeLabelNameTextHeadline', children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'text-light margin-right-3', children: item.name.firstName }), _jsx("span", { children: item.name.lastName })] })) : (item.name) }), item.info && _jsx("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
 });
 export default TreeLeaf;

package/components/assetTree/TreeLeafList.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import TreeLeaf from './TreeLeaf';
 import { excludeFromList } from './treeUtils';
 const TreeLeafList = (props) => {

package/components/assetTree/TreeNode.js

@@ -6,6 +6,6 @@ const TreeNode = React.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", Object.assign({ className: 'TreeLabel TreeLabelName' }, { children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", Object.assign({ className: 'TreeLabelNameText' }, { children: _jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), _jsx("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length })), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", { className: 'TreeLabelNameText', children: _jsx("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), _jsx("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
 });
 export default TreeNode;

package/components/assetTree/TreeNodeContainer.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 const TreeNodeContainer = (props) => {
     const { isOpen, groupId, disableAnimation, children } = props;
     const treeNodeContainerClasses = classNames('TreeNodeContainer', 'user-select-none overflow-hidden', isOpen && 'open');
-    return (_jsx("div", Object.assign({ className: treeNodeContainerClasses, "data-id": groupId }, { children: children })));
+    return (_jsx("div", { className: treeNodeContainerClasses, "data-id": groupId, children: children }));
 };
 export default TreeNodeContainer;

package/components/assetTree/TreeNothingFound.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 const TreeNothingFound = React.memo((props) => {
-    return (_jsx("div", Object.assign({ className: `TreeTreeNothingFound display-flex justify-content-center text-size-20
-                padding-top-25 margin-top-25 margin-bottom-25` }, { children: _jsx("span", { className: 'rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light' }) })));
+    return (_jsx("div", { className: `TreeTreeNothingFound display-flex justify-content-center text-size-20
+                padding-top-25 margin-top-25 margin-bottom-25`, children: _jsx("span", { className: 'rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light' }) }));
 });
 export default TreeNothingFound;

package/components/assetTree/TreeOption.js

@@ -1,13 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import Switch from '../switch/Switch';
 const TreeOption = (props) => {
-    const { isChecked = false, className, label, onChange = noop } = props, remainingProps = __rest(props, ["isChecked", "className", "label", "onChange"]);
+    const { isChecked = false, className, label, onChange = noop, ...remainingProps } = props;
     const optionClasses = classNames('TreeOption', 'display-flex', 'justify-content-start', 'align-items-center', 'gap-10', 'cursor-pointer', className);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: optionClasses, onClick: onChange }, { children: [_jsx("span", Object.assign({ className: 'flex-1-1' }, { children: label })), _jsx("span", Object.assign({ className: 'pointer-events-none scale-80' }, { children: _jsx(Switch, { keyName: 'TreeOption-switch', checked: isChecked }) }))] })));
+    return (_jsxs("div", { ...remainingProps, className: optionClasses, onClick: onChange, children: [_jsx("span", { className: 'flex-1-1', children: label }), _jsx("span", { className: 'pointer-events-none scale-80', children: _jsx(Switch, { keyName: 'TreeOption-switch', checked: isChecked }) })] }));
 };
 export default TreeOption;

package/components/assetTree/TreeOptions.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import ButtonDropdown from '../dropdown/ButtonDropdown';
@@ -11,10 +9,10 @@ const TreeOptions = (props) => {
         return null;
     }
     const dropdownClasses = classNames('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
-    const customDropdown = _jsx("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
+    const customDropdown = _jsx("div", { className: dropdownClasses, children: treeOptions });
     const dropdown = (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
     if (treeOptionsTooltip) {
-        return (_jsx(SimpleTooltip, Object.assign({ content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
+        return (_jsx(SimpleTooltip, { content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
                 modifiers: [
                     {
                         name: 'offset',
@@ -27,7 +25,7 @@ const TreeOptions = (props) => {
                         options: {},
                     },
                 ],
-            } }, { children: _jsx("div", { children: dropdown }) })));
+            }, children: _jsx("div", { children: dropdown }) }));
     }
     return dropdown;
 };

package/components/assetTree/TreeRoot.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 const TreeRoot = ({ maxHeight, disableAnimation, children }) => {
     const treeRootClasses = classNames('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');
     const [parent, enableAnimations] = useAutoAnimate();
     enableAnimations(!disableAnimation);
-    return (_jsx("div", Object.assign({ ref: parent, className: treeRootClasses, style: { maxHeight } }, { children: children })));
+    return (_jsx("div", { ref: parent, className: treeRootClasses, style: { maxHeight }, children: children }));
 };
 export default TreeRoot;

package/components/assetTree/TreeSearch.js

@@ -7,6 +7,6 @@ import ClearableInput from '../clearableInput/ClearableInput';
 const TreeSearch = React.memo((props) => {
     const { value, className, placeholder, onChange = noop } = props;
     const classes = classNames('TreeSearch', className);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: 'input-group flex-1-0' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), _jsx(ClearableInput, { value: value, onChange: onChange, placeholder: placeholder })] })) })));
+    return (_jsx("div", { className: classes, children: _jsxs("div", { className: 'input-group flex-1-0', children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) }), _jsx(ClearableInput, { value: value, onChange: onChange, placeholder: placeholder })] }) }));
 });
 export default TreeSearch;

package/components/assetTree/TreeSelectAll.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import noop from 'lodash/fp/noop';
 import Checkbox from '../checkbox/Checkbox';
 const TreeSelectAll = (props) => {
     const { isDisabled, isChecked = false, isEnabled = true, isIndeterminate = false, hasSearchResults = false, // needed?
     onSelect = noop, } = props;
     const handleSelectAll = (event) => onSelect(event.target.checked, isIndeterminate);
-    return isEnabled ? (_jsx("div", Object.assign({ className: 'TreeSelectAll display-flex align-items-center' }, { children: _jsx(Checkbox, { checked: isChecked, onClick: handleSelectAll, disabled: isDisabled, indeterminate: isIndeterminate, className: 'margin-top--1' }) }))) : null;
+    return isEnabled ? (_jsx("div", { className: 'TreeSelectAll display-flex align-items-center', children: _jsx(Checkbox, { checked: isChecked, onClick: handleSelectAll, disabled: isDisabled, indeterminate: isIndeterminate, className: 'margin-top--1' }) })) : null;
 };
 export default TreeSelectAll;

package/components/assetTree/TreeSidebar.js

@@ -1,12 +1,11 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import noop from 'lodash/fp/noop';
 import classNames from 'classnames';
 import TreeSidebarCategories from './TreeSidebarCategories';
 const TreeSidebar = React.memo((props) => {
-    const { className, onClick = noop } = props, remainingProps = __rest(props, ["className", "onClick"]);
+    const { className, onClick = noop, ...remainingProps } = props;
     const classes = classNames('TreeSidebar', className);
-    return (_jsxs("div", Object.assign({ className: classes }, { children: [_jsx("ul", Object.assign({ className: 'TreeSidebarNavigation', onClick: onClick }, { children: _jsx(TreeSidebarCategories, Object.assign({}, remainingProps)) })), _jsx("div", Object.assign({ className: 'TreeSidebarToggle', onClick: onClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }))] })));
+    return (_jsxs("div", { className: classes, children: [_jsx("ul", { className: 'TreeSidebarNavigation', onClick: onClick, children: _jsx(TreeSidebarCategories, { ...remainingProps }) }), _jsx("div", { className: 'TreeSidebarToggle', onClick: onClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })] }));
 });
 export default TreeSidebar;

package/components/assetTree/TreeSidebarCategories.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import OverlayTrigger from '../overlay/OverlayTrigger';
@@ -22,10 +20,10 @@ const TreeSidebarCategories = (props) => {
                 event.stopPropagation();
                 onSelectCategory(id);
             };
-            const category = (_jsx("li", Object.assign({ onClick: handleSelectCategory, className: statusClassName }, { children: _jsx("div", Object.assign({ className: 'selection-bubble' }, { children: _jsx("span", { className: `rioglyph ${icon}` }) })) }), id));
+            const category = (_jsx("li", { onClick: handleSelectCategory, className: statusClassName, children: _jsx("div", { className: 'selection-bubble', children: _jsx("span", { className: `rioglyph ${icon}` }) }) }, id));
             if (label) {
                 const tooltip = _jsx("span", { children: label });
-                return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.RIGHT, delay: { show: TOOLTIP_DELAY, hide: 0 }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: category }), `category-tooltip-${id}`));
+                return (_jsx(OverlayTrigger, { placement: Tooltip.RIGHT, delay: { show: TOOLTIP_DELAY, hide: 0 }, overlay: _jsx(Tooltip, { id: 'tooltip', width: 'auto', children: tooltip }), children: category }, `category-tooltip-${id}`));
             }
             return category;
         }) }));