@eeacms/volto-eea-website-theme 1.24.3 → 1.25.0

package/CHANGELOG.md

@@ -4,15 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.25.0](https://github.com/eea/volto-eea-website-theme/compare/1.24.3...1.25.0) - 12 December 2023
+
+#### :bug: Bug Fixes
+
+- fix: customize SidebarPopup volto component [Miu Razvan - [`0bdf736`](https://github.com/eea/volto-eea-website-theme/commit/0bdf736045509938ad562b26c8c87f040c7994e4)]
+
+#### :house: Documentation changes
+
+- docs: Update Sidbar customizations README [Alin Voinea - [`7a39ac0`](https://github.com/eea/volto-eea-website-theme/commit/7a39ac0b74aaa0e8f4d0d77d7b6718f297979228)]
+- docs: Add Sidebar customizations README [Alin Voinea - [`dd220bd`](https://github.com/eea/volto-eea-website-theme/commit/dd220bd4b977320860392a7637b441a41354936d)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.25.0 [Alin Voinea - [`ed2083b`](https://github.com/eea/volto-eea-website-theme/commit/ed2083b6dc1150c6d030f988fbfd94103777844e)]
 ### [1.24.3](https://github.com/eea/volto-eea-website-theme/compare/1.24.2...1.24.3) - 5 December 2023
 
 #### :rocket: New Features
 
 - feat: modify the password reset page - refs #259024 [ana-oprea - [`966e441`](https://github.com/eea/volto-eea-website-theme/commit/966e44163b43f8d41535617f0bb491210465751e)]
 
-#### :hammer_and_wrench: Others
-
-- Update Twitter logo in Share to section. [Ghiță Bizău - [`b9c7426`](https://github.com/eea/volto-eea-website-theme/commit/b9c7426cc29cf1a981603219cec9c780cd43973b)]
 ### [1.24.2](https://github.com/eea/volto-eea-website-theme/compare/1.24.1...1.24.2) - 4 December 2023
 
 #### :bug: Bug Fixes

package/README.md

@@ -25,6 +25,10 @@ EEA Website [Volto](https://github.com/plone/volto) Theme
 See [Docusaurus](https://eea.github.io/).
 See [Storybook](https://eea.github.io/eea-storybook/).
 
+## Volto customizations
+
+- `volto/components/manage/Sidebar/SidebarPopup` -> https://github.com/plone/volto/pull/5520
+
 ## Getting started
 
 ### Try volto-eea-website-theme with Docker
@@ -46,25 +50,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-eea-website-theme"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-eea-website-theme"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-eea-website-theme": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-eea-website-theme": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-website-theme
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-website-theme
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.24.3",
+  "version": "1.25.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/manage/Sidebar/README.md

@@ -0,0 +1,9 @@
+## SidebarPopup
+
+- https://github.com/plone/volto/pull/5520/files
+- refs #257682
+
+## ObjectBrowserNav
+
+- Allow previewing images when selecting them with the file picker
+- refs #152099

package/src/customizations/volto/components/manage/Sidebar/SidebarPopup.jsx

@@ -0,0 +1,82 @@
+// Check this https://github.com/plone/volto/pull/5520
+import React from 'react';
+import { Portal } from 'react-portal';
+import { CSSTransition } from 'react-transition-group';
+import PropTypes from 'prop-types';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+const DEFAULT_TIMEOUT = 500;
+
+const SidebarPopup = (props) => {
+  const { children, open, onClose, overlay } = props;
+
+  const asideElement = React.useRef();
+
+  const handleClickOutside = (e) => {
+    if (asideElement && doesNodeContainClick(asideElement.current, e)) return;
+    onClose();
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside, false);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  });
+
+  return (
+    <>
+      {overlay && (
+        <CSSTransition
+          in={open}
+          timeout={DEFAULT_TIMEOUT}
+          classNames="overlay-container"
+          unmountOnExit
+        >
+          <Portal node={document?.body}>
+            <div className="overlay-container"></div>
+          </Portal>
+        </CSSTransition>
+      )}
+      <CSSTransition
+        in={open}
+        timeout={DEFAULT_TIMEOUT}
+        classNames="sidebar-container"
+        unmountOnExit
+      >
+        <Portal>
+          <aside
+            id="test"
+            role="presentation"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+            }}
+            ref={asideElement}
+            key="sidebarpopup"
+            className="sidebar-container"
+            style={{ overflowY: 'auto' }}
+          >
+            {children}
+          </aside>
+        </Portal>
+      </CSSTransition>
+    </>
+  );
+};
+
+SidebarPopup.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  overlay: PropTypes.bool,
+};
+
+SidebarPopup.defaultProps = {
+  open: false,
+  onClose: () => {},
+  overlay: false,
+};
+
+export default SidebarPopup;