@rio-cloud/rio-uikit 1.8.0 → 1.9.0

package/BarList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/barList/BarList';
+export * from './components/barList/BarList';

package/BarList.js

@@ -0,0 +1,2 @@
+export { default } from './components/barList/BarList';
+export * from './components/barList/BarList';

package/SaveableDateInput.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/saveableInput/SaveableDateInput';
+export * from './components/saveableInput/SaveableDateInput';

package/SaveableDateInput.js

@@ -0,0 +1,2 @@
+export { default } from './components/saveableInput/SaveableDateInput';
+export * from './components/saveableInput/SaveableDateInput';

package/components/activity/Activity.d.ts

@@ -7,13 +7,13 @@ declare const STATUS_MAP: {
     readonly RESTING: "resting";
     readonly WORKING: "working";
 };
-type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
+export type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
 declare const SIZE_MAP: {
     readonly SIZE_SM: "sm";
     readonly SIZE_LG: "lg";
     readonly SIZE_XL: "xl";
 };
-type ActivitySize = ObjectValues<typeof SIZE_MAP>;
+export type ActivitySize = ObjectValues<typeof SIZE_MAP>;
 export type ActivityProps = {
     /**
      * Defines the type of activity.

package/components/assetTree/Tree.d.ts

@@ -200,6 +200,18 @@ export type TreeProps = {
      * @default false
      */
     disableAnimation?: boolean;
+    /**
+     * The number of items (including groups and children) used for virtualizing the tree.
+     *
+     * @default 50
+     */
+    virtualizeThreshold?: number;
+    /**
+     * The number of items rendered beyond the visible area of a virtualized tree.
+     *
+     * @default 5
+     */
+    overscan?: number;
     /**
      * Additional classes added to the wrapping element.
      */

package/components/assetTree/Tree.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-use-before-define */
-import React, { useEffect, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -27,6 +27,11 @@ 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',
@@ -36,8 +41,10 @@ const filterProps = omit([
     '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, ...remainingProps } = 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: [],
@@ -52,7 +59,26 @@ const Tree = React.memo((props) => {
     const previousItems = useRef();
     const previousGroups = useRef();
     const previousSearchValue = useRef('');
-    const internalExpandedGroups = useRef(expandedGroups);
+    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)) {
@@ -79,12 +105,6 @@ const Tree = React.memo((props) => {
     useEffect(() => makeTree(groups, items), [state.typeFilter]);
     // Update tree when empty groups are toggled from outside
     useEffect(() => makeTree(groups, items), [showEmptyGroups]);
-    // Update expanded groups from outside
-    const [previousExpandedGroups, setPreviousExpandedGroups] = useState(expandedGroups);
-    if (!isEqual(expandedGroups, previousExpandedGroups)) {
-        internalExpandedGroups.current = expandedGroups;
-        setPreviousExpandedGroups(expandedGroups);
-    }
     // Update "select all" state from outside when groups are selected outside programmatically
     // without using the "select all" checkbox
     useEffect(() => {
@@ -115,28 +135,6 @@ const Tree = React.memo((props) => {
         const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
         return isEmpty(unselectedItems);
     };
-    const handleToggleNode = (nodeId) => {
-        const nodeContainer = getNodeContainerDomElementById(nodeId);
-        if (!internalExpandedGroups?.current || !nodeContainer) {
-            return;
-        }
-        const openGroups = internalExpandedGroups.current;
-        const newExpandedNodes = openGroups.includes(nodeId)
-            ? openGroups.filter(item => item !== nodeId)
-            : [...openGroups, nodeId];
-        // Performance improvement to skip on render cycle and change "open" class directly
-        if (openGroups.includes(nodeId)) {
-            nodeContainer.classList.remove('open');
-        }
-        else {
-            nodeContainer.classList.add('open');
-        }
-        internalExpandedGroups.current = newExpandedNodes;
-        onExpandGroupsChange(newExpandedNodes);
-    };
-    const getNodeContainerDomElementById = (nodeId) => {
-        return treeRef?.current?.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
-    };
     const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
     const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
         const shouldSelectAll = shouldSelect && !isStateIndeterminate;
@@ -178,10 +176,13 @@ const Tree = React.memo((props) => {
     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 hasGroups = () => groups && notEmpty(groups);
-    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
-    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
     const setFlatItemList = (updatedItems, searchValue) => {
         const flatItems = getFlatItems(updatedItems, searchValue);
         dispatch(flatItemsChanged(flatItems));
@@ -218,30 +219,64 @@ const Tree = React.memo((props) => {
             [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, 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.current?.includes(groupId) ?? false;
+            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 }), _jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }, groupId));
+            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), 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 hasInternalSearchValue = () => notEmpty(state.searchValue);
     const hasSelectedAllItems = () => isEqual(size(selectedItems), size(state.flatItems));
     const hasPartiallySelectedItems = () => notEmpty(selectedItems) && !hasSelectedAllItems();
     const hasSelectedAllGroups = () => {

package/components/assetTree/TreeNodeContainer.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type TreeNodeContainerProps = {
     isOpen: boolean;
     groupId?: string;

package/components/assetTree/useTreeExpansion.d.ts

@@ -0,0 +1,4 @@
+export declare const useTreeExpansion: (expandedGroups?: string[], onExpandGroupsChange?: (groups: string[]) => void) => {
+    internalExpandedGroups: string[] | undefined;
+    handleToggleNode: (nodeId: string) => void;
+};

package/components/assetTree/useTreeExpansion.js

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { isEqual } from 'lodash/fp';
+export const useTreeExpansion = (expandedGroups, onExpandGroupsChange) => {
+    const [internalExpandedGroups, setInternalExpandedGroups] = useState(expandedGroups);
+    const [previousExpandedGroups, setPreviousExpandedGroups] = useState(expandedGroups);
+    // Sync with external prop changes and update expanded groups from outside in case
+    if (!isEqual(expandedGroups, previousExpandedGroups)) {
+        setInternalExpandedGroups(expandedGroups);
+        setPreviousExpandedGroups(expandedGroups);
+    }
+    const handleToggleNode = (nodeId) => {
+        if (!internalExpandedGroups) {
+            return;
+        }
+        const newExpandedNodes = internalExpandedGroups.includes(nodeId)
+            ? internalExpandedGroups.filter(item => item !== nodeId)
+            : [...internalExpandedGroups, nodeId];
+        setInternalExpandedGroups(newExpandedNodes);
+        onExpandGroupsChange?.(newExpandedNodes);
+    };
+    return {
+        internalExpandedGroups,
+        handleToggleNode,
+    };
+};

package/components/assetTree/useTreeHeight.d.ts

@@ -0,0 +1 @@
+export declare const useTreeHeight: (treeRef: React.RefObject<HTMLDivElement>, scrollHeight?: number) => number;

package/components/assetTree/useTreeHeight.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+const DEFAULT_TREE_ROOT_HEIGHT = 300;
+export const useTreeHeight = (treeRef, scrollHeight) => {
+    const [containerHeight, setContainerHeight] = useState(350);
+    // Enhanced height calculation with multiple fallback strategies
+    useEffect(() => {
+        const calculateHeight = () => {
+            if (!treeRef.current) {
+                return DEFAULT_TREE_ROOT_HEIGHT;
+            }
+            const parentElement = treeRef.current;
+            const treeHeaderElement = parentElement.querySelector('.TreeHeader');
+            if (scrollHeight) {
+                // Use scrollHeight prop if provided
+                return scrollHeight;
+            }
+            const treeRoot = treeRef.current.querySelector('.TreeRoot');
+            return treeRoot?.clientHeight ?? DEFAULT_TREE_ROOT_HEIGHT;
+        };
+        const updateHeight = () => {
+            const newHeight = calculateHeight();
+            setContainerHeight(newHeight);
+        };
+        // Debounce height updates to avoid excessive recalculations
+        let timeoutId;
+        const debouncedUpdate = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(updateHeight, 16); // ~60fps
+        };
+        // Initial calculation with small delay to ensure DOM is ready
+        const initialTimeout = setTimeout(updateHeight, 50);
+        // Set up observers
+        const resizeObserver = new ResizeObserver(debouncedUpdate);
+        const mutationObserver = new MutationObserver(debouncedUpdate);
+        if (treeRef.current) {
+            // Watch parent for size changes
+            resizeObserver.observe(treeRef.current);
+            if (treeRef.current.parentElement) {
+                resizeObserver.observe(treeRef.current.parentElement);
+            }
+            // Watch for DOM changes that might affect layout
+            mutationObserver.observe(treeRef.current, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class'],
+            });
+        }
+        // Window resize listener
+        window.addEventListener('resize', debouncedUpdate);
+        return () => {
+            clearTimeout(initialTimeout);
+            clearTimeout(timeoutId);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            window.removeEventListener('resize', debouncedUpdate);
+        };
+    }, [scrollHeight, treeRef]); // Re-run if scrollHeight prop changes or treeRef changes
+    return containerHeight;
+};

package/components/assetTree/useTreeScrollPosition.d.ts

@@ -0,0 +1,3 @@
+export declare const useTreeScrollPosition: (virtualizer: any, scrollElementRef: React.RefObject<any>) => {
+    scrollToTop: () => void;
+};

package/components/assetTree/useTreeScrollPosition.js

@@ -0,0 +1,19 @@
+import { useCallback, useRef } from 'react';
+export const useTreeScrollPosition = (virtualizer, scrollElementRef) => {
+    const scrollOffsetRef = useRef(0);
+    const scrollToTop = useCallback(() => {
+        if (scrollElementRef.current) {
+            requestAnimationFrame(() => {
+                // Reset scroll position to top
+                scrollElementRef.current.scrollTop(0);
+                // Also reset the stored scroll offset
+                scrollOffsetRef.current = 0;
+                // Force virtualizer to sync
+                if (virtualizer) {
+                    virtualizer.scrollToOffset(0);
+                }
+            });
+        }
+    }, [scrollElementRef, virtualizer]);
+    return { scrollToTop };
+};

package/components/assetTree/useTreeVirtualization.d.ts

@@ -0,0 +1,17 @@
+import type { TreeItem, GroupedItem } from './Tree';
+type VirtualizedItem = {
+    type: 'group';
+    data: GroupedItem;
+    id: string;
+    isExpanded: boolean;
+} | {
+    type: 'leaf';
+    data: TreeItem;
+    id: string;
+    groupId: string;
+};
+export declare const useTreeVirtualization: (groupedItems: GroupedItem[], flatItems: TreeItem[], hasSearchValue: boolean, hasGroups: boolean, internalExpandedGroups: string[] | undefined, scrollElementRef: React.RefObject<HTMLDivElement>, overscan: number) => {
+    virtualizedItems: VirtualizedItem[];
+    virtualizer: import("@tanstack/virtual-core").Virtualizer<any, Element>;
+};
+export {};

package/components/assetTree/useTreeVirtualization.js

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import map from 'lodash/fp/map';
+import { useVirtualizer } from '@tanstack/react-virtual';
+export const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups, scrollElementRef, overscan) => {
+    const virtualizedItems = useMemo(() => {
+        // When there's a search value, always show flat items (no groups)
+        if (hasSearchValue) {
+            return flatItems.map((item) => ({
+                type: 'leaf',
+                data: item,
+                id: item.id,
+            }));
+        }
+        // Virtualize grouped list, when there's no search value and we have groups
+        if (hasGroups) {
+            const flatList = [];
+            map((group) => {
+                const isExpanded = internalExpandedGroups?.includes(group.id) ?? false;
+                // Add the group header
+                flatList.push({
+                    type: 'group',
+                    data: group,
+                    id: group.id,
+                    isExpanded,
+                });
+                // Add expanded items
+                if (isExpanded) {
+                    group.items.forEach((item) => {
+                        flatList.push({
+                            type: 'leaf',
+                            data: item,
+                            id: item.id,
+                            groupId: group.id,
+                        });
+                    });
+                }
+            })(groupedItems);
+            return flatList;
+        }
+        // Virtualize flat list when no groups are provided initially
+        return flatItems.map((item) => ({
+            type: 'leaf',
+            data: item,
+            id: item.id,
+        }));
+    }, [groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups]);
+    const virtualizer = useVirtualizer({
+        count: virtualizedItems.length,
+        // getScrollElement: () => scrollElementRef.current,
+        getScrollElement: () => {
+            // For SmoothScrollbars, we need to get the actual scroll container
+            if (scrollElementRef.current) {
+                // SmoothScrollbars exposes the scroll container through its view
+                const scrollbarsInstance = scrollElementRef.current;
+                // Access the internal scroll container
+                // This depends on how react-custom-scrollbars-2 exposes its internals
+                return scrollbarsInstance?.view;
+            }
+            return null;
+        },
+        estimateSize: () => 41, // typical single line height without line-break
+        measureElement: element => {
+            // This will measure the actual rendered height for more accuracy
+            return element?.children[0].clientHeight ?? 41;
+        },
+        overscan, // Render 10 extra items above and below visible area
+        // Add this to enable more aggressive remeasurement
+        lanes: 1,
+    });
+    return { virtualizedItems, virtualizer };
+};

package/components/barList/BarList.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { type SortDirectionType } from '../../utils/SortUtils';
+export type BarListRow<T> = T & {
+    key?: string;
+    href?: string;
+    value: number;
+    name: string;
+    color?: string;
+    barColor?: string;
+    background?: string;
+};
+/**
+ * Props for the BarList component.
+ *
+ * @template T - The type of the custom data associated with each bar row.
+ */
+type BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Array of bar row data to be rendered.
+     */
+    data: BarListRow<T>[];
+    /**
+     * Optional function to format the numeric value displayed on the right side of each bar.
+     * Can return a string or a React element.
+     *
+     * @example
+     * valueFormatter={(value) => `${value}%`}
+     */
+    valueFormatter?: (value: number) => string | React.ReactElement;
+    /**
+     * A reference value used to calculate relative widths.
+     * If not provided, the maximum value in `data` will be used.
+     *
+     * @default max(data.value)
+     */
+    referenceValue?: number;
+    /**
+     * Whether to animate the bar width transitions using Framer Motion.
+     *
+     * @default false
+     */
+    showAnimation?: boolean;
+    /**
+     * Callback fired when a bar is clicked.
+     *
+     * @param payload - The full data object of the clicked bar.
+     */
+    onSelectRow?: (payload: BarListRow<T>) => void;
+    /**
+     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.
+     *
+     * @default 'none'
+     */
+    sortOrder?: SortDirectionType | 'none';
+    /**
+     * Height of each bar row in pixels.
+     *
+     * @default 32
+     */
+    rowHeight?: number;
+    /**
+     * Opacity applied to non-hovered bars (between 0 and 1).
+     *
+     * @default 0.5
+     */
+    opacity?: number;
+    /**
+     * CSS color string used for the active/progress portion of each bar.
+     *
+     * @default 'bg-highlight-light'
+     */
+    barColor?: string;
+    /**
+     * CSS color string used for the text labels.
+     *
+     * @default 'text-color-darker'
+     */
+    labelColor?: string;
+    /**
+     * CSS color string used for the bar background.
+     *
+     * @default 'bg-transparent'
+     */
+    background?: string;
+    /**
+     * Additional className added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BarListInner: {
+    <T>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BarList: <T>(props: BarListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof BarListInner>;
+export default BarList;

package/components/barList/BarList.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import { SortDirection } from '../../utils/SortUtils';
+import { useSortedBars } from './useSortedBars';
+// Animation variants
+const containerVariants = {
+    animate: {
+        transition: {
+            staggerChildren: 0.1,
+        },
+    },
+};
+const barVariants = {
+    initial: { width: 0 },
+    animate: (width) => ({
+        width: `${width}%`,
+        transition: { duration: 0.8, ease: 'easeOut' },
+    }),
+};
+const DEFAULT_ROW_HEIGHT = 25;
+const DEFAULT_OPACITY = 0.5;
+const BarListInner = (props, forwardedRef) => {
+    const { data = [], valueFormatter = value => value.toString(), showAnimation = false, onSelectRow, referenceValue, sortOrder = SortDirection.DESCENDING, barColor = 'bg-highlight-light', labelColor = 'text-color-darker', background = 'bg-transparent', rowHeight = DEFAULT_ROW_HEIGHT, opacity = DEFAULT_OPACITY, className = '', ...remainingProps } = props;
+    const sortedData = useSortedBars(data, sortOrder, item => item.value);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const widths = useMemo(() => {
+        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);
+        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));
+    }, [sortedData, referenceValue]);
+    return (_jsxs("div", { ...remainingProps, ref: forwardedRef, className: classNames('display-flex justify-content-between gap-15', className), children: [_jsx(motion.div, { variants: showAnimation ? containerVariants : undefined, initial: 'initial', animate: 'animate', className: 'width-100pct space-y-5', children: sortedData.map((item, index) => {
+                    const width = widths[index];
+                    const itemLabelColor = item.color ?? labelColor;
+                    const itemBarColor = item.barColor ?? barColor;
+                    const itemBackground = item.background ?? background;
+                    return (_jsxs("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: classNames('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [_jsx(motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: classNames('display-flex align-items-center rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBarColor), style: { height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }, role: 'presentation' }), _jsx("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? (_jsx("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : (_jsx("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
+                }) }), _jsx("div", { className: 'space-y-5', children: sortedData.map(item => (_jsx("div", { className: classNames('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: _jsx("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
+};
+BarListInner.displayName = 'BarList';
+const BarList = React.forwardRef(BarListInner);
+export default BarList;

package/components/barList/useSortedBars.d.ts

@@ -0,0 +1,2 @@
+import { type SortDirectionType } from '../../utils/SortUtils';
+export declare function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number): T[];

package/components/barList/useSortedBars.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { SortDirection } from '../../utils/SortUtils';
+export function useSortedBars(data, sortOrder, getValue) {
+    return useMemo(() => {
+        if (sortOrder === 'none') {
+            return data;
+        }
+        return [...data].sort((a, b) => {
+            const aVal = getValue(a);
+            const bVal = getValue(b);
+            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
+        });
+    }, [data, sortOrder, getValue]);
+}

package/components/charts/PieChart.js

@@ -14,7 +14,7 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
 };
 const PieChart = (props) => {
     const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions, ...remainingProps } = props;
-    // biome-ignore lint/suspicious/noExplicitAny:
+    // biome-ignore lint/suspicious/noExplicitAny: unknown type
     const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
     const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};

package/components/clearableInput/ClearableInput.js

@@ -136,7 +136,7 @@ const ClearableInput = forwardRef((props, ref) => {
         maxLength: hasMask ? undefined : maxLength,
         tabIndex,
     };
-    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, ref: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
+    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
     return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 export default ClearableInput;