@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/src/components/assetTree/Tree.js

@@ -1,314 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-use-before-define */
-import React, { useCallback, useEffect, useReducer, useRef } from 'react';
-import classNames from 'classnames';
-import isNil from 'lodash/fp/isNil';
-import isEmpty from 'lodash/fp/isEmpty';
-import isEqual from 'lodash/fp/isEqual';
-import map from 'lodash/fp/map';
-import find from 'lodash/fp/find';
-import cond from 'lodash/fp/cond';
-import without from 'lodash/fp/without';
-import flow from 'lodash/fp/flow';
-import filter from 'lodash/fp/filter';
-import size from 'lodash/fp/size';
-import otherwise from 'lodash/fp/stubTrue';
-import omit from 'lodash/fp/omit';
-import noop from 'lodash/fp/noop';
-import TreeSearch from './TreeSearch';
-import TreeSelectAll from './TreeSelectAll';
-import TreeSummary from './TreeSummary';
-import TreeNodeContainer from './TreeNodeContainer';
-import TreeNode from './TreeNode';
-import TreeLeafList from './TreeLeafList';
-import TreeNothingFound from './TreeNothingFound';
-import TreeOptions from './TreeOptions';
-import TreeRoot from './TreeRoot';
-import TypeCounter from './TypeCounter';
-import { containsItemById, debounceFn, filterAssetByType, filterEmptyGroups, filterOutByItemId, getTypeCounts, getFlatItems, getListIds, notEmpty, notEqual, excludeFromList, getMappedItemsToGroups, sortGroupItemsByName, sortGroupsByName, addOrRemoveFromList, } from './treeUtils';
-import { treeReducer, assetCounted, allCheckedChanged, visibleTypeCountersChanged, searchValueChanged, flatItemsChanged, emptyGroupsChanged, groupedItemsChanged, typeFilterChanged, } from './treeReducer';
-import { useTreeVirtualization } from './useTreeVirtualization';
-import { useTreeExpansion } from './useTreeExpansion';
-import { useTreeHeight } from './useTreeHeight';
-import { useTreeScrollPosition } from './useTreeScrollPosition';
-import SmoothScrollbars from '../../SmoothScrollbars';
-export { getTypeCounts, getSubTypeCounts } from './treeUtils';
-const filterProps = omit([
-    'expandedGroups',
-    'onExpandGroupsChange',
-    'onSearchChange',
-    'onSelectionChange',
-    'treeOptions',
-]);
-const customCompare = (prevProps, nextProps) => isEqual(filterProps(prevProps), filterProps(nextProps));
-const VIRTUALIZED_THRESHOLD = 50;
-const DEFAULT_VIRTUALIZED_OVERSCAN = 5;
-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, onTypeFilterChange = noop, virtualizeThreshold = VIRTUALIZED_THRESHOLD, overscan = DEFAULT_VIRTUALIZED_OVERSCAN, ...remainingProps } = props;
-    const [state, dispatch] = useReducer(treeReducer, {
-        groupedItems: [],
-        flatItems: [],
-        allChecked: false,
-        searchValue: '',
-        assetCounts: {},
-        typeFilter: [],
-        visibleTypeCounters: [],
-        emptyGroups: [],
-    });
-    const treeRef = useRef(null);
-    const previousItems = useRef();
-    const previousGroups = useRef();
-    const previousSearchValue = useRef('');
-    const { internalExpandedGroups, handleToggleNode } = useTreeExpansion(props.expandedGroups, props.onExpandGroupsChange);
-    const hasGroups = () => groups && notEmpty(groups);
-    const hasInternalSearchValue = () => notEmpty(state.searchValue);
-    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
-    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
-    const scrollElementRef = useRef(null);
-    const { virtualizedItems, virtualizer } = useTreeVirtualization(state.groupedItems, state.flatItems, hasInternalSearchValue(), hasGroups(), internalExpandedGroups, scrollElementRef, overscan);
-    const { scrollToTop } = useTreeScrollPosition(virtualizer, scrollElementRef);
-    // Enhance the handleToggleNode function
-    const enhancedHandleToggleNode = useCallback((nodeId) => {
-        // Execute the original toggle logic
-        handleToggleNode(nodeId);
-    }, [handleToggleNode]);
-    // Create a callback for scroll events that works with the virtualizer
-    const handleVirtualizedScroll = useCallback((event) => {
-        if (virtualizer && event?.target) {
-            const scrollElement = event.target;
-            virtualizer.scrollToOffset(scrollElement.scrollTop, { align: 'start' });
-        }
-    }, [virtualizer]);
-    useEffect(() => {
-        // Update Tree when items or groups have changed
-        if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
-            previousItems.current = items;
-            previousGroups.current = groups;
-            const typeCounts = getTypeCounts(items);
-            dispatch(assetCounted(typeCounts));
-            const allChecked = checkAllSelected({ items, groups, selectedItems, selectedGroups }, state.flatItems);
-            dispatch(allCheckedChanged(allChecked));
-            // Get the distinct asset types from the asset list that is passed into the component
-            // to know which asset type counter to render
-            dispatch(visibleTypeCountersChanged(Object.keys(typeCounts)));
-            makeTree(groups, items);
-        }
-    }, [items, groups]);
-    const debouncedMakeTree = debounceFn((losGroupos, losItems) => makeTree(losGroupos, losItems));
-    useEffect(() => {
-        // To prevent executing the effect on first render, use a ref to check previous render values
-        if (notEqual(previousSearchValue.current, state.searchValue)) {
-            debouncedMakeTree(groups, items);
-            previousSearchValue.current = state.searchValue;
-        }
-    }, [state.searchValue]);
-    useEffect(() => makeTree(groups, items), [state.typeFilter]);
-    // Update tree when empty groups are toggled from outside
-    useEffect(() => makeTree(groups, items), [showEmptyGroups]);
-    // Update "select all" state from outside when groups are selected outside programmatically
-    // without using the "select all" checkbox
-    useEffect(() => {
-        const numOfAllGroups = size(groups);
-        const numOfSelectedGroups = size(selectedGroups);
-        if (numOfSelectedGroups !== numOfAllGroups && state.allChecked) {
-            dispatch(allCheckedChanged(false));
-        }
-        else if (numOfSelectedGroups !== 0 && numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
-            dispatch(allCheckedChanged(true));
-        }
-    }, [selectedGroups]);
-    const checkAllSelected = (updatedProps, flatItems) => {
-        const { items: updatedItems, groups: updatedGroups, selectedItems: updatedSelectedItems, selectedGroups: updatedSelectedGroups, } = updatedProps;
-        if ((!hasGroups() && isEmpty(updatedSelectedItems)) ||
-            (hasNoSearchAndGroups() && isEmpty(updatedSelectedGroups)) ||
-            (hasSearchAndGroups() && isEmpty(updatedSelectedItems))) {
-            return false;
-        }
-        if (hasNoSearchAndGroups()) {
-            const unselectedGroups = filter(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
-            return isEmpty(unselectedGroups);
-        }
-        if (hasSearchAndGroups()) {
-            const unselectedSearchItems = filter(filterOutByItemId(updatedSelectedItems))(flatItems);
-            return isEmpty(unselectedSearchItems);
-        }
-        const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
-        return isEmpty(unselectedItems);
-    };
-    const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
-    const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
-        const shouldSelectAll = shouldSelect && !isStateIndeterminate;
-        dispatch(allCheckedChanged(shouldSelectAll));
-        cond([
-            [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
-            [hasSearchAndGroups, () => selectAllSearchResultItems(shouldSelectAll)],
-            [otherwise, () => selectAllFlatItems(shouldSelectAll)],
-        ])();
-    };
-    const selectAllGroups = (shouldSelect) => respondSelection([], shouldSelect ? getListIds(groups) : []);
-    const selectAllFlatItems = (shouldSelect) => respondSelection(shouldSelect ? getListIds(state.flatItems) : [], []);
-    const respondSelection = (updatedSelectedItemIds, updatedSelectedGroupIds) => {
-        onSelectionChange({
-            items: updatedSelectedItemIds,
-            groups: updatedSelectedGroupIds,
-        });
-    };
-    const handleGroupSelection = (group, isStateIndeterminate) => {
-        const groupId = group.id;
-        const isSelected = selectedGroups.includes(groupId);
-        const shouldSelectGroup = !isSelected && !isStateIndeterminate;
-        // handle group selection
-        const newSelectedGroups = shouldSelectGroup
-            ? [...selectedGroups, groupId]
-            : 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?.items);
-        const updatedSelectedItems = without(itemIdsOfGroup, selectedItems);
-        // check if all groups are selected to change the state of TreeSelectAll
-        const groupAmount = groups.length;
-        const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
-        const totalGroupAmount = groupAmount - emptyGroupAmount;
-        const areAllGroupsChecked = totalGroupAmount === newSelectedGroups.length;
-        dispatch(allCheckedChanged(areAllGroupsChecked));
-        respondSelection(updatedSelectedItems, newSelectedGroups);
-    };
-    const handleSearchChange = (updatedSearchValue) => {
-        onSearchChange(updatedSearchValue);
-        dispatch(searchValueChanged(updatedSearchValue));
-        if (virtualizer) {
-            // Every time search changes or is cleared, scroll to the top
-            setTimeout(() => {
-                scrollToTop();
-            }, 10);
-        }
-    };
-    const setFlatItemList = (updatedItems, searchValue) => {
-        const flatItems = getFlatItems(updatedItems, searchValue);
-        dispatch(flatItemsChanged(flatItems));
-    };
-    const setGroupedItemList = (groupsToProcess, itemsToProcess, considerEmptyGroups) => {
-        // Map items to groups with filtered items
-        const mappedItemsToGroups = getMappedItemsToGroups(groupsToProcess, itemsToProcess);
-        const newGroupedItems = flow(sortGroupsByName, sortGroupItemsByName)(mappedItemsToGroups);
-        const groupedItems = considerEmptyGroups ? newGroupedItems : filterEmptyGroups(newGroupedItems);
-        // Keep the empty groups in memory for later access in select all, without re-iterating on every
-        // group selection
-        const emptyGroups = filter((group) => isEmpty(group.items))(newGroupedItems);
-        dispatch(emptyGroupsChanged(emptyGroups));
-        dispatch(assetCounted(getTypeCounts(items)));
-        dispatch(groupedItemsChanged(groupedItems));
-        // Update expanded groups again
-    };
-    const makeTree = (updatedGroups, updatedItems) => {
-        const internalSearchValue = state.searchValue;
-        const internalTypeFilter = state.typeFilter;
-        const groupsToProcess = updatedGroups;
-        const itemsToProcess = updatedItems;
-        const hasGroupList = (groupList) => groupList && notEmpty(groupList);
-        const hasNoInternalSearchAndGroups = () => isEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
-        const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
-        const filteredItems = isEmpty(internalTypeFilter)
-            ? itemsToProcess
-            : filterAssetByType(internalTypeFilter)(itemsToProcess);
-        const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
-        const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
-        cond([
-            [hasNoInternalSearchAndGroups, setGroupedItems],
-            [hasInternalSearchAndGroups, setFlatItems],
-            [otherwise, setFlatItems],
-        ])();
-    };
-    const containerHeight = useTreeHeight(treeRef, scrollHeight);
-    const renderVirtualizedTree = () => {
-        const items = virtualizer.getVirtualItems();
-        const isGroupedList = hasGroups() && !hasInternalSearchValue();
-        return (_jsx(SmoothScrollbars, { ref: scrollElementRef, className: 'tree-virtual-scrollbar', onScroll: handleVirtualizedScroll, autoHeight: false, slideIn: true, style: {
-                height: `${containerHeight}px`,
-            }, children: _jsx("div", { className: isGroupedList ? 'grouped-list' : 'flat-list', style: {
-                    height: `${virtualizer.getTotalSize()}px`,
-                    position: 'relative',
-                }, children: items.map(virtualItem => {
-                    const item = virtualizedItems[virtualItem.index];
-                    if (!item) {
-                        return null;
-                    }
-                    const isGroupSelected = selectedGroups.includes(item.id) ||
-                        (item.type === 'leaf' && selectedGroups.includes(item.groupId));
-                    return (_jsx("div", { "data-index": virtualItem.index, ref: virtualizer.measureElement, className: `virtualized-tree-item ${item.type === 'group' ? 'group-item' : 'leaf-item'} ${isGroupSelected ? 'checked' : ''}`, style: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: `${virtualItem.size}px`,
-                            transform: `translateY(${virtualItem.start}px)`,
-                        }, children: item.type === 'group' ? (_jsx(TreeNodeContainer, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: _jsx(TreeNode, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isOpen: item.isExpanded, isIndeterminate: !isGroupSelected &&
-                                    item.data.items.some(groupItem => selectedItems.includes(groupItem.id)) }) }, item.id)) : (
-                        // Render individual leaf item with proper styling
-                        _jsx(TreeNodeContainer, { isOpen: true, disableAnimation: disableAnimation, children: _jsx(TreeLeafList, { leafList: [item.data], hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }) }, item.id)) }, `${item.type}-${item.id}-${virtualItem.index}`));
-                }) }) }));
-    };
-    const renderTree = () => {
-        const { groupedItems } = state;
-        if (isEmpty(groupedItems)) {
-            return _jsx(TreeNothingFound, {});
-        }
-        if (virtualizedItems.length > virtualizeThreshold) {
-            return renderVirtualizedTree();
-        }
-        const result = map((group) => {
-            const groupId = group.id;
-            const groupItems = group.items;
-            const isOpen = internalExpandedGroups?.includes(groupId) ?? false;
-            const numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
-            const isGroupSelected = selectedGroups.includes(groupId);
-            const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate, isOpen: isOpen }), isOpen && (_jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
-        })(groupedItems);
-        return result;
-    };
-    const renderFlatList = () => {
-        const { flatItems } = state;
-        const hasLeafs = isEmpty(flatItems);
-        if (virtualizedItems.length > virtualizeThreshold) {
-            return renderVirtualizedTree();
-        }
-        const getLeafs = () => (_jsx(TreeLeafList, { leafList: flatItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }));
-        return (_jsx(TreeNodeContainer, { disableAnimation: disableAnimation, isOpen: true, children: hasLeafs ? _jsx(TreeNothingFound, {}) : getLeafs() }));
-    };
-    const hasExternalGroups = notEmpty(groups);
-    const hasSelectedAllItems = () => isEqual(size(selectedItems), size(state.flatItems));
-    const hasPartiallySelectedItems = () => notEmpty(selectedItems) && !hasSelectedAllItems();
-    const hasSelectedAllGroups = () => {
-        const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
-        return isEqual(size(selectedGroups), size(groups) - emptyGroupAmount);
-    };
-    const hasPartiallySelectedGroups = () => hasExternalGroups && notEmpty(selectedGroups) && !hasSelectedAllGroups();
-    const hasSearchAndNoItems = hasInternalSearchValue() && isEmpty(state.flatItems);
-    const hasSearchAndNoGroups = hasInternalSearchValue() && isEmpty(state.groupedItems) && hasExternalGroups;
-    const hideSelectAll = hasSearchAndNoItems || hasSearchAndNoGroups;
-    const isIndeterminate = hasPartiallySelectedGroups() || hasPartiallySelectedItems();
-    const treeClassNames = classNames('Tree', className);
-    const treeHeadClasses = classNames('TreeHead', 'display-flex gap-5', 'padding-15');
-    const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
-    const content = cond([
-        [shouldRenderTree, () => renderTree()],
-        [otherwise, () => renderFlatList()],
-    ])();
-    const handleFilterByType = (type) => {
-        const updatedTypeFilter = addOrRemoveFromList(state.typeFilter, type);
-        dispatch(typeFilterChanged(updatedTypeFilter));
-        onTypeFilterChange(updatedTypeFilter);
-    };
-    const enableActivity = size(state.visibleTypeCounters) !== 1;
-    const isFilterActive = notEmpty(state.typeFilter);
-    const showTreeHead = !hideTreeHead;
-    const showSelectAll = !hideSelectAll;
-    const showSearch = !hideSearch;
-    const showSummary = !hideSummary;
-    const hasCustomSearch = !isNil(search);
-    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, { maxHeight: scrollHeight, disableAnimation: disableAnimation, children: content })] }));
-}, customCompare);
-export default Tree;

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

@@ -1,22 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export type TreeCategoryProps = {
-    /**
-     * A unique identifier for that category.
-     */
-    id: string;
-    /**
-     * The rioglyph icon name for that category.
-     */
-    icon: string;
-    /**
-     * The optional label for the category which will be shown in a tooltip.
-     */
-    label?: string | React.ReactNode;
-    /**
-     * Defines whether or not a selection indicator should be shown.
-     */
-    hasSelection?: boolean;
-};
-export type TreeCategoryNode = React.ReactElement<TreeCategoryProps>;
-declare const TreeCategory: (props: PropsWithChildren<TreeCategoryProps>) => string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null;
-export default TreeCategory;

package/src/components/assetTree/TreeCategory.js

@@ -1,2 +0,0 @@
-const TreeCategory = (props) => props.children || null;
-export default TreeCategory;

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { TreeItem } from './Tree';
-export type TreeLeafProps = {
-    item: TreeItem;
-    hasMultiselect: boolean;
-    showRadioButtons: boolean;
-    isSelected: boolean;
-    onSelectItem: VoidFunction;
-    onActiveItem: VoidFunction;
-};
-declare const TreeLeaf: React.MemoExoticComponent<(props: TreeLeafProps) => import("react/jsx-runtime").JSX.Element>;
-export default TreeLeaf;

package/src/components/assetTree/TreeLeaf.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import classNames from 'classnames';
-import isObject from 'lodash/fp/isObject';
-import Checkbox from '../checkbox/Checkbox';
-import RadioButton from '../radiobutton/RadioButton';
-import { withRioglyphPrefix } from './treeUtils';
-const getIconRenderInfo = (item) => {
-    if (item.icon === null) {
-        // explicit opt-out
-        return { primaryIcon: null, subIcon: null };
-    }
-    // fallback to type
-    const primaryIcon = item.icon ?? item.type;
-    // pairIcon with fallback to subType
-    const subIcon = item.pairIcon === null ? null : (item.pairIcon ?? item.subType ?? null);
-    return { primaryIcon: withRioglyphPrefix(primaryIcon), subIcon: withRioglyphPrefix(subIcon) };
-};
-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);
-    const { primaryIcon, subIcon } = getIconRenderInfo(item);
-    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: [primaryIcon && !subIcon && _jsx("span", { className: `rioglyph ${primaryIcon}` }), primaryIcon && subIcon && (_jsxs("span", { className: 'rioglyph-icon-pair', children: [_jsx("span", { className: `rioglyph ${primaryIcon}` }), _jsx("span", { className: `rioglyph ${subIcon}` })] })), _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/src/components/assetTree/TreeLeafList.d.ts

@@ -1,11 +0,0 @@
-import type { TreeItem } from './Tree';
-export type TreeLeafListProps = {
-    leafList: TreeItem[];
-    hasMultiselect: boolean;
-    showRadioButtons: boolean;
-    selectedItems: string[];
-    selectedGroups: string[];
-    onSelectionChange: (selectedItems: string[], selectedGroups: string[]) => void;
-};
-declare const TreeLeafList: (props: TreeLeafListProps) => import("react/jsx-runtime").JSX.Element;
-export default TreeLeafList;

package/src/components/assetTree/TreeLeafList.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import TreeLeaf from './TreeLeaf';
-import { excludeFromList } from './treeUtils';
-const TreeLeafList = (props) => {
-    const { leafList, hasMultiselect, showRadioButtons, selectedItems, selectedGroups, onSelectionChange } = props;
-    const handleItemSelection = (itemId) => {
-        const isSelected = selectedItems.includes(itemId);
-        const newSelectedItems = isSelected
-            ? excludeFromList(selectedItems, itemId)
-            : [...selectedItems, itemId];
-        onSelectionChange(newSelectedItems, selectedGroups);
-    };
-    const handleSetItemActive = (itemId) => onSelectionChange([itemId], []);
-    return (_jsx(_Fragment, { children: leafList.map(item => (_jsx(TreeLeaf, { item: item, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, isSelected: selectedItems.includes(item.id), onSelectItem: () => handleItemSelection(item.id), onActiveItem: () => handleSetItemActive(item.id) }, item.id))) }));
-};
-export default TreeLeafList;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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