@rio-cloud/rio-uikit 1.10.1 → 1.12.0

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { GroupedItem } from './Tree';
+export type TreeNodeProps = {
+    node: GroupedItem;
+    hasMultiselect?: boolean;
+    isSelected?: boolean;
+    isOpen?: boolean;
+    isIndeterminate?: boolean;
+    onToggleNode: (nodeId: string) => void;
+    onSelect: (node: GroupedItem, isIndeterminate: boolean) => void;
+    className?: string;
+};
+declare const TreeNode: React.MemoExoticComponent<(props: TreeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default TreeNode;

package/src/components/assetTree/TreeNode.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import classNames from 'classnames';
+import Checkbox from '../checkbox/Checkbox';
+import { withRioglyphPrefix } from './treeUtils';
+const TreeNode = React.memo((props) => {
+    const { node, hasMultiselect = false, isSelected = false, isOpen = false, isIndeterminate = false, onToggleNode, onSelect, } = props;
+    const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
+    const hasChildren = !!node.items.length;
+    const expandedIcon = node.expandedIcon || node.icon;
+    const iconName = isOpen ? withRioglyphPrefix(expandedIcon) : withRioglyphPrefix(node.icon);
+    const handleNodeSelection = () => {
+        onSelect(node, isIndeterminate);
+    };
+    const handleContainerClick = (event) => {
+        // Ignore clicks on checkboxes and don't expand or collapse on checkbox clicks
+        const isCheckbox = event.target.closest('.TreeCheckbox');
+        if (isCheckbox) {
+            return;
+        }
+        if (hasChildren) {
+            onToggleNode(node.id);
+        }
+    };
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: handleContainerClick, children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: handleNodeSelection })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), _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/src/components/assetTree/TreeNodeContainer.d.ts

@@ -0,0 +1,8 @@
+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;
+export default TreeNodeContainer;

package/src/components/assetTree/TreeNodeContainer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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", { className: treeNodeContainerClasses, "data-id": groupId, children: children }));
+};
+export default TreeNodeContainer;

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

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

package/src/components/assetTree/TreeNothingFound.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const TreeNothingFound = React.memo((props) => {
+    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/src/components/assetTree/TreeOption.d.ts

@@ -0,0 +1,25 @@
+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;
+export default TreeOption;

package/src/components/assetTree/TreeOption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, ...remainingProps } = props;
+    const optionClasses = classNames('TreeOption', 'display-flex', 'justify-content-start', 'align-items-center', 'gap-10', 'cursor-pointer', className);
+    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/src/components/assetTree/TreeOptions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type TreeOptionsProps = {
+    treeOptions?: React.ReactNode[];
+    treeOptionsTooltip?: React.ReactNode;
+    className?: string;
+};
+declare const TreeOptions: (props: TreeOptionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TreeOptions;

package/src/components/assetTree/TreeOptions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { isEmpty } from 'lodash';
+import ButtonDropdown from '../dropdown/ButtonDropdown';
+import SimpleTooltip from '../tooltip/SimpleTooltip';
+const TreeOptions = (props) => {
+    const { treeOptions = [], treeOptionsTooltip, className } = props;
+    if (isEmpty(treeOptions)) {
+        return null;
+    }
+    const dropdownClasses = classNames('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
+    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, { content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [10, 5],
+                        },
+                    },
+                    {
+                        name: 'arrow',
+                        options: {},
+                    },
+                ],
+            }, children: _jsx("div", { children: dropdown }) }));
+    }
+    return dropdown;
+};
+export default TreeOptions;

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

@@ -0,0 +1,7 @@
+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;
+export default TreeRoot;

package/src/components/assetTree/TreeRoot.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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", { ref: parent, className: treeRootClasses, style: { maxHeight }, children: children }));
+};
+export default TreeRoot;

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

@@ -0,0 +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;

package/src/components/assetTree/TreeSearch.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+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 = noop } = props;
+    const classes = classNames('TreeSearch', className);
+    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/src/components/assetTree/TreeSelectAll.d.ts

@@ -0,0 +1,12 @@
+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;
+export default TreeSelectAll;

package/src/components/assetTree/TreeSelectAll.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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", { 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/src/components/assetTree/TreeSidebar.d.ts

@@ -0,0 +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;

package/src/components/assetTree/TreeSidebar.js

@@ -0,0 +1,11 @@
+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, ...remainingProps } = props;
+    const classes = classNames('TreeSidebar', className);
+    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/src/components/assetTree/TreeSidebarCategories.d.ts

@@ -0,0 +1,8 @@
+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;
+export default TreeSidebarCategories;

package/src/components/assetTree/TreeSidebarCategories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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", { 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, { 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;
+        }) }));
+};
+export default TreeSidebarCategories;

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

@@ -0,0 +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;

package/src/components/assetTree/TreeSummary.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import React from 'react';
+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 = {}, gridCols, children } = props;
+    const classes = classNames('TreeSummary', 'display-flex flex-wrap', 'align-items-center', 'gap-10', 'padding-left-3', className);
+    return (_jsx("div", { className: classes, children: children || (_jsx(TreeSummaryRow, { gridCols: gridCols, children: _jsx(DefaultAssetCounts, { assetCounts: assetCounts }) })) }));
+});
+export default TreeSummary;

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

@@ -0,0 +1,12 @@
+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;
+export default TreeSummaryRow;

package/src/components/assetTree/TreeSummaryRow.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TreeSummaryRow = ({ gridCols = 4, children }) => (_jsx("div", { className: `TreeSummaryRow display-grid grid-cols-${gridCols} gap-10`, children: children }));
+export default TreeSummaryRow;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+export type TypeCounterProps = {
+    /**
+     * The item type for that counter. This will be used as a return value for the onClick callback.
+     */
+    type?: string;
+    /**
+     * The icon name. Note, when using the built-in generic type counter, the icon name will the
+     * same as the item type. So make sure there is a corresponding icon for the defined type.
+     */
+    icon?: string;
+    /**
+     * Sets the active styling if active
+     */
+    isActive?: boolean;
+    /**
+     * Should be set when there is a type filter set in the tree to style the counter accordingly.
+     *
+     * @default false
+     */
+    hasFilter?: boolean;
+    /**
+     * Allows for interactivity. Use this prop when you allow clicking on the counter.
+     *
+     * @default false
+     */
+    enableActivity?: boolean;
+    /**
+     * Defines if the counter is rendered at all when the value is not defined ot 0.
+     *
+     * @default false
+     */
+    hideOnZero?: boolean;
+    /**
+     * Callback function when the counter is clicked. It returns the type value.
+     * Make sure the "type" prop is defined to receive the value in the callback.
+     *
+     * @param type
+     * @returns
+     */
+    onClick?: (type: string) => void;
+    /**
+     * A custom value to be shown in the counter.
+     */
+    value?: string | React.ReactNode | number;
+};
+declare const TypeCounter: React.ForwardRefExoticComponent<TypeCounterProps & React.RefAttributes<HTMLDivElement>>;
+export default TypeCounter;

package/src/components/assetTree/TypeCounter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import useHover from '../../hooks/useHover';
+import mergeRefs from '../../utils/mergeRefs';
+import { withRioglyphPrefix } from './treeUtils';
+const TypeCounter = forwardRef((props, ref) => {
+    const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop, type, hideOnZero = false, ...remainingProps } = props;
+    const internalRef = useRef(null);
+    const mergedRef = mergeRefs([ref, internalRef]);
+    const isHover = useHover(internalRef);
+    const wrapperClassName = classNames('TypeCounter', 'display-flex align-items-center', 'user-select-none', 'margin-right-2', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && !isHover && 'opacity-50');
+    const counterClassNames = classNames('TreeLabelCount', 'label label-condensed', isHover && !isActive && 'bg-white text-color-darker', isHover && !isActive && 'border-color-gray', isHover && isActive && 'border-color-primary', isActive ? 'label-primary' : 'label-muted label-filled');
+    const handleClick = () => type && onClick(type);
+    if (hideOnZero && !value) {
+        return null;
+    }
+    const iconName = withRioglyphPrefix(icon);
+    return (_jsxs("div", { ref: mergedRef, ...remainingProps, className: wrapperClassName, onClick: handleClick, children: [_jsx("span", { className: `rioglyph ${iconName} text-size-16 margin-right-2` }), _jsx("span", { className: counterClassNames, children: value || 0 })] }));
+});
+export default TypeCounter;

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

@@ -0,0 +1,47 @@
+import type { GroupedItem, TreeItem, TreeGroup } from './Tree';
+import type { TreeSummaryCounts, AssetType } from './TreeSummary';
+export type State = {
+    groupedItems: GroupedItem[];
+    flatItems: TreeItem[];
+    allChecked: boolean;
+    searchValue: string;
+    assetCounts: TreeSummaryCounts;
+    typeFilter: string[];
+    visibleTypeCounters: AssetType[];
+    emptyGroups: TreeGroup[];
+};
+type Action = {
+    type: 'assetCounted';
+    payload: TreeSummaryCounts;
+} | {
+    type: 'allCheckedChanged';
+    payload: boolean;
+} | {
+    type: 'searchValueChanged';
+    payload: string;
+} | {
+    type: 'flatItemsChanged';
+    payload: TreeItem[];
+} | {
+    type: 'groupedItemsChanged';
+    payload: GroupedItem[];
+} | {
+    type: 'typeFilterChanged';
+    payload: string[];
+} | {
+    type: 'visibleTypeCountersChanged';
+    payload: AssetType[];
+} | {
+    type: 'emptyGroupsChanged';
+    payload: TreeGroup[];
+};
+export declare const assetCounted: (payload: TreeSummaryCounts) => Action;
+export declare const allCheckedChanged: (payload: boolean) => Action;
+export declare const searchValueChanged: (payload: string) => Action;
+export declare const flatItemsChanged: (payload: TreeItem[]) => Action;
+export declare const groupedItemsChanged: (payload: GroupedItem[]) => Action;
+export declare const typeFilterChanged: (payload: string[]) => Action;
+export declare const visibleTypeCountersChanged: (payload: AssetType[]) => Action;
+export declare const emptyGroupsChanged: (payload: TreeGroup[]) => Action;
+export declare const treeReducer: (state: State, action: Action) => State;
+export {};

package/src/components/assetTree/treeReducer.js

@@ -0,0 +1,34 @@
+import invariant from 'tiny-invariant';
+export const assetCounted = (payload) => ({ type: 'assetCounted', payload });
+export const allCheckedChanged = (payload) => ({ type: 'allCheckedChanged', payload });
+export const searchValueChanged = (payload) => ({ type: 'searchValueChanged', payload });
+export const flatItemsChanged = (payload) => ({ type: 'flatItemsChanged', payload });
+export const groupedItemsChanged = (payload) => ({ type: 'groupedItemsChanged', payload });
+export const typeFilterChanged = (payload) => ({ type: 'typeFilterChanged', payload });
+export const visibleTypeCountersChanged = (payload) => ({
+    type: 'visibleTypeCountersChanged',
+    payload,
+});
+export const emptyGroupsChanged = (payload) => ({ type: 'emptyGroupsChanged', payload });
+export const treeReducer = (state, action) => {
+    switch (action.type) {
+        case 'assetCounted':
+            return { ...state, assetCounts: action.payload };
+        case 'allCheckedChanged':
+            return { ...state, allChecked: action.payload };
+        case 'searchValueChanged':
+            return { ...state, searchValue: action.payload, allChecked: false };
+        case 'flatItemsChanged':
+            return { ...state, flatItems: action.payload };
+        case 'groupedItemsChanged':
+            return { ...state, groupedItems: action.payload };
+        case 'typeFilterChanged':
+            return { ...state, typeFilter: action.payload };
+        case 'visibleTypeCountersChanged':
+            return { ...state, visibleTypeCounters: action.payload };
+        case 'emptyGroupsChanged':
+            return { ...state, emptyGroups: action.payload };
+        default:
+            invariant(false, 'Unknown action type in tree reducer');
+    }
+};

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

@@ -0,0 +1,19 @@
+import type { TreeItem, TreeGroup, GroupedItems } from './Tree';
+export declare const notEqual: (value: any, other: any) => boolean;
+export declare const notEmpty: (value?: any) => boolean;
+export declare const filterOutByItemId: (list: string[]) => (item: TreeItem | TreeGroup) => boolean;
+export declare const containsItemById: (list: string[]) => (item: TreeGroup) => boolean;
+export declare const getListIds: (list: TreeItem[] | TreeGroup[]) => string[];
+export declare const getTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
+export declare const getSubTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
+export declare const debounceFn: <T extends (...args: any[]) => any>(fn: T) => import("lodash").DebouncedFunc<T>;
+export declare const getFullName: (item: TreeItem) => string;
+export declare const getFlatItems: (items: TreeItem[], searchValue: string) => TreeItem[];
+export declare const filterEmptyGroups: import("lodash/fp").LodashFilter2x1<GroupedItems>;
+export declare const filterAssetByType: (types?: string[]) => import("lodash/fp").LodashFilter2x1<TreeItem>;
+export declare const excludeFromList: <T>(list: T[], itemId: T) => T[];
+export declare const sortGroupsByName: (groups: GroupedItems) => TreeItem[];
+export declare const sortGroupItemsByName: (groups: GroupedItems) => GroupedItems;
+export declare const getMappedItemsToGroups: (groups: TreeGroup[], items: TreeItem[]) => GroupedItems;
+export declare const addOrRemoveFromList: <T>(list: T[], item: T) => T[];
+export declare const withRioglyphPrefix: (name?: string | null) => string | null;