@sprinklrjs/spaceweb 12.33.2 → 14.11.3

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

@@ -9,8 +9,10 @@ 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, 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 _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));
+    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: "medium", shape: "rectangle" }, avatarProps, avatarOverrideProps))] }))); };
+    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride, overrides: overrides }, menuItemProps, { 
+        // @ts-ignore -- css variable declaration in style props
+        style: [{ '--sw-padding-block-start': '0.35rem', '--sw-padding-block-end': '0.35rem' }, menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.style], className: ['pt-[--sw-padding-block-start] pb-[--sw-padding-block-end]', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children })));
 });
 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/cvaConfigs.d.ts

@@ -0,0 +1,9 @@
+export declare const listCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const listItemCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const listItemTextCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const primaryTextCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const secondaryTextCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const listItemDividerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const startEnhancerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const endEnhancerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const childContainerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/esm/list/cvaConfigs.js

@@ -0,0 +1,75 @@
+import { cvaWrapper } from '../style/cvaWrapper';
+export var listCVA = cvaWrapper('list', 'list', [
+    // bottom spacing will be added by ListItem
+    'box-border spr-bg-primary py-2 px-2 my-0 rounded-inherit min-w-[--sw-min-width]',
+    {
+        variants: {
+            $showFocusOutline: {
+                true: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--spr-focus-01]',
+            },
+        },
+    },
+]);
+export var listItemCVA = cvaWrapper('list', 'listItem', [
+    'relative flex justify-start fill-current spr-bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--spr-focus-01] focus-visible:-outline-offset-2 focus-visible:rounded-8',
+    {
+        variants: {
+            $alignItems: {
+                start: 'items-start',
+                center: 'items-center',
+            },
+            $button: {
+                true: 'cursor-pointer hover:spr-bg-secondary',
+            },
+            $isFocusVisible: {
+                true: 'focus-within:spr-bg-secondary',
+            },
+            $selected: {
+                true: 'before:content-none before:w-2 before:bg-transparent before:h-full before:absolute before:top-0 before:left-0 spr-bg-secondary',
+            },
+            $highlighted: {
+                true: 'spr-bg-secondary',
+            },
+            $disabled: {
+                true: 'spr-text-primary spr-icon-primary opacity-33 cursor-not-allowed spr-bg-primary hover:spr-bg-primary',
+            },
+        },
+    },
+]);
+export var listItemTextCVA = cvaWrapper('list', 'itemText', ['flex-auto flex flex-col']);
+export var primaryTextCVA = cvaWrapper('list', 'primaryText', ['text-14 leading-150']);
+export var secondaryTextCVA = cvaWrapper('list', 'secondaryText', ['spr-text-tertiary text-14 leading-150 font-400']);
+export var listItemDividerCVA = cvaWrapper('list', 'listItemDivider', ['block h-px spr-bg-tertiary mb-1 last:mb-0']);
+export var startEnhancerCVA = cvaWrapper('list', 'startEnhancer', [
+    'inline-flex pr-2',
+    {
+        variants: {
+            $alignItems: {
+                start: 'mt-1',
+            },
+        },
+    },
+]);
+export var endEnhancerCVA = cvaWrapper('list', 'endEnhancer', [
+    'inline-flex pl-2',
+    {
+        variants: {
+            $alignItems: {
+                start: 'mt-1',
+            },
+        },
+    },
+]);
+export var childContainerCVA = cvaWrapper('list', 'childContainer', [
+    'flex-auto text-14 font-400',
+    {
+        variants: {
+            $selected: {
+                true: 'font-600',
+            },
+            $disabled: {
+                true: 'forced-colors:text-disabled',
+            },
+        },
+    },
+]);

package/esm/list/divider.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-declare const Divider: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
+declare const Divider: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & {
     first?: boolean | undefined;

package/esm/list/divider.js

@@ -9,10 +9,10 @@ var Divider = forwardRef(function (_a, ref) {
     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: [
-            'spr-border-01 border-solid border-b-0 border-l-0 border-r-0 pb-1 mx-0 rounded-0',
+            'spr-border-primary border-solid border-b-0 border-l-0 border-r-0 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));
+        ], "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }))) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps)));
 });
 Divider.displayName = 'Divider';
 export default Divider;

package/esm/list/index.d.ts

@@ -4,4 +4,5 @@ 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, 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

@@ -4,3 +4,4 @@ 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, LIST_MIN_WIDTH, } from './styled-component';
+export { DEFAULT_OVER_SCAN_COUNT, DEFAULT_LIST_ITEM_HEIGHT } from './constants';

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

@@ -7,6 +7,6 @@ var ListItemText = function (_a) {
     var _c = __read(useOverrides(overrides.Root, StyledListItemText), 2), Root = _c[0], rootProps = _c[1];
     var _d = __read(useOverrides(overrides.PrimaryText, StyledPrimaryText), 2), PrimaryText = _d[0], primaryTextProps = _d[1];
     var _e = __read(useOverrides(overrides.SecondaryText, StyledSecondaryText), 2), SecondaryText = _e[0], secondaryTextProps = _e[1];
-    return (_jsxs(Root, __assign({ "data-spaceweb": "list-item-text", "data-testid": "list-item-text" }, rootProps, { children: [children && _jsx(PrimaryText, __assign({}, primaryTextProps, { children: children }), void 0), secondary && _jsx(SecondaryText, __assign({}, secondaryTextProps, { children: secondary }), void 0)] }), void 0));
+    return (_jsxs(Root, __assign({ "data-spaceweb": "list-item-text", "data-testid": "list-item-text" }, rootProps, { children: [children && _jsx(PrimaryText, __assign({}, primaryTextProps, { children: children })), secondary && _jsx(SecondaryText, __assign({}, secondaryTextProps, { children: secondary }))] })));
 };
 export default ListItemText;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Enhancer, ListItemSharedProps } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: React.ElementType<any> | undefined;
-    className?: import("..").Styles;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: React.ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & {
     alignItems?: import("./types").AlignItems | undefined;

package/esm/list/list-item.js

@@ -9,7 +9,7 @@ import { StyledChildContainer, StyledEndEnhancer, StyledListItem, StyledStartEnh
 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, _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 startEnhancer = _a.startEnhancer, children = _a.children, className = _a.className, style = _a.style, _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", "className", "style", "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 () {
@@ -47,8 +47,9 @@ var ListItem = React.forwardRef(function (_a, ref) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
     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);
+    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, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
+    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }))) : (listEl);
 });
 ListItem.displayName = 'ListItem';
+ListItem.__standard = 'Component';
 export default React.memo(ListItem);

package/esm/list/list.d.ts

@@ -1,17 +1,19 @@
 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;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: React.ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & {
     children?: React.ReactNode;
     virtual?: boolean | undefined;
+    keepFirstItemMounted?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;
     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,43 +1,56 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import { useOverrides } from '../overrides';
 import useCombinedRef, { combineRefs } from '../hooks/useCombinedRef';
-import { StyledList } from './styled-component';
+import { LIST_MIN_WIDTH, StyledList } from './styled-component';
 import { Box } from '../box';
-import { measureElement } from './utils';
-var DEFAULT_LIST_ITEM_HEIGHT = 38;
-var DEFAULT_OVER_SCAN_COUNT = 10;
+import { customRangeExtractor, measureElement } from './utils';
+import { DEFAULT_LIST_ITEM_HEIGHT, DEFAULT_OVER_SCAN_COUNT } from './constants';
+import { useStyle } from '../style';
 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
+        style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style],
+        className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'],
+        // @ts-expect-error TS(2339): Property 'ref' does not exist on type 'ReactElemen... Remove this comment to see the full error message
         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, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role"]);
-    var _f = __read(useOverrides(overrides.Root, StyledList), 2), Root = _f[0], rootProps = _f[1];
+    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, style = _a.style, className = _a.className, _f = _a.keepFirstItemMounted, keepFirstItemMounted = _f === void 0 ? false : _f, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
+    var _g = __read(useOverrides(overrides.Root, StyledList), 2), Root = _g[0], rootProps = _g[1];
     var parentRef = React.useRef(null);
     var combinedRef = useCombinedRef(parentRef, forwardedRef);
     var childrenArr = React.Children.toArray(children);
+    var px2rem = useStyle().px2rem;
     var rowVirtualizer = useVirtualizer({
         count: childrenArr.length,
         getScrollElement: function () { return scrollElement || parentRef.current; },
         estimateSize: function () { return estimateItemSize; },
         overscan: overscanCount,
         measureElement: measureElement,
+        rangeExtractor: keepFirstItemMounted ? customRangeExtractor : defaultRangeExtractor,
     });
+    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
+        return (_jsx(Root, __assign({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { 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
@@ -45,9 +58,10 @@ var List = React.forwardRef(function (_a, forwardedRef) {
                     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));
+                    .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) })) })));
     }
-    return (_jsx(Root, __assign({ "data-spaceweb": "list", role: role }, restProps, rootProps, { ref: combinedRef }, { children: children }), void 0));
+    return (_jsx(Root, __assign({ "data-spaceweb": "list", role: role }, restProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: children })));
 });
 List.displayName = 'List';
+List.__standard = 'Component';
 export default React.memo(List);

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

@@ -1,10 +1,18 @@
 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;
-export declare const StyledPrimaryText: import("../style/styled").StyledComponent;
-export declare const StyledSecondaryText: import("../style/styled").StyledComponent;
-export declare const StyledListItemDivider: import("../style/styled").StyledComponent;
-export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledEndEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledChildContainer: import("../style/styled").StyledComponent;
+export declare const StyledList: import("../style").StyledComponent;
+export declare const getBackgroundColorThemeOverride: ({ theme }: {
+    theme: any;
+}, { $button, $disabled, $isFocusVisible, $selected }: {
+    $button: any;
+    $disabled: any;
+    $isFocusVisible: any;
+    $selected: any;
+}) => [import("styletron-standard").StyleObject];
+export declare const StyledListItem: import("../style").StyledComponent;
+export declare const StyledListItemText: import("../style").StyledComponent;
+export declare const StyledPrimaryText: import("../style").StyledComponent;
+export declare const StyledSecondaryText: import("../style").StyledComponent;
+export declare const StyledListItemDivider: import("../style").StyledComponent;
+export declare const StyledStartEnhancer: import("../style").StyledComponent;
+export declare const StyledEndEnhancer: import("../style").StyledComponent;
+export declare const StyledChildContainer: import("../style").StyledComponent;

package/esm/list/styled-component.js

@@ -1,81 +1,58 @@
 import { __assign } from "tslib";
-import cx from '../classNames';
-import { borderRadius } from '../helpers/longHandHelpers';
 import { getComponentTheme } from '../helpers/themeHelpers';
-import { styled } from '../style';
+import { styled, styledWithCssVariables } from '../style';
+import { childContainerCVA, endEnhancerCVA, listCVA, listItemCVA, listItemDividerCVA, listItemTextCVA, primaryTextCVA, secondaryTextCVA, startEnhancerCVA, } from './cvaConfigs';
 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 ({ minWidth: px2rem(LIST_MIN_WIDTH) });
-}, function (_, _a) {
-    var $showFocusOutline = _a.$showFocusOutline;
-    return ($showFocusOutline ? 'focus-visible:outline-01' : '');
-});
-var backgroundColor = function (_a, _b) {
-    var theme = _a.theme;
-    var $button = _b.$button, $selected = _b.$selected, $disabled = _b.$disabled, $highlighted = _b.$highlighted, $isFocusVisible = _b.$isFocusVisible;
-    var hoverBackgroundColor = getComponentTheme(theme, 'list').hoverBackgroundColor;
-    var styles = { backgroundColor: theme.spr.ui01 };
+export var StyledList = styled('ul', listCVA);
+var backgroundColor = function (_, _a) {
+    var $button = _a.$button, $selected = _a.$selected, $disabled = _a.$disabled, $highlighted = _a.$highlighted, $isFocusVisible = _a.$isFocusVisible;
+    var stylesAtomic = ['spr-ui-01'];
     if ($button && !$disabled) {
-        styles[':hover'] = { backgroundColor: hoverBackgroundColor };
+        stylesAtomic.push('hover:spr-ui-05');
         if ($isFocusVisible) {
-            styles[':focus-within'] = { backgroundColor: hoverBackgroundColor };
+            stylesAtomic.push('focus-within:spr-ui-05');
         }
+        stylesAtomic['__useCssInJs'] = 1;
     }
     if (($selected || $highlighted) && !$disabled) {
-        styles.backgroundColor = hoverBackgroundColor;
+        stylesAtomic.push('spr-ui-05');
+    }
+    return stylesAtomic.join(' ');
+};
+export var getBackgroundColorThemeOverride = function (_a, _b) {
+    var theme = _a.theme;
+    var $button = _b.$button, $disabled = _b.$disabled, $isFocusVisible = _b.$isFocusVisible, $selected = _b.$selected;
+    var overrideStyleObj = [{}];
+    var listTheme = getComponentTheme(theme, 'list');
+    if (listTheme) {
+        var buttonSizeThemeStyleObj = __assign(__assign(__assign({}, ((listTheme === null || listTheme === void 0 ? void 0 : listTheme.hoverBackgroundColor) && $button && !$disabled
+            ? {
+                ':hover': { backgroundColor: listTheme.hoverBackgroundColor },
+            }
+            : {})), ((listTheme === null || listTheme === void 0 ? void 0 : listTheme.hoverBackgroundColor) && $isFocusVisible
+            ? {
+                ':focus-within': { backgroundColor: listTheme.hoverBackgroundColor },
+            }
+            : {})), ((listTheme === null || listTheme === void 0 ? void 0 : listTheme.selectedEnhancerBackground) && $selected
+            ? { '::before': { backgroundColor: listTheme.selectedEnhancerBackground } }
+            : {}));
+        overrideStyleObj.push(buttonSizeThemeStyleObj);
     }
-    return styles;
+    return overrideStyleObj;
 };
 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';
+        return 'py-1 px-2 text-12 leading-4 font-400 rounded-4 mb-1 last:mb-0';
+    return 'pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] px-2 text-14 leading-150 font-400 rounded-8 mb-1 last: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,
-        'spr-text-03 spr-icon-disable cursor-not-allowed': props.$disabled,
-    }));
-}, backgroundColor, 'focus-visible:outline-01 focus-visible:-outline-offset-2 focus-visible:rounded-6', function (_a, props) {
-    var getStyle = _a.getStyle, px2rem = _a.px2rem, theme = _a.theme;
-    var selectedEnhancerBackground = getComponentTheme(theme, 'list').selectedEnhancerBackground;
-    return __assign({}, (props.$selected && {
-        '::before': __assign({ content: '" "', width: px2rem(2), backgroundColor: selectedEnhancerBackground }, getStyle('h-full absolute top-0 left-0')),
-    }));
-});
-export var StyledListItemText = styled('div', 'flex-auto flex flex-col');
-export var StyledPrimaryText = styled('div', 'typography-l1');
-export var StyledSecondaryText = styled('div', 'spr-text-02 typography-l3', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        marginTop: px2rem(2),
-    });
-});
-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({
-        'mt-1': props.$alignItems === 'start',
-    }));
-});
-export var StyledEndEnhancer = styled('div', 'inline-flex pl-2', function (_a, props) {
-    var getStyle = _a.getStyle;
-    return getStyle(cx({
-        'mt-1': props.$alignItems === 'start',
-    }));
-});
-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),
-    });
-});
+export var StyledListItem = styledWithCssVariables('li', { '--sw-padding-block-start': '0.55rem', '--sw-padding-block-end': '0.55rem' }, getListItemCompactStyles, listItemCVA, 
+// @ts-expect-error
+getBackgroundColorThemeOverride);
+export var StyledListItemText = styled('div', listItemTextCVA);
+export var StyledPrimaryText = styled('div', primaryTextCVA);
+export var StyledSecondaryText = styled('div', secondaryTextCVA);
+export var StyledListItemDivider = styled('li', listItemDividerCVA);
+export var StyledStartEnhancer = styled('div', startEnhancerCVA);
+export var StyledEndEnhancer = styled('div', endEnhancerCVA);
+export var StyledChildContainer = styled('div', childContainerCVA);

package/esm/list/types.d.ts

@@ -1,10 +1,10 @@
-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 = {
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import type { Override } from '../overrides/types';
+import type { SpacewebComponentProps } from '../types';
+import type { StatefulTooltipProps } from '../tooltip';
+export type AlignItems = 'start' | 'center';
+export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
+export type ListItemSharedProps = {
     $withStartEnhancer: boolean;
     $withEndEnhancer: boolean;
     $alignItems: AlignItems;
@@ -13,7 +13,7 @@ export declare type ListItemSharedProps = {
     $highlighted: boolean;
     $button: boolean;
 };
-export declare type ListItemProps = SpacewebComponentProps & {
+export type ListItemProps = SpacewebComponentProps & {
     alignItems?: AlignItems;
     autoFocus?: boolean;
     button?: boolean;
@@ -33,18 +33,23 @@ export declare type ListItemProps = SpacewebComponentProps & {
     startEnhancer?: Enhancer<ListItemSharedProps>;
     tooltipContent?: StatefulTooltipProps['content'];
 };
-export declare type ListProps = SpacewebComponentProps & {
+export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
     virtual?: boolean;
+    /**
+     * Forces the first item to stay mounted even when out of overscan range in virtualized list
+     */
+    keepFirstItemMounted?: boolean;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };
     scrollElement?: HTMLElement | null;
     overscanCount?: number;
     estimateItemSize?: number;
+    autoScrollToSelectedItem?: boolean;
     $showFocusOutline?: boolean;
 };
-export declare type ListItemTextProps = {
+export type ListItemTextProps = {
     children?: ReactNode;
     overrides?: {
         PrimaryText?: Override<Record<string, any>>;
@@ -53,7 +58,7 @@ export declare type ListItemTextProps = {
     };
     secondary?: ReactNode;
 };
-export declare type DividerProps = SpacewebComponentProps & {
+export type DividerProps = SpacewebComponentProps & {
     /**
      * If true, remove top padding and border. When rendering first subheader of the list.
      */

package/esm/list/utils.d.ts

@@ -1,2 +1,6 @@
-import type { measureElement as measureElementType } from '@tanstack/react-virtual';
+import type { measureElement as measureElementType, Range } from '@tanstack/react-virtual';
 export declare const measureElement: typeof measureElementType;
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+export declare const customRangeExtractor: (range: Range) => number[];

package/esm/list/utils.js

@@ -1,3 +1,5 @@
+import { __read, __spreadArray } from "tslib";
+import { defaultRangeExtractor } from '@tanstack/react-virtual';
 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
@@ -8,3 +10,16 @@ export var measureElement = function (element, instance) {
     var boundingRect = element.getBoundingClientRect();
     return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
 };
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+export var customRangeExtractor = function (range) {
+    var defaultIndices = defaultRangeExtractor(range);
+    // Find the actual start index of the range including overscan
+    var virtualRangeStart = Math.max(range.startIndex - range.overscan, 0);
+    // If the first item is already in the virtual range, return the default indices.
+    if (virtualRangeStart === 0)
+        return defaultIndices;
+    // Otherwise, prepend the first item to the default indices.
+    return __spreadArray([0], __read(defaultIndices), false);
+};

package/esm/loader/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SIZE = 16;
+export declare const DEFAULT_DELAY = 0;

package/esm/loader/constants.js

@@ -0,0 +1,2 @@
+export var DEFAULT_SIZE = 16;
+export var DEFAULT_DELAY = 0;

package/esm/loader/index.d.ts

@@ -1,3 +1,4 @@
-export { default as Loader, DEFAULT_SIZE, DEFAULT_DELAY } from './loader';
+export { default as Loader } from './loader';
 export type { SharedProps, LoaderProps, Variant } from './types';
 export { StyledRoot } from './styled-component';
+export { DEFAULT_SIZE, DEFAULT_DELAY } from './constants';

package/esm/loader/index.js

@@ -1,2 +1,3 @@
-export { default as Loader, DEFAULT_SIZE, DEFAULT_DELAY } from './loader';
+export { default as Loader } from './loader';
 export { StyledRoot } from './styled-component';
+export { DEFAULT_SIZE, DEFAULT_DELAY } from './constants';

package/esm/loader/loader.d.ts

@@ -1,8 +1,24 @@
 /// <reference types="react" />
-import { LoaderProps } from './types';
-export declare const DEFAULT_SIZE = 16;
-export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+import type { ClassName } from '../types';
+import type { SharedProps, Variant } from './types';
+declare const Loader: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: ClassName;
+    style?: import("../types").Styles;
+} & {
+    intent?: import("../types").Intent | undefined;
+    variant?: Variant | undefined;
+    size?: number | undefined;
+    delay?: number | undefined;
+    loadingContent?: import("react").ReactNode;
+    overrides?: {
+        Root?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        Text?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        Loader?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        BeatLoaderBall?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+        SpinnerStick?: import("../overrides").Override<SharedProps & Record<string, any>> | undefined;
+    } | undefined;
+} & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;
 export default Loader;