@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/assetTree/treeUtils.js

@@ -0,0 +1,98 @@
+import isEmpty from 'lodash/fp/isEmpty';
+import isEqual from 'lodash/fp/isEqual';
+import orderBy from 'lodash/fp/orderBy';
+import isObject from 'lodash/fp/isObject';
+import debounce from 'lodash/fp/debounce';
+import countBy from 'lodash/fp/countBy';
+import flow from 'lodash/fp/flow';
+import filter from 'lodash/fp/filter';
+import negate from 'lodash/fp/negate';
+import mapValues from 'lodash/fp/mapValues';
+import { searchNormalized } from '../../utils/searchNormalized';
+const SEARCH_DEBOUNCE = 100;
+export const notEqual = negate(isEqual);
+export const notEmpty = negate(isEmpty);
+export const filterOutByItemId = (list) => (item) => !list.includes(item.id);
+export const containsItemById = (list) => (item) => list.includes(item.id);
+export const getListIds = (list) => list.map(listItem => listItem.id);
+export const getTypeCounts = (items) => countBy(item => item.type, items);
+export const getSubTypeCounts = (items) => countBy(item => item.subType, items);
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export const debounceFn = (fn) => debounce(SEARCH_DEBOUNCE, fn);
+const isNameObject = (item) => isObject(item.name);
+export const getFullName = (item) => `${item.name.firstName} ${item.name.lastName}`;
+const getName = (item) => (isNameObject(item) ? getFullName(item) : item.name);
+const orderByName = orderBy([
+    (item) => isNameObject(item)
+        ? item.name.lastName.toLowerCase()
+        : (item.name.toLowerCase() ?? ''),
+], ['asc']);
+// TODO: extend to use provided external search function instead?
+const filterByName = (searchValue) => (item) => {
+    if (searchValue) {
+        return searchNormalized(getName(item), searchValue);
+    }
+    return true;
+};
+export const getFlatItems = (items, searchValue) => flow(filter(filterByName(searchValue)), orderByName)(items);
+export const filterEmptyGroups = filter((group) => notEmpty(group.items));
+export const filterAssetByType = (types = []) => filter((asset) => types.includes(asset.type));
+export const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
+export const sortGroupsByName = (groups) => {
+    const fixedGroups = {};
+    const sortableGroups = {};
+    mapValues((group) => {
+        if (group.position === 'last') {
+            fixedGroups[group.id] = { ...group };
+        }
+        else {
+            sortableGroups[group.id] = { ...group };
+        }
+    })(groups);
+    const sortedGroups = orderByName(sortableGroups);
+    return isEmpty(fixedGroups) ? sortedGroups : { ...sortedGroups, ...fixedGroups };
+};
+export const sortGroupItemsByName = (groups) => {
+    return mapValues((group) => ({
+        ...group,
+        items: orderByName(group.items),
+    }))(groups);
+};
+export const getMappedItemsToGroups = (groups, items) => {
+    const mappedGroups = {};
+    // build an object for listing the groups by id
+    groups.forEach(group => {
+        mappedGroups[group.id] = {
+            ...group,
+            items: [],
+        };
+    });
+    items.forEach(item => {
+        // add items to the respective group
+        const groupIds = item.groupIds || [];
+        groupIds.forEach(groupId => {
+            const mappedGroup = mappedGroups[groupId];
+            if (mappedGroup) {
+                mappedGroup.items.push(item);
+            }
+        });
+    });
+    return mappedGroups;
+};
+export const addOrRemoveFromList = (list, item) => {
+    const listSet = new Set(list);
+    if (listSet.has(item)) {
+        listSet.delete(item);
+    }
+    else {
+        listSet.add(item);
+    }
+    return [...listSet];
+};
+// Add prefix `rioglyph-` if icon is given and does not start with the prefix
+export const withRioglyphPrefix = (name) => {
+    if (!name) {
+        return null;
+    }
+    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
+};

package/src/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/src/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/src/components/assetTree/useTreeHeight.d.ts

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

package/src/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/src/components/assetTree/useTreeScrollPosition.d.ts

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

package/src/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/src/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/src/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/src/components/autosuggest/AutoSuggest.d.ts

@@ -0,0 +1,232 @@
+import React from 'react';
+export type AutoSuggestSuggestion = {
+    /**
+     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.
+     */
+    label?: string;
+    /**
+     * Set to disable the suggestion and disallow selecting it.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager
+     * to render a placeholder with an icon next to it.
+     */
+    customSuggestion?: React.ReactNode;
+    /**
+     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.
+     */
+    [name: string]: string | React.ReactNode;
+};
+export type SelectedSuggestion = {
+    suggestionValue: string | React.ReactElement;
+    suggestion: AutoSuggestSuggestion;
+};
+export type AutoSuggestInputProps = {
+    /**
+     * A native input id attribute. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
+    /**
+     * The value to be set for the input. Using this prop the input can be controlled from the outside.
+     */
+    value?: string;
+    /**
+     * String that will be displayed inside the input when nothing is typed in.
+     * @default `Start typing ...`
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
+     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
+     */
+    icon?: string;
+    /**
+     * Callback function which will be called when the input changes. __This is usually not needed__ as
+     * the "onSuggestionsFetchRequested" callback takes care of any input change. It is listed here
+     * for completeness and for certain edge cases.
+     *
+     * __Note:__ It might be removed in the future when not needed.'
+     * @deprecated please use `onSuggestionsFetchRequested` instead
+     * @param changeEvent
+     * @param changeProps
+     * @returns
+     */
+    onChange?: (changeEvent: React.SyntheticEvent, changeProps: {
+        newValue: string;
+    }) => void;
+    /**
+     * Callback function which gets triggered when the input gaines focus.
+     */
+    onFocus?: VoidFunction;
+    /**
+     * Callback function which gets triggered when the input looses the focus.
+     */
+    onBlur?: VoidFunction;
+    /**
+     * Callback function which will be called when the input is cleared. __This is usually not needed__ as
+     * the "onSuggestionsFetchRequested" callback takes care of any input change. It is listed here
+     * for completeness and for certain edge cases.
+     *
+     * __Note:__ It might be removed in the future when not needed.
+     */
+    onClear?: VoidFunction;
+    /**
+     * Boolean value that adds the class `has-error` to the input
+     * component. Use this for validation use cases. The Autosuggest component
+     * should be wrapped in a `form-group` element with the class `has-feedback`.
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Defines the tab index to be added to the input element.
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Boolean value that disabled the input component.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The React ref for the underlying input.
+     */
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+    /**
+     * Additional class names that are added to the input component.
+     */
+    className?: string;
+};
+export type AutoSuggestProps<T = AutoSuggestSuggestion> = {
+    /**
+     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
+    /**
+     * Object to define properties for the input component. For the input, the ClearableInput
+     * component is used.
+     */
+    inputProps?: AutoSuggestInputProps;
+    /**
+     * Array of items which will be displayed. Items can be arbitrary objects as long as they
+     * have a label defined.
+     *
+     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you
+     * can pass our own object that does not need to have a label. In this case you may want to
+     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.
+     */
+    suggestions?: AutoSuggestSuggestion[];
+    /**
+     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu
+     * will not be rendered.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Callback function which will be called every time you need to recalculate suggestions e.i.
+     * when the filter is updates after each input. It will also be called when the input is
+     * cleared. The value would be an empty string in this case.
+     * @param result
+     * @returns
+     */
+    onSuggestionsFetchRequested?: (result: {
+        value: string;
+    }) => void;
+    /**
+     * Callback function which will be called when a suggestion is selected from the dropdown menu.
+     * @param event
+     * @param selectedSuggestion
+     * @returns
+     */
+    onSuggestionSelected?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>, selectedSuggestion: SelectedSuggestion) => void;
+    /**
+     * Callback function which will be called every time the highlighted selection changes.
+     * @param suggestion
+     * @returns
+     */
+    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;
+    /**
+     * Function that returns a string which will be displayed inside the input.
+     * This is required when a custom render function for suggestions is provided.
+     * Overwrite this function to provide the value to be used for a suggestion.
+     * Default implementation is: `suggestion => suggestion.label`
+     *
+     * @param suggestion
+     * @returns
+     */
+    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;
+    /**
+     * Function that defines how suggestions are rendered on the dropdown-menu.
+     * Use this to customize the appearance for instance when you want to show an icon
+     * for a suggestion.
+     * Default implementation is: `suggestion => suggestion.label`
+     *
+     * @param suggestion
+     * @returns
+     */
+    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;
+    /**
+     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify
+     * a unique value for each suggestion which will be used as a react key for the individual menu items.
+     */
+    customSuggestionKey?: string;
+    /**
+     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned or not.
+     * Set to true additionally disables autoDrop feature.
+     * @default false
+     */
+    pullRight?: boolean;
+    /**
+     * Boolean that enables autoDrop feature.
+     * @default true
+     */
+    autoDropDirection?: boolean;
+    /**
+     * Shows a loading spinner instead of the items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Boolean that enables opening the dropdown menu when gaining focus.
+     * @default false
+     */
+    openOnFocus?: boolean;
+    /**
+     * Boolean that enables the selection of an item to close the dropdown or not.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Defines whether or not a selected item is shown in the input after it was selected.
+     * @default true
+     */
+    showSelectedItemsInInput?: boolean;
+    /**
+     * Sets autocomplete value for autosuggest forms.
+     */
+    autoComplete?: string;
+    /**
+     * Adds a list of input-addons elements in front of the input.
+     */
+    leadingInputAddons?: React.ReactNode[];
+    /**
+     * Adds a list of input-addons elements after the input.
+     */
+    trailingInputAddons?: React.ReactNode[];
+    /**
+     * Additional class names that are added to the dropdown element.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional class names that are added to the wrapping element.
+     */
+    className?: string;
+};
+export declare const AutoSuggest: (props: AutoSuggestProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoSuggest;