@eeacms/volto-eea-design-system 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -4,8 +4,20 @@ 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).
 
+#### [0.7.2](https://github.com/eea/volto-eea-design-system/compare/0.7.1...0.7.2)
+
+- Search input focus [`#215`](https://github.com/eea/volto-eea-design-system/pull/215)
+- Make cypress tests work with both slate and draft selectors [`4d8e5b1`](https://github.com/eea/volto-eea-design-system/commit/4d8e5b1d7719637a46eac8232891fc5ed1f51b6f)
+- Autobuild of docusaurus docs [`580af5b`](https://github.com/eea/volto-eea-design-system/commit/580af5b9d1791804239db8bd40f740d7fafc8a2a)
+- fix(contentBox): z-index of content hidden by bg when using content-box-inner [`c5a7dac`](https://github.com/eea/volto-eea-design-system/commit/c5a7dac923d648d8fe9c9a9cbb8001969d32aea2)
+- Autobuild of docusaurus docs [`2438b3e`](https://github.com/eea/volto-eea-design-system/commit/2438b3ef8035ffa2ad50c0d36bfac281fe7e5d68)
+- Set focus on search input field in the popup on click [`d12c051`](https://github.com/eea/volto-eea-design-system/commit/d12c05106d9b95df1885ffa12cb284a0e50e0dfd)
+
 #### [0.7.1](https://github.com/eea/volto-eea-design-system/compare/0.7.0...0.7.1)
 
+> 1 August 2022
+
+- Release [`#214`](https://github.com/eea/volto-eea-design-system/pull/214)
 - Replace useLayoutEffect with useEffect, less notifications [`#213`](https://github.com/eea/volto-eea-design-system/pull/213)
 - Autobuild of docusaurus docs [`d763e15`](https://github.com/eea/volto-eea-design-system/commit/d763e15196988c7224fd79be9cbab1034caa0920)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Header/Header.jsx

@@ -101,6 +101,7 @@ const Main = ({
   const [menuIsActive, setMenuIsActive] = React.useState(false);
   const [searchIsActive, setSearchIsActive] = React.useState(false);
   const [burger, setBurger] = React.useState('');
+  const searchInputRef = React.useRef(null);
 
   React.useEffect(() => {
     setMenuIsActive(false);
@@ -112,6 +113,12 @@ const Main = ({
     }
   }, [pathname]);
 
+  React.useEffect(() => {
+    if (searchIsActive) {
+      searchInputRef.current && searchInputRef.current.focus();
+    }
+  }, [searchIsActive]);
+
   const searchOnClick = (e, x) => {
     if (menuIsActive === true) {
       setBurger('');
@@ -237,6 +244,7 @@ const Main = ({
       {searchIsActive && (
         <HeaderSearchPopUp
           onClose={searchOnClick}
+          searchInputRef={searchInputRef}
           triggerRefs={[searchButtonRef]}
         />
       )}

package/src/ui/Header/HeaderSearchPopUp.js

@@ -3,7 +3,7 @@ import { Container, Input } from 'semantic-ui-react';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
+function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
   const nodeRef = React.useRef();
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
@@ -13,6 +13,7 @@ function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
       <Container>
         <div className="wrapper">
           <Input
+            ref={searchInputRef}
             className="search"
             icon={{ className: 'ri-search-line', link: true }}
             placeholder="Search..."

package/theme/themes/eea/extras/contentBox.less

@@ -27,6 +27,8 @@
   .content-box-inner {
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
+    position: relative;
+    z-index: 1;
   }
 
   &.primary {