@useblu/ocean-react 1.43.0 → 1.44.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.44.0](https://github.com/ocean-ds/ocean-web/compare/v1.43.0...v1.44.0) (2023-06-01)
+
+### Features
+
+- add attach mode to drawer ([#1067](https://github.com/ocean-ds/ocean-web/issues/1067)) ([2edfd28](https://github.com/ocean-ds/ocean-web/commit/2edfd28eb6ba53242b83d656f8c4f455e2ba5da9))
+
 # [1.43.0](https://github.com/ocean-ds/ocean-web/compare/v1.42.0...v1.43.0) (2023-02-24)
 
 ### Features

package/Drawer/Drawer.d.ts

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 interface DrawerProps {
     children: React.ReactNode;
     open: boolean;
     onDrawerClose?(event: React.MouseEvent | React.KeyboardEvent): void;
     overlayClose: () => void;
     headerIcon?: React.ReactNode;
-    iconAlignment?: string;
+    align?: 'right' | 'left';
+    iconAlignment?: 'right' | 'left';
+    anchorEl?: RefObject<HTMLDivElement> | null;
 }
-declare const Drawer: ({ children, open, onDrawerClose, overlayClose, headerIcon, iconAlignment, }: DrawerProps) => React.ReactElement;
+declare const Drawer: ({ children, open, onDrawerClose, overlayClose, align, headerIcon, iconAlignment, anchorEl, }: DrawerProps) => React.ReactElement;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

package/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,MAAM,gFAOT,WAAW,KAAG,MAAM,YAqBtB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAMzE,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,MAAM,iGAST,WAAW,KAAG,MAAM,YAmEtB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Drawer/examples/AttachedDrawer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SimpleDrawerProps {
+    children: React.ReactElement;
+    open?: boolean;
+    align?: 'left' | 'right';
+    iconAlignment?: 'left' | 'right';
+}
+declare const SimpleDrawer: ({ children, open, align, iconAlignment, }: SimpleDrawerProps) => React.ReactElement;
+export default SimpleDrawer;
+//# sourceMappingURL=AttachedDrawer.d.ts.map

package/Drawer/examples/AttachedDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachedDrawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/examples/AttachedDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC;AAED,QAAA,MAAM,YAAY,8CAKf,iBAAiB,KAAG,MAAM,YAqD5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/Drawer/examples/SimpleDrawer.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 export interface SimpleDrawerProps {
     children: React.ReactElement;
     open?: boolean;
-    iconAlignment?: string;
+    align?: 'left' | 'right';
+    iconAlignment?: 'left' | 'right';
 }
-declare const SimpleDrawer: ({ children, open, iconAlignment, }: SimpleDrawerProps) => React.ReactElement;
+declare const SimpleDrawer: ({ children, open, align, iconAlignment, }: SimpleDrawerProps) => React.ReactElement;
 export default SimpleDrawer;
 //# sourceMappingURL=SimpleDrawer.d.ts.map

package/Drawer/examples/SimpleDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleDrawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/examples/SimpleDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,uCAIf,iBAAiB,KAAG,MAAM,YAsB5B,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SimpleDrawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/examples/SimpleDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC;AAED,QAAA,MAAM,YAAY,8CAKf,iBAAiB,KAAG,MAAM,YAuB5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/index.es.js

@@ -46239,10 +46239,39 @@ var Breadcrumb = 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.createElement(ts, null) : _b, _c = _a.iconAlignment, iconAlignment = _c === void 0 ? 'right' : _c;
-    return (e.createElement(e.Fragment, null,
-        e.createElement("div", { className: classNames('ods-overlay', open && 'ods-overlay--open'), "aria-hidden": "true", onClick: overlayClose }),
-        e.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.createElement(ts, null) : _c, _d = _a.iconAlignment, iconAlignment = _d === void 0 ? 'right' : _d, anchorEl = _a.anchorEl;
+    var drawerRef = useRef(null);
+    var getAnchorPosition = 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 = 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]);
+    useEffect(function () {
+        attachDrawer();
+    }, [anchorEl, drawerRef, attachDrawer]);
+    return (e.createElement("div", { className: classNames('ods-overlay', open && 'ods-overlay--open'), "aria-hidden": "true", onClick: overlayClose, ref: drawerRef },
+        e.createElement("div", { className: classNames('ods-drawer', open && 'ods-drawer--open', "ods-drawer--".concat(align)) },
             e.createElement("div", { className: classNames('ods-drawer__content--header', "ods-drawer__content--header--".concat(iconAlignment)) },
                 e.createElement(Button$1, { type: "button", onClick: onDrawerClose }, headerIcon)),
             children)));