@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/form-control/context.d.ts

@@ -1,22 +1,15 @@
 /// <reference types="react" />
 import { Intent } from '../types';
-export declare const formControlContext: import("react").Context<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlProvider: import("react").Provider<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlConsumer: import("react").Consumer<{
-    intent?: Intent | undefined;
-}>;
-export declare const useFormControl: () => {
+declare type FormControlContextValueType = {
     intent?: Intent;
 };
+export declare const FormControlProvider: import("react").Provider<FormControlContextValueType>;
+export declare const FormControlConsumer: import("react").Consumer<FormControlContextValueType>;
+export declare const useFormControl: () => FormControlContextValueType;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-export declare const useContextualFormProps: <T extends {
-    intent?: Intent;
-}>(props: T) => T;
+export declare const useContextualFormProps: <T extends FormControlContextValueType>(props: T, defaultProps?: FormControlContextValueType) => T;
+export {};

package/form-control/context.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = exports.formControlContext = void 0;
+exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-exports.formControlContext = (0, react_1.createContext)({ intent: 'default' });
-exports.formControlContext.displayName = 'FormControlContext';
-exports.FormControlProvider = exports.formControlContext.Provider;
-exports.FormControlConsumer = exports.formControlContext.Consumer;
-var useFormControl = function () { return (0, react_1.useContext)(exports.formControlContext); };
+var FormControlContext = (0, react_1.createContext)({ intent: 'default' });
+FormControlContext.displayName = 'FormControlContext';
+exports.FormControlProvider = FormControlContext.Provider;
+exports.FormControlConsumer = FormControlContext.Consumer;
+var useFormControl = function () { return (0, react_1.useContext)(FormControlContext); };
 exports.useFormControl = useFormControl;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-var useContextualFormProps = function (props) {
-    var _a;
-    var contextProps = (0, exports.useFormControl)();
-    var intent = (_a = props.intent) !== null && _a !== void 0 ? _a : contextProps.intent;
+var useContextualFormProps = function (props, defaultProps) {
+    var _a, _b;
+    if (defaultProps === void 0) { defaultProps = {}; }
+    var formControlValue = (0, exports.useFormControl)();
+    var intent = (_b = (_a = props.intent) !== null && _a !== void 0 ? _a : formControlValue.intent) !== null && _b !== void 0 ? _b : defaultProps.intent;
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { intent: intent });
 };
 exports.useContextualFormProps = useContextualFormProps;

package/form-control/styled-component.js

@@ -23,14 +23,14 @@ exports.StyledInfoIconContainer = (0, style_1.styled)('div', 'spr-ui-03 rounded-
     return ({ height: px2rem(14), width: px2rem(14) });
 });
 exports.StyledRequiredDot = (0, style_1.styled)('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
-exports.StyledRoot = (0, style_1.styled)('div', 'mb-4 flex', function (utils, _a) {
+exports.StyledRoot = (0, style_1.styled)('div', 'flex', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
 });
 exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 my-1', getIntentColor);
-exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center my-1 w-full', function (utils, _a) {
+exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center mb-1 w-full', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
 });
-exports.StyledLabel = (0, style_1.styled)('label', 'typography-l2 spr-text-02');
+exports.StyledLabel = (0, style_1.styled)('label', 'typography-l1 text-14 spr-text-02');
 exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

package/helpers/baseui/withThemeOverride.js

@@ -14,7 +14,7 @@ var withThemeOverride = function (Component, mapSpaceThemeToBaseTheme) {
     var ThemeOverridenComponent = React.forwardRef(function ThemeOverride(props, ref) {
         var theme = (0, useStyle_1.default)().theme;
         var _a = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), styletronTheme = _a[1];
-        var updatedTheme = (0, themes_1.createTheme)(styletronTheme, mapSpaceThemeToBaseTheme(theme));
+        var updatedTheme = React.useMemo(function () { return (0, themes_1.createTheme)(styletronTheme, mapSpaceThemeToBaseTheme(theme)); }, [styletronTheme, theme]);
         return ((0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: updatedTheme }, { children: (0, jsx_runtime_1.jsx)(Component, (0, tslib_1.__assign)({ ref: ref }, props), void 0) }), void 0));
     });
     ThemeOverridenComponent.displayName = "withThemeOverride(".concat(Component.displayName || Component.name, ")");

package/helpers/commonStyles.d.ts

@@ -9,8 +9,8 @@ export declare const chevronStyles: StyleFn<{
 export declare const transparentScrollbarStyles: StyleObject;
 export declare type OutlineProps = {
     $outlineColor?: string;
-    $outlineWidth?: string | number;
-    $outlineOffset?: string | number;
+    $outlineWidth?: StyleObject['outlineWidth'];
+    $outlineOffset?: StyleObject['outlineOffset'];
     $outlineStyle?: string;
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;

package/helpers/styletron.d.ts

@@ -1,12 +1,23 @@
+/// <reference types="react" />
 /**
  * @deprecated use spaceweb/styled
  */
-export declare const styled: import("baseui").StyledFn<ThemeT>;
+export declare const styled: {
+    <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
+        $theme: Theme;
+    }) => import("styletron-standard").StyleObject)): import("styletron-react").StyletronComponent<C, P>;
+    <C_1 extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>>(component: C_1, style: import("styletron-standard").StyleObject): import("styletron-react").StyletronComponent<C_1, {}>;
+};
 /**
  * @deprecated
  */
-export declare const withStyle: import("baseui").WithStyleFn<ThemeT>;
+export declare const withStyle: {
+    <C extends import("styletron-react").StyletronComponent<any, any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
+        $theme: Theme;
+    } & (C extends import("styletron-react").StyletronComponent<infer CC, infer PP> ? PP : never)) => import("styletron-standard").StyleObject)): C extends import("styletron-react").StyletronComponent<infer CC_1, infer PP_1> ? import("styletron-react").StyletronComponent<CC_1, P & PP_1> : never;
+    <C_1 extends import("styletron-react").StyletronComponent<any, any>>(component: C_1, style: import("styletron-standard").StyleObject): C_1;
+};
 /**
  * @deprecated use spaceweb/useStyle
  */
-export declare const useStyletron: () => [(arg: import("styletron-standard").StyleObject) => string, ThemeT];
+export declare const useStyletron: () => [(a: import("styletron-standard").StyleObject) => string, ThemeT];

package/hooks/useAutoFocus.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { InputProps } from '../input';
-import { TextareaProps } from '../textarea';
-declare type UseAutoFocus = {
-    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
-    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+import { RefObject, Ref } from 'react';
+import { FocusPosition } from '../input';
+declare type Params<T> = {
+    autoFocus?: FocusPosition;
+    inputRef?: Ref<T>;
 };
-declare const useAutoFocus: UseAutoFocus;
+declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/hooks/useAutoFocus.js

@@ -1,29 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
+var useCombinedRef_1 = require("./useCombinedRef");
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
-    var ownRef = React.useRef(null);
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
-    React.useEffect(function () {
-        if (!ref.current || typeof autoFocus === 'undefined') {
+    var refObj = (0, useCombinedRef_1.useCombineRefObjects)(inputRef);
+    (0, react_1.useEffect)(function () {
+        if (!refObj.current || typeof autoFocus === 'undefined') {
             return;
         }
         var position;
         switch (typeof autoFocus) {
             case 'boolean':
                 if (autoFocus) {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
                 }
                 break;
             case 'number':
-                if (autoFocus >= ref.current.value.length) {
-                    position = ref.current.value.length;
+                if (autoFocus >= refObj.current.value.length) {
+                    position = refObj.current.value.length;
                 }
                 else if (autoFocus >= 0) {
                     position = autoFocus;
@@ -37,7 +36,7 @@ var useAutoFocus = function (_a) {
                     position = 0;
                 }
                 else if (autoFocus === 'end') {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
@@ -47,15 +46,15 @@ var useAutoFocus = function (_a) {
                 position = 0;
         }
         try {
-            ref.current.focus();
-            ref.current.setSelectionRange(position, position);
+            refObj.current.focus({ preventScroll: true });
+            refObj.current.setSelectionRange(position, position);
         }
         catch (err) {
             if (__DEV__) {
                 console.error(err);
             }
         }
-    }, [autoFocus]);
-    return ref;
+    }, [autoFocus, refObj]);
+    return refObj;
 };
 exports.default = useAutoFocus;

package/hooks/useCombinedRef.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
 declare type Refs<T> = (Ref<T | null> | null | undefined)[];
 export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
+export declare function useCombineRefObjects<T>(...refs: Refs<T>): React.RefObject<T>;
 declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;
 export default useCombinedRefs;

package/hooks/useCombinedRef.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.combineRefs = void 0;
+exports.useCombineRefObjects = exports.combineRefs = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
 function combineRefs() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -22,6 +23,39 @@ function combineRefs() {
     };
 }
 exports.combineRefs = combineRefs;
+function useCombineRefObjects() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    var targetRef = React.useRef(null);
+    React.useEffect(function () {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(targetRef.current);
+            }
+            else {
+                ref.current = targetRef.current;
+            }
+        });
+        return function () {
+            refs.forEach(function (ref) {
+                if (!ref)
+                    return;
+                if (typeof ref === 'function') {
+                    ref(targetRef.current);
+                }
+                else {
+                    ref.current = targetRef.current;
+                }
+            });
+        };
+    }, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(refs), false)); // eslint-disable-line react-hooks/exhaustive-deps
+    return targetRef;
+}
+exports.useCombineRefObjects = useCombineRefObjects;
 /*
  * combines multiple refs to single MutableRefObject - when one wants to assign same element/instance to multiple refs
  * https://github.com/facebook/react/issues/13029#issue-331682836

package/hooks/useIsMobileDevice.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileDevice: () => boolean;

package/hooks/useIsMobileDevice.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMobileDevice = void 0;
+var tslib_1 = require("tslib");
+var theme_1 = require("../theme");
+var useMatchMedia_1 = (0, tslib_1.__importDefault)(require("./useMatchMedia"));
+var useIsMobileDevice = function () {
+    var currentTheme = (0, theme_1.useTheme)();
+    return (0, useMatchMedia_1.default)("(max-width: ".concat(currentTheme.theme.screens.md, ")"), false);
+};
+exports.useIsMobileDevice = useIsMobileDevice;

package/hooks/useMatchMedia.d.ts

@@ -0,0 +1,3 @@
+export declare const isBrowser: boolean;
+declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean;
+export default useMedia;

package/hooks/useMatchMedia.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBrowser = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+exports.isBrowser = typeof window !== 'undefined';
+var getInitialState = function (query, defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (exports.isBrowser) {
+        return window.matchMedia(query).matches;
+    }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return false;
+};
+var useMedia = function (query, defaultState) {
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(getInitialState(query, defaultState)), 2), state = _a[0], setState = _a[1];
+    (0, react_1.useEffect)(function () {
+        var mounted = true;
+        var mediaQueryList = window.matchMedia(query);
+        var onChange = function () {
+            if (!mounted) {
+                return;
+            }
+            setState(!!mediaQueryList.matches);
+        };
+        mediaQueryList.addEventListener('change', onChange);
+        setState(mediaQueryList.matches);
+        return function () {
+            mounted = false;
+            mediaQueryList.removeEventListener('change', onChange);
+        };
+    }, [query]);
+    return state;
+};
+exports.default = useMedia;

package/input/basewebAdapters.d.ts

@@ -2,6 +2,6 @@ import { InputProps, StatefulInputProps } from './types';
 import { BaseInputOverrides } from 'baseui/input';
 declare type AdapterProps = Omit<InputProps | StatefulInputProps, 'autoFocus'>;
 declare const useInputBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, "size" | "style" | "className" | "overrides" | "variant" | "intent"> & {
-    overrides?: BaseInputOverrides<any> | undefined;
+    overrides?: BaseInputOverrides | undefined;
 };
 export default useInputBasewebAdapter;

package/input/index.d.ts

@@ -1,4 +1,5 @@
 export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
-export type { BaseInput, ENHANCER_POSITION, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from 'baseui/input';
+export type { BaseInput, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from 'baseui/input';
+export { ENHANCER_POSITION } from 'baseui/input/constants';
 export { Input, StatefulInput, MaskedInput } from './input';
 export * from './types';

package/input/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaskedInput = exports.StatefulInput = exports.Input = exports.CUSTOM_INPUT_TYPE = exports.ADJOINED = exports.STATE_CHANGE_TYPE = exports.StyledInput = exports.StyledInputContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledInputEnhancer = exports.StyledRoot = exports.StatefulContainer = void 0;
+exports.MaskedInput = exports.StatefulInput = exports.Input = exports.ENHANCER_POSITION = exports.CUSTOM_INPUT_TYPE = exports.ADJOINED = exports.STATE_CHANGE_TYPE = exports.StyledInput = exports.StyledInputContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledInputEnhancer = exports.StyledRoot = exports.StatefulContainer = void 0;
 var tslib_1 = require("tslib");
 var input_1 = require("baseui/input");
 Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return input_1.StatefulContainer; } });
@@ -13,6 +13,8 @@ Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function
 Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return input_1.STATE_CHANGE_TYPE; } });
 Object.defineProperty(exports, "ADJOINED", { enumerable: true, get: function () { return input_1.ADJOINED; } });
 Object.defineProperty(exports, "CUSTOM_INPUT_TYPE", { enumerable: true, get: function () { return input_1.CUSTOM_INPUT_TYPE; } });
+var constants_1 = require("baseui/input/constants");
+Object.defineProperty(exports, "ENHANCER_POSITION", { enumerable: true, get: function () { return constants_1.ENHANCER_POSITION; } });
 var input_2 = require("./input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_2.Input; } });
 Object.defineProperty(exports, "StatefulInput", { enumerable: true, get: function () { return input_2.StatefulInput; } });

package/input/styled-components.d.ts

@@ -3,4 +3,4 @@ import { SharedProps } from './types';
 export declare const getInputContainerStyles: Styles;
 export declare const getEnhancerStyles: Styles;
 export declare const getPlaceholderTypography: Styles;
-export declare const getInputStyles: StyleFn<SharedProps>;
+export declare const getInputStyles: StyleFn<Partial<Pick<SharedProps, '$size' | '$disabled' | '$variant'>>>;

package/input/styled-components.js

@@ -121,7 +121,7 @@ var getInputStyles = function (utils, props) {
         // baseweb applies this style in order to support style in safari
         styles['-webkit-text-fill-color'] = theme.spr.text02;
     }
-    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, 'lg');
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, 'md');
     styles.lineHeight = inputSizeTheme.lineHeight;
     styles.paddingLeft = styles.paddingRight = inputSizeTheme.paddingX;
     styles.paddingTop = styles.paddingBottom = inputSizeTheme.paddingY;

package/input/types.d.ts

@@ -1,3 +1,4 @@
+import { Ref, ChangeEvent } from 'react';
 import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from 'baseui/input';
 import { SpacewebComponentProps, Intent } from '../types';
 import { Override } from '../overrides';
@@ -20,9 +21,11 @@ declare type CommonInputProps = {
     size?: InputSize;
     overrides?: InputOverrides;
     intent?: Intent;
-    debouncedOnChange?: BaseInputProps['onChange'];
+    debouncedOnChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     debounceInterval?: number;
     autoFocus?: FocusPosition;
+    inputRef?: Ref<HTMLInputElement>;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' | '$error'> & {
     $isStart: boolean;
@@ -30,8 +33,8 @@ export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' |
     $variant: InputVariant;
     $intent: Intent;
 };
-export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
-export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'positive' | 'error' | keyof CommonInputProps> & CommonInputProps;
+export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'positive' | 'error' | keyof CommonInputProps> & CommonInputProps;
 export interface MaskedInputProps extends InputProps {
     mask?: string;
     maskChar?: string;

package/list/avatar-list-item.js

@@ -4,17 +4,13 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var avatar_1 = require("../avatar");
-var overrides_1 = require("../overrides");
+var stack_1 = require("../stack");
 var list_item_1 = (0, tslib_1.__importDefault)(require("./list-item"));
 var AvatarListItem = (0, react_1.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 = (0, tslib_1.__rest)(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps"]);
     var sharedProps = { $item: $item, $labelKey: $labelKey, $valueKey: $valueKey, $multi: $multi };
-    var avatarOverrides = (0, overrides_1.mergeOverrides)({ Root: { style: function (_a) {
-                var px2rem = _a.px2rem;
-                return ({ marginRight: px2rem(6) });
-            } } }, avatarProps.overrides);
-    var startEnhancerOverride = function (enhancerProps) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer((0, tslib_1.__assign)((0, tslib_1.__assign)({}, enhancerProps), sharedProps)) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: "md" }, avatarProps, { overrides: avatarOverrides }), void 0)] }, void 0)); };
-    return ((0, jsx_runtime_1.jsx)(list_item_1.default, (0, tslib_1.__assign)({ startEnhancer: startEnhancerOverride }, menuItemProps, { ref: ref }, { children: children }), void 0));
+    var startEnhancerOverride = function (enhancerProps) { return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer((0, tslib_1.__assign)((0, tslib_1.__assign)({}, enhancerProps), sharedProps)) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: "md" }, avatarProps), void 0)] }), void 0)); };
+    return ((0, jsx_runtime_1.jsx)(list_item_1.default, (0, tslib_1.__assign)({ startEnhancer: startEnhancerOverride }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
 });
 AvatarListItem.displayName = 'AvatarListItem';
 exports.default = AvatarListItem;

package/list/divider.js

@@ -3,15 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
 var overrides_1 = require("../overrides");
 var list_item_1 = (0, tslib_1.__importDefault)(require("./list-item"));
 var styled_component_1 = require("./styled-component");
 var Divider = (0, react_1.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 = (0, tslib_1.__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 = (0, tslib_1.__rest)(_a, ["children", "first", "overrides", "className"]);
     var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Separator, styled_component_1.StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
     var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.SubHeader, list_item_1.default), 2), SubHeader = _e[0], subHeaderProps = _e[1];
-    return children ? ((0, jsx_runtime_1.jsx)(SubHeader, (0, tslib_1.__assign)({ className: (0, classNames_1.default)('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)) : ((0, jsx_runtime_1.jsx)(Separator, (0, tslib_1.__assign)({ "data-spaceweb": "divider", "aria-disabled": true }, restProps, { ref: ref }, separatorProps), void 0));
+    return children ? ((0, jsx_runtime_1.jsx)(SubHeader, (0, tslib_1.__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)) : ((0, jsx_runtime_1.jsx)(Separator, (0, tslib_1.__assign)({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps), void 0));
 });
 Divider.displayName = 'Divider';
 exports.default = Divider;

package/list/list.d.ts

@@ -1,12 +1,17 @@
-/// <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;
+    $showFocusOutline?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/list/list.js

@@ -2,13 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_virtual_1 = require("@tanstack/react-virtual");
 var overrides_1 = require("../overrides");
+var useCombinedRef_1 = (0, tslib_1.__importStar)(require("../hooks/useCombinedRef"));
 var styled_component_1 = require("./styled-component");
-var List = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children"]);
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _c[0], rootProps = _c[1];
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", role: "list" }, restProps, rootProps, { ref: ref }, { children: children }), void 0));
+var box_1 = require("../box");
+var utils_1 = require("./utils");
+var DEFAULT_LIST_ITEM_HEIGHT = 38;
+var DEFAULT_OVER_SCAN_COUNT = 10;
+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: (0, useCombinedRef_1.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 = (0, tslib_1.__rest)(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role"]);
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _f[0], rootProps = _f[1];
+    var parentRef = React.useRef(null);
+    var combinedRef = (0, useCombinedRef_1.default)(parentRef, forwardedRef);
+    var childrenArr = React.Children.toArray(children);
+    var rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: childrenArr.length,
+        getScrollElement: function () { return scrollElement || parentRef.current; },
+        estimateSize: function () { return estimateItemSize; },
+        overscan: overscanCount,
+        measureElement: utils_1.measureElement,
+    });
+    if (virtual) {
+        return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(box_1.Box
+            // NOTE: resetting margin and padding here. should be removed when normalize css merges
+            , (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", role: role }, restProps, rootProps, { ref: combinedRef }, { children: children }), void 0));
 });
 List.displayName = 'List';
-exports.default = (0, react_1.memo)(List);
+exports.default = React.memo(List);

package/list/styled-component.js

@@ -6,11 +6,9 @@ var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
-// `pl-0 pr-0 mt-0 mb-0` should not be needed, normalize css is not applied to docs
-exports.StyledList = (0, style_1.styled)('ul', 'box-border spr-ui-01 pl-0 pr-0 mt-0 mb-0', function (_a) {
-    var px2rem = _a.px2rem;
-    return ((0, tslib_1.__assign)({ paddingTop: px2rem(10), paddingBottom: px2rem(10) }, (0, longHandHelpers_1.borderRadius)('inherit')));
-}, function (_, _a) {
+exports.StyledList = (0, style_1.styled)('ul', 
+// bottom spacing will be added by ListItem
+'box-border spr-ui-01 py-1 px-1 my-0', (0, longHandHelpers_1.borderRadius)('inherit'), function (_, _a) {
     var $showFocusOutline = _a.$showFocusOutline;
     return ($showFocusOutline ? 'focus-visible:outline-01' : '');
 });
@@ -32,7 +30,7 @@ var backgroundColor = function (_a, _b) {
 };
 exports.StyledListItem = (0, style_1.styled)('li', function (_a, props) {
     var getStyle = _a.getStyle;
-    return getStyle((0, classNames_1.default)('relative flex justify-start py-2 px-4 typography-l1 fill-current spr-ui-01', {
+    return getStyle((0, classNames_1.default)('relative flex justify-start mb-1 last-child:mb-0 py-2 px-3 typography-l1 fill-current spr-ui-01 rounded-6', {
         'items-start': props.$alignItems === 'start',
         'items-center': props.$alignItems === 'center',
         'cursor-pointer': props.$button && !props.$disabled,
@@ -53,20 +51,20 @@ exports.StyledSecondaryText = (0, style_1.styled)('div', 'spr-text-02 typography
         marginTop: px2rem(2),
     });
 });
-exports.StyledListItemDivider = (0, style_1.styled)('li', 'block h-px spr-ui-03');
+exports.StyledListItemDivider = (0, style_1.styled)('li', 'block h-px spr-ui-03 mb-1 last-child:mb-0');
 exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex', function (_a, props) {
     var getStyle = _a.getStyle, direction = _a.direction;
     return getStyle((0, classNames_1.default)({
-        'pr-3': direction !== 'rtl',
-        'pl-3': direction === 'rtl',
+        'pr-2': direction !== 'rtl',
+        'pl-2': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
 exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex', function (_a, props) {
     var getStyle = _a.getStyle, direction = _a.direction;
     return getStyle((0, classNames_1.default)({
-        'pl-3': direction !== 'rtl',
-        'pr-3': direction === 'rtl',
+        'pl-2': direction !== 'rtl',
+        'pr-2': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });