@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/asyncSelect/types.d.ts

@@ -2,27 +2,74 @@
  *  Created by Aneree on 03/11/20.
  */
 import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { SelectProps, Option, Value } from '../select/types';
+import { SelectProps, Option, Value, OnChangeParams } from '../select/types';
 export declare type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
-export declare type AllOptionsMap = Record<string | number, Option>;
-/**
- * NOTE:
- *   AsyncSelect does not support select all option
- *   removed the support of these props in AsyncSelect
- */
-export declare type AsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll'> & {
-    loadOptions: (input: string, page: number) => Promise<{
+export declare type Id = string | number;
+export declare type AllOptionsMap = Record<Id, Option>;
+export declare type GroupedOptions = Record<string, Array<Option>>;
+export declare type LoadOptions = (input: string, groupFilters: {
+    group: string;
+    pageNumber: number;
+}[]) => Promise<{
+    groups: Array<{
+        group: string;
         options: Array<Option>;
         complete: boolean;
+        count?: number;
     }>;
+}>;
+export declare type AsyncSelectValue = Array<Id | Option> | Value;
+declare type BaseAsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'value' | 'onChange' | 'scrollContainer'> & {
     paginationBuffer?: number;
     searchingText?: ReactNode;
     minimumInput?: number;
     debounceInterval?: number;
-    initialOptions?: Array<Option>;
-    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
     loadOnFocus?: boolean;
     loadOnMount?: boolean;
     listenAllInputChanges?: boolean;
+    value?: AsyncSelectValue;
+    onChange?: (params: OnChangeParams & {
+        valueKeys: Id[];
+    }) => unknown;
+    resolveValuesOnUpdate?: boolean;
+    hideUnresolvedValues?: boolean;
+    moveSelectedOptionsToTop?: boolean;
+};
+export declare type AsyncSelectProps = BaseAsyncSelectProps & {
+    loadOptions: (input: string, page: number) => Promise<{
+        options: Array<Option>;
+        complete: boolean;
+    }>;
+    initialOptions?: Array<Option>;
+    resolveSelectedOptions?: (unresolvedValueKeys: Array<Id>) => Promise<Array<Option>>;
+};
+export declare type GroupConfig = Array<{
+    id: string;
+    label: string;
+}>;
+export declare type GroupedValue = Record<string, AsyncSelectValue>;
+export declare type GroupedAsyncSelectProps = Omit<BaseAsyncSelectProps, 'creatable' | 'onChange' | 'value'> & {
+    loadOptions: (input: string, groupFilters: Array<{
+        group: string;
+        pageNumber: number;
+    }>) => Promise<{
+        groups: {
+            group: string;
+            options: Array<Option>;
+            complete: boolean;
+            count?: number;
+        }[];
+    }>;
+    initialOptions?: Record<string, Array<Option>>;
+    groupConfig: GroupConfig;
+    initialExpandedCount?: number;
+    resolveSelectedOptions?: (groupVsUnresolvedValueKeys: Record<string, Array<Id>>) => Promise<GroupedOptions>;
+    value?: GroupedValue;
+    onChange?: (params: Omit<OnChangeParams, 'value'> & {
+        value: GroupedOptions;
+        valueKeys: Record<string, Id[]>;
+    }) => unknown;
+    showSelectAll?: boolean;
+    selectAllSelected?: boolean;
 };
 export type { Value, Option };

package/asyncSelect/utils/defaultAsyncSelectFilterOptions.d.ts

@@ -0,0 +1,2 @@
+import defaultProps from '../../select/default-props';
+export declare const defaultAsyncSelectFilterOptions: NonNullable<typeof defaultProps.filterOptions>;

package/asyncSelect/utils/defaultAsyncSelectFilterOptions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultAsyncSelectFilterOptions = void 0;
+var tslib_1 = require("tslib");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../../select/default-props"));
+var defaultAsyncSelectFilterOptions = function (options, filterValue, excludeOptions, props) { return default_props_1.default.filterOptions(options, filterValue, excludeOptions, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { filterOnlyCreated: true })); };
+exports.defaultAsyncSelectFilterOptions = defaultAsyncSelectFilterOptions;

package/asyncSelect/utils/defaultCreateOption.d.ts

@@ -0,0 +1,5 @@
+import { Options } from '../../baseui/select';
+export declare const defaultCreateOption: (label: string, { labelKey, valueKey }?: {
+    labelKey?: string | undefined;
+    valueKey?: string | undefined;
+}) => Options;

package/asyncSelect/utils/defaultCreateOption.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCreateOption = void 0;
+var tslib_1 = require("tslib");
+var select_1 = require("../../baseui/select");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../../select/default-props"));
+var defaultCreateOption = function (label, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.labelKey, labelKey = _d === void 0 ? default_props_1.default.labelKey : _d, _e = _c.valueKey, valueKey = _e === void 0 ? default_props_1.default.valueKey : _e;
+    return [(_b = {}, _b[labelKey] = label.trim(), _b[valueKey] = label.trim(), _b[select_1.CREATED_KEY] = true, _b)];
+};
+exports.defaultCreateOption = defaultCreateOption;

package/avatar/avatar.js

@@ -23,46 +23,60 @@ function getInitials(name) {
     var initials = words.map(function (word) { return word[0]; });
     return initials.slice(0, 2).join('').toUpperCase();
 }
+//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) {
+    if (!src) {
+        return false;
+    }
+    var imageEl = new Image();
+    imageEl.src = src;
+    return imageEl.complete;
+};
 var Icon = function (_a) {
     var overrides = _a.overrides, className = _a.className, props = (0, tslib_1.__rest)(_a, ["overrides", "className"]);
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.UserIcon, user_1.default), 2), UserIcon = _b[0], iconProps = _b[1];
     return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: (0, jsx_runtime_1.jsx)(UserIcon, (0, tslib_1.__assign)({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps), void 0) }), void 0));
 };
 var Avatar = function (props) {
-    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), imageRef = _a[0], setImageRef = _a[1];
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), imageLoaded = _b[0], setImageLoaded = _b[1];
-    var _c = props.shape, shape = _c === void 0 ? 'circle' : _c, _d = props.size, size = _d === void 0 ? 'md' : _d, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
+    var _a = (0, tslib_1.__read)((0, react_1.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 = (0, tslib_1.__read)((0, react_1.useState)(), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
     var displayName = (0, cleanupDisplayName_1.cleanupDisplayName)(name);
     var randomBgColor = (0, useAvatarColor_1.useAvatarColor)(displayName);
     var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);
     var px2rem = (0, style_1.useStyle)().px2rem;
     var avatarSize = typeof size === 'string' ? styled_component_1.avatarSizeConfig[size].size : px2rem(size);
-    var sharedProps = (0, tslib_1.__assign)({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, (0, helpers_1.add$props)({ shape: shape, imageLoaded: imageLoaded }));
+    var _initials = initials || getInitials(displayName);
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, (0, helpers_1.add$props)({ shape: shape, imageLoaded: imageLoaded })), { $isSingleLetterInitial: _initials.length === 1 });
     (0, useIsomorphicLayoutEffect_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 = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, styled_component_1.StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
     var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, styled_component_1.StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
     return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "aria-label": imageLoaded ? null : name, className: className, "data-spaceweb": "avatar", "$size": avatarSize }, sharedProps, rootProps, { children: [!imageLoaded &&
-                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, (0, tslib_1.__assign)({ overrides: overrides }, sharedProps, initialsProps), void 0)) : ((0, jsx_runtime_1.jsx)(Initials, (0, tslib_1.__assign)({}, sharedProps, initialsProps, { children: initials || getInitials(displayName) }), void 0))), (0, jsx_runtime_1.jsx)(AvatarImage, (0, tslib_1.__assign)({ ref: setImageRef, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
+                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, (0, tslib_1.__assign)({ overrides: overrides }, sharedProps, initialsProps), void 0)) : ((0, jsx_runtime_1.jsx)(Initials, (0, tslib_1.__assign)({}, sharedProps, initialsProps, { children: _initials }), void 0))), (0, jsx_runtime_1.jsx)(AvatarImage, (0, tslib_1.__assign)({ ref: setImageEl, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
 };
 exports.Avatar = Avatar;

package/avatar/styled-component.js

@@ -5,43 +5,40 @@ var tslib_1 = require("tslib");
 var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 exports.avatarSizeConfig = {
-    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '8px' },
-    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '10px' },
-    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '12px' },
-    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '16px' },
-    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '16px' },
-    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '16px' },
+    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '12px' },
+    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '17px' },
+    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '20px' },
+    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '24px' },
+    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '42px' },
+    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '48px' },
 };
-var getSizeConfig = function (size) { var _a; return (_a = exports.avatarSizeConfig[size]) !== null && _a !== void 0 ? _a : exports.avatarSizeConfig.md; };
-var getFontSize = function (size) {
-    if (size < 24)
-        return '8px';
-    else if (size < 36)
-        return '12px';
-    else if (size < 48)
-        return '16px';
-    else if (size < 60)
-        return '20px';
-    else if (size < 72)
-        return '24px';
-    else if (size < 84)
-        return '28px';
-    else
-        return '36px';
+var getRectangleBorderRadius = function (size) {
+    var _a, _b;
+    if (typeof size === 'number') {
+        return "".concat(Math.ceil(Number(size) / 4), "px");
+    }
+    return (_b = (_a = exports.avatarSizeConfig[size]) === null || _a === void 0 ? void 0 : _a.rectangleBorderRadius) !== null && _b !== void 0 ? _b : exports.avatarSizeConfig.md.rectangleBorderRadius;
+};
+var getFontSize = function (size, isSingleLetterInitial) {
+    var _size = typeof size === 'number' ? size : parseFloat(exports.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");
+    }
 };
 exports.StyledAvatarGroup = (0, styled_1.default)('div', 'flex');
 exports.StyledRoot = (0, styled_1.default)('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 (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(borderRadius)), { background: $didImageFailToLoad ? $color : undefined, height: $didImageFailToLoad ? $size : undefined, width: $didImageFailToLoad ? $size : undefined });
 });
-exports.StyledInitials = (0, styled_1.default)('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,
-    };
+exports.StyledInitials = (0, styled_1.default)('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
 exports.StyledAvatar = (0, styled_1.default)('img', 'box-border object-cover', function (_, _a) {

package/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/badge/styled-component.js

@@ -13,21 +13,23 @@ var sizeMap = {
     lg: '50%',
 };
 var isCustomContent = function (content) { return typeof content === 'function'; };
-var anchorOffset = function (_, _a) {
-    var $horizontalPosition = _a.$horizontalPosition, $verticalPosition = _a.$verticalPosition, $overlap = _a.$overlap;
+var anchorOffset = function (_a, _b) {
+    var isRTL = _a.isRTL;
+    var $horizontalPosition = _b.$horizontalPosition, $verticalPosition = _b.$verticalPosition, $overlap = _b.$overlap;
     var offset = $overlap === 'rectangle' ? 0 : '14%';
     var horizontalOffset = $horizontalPosition === 'left' ? { left: offset } : { right: offset };
     var verticalOffset = $verticalPosition === 'top' ? { top: offset } : { bottom: offset };
+    var rtlHorizontalPosition = isRTL ? ($horizontalPosition === 'right' ? 'left' : 'right') : $horizontalPosition;
     var transform = $verticalPosition === 'top'
         ? {
-            transform: $horizontalPosition === 'left'
-                ? 'translate(calc(-100% + min(1rem, 50%)), -50%)' // min of 1rem( for large elements ) and 50%( for small elements )
-                : 'translate(calc(100% - min(1rem, 50%)), -50%)',
+            transform: rtlHorizontalPosition === 'left'
+                ? 'translate(calc(-100% + min(1rem, 50%)), -50%) /* @noflip */' // min of 1rem( for large elements ) and 50%( for small elements )
+                : 'translate(calc(100% - min(1rem, 50%)), -50%) /* @noflip */',
         }
         : {
-            transform: $horizontalPosition === 'left'
-                ? 'translate(calc(-100% + min(1rem, 50%)), 50%)'
-                : 'translate(calc(100% - min(1rem, 50%)), 50%)',
+            transform: rtlHorizontalPosition === 'left'
+                ? 'translate(calc(-100% + min(1rem, 50%)), 50%) /* @noflip */'
+                : 'translate(calc(100% - min(1rem, 50%)), 50%) /* @noflip */',
         };
     return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, horizontalOffset), verticalOffset), transform);
 };

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