@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/popover/PopoverEnhancer.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Baseui overrides anchor element's ref. This component clones and stores anchor/child element's ref.
+ * TODO: should be removed once https://github.com/uber/baseweb/issues/4032 is addressed
+ */
+export declare const PopoverRefHandler: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLElement | null | undefined>>;
+export declare const TargetElementProxy: React.ForwardRefExoticComponent<{
+    targetElement?: HTMLElement | null | undefined;
+} & React.RefAttributes<HTMLElement | null | undefined>>;
+type PopoverChildEnhancerProps = {
+    children?: React.ReactNode;
+    targetElement?: HTMLElement | null | undefined;
+};
+export declare const PopoverChildEnhancer: React.ForwardRefExoticComponent<PopoverChildEnhancerProps & React.RefAttributes<HTMLElement | null | undefined>>;
+export {};

package/popover/PopoverEnhancer.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverChildEnhancer = exports.TargetElementProxy = exports.PopoverRefHandler = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var React = tslib_1.__importStar(require("react"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function getFirstElement(children) {
+    var childArray = React.Children.toArray(children);
+    if (__DEV__ && childArray.length !== 1) {
+        console.error("[spaceweb] Exactly 1 child must be passed to Popover/Tooltip, found ".concat(childArray.length, " children"));
+    }
+    var _a = tslib_1.__read(childArray, 1), child = _a[0];
+    return React.isValidElement(child) && typeof child === 'object' ? child : (0, jsx_runtime_1.jsx)("span", { children: child });
+}
+/**
+ * Baseui overrides anchor element's ref. This component clones and stores anchor/child element's ref.
+ * TODO: should be removed once https://github.com/uber/baseweb/issues/4032 is addressed
+ */
+exports.PopoverRefHandler = React.forwardRef(function (_a, ref) {
+    var children = _a.children, anchorProps = tslib_1.__rest(_a, ["children"]);
+    var childElement = getFirstElement(children);
+    var childRef = childElement.ref || null;
+    var combinedRef = (0, useCombinedRef_1.default)(ref, childRef);
+    var childProps = tslib_1.__assign(tslib_1.__assign({}, anchorProps), { ref: combinedRef });
+    return React.cloneElement(childElement, childProps);
+});
+exports.PopoverRefHandler.displayName = 'PopoverRefHandler';
+exports.TargetElementProxy = React.forwardRef(function (_a, ref) {
+    var targetElement = _a.targetElement, anchorProps = tslib_1.__rest(_a, ["targetElement"]);
+    (0, react_1.useEffect)(function () {
+        if (!ref)
+            return;
+        if (typeof ref === 'object') {
+            ref.current = targetElement;
+        }
+        else {
+            ref(targetElement);
+        }
+        targetElement;
+    }, [targetElement]);
+    return null;
+});
+exports.TargetElementProxy.displayName = 'PopoverTargetElementProxy';
+exports.PopoverChildEnhancer = React.forwardRef(function (_a, ref) {
+    var children = _a.children, targetElement = _a.targetElement, anchorProps = tslib_1.__rest(_a, ["children", "targetElement"]);
+    if (__DEV__) {
+        // When targetElement is null (before ref to the element is set), it throws an unnecessary error, hence checking only for undefined
+        if (typeof targetElement === 'undefined' && !children) {
+            console.warn('[spaceweb] One of the children or targetElement should be provided to Popover');
+        }
+    }
+    if (typeof targetElement !== 'undefined') {
+        return (0, jsx_runtime_1.jsx)(exports.TargetElementProxy, tslib_1.__assign({ ref: ref, targetElement: targetElement }, anchorProps));
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.PopoverRefHandler, tslib_1.__assign({ ref: ref }, anchorProps, { children: children })));
+});
+exports.PopoverChildEnhancer.displayName = 'PopoverChildEnhancer';

package/popover/hooks.d.ts

@@ -1,14 +1,4 @@
-/// <reference types="react" />
 import { PopoverProps } from './types';
-/**
- * Wraps content with LayersManager making sure all the inner popovers are hosted inside the current popover.
- */
-export declare const useContent: ({ content }: {
-    content: PopoverProps['content'];
-}) => {
-    setContentHost: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-    wrappedContent: import("react/jsx-runtime").JSX.Element;
-};
-declare type UseFocusLockParams = Pick<PopoverProps, 'focusLock' | 'returnFocus'>;
+type UseFocusLockParams = Pick<PopoverProps, 'focusLock' | 'returnFocus'>;
 export declare const useFocusLock: ({ focusLock, returnFocus }: UseFocusLockParams) => UseFocusLockParams;
 export {};

package/popover/hooks.js

@@ -1,23 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusLock = exports.useContent = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var layer_1 = require("../layer");
-/**
- * Wraps content with LayersManager making sure all the inner popovers are hosted inside the current popover.
- */
-var useContent = function (_a) {
-    var content = _a.content;
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), contentHost = _b[0], setContentHost = _b[1];
-    var _content = typeof content === 'function' ? content() : content;
-    return {
-        setContentHost: setContentHost,
-        wrappedContent: (0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ host: contentHost }, { children: _content }), void 0),
-    };
-};
-exports.useContent = useContent;
+exports.useFocusLock = void 0;
 var useFocusLock = function (_a) {
     var focusLock = _a.focusLock, returnFocus = _a.returnFocus;
     var _focusLock = focusLock;

package/popover/overrides.d.ts

@@ -1,8 +1,9 @@
 import { Placement } from './types';
-import { StyleFn, Styles } from '../types';
+import { ClassName, Styles } from '../types';
 export declare const getPseudoElementPosition: (placement: Placement, popoverMargin: number) => {
     [x: string]: string | number;
 };
-export declare const getBodyStyles: StyleFn;
-export declare const arrowStyles: Styles;
-export declare const getInnerStyles: Styles;
+export declare const getBodyStyles: Styles;
+export declare const getBodyClassNames: ClassName;
+export declare const arrowStyles: ClassName;
+export declare const getInnerStyles: ClassName;

package/popover/overrides.js

@@ -1,26 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInnerStyles = exports.arrowStyles = exports.getBodyStyles = exports.getPseudoElementPosition = void 0;
+exports.getInnerStyles = exports.arrowStyles = exports.getBodyClassNames = exports.getBodyStyles = exports.getPseudoElementPosition = void 0;
 var tslib_1 = require("tslib");
 var utils_1 = require("./utils");
 var constants_1 = require("./constants");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var arrowPositionStyle = function (_a, _b) {
-    var theme = _a.theme;
+    var isRTL = _a.isRTL;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
-    var _d = (0, tslib_1.__read)((0, utils_1.splitPlacement)($placement), 1), primaryPos = _d[0];
+    var _d = tslib_1.__read((0, utils_1.splitPlacement)($placement), 1), primaryPos = _d[0];
+    // in case of top/bottom rotate in opposite for RTL
     if (primaryPos === 'top')
-        return { transform: 'rotate(135deg)' };
-    else if (primaryPos === 'right')
-        return { transform: 'rotate(225deg)' };
-    else if (primaryPos === 'bottom')
-        return { transform: 'rotate(315deg)' };
-    else
-        return { transform: 'rotate(45deg)' };
+        return "mx-2 ".concat(!isRTL ? 'rotate-135' : '-rotate-135');
+    if (primaryPos === 'bottom')
+        return "mx-2 ".concat(!isRTL ? 'rotate-315' : '-rotate-315');
+    // in case of left/right rotate 180 - angle for RTL
+    if (primaryPos === 'right')
+        return "my-2 ".concat(!isRTL ? 'rotate-225' : '-rotate-45');
+    return "my-2 ".concat(!isRTL ? 'rotate-45' : 'rotate-135');
 };
 var getPseudoElementPosition = function (placement, popoverMargin) {
     var _a;
-    var _b = (0, tslib_1.__read)((0, utils_1.splitPlacement)(placement), 1), primaryPos = _b[0], oppositePos = (0, utils_1.getOppositePosition)(primaryPos);
+    var _b = tslib_1.__read((0, utils_1.splitPlacement)(placement), 1), primaryPos = _b[0], oppositePos = (0, utils_1.getOppositePosition)(primaryPos);
     var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
     var fullSpaceDimension = isPositionedVertically ? 'width' : 'height', marginDimension = isPositionedVertically ? 'height' : 'width', zeroOffset = isPositionedVertically ? 'left' : 'top';
     return _a = {},
@@ -31,33 +32,56 @@ var getPseudoElementPosition = function (placement, popoverMargin) {
         _a;
 };
 exports.getPseudoElementPosition = getPseudoElementPosition;
-var getBodyStyles = function (_a, _b) {
-    var theme = _a.theme;
-    var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c, _d = _b.$popoverMargin, $popoverMargin = _d === void 0 ? 0 : _d, $showArrow = _b.$showArrow, rest = (0, tslib_1.__rest)(_b, ["$placement", "$popoverMargin", "$showArrow"]);
-    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: theme.spr.popup, color: theme.spr.text01, boxShadow: 'none' }, (0, longHandHelpers_1.borderRadius)(theme.popover.borderRadius)), { '::before': (0, tslib_1.__assign)({ content: '" "', position: 'absolute' }, (0, exports.getPseudoElementPosition)($placement, $showArrow ? $popoverMargin + constants_1.ARROW_WIDTH : $popoverMargin)) }));
+var getPlacementHelpers = function (placement, _popoverMargin, showArrow) {
+    if (_popoverMargin === void 0) { _popoverMargin = 0; }
+    var _a = tslib_1.__read((0, utils_1.splitPlacement)(placement), 1), primaryPos = _a[0], oppositePos = (0, utils_1.getOppositePosition)(primaryPos);
+    var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
+    var marginDimension = isPositionedVertically ? 'height' : 'width'; // for height and width classes
+    var popoverMargin = showArrow ? _popoverMargin + constants_1.ARROW_WIDTH : _popoverMargin;
+    return { marginDimension: marginDimension, popoverMargin: popoverMargin, oppositePos: oppositePos };
 };
-exports.getBodyStyles = getBodyStyles;
-exports.arrowStyles = [
-    function (utils) {
-        var theme = utils.theme;
-        return {
-            backgroundColor: 'transparent',
-            boxShadow: 'none',
-            zIndex: 1,
-            borderTopWidth: theme.borderWidth.default,
-            borderTopStyle: 'solid',
-            borderTopColor: theme.spr.popupBorder,
-            borderRightWidth: theme.borderWidth.default,
-            borderRightStyle: 'solid',
-            borderRightColor: theme.spr.popupBorder,
-        };
+exports.getBodyStyles = [
+    function (_, _a) {
+        var _b;
+        var $placement = _a.$placement, $popoverMargin = _a.$popoverMargin, $showArrow = _a.$showArrow;
+        var _c = getPlacementHelpers($placement, $popoverMargin, $showArrow), oppositePos = _c.oppositePos, marginDimension = _c.marginDimension, popoverMargin = _c.popoverMargin;
+        return _b = {},
+            _b["--sw-before-".concat(oppositePos)] = "".concat(-1 * popoverMargin, "px"),
+            _b["--sw-before-".concat(marginDimension)] = "".concat(popoverMargin, "px"),
+            _b;
+    },
+];
+exports.getBodyClassNames = [
+    'spr-popup spr-text-01 shadow-none rounded-8 before:absolute before:content-empty',
+    function (_, _a) {
+        var $placement = _a.$placement;
+        var _b = tslib_1.__read((0, utils_1.splitPlacement)($placement), 1), primaryPos = _b[0];
+        var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
+        return isPositionedVertically ? 'before:w-full before:left-0' : 'before:h-full before:top-0';
+    },
+    function (_, _a) {
+        var $placement = _a.$placement, $popoverMargin = _a.$popoverMargin, $showArrow = _a.$showArrow;
+        var _b = getPlacementHelpers($placement, $popoverMargin, $showArrow), oppositePos = _b.oppositePos, marginDimension = _b.marginDimension;
+        // adding classes like before:top-[--sw-before-top] before:h-[--sw-before-height]
+        return "before:".concat(oppositePos, "-[--sw-before-").concat(oppositePos, "] before:").concat(marginDimension === 'height' ? 'h' : 'w', "-[--sw-before-").concat(marginDimension, "]");
     },
+    //@ts-ignore -- component theme override
+    function (_a, _) {
+        var _b;
+        var theme = _a.theme;
+        return (((_b = theme.popover) === null || _b === void 0 ? void 0 : _b.borderRadius) ? (0, longHandHelpers_1.borderRadius)(theme.popover.borderRadius) : {});
+    },
+];
+exports.arrowStyles = [
+    'bg-transparent box-shadow-none z-1 border-solid border-0 border-t-1 border-t-[--sw-border-t-color] border-r-1 border-r-[--sw-border-r-color]',
     arrowPositionStyle,
 ];
 exports.getInnerStyles = [
-    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup',
-    function (_a) {
+    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup rounded-8',
+    // @ts-ignore -- component theme override
+    function (_a, _) {
+        var _b, _c;
         var theme = _a.theme;
-        return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(theme.popover.borderRadius)), { fontFamily: theme.fontFamily.sans }));
+        return (((_b = theme.popover) === null || _b === void 0 ? void 0 : _b.borderRadius) ? { borderRadius: (_c = theme.popover) === null || _c === void 0 ? void 0 : _c.borderRadius } : {});
     },
 ];

package/popover/popover.d.ts

@@ -5,6 +5,7 @@ declare const Popover: React.ForwardRefExoticComponent<Omit<import("../baseui/po
         Arrow?: import("../overrides").Override<any> | undefined;
         Inner?: import("../overrides").Override<any> | undefined;
     } & {
+        LayersManager?: import("../overrides").Override<import("../baseui/layer").LayersManagerProps> | undefined;
         ArrowTriangle?: import("../overrides").Override<any> | undefined;
     }) | undefined;
     children?: React.ReactNode | ((args: {

package/popover/popover.js

@@ -3,34 +3,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var popover_1 = require("../baseui/popover");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var react_1 = require("react");
 var overrides_1 = require("../overrides");
 var hooks_1 = require("./hooks");
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
-var PopoverEnahncer_1 = require("./PopoverEnahncer");
+var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
+var PopoverEnhancer_1 = require("./PopoverEnhancer");
 var layer_1 = require("../layer");
 var adapter_1 = require("./adapter");
 var overrides_2 = require("./overrides");
 var styled_components_1 = require("./styled-components");
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
 var style_1 = require("../style");
 var utils_1 = require("./utils");
-// @ts-ignore
+// @ts-ignore -- displayName is not typed in BasePopover
 popover_1.Popover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
-    var _h = (0, hooks_1.useContent)({ content: content }), setContentHost = _h.setContentHost, wrappedContent = _h.wrappedContent;
-    var isRTL = (0, style_1.useStyle)().isRTL;
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = tslib_1.__rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
+    var _h = (0, style_1.useStyle)(), isRTL = _h.isRTL, theme = _h.theme;
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, styled_components_1.StyledArrowTriangle), 2), ArrowTriangle = _j[0], arrowTriangleProps = _j[1];
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, styled_components_1.StyledArrowTriangle), 2), ArrowTriangle = _j[0], arrowTriangleProps = _j[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LayersManager, layer_1.LayersManager), 2), Layer = _k[0], layerProps = _k[1];
     var _overrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
-            Body: { style: overrides_2.getBodyStyles },
-            Arrow: { style: overrides_2.arrowStyles, props: { children: (0, jsx_runtime_1.jsx)(ArrowTriangle, (0, tslib_1.__assign)({}, arrowTriangleProps), void 0) } },
-            Inner: { style: overrides_2.getInnerStyles, props: { ref: setContentHost } },
+            Body: { className: overrides_2.getBodyClassNames, style: overrides_2.getBodyStyles },
+            Arrow: {
+                className: overrides_2.arrowStyles,
+                style: {
+                    // @ts-ignore -- css variable declaration
+                    '--sw-border-t-color': theme.spr.popupBorder,
+                    '--sw-border-r-color': theme.spr.popupBorder,
+                },
+                props: {
+                    children: ((0, jsx_runtime_1.jsx)(ArrowTriangle, tslib_1.__assign({}, arrowTriangleProps, { style: [
+                            arrowTriangleProps.style,
+                            { '--sw-border-t-color': theme.spr.popup, '--sw-border-r-color': theme.spr.popup },
+                        ] }))),
+                },
+            },
+            Inner: { className: overrides_2.getInnerStyles },
         }, overrides);
-    }, [ArrowTriangle, arrowTriangleProps, overrides, setContentHost]);
+    }, [theme.spr.popupBorder, theme.spr.popup, ArrowTriangle, arrowTriangleProps, overrides]);
     var mappedProps = {
         placement: placement && isRTL ? adapter_1.rtlPlacementMap[placement] : adapter_1.placementMap[placement],
         accessibilityType: accessibilityType && adapter_1.accessibilityMap[accessibilityType],
@@ -45,8 +58,9 @@ var Popover = React.forwardRef(function (_a, ref) {
         childNode = children;
     }
     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)(popover_1.Popover, (0, tslib_1.__assign)({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { 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, tslib_1.__assign({ zIndex: layer_1.Z_INDEX.POPOVER }, layerProps, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, tslib_1.__assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: (0, jsx_runtime_1.jsx)(PopoverEnhancer_1.PopoverChildEnhancer, tslib_1.__assign({ targetElement: targetElement }, { children: childNode }), "CheckCompliance<Popover>") })) })));
 });
 Popover.displayName = 'Popover';
+Popover.__standard = 'Component<Popover>';
 exports.default = Popover;

package/popover/stateful-popover.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var popover_1 = require("../baseui/popover");
-var popover_2 = (0, tslib_1.__importDefault)(require("./popover"));
+var popover_2 = tslib_1.__importDefault(require("./popover"));
 var constants_1 = require("./constants");
 function StatefulPopover(props) {
-    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, targetElement = props.targetElement, viewportAsBoundary = props.viewportAsBoundary, restProps = (0, tslib_1.__rest)(props, ["children", "overrides", "targetElement", "viewportAsBoundary"]);
-    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, (0, tslib_1.__assign)({}, restProps, { children: function (popoverProps) { return ((0, jsx_runtime_1.jsx)(popover_2.default, (0, tslib_1.__assign)({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }), void 0)); } }), void 0));
+    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, targetElement = props.targetElement, viewportAsBoundary = props.viewportAsBoundary, restProps = tslib_1.__rest(props, ["children", "overrides", "targetElement", "viewportAsBoundary"]);
+    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, tslib_1.__assign({}, restProps, { children: function (popoverProps) { return ((0, jsx_runtime_1.jsx)(popover_2.default, tslib_1.__assign({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }))); } })));
 }
 StatefulPopover.defaultProps = {
     accessibilityType: 'menu',

package/popover/styled-components.js

@@ -2,22 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledArrowTriangle = exports.StyledPadding = exports.StyledBody = exports.StyledArrow = exports.StyledInner = void 0;
 var tslib_1 = require("tslib");
-var constants_1 = require("./constants");
 var popover_1 = require("../baseui/popover");
 Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return popover_1.StyledInner; } });
 Object.defineProperty(exports, "StyledArrow", { enumerable: true, get: function () { return popover_1.StyledArrow; } });
 Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function () { return popover_1.StyledBody; } });
 Object.defineProperty(exports, "StyledPadding", { enumerable: true, get: function () { return popover_1.StyledPadding; } });
-var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
-exports.StyledArrowTriangle = (0, styled_1.default)('div', function (_a) {
-    var theme = _a.theme;
-    return ({
-        boxSizing: 'border-box',
-        borderWidth: "".concat(constants_1.ARROW_SIZE, "px"),
-        borderTopColor: theme.spr.popup,
-        borderRightColor: theme.spr.popup,
-        borderLeftColor: theme.borderColor.transparent,
-        borderBottomColor: theme.borderColor.transparent,
-        borderStyle: 'solid',
-    });
-});
+var styled_1 = tslib_1.__importDefault(require("../style/styled"));
+exports.StyledArrowTriangle = (0, styled_1.default)('div', 'box-border border-4 border-solid border-t-[--sw-border-t-color] border-r-[--sw-border-r-color] border-l-transparent border-b-transparent');

package/popover/types.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { TetherPlacement } from '../baseui/layer';
-import { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from '../baseui/popover';
-import { Override } from '../overrides';
-export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
+import type { TetherPlacement, LayersManagerProps } from '../baseui/layer';
+import type { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from '../baseui/popover';
+import type { Override } from '../overrides';
+export type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
     } & {
+        LayersManager?: Override<LayersManagerProps>;
         ArrowTriangle?: Override<any>;
     };
     children?: React.ReactNode | ((args: {
@@ -17,9 +18,12 @@ export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'childre
     innerRef?: React.Ref<HTMLElement>;
     viewportAsBoundary?: boolean;
 };
-export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
+export type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
+    } & {
+        LayersManager?: Override<LayersManagerProps>;
+        ArrowTriangle?: Override<any>;
     };
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
@@ -27,14 +31,17 @@ export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overr
     targetElement?: HTMLElement | null;
     viewportAsBoundary?: boolean;
 };
-export declare type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
+export type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
+    } & {
+        LayersManager?: Override<LayersManagerProps>;
+        ArrowTriangle?: Override<any>;
     };
 };
-export declare type AccessibilityType = 'none' | 'menu' | 'tooltip';
-export declare type TriggerType = 'click' | 'hover';
-export declare type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
+export type AccessibilityType = 'none' | 'menu' | 'tooltip';
+export type TriggerType = 'click' | 'hover';
+export type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
 export type { Offset, SharedStylePropsArg as SharedProps, StateReducer, } from '../baseui/popover';
 export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from '../baseui/popover';
 export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from '../baseui/popover/constants';

package/popover/utils.js

@@ -35,7 +35,7 @@ var getPopperOptions = function (_a) {
     var ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary;
     return ({
         modifiers: {
-            preventOverflow: (0, tslib_1.__assign)({ enabled: !ignoreBoundary, padding: 0 }, (viewportAsBoundary && { boundariesElement: 'viewport' })),
+            preventOverflow: tslib_1.__assign({ enabled: !ignoreBoundary, padding: 0 }, (viewportAsBoundary && { boundariesElement: 'viewport' })),
         },
     });
 };

package/progress/circular/CircularProgress.d.ts

@@ -1,4 +1,7 @@
-import { ReactElement } from 'react';
-import { CircularProgressProps } from './types';
-declare const CircularProgress: ({ intent, infinite, label, backgroundColor, value, className, color, size, thickness, overrides, }: CircularProgressProps) => ReactElement;
+import type { ReactElement } from 'react';
+import type { CircularProgressProps } from './types';
+declare const CircularProgress: {
+    ({ intent, infinite, label, backgroundColor, value, className, style, color, size, thickness, overrides, ...restProps }: CircularProgressProps): ReactElement;
+    __standard: string;
+};
 export default CircularProgress;

package/progress/circular/CircularProgress.js

@@ -5,17 +5,44 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var helpers_1 = require("../../helpers");
 var overrides_1 = require("../../overrides");
 var styled_component_1 = require("./styled-component");
+var style_1 = require("../../style");
+var helper_1 = require("../helper");
 var CircularProgress = function (_a) {
-    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides;
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, style = _a.style, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides, restProps = tslib_1.__rest(_a, ["intent", "infinite", "label", "backgroundColor", "value", "className", "style", "color", "size", "thickness", "overrides"]);
     var strokeWidth = (styled_component_1.VIEWBOX_SIZE / size) * thickness;
-    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ intent: intent, infinite: infinite, backgroundColor: backgroundColor, value: value, color: color, size: size, thickness: thickness, strokeWidth: strokeWidth })), { $withLabel: !!label });
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _g[0], rootProps = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BarContainer, styled_component_1.StyledBarContainer), 2), BarContainer = _h[0], barContainerProps = _h[1];
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Svg, styled_component_1.StyledSvg), 2), Svg = _j[0], svgProps = _j[1];
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, styled_component_1.StyledBar), 2), Bar = _k[0], barProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _l[0], progressProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _m[0], labelContainerProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _o[0], labelProps = _o[1];
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ className: className, role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, rootProps, { children: [(0, jsx_runtime_1.jsx)(BarContainer, (0, tslib_1.__assign)({ "data-testid": "bar-container" }, sharedProps, barContainerProps, { children: (0, jsx_runtime_1.jsxs)(Svg, (0, tslib_1.__assign)({ viewBox: "".concat(styled_component_1.VIEWBOX_SIZE / 2, " ").concat(styled_component_1.VIEWBOX_SIZE / 2, " ").concat(styled_component_1.VIEWBOX_SIZE, " ").concat(styled_component_1.VIEWBOX_SIZE) }, sharedProps, svgProps, { children: [(0, jsx_runtime_1.jsx)(Bar, (0, tslib_1.__assign)({ "data-testid": "bar" }, sharedProps, barProps), void 0), (0, jsx_runtime_1.jsx)(Progress, (0, tslib_1.__assign)({ inlineStyles: (0, styled_component_1.getProgressInlineStyles)({ value: value, infinite: infinite, strokeWidth: strokeWidth }) }, sharedProps, progressProps), void 0)] }), void 0) }), void 0), label ? ((0, jsx_runtime_1.jsx)(LabelContainer, (0, tslib_1.__assign)({}, sharedProps, labelContainerProps, { children: (0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0) }), void 0)) : null] }), void 0));
+    var _g = (0, style_1.useStyle)(), px2rem = _g.px2rem, theme = _g.theme;
+    var sharedProps = tslib_1.__assign(tslib_1.__assign({}, (0, helpers_1.add$props)({ intent: intent, infinite: infinite, backgroundColor: backgroundColor, value: value, color: color, size: size, thickness: thickness, strokeWidth: strokeWidth })), { $withLabel: !!label });
+    var _h = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _h[0], rootProps = _h[1];
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BarContainer, styled_component_1.StyledBarContainer), 2), BarContainer = _j[0], barContainerProps = _j[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Svg, styled_component_1.StyledSvg), 2), Svg = _k[0], svgProps = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, styled_component_1.StyledBar), 2), Bar = _l[0], barProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, styled_component_1.StyledProgress), 2), Progress = _m[0], progressProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _o[0], labelContainerProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _p[0], labelProps = _p[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, restProps, rootProps, { style: [
+            {
+                '--sw-height': px2rem(size),
+                '--sw-width': px2rem(size),
+            },
+            style,
+            rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(0, jsx_runtime_1.jsx)(BarContainer, tslib_1.__assign({ "data-testid": "bar-container" }, sharedProps, barContainerProps, { style: [
+                    {
+                        '--sw-color': color || (0, helper_1.getIntentColor)(intent, theme),
+                    },
+                    barContainerProps === null || barContainerProps === void 0 ? void 0 : barContainerProps.style,
+                ] }, { children: (0, jsx_runtime_1.jsxs)(Svg, tslib_1.__assign({ viewBox: "".concat(styled_component_1.VIEWBOX_SIZE / 2, " ").concat(styled_component_1.VIEWBOX_SIZE / 2, " ").concat(styled_component_1.VIEWBOX_SIZE, " ").concat(styled_component_1.VIEWBOX_SIZE) }, sharedProps, svgProps, { children: [(0, jsx_runtime_1.jsx)(Bar, tslib_1.__assign({ "data-testid": "bar" }, sharedProps, barProps, { style: [
+                                {
+                                    '--sw-stroke-width': px2rem(strokeWidth),
+                                    '--sw-stroke': backgroundColor || theme.spr.tag02,
+                                },
+                                (0, styled_component_1.getBarInlineStyles)({ px2rem: px2rem }, sharedProps),
+                                barProps === null || barProps === void 0 ? void 0 : barProps.style,
+                            ] })), (0, jsx_runtime_1.jsx)(Progress, tslib_1.__assign({ "data-testid": "progress" }, sharedProps, progressProps, { style: [
+                                { '--sw-stroke-width': px2rem(strokeWidth) },
+                                (0, styled_component_1.getProgressInlineStyles)({ px2rem: px2rem }, sharedProps),
+                                progressProps === null || progressProps === void 0 ? void 0 : progressProps.style,
+                            ] }))] })) })), label ? ((0, jsx_runtime_1.jsx)(LabelContainer, tslib_1.__assign({}, sharedProps, labelContainerProps, { children: (0, jsx_runtime_1.jsx)(Label, tslib_1.__assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label })) }))) : null] })));
 };
+CircularProgress.__standard = 'Component';
 exports.default = CircularProgress;

package/progress/circular/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var CircularProgress_1 = (0, tslib_1.__importDefault)(require("./CircularProgress"));
+var CircularProgress_1 = tslib_1.__importDefault(require("./CircularProgress"));
 exports.default = CircularProgress_1.default;

package/progress/circular/styled-component.d.ts

@@ -1,15 +1,29 @@
+import { CircularSharedProps } from './types';
+/**
+ * CircularProgress styles are inspired from material-ui
+ * https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CircularProgress/CircularProgress.js
+ */
 export declare const VIEWBOX_SIZE = 44;
-export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }: {
-    strokeWidth: number;
-    value: number;
-    infinite?: boolean | undefined;
-}) => {
+export declare const getProgressInlineStyles: ({ px2rem }: {
+    px2rem: any;
+}, { $strokeWidth, $value, $infinite }: CircularSharedProps) => {
+    strokeDasharray?: string | undefined;
     strokeDashoffset: string;
+    cx: any;
+    cy: any;
+    r: any;
 };
-export declare const StyledRoot: import("../../style/styled").StyledComponent;
-export declare const StyledBarContainer: import("../../style/styled").StyledComponent;
-export declare const StyledSvg: import("../../style/styled").StyledComponent;
-export declare const StyledBar: import("../../style/styled").StyledComponent;
-export declare const StyledProgress: import("../../style/styled").StyledComponent;
-export declare const StyledLabelContainer: import("../../style/styled").StyledComponent;
-export declare const StyledLabel: import("../../style/styled").StyledComponent;
+export declare const StyledRoot: import("../../style").StyledComponent;
+export declare const StyledBarContainer: import("../../style").StyledComponent;
+export declare const StyledSvg: import("../../style").StyledComponent;
+export declare const getBarInlineStyles: ({ px2rem }: {
+    px2rem: any;
+}, { $strokeWidth }: CircularSharedProps) => {
+    cx: any;
+    cy: any;
+    r: any;
+};
+export declare const StyledBar: import("../../style").StyledComponent;
+export declare const StyledProgress: import("../../style").StyledComponent;
+export declare const StyledLabelContainer: import("../../style").StyledComponent;
+export declare const StyledLabel: import("../../style").StyledComponent;