@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/banner/banner.js

@@ -2,56 +2,73 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
 var react_1 = require("react");
-var overrides_1 = require("../overrides");
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+// components
 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");
+var button_1 = require("../button");
+var typography_1 = require("../typography");
+var base_button_1 = require("../base-button");
+// icons
+var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
+var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var info_circle_1 = tslib_1.__importDefault(require("../icon/components/info-circle"));
+var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
+var close_1 = tslib_1.__importDefault(require("../icon/components/close"));
+// hooks
+var overrides_1 = require("../overrides");
+var locale_1 = require("../locale");
+var useStickyElement_1 = tslib_1.__importDefault(require("../hooks/useStickyElement"));
+var style_1 = require("@sprinklrjs/spaceweb/style");
+// utils
+var helpers_1 = require("../helpers");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+// constants
+var styled_components_1 = require("../link/styled-components");
+var cvaConfig_1 = require("./cvaConfig");
+var intentToIconMap = {
+    error: { BaseIcon: alert_solid_1.default },
+    warning: { BaseIcon: warning_solid_1.default },
+    success: { BaseIcon: tickCircle_solid_1.default },
+    info: { BaseIcon: info_circle_1.default },
+};
+var getIntentToTitleMap = function (locale) { return ({
+    error: locale.errorTitle,
+    warning: locale.warningTitle,
+    success: locale.successTitle,
+    info: locale.infoTitle,
+}); };
 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 className = _a.className, _b = _a.intent, intent = _b === void 0 ? 'error' : _b, restProps = tslib_1.__rest(_a, ["className", "intent"]);
+    var locale = (0, locale_1.useLocale)();
     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);
+    var intentToTitleMap = (0, react_1.useMemo)(function () { return getIntentToTitleMap(locale.banner); }, [locale.banner]);
+    var BaseIcon = intentToIconMap[intent].BaseIcon;
+    return ((0, jsx_runtime_1.jsx)(BaseIcon, tslib_1.__assign({ className: [cvaConfig_1.bannerIconFillColor, className], "$mode": (0, themeHelpers_1.isDarkTheme)(theme) ? 'dark' : 'light', "$intent": intent, title: intentToTitleMap[intent] }, restProps, { size: 16 })));
 }
-function BaseToggleButton(_a) {
-    var show = _a.show, className = _a.className, onToggle = _a.onToggle, props = (0, tslib_1.__rest)(_a, ["show", "className", "onToggle"]);
+var Banner = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.intent, intent = _b === void 0 ? 'error' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? false : _c, title = _a.title, titleEndEnhancer = _a.titleEndEnhancer, description = _a.description, className = _a.className, style = _a.style, children = _a.children, _d = _a.overrides, overrides = _d === void 0 ? {} : _d, $as = _a.$as, role = _a.role, maxItemContainerHeight = _a.maxItemContainerHeight, _e = _a.visible, visible = _e === void 0 ? true : _e, _f = _a.closeable, closeable = _f === void 0 ? false : _f, _g = _a.onClose, onClose = _g === void 0 ? noop_1.default : _g, restProps = tslib_1.__rest(_a, ["intent", "collapsible", "title", "titleEndEnhancer", "description", "className", "style", "children", "overrides", "$as", "role", "maxItemContainerHeight", "visible", "closeable", "onClose"]);
     var locale = (0, locale_1.useLocale)();
+    var _h = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledBanner), 2), Root = _h[0], rootProps = _h[1];
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides.BannerItemContainer, styled_component_1.StyledBannerItemContainer), 2), BannerItemContainer = _j[0], bannerItemContainerProps = _j[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides.HeaderContainer, styled_component_1.StyledHeaderContainer), 2), HeaderContainer = _k[0], headerContainerProps = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides.TitleContainer, styled_component_1.StyledTitleContainer), 2), TitleContainer = _l[0], titleContainerProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides.HeaderTitle, styled_component_1.StyledTitle), 2), HeaderTitle = _m[0], headerTitleProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides.HeaderIcon, Icon), 2), HeaderIcon = _o[0], headerIconProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides.ToggleButton, base_button_1.BaseButton), 2), ToggleButton = _p[0], toggleButtonProps = _p[1];
+    var _q = tslib_1.__read((0, overrides_1.useOverrides)(overrides.CloseButton, button_1.IconButton), 2), CloseButton = _q[0], closeButtonProps = _q[1];
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)(overrides.HeaderEndContainer, styled_component_1.StyledHeaderEndContainer), 2), HeaderEndContainer = _r[0], headerEndContainerProps = _r[1];
+    var _s = tslib_1.__read((0, react_1.useState)(true), 2), show = _s[0], setShow = _s[1];
+    var _t = (0, useStickyElement_1.default)(), isSticky = _t.isSticky, setStickySentinelRef = _t.setStickySentinelRef;
+    var hasDescription = description != null;
+    var sharedProps = (0, helpers_1.add$props)({ intent: intent, collapsible: collapsible, closeable: closeable, show: show, hasDescription: hasDescription });
     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));
+    var bannerEl = ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "banner", "data-testid": "banner", intent: intent, collapsible: collapsible }, sharedProps, restProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], ref: ref }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }), (0, jsx_runtime_1.jsxs)(HeaderContainer, tslib_1.__assign({}, sharedProps, headerContainerProps, { "$sticky": isSticky }, { children: [(0, jsx_runtime_1.jsxs)(TitleContainer, tslib_1.__assign({}, sharedProps, titleContainerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderIcon, tslib_1.__assign({ intent: intent }, headerIconProps, { className: ['self-start', hasDescription ? 'mt-0.5' : 'mt-1', headerIconProps === null || headerIconProps === void 0 ? void 0 : headerIconProps.className] })), (0, jsx_runtime_1.jsxs)(HeaderTitle, tslib_1.__assign({}, sharedProps, headerTitleProps, { children: [title || null, description || null] }))] })), (0, jsx_runtime_1.jsxs)(HeaderEndContainer, tslib_1.__assign({}, sharedProps, headerEndContainerProps, { children: [titleEndEnhancer || null, collapsible ? ((0, jsx_runtime_1.jsx)(ToggleButton, tslib_1.__assign({ "data-testid": "banner-toggle-button", className: [styled_components_1.linkStyles, 'h-6', toggleButtonProps === null || toggleButtonProps === void 0 ? void 0 : toggleButtonProps.className], label: label, "aria-label": ariaLabel, onClick: function () { return setShow(!show); } }, sharedProps, toggleButtonProps, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-12" }, { children: label })) }))) : null, closeable ? ((0, jsx_runtime_1.jsx)(CloseButton, tslib_1.__assign({ type: "button", tooltipContent: locale.banner.closeIconTooltipContent, size: "small", shape: "square", onClick: onClose }, sharedProps, closeButtonProps, { children: (0, jsx_runtime_1.jsx)(close_1.default, { size: 12 }) }))) : null] }))] })), title && children ? ((0, jsx_runtime_1.jsx)(collapse_1.Collapse, tslib_1.__assign({ unmountOnExit: true, visible: show }, { children: (0, jsx_runtime_1.jsx)(BannerItemContainer, tslib_1.__assign({ "$as": $as, role: $as === 'ol' || $as === 'ul' ? 'list' : role, "$maxHeight": maxItemContainerHeight }, sharedProps, bannerItemContainerProps, { style: [{ '--sw-max-height': maxItemContainerHeight }, bannerItemContainerProps.style] }, { children: children })) }))) : null] })));
+    return closeable ? ((0, jsx_runtime_1.jsx)(collapse_1.Collapse, tslib_1.__assign({ className: "w-full", visible: visible }, { children: bannerEl }))) : (bannerEl);
 });
 Banner.displayName = 'Banner';
+Banner.__standard = 'Component';
 exports.default = (0, react_1.memo)(Banner);

package/banner/cvaConfig.d.ts

@@ -0,0 +1,2 @@
+export declare const bannerRootCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const bannerIconFillColor: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/banner/cvaConfig.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bannerIconFillColor = exports.bannerRootCVA = void 0;
+var cvaWrapper_1 = require("../style/cvaWrapper");
+exports.bannerRootCVA = (0, cvaWrapper_1.cvaWrapper)('banner', 'root', [
+    'box-border w-full rounded-8 border-solid border-1 overflow-auto pb-2',
+    {
+        variants: {
+            $intent: {
+                info: 'spr-border-quaternary',
+                error: 'spr-border-error',
+                warning: 'spr-border-warning',
+                success: 'spr-border-success',
+            },
+        },
+        defaultVariants: {
+            $intent: 'error',
+        },
+    },
+]);
+exports.bannerIconFillColor = (0, cvaWrapper_1.cvaWrapper)('banner', 'icon', [
+    'mr-1 shrink-0',
+    {
+        variants: {
+            $intent: {
+                info: 'spr-text-secondary',
+                error: 'spr-icon-error',
+                warning: 'spr-icon-warning spr-text-secondary',
+                success: 'spr-icon-success',
+            },
+        },
+        compoundVariants: [
+            {
+                $intent: 'warning',
+                $mode: 'dark',
+                className: 'spr-text-inverse',
+            },
+        ],
+        defaultVariants: { $intent: 'error' },
+    },
+]);

package/banner/locale.d.ts

@@ -1,6 +1,11 @@
-export declare type BannerLocale = {
+export type BannerLocale = {
     toggleButtonShowLabel: string;
     toggleButtonHideLabel: string;
     toggleButtonShowAriaLabel: string;
     toggleButtonHideAriaLabel: string;
+    closeIconTooltipContent: string;
+    errorTitle: string;
+    warningTitle: string;
+    successTitle: string;
+    infoTitle: string;
 };

package/banner/styled-component.d.ts

@@ -1,6 +1,7 @@
-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;
+export declare const StyledHeaderEndContainer: import("../style").StyledComponent;
+export declare const StyledBanner: import("../style").StyledComponent;
+export declare const StyledBannerItemContainer: import("../style").StyledComponent;
+export declare const StyledTitleContainer: import("../style").StyledComponent;
+export declare const StyledHeaderContainer: import("../style").StyledComponent;
+export declare const StyledTitle: import("../style").StyledComponent;
+export declare const StyledBannerItem: import("../style").StyledComponent;

package/banner/styled-component.js

@@ -1,39 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledBannerItem = exports.StyledTitle = exports.StyledHeaderContainer = exports.StyledTitleContainer = exports.StyledBannerItemContainer = exports.StyledBanner = void 0;
+exports.StyledBannerItem = exports.StyledTitle = exports.StyledHeaderContainer = exports.StyledTitleContainer = exports.StyledBannerItemContainer = exports.StyledBanner = exports.StyledHeaderEndContainer = void 0;
 var tslib_1 = require("tslib");
-var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var classNames_1 = 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 });
+var cvaConfig_1 = require("./cvaConfig");
+exports.StyledHeaderEndContainer = (0, style_1.styled)('div', 'flex flex-row items-start self-start gap-2 pl-1 shrink-0');
+exports.StyledBanner = (0, style_1.styled)('div', cvaConfig_1.bannerRootCVA);
+exports.StyledBannerItemContainer = (0, style_1.styled)('div', 'box-border list-inside list-none text-14 leading-150 font-400 mt-1 pl-8 pr-3 max-h-[--sw-max-height]', function (_utils, _a) {
+    var $as = _a.$as, $maxHeight = _a.$maxHeight;
+    return (0, classNames_1.default)({
+        'list-decimal': $as === 'ol',
+        'list-disc': $as === 'ul',
+        'overflow-y-hidden': Boolean($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.StyledTitleContainer = (0, style_1.styled)('div', 'flex flex-row items-start flex-1 min-w-0');
+exports.StyledHeaderContainer = (0, style_1.styled)('div', 'flex flex-row items-center justify-between sticky top-0 spr-bg-primary px-3 pt-2', function (_utils, _a) {
+    var $sticky = _a.$sticky;
+    return (0, classNames_1.default)({ 'spr-shadow-100': $sticky });
 });
-exports.StyledTitle = (0, style_1.styled)('div', 'typography-bl1 font-600');
-exports.StyledBannerItem = (0, style_1.styled)('li', 'typography-bl1');
+exports.StyledTitle = (0, style_1.styled)('div', 'leading-150 min-w-0', function (_, _a) {
+    var $hasDescription = _a.$hasDescription;
+    return $hasDescription ? 'text-14 font-400' : 'text-16 font-600';
+});
+exports.StyledBannerItem = (0, style_1.styled)('li', 'text-14 leading-150 font-400');

package/banner/types.d.ts

@@ -1,11 +1,13 @@
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
-import { ReactNode } from 'react';
-export declare type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
-    intent?: 'error' | 'warning' | 'success';
+import { MouseEvent, ReactNode } from 'react';
+export type BannerIntent = 'error' | 'warning' | 'success' | 'info';
+export type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
+    intent?: BannerIntent;
     $as?: string;
+    /** @deprecated */
     collapsible?: boolean;
-    title: ReactNode;
+    titleEndEnhancer?: ReactNode;
     children?: ReactNode;
     maxItemContainerHeight?: string;
     overrides?: {
@@ -16,9 +18,20 @@ export declare type BannerProps = Omit<SpacewebComponentProps, 'title'> & {
         HeaderContainer?: Override<Record<string, any>>;
         TitleContainer?: Override<Record<string, any>>;
         ToggleButton?: Override<Record<string, any>>;
+        HeaderEndContainer?: Override<Record<string, any>>;
+        CloseButton?: Override<Record<string, any>>;
     };
-};
-export declare type BannerItemProps = SpacewebComponentProps & {
+    visible?: boolean;
+    closeable?: boolean;
+    onClose?: (event: MouseEvent) => void;
+} & ({
+    title: ReactNode;
+    description?: never;
+} | {
+    title?: never;
+    description: ReactNode;
+});
+export type BannerItemProps = SpacewebComponentProps & {
     children?: ReactNode;
     overrides?: {
         Root?: Override<Record<string, any>>;

package/base-button/BaseButton.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
-export declare const BaseButton: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
+import * as React from 'react';
+export declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: React.ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
-} & import("react").RefAttributes<HTMLElement>>;
+} & {
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+    overrides?: import("./types").BaseButtonOverrides | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/base-button/BaseButton.js

@@ -6,24 +6,35 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
 var styled_components_1 = require("./styled-components");
+var overrides_1 = require("../overrides");
+var disabled_tooltip_container_1 = tslib_1.__importDefault(require("../tooltip/disabled-tooltip-container"));
+var stateful_tooltip_1 = tslib_1.__importDefault(require("../tooltip/stateful-tooltip"));
 var isNotAllyElement = function (props) { return props.$as && !(props.$as === 'button' || props.$as === 'a'); };
-exports.BaseButton = (0, react_1.forwardRef)(function (props, ref) {
+exports.BaseButton = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b;
+    var tooltipContent = _a.tooltipContent, overrides = _a.overrides, restProps = tslib_1.__rest(_a, ["tooltipContent", "overrides"]);
     var baseButtonProps = {};
-    var focusProps = (0, useFocusVisible_1.useFocusVisible)(props);
+    var focusProps = (0, useFocusVisible_1.useFocusVisible)(restProps);
     var handleKeyPress = (0, react_1.useCallback)(function (event) {
         var _a, _b;
         event.preventDefault();
         if (event.key === 'Enter' || event.key === ' ') {
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
         }
-        (_b = props.onKeyPress) === null || _b === void 0 ? void 0 : _b.call(props, event);
-    }, [props.onClick, props.onKeyPress]);
-    if (isNotAllyElement(props)) {
+        (_b = restProps.onKeyPress) === null || _b === void 0 ? void 0 : _b.call(restProps, event);
+    }, [restProps.onClick, restProps.onKeyPress]);
+    var _c = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, stateful_tooltip_1.default), 2), StatefulTooltip = _c[0], statefulTooltipProps = _c[1];
+    if (isNotAllyElement(restProps)) {
         baseButtonProps.onKeyPress = handleKeyPress;
-        baseButtonProps.role = 'button';
-        baseButtonProps.tabIndex = props.disabled ? -1 : props.tabIndex || 0;
-        baseButtonProps['aria-disabled'] = Boolean(props.disabled);
+        baseButtonProps.role = (_b = restProps.role) !== null && _b !== void 0 ? _b : 'button';
+        baseButtonProps.tabIndex = restProps.disabled ? -1 : restProps.tabIndex || 0;
+        baseButtonProps['aria-disabled'] = Boolean(restProps.disabled);
     }
-    return (0, jsx_runtime_1.jsx)(styled_components_1.StyledBaseButton, (0, tslib_1.__assign)({}, props, baseButtonProps, focusProps, { ref: ref }), void 0);
+    var buttonEl = (0, jsx_runtime_1.jsx)(styled_components_1.StyledBaseButton, tslib_1.__assign({ type: "button" }, restProps, baseButtonProps, focusProps, { ref: ref }));
+    if (restProps.disabled && tooltipContent) {
+        return ((0, jsx_runtime_1.jsx)(disabled_tooltip_container_1.default, tslib_1.__assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl })));
+    }
+    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, tslib_1.__assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }))) : (buttonEl);
 });
 exports.BaseButton.displayName = 'BaseButton';
+exports.BaseButton.__standard = 'Component';

package/base-button/styled-components.d.ts

@@ -1,3 +1,3 @@
-import { Styles } from '../types';
-export declare const buttonResetStyles: Styles;
-export declare const StyledBaseButton: import("../style/styled").StyledComponent;
+import { ClassName } from '../types';
+export declare const buttonResetStyles: ClassName;
+export declare const StyledBaseButton: import("../style").StyledComponent;

package/base-button/styled-components.js

@@ -6,8 +6,8 @@ var style_1 = require("../style");
 exports.buttonResetStyles = [
     'inline-flex items-center justify-center',
     'm-0 p-0 border-0 rounded-0 border-none',
-    'cursor-pointer no-underline appearance-none select-none spr-text-01',
-    { backgroundColor: 'transparent', fontSize: 'inherit' },
-    'focus-visible:outline-01',
+    'cursor-pointer no-underline appearance-none select-none spr-text-01 font-size-inherit bg-transparent',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--spr-focus-01]',
+    'disabled:cursor-not-allowed',
 ];
-exports.StyledBaseButton = style_1.styled.apply(void 0, (0, tslib_1.__spreadArray)(['button'], (0, tslib_1.__read)(exports.buttonResetStyles), false));
+exports.StyledBaseButton = style_1.styled.apply(void 0, tslib_1.__spreadArray(['button'], tslib_1.__read(exports.buttonResetStyles), false));

package/base-button/types.d.ts

@@ -1,2 +1,10 @@
 import { SpacewebComponentProps } from '../types';
-export declare type BaseButtonProps = SpacewebComponentProps;
+import { Override } from '../overrides';
+import { TooltipProps } from '../tooltip/types';
+export type BaseButtonOverrides = {
+    StatefulTooltip?: Override<Record<string, any>>;
+};
+export type BaseButtonProps = SpacewebComponentProps & {
+    tooltipContent?: TooltipProps['content'];
+    overrides?: BaseButtonOverrides;
+};

package/baseui/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ 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[];
+        expanded: React.Key[];
     };
     itemRefs: React.RefObject<HTMLDivElement>[];
     onPanelChange(key: React.Key, onChange: (...args: any[]) => {}, ...args: Array<any>): void;

package/baseui/accordion/accordion.js

@@ -8,16 +8,16 @@ 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 React = tslib_1.__importStar(require("react"));
 var styled_components_1 = require("./styled-components");
 var constants_1 = require("./constants");
+var overrides_1 = require("../../overrides");
 var Accordion = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Accordion, _super);
+    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.state = tslib_1.__assign({ expanded: [] }, _this.props.initialState);
         _this.itemRefs = [];
         return _this;
     }
@@ -33,7 +33,7 @@ var Accordion = /** @class */ (function (_super) {
             activeKeys = activeKeys[0] === key ? [] : [key];
         }
         else {
-            activeKeys = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(activeKeys), false);
+            activeKeys = tslib_1.__spreadArray([], tslib_1.__read(activeKeys), false);
             var index = activeKeys.indexOf(key);
             var wasExpanded = index > -1;
             if (wasExpanded) {
@@ -48,7 +48,7 @@ var Accordion = /** @class */ (function (_super) {
         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));
+            onChange.apply(void 0, tslib_1.__spreadArray([], tslib_1.__read(args), false));
     };
     Accordion.prototype.internalSetState = function (type, changes) {
         var _a = this.props, stateReducer = _a.stateReducer, onChange = _a.onChange;
@@ -126,7 +126,7 @@ var Accordion = /** @class */ (function (_super) {
                     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 _this.onPanelChange.apply(_this, tslib_1.__spreadArray([key, child.props.onChange], tslib_1.__read(args), false));
                 },
             };
             return React.cloneElement(child, props);
@@ -135,8 +135,8 @@ var Accordion = /** @class */ (function (_super) {
     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));
+        var _b = 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, tslib_1.__assign({ "data-baseweb": "accordion", "$disabled": this.props.disabled, "$isFocusVisible": false, onKeyDown: this.handleKeyDown.bind(this) }, rootProps, { children: this.getItems() })));
     };
     Accordion.defaultProps = {
         accordion: true,

package/baseui/accordion/index.d.ts

@@ -9,4 +9,4 @@ export { Root as StyledRoot, PanelContainer as StyledPanelContainer, Header as S
 export * from './types';
 export type { AccordionLocale } from './locale';
 /** @deprecated use SharedStylePropsArg instead. To be removed in future versions.*/
-export declare type SharedProps = SharedStylePropsArg;
+export type SharedProps = SharedStylePropsArg;

package/baseui/accordion/index.js

@@ -3,15 +3,15 @@ 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; } });
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return 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; } });
+Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return 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; } });
+Object.defineProperty(exports, "StatefulPanel", { enumerable: true, get: function () { return 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; } });
+Object.defineProperty(exports, "StatefulPanelContainer", { enumerable: true, get: function () { return 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; } });
+Object.defineProperty(exports, "StatelessAccordion", { enumerable: true, get: function () { return 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; } });
@@ -25,4 +25,4 @@ Object.defineProperty(exports, "StyledContentAnimationContainer", { enumerable:
 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);
+tslib_1.__exportStar(require("./types"), exports);

package/baseui/accordion/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionLocale = {
+export type AccordionLocale = {
     collapse: string;
     expand: string;
 };