@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/banner/banner.js

@@ -12,6 +12,7 @@ var style_1 = require("../style");
 var styled_components_1 = require("../link/styled-components");
 var locale_1 = require("../locale");
 var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../hooks/useStickyElement"));
+var collapse_1 = require("../transitions/collapse");
 function Icon(_a) {
     var className = _a.className, _b = _a.intent, intent = _b === void 0 ? 'error' : _b, restProps = (0, tslib_1.__rest)(_a, ["className", "intent"]);
     var theme = (0, style_1.useStyle)().theme;
@@ -30,7 +31,7 @@ function Icon(_a) {
         },
     };
     var _c = intentToIconMap[intent], BaseIcon = _c.BaseIcon, prop = _c.prop;
-    return (0, jsx_runtime_1.jsx)(BaseIcon, (0, tslib_1.__assign)({ className: ['mr-1.5 flex-shrink-0', prop, className] }, restProps, { size: 14 }), void 0);
+    return (0, jsx_runtime_1.jsx)(BaseIcon, (0, tslib_1.__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 = (0, tslib_1.__rest)(_a, ["show", "className", "onToggle"]);
@@ -50,7 +51,7 @@ var Banner = (0, react_1.forwardRef)(function (_a, ref) {
     var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.ToggleButton, BaseToggleButton), 2), ToggleButton = _k[0], toggleButtonProps = _k[1];
     var _l = (0, tslib_1.__read)((0, react_1.useState)(true), 2), show = _l[0], setShow = _l[1];
     var _m = (0, useStickyElement_1.default)(), isSticky = _m.isSticky, setStickySentinelRef = _m.setStickySentinelRef;
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }, void 0), (0, jsx_runtime_1.jsxs)(HeaderContainer, (0, tslib_1.__assign)({}, headerContainerProps, { "$sticky": isSticky }, { children: [(0, jsx_runtime_1.jsxs)(TitleContainer, (0, tslib_1.__assign)({}, titleContainerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderIcon, (0, tslib_1.__assign)({ intent: intent }, headerIconProps), void 0), (0, jsx_runtime_1.jsx)(HeaderTitle, (0, tslib_1.__assign)({}, headerTitleProps, { children: title }), void 0)] }), void 0), collapsible && (0, jsx_runtime_1.jsx)(ToggleButton, (0, tslib_1.__assign)({ show: show, onToggle: setShow }, toggleButtonProps), void 0)] }), void 0), show && children && ((0, jsx_runtime_1.jsx)(BannerItemContainer, (0, tslib_1.__assign)({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, bannerItemContainerProps, { children: children }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }, void 0), (0, jsx_runtime_1.jsxs)(HeaderContainer, (0, tslib_1.__assign)({}, headerContainerProps, { "$sticky": isSticky }, { children: [(0, jsx_runtime_1.jsxs)(TitleContainer, (0, tslib_1.__assign)({}, titleContainerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderIcon, (0, tslib_1.__assign)({ intent: intent }, headerIconProps), void 0), (0, jsx_runtime_1.jsx)(HeaderTitle, (0, tslib_1.__assign)({}, headerTitleProps, { children: title }), void 0)] }), void 0), collapsible && (0, jsx_runtime_1.jsx)(ToggleButton, (0, tslib_1.__assign)({ show: show, onToggle: setShow }, toggleButtonProps), void 0)] }), void 0), children && ((0, jsx_runtime_1.jsx)(collapse_1.Collapse, (0, tslib_1.__assign)({ unmountOnExit: true, visible: show }, { children: (0, jsx_runtime_1.jsx)(BannerItemContainer, (0, tslib_1.__assign)({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, bannerItemContainerProps, { children: children }), void 0) }), void 0))] }), void 0));
 });
 Banner.displayName = 'Banner';
 exports.default = (0, react_1.memo)(Banner);

package/banner/styled-component.js

@@ -29,7 +29,7 @@ exports.StyledBannerItemContainer = (0, style_1.styled)('div', 'box-border list-
     var $as = _b.$as, $maxHeight = _b.$maxHeight;
     return getStyle((0, classNames_1.default)({ 'list-decimal': $as === 'ol', 'list-disc': $as === 'ul' }), { maxHeight: $maxHeight });
 });
-exports.StyledTitleContainer = (0, style_1.styled)('div', 'flex flex-row justify-center items-center');
+exports.StyledTitleContainer = (0, style_1.styled)('div', 'flex flex-row justify-center items-start');
 exports.StyledHeaderContainer = (0, style_1.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/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/baseui/accordion/accordion.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("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.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var overrides_1 = require("../helpers/overrides");
+var styled_components_1 = require("./styled-components");
+var constants_1 = require("./constants");
+var Accordion = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Accordion, _super);
+    function Accordion() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // @ts-ignore
+        _this.state = (0, tslib_1.__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 = (0, tslib_1.__spreadArray)([], (0, tslib_1.__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(constants_1.STATE_CHANGE_TYPE.expand, newState);
+        // Call individual panel's onChange handler
+        if (typeof onChange === 'function')
+            onChange.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__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, (0, tslib_1.__spreadArray)([key, child.props.onChange], (0, tslib_1.__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 = (0, tslib_1.__read)((0, overrides_1.getOverrides)(RootOverride, styled_components_1.Root), 2), Root = _b[0], rootProps = _b[1];
+        return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__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));
+exports.default = Accordion;

package/baseui/accordion/constants.d.ts

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

package/baseui/accordion/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_CHANGE_TYPE = void 0;
+/*
+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.
+*/
+exports.STATE_CHANGE_TYPE = {
+    expand: 'expand',
+};

package/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/baseui/accordion/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledToggleIconGroup = exports.StyledToggleIcon = exports.StyledContentAnimationContainer = exports.StyledContent = exports.StyledHeader = exports.StyledPanelContainer = exports.StyledRoot = exports.STATE_CHANGE_TYPE = exports.StatelessAccordion = exports.StatefulPanelContainer = exports.StatefulPanel = exports.Panel = exports.Accordion = void 0;
+var tslib_1 = require("tslib");
+var accordion_1 = require("./accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(accordion_1).default; } });
+var panel_1 = require("./panel");
+Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(panel_1).default; } });
+var stateful_panel_1 = require("./stateful-panel");
+Object.defineProperty(exports, "StatefulPanel", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_panel_1).default; } });
+var stateful_panel_container_1 = require("./stateful-panel-container");
+Object.defineProperty(exports, "StatefulPanelContainer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_panel_container_1).default; } });
+var stateless_accordion_1 = require("./stateless-accordion");
+Object.defineProperty(exports, "StatelessAccordion", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateless_accordion_1).default; } });
+// Constants
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return constants_1.STATE_CHANGE_TYPE; } });
+// Styled elements
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.Root; } });
+Object.defineProperty(exports, "StyledPanelContainer", { enumerable: true, get: function () { return styled_components_1.PanelContainer; } });
+Object.defineProperty(exports, "StyledHeader", { enumerable: true, get: function () { return styled_components_1.Header; } });
+Object.defineProperty(exports, "StyledContent", { enumerable: true, get: function () { return styled_components_1.Content; } });
+Object.defineProperty(exports, "StyledContentAnimationContainer", { enumerable: true, get: function () { return styled_components_1.ContentAnimationContainer; } });
+Object.defineProperty(exports, "StyledToggleIcon", { enumerable: true, get: function () { return styled_components_1.ToggleIcon; } });
+Object.defineProperty(exports, "StyledToggleIconGroup", { enumerable: true, get: function () { return styled_components_1.ToggleIconGroup; } });
+// Flow
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/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/baseui/accordion/locale.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var locale = {
+    collapse: 'Collapse',
+    expand: 'Expand',
+};
+exports.default = locale;

package/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/baseui/accordion/panel.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("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.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var locale_1 = require("../locale");
+var overrides_1 = require("../helpers/overrides");
+var styled_components_1 = require("./styled-components");
+var focusVisible_1 = require("../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 = (0, tslib_1.__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 ((0, focusVisible_1.isFocusVisible)(event)) {
+            setLocalState((0, tslib_1.__assign)((0, tslib_1.__assign)({}, localState), { isFocusVisible: true }));
+        }
+    }, [localState]);
+    var handleBlur = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function (event) {
+        if (localState.isFocusVisible) {
+            setLocalState((0, tslib_1.__assign)((0, tslib_1.__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((0, tslib_1.__assign)((0, tslib_1.__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((0, tslib_1.__assign)((0, tslib_1.__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((0, tslib_1.__assign)((0, tslib_1.__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 = (0, tslib_1.__read)((0, overrides_1.getOverrides)(PanelContainerOverride, styled_components_1.PanelContainer), 2), PanelContainer = _l[0], panelContainerProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.getOverrides)(HeaderOverride, styled_components_1.Header), 2), Header = _m[0], headerProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.getOverrides)(ContentOverride, styled_components_1.Content), 2), Content = _o[0], contentProps = _o[1];
+    var _p = (0, tslib_1.__read)((0, overrides_1.getOverrides)(ContentAnimationContainerOverride, styled_components_1.ContentAnimationContainer), 2), ContentAnimationContainer = _p[0], contentAnimationProps = _p[1];
+    var _q = (0, tslib_1.__read)((0, overrides_1.getOverrides)(ToggleIconGroupOverride, styled_components_1.ToggleIconGroup), 2), ToggleIconGroup = _q[0], toggleIconGroupProps = _q[1];
+    var _r = (0, tslib_1.__read)((0, overrides_1.getOverrides)(ToggleIconOverride, styled_components_1.ToggleIcon), 2), ToggleIcon = _r[0], toggleIconProps = _r[1];
+    return ((0, jsx_runtime_1.jsx)(locale_1.LocaleContext.Consumer, { children: function (locale) { return ((0, jsx_runtime_1.jsxs)(PanelContainer, (0, tslib_1.__assign)({}, sharedProps, panelContainerProps, { children: [(0, jsx_runtime_1.jsxs)(Header, (0, tslib_1.__assign)({ tabIndex: 0, role: "button", "aria-expanded": expanded, "aria-disabled": disabled || null }, sharedProps, headerProps, (ariaControls ? { 'aria-controls': ariaControls } : {}), { onClick: handleClick, onKeyDown: handleKeyDown, onFocus: (0, focusVisible_1.forkFocus)(headerProps, handleFocus), onBlur: (0, focusVisible_1.forkBlur)(headerProps, handleBlur), ref: ref }, { children: [title, (0, jsx_runtime_1.jsxs)(ToggleIcon, (0, tslib_1.__assign)({ viewBox: "0 0 24 24", title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand, size: 16 }, toggleIconProps, sharedProps, { children: [(0, jsx_runtime_1.jsx)(ToggleIconGroup, (0, tslib_1.__assign)({}, sharedProps, toggleIconGroupProps, { children: (0, jsx_runtime_1.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), (0, jsx_runtime_1.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), (0, jsx_runtime_1.jsx)(ContentAnimationContainer, (0, tslib_1.__assign)({}, sharedProps, contentAnimationProps, { "$height": contentHeight, onTransitionEnd: function () {
+                        if (localState.animationInProgress) {
+                            setLocalState((0, tslib_1.__assign)((0, tslib_1.__assign)({}, localState), { animationInProgress: false }));
+                        }
+                    } }, { children: (0, jsx_runtime_1.jsx)(Content, (0, tslib_1.__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';
+exports.default = ForwardedPanel;

package/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/baseui/accordion/stateful-panel-container.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("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.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var constants_1 = require("./constants");
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulPanelContainer = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(StatefulPanelContainer, _super);
+    function StatefulPanelContainer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = (0, tslib_1.__assign)({ expanded: false }, _this.props.initialState);
+        _this.onChange = function () {
+            if (typeof _this.props.onChange === 'function') {
+                _this.props.onChange({ expanded: !_this.state.expanded });
+            }
+            _this.internalSetState(constants_1.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 = (0, tslib_1.__rest)(_a, ["children", "initialState", "stateReducer"]);
+        return this.props.children((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), this.state), { onChange: this.onChange }));
+    };
+    StatefulPanelContainer.defaultProps = {
+        initialState: { expanded: false },
+        stateReducer: defaultStateReducer,
+        onChange: function () { },
+    };
+    return StatefulPanelContainer;
+}(React.Component));
+exports.default = StatefulPanelContainer;

package/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/baseui/accordion/stateful-panel.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var stateful_panel_container_1 = (0, tslib_1.__importDefault)(require("./stateful-panel-container"));
+var panel_1 = (0, tslib_1.__importDefault)(require("./panel"));
+function StatefulPanel(props) {
+    var children = props.children, restProps = (0, tslib_1.__rest)(props, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(stateful_panel_container_1.default, (0, tslib_1.__assign)({}, restProps, { children: function (componentProps) { return (0, jsx_runtime_1.jsx)(panel_1.default, (0, tslib_1.__assign)({}, componentProps, { children: children }), void 0); } }), void 0));
+}
+exports.default = StatefulPanel;

package/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;

package/baseui/accordion/stateless-accordion.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("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.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_is_1 = require("react-is");
+var overrides_1 = require("../helpers/overrides");
+var styled_components_1 = require("./styled-components");
+function StatelessAccordion(_a) {
+    var _b = _a.accordion, accordion = _b === void 0 ? true : _b, children = _a.children, disabled = _a.disabled, expanded = _a.expanded, onChange = _a.onChange, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, renderAll = _a.renderAll;
+    var RootOverrides = overrides.Root, PanelOverrides = (0, tslib_1.__rest)(overrides, ["Root"]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(RootOverrides, styled_components_1.Root), 2), Root = _d[0], rootProps = _d[1];
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-baseweb": "accordion" }, rootProps, { children: React.Children.map(children, function (child, index) {
+            var normalizedChild = (0, react_is_1.isElement)(child) || (0, react_is_1.isPortal)(child) ? (child) : (
+            // if primitive value - wrap it in a fragment
+            (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: child }, void 0));
+            var key = normalizedChild.key || String(index);
+            return React.cloneElement(normalizedChild, {
+                disabled: normalizedChild.props.disabled || disabled,
+                expanded: expanded.includes(key),
+                key: key,
+                onChange: 
+                // Don't bother constructing the wrapper function if no one is listening
+                onChange && typeof onChange === 'function'
+                    ? function () {
+                        // @ts-ignore
+                        var next;
+                        if (accordion) {
+                            if (expanded.includes(key)) {
+                                next = [];
+                            }
+                            else {
+                                next = [key];
+                            }
+                        }
+                        else {
+                            if (expanded.includes(key)) {
+                                next = expanded.filter(function (k) { return k !== key; });
+                            }
+                            else {
+                                next = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(expanded), false), [key], false);
+                            }
+                        }
+                        // @ts-ignore
+                        onChange({ key: key, expanded: next });
+                    }
+                    : onChange,
+                overrides: normalizedChild.props.overrides || PanelOverrides,
+                renderAll: renderAll,
+            });
+        }) }), void 0));
+}
+exports.default = StatelessAccordion;

package/baseui/accordion/styled-components.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Main component container element
+ */
+export declare const Root: import("../../style/styled").StyledComponent;
+export declare const PanelContainer: import("../../style/styled").StyledComponent;
+export declare const Header: import("../../style/styled").StyledComponent;
+export declare const ToggleIcon: import("../../style/styled").StyledComponent;
+export declare const ToggleIconGroup: import("../../style/styled").StyledComponent;
+export declare const Content: import("../../style/styled").StyledComponent;
+export declare const ContentAnimationContainer: import("../../style/styled").StyledComponent;

package/baseui/accordion/styled-components.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentAnimationContainer = exports.Content = exports.ToggleIconGroup = exports.ToggleIcon = exports.Header = exports.PanelContainer = exports.Root = void 0;
+/*
+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.
+*/
+var style_1 = require("../../style");
+/**
+ * Main component container element
+ */
+exports.Root = (0, style_1.styled)('ul', 'my-0 px-0 w-full list-none');
+exports.Root.displayName = 'Root';
+exports.PanelContainer = (0, style_1.styled)('li', 'spr-border-03 list-none w-full border-b-1', { borderBottomStyle: 'solid' });
+exports.PanelContainer.displayName = 'PanelContainer';
+exports.Header = (0, style_1.styled)('div', 'm-0 px-5 py-4 flex items-center justify-between nav-ui-01 text-16 leading-8 font-500', function (_, props) {
+    var $disabled = props.$disabled;
+    return {
+        cursor: $disabled ? 'not-allowed' : 'pointer',
+        outlineOffset: '-3px',
+    };
+});
+exports.Header.displayName = 'Header';
+exports.ToggleIcon = (0, style_1.styled)('svg', 'h-4 w-4 inline-block flex-shrink-0', function (_a, props) {
+    var theme = _a.theme;
+    var $disabled = props.$disabled, $color = props.$color;
+    return {
+        color: $color || theme.nav.ui01,
+        cursor: $disabled ? 'not-allowed' : 'pointer',
+    };
+});
+exports.ToggleIcon.displayName = 'ToggleIcon';
+exports.ToggleIconGroup = (0, style_1.styled)('g', 'origin-center transition-transform duration-500 ease-out', function (_, _a) {
+    var $expanded = _a.$expanded;
+    return ({ transform: $expanded ? 'rotate(0)' : 'rotate(-90deg)' });
+});
+exports.ToggleIconGroup.displayName = 'ToggleIconGroup';
+exports.Content = (0, style_1.styled)('div', 'px-6 pt-6 pb-10 text-14 leading-8 m-0 nav-text-01 overflow-hidden duration-500 ease-out delay-200 box-border', function (_, props) {
+    var $expanded = props.$expanded;
+    return {
+        boxSizing: 'border-box',
+        opacity: $expanded ? 1 : 0,
+        visibility: $expanded ? 'visible' : 'hidden',
+        transitionProperty: 'opacity,visibility',
+    };
+});
+exports.Content.displayName = 'Content';
+exports.ContentAnimationContainer = (0, style_1.styled)('div', 'overflow-hidden duration-500 ease-out', function (_, props) {
+    var $height = props.$height;
+    return {
+        height: "".concat($height),
+        transitionProperty: 'height',
+    };
+});
+exports.ContentAnimationContainer.displayName = 'ContentAnimationContainer';