@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/avatar/avatar.js

@@ -22,8 +22,7 @@ function getInitials(name) {
 }
 //If Image is already available in disk cache, then we should directly set isImageLoaded state to true, to avoid flicker between initials and avatar.
 var getIsImageLoaded = function (src) {
-    var isServer = typeof window === 'undefined';
-    if (!src || isServer) {
+    if (!src) {
         return false;
     }
     var imageEl = new Image();
@@ -36,40 +35,45 @@ var Icon = function (_a) {
     return (_jsx(Box, __assign({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: _jsx(UserIcon, __assign({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps), void 0) }), void 0));
 };
 var Avatar = function (props) {
-    var _a = __read(useState(null), 2), imageRef = _a[0], setImageRef = _a[1];
+    var _a = __read(useState(null), 2), imageEl = _a[0], setImageEl = _a[1];
     var _b = props.shape, shape = _b === void 0 ? 'circle' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
-    var _d = __read(useState(function () { return getIsImageLoaded(src); }), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
+    var _d = __read(useState(), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
     var displayName = cleanupDisplayName(name);
     var randomBgColor = useAvatarColor(displayName);
     var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);
     var px2rem = useStyle().px2rem;
     var avatarSize = typeof size === 'string' ? avatarSizeConfig[size].size : px2rem(size);
-    var sharedProps = __assign({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, add$props({ shape: shape, imageLoaded: imageLoaded }));
+    var _initials = initials || getInitials(displayName);
+    var sharedProps = __assign(__assign({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, add$props({ shape: shape, imageLoaded: imageLoaded })), { $isSingleLetterInitial: _initials.length === 1 });
     useIsomorphicLayoutEffect(function () {
-        if (!imageRef || !src) {
+        if (!imageEl) {
+            setImageLoaded(getIsImageLoaded(src));
+            return undefined;
+        }
+        if (!src) {
             setImageLoaded(false);
             return undefined;
         }
-        if (imageRef) {
-            imageRef.onload = function () { return setImageLoaded(true); };
-            imageRef.onerror = function () { return setImageLoaded(false); };
+        if (imageEl) {
+            imageEl.onload = function () { return setImageLoaded(true); };
+            imageEl.onerror = function () { return setImageLoaded(false); };
             /**
              * Important to set src once onload listener is attached.
              * In some cases, image loads before these listeners are attached.
              */
-            imageRef.src = src;
+            imageEl.src = src;
         }
         return function () {
-            if (imageRef) {
-                imageRef.onload = null;
-                imageRef.onerror = null;
+            if (imageEl) {
+                imageEl.onload = null;
+                imageEl.onerror = null;
             }
         };
-    }, [src, imageRef]);
+    }, [src, imageEl]);
     var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
     return (_jsxs(Root, __assign({ "aria-label": imageLoaded ? null : name, className: className, "data-spaceweb": "avatar", "$size": avatarSize }, sharedProps, rootProps, { children: [!imageLoaded &&
-                (isPhoneNumber && !allowPhoneInitials ? (_jsx(Icon, __assign({ overrides: overrides }, sharedProps, initialsProps), void 0)) : (_jsx(Initials, __assign({}, sharedProps, initialsProps, { children: initials || getInitials(displayName) }), void 0))), _jsx(AvatarImage, __assign({ ref: setImageRef, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
+                (isPhoneNumber && !allowPhoneInitials ? (_jsx(Icon, __assign({ overrides: overrides }, sharedProps, initialsProps), void 0)) : (_jsx(Initials, __assign({}, sharedProps, initialsProps, { children: _initials }), void 0))), _jsx(AvatarImage, __assign({ ref: setImageEl, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
 };
 export { Avatar };

package/esm/avatar/styled-component.js

@@ -9,21 +9,33 @@ export var avatarSizeConfig = {
     xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '42px' },
     xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '48px' },
 };
-var getSizeConfig = function (size) { var _a; return (_a = avatarSizeConfig[size]) !== null && _a !== void 0 ? _a : avatarSizeConfig.md; };
-var getFontSize = function (size) { return "".concat(size / 2, "px"); };
+var getRectangleBorderRadius = function (size) {
+    var _a, _b;
+    if (typeof size === 'number') {
+        return "".concat(Math.ceil(Number(size) / 4), "px");
+    }
+    return (_b = (_a = avatarSizeConfig[size]) === null || _a === void 0 ? void 0 : _a.rectangleBorderRadius) !== null && _b !== void 0 ? _b : avatarSizeConfig.md.rectangleBorderRadius;
+};
+var getFontSize = function (size, isSingleLetterInitial) {
+    var _size = typeof size === 'number' ? size : parseFloat(avatarSizeConfig[size].size);
+    if (isSingleLetterInitial) {
+        return _size > 17 ? "".concat(Math.max(13, _size * 0.6), "px") : "".concat(_size * 0.75, "px");
+    }
+    else {
+        return "".concat(_size / 2, "px");
+    }
+};
 export var StyledAvatarGroup = styled('div', 'flex');
 export var StyledRoot = styled('div', 'box-border inline-block', function (_, _a) {
     var $shape = _a.$shape, $color = _a.$color, $didImageFailToLoad = _a.$didImageFailToLoad, $avatarSize = _a.$avatarSize, $size = _a.$size;
-    var avatarSizeTheme = getSizeConfig($avatarSize);
-    var borderRadius = $shape === 'circle' ? '50%' : avatarSizeTheme.rectangleBorderRadius;
+    var borderRadius = $shape === 'circle' ? '50%' : getRectangleBorderRadius($avatarSize);
     return __assign(__assign({}, borderRadiusHelper(borderRadius)), { background: $didImageFailToLoad ? $color : undefined, height: $didImageFailToLoad ? $size : undefined, width: $didImageFailToLoad ? $size : undefined });
 });
-export var StyledInitials = styled('div', 'items-center justify-center h-full flex font-semibold spr-text-01', function (_, _a) {
-    var $avatarSize = _a.$avatarSize;
-    var fontSize = typeof $avatarSize === 'number' ? getFontSize($avatarSize) : getSizeConfig($avatarSize).fontSize;
-    return {
-        fontSize: fontSize,
-    };
+export var StyledInitials = styled('div', 'items-center justify-center h-full flex font-medium spr-text-01', function (_, _a) {
+    var $avatarSize = _a.$avatarSize, $isSingleLetterInitial = _a.$isSingleLetterInitial;
+    return ({
+        fontSize: getFontSize($avatarSize, $isSingleLetterInitial),
+    });
 });
 // borderRadius should be inherited
 export var StyledAvatar = styled('img', 'box-border object-cover', function (_, _a) {

package/esm/avatar/types.d.ts

@@ -29,6 +29,7 @@ export declare type AvatarSharedProps = {
     $shape: Shape;
     $color?: string;
     $avatarSize: string;
+    $isSingleLetterInitial: boolean;
 };
 declare type AvatarOverrides = {
     Root?: Override<AvatarSharedProps & Record<string, any>>;

package/esm/badge/types.d.ts

@@ -16,7 +16,7 @@ export declare type BadgeProps = {
     };
 };
 export declare type SharedProps = {
-    $content?: React.ReactNode;
+    $content?: BadgeProps['content'];
     $horizontalPosition: 'left' | 'right';
     $verticalPosition: 'top' | 'bottom';
     $overlap: Overlap;

package/esm/banner/banner.js

@@ -10,6 +10,7 @@ import { useStyle } from '../style';
 import { StyledButtonLink } from '../link/styled-components';
 import { useLocale } from '../locale';
 import useStickyElement from '../hooks/useStickyElement';
+import { Collapse } from '../transitions/collapse';
 function Icon(_a) {
     var className = _a.className, _b = _a.intent, intent = _b === void 0 ? 'error' : _b, restProps = __rest(_a, ["className", "intent"]);
     var theme = useStyle().theme;
@@ -28,7 +29,7 @@ function Icon(_a) {
         },
     };
     var _c = intentToIconMap[intent], BaseIcon = _c.BaseIcon, prop = _c.prop;
-    return _jsx(BaseIcon, __assign({ className: ['mr-1.5 flex-shrink-0', prop, className] }, restProps, { size: 14 }), void 0);
+    return _jsx(BaseIcon, __assign({ className: ['mt-1 mr-1.5 flex-shrink-0', prop, className] }, restProps, { size: 14 }), void 0);
 }
 function BaseToggleButton(_a) {
     var show = _a.show, className = _a.className, onToggle = _a.onToggle, props = __rest(_a, ["show", "className", "onToggle"]);
@@ -48,7 +49,7 @@ var Banner = forwardRef(function (_a, ref) {
     var _k = __read(useOverrides(overrides.ToggleButton, BaseToggleButton), 2), ToggleButton = _k[0], toggleButtonProps = _k[1];
     var _l = __read(useState(true), 2), show = _l[0], setShow = _l[1];
     var _m = useStickyElement(), isSticky = _m.isSticky, setStickySentinelRef = _m.setStickySentinelRef;
-    return (_jsxs(Root, __assign({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, restProps, rootProps, { ref: ref }, { children: [_jsx("div", { ref: setStickySentinelRef }, void 0), _jsxs(HeaderContainer, __assign({}, headerContainerProps, { "$sticky": isSticky }, { children: [_jsxs(TitleContainer, __assign({}, titleContainerProps, { children: [_jsx(HeaderIcon, __assign({ intent: intent }, headerIconProps), void 0), _jsx(HeaderTitle, __assign({}, headerTitleProps, { children: title }), void 0)] }), void 0), collapsible && _jsx(ToggleButton, __assign({ show: show, onToggle: setShow }, toggleButtonProps), void 0)] }), void 0), show && children && (_jsx(BannerItemContainer, __assign({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, bannerItemContainerProps, { children: children }), void 0))] }), void 0));
+    return (_jsxs(Root, __assign({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, restProps, rootProps, { ref: ref }, { children: [_jsx("div", { ref: setStickySentinelRef }, void 0), _jsxs(HeaderContainer, __assign({}, headerContainerProps, { "$sticky": isSticky }, { children: [_jsxs(TitleContainer, __assign({}, titleContainerProps, { children: [_jsx(HeaderIcon, __assign({ intent: intent }, headerIconProps), void 0), _jsx(HeaderTitle, __assign({}, headerTitleProps, { children: title }), void 0)] }), void 0), collapsible && _jsx(ToggleButton, __assign({ show: show, onToggle: setShow }, toggleButtonProps), void 0)] }), void 0), children && (_jsx(Collapse, __assign({ unmountOnExit: true, visible: show }, { children: _jsx(BannerItemContainer, __assign({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, bannerItemContainerProps, { children: children }), void 0) }), void 0))] }), void 0));
 });
 Banner.displayName = 'Banner';
 export default memo(Banner);

package/esm/banner/styled-component.js

@@ -25,7 +25,7 @@ export var StyledBannerItemContainer = styled('div', 'box-border list-inside lis
     var $as = _b.$as, $maxHeight = _b.$maxHeight;
     return getStyle(cx({ 'list-decimal': $as === 'ol', 'list-disc': $as === 'ul' }), { maxHeight: $maxHeight });
 });
-export var StyledTitleContainer = styled('div', 'flex flex-row justify-center items-center');
+export var StyledTitleContainer = styled('div', 'flex flex-row justify-center items-start');
 export var StyledHeaderContainer = styled('div', 'flex flex-row justify-between sticky top-0 spr-ui-01 px-2 pt-2', function (_a, _b) {
     var theme = _a.theme;
     var $sticky = _b.$sticky;

package/esm/baseui/accordion/accordion.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { AccordionProps, AccordionState, StateChangeType } from './types';
+export default class Accordion extends React.Component<AccordionProps, AccordionState> {
+    static defaultProps: Partial<AccordionProps>;
+    state: {
+        expanded: never[] | React.Key[];
+    };
+    itemRefs: React.RefObject<HTMLDivElement>[];
+    onPanelChange(key: React.Key, onChange: (...args: any[]) => {}, ...args: Array<any>): void;
+    internalSetState(type: StateChangeType, changes: AccordionState): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    getItems(): any;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/esm/baseui/accordion/accordion.js

@@ -0,0 +1,152 @@
+import { __assign, __extends, __read, __spreadArray } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { Root as StyledRoot } from './styled-components';
+import { STATE_CHANGE_TYPE } from './constants';
+var Accordion = /** @class */ (function (_super) {
+    __extends(Accordion, _super);
+    function Accordion() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // @ts-ignore
+        _this.state = __assign({ expanded: [] }, _this.props.initialState);
+        _this.itemRefs = [];
+        return _this;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Accordion.prototype.onPanelChange = function (key, onChange) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        var activeKeys = this.state.expanded;
+        var accordion = this.props.accordion;
+        if (accordion) {
+            activeKeys = activeKeys[0] === key ? [] : [key];
+        }
+        else {
+            activeKeys = __spreadArray([], __read(activeKeys), false);
+            var index = activeKeys.indexOf(key);
+            var wasExpanded = index > -1;
+            if (wasExpanded) {
+                // remove active state
+                activeKeys.splice(index, 1);
+            }
+            else {
+                activeKeys.push(key);
+            }
+        }
+        var newState = { expanded: activeKeys };
+        this.internalSetState(STATE_CHANGE_TYPE.expand, newState);
+        // Call individual panel's onChange handler
+        if (typeof onChange === 'function')
+            onChange.apply(void 0, __spreadArray([], __read(args), false));
+    };
+    Accordion.prototype.internalSetState = function (type, changes) {
+        var _a = this.props, stateReducer = _a.stateReducer, onChange = _a.onChange;
+        var newState = stateReducer(type, changes, this.state);
+        this.setState(newState);
+        typeof onChange === 'function' && onChange(newState);
+    };
+    Accordion.prototype.handleKeyDown = function (e) {
+        if (this.props.disabled) {
+            return;
+        }
+        var itemRefs = this.itemRefs;
+        var HOME = 36;
+        var END = 35;
+        var ARROW_UP = 38;
+        var ARROW_DOWN = 40;
+        if (e.keyCode === HOME) {
+            e.preventDefault();
+            var firstItem = itemRefs[0];
+            firstItem.current && firstItem.current.focus();
+        }
+        if (e.keyCode === END) {
+            e.preventDefault();
+            var lastItem = itemRefs[itemRefs.length - 1];
+            lastItem.current && lastItem.current.focus();
+        }
+        if (e.keyCode === ARROW_UP) {
+            e.preventDefault();
+            var activeItemIdx = itemRefs.findIndex(function (item) { return item.current === document.activeElement; });
+            if (activeItemIdx > 0) {
+                var prevItem = itemRefs[activeItemIdx - 1];
+                prevItem.current && prevItem.current.focus();
+            }
+        }
+        if (e.keyCode === ARROW_DOWN) {
+            e.preventDefault();
+            var activeItemIdx = itemRefs.findIndex(function (item) { return item.current === document.activeElement; });
+            if (activeItemIdx < itemRefs.length - 1) {
+                var nextItem = itemRefs[activeItemIdx + 1];
+                nextItem.current && nextItem.current.focus();
+            }
+        }
+    };
+    Accordion.prototype.getItems = function () {
+        var _this = this;
+        var expanded = this.state.expanded;
+        var _a = this.props, accordion = _a.accordion, disabled = _a.disabled, children = _a.children, renderAll = _a.renderAll, overrides = _a.overrides;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return React.Children.map(children, function (child, index) {
+            if (!child)
+                return;
+            var itemRef = React.createRef();
+            _this.itemRefs.push(itemRef);
+            // If there is no key provided use the panel order as a default key
+            var key = child.key || String(index);
+            var isExpanded = false;
+            if (accordion) {
+                isExpanded = expanded[0] === key;
+            }
+            else {
+                // @ts-ignore
+                isExpanded = expanded.includes(key);
+            }
+            var props = {
+                key: key,
+                ref: itemRef,
+                expanded: isExpanded || child.props.expanded,
+                accordion: accordion,
+                renderAll: renderAll,
+                overrides: child.props.overrides || overrides,
+                disabled: child.props.disabled || disabled,
+                // @ts-ignore
+                onChange: function () {
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    return _this.onPanelChange.apply(_this, __spreadArray([key, child.props.onChange], __read(args), false));
+                },
+            };
+            return React.cloneElement(child, props);
+        });
+    };
+    Accordion.prototype.render = function () {
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var RootOverride = overrides.Root;
+        var _b = __read(getOverrides(RootOverride, StyledRoot), 2), Root = _b[0], rootProps = _b[1];
+        return (_jsx(Root, __assign({ "data-baseweb": "accordion", "$disabled": this.props.disabled, "$isFocusVisible": false, onKeyDown: this.handleKeyDown.bind(this) }, rootProps, { children: this.getItems() }), void 0));
+    };
+    Accordion.defaultProps = {
+        accordion: true,
+        disabled: false,
+        initialState: {
+            expanded: [],
+        },
+        onChange: function () { },
+        overrides: {},
+        renderAll: false,
+        stateReducer: function (type, newState) { return newState; },
+    };
+    return Accordion;
+}(React.Component));
+export default Accordion;

package/esm/baseui/accordion/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const STATE_CHANGE_TYPE: {
+    readonly expand: "expand";
+};

package/esm/baseui/accordion/constants.js

@@ -0,0 +1,9 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export var STATE_CHANGE_TYPE = {
+    expand: 'expand',
+};

package/esm/baseui/accordion/index.d.ts

@@ -0,0 +1,12 @@
+import type { SharedStylePropsArg } from './types';
+export { default as Accordion } from './accordion';
+export { default as Panel } from './panel';
+export { default as StatefulPanel } from './stateful-panel';
+export { default as StatefulPanelContainer } from './stateful-panel-container';
+export { default as StatelessAccordion } from './stateless-accordion';
+export { STATE_CHANGE_TYPE } from './constants';
+export { Root as StyledRoot, PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ContentAnimationContainer as StyledContentAnimationContainer, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, } from './styled-components';
+export * from './types';
+export type { AccordionLocale } from './locale';
+/** @deprecated use SharedStylePropsArg instead. To be removed in future versions.*/
+export declare type SharedProps = SharedStylePropsArg;

package/esm/baseui/accordion/index.js

@@ -0,0 +1,11 @@
+export { default as Accordion } from './accordion';
+export { default as Panel } from './panel';
+export { default as StatefulPanel } from './stateful-panel';
+export { default as StatefulPanelContainer } from './stateful-panel-container';
+export { default as StatelessAccordion } from './stateless-accordion';
+// Constants
+export { STATE_CHANGE_TYPE } from './constants';
+// Styled elements
+export { Root as StyledRoot, PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ContentAnimationContainer as StyledContentAnimationContainer, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, } from './styled-components';
+// Flow
+export * from './types';

package/esm/baseui/accordion/locale.d.ts

@@ -0,0 +1,9 @@
+export declare type AccordionLocale = {
+    collapse: string;
+    expand: string;
+};
+declare const locale: {
+    collapse: string;
+    expand: string;
+};
+export default locale;

package/esm/baseui/accordion/locale.js

@@ -0,0 +1,5 @@
+var locale = {
+    collapse: 'Collapse',
+    expand: 'Expand',
+};
+export default locale;

package/esm/baseui/accordion/panel.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const ForwardedPanel: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    disabled?: boolean | undefined;
+    'aria-controls'?: string | undefined;
+    key?: React.Key | undefined;
+    onChange?: import("./types").OnChangeHandler | undefined;
+    onClick?: ((e: Event) => unknown) | undefined;
+    onKeyDown?: ((e: KeyboardEvent) => unknown) | undefined;
+    overrides?: import("./types").PanelOverrides | undefined;
+    title?: React.ReactNode;
+    renderPanelContent?: boolean | undefined;
+    renderAll?: boolean | undefined;
+} & {
+    expanded?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export default ForwardedPanel;

package/esm/baseui/accordion/panel.js

@@ -0,0 +1,109 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { LocaleContext } from '../locale';
+import { getOverrides } from '../helpers/overrides';
+import { PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, ContentAnimationContainer as StyledContentAnimationContainer, } from './styled-components';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
+var Panel = function (_a, 
+// @ts-ignore
+ref) {
+    var ariaControls = _a["aria-controls"], children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.expanded, expanded = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.onClick, onClick = _e === void 0 ? function () { } : _e, _f = _a.onKeyDown, onKeyDown = _f === void 0 ? function () { } : _f, _g = _a.overrides, overrides = _g === void 0 ? {} : _g, _h = _a.title, title = _h === void 0 ? '' : _h, _j = _a.renderAll, renderAll = _j === void 0 ? false : _j;
+    var _k = __read(React.useState({
+        expanded: expanded,
+        isFocusVisible: false,
+        elementHeight: 0,
+        animationInProgress: false,
+    }), 2), localState = _k[0], setLocalState = _k[1];
+    var handleFocus = React.useCallback(function (event) {
+        if (isFocusVisible(event)) {
+            setLocalState(__assign(__assign({}, localState), { isFocusVisible: true }));
+        }
+    }, [localState]);
+    var handleBlur = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function (event) {
+        if (localState.isFocusVisible) {
+            setLocalState(__assign(__assign({}, localState), { isFocusVisible: false }));
+        }
+    }, [localState]);
+    var handleClick = React.useCallback(function (e) {
+        if (disabled) {
+            return;
+        }
+        typeof onChange === 'function' && onChange({ expanded: !expanded });
+        typeof onClick === 'function' && onClick(e);
+    }, [expanded, disabled, onChange, onClick]);
+    var handleKeyDown = React.useCallback(function (e) {
+        if (disabled) {
+            return;
+        }
+        var ENTER = 13;
+        var SPACE = 32;
+        if (e.keyCode === ENTER || e.keyCode === SPACE) {
+            typeof onChange === 'function' && onChange({ expanded: !expanded });
+            if (e.keyCode === SPACE) {
+                e.preventDefault(); // prevent jumping scroll when using Space
+            }
+        }
+        typeof onKeyDown === 'function' && onKeyDown(e);
+    }, [expanded, disabled, onChange, onKeyDown]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var _animateRef = React.useRef(null);
+    React.useEffect(function () {
+        if (_animateRef.current) {
+            var height = _animateRef.current.getBoundingClientRect().height;
+            // After the first render, when everything is in the DOM, update the local
+            //state to indicate an animation is in progress.
+            if (expanded !== localState.expanded) {
+                setLocalState(__assign(__assign({}, localState), { expanded: expanded, animationInProgress: true }));
+            }
+            else if (parseInt(localState.elementHeight) !== height) {
+                // After the second render (where child elements were added to the Content)
+                //the Content height now reflects the true height. This kicks off the actual
+                //animation.
+                setLocalState(__assign(__assign({}, localState), { elementHeight: height ? "".concat(height, "px") : 0 }));
+            }
+        }
+    }, [_animateRef.current, expanded, localState.elementHeight, localState.expanded, setLocalState]);
+    var contentHeight = React.useMemo(function () {
+        // When closing, the first render will re-query the content element for the new
+        //height and set the height of the animation container from auto to a px value.
+        if (!expanded && localState.expanded) {
+            var height = _animateRef.current.getBoundingClientRect().height;
+            setLocalState(__assign(__assign({}, localState), { elementHeight: height ? "".concat(height, "px") : 0 }));
+            return localState.elementHeight;
+        }
+        if (!localState.expanded) {
+            return 0;
+        }
+        // When no longer animating, set the height to auto to accommodate dynamic nested components.
+        return localState.animationInProgress ? localState.elementHeight : 'auto';
+    }, [expanded, localState.expanded, localState.animationInProgress, localState.elementHeight]);
+    var sharedProps = {
+        $disabled: disabled,
+        $expanded: expanded,
+        $isFocusVisible: localState.isFocusVisible,
+    };
+    var PanelContainerOverride = overrides.PanelContainer, HeaderOverride = overrides.Header, ContentOverride = overrides.Content, ContentAnimationContainerOverride = overrides.ContentAnimationContainer, ToggleIconOverride = overrides.ToggleIcon, ToggleIconGroupOverride = overrides.ToggleIconGroup;
+    var _l = __read(getOverrides(PanelContainerOverride, StyledPanelContainer), 2), PanelContainer = _l[0], panelContainerProps = _l[1];
+    var _m = __read(getOverrides(HeaderOverride, StyledHeader), 2), Header = _m[0], headerProps = _m[1];
+    var _o = __read(getOverrides(ContentOverride, StyledContent), 2), Content = _o[0], contentProps = _o[1];
+    var _p = __read(getOverrides(ContentAnimationContainerOverride, StyledContentAnimationContainer), 2), ContentAnimationContainer = _p[0], contentAnimationProps = _p[1];
+    var _q = __read(getOverrides(ToggleIconGroupOverride, StyledToggleIconGroup), 2), ToggleIconGroup = _q[0], toggleIconGroupProps = _q[1];
+    var _r = __read(getOverrides(ToggleIconOverride, StyledToggleIcon), 2), ToggleIcon = _r[0], toggleIconProps = _r[1];
+    return (_jsx(LocaleContext.Consumer, { children: function (locale) { return (_jsxs(PanelContainer, __assign({}, sharedProps, panelContainerProps, { children: [_jsxs(Header, __assign({ tabIndex: 0, role: "button", "aria-expanded": expanded, "aria-disabled": disabled || null }, sharedProps, headerProps, (ariaControls ? { 'aria-controls': ariaControls } : {}), { onClick: handleClick, onKeyDown: handleKeyDown, onFocus: forkFocus(headerProps, handleFocus), onBlur: forkBlur(headerProps, handleBlur), ref: ref }, { children: [title, _jsxs(ToggleIcon, __assign({ viewBox: "0 0 24 24", title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand, size: 16 }, toggleIconProps, sharedProps, { children: [_jsx(ToggleIconGroup, __assign({}, sharedProps, toggleIconGroupProps, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" }, void 0) }), void 0), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" }, void 0)] }), void 0)] }), void 0), _jsx(ContentAnimationContainer, __assign({}, sharedProps, contentAnimationProps, { "$height": contentHeight, onTransitionEnd: function () {
+                        if (localState.animationInProgress) {
+                            setLocalState(__assign(__assign({}, localState), { animationInProgress: false }));
+                        }
+                    } }, { children: _jsx(Content, __assign({ ref: _animateRef }, sharedProps, contentProps, (ariaControls ? { id: ariaControls } : {}), { children: localState.expanded || renderAll || localState.animationInProgress ? children : null }), void 0) }), void 0)] }), void 0)); } }, void 0));
+};
+var ForwardedPanel = React.forwardRef(Panel);
+ForwardedPanel.displayName = 'Panel';
+export default ForwardedPanel;

package/esm/baseui/accordion/stateful-panel-container.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { PanelState, StatefulPanelContainerProps, PanelStateReducer, StateChangeType, OnChangeHandler } from './types';
+declare class StatefulPanelContainer extends React.Component<StatefulPanelContainerProps, PanelState> {
+    static defaultProps: {
+        initialState: {
+            expanded: boolean;
+        };
+        stateReducer: PanelStateReducer;
+        onChange: () => void;
+    };
+    state: {
+        expanded: boolean;
+    };
+    onChange: OnChangeHandler;
+    internalSetState(type: StateChangeType, changes: PanelState): void;
+    render(): React.ReactNode;
+}
+export default StatefulPanelContainer;

package/esm/baseui/accordion/stateful-panel-container.js

@@ -0,0 +1,42 @@
+import { __assign, __extends, __rest } from "tslib";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { STATE_CHANGE_TYPE } from './constants';
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulPanelContainer = /** @class */ (function (_super) {
+    __extends(StatefulPanelContainer, _super);
+    function StatefulPanelContainer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = __assign({ expanded: false }, _this.props.initialState);
+        _this.onChange = function () {
+            if (typeof _this.props.onChange === 'function') {
+                _this.props.onChange({ expanded: !_this.state.expanded });
+            }
+            _this.internalSetState(STATE_CHANGE_TYPE.expand, {
+                expanded: !_this.state.expanded,
+            });
+        };
+        return _this;
+    }
+    StatefulPanelContainer.prototype.internalSetState = function (type, changes) {
+        var stateReducer = this.props.stateReducer;
+        this.setState(function (prevState) { return (stateReducer ? stateReducer(type, changes, prevState) : changes); });
+    };
+    StatefulPanelContainer.prototype.render = function () {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var _a = this.props, children = _a.children, initialState = _a.initialState, stateReducer = _a.stateReducer, restProps = __rest(_a, ["children", "initialState", "stateReducer"]);
+        return this.props.children(__assign(__assign(__assign({}, restProps), this.state), { onChange: this.onChange }));
+    };
+    StatefulPanelContainer.defaultProps = {
+        initialState: { expanded: false },
+        stateReducer: defaultStateReducer,
+        onChange: function () { },
+    };
+    return StatefulPanelContainer;
+}(React.Component));
+export default StatefulPanelContainer;

package/esm/baseui/accordion/stateful-panel.d.ts

@@ -0,0 +1,2 @@
+import type { StatefulPanelProps } from './types';
+export default function StatefulPanel(props: StatefulPanelProps): import("react/jsx-runtime").JSX.Element;

package/esm/baseui/accordion/stateful-panel.js

@@ -0,0 +1,8 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import StatefulContainer from './stateful-panel-container';
+import Panel from './panel';
+export default function StatefulPanel(props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (componentProps) { return _jsx(Panel, __assign({}, componentProps, { children: children }), void 0); } }), void 0));
+}

package/esm/baseui/accordion/stateless-accordion.d.ts

@@ -0,0 +1,3 @@
+import type { StatelessAccordionProps } from './types';
+declare function StatelessAccordion({ accordion, children, disabled, expanded, onChange, overrides, renderAll, }: StatelessAccordionProps): import("react/jsx-runtime").JSX.Element;
+export default StatelessAccordion;