@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/teaser/TeaserContainer.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import classNames from 'classnames';
+const getGridClasses = (amount) => {
+    switch (amount) {
+        case 1:
+            return 'col-12';
+        case 2:
+            return 'col-12 col-sm-6';
+        case 3:
+            return 'col-12 col-md-4';
+        case 4:
+            return 'col-12 col-md-6 col-lg-3';
+        case 6:
+            return 'col-12 col-sm-4 col-lg-2';
+        case 12:
+            return 'col-12 col-sm-1';
+        default:
+            return 'col-12';
+    }
+};
+const TeaserContainer = (props) => {
+    const { className, teaserPerRow, children, columnClassName } = props;
+    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);
+    const columnClassNames = teaserPerRow
+        ? getGridClasses(teaserPerRow)
+        : getGridClasses(Children.count(children) || 1);
+    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);
+    return (_jsx("div", { className: rowClassNames, children: Children.map(children, child => {
+            return _jsx("div", { className: aggregatedColumnClassNames, children: child });
+        }) }));
+};
+export default TeaserContainer;

package/src/components/timepicker/TimePicker.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export type TimePickerProps = {
+    /**
+     * Value of the time as string. Note, when value is given the component is treated as controlled.
+     */
+    value?: string;
+    /**
+     * Callback function when the value changes and is a valid time format.
+     *
+     * If not it handles the state internally until the time is valid and filled.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Defines whether to always show the input mask placeholder.
+     *
+     * @default true
+     */
+    alwaysShowMask?: boolean;
+    /**
+     * Defines whether to show the input icon.
+     *
+     * @default false
+     */
+    showIcon?: boolean;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Feedback message width.
+     *
+     * @default 'normal'
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+    /**
+     * Additional properties to be set on the input element.
+     */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const TimePicker: (props: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/src/components/timepicker/TimePicker.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IMask, IMaskInput } from 'react-imask';
+import classNames from 'classnames';
+import isNil from 'lodash/fp/isNil';
+import isEmpty from 'lodash/fp/isEmpty';
+import moment from 'moment';
+import noop from 'lodash/fp/noop';
+import invariant from 'tiny-invariant';
+const MINUTES_OFFSET = 15;
+const mask = '00:00';
+const fullRegexp = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/;
+const getPadded = (value) => (value >= 10 ? `${value}` : `0${value}`);
+const formatTimeString = (hours, minutes) => `${getPadded(hours)}:${getPadded(minutes)}`;
+const roundedUp = (time, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;
+const getInitialTime = () => {
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return formatTimeString(hours, minutes);
+};
+const isTimeValid = (value) => fullRegexp.test(value);
+const isControlledAndValid = (value) => {
+    const hasExternalValue = !isNil(value);
+    const isValid = isEmpty(value) || isTimeValid(value);
+    if (hasExternalValue && !isValid) {
+        invariant(false, 'Wrong time format. Please pass in value with the following format: "hh:mm".');
+    }
+    return hasExternalValue && isValid;
+};
+const TimePicker = (props) => {
+    const { value, onChange = noop, alwaysShowMask = true, showIcon = false, errorMessage, warningMessage, messageWhiteSpace = 'normal', className = '', inputProps = {}, ...remainingProps } = props;
+    const initialTime = isControlledAndValid(value) ? value : getInitialTime();
+    const [timeValue, setTimeValue] = useState(initialTime);
+    // Update internal time value from outside when used as a controlled component
+    useEffect(() => {
+        if (isControlledAndValid(value)) {
+            setTimeValue(value);
+            onChange(value);
+        }
+    }, [value]);
+    const handleFocus = (event) => {
+        const input = event.target;
+        // Check if value is empty or partially filled
+        if (!input.value || input.value.startsWith('-')) {
+            // Move cursor to the first empty position (usually 0)
+            // Timeout needed to wait for IMask internal focus handling
+            setTimeout(() => {
+                input.setSelectionRange(0, 0);
+            }, 0);
+        }
+        // If you want to preserve custom onFocus from props
+        inputProps.onFocus?.(event);
+    };
+    const handleAcceptTime = (val, maskRef) => {
+        setTimeValue(val);
+        if (maskRef.masked.isComplete) {
+            onChange(val);
+        }
+    };
+    const isValid = isTimeValid(timeValue);
+    const handleIncrease = () => {
+        const time = moment(`2020-01-01 ${timeValue}`);
+        const rounded = roundedUp(time);
+        time.minute(rounded).second(0);
+        time.add(MINUTES_OFFSET, 'minutes');
+        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());
+        setTimeValue(updatedTimeValue);
+        onChange(updatedTimeValue);
+    };
+    const handleDecrease = () => {
+        const time = moment(`2020-01-01 ${timeValue}`);
+        const rounded = roundedUp(time);
+        time.minute(rounded).second(0);
+        time.subtract(MINUTES_OFFSET, 'minutes');
+        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());
+        setTimeValue(updatedTimeValue);
+        onChange(updatedTimeValue);
+    };
+    const { className: inputClassName, ...otherInputProps } = inputProps;
+    const hasFeedback = errorMessage || warningMessage;
+    return (_jsxs("div", { ...remainingProps, className: classNames('TimePicker', 'input-group', className), children: [showIcon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [_jsx(IMaskInput, { ...otherInputProps, className: classNames('TimePickerInput', 'form-control', inputClassName), 
+                        // mask={mask}
+                        mask: 'HH:MM', blocks: {
+                            HH: {
+                                mask: IMask.MaskedRange,
+                                from: 0,
+                                to: 23,
+                                maxLength: 2,
+                            },
+                            MM: {
+                                mask: IMask.MaskedRange,
+                                from: 0,
+                                to: 59,
+                                maxLength: 2,
+                            },
+                        }, value: timeValue, onAccept: handleAcceptTime, onFocus: handleFocus, lazy: !alwaysShowMask, placeholderChar: '-', overwrite: true }), hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && (_jsxs("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [_jsx("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), _jsx("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
+};
+export default TimePicker;

package/src/components/tooltip/SimpleTooltip.d.ts

@@ -0,0 +1,39 @@
+import React, { type MutableRefObject, type PropsWithChildren } from 'react';
+import { type TooltipProps } from './Tooltip';
+import { type TriggerType } from '../../values/Trigger';
+export type delayProp = {
+    show: number;
+    hide: number;
+};
+export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
+    /**
+     * The tooltip content.
+     */
+    content: string | React.ReactNode;
+    /**
+     * Specify which action or actions trigger Overlay visibility.
+     * Possible values are: `hover`, `click`, `focus`
+     * @default 'hover'
+     */
+    trigger?: TriggerType;
+    /**
+     * The react ref object assigned to the target of the tooltip.
+     */
+    targetRef?: MutableRefObject<HTMLDivElement>;
+    /**
+     * A millisecond delay amount to show the Overlay once triggered.
+     * If passed an Object, you can control the show and hide timeouts individually.
+     */
+    delay?: number | delayProp;
+    /**
+     * A Popper.js config object passed to the the underlying popper instance.
+     */
+    popperConfig?: object;
+};
+declare const SimpleTooltip: {
+    (props: PropsWithChildren<SimpleTooltipProps>): import("react/jsx-runtime").JSX.Element;
+    TRIGGER_CLICK: "click";
+    TRIGGER_HOVER: "hover";
+    TRIGGER_FOCUS: "focus";
+};
+export default SimpleTooltip;

package/src/components/tooltip/SimpleTooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tooltip from './Tooltip';
+import OverlayTrigger from '../overlay/OverlayTrigger';
+import { PLACEMENT } from '../../values/Placement';
+import { TRIGGER } from '../../values/Trigger';
+const SimpleTooltip = (props) => {
+    const { children, placement = PLACEMENT.AUTO, trigger, content, delay, popperConfig, targetRef, ...remainingProps } = props;
+    return (_jsx(OverlayTrigger, { placement: placement, trigger: trigger, overlay: _jsx(Tooltip, { ...remainingProps, ref: targetRef, children: content }), delay: delay, popperConfig: popperConfig, children: children }));
+};
+SimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;
+SimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;
+SimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;
+export default SimpleTooltip;

package/src/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,68 @@
+import { type CSSProperties, type PropsWithChildren, type HTMLAttributes } from 'react';
+import { PLACEMENT } from '../../values/Placement';
+import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
+import type { ObjectValues } from '../../utils/ObjectValues';
+import type { RefComponent } from '../../utils/RefComponent';
+declare const STYLE_MAP: {
+    readonly STYLE_DEFAULT: "default";
+    readonly STYLE_ONBOARDING: "onboarding";
+};
+declare const TEXT_ALIGNMENT_MAP: {
+    readonly TEXT_ALIGNMENT_LEFT: "left";
+    readonly TEXT_ALIGNMENT_CENTER: "center";
+    readonly TEXT_ALIGNMENT_RIGHT: "right";
+};
+export type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
+export type TooltipProps = {
+    /**
+     * An HTML id attribute, necessary for accessibility.
+     */
+    id?: string;
+    /**
+     * Sets the direction the Tooltip is positioned towards. This is generally provided by the
+     * OverlayTrigger component positioning the tooltip.
+     * @default 'bottom'
+     */
+    placement?: ObjectValues<typeof PLACEMENT>;
+    /**
+     * Defines the position of the text content.
+     * Possible values are: `"center"` | `"left"` | `"right"`
+     * @default 'center'
+     */
+    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;
+    /**
+     * Defines the look of the tooltip.
+     * Possible values are: `default` and `onboarding`
+     * @default 'default'
+     */
+    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;
+    /**
+     * Defines the width of 'the tooltip.
+     * Possible values are: 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500
+     */
+    width?: TooltipWidth;
+    /**
+     * Render Tooltips on mobile devices.
+     * @default false
+     */
+    allowOnTouch?: boolean;
+    /**
+     * Additional props assigned to the arrow element. Internally used.
+     */
+    arrowProps?: Record<string, unknown>;
+    /**
+     * Additional style properties assigned to the wrapper element.
+     */
+    style?: CSSProperties;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+    /**
+     * Additional classes to be set on the inner element.
+     */
+    innerClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;
+export type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> & typeof STYLE_MAP & typeof PLACEMENT & typeof TEXT_ALIGNMENT_MAP;
+declare const Tooltip: TooltipType;
+export default Tooltip;

package/src/components/tooltip/Tooltip.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, forwardRef, } from 'react';
+import classNames from 'classnames';
+import omit from 'lodash/fp/omit';
+import { isDesktop } from '../../utils/deviceUtils';
+import { PLACEMENT } from '../../values/Placement';
+import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
+const STYLE_MAP = {
+    STYLE_DEFAULT: 'default',
+    STYLE_ONBOARDING: 'onboarding',
+};
+const TEXT_ALIGNMENT_MAP = {
+    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,
+    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,
+    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,
+};
+const Tooltip = forwardRef((props, ref) => {
+    const { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto', ...remainingProps } = omit(['popper', 'positionLeft', 'positionTop'], props);
+    // Mount the component but don't show it yet via CSS.
+    // After it is mounted, we set the visibility class to use CSS animation
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => setIsMounted(true), []);
+    if (!isDesktop() && !allowOnTouch) {
+        // Workaround: we have to return a DOM node as otherwise the
+        // react-transition library would throw an error on mobile
+        // when triggering a browser reflow and accessing the node directly.
+        return _jsx("span", { className: 'display-none' });
+    }
+    const wrapperClasses = classNames('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, 'fade', isMounted && 'show', className);
+    const innerClasses = classNames('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`, innerClassName && innerClassName);
+    /* eslint-disable react/no-unknown-property */
+    return (_jsxs("div", { ...remainingProps, role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: { ...style }, "data-offset": 20, children: [_jsx("div", { className: 'tooltip-arrow', ...arrowProps }), _jsx("div", { className: innerClasses, children: children })] }));
+});
+// statics
+Object.assign(Tooltip, STYLE_MAP);
+Object.assign(Tooltip, PLACEMENT); // is keyed as-is
+Object.assign(Tooltip, TEXT_ALIGNMENT_MAP);
+export default Tooltip;

package/src/components/video/ResponsiveVideo.d.ts

@@ -0,0 +1,33 @@
+declare const FOUR_BY_THREE = "4by3";
+declare const SIXTEEN_BY_NINE = "16by9";
+export type AspectRatio = typeof FOUR_BY_THREE | typeof SIXTEEN_BY_NINE;
+export type ResponsiveVideoProps = {
+    /**
+     * The link to the source of the video file.
+     */
+    src: string;
+    /**
+     * Defined the aspect ratio of the video.
+     * @default `16by9`
+     *
+     * Possible values are:
+     * `ResponsiveVideo.ASPECT_RATIO_4_BY_3`, `ResponsiveVideo.ASPECT_RATIO_16_BY_9` or
+     * `4by3`, `16by9`.
+     */
+    aspectRatio: '4by3' | '16by9';
+    /**
+     * Allows the fullscreen feature of the underlying embedded iframe.
+     * @default true
+     */
+    allowFullScreen?: boolean;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const ResponsiveVideo: {
+    (props: ResponsiveVideoProps): import("react/jsx-runtime").JSX.Element;
+    ASPECT_RATIO_4_BY_3: "4by3";
+    ASPECT_RATIO_16_BY_9: "16by9";
+};
+export default ResponsiveVideo;

package/src/components/video/ResponsiveVideo.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const FOUR_BY_THREE = '4by3';
+const SIXTEEN_BY_NINE = '16by9';
+const ResponsiveVideo = (props) => {
+    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;
+    const wrapperClassName = classNames('video-responsive', `video-responsive-${aspectRatio}`, className && className);
+    return (_jsx("div", { className: wrapperClassName, children: _jsx("iframe", { src: src, allowFullScreen: allowFullScreen }) }));
+};
+ResponsiveVideo.ASPECT_RATIO_4_BY_3 = FOUR_BY_THREE;
+ResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE;
+export default ResponsiveVideo;

package/src/components/virtualList/VirtualList.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+export type VirtualListProps<T> = {
+    /**
+     * The array of items to be rendered in the list.
+     */
+    items: T[];
+    /**
+     * A function that renders an item given its data and index.
+     *
+     * @param item
+     * @param index
+     * @returns
+     */
+    renderItem: (item: T, index: number) => React.ReactElement;
+    /**
+     * The number of items to render outside the visible area for smoother scrolling.
+     *
+     * @default 3
+     */
+    overscanCount?: number;
+    /**
+     * The default height for items if their height cannot be determined.
+     *
+     * @default 50
+     */
+    defaultHeight?: number;
+    /**
+     * Optional ref to an external scroll container.
+     * Use this when VirtualList is inside a scrollable container.
+     */
+    scrollContainerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Additional classNames for the container of the list items.
+     */
+    containerClassName?: string;
+    /**
+     * Additional classNames for each individual list item wrapper.
+     * This wrapper is required for proper positioning each item in the list using an absolute top value.
+     */
+    listItemWrapperClassName?: string;
+    /**
+     * Additional classNames for the outer list container
+     */
+    className?: string;
+};
+export type ItemHeight = number;
+export type ItemIndex = number;
+export type VisibleRange = {
+    start: number;
+    end: number;
+};
+export type VirtualListState = {
+    itemHeights: Record<ItemIndex, ItemHeight>;
+    visibleRange: VisibleRange;
+    scrollTop: number;
+    viewportHeight: number;
+};
+export declare const VirtualList: <T>(props: VirtualListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default VirtualList;

package/src/components/virtualList/VirtualList.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useRef, useState, useEffect, useCallback } from 'react';
+import VirtualListItemWrapper from './VirtualListItemWrapper';
+import useWindowResize from '../../hooks/useWindowResize';
+import useVirtualListResizeObserver from './useVirtualListResizeObserver';
+export const VirtualList = (props) => {
+    const { items, renderItem, overscanCount = 3, defaultHeight = 50, scrollContainerRef, containerClassName = '', listItemWrapperClassName = '', className = '', ...remainingProps } = props;
+    const [state, setState] = useState({
+        itemHeights: {},
+        visibleRange: { start: 0, end: 10 },
+        scrollTop: 0,
+        viewportHeight: 0,
+    });
+    const containerRef = useRef(null);
+    const itemsRef = useRef(null);
+    const lastMeasuredIndexRef = useRef(-1);
+    // Get the actual scroll container - either external or internal
+    const getScrollContainer = useCallback(() => {
+        return scrollContainerRef?.current || containerRef.current;
+    }, [scrollContainerRef]);
+    // Ensure we never return NaN or invalid heights
+    const getSafeHeight = useCallback((height) => {
+        return !Number.isNaN(height) && height > 0 ? height : defaultHeight;
+    }, [defaultHeight]);
+    const getItemPosition = useCallback((index) => {
+        let position = 0;
+        for (let i = 0; i < index; i++) {
+            const height = state.itemHeights[i] ?? defaultHeight;
+            position += getSafeHeight(height);
+        }
+        return position;
+    }, [state.itemHeights, getSafeHeight, defaultHeight]);
+    const getTotalHeight = useCallback(() => {
+        const measuredHeight = Object.values(state.itemHeights).reduce((sum, height) => sum + getSafeHeight(height), 0);
+        const measuredCount = Object.keys(state.itemHeights).length;
+        const averageHeight = measuredCount > 0 ? getSafeHeight(measuredHeight / measuredCount) : defaultHeight;
+        const unmeasuredCount = items.length - measuredCount;
+        return getSafeHeight(measuredHeight + unmeasuredCount * averageHeight);
+    }, [items.length, state.itemHeights, getSafeHeight, defaultHeight]);
+    const calculateVisibleRange = useCallback(() => {
+        const scrollContainer = getScrollContainer();
+        if (!scrollContainer) {
+            return state.visibleRange;
+        }
+        const viewportHeight = scrollContainer.clientHeight;
+        const scrollTop = scrollContainer.scrollTop;
+        let start = 0;
+        let currentPosition = 0;
+        while (start < items.length) {
+            const height = getSafeHeight(state.itemHeights[start] ?? defaultHeight);
+            if (currentPosition + height > scrollTop - overscanCount * height) {
+                break;
+            }
+            currentPosition += height;
+            start++;
+        }
+        let end = start;
+        while (end < items.length) {
+            const height = getSafeHeight(state.itemHeights[end] ?? defaultHeight);
+            if (currentPosition > scrollTop + viewportHeight + overscanCount * height) {
+                break;
+            }
+            currentPosition += height;
+            end++;
+        }
+        return {
+            start: Math.max(0, start - overscanCount),
+            end: Math.min(items.length, end + overscanCount),
+        };
+    }, [
+        items.length,
+        overscanCount,
+        state.itemHeights,
+        state.visibleRange,
+        getSafeHeight,
+        defaultHeight,
+        getScrollContainer,
+    ]);
+    const measureItem = useCallback((index, element) => {
+        const rect = element.getBoundingClientRect();
+        const computedStyle = window.getComputedStyle(element);
+        // Calculate total height with safety checks
+        const totalSafeHeight = getSafeHeight(rect.height +
+            Number.parseFloat(computedStyle.marginTop || '0') +
+            Number.parseFloat(computedStyle.marginBottom || '0'));
+        setState(prev => {
+            if (prev.itemHeights[index] === totalSafeHeight) {
+                return prev;
+            }
+            return {
+                ...prev,
+                itemHeights: { ...prev.itemHeights, [index]: totalSafeHeight },
+            };
+        });
+        lastMeasuredIndexRef.current = Math.max(lastMeasuredIndexRef.current, index);
+    }, [getSafeHeight]);
+    useVirtualListResizeObserver(itemsRef, measureItem, [state.visibleRange]);
+    const handleScroll = useCallback(() => {
+        const scrollContainer = getScrollContainer();
+        if (!scrollContainer) {
+            return;
+        }
+        const newRange = calculateVisibleRange();
+        setState(prev => ({
+            ...prev,
+            visibleRange: newRange,
+            scrollTop: scrollContainer.scrollTop,
+            viewportHeight: scrollContainer.clientHeight,
+        }));
+    }, [calculateVisibleRange, getScrollContainer]);
+    // Register container scroll event
+    useEffect(() => {
+        const scrollContainer = getScrollContainer();
+        if (!scrollContainer) {
+            return;
+        }
+        scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+        return () => scrollContainer.removeEventListener('scroll', handleScroll);
+    }, [handleScroll, getScrollContainer]);
+    // On window resize, update scroll position
+    useWindowResize(handleScroll);
+    const renderItemWithPosition = (item, index) => {
+        const renderedItem = renderItem(item, index);
+        const translateY = getItemPosition(index);
+        return (_jsx(VirtualListItemWrapper, { "data-index": index, translateY: translateY, className: listItemWrapperClassName, children: renderedItem }, index));
+    };
+    const { start, end } = state.visibleRange;
+    const totalHeight = getTotalHeight();
+    // Adjust the root element style based on whether we're using an external scroll container
+    const rootStyle = {
+        height: scrollContainerRef ? totalHeight : '100%',
+        position: 'relative',
+        overflow: scrollContainerRef ? 'visible' : 'auto',
+    };
+    return (_jsx("div", { ...remainingProps, ref: containerRef, className: `VirtualList overflow-y-auto ${className}`, style: rootStyle, children: _jsx("div", { className: 'position-relative', style: {
+                height: scrollContainerRef ? 'auto' : totalHeight,
+            }, children: _jsx("div", { ref: itemsRef, className: `VirtualListItemContainer ${containerClassName}`, children: items.slice(start, end).map((item, idx) => renderItemWithPosition(item, start + idx)) }) }) }));
+};
+export default VirtualList;

package/src/components/virtualList/VirtualListItemWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type VirtualListItemWrapperProps = {
+    translateY: number;
+    'data-index': number;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const VirtualListItemWrapper: React.ForwardRefExoticComponent<VirtualListItemWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default VirtualListItemWrapper;

package/src/components/virtualList/VirtualListItemWrapper.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const VirtualListItemWrapper = React.forwardRef((props, ref) => {
+    const { translateY, children, className = '', style = {}, ...remainingProps } = props;
+    return (_jsx("div", { ref: ref, className: `VirtualListItemWrapper ${className}`, style: {
+            ...style,
+            position: 'absolute',
+            transform: `translateY(${translateY}px)`,
+            width: '100%',
+            willChange: 'transform',
+        }, ...remainingProps, children: children }));
+});
+export default VirtualListItemWrapper;

package/src/components/virtualList/useVirtualListResizeObserver.d.ts

@@ -0,0 +1,2 @@
+declare const useVirtualListResizeObserver: (itemsRef: React.RefObject<HTMLDivElement>, measureItem: (index: number, element: HTMLElement) => void, dependencies?: any[]) => void;
+export default useVirtualListResizeObserver;

package/src/components/virtualList/useVirtualListResizeObserver.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useCallback } from 'react';
+const useVirtualListResizeObserver = (itemsRef, measureItem, dependencies = []) => {
+    const resizeObserverRef = useRef(null);
+    const measureItems = useCallback(() => {
+        if (!itemsRef.current) {
+            return;
+        }
+        const children = Array.from(itemsRef.current.children);
+        children.forEach(child => {
+            const index = Number.parseInt(child.getAttribute('data-index') || '', 10);
+            if (!Number.isNaN(index)) {
+                measureItem(index, child);
+            }
+        });
+    }, [measureItem]);
+    // Setup resize observer
+    useEffect(() => {
+        if (!itemsRef.current) {
+            return;
+        }
+        resizeObserverRef.current = new ResizeObserver(() => {
+            measureItems();
+        });
+        return () => resizeObserverRef.current?.disconnect();
+    }, [measureItems]);
+    // Observe children
+    useEffect(() => {
+        if (!itemsRef.current || !resizeObserverRef.current) {
+            return;
+        }
+        const children = Array.from(itemsRef.current.children);
+        children.forEach(child => {
+            resizeObserverRef.current?.observe(child);
+        });
+        // Initial measurement
+        measureItems();
+        return () => {
+            children.forEach(child => {
+                resizeObserverRef.current?.unobserve(child);
+            });
+        };
+    }, [...dependencies, measureItems]);
+};
+export default useVirtualListResizeObserver;