@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/tooltip/disabled-tooltip-container.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var React = (0, tslib_1.__importStar)(require("react"));
-var tooltip_1 = (0, tslib_1.__importDefault)(require("./tooltip"));
-var default_props_1 = (0, tslib_1.__importDefault)(require("../baseui/tooltip/default-props"));
+var React = tslib_1.__importStar(require("react"));
+var tooltip_1 = tslib_1.__importDefault(require("./tooltip"));
+var default_props_1 = require("./default-props");
 var overrides_1 = require("../overrides");
 var DisabledTooltipContainer = function (_a) {
-    var content = _a.content, children = _a.children, onMouseEnterDelay = _a.onMouseEnterDelay, onMouseLeaveDelay = _a.onMouseLeaveDelay, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["content", "children", "onMouseEnterDelay", "onMouseLeaveDelay", "overrides"]);
-    var _b = (0, tslib_1.__read)(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var content = _a.content, children = _a.children, onMouseEnterDelay = _a.onMouseEnterDelay, onMouseLeaveDelay = _a.onMouseLeaveDelay, overrides = _a.overrides, props = tslib_1.__rest(_a, ["content", "children", "onMouseEnterDelay", "onMouseLeaveDelay", "overrides"]);
+    var _b = tslib_1.__read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
     var timerRef = React.useRef({
         mouseEnterTimer: null,
         mouseLeaveTimer: null,
     });
     var childEl = React.isValidElement(children)
-        ? React.cloneElement(children, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, children.props), { onPointerEnter: function (event) {
+        ? React.cloneElement(children, tslib_1.__assign(tslib_1.__assign({}, children.props), { onPointerEnter: function (event) {
                 // clear leave timer
                 if (timerRef.current.mouseLeaveTimer) {
                     clearTimeout(timerRef.current.mouseLeaveTimer);
@@ -59,7 +59,7 @@ var DisabledTooltipContainer = function (_a) {
             },
         },
     }, overrides);
-    return content ? ((0, jsx_runtime_1.jsx)(tooltip_1.default, (0, tslib_1.__assign)({ isOpen: isOpen, content: content, onMouseEnterDelay: onMouseEnterDelay, onMouseLeaveDelay: onMouseLeaveDelay, overrides: mergedOverrides }, props, { children: childEl }), void 0)) : (childEl);
+    return content ? ((0, jsx_runtime_1.jsx)(tooltip_1.default, tslib_1.__assign({ isOpen: isOpen, content: content, onMouseEnterDelay: onMouseEnterDelay, onMouseLeaveDelay: onMouseLeaveDelay, overrides: mergedOverrides }, props, { children: childEl }))) : (childEl);
 };
-DisabledTooltipContainer.defaultProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { showArrow: true });
+DisabledTooltipContainer.defaultProps = tslib_1.__assign(tslib_1.__assign({}, default_props_1.defaultProps), { showArrow: true });
 exports.default = DisabledTooltipContainer;

package/tooltip/index.d.ts

@@ -2,5 +2,5 @@ export { default as Tooltip } from './tooltip';
 export { default as StatefulTooltip } from './stateful-tooltip';
 export { default as StatefulTooltipContainer } from './stateful-tooltip-container';
 export { default as DisabledTooltipContainer } from './disabled-tooltip-container';
-export type { AccessibilityType, TriggerType, Placement, StatefulTooltipContainerProps, StatefulTooltipProps, TooltipProps, Size, } from './types';
-export { StyledArrow, StyledBody, StyledInner } from './styled-component';
+export { default as ActionableTooltip } from './actionable-tooltip';
+export type { AccessibilityType, TriggerType, Placement, StatefulTooltipContainerProps, StatefulTooltipProps, TooltipProps, ActionableTooltipProps, Size, } from './types';

package/tooltip/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledInner = exports.StyledBody = exports.StyledArrow = exports.DisabledTooltipContainer = exports.StatefulTooltipContainer = exports.StatefulTooltip = exports.Tooltip = void 0;
+exports.ActionableTooltip = exports.DisabledTooltipContainer = exports.StatefulTooltipContainer = exports.StatefulTooltip = exports.Tooltip = void 0;
 var tooltip_1 = require("./tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });
 var stateful_tooltip_1 = require("./stateful-tooltip");
@@ -12,7 +12,5 @@ var stateful_tooltip_container_1 = require("./stateful-tooltip-container");
 Object.defineProperty(exports, "StatefulTooltipContainer", { enumerable: true, get: function () { return __importDefault(stateful_tooltip_container_1).default; } });
 var disabled_tooltip_container_1 = require("./disabled-tooltip-container");
 Object.defineProperty(exports, "DisabledTooltipContainer", { enumerable: true, get: function () { return __importDefault(disabled_tooltip_container_1).default; } });
-var styled_component_1 = require("./styled-component");
-Object.defineProperty(exports, "StyledArrow", { enumerable: true, get: function () { return styled_component_1.StyledArrow; } });
-Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function () { return styled_component_1.StyledBody; } });
-Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return styled_component_1.StyledInner; } });
+var actionable_tooltip_1 = require("./actionable-tooltip");
+Object.defineProperty(exports, "ActionableTooltip", { enumerable: true, get: function () { return __importDefault(actionable_tooltip_1).default; } });

package/tooltip/overrides.d.ts

@@ -1,5 +1,4 @@
 import { SharedProps } from './types';
-import { StyleFn, Styles } from '../types';
-export declare const getArrowStyle: StyleFn<SharedProps>;
-export declare const getBodyStyle: StyleFn<SharedProps>;
-export declare const innerStyles: Styles;
+import { ClassNameStyleFn, ClassName } from '../types';
+export declare const getArrowStyle: ClassNameStyleFn<SharedProps>;
+export declare const innerStyles: ClassName;

package/tooltip/overrides.js

@@ -1,64 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.innerStyles = exports.getBodyStyle = exports.getArrowStyle = void 0;
+exports.innerStyles = exports.getArrowStyle = void 0;
 var tslib_1 = require("tslib");
+var utils_1 = require("../popover/utils");
+var constants_1 = require("../typography/constants");
 var getArrowStyle = function (_a, _b) {
-    var theme = _a.theme;
-    var $intent = _b.$intent;
-    return ({
-        backgroundColor: $intent === 'ai' ? theme.spr.clrMagenta : theme.spr.tooltip01,
-    });
+    var isRTL = _a.isRTL;
+    var $placement = _b.$placement;
+    var _c = tslib_1.__read((0, utils_1.splitPlacement)($placement), 1), primaryPos = _c[0];
+    var intentStyle = 'spr-bg-inverse';
+    var rotateStyle = isRTL ? '-rotate-45' : 'rotate-45';
+    var marginStyle = ['top', 'bottom'].includes(primaryPos) ? 'mx-2' : 'my-2';
+    return "".concat(marginStyle, " ").concat(rotateStyle, " ").concat(intentStyle);
 };
 exports.getArrowStyle = getArrowStyle;
-var getBodyStyle = function () { return ({
-    backgroundColor: 'transparent',
-    boxShadow: 'none',
-}); };
-exports.getBodyStyle = getBodyStyle;
-var getInnerMaxWidth = function (_a, _b) {
-    var px2rem = _a.px2rem;
-    var $size = _b.$size;
-    var maxWidth = '50vw';
-    // many have used default=sm size to let tooltip get auto-width
-    // if ($size === 'sm') maxWidth = px2rem(120);
-    if ($size === 'md')
-        maxWidth = px2rem(180);
+var getInnerMaxWidth = function (_, _a) {
+    var $size = _a.$size;
+    if ($size === '50vw')
+        return 'max-w-[50vw]';
     if ($size === 'lg')
-        maxWidth = px2rem(240);
-    return { maxWidth: maxWidth };
-};
-var getTypography = function (_a, _b) {
-    var theme = _a.theme;
-    var $size = _b.$size;
-    // TODO: Isn't the point of having typography not to have to override styles, designs must match the defined styles:
-    if ($size === 'sm')
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l1), { fontWeight: theme.fontWeight.medium });
-    if ($size === 'md')
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.bs3), { fontWeight: theme.fontWeight.normal });
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.bs3), { fontWeight: theme.fontWeight.normal });
+        return 'max-w-60';
+    return 'max-w-xs';
 };
 exports.innerStyles = [
-    'break-words',
-    function (utils, _a) {
-        var $intent = _a.$intent;
-        var theme = utils.theme;
-        var isAiIntent = $intent === 'ai';
-        return {
-            backgroundColor: isAiIntent ? theme.spr.clrMagenta : theme.spr.tooltip01,
-            color: theme.spr.text06,
-            borderTopLeftRadius: theme.borderRadius['4'],
-            borderTopRightRadius: theme.borderRadius['4'],
-            borderBottomRightRadius: theme.borderRadius['4'],
-            borderBottomLeftRadius: theme.borderRadius['4'],
-            borderColor: theme.spr.tooltipBorder,
-            paddingTop: theme.padding['2'],
-            paddingBottom: theme.padding['2'],
-            paddingLeft: theme.padding['3'],
-            paddingRight: theme.padding['3'],
-            boxSizing: 'border-box',
-            width: 'max-content',
-        };
-    },
-    getTypography,
+    'break-words spr-text-inverse rounded-4 py-1 px-3 box-border w-fit spr-border-inverse',
+    'spr-bg-inverse font-400',
+    constants_1.TYPOGRAPHY_VARIANT_VS_CLASS_MAP['body-sm'],
     getInnerMaxWidth,
 ];

package/tooltip/stateful-tooltip-container.d.ts

@@ -5,30 +5,49 @@ declare const StatefulContainer: {
     displayName: string;
     defaultProps: {
         showArrow: boolean;
+        content?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+        id?: string | undefined;
+        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
+        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        mountNode?: HTMLElement | null | undefined;
+        popperOptions?: any;
+        repositionOnResize?: boolean | undefined;
+        positionFixed?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
-        autoFocus?: boolean | undefined;
-        focusLock?: boolean | undefined;
         'data-baseweb'?: string | undefined;
-        id?: string | undefined;
         ignoreBoundary?: boolean | undefined;
-        mountNode?: HTMLElement | undefined;
-        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
-        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
-        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
         focusOptions?: FocusOptions | undefined;
-        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseEnterDelay?: number | undefined;
-        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("../baseui/popover").PopoverOverrides | undefined;
-        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
-        popperOptions?: any;
         renderAll?: boolean | undefined;
-        returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) | undefined;
-        triggerType?: "hover" | "click" | undefined;
         popoverMargin?: number | undefined;
-        repositionOnResize?: boolean | undefined;
+        onEsc?: (() => unknown) | undefined;
+        isOpen?: boolean | undefined;
+        onClickOutside?: ((event: MouseEvent) => unknown) | undefined;
+        overrides?: ({} & {
+            Label?: import("../overrides").Override<{
+                $size: import("./types").Size;
+                $label: boolean;
+                $intent: import("..").Intent;
+            }> | undefined;
+        }) | undefined;
+        children?: React.ReactNode | ((args: {
+            isOpen: boolean;
+        }) => React.ReactNode);
+        targetElement?: HTMLElement | null | undefined;
+        triggerType?: import("./types").TriggerType | undefined;
+        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        viewportAsBoundary?: boolean | undefined;
+        autoFocus?: boolean | undefined;
+        returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) | undefined;
+        focusLock?: boolean | undefined;
+        size?: import("./types").Size | undefined;
+        intent?: import("..").Intent | undefined;
+        label?: React.ReactNode;
     };
 };
 export default StatefulContainer;

package/tooltip/stateful-tooltip-container.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var default_props_1 = (0, tslib_1.__importDefault)(require("../baseui/tooltip/default-props"));
+var default_props_1 = require("./default-props");
 var popover_1 = require("../popover");
-var StatefulContainer = function (props) { return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, (0, tslib_1.__assign)({}, props), void 0)); };
+var StatefulContainer = function (props) { return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, tslib_1.__assign({}, props))); };
 StatefulContainer.displayName = 'StatefulContainer';
-StatefulContainer.defaultProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { showArrow: true });
+StatefulContainer.defaultProps = tslib_1.__assign(tslib_1.__assign({}, default_props_1.defaultProps), { showArrow: true });
 exports.default = StatefulContainer;

package/tooltip/stateful-tooltip.d.ts

@@ -8,28 +8,47 @@ declare const StatefulTooltip: {
         showArrow: boolean;
         focusLock: boolean;
         returnFocus: boolean;
+        content?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+        id?: string | undefined;
+        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
+        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        mountNode?: HTMLElement | null | undefined;
+        popperOptions?: any;
+        repositionOnResize?: boolean | undefined;
+        positionFixed?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
-        autoFocus?: boolean | undefined;
         'data-baseweb'?: string | undefined;
-        id?: string | undefined;
         ignoreBoundary?: boolean | undefined;
-        mountNode?: HTMLElement | undefined;
-        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
-        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
-        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
         focusOptions?: FocusOptions | undefined;
-        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseEnterDelay?: number | undefined;
-        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("../baseui/popover").PopoverOverrides | undefined;
-        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
-        popperOptions?: any;
         renderAll?: boolean | undefined;
-        triggerType?: "hover" | "click" | undefined;
         popoverMargin?: number | undefined;
-        repositionOnResize?: boolean | undefined;
+        onEsc?: (() => unknown) | undefined;
+        isOpen?: boolean | undefined;
+        onClickOutside?: ((event: MouseEvent) => unknown) | undefined;
+        overrides?: ({} & {
+            Label?: import("../overrides").Override<{
+                $size: import("./types").Size;
+                $label: boolean;
+                $intent: import("..").Intent;
+            }> | undefined;
+        }) | undefined;
+        children?: React.ReactNode | ((args: {
+            isOpen: boolean;
+        }) => React.ReactNode);
+        targetElement?: HTMLElement | null | undefined;
+        triggerType?: import("./types").TriggerType | undefined;
+        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        viewportAsBoundary?: boolean | undefined;
+        autoFocus?: boolean | undefined;
+        size?: import("./types").Size | undefined;
+        intent?: import("..").Intent | undefined;
+        label?: React.ReactNode;
     };
 };
 export default StatefulTooltip;

package/tooltip/stateful-tooltip.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var default_props_1 = (0, tslib_1.__importDefault)(require("../baseui/tooltip/default-props"));
-var stateful_tooltip_container_1 = (0, tslib_1.__importDefault)(require("./stateful-tooltip-container"));
-var tooltip_1 = (0, tslib_1.__importDefault)(require("./tooltip"));
+var default_props_1 = require("./default-props");
+var stateful_tooltip_container_1 = tslib_1.__importDefault(require("./stateful-tooltip-container"));
+var tooltip_1 = tslib_1.__importDefault(require("./tooltip"));
 var StatefulTooltip = function (props) {
-    var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, viewportAsBoundary = props.viewportAsBoundary, intent = props.intent, restProps = (0, tslib_1.__rest)(props, ["children", "size", "label", "overrides", "viewportAsBoundary", "intent"]);
-    return ((0, jsx_runtime_1.jsx)(stateful_tooltip_container_1.default, (0, tslib_1.__assign)({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover" }, restProps, { overrides: overrides }, { children: function (tooltipProps) { return ((0, jsx_runtime_1.jsx)(tooltip_1.default, (0, tslib_1.__assign)({}, tooltipProps, { size: size, label: label, viewportAsBoundary: viewportAsBoundary, intent: intent }, { children: children }), void 0)); } }), void 0));
+    var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, viewportAsBoundary = props.viewportAsBoundary, intent = props.intent, restProps = tslib_1.__rest(props, ["children", "size", "label", "overrides", "viewportAsBoundary", "intent"]);
+    return ((0, jsx_runtime_1.jsx)(stateful_tooltip_container_1.default, tslib_1.__assign({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover", accessibilityType: "tooltip" }, restProps, { overrides: overrides }, { children: function (tooltipProps) { return ((0, jsx_runtime_1.jsx)(tooltip_1.default, tslib_1.__assign({}, tooltipProps, { size: size, label: label, viewportAsBoundary: viewportAsBoundary, intent: intent }, { children: children }))); } })));
 };
 StatefulTooltip.displayName = 'StatefulTooltip';
-StatefulTooltip.defaultProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { showArrow: true, focusLock: false, returnFocus: false });
+StatefulTooltip.defaultProps = tslib_1.__assign(tslib_1.__assign({}, default_props_1.defaultProps), { showArrow: true, focusLock: false, returnFocus: false });
 exports.default = StatefulTooltip;

package/tooltip/styled-component.d.ts

@@ -1,2 +1 @@
-export { StyledBody, StyledArrow, StyledInner } from '../baseui/tooltip';
 export declare const StyledLabel: import("../style/styled").StyledComponent;

package/tooltip/styled-component.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLabel = exports.StyledInner = exports.StyledArrow = exports.StyledBody = void 0;
+exports.StyledLabel = void 0;
 var tslib_1 = require("tslib");
-var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
-var tooltip_1 = require("../baseui/tooltip");
-Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function () { return tooltip_1.StyledBody; } });
-Object.defineProperty(exports, "StyledArrow", { enumerable: true, get: function () { return tooltip_1.StyledArrow; } });
-Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return tooltip_1.StyledInner; } });
-exports.StyledLabel = (0, styled_1.default)('div', 'spr-text-02 mb-1 typography-l1 font-medium self-start');
+var styled_1 = tslib_1.__importDefault(require("../style/styled"));
+var constants_1 = require("../typography/constants");
+exports.StyledLabel = (0, styled_1.default)('div', "spr-text-tertiary mb-1 ".concat(constants_1.TYPOGRAPHY_VARIANT_VS_CLASS_MAP['body-xs'], " font-medium self-start"));

package/tooltip/tooltip.d.ts

@@ -3,5 +3,6 @@ import { TooltipProps } from './types';
 declare const Tooltip: {
     ({ size, label, content, overrides, children, targetElement, isOpen, triggerType, returnFocus, focusLock, placement, popperOptions, ignoreBoundary, viewportAsBoundary, intent, ...restProps }: TooltipProps): ReactElement;
     displayName: string;
+    defaultProps: Partial<TooltipProps>;
 };
 export default Tooltip;

package/tooltip/tooltip.js

@@ -2,36 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-// TODO: baseui/tooltip is using Popover internally which we cannot override
-var tooltip_1 = require("../baseui/tooltip");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var react_1 = require("react");
-var PopoverEnahncer_1 = require("../popover/PopoverEnahncer");
+var PopoverEnhancer_1 = require("../popover/PopoverEnhancer");
 var layer_1 = require("../layer");
 var overrides_1 = require("../overrides");
 var hooks_1 = require("../popover/hooks");
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
 var overrides_2 = require("./overrides");
 var styled_component_1 = require("./styled-component");
 var utils_1 = require("../popover/utils");
+var utils_2 = require("../baseui/popover/utils");
+var popover_1 = require("../baseui/popover");
+var default_props_1 = require("./default-props");
 var DISABLED_FOCUS_PROPS = {
     autoFocus: false,
     focusLock: false,
     returnFocus: false,
 };
 // @ts-ignore
-tooltip_1.Tooltip.displayName = 'BaseUITooltip';
 var Tooltip = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _h = _a.viewportAsBoundary, viewportAsBoundary = _h === void 0 ? true : _h, _j = _a.intent, intent = _j === void 0 ? 'default' : _j, restProps = (0, tslib_1.__rest)(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement", "popperOptions", "ignoreBoundary", "viewportAsBoundary", "intent"]);
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _h = _a.viewportAsBoundary, viewportAsBoundary = _h === void 0 ? true : _h, _j = _a.intent, intent = _j === void 0 ? 'default' : _j, restProps = tslib_1.__rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement", "popperOptions", "ignoreBoundary", "viewportAsBoundary", "intent"]);
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
     var sharedProps = (0, react_1.useMemo)(function () { return ({ $size: size, $label: !!label, $intent: intent }); }, [intent, label, size]);
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Label, styled_component_1.StyledLabel), 2), Label = _k[0], labelProps = _k[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Label, styled_component_1.StyledLabel), 2), Label = _k[0], labelProps = _k[1];
     // add label on top of content
     var contentToDisplay = [];
     if (label) {
-        contentToDisplay.push((0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({}, labelProps, sharedProps, { children: label }), "label"));
+        contentToDisplay.push((0, jsx_runtime_1.jsx)(Label, tslib_1.__assign({}, labelProps, sharedProps, { children: label }), "label"));
+    }
+    var extractedContent = (0, utils_2.extractContent)(content);
+    if (extractedContent) {
+        contentToDisplay.push((0, jsx_runtime_1.jsx)(React.Fragment, { children: extractedContent }, "content"));
     }
-    contentToDisplay.push((0, jsx_runtime_1.jsx)(React.Fragment, { children: typeof content === 'function' ? content() : content }, "content"));
     var childNode;
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
@@ -39,17 +42,33 @@ var Tooltip = function (_a) {
     else {
         childNode = children;
     }
-    var _l = (0, hooks_1.useContent)({ content: contentToDisplay }), setContentHost = _l.setContentHost, wrappedContent = _l.wrappedContent;
     var _overrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
-            Body: { style: overrides_2.getBodyStyle, props: sharedProps },
-            Arrow: { style: overrides_2.getArrowStyle, props: sharedProps },
-            Inner: { style: overrides_2.innerStyles, props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sharedProps), { ref: setContentHost }) },
+            Body: {
+                className: [
+                    'rounded-8 spr-text-inverse transition-opacity bg-transparent shadow-none st-trans-[--sw-transform] spr-shadow-200',
+                ],
+                //@ts-ignore -- css variable declaration
+                style: function (_, _a) {
+                    var $popoverOffset = _a.$popoverOffset;
+                    return ({
+                        '--sw-transform': (0, utils_2.getEndPosition)($popoverOffset),
+                    });
+                },
+                props: sharedProps,
+            },
+            Arrow: { className: overrides_2.getArrowStyle, props: sharedProps },
+            Inner: {
+                className: ['forced-colors:border-1 relative overflow-y-auto', overrides_2.innerStyles],
+                style: { maxHeight: '80vh' },
+                props: sharedProps,
+            },
         }, overrides);
-    }, [overrides, setContentHost, sharedProps]);
+    }, [overrides, sharedProps]);
     var id = (0, useUniqueId_1.default)();
-    var mergedPopperOptions = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, utils_1.getPopperOptions)({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
-    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, (0, tslib_1.__assign)({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { popperOptions: mergedPopperOptions }, { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    var mergedPopperOptions = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, (0, utils_1.getPopperOptions)({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, tslib_1.__assign({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, tslib_1.__assign({ "data-baseweb": "tooltip", id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: contentToDisplay, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { popperOptions: mergedPopperOptions }, { children: (0, jsx_runtime_1.jsx)(PopoverEnhancer_1.PopoverChildEnhancer, tslib_1.__assign({ targetElement: targetElement }, { children: childNode })) })) })));
 };
 Tooltip.displayName = 'Tooltip';
+Tooltip.defaultProps = default_props_1.defaultProps;
 exports.default = Tooltip;

package/tooltip/types.d.ts

@@ -1,17 +1,19 @@
 import { TetherPlacement } from '../baseui/layer';
-import { SharedStylePropsArg } from '../baseui/popover';
-import { StatefulTooltipProps as BaseStatefulTooltipProps, TooltipProps as BaseTooltipProps } from '../baseui/tooltip';
+import { SharedStylePropsArg, StatefulPopoverProps as BaseStatefulTooltipProps, PopoverProps as BaseTooltipProps } from '../baseui/popover';
 import * as React from 'react';
 import { Override } from '../overrides';
 import { TriggerType } from '../popover';
-import type { Intent } from '../types';
-declare type SpacewebSharedProps = {
+import type { Action, Intent } from '../types';
+type SpacewebSharedProps = {
+    /** @deprecated */
     $size: Size;
+    /** @deprecated */
     $label: boolean;
+    /** @deprecated */
     $intent: Intent;
 };
-export declare type Size = 'sm' | 'md' | 'lg';
-export declare type SharedProps = SharedStylePropsArg & SpacewebSharedProps;
+export type Size = 'sm' | 'md' | 'lg' | '50vw';
+export type SharedProps = SharedStylePropsArg & SpacewebSharedProps;
 interface DeprecatedProps {
     /**
      * @deprecated
@@ -25,15 +27,25 @@ interface DeprecatedProps {
      * @deprecated
      */
     focusLock?: BaseTooltipProps['focusLock'];
+    /**
+     * @deprecated
+     */
+    size?: Size;
+    /**
+     * @deprecated
+     */
+    intent?: Intent;
+    /**
+     * @deprecated
+     */
+    label?: React.ReactNode;
 }
-export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'dismissOnEsc' | 'dismissOnClickOutside' | 'triggerType' | 'placement'> & {
+export type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'dismissOnEsc' | 'dismissOnClickOutside' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BaseStatefulTooltipProps['overrides']]?: Override<SharedProps & Record<string, any>>;
     } & {
         Label?: Override<SpacewebSharedProps>;
     };
-    size?: Size;
-    label?: React.ReactNode;
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
@@ -42,16 +54,13 @@ export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overr
     triggerType?: TriggerType;
     placement?: TetherPlacement;
     viewportAsBoundary?: boolean;
-    intent?: Intent;
 } & DeprecatedProps;
-export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'triggerType' | 'placement'> & {
+export type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BaseTooltipProps['overrides']]?: Override<SharedProps & Record<string, any>>;
     } & {
         Label?: Override<SpacewebSharedProps>;
     };
-    size?: Size;
-    label?: React.ReactNode;
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
@@ -59,7 +68,10 @@ export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'childre
     triggerType?: TriggerType;
     placement?: TetherPlacement;
     viewportAsBoundary?: boolean;
-    intent?: Intent;
 } & DeprecatedProps;
 export type { Placement, TriggerType, AccessibilityType } from '../popover';
-export type { StatefulTooltipContainerProps } from '../baseui/tooltip';
+export type { StatefulPopoverContainerProps as StatefulTooltipContainerProps } from '../baseui/popover';
+export type ActionableTooltipProps = BaseStatefulTooltipProps & {
+    action: Action;
+    renderFooter?: () => React.ReactNode;
+};

package/transitions/collapse/collapse.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { CollapseProps } from './types';
 declare const Collapse: {
-    ({ visible, timingFunction, children, onEnter, onEntering, onEntered, onExit, onExited, onExiting, disableExitTransition, disableEnterTransition, enableAppearTransition, containerRef, duration, dimension, overrides, collapsedSize, unmountOnExit, ...props }: CollapseProps): ReactElement;
+    ({ visible, timingFunction, children, style, className, onEnter, onEntering, onEntered, onExit, onExited, onExiting, disableExitTransition, disableEnterTransition, enableAppearTransition, containerRef, duration, dimension, overrides, collapsedSize: _collapsedSize, unmountOnExit, ...props }: CollapseProps): ReactElement;
     displayName: string;
 };
 export default Collapse;

package/transitions/collapse/collapse.js

@@ -3,22 +3,20 @@ 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 Transition_1 = (0, tslib_1.__importDefault)(require("react-transition-group/Transition"));
+var Transition_1 = tslib_1.__importDefault(require("react-transition-group/Transition"));
 var helperFunction_1 = require("../transition/helperFunction");
-var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedHandler"));
+var useCombinedHandler_1 = tslib_1.__importDefault(require("../../hooks/useCombinedHandler"));
 var styled_components_1 = require("./styled-components");
 var overrides_1 = require("../../overrides");
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../../hooks/useCombinedRef"));
 var constants_1 = require("../transition/constants");
-var usePreferredReducedMotion_1 = (0, tslib_1.__importDefault)(require("../../hooks/usePreferredReducedMotion"));
+var usePreferredReducedMotion_1 = tslib_1.__importDefault(require("../../hooks/usePreferredReducedMotion"));
 var Collapse = function (_a) {
-    var _b = _a.visible, visible = _b === void 0 ? true : _b, _c = _a.timingFunction, timingFunction = _c === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _c, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExited = _a.onExited, onExiting = _a.onExiting, _d = _a.disableExitTransition, disableExitTransition = _d === void 0 ? false : _d, _e = _a.disableEnterTransition, disableEnterTransition = _e === void 0 ? false : _e, _f = _a.enableAppearTransition, enableAppearTransition = _f === void 0 ? false : _f, _g = _a.containerRef, containerRef = _g === void 0 ? null : _g, _h = _a.duration, duration = _h === void 0 ? { enter: constants_1.DEFAULT_DURATION, exit: constants_1.DEFAULT_DURATION } : _h, _j = _a.dimension, dimension = _j === void 0 ? 'height' : _j, overrides = _a.overrides, _k = _a.collapsedSize, collapsedSize = _k === void 0 ? 0 : _k, unmountOnExit = _a.unmountOnExit, props = (0, tslib_1.__rest)(_a, ["visible", "timingFunction", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExited", "onExiting", "disableExitTransition", "disableEnterTransition", "enableAppearTransition", "containerRef", "duration", "dimension", "overrides", "collapsedSize", "unmountOnExit"]);
+    var _b = _a.visible, visible = _b === void 0 ? true : _b, _c = _a.timingFunction, timingFunction = _c === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _c, children = _a.children, style = _a.style, className = _a.className, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExited = _a.onExited, onExiting = _a.onExiting, _d = _a.disableExitTransition, disableExitTransition = _d === void 0 ? false : _d, _e = _a.disableEnterTransition, disableEnterTransition = _e === void 0 ? false : _e, _f = _a.enableAppearTransition, enableAppearTransition = _f === void 0 ? false : _f, _g = _a.containerRef, containerRef = _g === void 0 ? null : _g, _h = _a.duration, duration = _h === void 0 ? { enter: constants_1.DEFAULT_DURATION, exit: constants_1.DEFAULT_DURATION } : _h, _j = _a.dimension, dimension = _j === void 0 ? 'height' : _j, overrides = _a.overrides, _k = _a.collapsedSize, _collapsedSize = _k === void 0 ? 0 : _k, unmountOnExit = _a.unmountOnExit, props = tslib_1.__rest(_a, ["visible", "timingFunction", "children", "style", "className", "onEnter", "onEntering", "onEntered", "onExit", "onExited", "onExiting", "disableExitTransition", "disableEnterTransition", "enableAppearTransition", "containerRef", "duration", "dimension", "overrides", "collapsedSize", "unmountOnExit"]);
+    var collapsedSize = unmountOnExit ? 0 : _collapsedSize;
     var prefersReducedMotion = (0, usePreferredReducedMotion_1.default)();
     var nodeRef = (0, react_1.useRef)(null);
     var mergedRef = (0, useCombinedRef_1.default)(nodeRef, containerRef);
-    // eslint-disable-next-line no-param-reassign
-    if (unmountOnExit)
-        collapsedSize = 0;
     var scrollKey = dimension === 'height' ? 'scrollHeight' : 'scrollWidth';
     // accepting duration as both number and object
     var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
@@ -53,14 +51,22 @@ var Collapse = function (_a) {
             nodeRef.current.style[dimension] = "".concat(collapsedSize, "px");
         }
     }, onExited);
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Container, styled_components_1.StyledContainer), 2), Container = _l[0], containerProps = _l[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Container, styled_components_1.StyledContainer), 2), Container = _l[0], _m = _l[1], containerClass = _m.className, containerProps = tslib_1.__rest(_m, ["className"]);
     var sharedProps = {
         $duration: durationProp,
         $timingFunction: timingFunction,
         $dimension: dimension,
         $collapsedSize: collapsedSize,
     };
-    return prefersReducedMotion ? ((0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({}, containerProps, sharedProps, { children: visible ? children : null }), void 0)) : ((0, jsx_runtime_1.jsx)(Transition_1.default, (0, tslib_1.__assign)({ in: visible }, props, { unmountOnExit: unmountOnExit, timeout: durationProp, nodeRef: nodeRef, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return ((0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }), void 0)); } }), void 0));
+    return prefersReducedMotion ? ((0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({ className: [className, containerClass] }, containerProps, sharedProps, { children: visible ? children : null }))) : ((0, jsx_runtime_1.jsx)(Transition_1.default, tslib_1.__assign({ in: visible }, props, { unmountOnExit: unmountOnExit, timeout: durationProp, nodeRef: nodeRef, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return ((0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({ style: [
+                {
+                    '--sw-duration': state === 'entering' ? "".concat(durationProp === null || durationProp === void 0 ? void 0 : durationProp.enter, "ms") : "".concat(durationProp === null || durationProp === void 0 ? void 0 : durationProp.exit, "ms"),
+                    '--sw-timing-function': timingFunction,
+                    '--sw-width': dimension === 'width' && "".concat(collapsedSize, "px"),
+                    '--sw-height': dimension === 'height' && "".concat(collapsedSize, "px"),
+                },
+                style,
+            ], className: [className, containerClass], ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }))); } })));
 };
 Collapse.displayName = 'Collapse';
 exports.default = Collapse;

package/transitions/collapse/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Collapse } from './collapse';
-export type { CollapseProps, CollapseSharedProps, Dimension, } from './types';
-export type { TransitionCallbacks, Duration, TimingFunction, } from '../transition/index';
+export type { CollapseProps, CollapseSharedProps, Dimension } from './types';
+export type { TransitionCallbacks, Duration, TimingFunction } from '../transition/index';