@useblu/ocean-react 1.43.0 → 1.44.0

package/index.js

@@ -46248,10 +46248,39 @@ var Breadcrumb = e.forwardRef(function (_a, ref) {
 Breadcrumb.displayName = 'Breadcrumb';
 
 var Drawer = function (_a) {
-    var children = _a.children, open = _a.open, onDrawerClose = _a.onDrawerClose, overlayClose = _a.overlayClose, _b = _a.headerIcon, headerIcon = _b === void 0 ? e__default["default"].createElement(ts, null) : _b, _c = _a.iconAlignment, iconAlignment = _c === void 0 ? 'right' : _c;
-    return (e__default["default"].createElement(e__default["default"].Fragment, null,
-        e__default["default"].createElement("div", { className: classNames('ods-overlay', open && 'ods-overlay--open'), "aria-hidden": "true", onClick: overlayClose }),
-        e__default["default"].createElement("div", { className: classNames('ods-drawer', open && 'ods-drawer--open') },
+    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__default["default"].createElement(ts, null) : _c, _d = _a.iconAlignment, iconAlignment = _d === void 0 ? 'right' : _d, anchorEl = _a.anchorEl;
+    var drawerRef = e.useRef(null);
+    var getAnchorPosition = e.useCallback(function () {
+        if (!(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.current))
+            return null;
+        var position = anchorEl.current.getBoundingClientRect();
+        if (align === 'right') {
+            var size = window.innerWidth - position.left;
+            return {
+                width: "".concat(size, "px"),
+                right: "".concat(size, "px"),
+                left: 'auto'
+            };
+        }
+        return {
+            width: "".concat(position.right, "px"),
+            right: 'auto',
+            left: "".concat(position.right, "px")
+        };
+    }, [align, anchorEl]);
+    var attachDrawer = e.useCallback(function () {
+        var position = getAnchorPosition();
+        if (!drawerRef.current || !position)
+            return;
+        drawerRef.current.style.width = "calc(100% - ".concat(position === null || position === void 0 ? void 0 : position.width, "px)})");
+        drawerRef.current.style.left = position.left;
+        drawerRef.current.style.right = position.right;
+    }, [getAnchorPosition]);
+    e.useEffect(function () {
+        attachDrawer();
+    }, [anchorEl, drawerRef, attachDrawer]);
+    return (e__default["default"].createElement("div", { className: classNames('ods-overlay', open && 'ods-overlay--open'), "aria-hidden": "true", onClick: overlayClose, ref: drawerRef },
+        e__default["default"].createElement("div", { className: classNames('ods-drawer', open && 'ods-drawer--open', "ods-drawer--".concat(align)) },
             e__default["default"].createElement("div", { className: classNames('ods-drawer__content--header', "ods-drawer__content--header--".concat(iconAlignment)) },
                 e__default["default"].createElement(Button$1, { type: "button", onClick: onDrawerClose }, headerIcon)),
             children)));