@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/components/applicationHeader/CollapsedNavItem.js

@@ -1,7 +1,6 @@
 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 } from 'react';
-import isEmpty from 'lodash/fp/isEmpty';
+import { isEmpty } from 'es-toolkit/compat';
 const CollapsedNavItem = forwardRef((props, ref) => {
     const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;
     if (isEmpty(navItems) && isEmpty(actionBarItems)) {

package/components/applicationHeader/MobileAppMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import isNil from 'lodash/fp/isNil';
-import MobileHeaderModal from './MobileHeaderModal';
+import { isNil } from 'es-toolkit/compat';
+import MobileHeaderModal from "./MobileHeaderModal.js";
 const MobileAppMenu = (props) => {
     const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;
     const [isShown, setIsShown] = useState(false);

package/components/applicationHeader/MobileHeaderModal.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+import { AnimatePresence, motion } from 'motion/react';
+import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
 const OFFSET_POSITION = -1000;
 const MobileHeaderModal = (props) => {
     const { show = false, showClose = true, modalClassName, className, onClose = () => { }, children } = props;

package/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import MobileHeaderModal from './MobileHeaderModal';
+import { isEmpty } from 'es-toolkit/compat';
+import MobileHeaderModal from "./MobileHeaderModal.js";
 const MobileSubmoduleNavigation = (props) => {
     const { navItems = [], label, className } = props;
     const [isShown, setIsShown] = useState(false);

package/components/applicationHeader/NavItems.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { ModulePropType } from './ApplicationHeader';
 export type NavItemsProps = {
     navItems?: ModulePropType[];

package/components/applicationHeader/NavItems.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/fp/isEmpty';
-import useClickOutside from '../../hooks/useClickOutside';
-import CollapsedNavItem from './CollapsedNavItem';
+import { isEmpty } from 'es-toolkit/compat';
+import useClickOutside from "../../hooks/useClickOutside.js";
+import CollapsedNavItem from "./CollapsedNavItem.js";
 const collapsedDropdownWidth = 50;
 const paddingLeft = 15;
 export const NavItems = (props) => {

package/components/applicationLayout/ApplicationLayout.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable import/order */
 import { forwardRef, } from 'react';
 import classNames from 'classnames';
-import ApplicationLayoutHeader from './ApplicationLayoutHeader';
-import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
-import ApplicationLayoutBody from './ApplicationLayoutBody';
-import { initDocumentBootstrapping } from '../../utils/init/initDocumentBootstrapping';
+import ApplicationLayoutHeader from "./ApplicationLayoutHeader.js";
+import ApplicationLayoutSidebar from "./ApplicationLayoutSidebar.js";
+import ApplicationLayoutBody from "./ApplicationLayoutBody.js";
+import { initDocumentBootstrapping } from "../../utils/init/initDocumentBootstrapping.js";
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
 // noinspection JSIgnoredPromiseFromCall
 initDocumentBootstrapping();

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, } from 'react';
-import debounce from 'lodash/fp/debounce';
+import { debounce } from 'es-toolkit/compat';
 import classNames from 'classnames';
-import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
+import SmoothScrollbars from "../smoothScrollbars/SmoothScrollbars.js";
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = forwardRef((props, ref) => {
@@ -28,11 +28,11 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
             layoutBodyRef.current.parentNode.style.setProperty('--ApplicationLayoutBodyBottomBarHeight', `${bottomBarHeight}px`);
         }
     }, [bottomBarHeight]);
-    const handleScroll = debounce(RESIZE_THROTTLING)(() => {
+    const handleScroll = debounce(() => {
         if (moduleContentRef.current) {
             setOffset(moduleContentRef.current.getScrollTop());
         }
-    });
+    }, RESIZE_THROTTLING);
     const handleToTop = () => {
         if (!moduleContentRef.current) {
             return;

package/components/applicationLayout/ApplicationLayoutBodyBanner.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export type ApplicationLayoutBodyBannerProps = {
     /**
      * One of the `text-color` utility classes.
@@ -20,7 +19,7 @@ export type ApplicationLayoutBodyBannerProps = {
      */
     className?: string;
 };
-declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const ApplicationLayoutBodyBanner: import("react").ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBodyBanner;

package/components/applicationLayout/ApplicationLayoutBodyNavigation.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type ApplicationLayoutBodyNavigationProps = {
     /**
      * Additional class names that are added to the respective component. Example: `has-offset`.
      */
     className?: string;
 };
-declare const ApplicationLayoutBodyNavigation: React.ForwardRefExoticComponent<ApplicationLayoutBodyNavigationProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const ApplicationLayoutBodyNavigation: import("react").ForwardRefExoticComponent<ApplicationLayoutBodyNavigationProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutBodyNavigation;

package/components/applicationLayout/ApplicationLayoutHeader.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type ApplicationLayoutHeaderProps = {
     /**
      * Additional class names that are added to the respective component.
      */
     className?: string;
 };
-declare const ApplicationLayoutHeader: React.ForwardRefExoticComponent<ApplicationLayoutHeaderProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const ApplicationLayoutHeader: import("react").ForwardRefExoticComponent<ApplicationLayoutHeaderProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutHeader;

package/components/applicationLayout/ApplicationLayoutSidebar.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type ApplicationLayoutSidebarProps = {
     /**
      * Additional class names that are added to the respective component
      */
     className?: string;
 };
-declare const ApplicationLayoutSidebar: React.ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const ApplicationLayoutSidebar: import("react").ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default ApplicationLayoutSidebar;

package/components/applicationLayout/SubNavigation.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { ModulePropType } from '../applicationHeader/ApplicationHeader';
 export type SubNavigationProps = {
     navItems?: ModulePropType[];
     className?: string;
 };
-declare const SubNavigation: React.ForwardRefExoticComponent<SubNavigationProps & React.RefAttributes<HTMLDivElement>>;
+declare const SubNavigation: import("react").ForwardRefExoticComponent<SubNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SubNavigation;

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type AspectRatioPlaceholderProps = {
     /** Defines the aspect ratio width. @default 16 */
     height?: number;

package/components/assetTree/AssetTree.js

@@ -1,17 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useState, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
-import head from 'lodash/fp/head';
-import isArray from 'lodash/fp/isArray';
-import noop from 'lodash/fp/noop';
+import { head, isArray, noop } from 'es-toolkit/compat';
 import invariant from 'tiny-invariant';
-import TreeCategory from './TreeCategory';
-import Resizer from '../resizer/Resizer';
-import TreeSidebar from './TreeSidebar';
-import getWidthInBoundaries from '../../utils/getWidthInBoundaries';
-import mergeRefs from '../../utils/mergeRefs';
-import usePrevious from '../../usePrevious';
-import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
+import TreeCategory from "./TreeCategory.js";
+import Resizer from "../resizer/Resizer.js";
+import TreeSidebar from "./TreeSidebar.js";
+import getWidthInBoundaries from "../../utils/getWidthInBoundaries.js";
+import mergeRefs from "../../utils/mergeRefs.js";
+import usePrevious from "../../usePrevious.js";
+import SmoothScrollbars from "../smoothScrollbars/SmoothScrollbars.js";
 const DEFAULT_WIDTH = 350;
 const DEFAULT_MIN_WIDTH = 100;
 const DEFAULT_MAX_WIDTH = 0;

package/components/assetTree/Tree.d.ts

@@ -85,7 +85,7 @@ export type TreeItem = {
      *
      * This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons.
      */
-    pairIcon?: string | null;
+    pairIcon?: string | null | undefined;
     /**
      * List of group ids the items is associated with.
      *

package/components/assetTree/Tree.js

@@ -2,51 +2,34 @@ 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',
-]);
+import { cond, filter, isEmpty, noop, omit, size, stubTrue as otherwise, flow, map, find, without, } from 'es-toolkit/compat';
+import { isEqual, isNil } from 'es-toolkit/predicate';
+import TreeSearch from "./TreeSearch.js";
+import TreeSelectAll from "./TreeSelectAll.js";
+import TreeSummary from "./TreeSummary.js";
+import TreeNodeContainer from "./TreeNodeContainer.js";
+import TreeNode from "./TreeNode.js";
+import TreeLeafList from "./TreeLeafList.js";
+import TreeNothingFound from "./TreeNothingFound.js";
+import TreeOptions from "./TreeOptions.js";
+import TreeRoot from "./TreeRoot.js";
+import TypeCounter from "./TypeCounter.js";
+import { containsItemById, debounceFn, filterAssetByType, filterEmptyGroups, filterOutByItemId, getTypeCounts, getFlatItems, getListIds, notEmpty, notEqual, excludeFromList, getMappedItemsToGroups, sortGroupItemsByName, sortGroupsByName, addOrRemoveFromList, } from "./treeUtils.js";
+import { treeReducer, assetCounted, allCheckedChanged, visibleTypeCountersChanged, searchValueChanged, flatItemsChanged, emptyGroupsChanged, groupedItemsChanged, typeFilterChanged, } from "./treeReducer.js";
+import { useTreeVirtualization } from "./useTreeVirtualization.js";
+import { useTreeExpansion } from "./useTreeExpansion.js";
+import { useTreeHeight } from "./useTreeHeight.js";
+import { useTreeScrollPosition } from "./useTreeScrollPosition.js";
+import SmoothScrollbars from "../../SmoothScrollbars.js";
+export { getTypeCounts, getSubTypeCounts } from "./treeUtils.js";
+const filterProps = (props) => omit(props, ['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: [],
+        groupedItems: {},
         flatItems: [],
         allChecked: false,
         searchValue: '',
@@ -125,11 +108,11 @@ const Tree = React.memo((props) => {
             return false;
         }
         if (hasNoSearchAndGroups()) {
-            const unselectedGroups = filter(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
+            const unselectedGroups = filter(updatedGroups, filterOutByItemId(updatedSelectedGroups));
             return isEmpty(unselectedGroups);
         }
         if (hasSearchAndGroups()) {
-            const unselectedSearchItems = filter(filterOutByItemId(updatedSelectedItems))(flatItems);
+            const unselectedSearchItems = filter(flatItems, filterOutByItemId(updatedSelectedItems));
             return isEmpty(unselectedSearchItems);
         }
         const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
@@ -162,9 +145,9 @@ const Tree = React.memo((props) => {
             ? [...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);
+        const itemsInGroup = find(state.groupedItems, (entry) => entry.id === groupId);
+        const itemIdsOfGroup = map(itemsInGroup?.items, (item) => item.id);
+        const updatedSelectedItems = without(selectedItems, ...itemIdsOfGroup);
         // check if all groups are selected to change the state of TreeSelectAll
         const groupAmount = groups.length;
         const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
@@ -194,7 +177,7 @@ const Tree = React.memo((props) => {
         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);
+        const emptyGroups = filter(newGroupedItems, (group) => isEmpty(group.items));
         dispatch(emptyGroupsChanged(emptyGroups));
         dispatch(assetCounted(getTypeCounts(items)));
         dispatch(groupedItemsChanged(groupedItems));
@@ -210,7 +193,7 @@ const Tree = React.memo((props) => {
         const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
         const filteredItems = isEmpty(internalTypeFilter)
             ? itemsToProcess
-            : filterAssetByType(internalTypeFilter)(itemsToProcess);
+            : filterAssetByType(itemsToProcess, internalTypeFilter);
         const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
         const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
         cond([
@@ -256,15 +239,15 @@ const Tree = React.memo((props) => {
         if (virtualizedItems.length > virtualizeThreshold) {
             return renderVirtualizedTree();
         }
-        const result = map((group) => {
+        const result = map(groupedItems, (group) => {
             const groupId = group.id;
             const groupItems = group.items;
             const isOpen = internalExpandedGroups?.includes(groupId) ?? false;
-            const numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
+            const numSelectedGroupItems = filter(groupItems, containsItemById(selectedItems)).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 = () => {
@@ -308,7 +291,7 @@ const Tree = React.memo((props) => {
     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) }))
+                                    ? summary || (_jsx(TreeSummary, { children: map(state.visibleTypeCounters, (typeCounter) => (_jsx(TypeCounter, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter))) }))
                                     : null }), _jsx(TreeOptions, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] }))] }), _jsx(TreeRoot, { maxHeight: scrollHeight, disableAnimation: disableAnimation, children: content })] }));
 }, customCompare);
 export default Tree;

package/components/assetTree/TreeLeaf.js

@@ -1,10 +1,10 @@
 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';
+import { isObject } from 'es-toolkit/compat';
+import Checkbox from "../checkbox/Checkbox.js";
+import RadioButton from "../radiobutton/RadioButton.js";
+import { withRioglyphPrefix } from "./treeUtils.js";
 const getIconRenderInfo = (item) => {
     if (item.icon === null) {
         // explicit opt-out

package/components/assetTree/TreeLeafList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import TreeLeaf from './TreeLeaf';
-import { excludeFromList } from './treeUtils';
+import TreeLeaf from "./TreeLeaf.js";
+import { excludeFromList } from "./treeUtils.js";
 const TreeLeafList = (props) => {
     const { leafList, hasMultiselect, showRadioButtons, selectedItems, selectedGroups, onSelectionChange } = props;
     const handleItemSelection = (itemId) => {

package/components/assetTree/TreeNode.js

@@ -1,8 +1,8 @@
 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';
+import Checkbox from "../checkbox/Checkbox.js";
+import { withRioglyphPrefix } from "./treeUtils.js";
 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);

package/components/assetTree/TreeNothingFound.d.ts

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

package/components/assetTree/TreeNothingFound.js

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

package/components/assetTree/TreeOption.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type TreeOptionProps = {
     /**
      * Defines whether the option is set.

package/components/assetTree/TreeOption.js

@@ -1,7 +1,7 @@
 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';
+import { noop } from 'es-toolkit/function';
+import Switch from "../switch/Switch.js";
 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);

package/components/assetTree/TreeOptions.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type TreeOptionsProps = {
     treeOptions?: React.ReactNode[];
     treeOptionsTooltip?: React.ReactNode;

package/components/assetTree/TreeOptions.js

@@ -1,8 +1,8 @@
 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';
+import { isEmpty } from 'es-toolkit/compat';
+import ButtonDropdown from "../dropdown/ButtonDropdown.js";
+import SimpleTooltip from "../tooltip/SimpleTooltip.js";
 const TreeOptions = (props) => {
     const { treeOptions = [], treeOptionsTooltip, className } = props;
     if (isEmpty(treeOptions)) {

package/components/assetTree/TreeRoot.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type TreeRootProps = {
     disableAnimation: boolean;
     maxHeight?: number;

package/components/assetTree/TreeSearch.js

@@ -1,8 +1,8 @@
 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';
+import { noop } from 'es-toolkit/function';
+import ClearableInput from "../clearableInput/ClearableInput.js";
 const TreeSearch = React.memo((props) => {
     const { value, className, placeholder, onChange = noop } = props;
     const classes = classNames('TreeSearch', className);

package/components/assetTree/TreeSelectAll.d.ts

@@ -1,6 +1,6 @@
 export type TreeSelectAllProps = {
     value?: string;
-    onSelect?: Function;
+    onSelect?: (checked: boolean, isIndeterminate: boolean) => void;
     isChecked?: boolean;
     isEnabled?: boolean;
     isDisabled?: boolean;

package/components/assetTree/TreeSelectAll.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import Checkbox from '../checkbox/Checkbox';
+import { noop } from 'es-toolkit/function';
+import Checkbox from "../checkbox/Checkbox.js";
 const TreeSelectAll = (props) => {
-    const { isDisabled, isChecked = false, isEnabled = true, isIndeterminate = false, hasSearchResults = false, // needed?
-    onSelect = noop, } = props;
+    const { isDisabled, isChecked = false, isEnabled = true, isIndeterminate = false, 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;
+    if (!isEnabled) {
+        return null;
+    }
+    return (_jsx("div", { className: 'TreeSelectAll display-flex align-items-center', children: _jsx(Checkbox, { checked: isChecked, onClick: handleSelectAll, disabled: isDisabled, indeterminate: isIndeterminate, className: 'margin-top--1' }) }));
 };
 export default TreeSelectAll;

package/components/assetTree/TreeSidebar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 import classNames from 'classnames';
-import TreeSidebarCategories from './TreeSidebarCategories';
+import TreeSidebarCategories from "./TreeSidebarCategories.js";
 const TreeSidebar = React.memo((props) => {
     const { className, onClick = noop, ...remainingProps } = props;
     const classes = classNames('TreeSidebar', className);

package/components/assetTree/TreeSidebarCategories.js

@@ -1,8 +1,8 @@
 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';
+import { noop } from 'es-toolkit/function';
+import OverlayTrigger from "../overlay/OverlayTrigger.js";
+import Tooltip from "../tooltip/Tooltip.js";
 const ACTIVE_CLASS_NAME = 'active';
 const SELECTED_CLASS_NAME = 'selected';
 const TOOLTIP_DELAY = 1500;
@@ -22,8 +22,7 @@ const TreeSidebarCategories = (props) => {
             };
             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 (_jsx(OverlayTrigger, { placement: Tooltip.RIGHT, delay: { show: TOOLTIP_DELAY, hide: 0 }, overlay: _jsx(Tooltip, { id: 'tooltip', width: 'auto', children: _jsx("span", { children: label }) }), children: category }, `category-tooltip-${id}`));
             }
             return category;
         }) }));

package/components/assetTree/TreeSummary.d.ts

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
-export type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver';
+export type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver' | 'car';
 export type TreeSummaryCounts = {
     /**
      * The amount of trucks
@@ -17,6 +17,10 @@ export type TreeSummaryCounts = {
      * The amount of vans
      */
     van?: number;
+    /**
+     * The amount of cars
+     */
+    car?: number;
     /**
      * The amount of drivers
      */

package/components/assetTree/TreeSummary.js

@@ -1,12 +1,11 @@
 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';
+import TypeCounter from "./TypeCounter.js";
+import TreeSummaryRow from "./TreeSummaryRow.js";
 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 { truck, bus, van, trailer, car, 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: 'car-baseline', value: car }), _jsx(TypeCounter, { hideOnZero: true, icon: 'driver', value: driver })] }));
 };
 const TreeSummary = React.memo((props) => {
     const { className = '', assetCounts = {}, gridCols, children } = props;

package/components/assetTree/TreeSummaryRow.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type TreeSummaryRowProps = {
     /**
      * Defined the number of grid columns for a single row. Note, when the

package/components/assetTree/TypeCounter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type TypeCounterProps = {
     /**
      * The item type for that counter. This will be used as a return value for the onClick callback.