@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/asyncSelect/types.d.ts

@@ -1,29 +1,75 @@
 /**
  *  Created by Aneree on 03/11/20.
  */
-import { Dispatch, MutableRefObject, RefCallback, SetStateAction } from 'react';
-import { SelectProps, Option, Value } from '../select/types';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+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' | 'controlRef'> & {
-    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?: string;
+    searchingText?: ReactNode;
     minimumInput?: number;
     debounceInterval?: number;
-    initialOptions?: Array<Option>;
-    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
     loadOnFocus?: boolean;
     loadOnMount?: boolean;
-    controlRef?: MutableRefObject<HTMLInputElement> | RefCallback<HTMLInputElement> | null;
     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/index.d.ts

@@ -2,4 +2,4 @@ export { Avatar } from './avatar';
 export { AvatarGroup } from './avatar-group';
 export { StyledAvatarGroup, StyledAvatar, StyledInitials, StyledRoot } from './styled-component';
 export { useAvatarColor } from './useAvatarColor';
-export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps, AvatarState, } from './types';
+export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps, } from './types';

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>>;
@@ -47,4 +48,4 @@ export declare type AvatarProps = {
     overrides?: AvatarOverrides;
     allowPhoneInitials?: boolean;
 };
-export type { AvatarState } from 'baseui/avatar';
+export {};

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-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    children?: import("react").ReactNode;
+    overrides?: {
+        Root?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+} & import("react").RefAttributes<HTMLElement>>>;
+export default _default;

package/banner/banner-item.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var BannerItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children"]);
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledBannerItem), 2), Root = _c[0], rootProps = _c[1];
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "banner-item", role: "listitem" }, rootProps, restProps, { ref: ref }, { children: children }), void 0));
+});
+BannerItem.displayName = 'BannerItem';
+exports.default = (0, react_1.memo)(BannerItem);

package/banner/banner.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../types").SpacewebComponentProps<React.AllHTMLAttributes<HTMLElement>>, "title"> & {
+    intent?: "success" | "warning" | "error" | undefined;
+    $as?: string | undefined;
+    collapsible?: boolean | undefined;
+    title: React.ReactNode;
+    children?: React.ReactNode;
+    maxItemContainerHeight?: string | undefined;
+    overrides?: {
+        Root?: import("../overrides").Override<Record<string, any>> | undefined;
+        BannerItemContainer?: import("../overrides").Override<Record<string, any>> | undefined;
+        HeaderTitle?: import("../overrides").Override<Record<string, any>> | undefined;
+        HeaderIcon?: import("../overrides").Override<Record<string, any>> | undefined;
+        HeaderContainer?: import("../overrides").Override<Record<string, any>> | undefined;
+        TitleContainer?: import("../overrides").Override<Record<string, any>> | undefined;
+        ToggleButton?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+} & React.RefAttributes<HTMLElement>>>;
+export default _default;

package/banner/banner.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var error_clr_1 = (0, tslib_1.__importDefault)(require("../icon/components/error-clr"));
+var alert_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/alert-solid"));
+var tickCircle_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/tickCircle-solid"));
+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;
+    var intentToIconMap = {
+        error: {
+            BaseIcon: error_clr_1.default,
+            prop: [{ fill: theme.spr.supportError }],
+        },
+        warning: {
+            BaseIcon: alert_solid_1.default,
+            prop: [{ fill: theme.spr.supportWarning }],
+        },
+        success: {
+            BaseIcon: tickCircle_solid_1.default,
+            prop: [{ fill: theme.spr.supportSuccess }],
+        },
+    };
+    var _c = intentToIconMap[intent], BaseIcon = _c.BaseIcon, prop = _c.prop;
+    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"]);
+    var locale = (0, locale_1.useLocale)();
+    var label = show ? locale.banner.toggleButtonHideLabel : locale.banner.toggleButtonShowLabel;
+    var ariaLabel = show ? locale.banner.toggleButtonHideAriaLabel : locale.banner.toggleButtonShowAriaLabel;
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledButtonLink, (0, tslib_1.__assign)({ "data-testid": "banner-toggle-button", "aria-label": ariaLabel, className: ['typography-l2 pl-2', className], onClick: function () { return onToggle(!show); }, "$show": show }, props, { children: label }), void 0));
+}
+var Banner = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.intent, intent = _b === void 0 ? 'error' : _b, collapsible = _a.collapsible, title = _a.title, children = _a.children, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, $as = _a.$as, role = _a.role, maxItemContainerHeight = _a.maxItemContainerHeight, restProps = (0, tslib_1.__rest)(_a, ["intent", "collapsible", "title", "children", "overrides", "$as", "role", "maxItemContainerHeight"]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledBanner), 2), Root = _d[0], rootProps = _d[1];
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.BannerItemContainer, styled_component_1.StyledBannerItemContainer), 2), BannerItemContainer = _e[0], bannerItemContainerProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.HeaderContainer, styled_component_1.StyledHeaderContainer), 2), HeaderContainer = _f[0], headerContainerProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.TitleContainer, styled_component_1.StyledTitleContainer), 2), TitleContainer = _g[0], titleContainerProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.HeaderTitle, styled_component_1.StyledTitle), 2), HeaderTitle = _h[0], headerTitleProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.HeaderIcon, Icon), 2), HeaderIcon = _j[0], headerIconProps = _j[1];
+    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), 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/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Banner } from './banner';
+export { default as BannerItem } from './banner-item';
+export { StyledBanner, StyledBannerItem, StyledTitle } from './styled-component';
+export type { BannerProps, BannerItemProps } from './types';
+export type { BannerLocale } from './locale';

package/banner/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTitle = exports.StyledBannerItem = exports.StyledBanner = exports.BannerItem = exports.Banner = void 0;
+var banner_1 = require("./banner");
+Object.defineProperty(exports, "Banner", { enumerable: true, get: function () { return __importDefault(banner_1).default; } });
+var banner_item_1 = require("./banner-item");
+Object.defineProperty(exports, "BannerItem", { enumerable: true, get: function () { return __importDefault(banner_item_1).default; } });
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledBanner", { enumerable: true, get: function () { return styled_component_1.StyledBanner; } });
+Object.defineProperty(exports, "StyledBannerItem", { enumerable: true, get: function () { return styled_component_1.StyledBannerItem; } });
+Object.defineProperty(exports, "StyledTitle", { enumerable: true, get: function () { return styled_component_1.StyledTitle; } });

package/banner/locale.d.ts

@@ -0,0 +1,6 @@
+export declare type BannerLocale = {
+    toggleButtonShowLabel: string;
+    toggleButtonHideLabel: string;
+    toggleButtonShowAriaLabel: string;
+    toggleButtonHideAriaLabel: string;
+};

package/banner/locale.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/banner/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/banner/index.js"
+}

package/banner/styled-component.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledBanner: import("../style/styled").StyledComponent;
+export declare const StyledBannerItemContainer: import("../style/styled").StyledComponent;
+export declare const StyledTitleContainer: import("../style/styled").StyledComponent;
+export declare const StyledHeaderContainer: import("../style/styled").StyledComponent;
+export declare const StyledTitle: import("../style/styled").StyledComponent;
+export declare const StyledBannerItem: import("../style/styled").StyledComponent;

package/banner/styled-component.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledBannerItem = exports.StyledTitle = exports.StyledHeaderContainer = exports.StyledTitleContainer = exports.StyledBannerItemContainer = exports.StyledBanner = void 0;
+var tslib_1 = require("tslib");
+var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var style_1 = require("../style");
+var getBannerIntentStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var intent = _b.intent;
+    switch (intent) {
+        case 'error':
+        default:
+            return {
+                borderColor: theme.spr.supportError,
+            };
+        case 'warning':
+            return {
+                borderColor: theme.spr.supportWarning,
+            };
+        case 'success':
+            return {
+                borderColor: theme.spr.supportSuccess,
+            };
+    }
+};
+exports.StyledBanner = (0, style_1.styled)('div', 'box-border w-full rounded-8 border-solid border-1 font-medium overflow-auto pb-2', getBannerIntentStyles);
+exports.StyledBannerItemContainer = (0, style_1.styled)('div', 'box-border list-inside list-none typography-bl1 px-2 mt-0.5', function (_a, _b) {
+    var theme = _a.theme, getStyle = _a.getStyle;
+    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-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;
+    return ({ boxShadow: $sticky ? theme.spr.shadow01 : 'none' });
+});
+exports.StyledTitle = (0, style_1.styled)('div', 'typography-bl1 font-600');
+exports.StyledBannerItem = (0, style_1.styled)('li', 'typography-bl1');

package/banner/types.d.ts

@@ -0,0 +1,26 @@
+import { Override } from '../overrides/types';
+import { SpacewebComponentProps } from '../types';
+import { ReactNode } from 'react';
+export declare type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
+    intent?: 'error' | 'warning' | 'success';
+    $as?: string;
+    collapsible?: boolean;
+    title: ReactNode;
+    children?: ReactNode;
+    maxItemContainerHeight?: string;
+    overrides?: {
+        Root?: Override<Record<string, any>>;
+        BannerItemContainer?: Override<Record<string, any>>;
+        HeaderTitle?: Override<Record<string, any>>;
+        HeaderIcon?: Override<Record<string, any>>;
+        HeaderContainer?: Override<Record<string, any>>;
+        TitleContainer?: Override<Record<string, any>>;
+        ToggleButton?: Override<Record<string, any>>;
+    };
+};
+export declare type BannerItemProps = SpacewebComponentProps & {
+    children?: ReactNode;
+    overrides?: {
+        Root?: Override<Record<string, any>>;
+    };
+};

package/banner/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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;
+}