@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/esm/layer/useLayersContextValue.js

@@ -1,16 +1,37 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { useCallback, useContext, useEffect, useMemo } from 'react';
-import { LayersContext } from 'baseui/layer';
+import { LayersContext } from '../baseui/layer';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
 var handlersInitialized = false;
 var docClickHandlers = [];
 var escapeKeyHandlers = [];
+var keyUpHandlers = [];
+var keyDownHandlers = [];
+var keyPressHandlers = [];
 var addEscapeHandler = function (escapeKeyHandler) {
     escapeKeyHandlers.push(escapeKeyHandler);
 };
 var removeEscapeHandler = function (escapeKeyHandler) {
     escapeKeyHandlers = escapeKeyHandlers.filter(function (handler) { return handler !== escapeKeyHandler; });
 };
+var addKeyUpHandler = function (keyUpHandler) {
+    keyUpHandlers.push(keyUpHandler);
+};
+var removeKeyUpHandler = function (keyUpHandler) {
+    keyUpHandlers = keyUpHandlers.filter(function (handler) { return handler !== keyUpHandler; });
+};
+var addKeyDownHandler = function (keyDownHandler) {
+    keyDownHandlers.push(keyDownHandler);
+};
+var removeKeyDownHandler = function (keyDownHandler) {
+    keyDownHandlers = keyDownHandlers.filter(function (handler) { return handler !== keyDownHandler; });
+};
+var addKeyPressHandler = function (keyPressHandler) {
+    keyPressHandlers.push(keyPressHandler);
+};
+var removeKeyPressHandler = function (keyPressHandler) {
+    keyPressHandlers = keyPressHandlers.filter(function (handler) { return handler !== keyPressHandler; });
+};
 var addDocClickHandler = function (docClickHandler) {
     docClickHandlers.push(docClickHandler);
 };
@@ -21,6 +42,9 @@ var resetHandlers = function () {
     handlersInitialized = false;
     docClickHandlers = [];
     escapeKeyHandlers = [];
+    keyUpHandlers = [];
+    keyPressHandlers = [];
+    keyDownHandlers = [];
 };
 var useLayersContextValue = function () {
     var ctxValue = useContext(LayersContext);
@@ -35,20 +59,42 @@ var useLayersContextValue = function () {
                 escapeKeyHandler(event);
             }
         }
+        var keyUpKeyHandler = keyUpHandlers[keyUpHandlers.length - 1];
+        if (keyUpKeyHandler) {
+            keyUpKeyHandler(event);
+        }
+    }, []);
+    var onKeyPress = useCallback(function (event) {
+        var keyPressHandler = keyPressHandlers[keyPressHandlers.length - 1];
+        if (keyPressHandler) {
+            keyPressHandler(event);
+        }
+    }, []);
+    var onKeyDown = useCallback(function (event) {
+        var keyDownHandler = keyDownHandlers[keyDownHandlers.length - 1];
+        if (keyDownHandler) {
+            keyDownHandler(event);
+        }
     }, []);
     useEffect(function () {
         if (handlersInitialized)
             return undefined;
         doc === null || doc === void 0 ? void 0 : doc.addEventListener('keyup', onKeyUp);
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('keypress', onKeyPress);
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('keydown', onKeyDown);
         // using mousedown event so that callback runs before events on children inside of the layer
         doc === null || doc === void 0 ? void 0 : doc.addEventListener('mousedown', onDocumentClick);
         handlersInitialized = true;
         return function () {
             doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keyup', onKeyUp);
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keypress', onKeyPress);
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keydown', onKeyDown);
             doc === null || doc === void 0 ? void 0 : doc.removeEventListener('mousedown', onDocumentClick);
             resetHandlers();
         };
-    }, [doc, onDocumentClick, onKeyUp]);
-    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, [ctxValue]);
+    }, [doc, onDocumentClick, onKeyDown, onKeyPress, onKeyUp]);
+    var contextValues = ctxValue && typeof ctxValue === 'object' ? Object.values(ctxValue) : [];
+    // @ts-ignore
+    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addKeyDownHandler: addKeyDownHandler, removeKeyDownHandler: removeKeyDownHandler, addKeyPressHandler: addKeyPressHandler, removeKeyPressHandler: removeKeyPressHandler, addKeyUpHandler: addKeyUpHandler, removeKeyUpHandler: removeKeyUpHandler, addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, __spreadArray([], __read(contextValues), false));
 };
 export default useLayersContextValue;

package/esm/list/avatar-list-item.d.ts

@@ -1,33 +1,23 @@
 /// <reference types="react" />
 import { AvatarProps } from '../avatar';
+import { ListItemProps } from './types';
+import { Override } from '../overrides';
 declare type SharedProps = {
     $item?: Record<string, any>;
     $labelKey?: string;
     $valueKey?: string;
     $multi?: boolean;
 };
-declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
-} & {
-    alignItems?: import("./types").AlignItems | undefined;
-    autoFocus?: boolean | undefined;
-    button?: boolean | undefined;
-    children?: import("react").ReactNode;
-    disabled?: boolean | undefined;
-    endEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
-    highlighted?: boolean | undefined;
-    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
-    overrides?: {
-        ChildContainer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        EndEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        Root?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        StartEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-    } | undefined;
-    selected?: boolean | undefined;
-    startEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
-} & SharedProps & {
+declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "overrides"> & SharedProps & {
     avatarProps: AvatarProps;
+    overrides?: ({
+        ChildContainer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        EndEnhancer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        Root?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StartEnhancer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StatefulTooltip?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+    } & {
+        Avatar?: Override<Record<string, any>> | undefined;
+    }) | undefined;
 } & import("react").RefAttributes<HTMLLIElement>>;
 export default AvatarListItem;

package/esm/list/avatar-list-item.js

@@ -1,18 +1,16 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Avatar } from '../avatar';
-import { mergeOverrides } from '../overrides';
+import { Stack } from '../stack';
 import ListItem from './list-item';
+import { useOverrides } from '../overrides';
 var AvatarListItem = forwardRef(function (_a, ref) {
-    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, menuItemProps = __rest(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps"]);
+    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, overrides = _a.overrides, menuItemProps = __rest(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps", "overrides"]);
     var sharedProps = { $item: $item, $labelKey: $labelKey, $valueKey: $valueKey, $multi: $multi };
-    var avatarOverrides = mergeOverrides({ Root: { style: function (_a) {
-                var px2rem = _a.px2rem;
-                return ({ marginRight: px2rem(6) });
-            } } }, avatarProps.overrides);
-    var startEnhancerOverride = function (enhancerProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(__assign(__assign({}, enhancerProps), sharedProps)) : startEnhancer, _jsx(Avatar, __assign({ size: "md" }, avatarProps, { overrides: avatarOverrides }), void 0)] }, void 0)); };
-    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride }, menuItemProps, { ref: ref }, { children: children }), void 0));
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, Avatar), 2), AvatarComponent = _b[0], avatarOverrideProps = _b[1];
+    var startEnhancerOverride = function (enhancerProps) { return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer(__assign(__assign({}, enhancerProps), sharedProps)) : startEnhancer, _jsx(AvatarComponent, __assign({ size: "md" }, avatarProps, avatarOverrideProps), void 0)] }), void 0)); };
+    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride, overrides: overrides }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
 });
 AvatarListItem.displayName = 'AvatarListItem';
 export default AvatarListItem;

package/esm/list/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_LIST_ITEM_HEIGHT = 32;
+export declare const DEFAULT_OVER_SCAN_COUNT = 10;

package/esm/list/constants.js

@@ -0,0 +1,2 @@
+export var DEFAULT_LIST_ITEM_HEIGHT = 32;
+export var DEFAULT_OVER_SCAN_COUNT = 10;

package/esm/list/divider.js

@@ -1,15 +1,18 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import cx from '../classNames';
 import { useOverrides } from '../overrides';
 import ListItem from './list-item';
 import { StyledListItemDivider } from './styled-component';
 var Divider = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, restProps = __rest(_a, ["children", "first", "overrides"]);
+    var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, className = _a.className, restProps = __rest(_a, ["children", "first", "overrides", "className"]);
     var _d = __read(useOverrides(overrides.Separator, StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
     var _e = __read(useOverrides(overrides.SubHeader, ListItem), 2), SubHeader = _e[0], subHeaderProps = _e[1];
-    return children ? (_jsx(SubHeader, __assign({ className: cx('spr-border-01 border-solid border-b-0 border-l-0 border-r-0 pb-1', first ? 'border-t-0 pt-0' : 'border-t'), "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }), void 0)) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", "aria-disabled": true }, restProps, { ref: ref }, separatorProps), void 0));
+    return children ? (_jsx(SubHeader, __assign({ className: [
+            'spr-border-01 border-solid border-b-0 border-l-0 border-r-0 pb-1 mx-0 rounded-0',
+            first ? 'border-t-0 pt-0' : 'border-t',
+            className,
+        ], "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }), void 0)) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps), void 0));
 });
 Divider.displayName = 'Divider';
 export default Divider;

package/esm/list/index.d.ts

@@ -3,5 +3,6 @@ export { default as ListItem } from './list-item';
 export { default as AvatarListItem } from './avatar-list-item';
 export { default as Divider } from './divider';
 export { default as ListItemText } from './list-item-text';
-export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, } from './styled-component';
+export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, LIST_MIN_WIDTH, } from './styled-component';
+export { DEFAULT_OVER_SCAN_COUNT, DEFAULT_LIST_ITEM_HEIGHT } from './constants';
 export type { ListItemProps, AlignItems, ListItemSharedProps, ListProps, DividerProps, ListItemTextProps, } from './types';

package/esm/list/index.js

@@ -3,4 +3,5 @@ export { default as ListItem } from './list-item';
 export { default as AvatarListItem } from './avatar-list-item';
 export { default as Divider } from './divider';
 export { default as ListItemText } from './list-item-text';
-export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, } from './styled-component';
+export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, LIST_MIN_WIDTH, } from './styled-component';
+export { DEFAULT_OVER_SCAN_COUNT, DEFAULT_LIST_ITEM_HEIGHT } from './constants';

package/esm/list/list-item-text.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItemTextProps } from './types';
-declare const ListItemText: ({ overrides, children, secondary }: ListItemTextProps) => JSX.Element;
+declare const ListItemText: ({ overrides, children, secondary }: ListItemTextProps) => import("react/jsx-runtime").JSX.Element;
 export default ListItemText;

package/esm/list/list-item.d.ts

@@ -12,14 +12,16 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     disabled?: boolean | undefined;
     endEnhancer?: Enhancer<ListItemSharedProps>;
     highlighted?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
     overrides?: {
         ChildContainer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         EndEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         Root?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         StartEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+        StatefulTooltip?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/esm/list/list-item.js

@@ -7,8 +7,9 @@ import useCombinedRefs from '../hooks/useCombinedRef';
 import { useOverrides } from '../overrides';
 import { StyledChildContainer, StyledEndEnhancer, StyledListItem, StyledStartEnhancer } from './styled-component';
 import { useFocusVisible } from '../hooks/useFocusVisible';
+import { StatefulTooltip as DefaultStatefulTooltip } from '../tooltip';
 var ListItem = React.forwardRef(function (_a, ref) {
-    var startEnhancer = _a.startEnhancer, children = _a.children, _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, endEnhancer = _a.endEnhancer, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.highlighted, highlighted = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.button, button = _g === void 0 ? false : _g, _h = _a.overrides, overrides = _h === void 0 ? {} : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? button ? 0 : undefined : _j, _k = _a.$as, $as = _k === void 0 ? 'li' : _k, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, restProps = __rest(_a, ["startEnhancer", "children", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur"]);
+    var startEnhancer = _a.startEnhancer, children = _a.children, _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, endEnhancer = _a.endEnhancer, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.highlighted, highlighted = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.button, button = _g === void 0 ? false : _g, _h = _a.overrides, overrides = _h === void 0 ? {} : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? button ? 0 : undefined : _j, _k = _a.$as, $as = _k === void 0 ? 'li' : _k, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, _l = _a.tooltipContent, tooltipContent = _l === void 0 ? '' : _l, restProps = __rest(_a, ["startEnhancer", "children", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = useRef(null);
     var combinedRef = useCombinedRefs(ref, ownRef);
     React.useEffect(function () {
@@ -29,10 +30,10 @@ var ListItem = React.forwardRef(function (_a, ref) {
             onKeyDown(event);
         }
     }, [button, disabled, onClick, onKeyDown]);
-    var _l = __read(useOverrides(overrides.Root, StyledListItem), 2), Root = _l[0], rootProps = _l[1];
-    var _m = __read(useOverrides(overrides.ChildContainer, StyledChildContainer), 2), ChildContainer = _m[0], childContainerProps = _m[1];
-    var _o = __read(useOverrides(overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
-    var _p = __read(useOverrides(overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _p[0], endEnhancerProps = _p[1];
+    var _m = __read(useOverrides(overrides.Root, StyledListItem), 2), Root = _m[0], rootProps = _m[1];
+    var _o = __read(useOverrides(overrides.ChildContainer, StyledChildContainer), 2), ChildContainer = _o[0], childContainerProps = _o[1];
+    var _p = __read(useOverrides(overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    var _q = __read(useOverrides(overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _q[0], endEnhancerProps = _q[1];
     var sharedProps = {
         $withStartEnhancer: !!startEnhancer,
         $withEndEnhancer: !!endEnhancer,
@@ -45,7 +46,9 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    return (_jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? _noop : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
+    var listEl = (_jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? _noop : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 export default React.memo(ListItem);

package/esm/list/list.d.ts

@@ -1,12 +1,18 @@
-/// <reference types="react" />
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;
     style?: import("..").Styles;
 } & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
+    virtual?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;
-} & import("react").RefAttributes<HTMLElement>>>;
+    scrollElement?: HTMLElement | null | undefined;
+    overscanCount?: number | undefined;
+    estimateItemSize?: number | undefined;
+    autoScrollToSelectedItem?: boolean | undefined;
+    $showFocusOutline?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/esm/list/list.js

@@ -1,12 +1,66 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { useOverrides } from '../overrides';
+import useCombinedRef, { combineRefs } from '../hooks/useCombinedRef';
 import { StyledList } from './styled-component';
-var List = forwardRef(function (_a, ref) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = __rest(_a, ["overrides", "children"]);
-    var _c = __read(useOverrides(overrides.Root, StyledList), 2), Root = _c[0], rootProps = _c[1];
-    return (_jsx(Root, __assign({ "data-spaceweb": "list", role: "list" }, restProps, rootProps, { ref: ref }, { children: children }), void 0));
+import { Box } from '../box';
+import { measureElement } from './utils';
+import { DEFAULT_LIST_ITEM_HEIGHT, DEFAULT_OVER_SCAN_COUNT } from './constants';
+var getCloneElement = function (item, virtualRow, totalCount) {
+    var _a, _b;
+    return React.cloneElement(item, {
+        className: [
+            'w-full absolute top-0 left-0 box-border',
+            { transform: "translateY(".concat(virtualRow.start, "px)") },
+            item.props.className,
+        ],
+        // @ts-ignore -- item.ref is not present in react types
+        ref: combineRefs(virtualRow.measureElement, item.ref),
+        'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
+        'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
+    });
+};
+var List = React.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem"]);
+    var _f = __read(useOverrides(overrides.Root, StyledList), 2), Root = _f[0], rootProps = _f[1];
+    var parentRef = React.useRef(null);
+    var combinedRef = useCombinedRef(parentRef, forwardedRef);
+    var childrenArr = React.Children.toArray(children);
+    var rowVirtualizer = useVirtualizer({
+        count: childrenArr.length,
+        getScrollElement: function () { return scrollElement || parentRef.current; },
+        estimateSize: function () { return estimateItemSize; },
+        overscan: overscanCount,
+        measureElement: measureElement,
+    });
+    React.useEffect(function () {
+        if (!autoScrollToSelectedItem) {
+            return;
+        }
+        // using some for early return
+        childrenArr.some(function (listItem, index) {
+            if (listItem.props.selected) {
+                rowVirtualizer.scrollToIndex(index, { smoothScroll: false, align: 'start' });
+                return true;
+            }
+            return false;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex on mount only
+    }, []);
+    if (virtual) {
+        return (_jsx(Root, __assign({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef }, { children: _jsx(Box
+            // NOTE: resetting margin and padding here. should be removed when normalize css merges
+            , __assign({ 
+                // NOTE: resetting margin and padding here. should be removed when normalize css merges
+                className: "w-full relative p-0 m-0", style: {
+                    height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+                }, "$as": "ul" }, { children: rowVirtualizer
+                    .getVirtualItems()
+                    .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) }), void 0) }), void 0));
+    }
+    return (_jsx(Root, __assign({ "data-spaceweb": "list", role: role }, restProps, rootProps, { ref: combinedRef }, { children: children }), void 0));
 });
 List.displayName = 'List';
-export default memo(List);
+export default React.memo(List);

package/esm/list/styled-component.d.ts

@@ -1,3 +1,4 @@
+export declare const LIST_MIN_WIDTH = 150;
 export declare const StyledList: import("../style/styled").StyledComponent;
 export declare const StyledListItem: import("../style/styled").StyledComponent;
 export declare const StyledListItemText: import("../style/styled").StyledComponent;

package/esm/list/styled-component.js

@@ -3,10 +3,12 @@ import cx from '../classNames';
 import { borderRadius } from '../helpers/longHandHelpers';
 import { getComponentTheme } from '../helpers/themeHelpers';
 import { styled } from '../style';
-// `pl-0 pr-0 mt-0 mb-0` should not be needed, normalize css is not applied to docs
-export var StyledList = styled('ul', 'box-border spr-ui-01 pl-0 pr-0 mt-0 mb-0', function (_a) {
+export var LIST_MIN_WIDTH = 150;
+export var StyledList = styled('ul', 
+// bottom spacing will be added by ListItem
+'box-border spr-ui-01 py-1 px-1 my-0', borderRadius('inherit'), function (_a) {
     var px2rem = _a.px2rem;
-    return (__assign({ paddingTop: px2rem(10), paddingBottom: px2rem(10) }, borderRadius('inherit')));
+    return ({ minWidth: px2rem(LIST_MIN_WIDTH) });
 }, function (_, _a) {
     var $showFocusOutline = _a.$showFocusOutline;
     return ($showFocusOutline ? 'focus-visible:outline-01' : '');
@@ -27,9 +29,16 @@ var backgroundColor = function (_a, _b) {
     }
     return styles;
 };
-export var StyledListItem = styled('li', function (_a, props) {
-    var getStyle = _a.getStyle;
-    return getStyle(cx('relative flex justify-start py-2 px-4 typography-l1 fill-current spr-ui-01', {
+var getListItemCompactStyles = function (_a) {
+    var theme = _a.theme;
+    if (theme.density === 'COMPACT')
+        return 'py-1 px-2 typography-l2 rounded-4 mb-0.5 last-child:mb-0';
+    else
+        return 'py-1.5 px-2 typography-l1 rounded-6 mb-0.5 last-child:mb-0';
+};
+export var StyledListItem = styled('li', getListItemCompactStyles, function (_a, props) {
+    var getStyle = _a.getStyle, theme = _a.theme;
+    return getStyle(cx('relative flex justify-start fill-current spr-ui-01', {
         'items-start': props.$alignItems === 'start',
         'items-center': props.$alignItems === 'center',
         'cursor-pointer': props.$button && !props.$disabled,
@@ -50,26 +59,23 @@ export var StyledSecondaryText = styled('div', 'spr-text-02 typography-l3', func
         marginTop: px2rem(2),
     });
 });
-export var StyledListItemDivider = styled('li', 'block h-px spr-ui-03');
-export var StyledStartEnhancer = styled('div', 'inline-flex', function (_a, props) {
-    var getStyle = _a.getStyle, direction = _a.direction;
+export var StyledListItemDivider = styled('li', 'block h-px spr-ui-03 mb-0.5 last-child:mb-0');
+export var StyledStartEnhancer = styled('div', 'inline-flex pr-2', function (_a, props) {
+    var getStyle = _a.getStyle;
     return getStyle(cx({
-        'pr-3': direction !== 'rtl',
-        'pl-3': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
-export var StyledEndEnhancer = styled('div', 'inline-flex', function (_a, props) {
-    var getStyle = _a.getStyle, direction = _a.direction;
+export var StyledEndEnhancer = styled('div', 'inline-flex pl-2', function (_a, props) {
+    var getStyle = _a.getStyle;
     return getStyle(cx({
-        'pl-3': direction !== 'rtl',
-        'pr-3': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
-export var StyledChildContainer = styled('div', 'typography-l1 flex-auto', function (_a, props) {
-    var theme = _a.theme;
+export var StyledChildContainer = styled('div', 'flex-auto', function (_a, props) {
+    var theme = _a.theme, px2rem = _a.px2rem;
     return ({
         fontWeight: props.$selected ? 700 : 400,
+        fontSize: px2rem(13),
     });
 });

package/esm/list/types.d.ts

@@ -1,6 +1,7 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
+import { StatefulTooltipProps } from '../tooltip';
 export declare type AlignItems = 'start' | 'center';
 export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export declare type ListItemSharedProps = {
@@ -26,15 +27,23 @@ export declare type ListItemProps = SpacewebComponentProps & {
         EndEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
         Root?: Override<ListItemSharedProps & Record<string, any>>;
         StartEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
+        StatefulTooltip?: Override<ListItemSharedProps & Record<string, any>>;
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: StatefulTooltipProps['content'];
 };
 export declare type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
+    virtual?: boolean;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };
+    scrollElement?: HTMLElement | null;
+    overscanCount?: number;
+    estimateItemSize?: number;
+    autoScrollToSelectedItem?: boolean;
+    $showFocusOutline?: boolean;
 };
 export declare type ListItemTextProps = {
     children?: ReactNode;

package/esm/list/utils.d.ts

@@ -0,0 +1,2 @@
+import type { measureElement as measureElementType } from '@tanstack/react-virtual';
+export declare const measureElement: typeof measureElementType;

package/esm/list/utils.js

@@ -0,0 +1,10 @@
+var parseMeasurement = function (str) { return parseFloat(str) || 0; };
+// by default react-virtual uses getBoundingClientRect to calculate dimensions.
+// overriding it to use height + margin, so that we do not have to wrap each ListItem with another element
+export var measureElement = function (element, instance) {
+    var elementStyle = window.getComputedStyle(element);
+    var marginX = parseMeasurement(elementStyle.marginLeft) + parseMeasurement(elementStyle.marginRight);
+    var marginY = parseMeasurement(elementStyle.marginTop) + parseMeasurement(elementStyle.marginBottom);
+    var boundingRect = element.getBoundingClientRect();
+    return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
+};

package/esm/loader/loader.d.ts

@@ -2,5 +2,7 @@
 import { LoaderProps } from './types';
 export declare const DEFAULT_SIZE = 16;
 export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Loader;

package/esm/loader/loader.js

@@ -1,20 +1,29 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from 'react';
+import _times from 'lodash/times';
 import { isTypographyNode } from '../helpers/typography';
 import { useOverrides } from '../overrides';
 import { Typography } from '../typography';
-import { StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot } from './styled-component';
+import { StyledSpinner, StyledSpinnerStick, StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot, } from './styled-component';
 export var DEFAULT_SIZE = 16;
 export var DEFAULT_DELAY = 0;
 var Loader = forwardRef(function (_a, ref) {
     var _b = _a.delay, delay = _b === void 0 ? DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = __rest(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
     // should be visible from start if delay is 0
     var _e = __read(useState(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
+    var LoaderComponent;
+    if (variant === 'beat')
+        LoaderComponent = StyledBeatLoader;
+    else if (variant === 'clip')
+        LoaderComponent = StyledClipLoader;
+    else
+        LoaderComponent = StyledSpinner;
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _f[0], rootProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, Typography), 2), Text = _g[0], textProps = _g[1];
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, variant === 'beat' ? StyledBeatLoader : StyledClipLoader), 2), LoaderInternal = _h[0], loaderProps = _h[1];
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _h[0], loaderProps = _h[1];
     var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, StyledSpinnerStick), 2), SpinnerStick = _k[0], spinnerStickProps = _k[1];
     useEffect(function () {
         var delayTimer;
         if (delay) {
@@ -32,7 +41,7 @@ var Loader = forwardRef(function (_a, ref) {
         ? loadingContent
         : loadingContent && (_jsx(Text, __assign({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
     // todo: aria-label localization
-    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [_jsx(LoaderInternal, __assign({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: variant === 'beat' && (_jsxs(_Fragment, { children: [_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)) }), void 0), content] }), void 0)) : null;
+    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [_jsxs(LoaderInternal, __assign({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && (_jsxs(_Fragment, { children: [_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)), variant === 'spinner' && (_jsx(_Fragment, { children: _times(8).map(function (index) { return (_jsx(SpinnerStick, __assign({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }, void 0))] }), void 0), content] }), void 0)) : null;
 });
 Loader.displayName = 'Loader';
 export default Loader;

package/esm/loader/styled-component.d.ts

@@ -2,3 +2,5 @@ export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const StyledClipLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoaderBall: import("../style/styled").StyledComponent;
+export declare const StyledSpinner: import("../style/styled").StyledComponent;
+export declare const StyledSpinnerStick: import("../style/styled").StyledComponent;