@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/table/TableToolbar.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
-const TableToolbar = ({ className, children }) => (_jsx("div", Object.assign({ className: classNames('table-toolbar', className) }, { children: children })));
+const TableToolbar = ({ className, children }) => (_jsx("div", { className: classNames('table-toolbar', className), children: children }));
 export default TableToolbar;

package/components/table/TableViewToggles.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
@@ -6,7 +5,7 @@ import noop from 'lodash/noop';
 import OverlayTrigger from '../overlay/OverlayTrigger';
 import Tooltip from '../tooltip/Tooltip';
 // TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
-const wrapWithTooltip = (tooltipContent, element) => (_jsx(OverlayTrigger, Object.assign({ placement: 'bottom', overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', allowOnTouch: true }, { children: tooltipContent })) }, { children: element })));
+const wrapWithTooltip = (tooltipContent, element) => (_jsx(OverlayTrigger, { placement: 'bottom', overlay: _jsx(Tooltip, { id: 'tooltip', allowOnTouch: true, children: tooltipContent }), children: element }));
 const typeIcons = {
     TABLE: 'rioglyph-table-view',
     SINGLE_CARD: 'rioglyph-th-list',
@@ -18,11 +17,11 @@ const TypeButton = (props) => {
         return null;
     }
     const classes = classNames('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none', viewType === currentViewType && 'active');
-    const button = (_jsx("button", Object.assign({ className: classes, type: 'button', onClick: () => onClick(viewType) }, { children: _jsx("span", { className: `rioglyph ${typeIcons[viewType]}` }) })));
+    const button = (_jsx("button", { className: classes, type: 'button', onClick: () => onClick(viewType), children: _jsx("span", { className: `rioglyph ${typeIcons[viewType]}` }) }));
     return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;
 };
 const TableViewToggles = (props) => {
-    const { viewType, initialViewType = 'TABLE', disabledViewTypes = [], onViewTypeChange = noop, tableViewTooltipContent, singleCardViewTooltipContent, multiCardsViewTooltipContent, disabled = false, className } = props, remainingProps = __rest(props, ["viewType", "initialViewType", "disabledViewTypes", "onViewTypeChange", "tableViewTooltipContent", "singleCardViewTooltipContent", "multiCardsViewTooltipContent", "disabled", "className"]);
+    const { viewType, initialViewType = 'TABLE', disabledViewTypes = [], onViewTypeChange = noop, tableViewTooltipContent, singleCardViewTooltipContent, multiCardsViewTooltipContent, disabled = false, className, ...remainingProps } = props;
     const [internalViewType, setInternalViewType] = useState(initialViewType);
     // update internal state when external state changes - controlled component case
     useEffect(() => {
@@ -35,7 +34,7 @@ const TableViewToggles = (props) => {
         onViewTypeChange(vt);
     };
     const wrapperClassNames = classNames('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx(TypeButton, { viewType: 'TABLE', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: tableViewTooltipContent, onClick: setViewType, disabled: disabled }), _jsx(TypeButton, { viewType: 'SINGLE_CARD', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: singleCardViewTooltipContent, onClick: setViewType, disabled: disabled }), _jsx(TypeButton, { viewType: 'MULTI_CARDS', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: multiCardsViewTooltipContent, onClick: setViewType, disabled: disabled })] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, children: [_jsx(TypeButton, { viewType: 'TABLE', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: tableViewTooltipContent, onClick: setViewType, disabled: disabled }), _jsx(TypeButton, { viewType: 'SINGLE_CARD', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: singleCardViewTooltipContent, onClick: setViewType, disabled: disabled }), _jsx(TypeButton, { viewType: 'MULTI_CARDS', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: multiCardsViewTooltipContent, onClick: setViewType, disabled: disabled })] }));
 };
 // Don't export values as string but as a distinct union type
 TableViewToggles.VIEW_TYPE_TABLE = 'TABLE';

package/components/tag/Tag.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 const Tag = forwardRef((props, ref) => {
-    const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = __rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
+    const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className, ...remainingProps } = props;
     const tagClasses = classNames('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', className);
-    return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: tagClasses }, { children: _jsx("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
+    return (_jsx("div", { ref: ref, ...remainingProps, className: tagClasses, children: _jsx("div", { className: 'tag-inner', children: children }) }));
 });
 export default Tag;

package/components/tag/TagList.js

@@ -1,12 +1,9 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 const TagList = (props) => {
-    const { children, inline = true, autoTagWidth = false, tagsPerRow } = props, remainingProps = __rest(props, ["children", "inline", "autoTagWidth", "tagsPerRow"]);
+    const { children, inline = true, autoTagWidth = false, tagsPerRow, ...remainingProps } = props;
     const tagListClasses = classNames('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className);
-    const wrappedChildren = _jsx("div", Object.assign({ className: `tags-per-row-${tagsPerRow}` }, { children: children }));
-    return (_jsx("div", Object.assign({}, remainingProps, { className: tagListClasses }, { children: tagsPerRow ? wrappedChildren : children })));
+    const wrappedChildren = _jsx("div", { className: `tags-per-row-${tagsPerRow}`, children: children });
+    return (_jsx("div", { ...remainingProps, className: tagListClasses, children: tagsPerRow ? wrappedChildren : children }));
 };
 export default TagList;

package/components/tagManager/CustomSuggestionItem.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 const CustomSuggestionItem = ({ value, placeholder }) => {
     const wrapperClassNames = classNames('display-flex align-items-center padding-top-5 padding-bottom-5', !value && 'text-color-gray');
     const iconClassNames = classNames('margin-left--5 margin-right-5 margin-top--1 rioglyph', value ? 'rioglyph-plus' : 'rioglyph-arrow-up');
-    return (_jsxs("span", Object.assign({ className: wrapperClassNames }, { children: [_jsx("span", { className: iconClassNames }), _jsx("span", Object.assign({ className: 'text-italic' }, { children: value || placeholder }))] })));
+    return (_jsxs("span", { className: wrapperClassNames, children: [_jsx("span", { className: iconClassNames }), _jsx("span", { className: 'text-italic', children: value || placeholder })] }));
 };
 export default CustomSuggestionItem;

package/components/tagManager/TagManager.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
@@ -53,7 +52,7 @@ const filterSuggestions = (suggestions, selectedTagNames, value = '') => suggest
         !suggestion.customSuggestion);
 });
 const TagManager = (props) => {
-    const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange = noop, useCustomTags = true, noItemMessage, showInput = true } = props, remainingProps = __rest(props, ["tagList", "tagSuggestions", "placeholder", "className", "customTagPlaceholder", "dropdownSeparatorText", "onTagListChange", "useCustomTags", "noItemMessage", "showInput"]);
+    const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange = noop, useCustomTags = true, noItemMessage, showInput = true, ...remainingProps } = props;
     const [tags, setTags] = useState(tagList);
     const [inputValue, setInputValue] = useState('');
     const [currentSuggestions, setCurrentSuggestions] = useState([]);
@@ -115,6 +114,6 @@ const TagManager = (props) => {
         tabIndex: 1,
     };
     const autoSuggestClasses = classNames(!isEmpty(tags) && 'margin-bottom-10');
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classNames('TagManager', className) }, { children: [showInput && (_jsx(AutoSuggest, { className: autoSuggestClasses, inputProps: inputProps, suggestions: currentSuggestions, onSuggestionSelected: handleSuggestionSelected, onSuggestionsFetchRequested: handleSuggestionsChange, openOnFocus: true, noItemMessage: noItemMessage })), _jsx(TagManagerItemList, { tags: tags, onRemoveFromTagList: handleRemoveFromTagList })] })));
+    return (_jsxs("div", { ...remainingProps, className: classNames('TagManager', className), children: [showInput && (_jsx(AutoSuggest, { className: autoSuggestClasses, inputProps: inputProps, suggestions: currentSuggestions, onSuggestionSelected: handleSuggestionSelected, onSuggestionsFetchRequested: handleSuggestionsChange, openOnFocus: true, noItemMessage: noItemMessage })), _jsx(TagManagerItemList, { tags: tags, onRemoveFromTagList: handleRemoveFromTagList })] }));
 };
 export default TagManager;

package/components/tagManager/TagManagerItemList.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import classNames from 'classnames';
 import TagList from '../tag/TagList';
 import Tag from '../tag/Tag';
 const TagManagerItemList = (props) => {
     const { tags, onRemoveFromTagList = () => { } } = props;
-    return (_jsx(TagList, Object.assign({ inline: false }, { children: tags.map(tag => {
+    return (_jsx(TagList, { inline: false, children: tags.map(tag => {
             const tagClasses = classNames(tag.toAdd && 'border-color-success text-color-success', tag.toRemove && 'border-color-danger text-color-danger');
-            return (_jsx(Tag, Object.assign({ className: tagClasses, deletable: true, round: false, onClick: () => onRemoveFromTagList(tag) }, { children: tag.label }), tag.label));
-        }) })));
+            return (_jsx(Tag, { className: tagClasses, deletable: true, round: false, onClick: () => onRemoveFromTagList(tag), children: tag.label }, tag.label));
+        }) }));
 };
 export default TagManagerItemList;

package/components/teaser/Teaser.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import Button from '../button/Button';
@@ -8,49 +6,48 @@ const Teaser = (props) => {
     const { segmentation, verticalAlignment = 'top' } = props;
     const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';
     if (segmentation === '100') {
-        return _jsx(SingleColumnTeaser, Object.assign({ alignmentClass: alignmentClass }, props));
+        return _jsx(SingleColumnTeaser, { alignmentClass: alignmentClass, ...props });
     }
     // Thumbnail based layout for multiple segments or multiple teaser in a row
-    return _jsx(MultipleSegmentsOrRowsTeaser, Object.assign({ alignmentClass: alignmentClass }, props));
+    return _jsx(MultipleSegmentsOrRowsTeaser, { alignmentClass: alignmentClass, ...props });
 };
 export default Teaser;
 const SingleColumnTeaser = (props) => {
     const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;
     const wrapperClassNames = classNames('teaser panel panel-default panel-body padding-20 margin-bottom-20 text-center', alignmentClass, className);
-    return (_jsxs("div", Object.assign({ className: wrapperClassNames }, { children: [_jsx(TeaserHeadline, { headline: headline, segmentation: segmentation }), _jsx(TeaserImageComp, { image: image, segmentation: segmentation }), _jsx(TeaserContent, { content: content, segmentation: segmentation }), _jsx(TeaserButtonComp, { button: button }), _jsx(TeaserFooter, { footer: footer })] })));
+    return (_jsxs("div", { className: wrapperClassNames, children: [_jsx(TeaserHeadline, { headline: headline, segmentation: segmentation }), _jsx(TeaserImageComp, { image: image, segmentation: segmentation }), _jsx(TeaserContent, { content: content, segmentation: segmentation }), _jsx(TeaserButtonComp, { button: button }), _jsx(TeaserFooter, { footer: footer })] }));
 };
 const MultipleSegmentsOrRowsTeaser = (props) => {
     const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;
     const wrapperClasses = classNames('teaser thumbnail display-flex-sm', !segmentation && 'flex-column height-100pct-sm', // only for multiple teasers in a row
     alignmentClass, className);
-    const captionClasses = classNames('caption', (image === null || image === void 0 ? void 0 : image.align) === 'left' && 'flex-order-2-sm', (image === null || image === void 0 ? void 0 : image.align) === 'right' && 'flex-order-1-sm', segmentation === '50' && 'width-50pct-sm', segmentation === '25:75' && 'width-50pct-sm width-25pct-lg', segmentation === '75:25' && 'width-50pct-sm width-75pct-lg', !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm');
-    return (_jsxs("div", Object.assign({ className: wrapperClasses }, { children: [_jsx(TeaserImageComp, { image: image, segmentation: segmentation }), (headline || content || button) && (_jsxs("div", Object.assign({ className: captionClasses }, { children: [_jsx(TeaserHeadline, { headline: headline, segmentation: segmentation }), _jsx(TeaserContent, { content: content, segmentation: segmentation }), _jsx(TeaserButtonComp, { button: button }), _jsx(TeaserFooter, { footer: footer })] })))] })));
+    const captionClasses = classNames('caption', image?.align === 'left' && 'flex-order-2-sm', image?.align === 'right' && 'flex-order-1-sm', segmentation === '50' && 'width-50pct-sm', segmentation === '25:75' && 'width-50pct-sm width-25pct-lg', segmentation === '75:25' && 'width-50pct-sm width-75pct-lg', !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm');
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsx(TeaserImageComp, { image: image, segmentation: segmentation }), (headline || content || button) && (_jsxs("div", { className: captionClasses, children: [_jsx(TeaserHeadline, { headline: headline, segmentation: segmentation }), _jsx(TeaserContent, { content: content, segmentation: segmentation }), _jsx(TeaserButtonComp, { button: button }), _jsx(TeaserFooter, { footer: footer })] }))] }));
 };
 const TeaserHeadline = ({ headline, segmentation }) => {
     if (!headline) {
         return null;
     }
-    return _jsx("h2", Object.assign({ className: segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5' }, { children: headline }));
+    return _jsx("h2", { className: segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5', children: headline });
 };
 const TeaserContent = ({ content, segmentation }) => {
     if (!content) {
         return null;
     }
     const classes = classNames('teaser-content-wrapper text-size-16', segmentation === '100' ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm');
-    return _jsx("div", Object.assign({ className: classes }, { children: content }));
+    return _jsx("div", { className: classes, children: content });
 };
 const TeaserFooter = ({ footer }) => {
     if (!footer) {
         return null;
     }
-    return _jsx("div", Object.assign({ className: 'teaser-footer-wrapper' }, { children: footer }));
+    return _jsx("div", { className: 'teaser-footer-wrapper', children: footer });
 };
 const TeaserButtonComp = ({ button }) => {
-    var _a;
     if (!button) {
         return null;
     }
-    return (_jsx("span", { children: _jsx(Button, Object.assign({ bsStyle: (_a = button.bsStyle) !== null && _a !== void 0 ? _a : 'primary', className: button.className, onClick: button.onClick }, { children: button.text })) }));
+    return (_jsx("span", { children: _jsx(Button, { bsStyle: button.bsStyle ?? 'primary', className: button.className, onClick: button.onClick, children: button.text }) }));
 };
 /* eslint-disable max-len */
 const placeholderImage1by1 = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=';
@@ -65,7 +62,6 @@ const teaserPlaceholderImages = {
     '16:9': placeholderImage16by9,
 };
 const TeaserImageComp = ({ image, segmentation }) => {
-    var _a, _b, _c;
     if (!image) {
         return null;
     }
@@ -74,6 +70,6 @@ const TeaserImageComp = ({ image, segmentation }) => {
         specificClassNames = classNames(image.align === 'left' && 'flex-order-1-sm padding-left-20-sm', image.align === 'right' && 'flex-order-2-sm padding-right-20-sm', segmentation === '50' && 'width-50pct-sm', segmentation === '25:75' && 'width-50pct-sm width-75pct-lg', segmentation === '75:25' && 'width-50pct-sm width-25pct-lg', segmentation && 'padding-top-20-sm padding-bottom-20-sm');
     }
     const imageWrapperClassNames = classNames('teaser-image-wrapper', specificClassNames, image.className && image.className);
-    const callback = (_a = image === null || image === void 0 ? void 0 : image.onClick) !== null && _a !== void 0 ? _a : noop;
-    return (_jsx("div", Object.assign({ className: imageWrapperClassNames, onClick: callback }, { children: _jsx("img", { className: 'img-responsive cover center', src: (_b = teaserPlaceholderImages[image.aspectRatio]) !== null && _b !== void 0 ? _b : placeholderImage16by9, alt: (_c = image.alt) !== null && _c !== void 0 ? _c : '', style: { backgroundImage: `url(${image.src})` } }) })));
+    const callback = image?.onClick ?? noop;
+    return (_jsx("div", { className: imageWrapperClassNames, onClick: callback, children: _jsx("img", { className: 'img-responsive cover center', src: teaserPlaceholderImages[image.aspectRatio] ?? placeholderImage16by9, alt: image.alt ?? '', style: { backgroundImage: `url(${image.src})` } }) }));
 };

package/components/teaser/TeaserContainer.js

@@ -26,8 +26,8 @@ const TeaserContainer = (props) => {
         ? getGridClasses(teaserPerRow)
         : getGridClasses(Children.count(children) || 1);
     const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);
-    return (_jsx("div", Object.assign({ className: rowClassNames }, { children: Children.map(children, child => {
-            return _jsx("div", Object.assign({ className: aggregatedColumnClassNames }, { children: child }));
-        }) })));
+    return (_jsx("div", { className: rowClassNames, children: Children.map(children, child => {
+            return _jsx("div", { className: aggregatedColumnClassNames, children: child });
+        }) }));
 };
 export default TeaserContainer;

package/components/timepicker/TimePicker.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
@@ -30,7 +29,7 @@ const isControlledAndValid = (value) => {
     return hasExternalValue && isValid;
 };
 const TimePicker = (props) => {
-    const { value, onChange = noop, alwaysShowMask = true, showIcon = false, errorMessage, warningMessage, messageWhiteSpace = 'normal', className = '', inputProps = {} } = props, remainingProps = __rest(props, ["value", "onChange", "alwaysShowMask", "showIcon", "errorMessage", "warningMessage", "messageWhiteSpace", "className", "inputProps"]);
+    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
@@ -66,8 +65,8 @@ const TimePicker = (props) => {
         setTimeValue(updatedTimeValue);
         onChange(updatedTimeValue);
     };
-    const { className: inputClassName } = inputProps, otherInputProps = __rest(inputProps, ["className"]);
+    const { className: inputClassName, ...otherInputProps } = inputProps;
     const hasFeedback = errorMessage || warningMessage;
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classNames('TimePicker', 'input-group', className) }, { children: [showIcon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) }))), _jsxs("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [_jsx(InputMask, Object.assign({}, otherInputProps, { className: classNames('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask })), 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", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: _jsx("span", { children: errorMessage || warningMessage }) }))] }))] })), isValid && (_jsxs("div", Object.assign({ className: 'TimePickerIncreaseButton input-group-addon' }, { children: [_jsx("div", Object.assign({ className: 'text-color-gray hover-text-color-dark', onClick: handleDecrease }, { children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) })), _jsx("div", Object.assign({ className: 'text-color-gray hover-text-color-dark margin-left-5', onClick: handleIncrease }, { children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) }))] })))] })));
+    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(InputMask, { ...otherInputProps, className: classNames('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask }), 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/components/tooltip/SimpleTooltip.js

@@ -1,14 +1,11 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 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 } = props, remainingProps = __rest(props, ["children", "placement", "trigger", "content", "delay", "popperConfig", "targetRef"]);
-    return (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: trigger, overlay: _jsx(Tooltip, Object.assign({}, remainingProps, { ref: targetRef }, { children: content })), delay: delay, popperConfig: popperConfig }, { children: children })));
+    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;

package/components/tooltip/Tooltip.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, forwardRef, } from 'react';
 import classNames from 'classnames';
@@ -16,7 +15,7 @@ const TEXT_ALIGNMENT_MAP = {
     TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,
 };
 const Tooltip = forwardRef((props, ref) => {
-    const _a = omit(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = __rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "innerClassName", "placement", "style", "textAlignment", "tooltipStyle", "width"]);
+    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);
@@ -30,7 +29,7 @@ const Tooltip = forwardRef((props, ref) => {
     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", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [_jsx("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), _jsx("div", Object.assign({ className: innerClasses }, { children: children }))] })));
+    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);

package/components/video/ResponsiveVideo.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 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", Object.assign({ className: wrapperClassName }, { children: _jsx("iframe", { src: src, allowFullScreen: allowFullScreen }) })));
+    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;

package/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/components/virtualList/VirtualList.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+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/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/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/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/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;