@rio-cloud/rio-uikit 0.16.4-beta.21 → 0.16.4-beta.22

package/components/assetTree/TreeNode.js

@@ -1,27 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Checkbox from '../checkbox/Checkbox';
-const TreeNode = React.memo(props => {
-    const { node, hasMultiselect, isSelected, isIndeterminate, onToggleNode, onSelect } = props;
+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' }, { children: [_jsxs("span", Object.assign({ className: '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'}` })] }))] })));
 });
 TreeNode.displayName = 'TreeNode';
-TreeNode.defaultProps = {
-    isSelected: false,
-    isIndeterminate: false,
-    hasMultiselect: true,
-};
-TreeNode.propTypes = {
-    node: PropTypes.object,
-    hasMultiselect: PropTypes.bool,
-    isSelected: PropTypes.bool,
-    isIndeterminate: PropTypes.bool,
-    onToggleNode: PropTypes.func,
-    onSelect: PropTypes.func,
-    className: PropTypes.string,
-};
 export default TreeNode;

package/components/assetTree/TreeNodeContainer.d.ts

@@ -1,13 +1,11 @@
+import { type PropsWithChildren } from 'react';
+export type TreeNodeContainerProps = {
+    isOpen: boolean;
+    groupId?: string;
+    disableAnimation: boolean;
+};
+declare const TreeNodeContainer: {
+    (props: PropsWithChildren<TreeNodeContainerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TreeNodeContainer;
-declare function TreeNodeContainer({ isOpen, groupId, children }: {
-    isOpen: any;
-    groupId: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace TreeNodeContainer {
-    const displayName: string;
-    namespace propTypes {
-        const maxHeight: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

package/components/assetTree/TreeNodeContainer.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
-const TreeNodeContainer = ({ isOpen, groupId, children }) => {
-    const treeNodeContainerClasses = classNames('TreeNodeContainer', 'user-select-none', isOpen && 'open');
-    return (_jsx("div", Object.assign({ className: treeNodeContainerClasses, "data-id": groupId }, { children: children })));
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+const TreeNodeContainer = (props) => {
+    const { isOpen, groupId, disableAnimation, children } = props;
+    const treeNodeContainerClasses = classNames('TreeNodeContainer', 'user-select-none overflow-hidden', isOpen && 'open');
+    const [parent, enableAnimations] = useAutoAnimate();
+    enableAnimations(!disableAnimation);
+    return (_jsx("div", Object.assign({ ref: parent, className: treeNodeContainerClasses, "data-id": groupId }, { children: children })));
 };
 TreeNodeContainer.displayName = 'TreeNodeContainer';
-TreeNodeContainer.propTypes = {
-    maxHeight: PropTypes.number,
-};
 export default TreeNodeContainer;

package/components/assetTree/TreeNothingFound.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
+type TreeNothingFoundProps = {};
+declare const TreeNothingFound: React.MemoExoticComponent<(props: TreeNothingFoundProps) => import("react/jsx-runtime").JSX.Element>;
 export default TreeNothingFound;
-declare const TreeNothingFound: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-import React from "react";

package/components/assetTree/TreeNothingFound.js

@@ -1,14 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import PropTypes from 'prop-types';
-const TreeNothingFound = React.memo(() => {
+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' }) })));
 });
 TreeNothingFound.displayName = 'TreeNothingFound';
-TreeNothingFound.defaultProps = {};
-TreeNothingFound.propTypes = {
-    value: PropTypes.string,
-    className: PropTypes.string,
-};
 export default TreeNothingFound;

package/components/assetTree/TreeOption.d.ts

@@ -1,18 +1,28 @@
+import React from 'react';
+export type TreeOptionProps = {
+    /**
+     * Defines whether the option is set.
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Callback triggered when option is selected.
+     * @param event
+     * @returns
+     */
+    onChange?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The label for the option.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const TreeOption: {
+    (props: TreeOptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TreeOption;
-declare function TreeOption(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TreeOption {
-    const displayName: string;
-    namespace defaultProps {
-        const isChecked: boolean;
-        function onChange(): void;
-    }
-    namespace propTypes {
-        const isChecked_1: PropTypes.Requireable<boolean>;
-        export { isChecked_1 as isChecked };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        export const label: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/components/assetTree/TreeOption.js

@@ -1,23 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @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, className, label, onChange } = props, remainingProps = __rest(props, ["isChecked", "className", "label", "onChange"]);
+const TreeOption = (props) => {
+    const { isChecked = false, className, label, onChange = noop } = props, remainingProps = __rest(props, ["isChecked", "className", "label", "onChange"]);
     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 }) }))] })));
 };
 TreeOption.displayName = 'TreeOption';
-TreeOption.defaultProps = {
-    isChecked: false,
-    onChange: () => { },
-};
-TreeOption.propTypes = {
-    isChecked: PropTypes.bool,
-    onChange: PropTypes.func,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    className: PropTypes.string,
-};
 export default TreeOption;

package/components/assetTree/TreeOptions.d.ts

@@ -1,14 +1,10 @@
+import React from 'react';
+export type TreeOptionsProps = {
+    treeOptions?: React.ReactNode[];
+    className?: string;
+};
+declare const TreeOptions: {
+    (props: TreeOptionsProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 export default TreeOptions;
-declare function TreeOptions(props: any): import("react/jsx-runtime").JSX.Element | null;
-declare namespace TreeOptions {
-    const displayName: string;
-    namespace defaultProps {
-        const treeOptions: never[];
-    }
-    namespace propTypes {
-        const treeOptions_1: PropTypes.Requireable<PropTypes.ReactNodeLike[]>;
-        export { treeOptions_1 as treeOptions };
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/components/assetTree/TreeOptions.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import ButtonDropdown from '../dropdown/ButtonDropdown';
-const TreeOptions = props => {
-    const { treeOptions, className } = props;
+const TreeOptions = (props) => {
+    const { treeOptions = [], className } = props;
     if (isEmpty(treeOptions)) {
         return null;
     }
@@ -14,11 +14,4 @@ const TreeOptions = props => {
     return (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'muted', customDropdown: customDropdown, className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
 };
 TreeOptions.displayName = 'TreeOptions';
-TreeOptions.defaultProps = {
-    treeOptions: [],
-};
-TreeOptions.propTypes = {
-    treeOptions: PropTypes.arrayOf(PropTypes.node),
-    className: PropTypes.string,
-};
 export default TreeOptions;

package/components/assetTree/TreeRoot.d.ts

@@ -1,12 +1,10 @@
+import { PropsWithChildren } from 'react';
+export type TreeRootProps = {
+    disableAnimation: boolean;
+    maxHeight?: number;
+};
+declare const TreeRoot: {
+    ({ maxHeight, disableAnimation, children }: PropsWithChildren<TreeRootProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TreeRoot;
-declare function TreeRoot({ maxHeight, children }: {
-    maxHeight: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace TreeRoot {
-    const displayName: string;
-    namespace propTypes {
-        const maxHeight: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

package/components/assetTree/TreeRoot.js

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

package/components/assetTree/TreeSearch.d.ts

@@ -1,3 +1,24 @@
+import React from 'react';
+export type TreeSearchProps = {
+    /**
+     * The search value to be shown and used for the search.
+     */
+    value?: string;
+    /**
+     * Callback for when the search value changes.
+     * @param newValue
+     * @param event
+     * @returns
+     */
+    onChange?: (newValue: string, event: React.ChangeEvent | React.MouseEvent) => void;
+    /**
+     * The placeholder text used for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const TreeSearch: React.MemoExoticComponent<(props: TreeSearchProps) => import("react/jsx-runtime").JSX.Element>;
 export default TreeSearch;
-declare const TreeSearch: React.NamedExoticComponent<object>;
-import React from "react";

package/components/assetTree/TreeSearch.js

@@ -1,21 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
 import ClearableInput from '../clearableInput/ClearableInput';
-const TreeSearch = React.memo(props => {
-    const { value, className, placeholder, onChange } = props;
+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 })] })) })));
 });
 TreeSearch.displayName = 'TreeSearch';
-TreeSearch.defaultProps = {
-    onChange: () => { },
-};
-TreeSearch.propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    placeholder: PropTypes.string,
-    className: PropTypes.string,
-};
 export default TreeSearch;

package/components/assetTree/TreeSelectAll.d.ts

@@ -1,27 +1,15 @@
+export type TreeSelectAllProps = {
+    value?: string;
+    onSelect?: Function;
+    isChecked?: boolean;
+    isEnabled?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+    hasSearchResults?: boolean;
+    className?: string;
+};
+declare const TreeSelectAll: {
+    (props: TreeSelectAllProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 export default TreeSelectAll;
-declare function TreeSelectAll(props: any): import("react/jsx-runtime").JSX.Element | null;
-declare namespace TreeSelectAll {
-    const displayName: string;
-    namespace defaultProps {
-        const isChecked: boolean;
-        const isEnabled: boolean;
-        const isIndeterminate: boolean;
-        const hasSearchResults: boolean;
-        function onChange(): void;
-    }
-    namespace propTypes {
-        export const value: PropTypes.Requireable<string>;
-        export const onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        const isChecked_1: PropTypes.Requireable<boolean>;
-        export { isChecked_1 as isChecked };
-        const isEnabled_1: PropTypes.Requireable<boolean>;
-        export { isEnabled_1 as isEnabled };
-        export const isDisabled: PropTypes.Requireable<boolean>;
-        const isIndeterminate_1: PropTypes.Requireable<boolean>;
-        export { isIndeterminate_1 as isIndeterminate };
-        const hasSearchResults_1: PropTypes.Requireable<boolean>;
-        export { hasSearchResults_1 as hasSearchResults };
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/components/assetTree/TreeSelectAll.js

@@ -1,28 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import noop from 'lodash/fp/noop';
 import Checkbox from '../checkbox/Checkbox';
-const TreeSelectAll = props => {
-    const { isDisabled, isChecked, isEnabled, isIndeterminate, onSelect } = props;
-    const handleSelectAll = event => onSelect(event.target.checked, isIndeterminate);
+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;
 };
 TreeSelectAll.displayName = 'TreeSelectAll';
-TreeSelectAll.defaultProps = {
-    isChecked: false,
-    isEnabled: true,
-    isIndeterminate: false,
-    hasSearchResults: false,
-    onChange: () => { },
-};
-TreeSelectAll.propTypes = {
-    value: PropTypes.string,
-    onSelect: PropTypes.func,
-    isChecked: PropTypes.bool,
-    isEnabled: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isIndeterminate: PropTypes.bool,
-    hasSearchResults: PropTypes.bool,
-    className: PropTypes.string,
-};
 export default TreeSelectAll;

package/components/assetTree/TreeSidebar.d.ts

@@ -1,3 +1,11 @@
+import React from 'react';
+import type { TreeCategoryNode } from './TreeCategory';
+export type TreeSidebarProps = {
+    currentCategoryId?: string;
+    onSelectCategory?: (selectedCategory: string) => void;
+    onClick?: VoidFunction;
+    className?: string;
+    children?: TreeCategoryNode[];
+};
+declare const TreeSidebar: React.MemoExoticComponent<(props: TreeSidebarProps) => import("react/jsx-runtime").JSX.Element>;
 export default TreeSidebar;
-declare const TreeSidebar: React.NamedExoticComponent<object>;
-import React from "react";

package/components/assetTree/TreeSidebar.js

@@ -1,44 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import PropTypes from 'prop-types';
+import noop from 'lodash/fp/noop';
 import classNames from 'classnames';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-import Tooltip from '../tooltip/Tooltip';
-const ACTIVE_CLASS_NAME = 'active';
-const SELECTED_CLASS_NAME = 'selected';
-const LABEL_TOOLTIP_DELAY = 1500;
-const TreeSidebarCategories = ({ children, currentCategoryId, onSelectCategory }) => {
-    return children.map(child => {
-        const id = child.props.id;
-        const icon = child.props.icon || '';
-        const label = child.props.label;
-        const statusClassName = classNames(currentCategoryId === id ? ACTIVE_CLASS_NAME : '', child.props.hasSelection && SELECTED_CLASS_NAME);
-        const handleSelectCategory = event => {
-            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));
-        if (label) {
-            const tooltip = _jsx("span", { children: label });
-            return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.RIGHT, delayShow: LABEL_TOOLTIP_DELAY, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: category }), `category-tooltip-${id}`));
-        }
-        return category;
-    });
-};
-const TreeSidebar = React.memo(props => {
-    const { className, onClick } = props, remainingProps = __rest(props, ["className", "onClick"]);
+import TreeSidebarCategories from './TreeSidebarCategories';
+const TreeSidebar = React.memo((props) => {
+    const { className, onClick = noop } = props, remainingProps = __rest(props, ["className", "onClick"]);
     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' }) }))] })));
 });
 TreeSidebar.displayName = 'TreeSidebar';
-TreeSidebar.defaultProps = {
-    onClick: () => { },
-};
-TreeSidebar.propTypes = {
-    currentCategoryId: PropTypes.string,
-    children: PropTypes.arrayOf(PropTypes.node),
-    onClick: PropTypes.func.isRequired,
-    className: PropTypes.string,
-};
 export default TreeSidebar;

package/components/assetTree/TreeSidebarCategories.d.ts

@@ -0,0 +1,11 @@
+import type { TreeCategoryNode } from './TreeCategory';
+export type TreeSidebarCategoriesProps = {
+    currentCategoryId?: string;
+    onSelectCategory?: (selectedCategory: string) => void;
+    children?: TreeCategoryNode[];
+};
+declare const TreeSidebarCategories: {
+    (props: TreeSidebarCategoriesProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default TreeSidebarCategories;

package/components/assetTree/TreeSidebarCategories.js

@@ -0,0 +1,34 @@
+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';
+import Tooltip from '../tooltip/Tooltip';
+const ACTIVE_CLASS_NAME = 'active';
+const SELECTED_CLASS_NAME = 'selected';
+const TOOLTIP_DELAY = 1500;
+const TreeSidebarCategories = (props) => {
+    const { children, currentCategoryId, onSelectCategory = noop } = props;
+    if (!children) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: children.map(child => {
+            const id = child.props.id;
+            const icon = child.props.icon || '';
+            const label = child.props.label;
+            const statusClassName = classNames(currentCategoryId === id ? ACTIVE_CLASS_NAME : '', child.props.hasSelection && SELECTED_CLASS_NAME);
+            const handleSelectCategory = (event) => {
+                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));
+            if (label) {
+                const tooltip = _jsx("span", { children: label });
+                return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.RIGHT, delay: TOOLTIP_DELAY, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: category }), `category-tooltip-${id}`));
+            }
+            return category;
+        }) }));
+};
+TreeSidebarCategories.displayName = 'TreeSidebarCategories';
+export default TreeSidebarCategories;

package/components/assetTree/TreeSummary.d.ts

@@ -1,3 +1,45 @@
+import React, { type PropsWithChildren } from 'react';
+export type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver';
+export type TreeSummaryCounts = {
+    /**
+     * The amount of trucks
+     */
+    truck?: number;
+    /**
+     * The amount of trailers
+     */
+    trailer?: number;
+    /**
+     * The amount of buses
+     */
+    bus?: number;
+    /**
+     * The amount of vans
+     */
+    van?: number;
+    /**
+     * The amount of drivers
+     */
+    driver?: number;
+};
+export type DefaultAssetCountsProps = {
+    assetCounts: TreeSummaryCounts;
+};
+export type TreeSummaryProps = {
+    /**
+     * The object containing various asset type counter.
+     */
+    assetCounts?: TreeSummaryCounts;
+    /**
+     * The number of grid columns used for the built-in `TreeSummaryRow`.
+     *
+     * @default 4
+     */
+    gridCols?: number;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const TreeSummary: React.MemoExoticComponent<(props: PropsWithChildren<TreeSummaryProps>) => import("react/jsx-runtime").JSX.Element>;
 export default TreeSummary;
-declare const TreeSummary: React.NamedExoticComponent<object>;
-import React from "react";

package/components/assetTree/TreeSummary.js

@@ -1,30 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TypeCounter from './TypeCounter';
+import TreeSummaryRow from './TreeSummaryRow';
 const DefaultAssetCounts = ({ assetCounts }) => {
     const { truck, bus, van, trailer, driver } = assetCounts;
     return (_jsxs(_Fragment, { children: [_jsx(TypeCounter, { hideOnZero: true, icon: 'truck-baseline', value: truck }), _jsx(TypeCounter, { hideOnZero: true, icon: 'trailer-baseline', value: trailer }), _jsx(TypeCounter, { hideOnZero: true, icon: 'bus-baseline', value: bus }), _jsx(TypeCounter, { hideOnZero: true, icon: 'van-baseline', value: van }), _jsx(TypeCounter, { hideOnZero: true, icon: 'driver', value: driver })] }));
 };
-const TreeSummary = React.memo(props => {
-    const { className, assetCounts, children } = props;
-    const classes = classNames('TreeSummary', 'display-flex', 'flex-wrap', 'align-items-center', 'gap-10', className);
-    return _jsx("div", Object.assign({ className: classes }, { children: children || _jsx(DefaultAssetCounts, { assetCounts: assetCounts }) }));
+const TreeSummary = React.memo((props) => {
+    const { className = '', assetCounts = {}, gridCols, children } = props;
+    const classes = classNames('TreeSummary', 'display-flex flex-wrap', 'align-items-center', 'gap-10', 'padding-left-3', className);
+    return (_jsx("div", Object.assign({ className: classes }, { children: children || (_jsx(TreeSummaryRow, Object.assign({ gridCols: gridCols }, { children: _jsx(DefaultAssetCounts, { assetCounts: assetCounts }) }))) })));
 });
 TreeSummary.displayName = 'TreeSummary';
-TreeSummary.defaultProps = {
-    assetCounts: {},
-    className: '',
-};
-TreeSummary.propTypes = {
-    assetCounts: PropTypes.shape({
-        truck: PropTypes.number,
-        trailer: PropTypes.number,
-        bus: PropTypes.number,
-        van: PropTypes.number,
-        driver: PropTypes.number,
-    }),
-    className: PropTypes.string,
-};
 export default TreeSummary;

package/components/assetTree/TreeSummaryRow.d.ts

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+export type TreeSummaryRowProps = {
+    /**
+     * Defined the number of grid columns for a single row. Note, when the
+     * amount of children exceed the columns it will wrap around to a new line.
+     *
+     * @default 4
+     */
+    gridCols?: number;
+};
+export declare const TreeSummaryRow: {
+    ({ gridCols, children }: PropsWithChildren<TreeSummaryRowProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TreeSummaryRow;

package/components/assetTree/TreeSummaryRow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+export const TreeSummaryRow = ({ gridCols = 4, children }) => (_jsx("div", Object.assign({ className: `TreeSummaryRow display-grid grid-cols-${gridCols} gap-10` }, { children: children })));
+TreeSummaryRow.displayName = 'TreeSummaryRow';
+export default TreeSummaryRow;