@useblu/ocean-react 1.139.2 → 1.139.3

package/index.js

@@ -47129,6 +47129,17 @@ Breadcrumb.displayName = 'Breadcrumb';
 var Drawer = function (_a) {
     var children = _a.children, open = _a.open, onDrawerClose = _a.onDrawerClose, overlayClose = _a.overlayClose, _b = _a.align, align = _b === void 0 ? 'right' : _b, _c = _a.headerIcon, headerIcon = _c === void 0 ? e.createElement(yo, null) : _c, _d = _a.iconAlignment, iconAlignment = _d === void 0 ? 'right' : _d, anchorEl = _a.anchorEl, onMouseOutDrawer = _a.onMouseOutDrawer, _e = _a.size, size = _e === void 0 ? 'small' : _e, _f = _a.floating, floating = _f === void 0 ? false : _f, offsetX = _a.offsetX, depth = _a.depth, width = _a.width, _g = _a.hideOverlay, hideOverlay = _g === void 0 ? false : _g, onBack = _a.onBack;
     var drawerRef = e.useRef(null);
+    var panelRef = e.useRef(null);
+    var _h = e.useState(!floating), entered = _h[0], setEntered = _h[1];
+    e.useLayoutEffect(function () {
+        var _a;
+        if (!floating || entered === open)
+            return;
+        if (open)
+            (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        setEntered(open);
+    }, [floating, open, entered]);
+    var visuallyOpen = floating ? entered : open;
     var handleOverlayClose = function (event) {
         if (event.target === event.currentTarget) {
             event.preventDefault();
@@ -47165,11 +47176,14 @@ var Drawer = function (_a) {
         attachDrawer();
     }, [anchorEl, drawerRef, attachDrawer]);
     var overlayStyle = depth !== undefined ? { zIndex: 200 + depth } : undefined;
-    var drawerStyle = depth !== undefined || width !== undefined || (open && offsetX)
-        ? __assign$1(__assign$1(__assign$1({}, (depth !== undefined && { zIndex: 400 + depth })), (width !== undefined && { width: "".concat(width, "px") })), (open && offsetX && { transform: "translateX(".concat(-offsetX, "px)") })) : undefined;
+    var drawerStyle = depth !== undefined || width !== undefined || offsetX !== undefined
+        ? __assign$1(__assign$1(__assign$1({}, (depth !== undefined && { zIndex: 400 + depth })), (width !== undefined && { width: "".concat(width, "px") })), (offsetX !== undefined && {
+            '--ods-drawer-offset-x': "".concat(offsetX, "px"),
+        }))
+        : undefined;
     var headerAlignment = onBack ? 'left' : iconAlignment;
-    return (e.createElement("div", { className: classNames('ods-overlay', open && 'ods-overlay--open', hideOverlay && 'ods-overlay--transparent'), "aria-hidden": "true", onClick: handleOverlayClose, ref: drawerRef, style: overlayStyle, "data-testid": "drawer-overlay" },
-        e.createElement("div", { className: classNames('ods-drawer', open && 'ods-drawer--open', "ods-drawer--".concat(align), "ods-drawer--".concat(size), floating && 'ods-drawer--floating'), style: drawerStyle, onMouseLeave: onMouseOutDrawer },
+    return (e.createElement("div", { className: classNames('ods-overlay', visuallyOpen && 'ods-overlay--open', hideOverlay && 'ods-overlay--transparent'), "aria-hidden": "true", onClick: handleOverlayClose, ref: drawerRef, style: overlayStyle, "data-testid": "drawer-overlay" },
+        e.createElement("div", { className: classNames('ods-drawer', visuallyOpen && 'ods-drawer--open', "ods-drawer--".concat(align), "ods-drawer--".concat(size), floating && 'ods-drawer--floating'), style: drawerStyle, ref: panelRef, onMouseLeave: onMouseOutDrawer },
             e.createElement("div", { className: classNames('ods-drawer__content--header', "ods-drawer__content--header--".concat(headerAlignment)) },
                 e.createElement(Button$1, { type: "button", onClick: onBack !== null && onBack !== void 0 ? onBack : onDrawerClose, "aria-label": onBack ? 'Voltar' : undefined }, onBack ? e.createElement(qa, null) : headerIcon)),
             children)));