volto-dropdownmenu 2.4.2 → 3.0.0

package/CHANGELOG.md

@@ -4,10 +4,25 @@ 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).
 
+#### [v3.0.0](https://github.com/collective/volto-dropdownmenu/compare/v2.4.3...v3.0.0)
+
+- refactor: upgraded dependencies and babel config for volto 16 [`#27`](https://github.com/collective/volto-dropdownmenu/pull/27)
+- fix: a11y handle dropdown navigation [`67e97c1`](https://github.com/collective/volto-dropdownmenu/commit/67e97c1947e6a392e82c3104b5797a9c7680812f)
+- Release 2.4.3 [`3e30ff8`](https://github.com/collective/volto-dropdownmenu/commit/3e30ff8c11ff10c3408c72c3a39728714e76f5ba)
+- chore: rollback 2.4.3 release [`07b437b`](https://github.com/collective/volto-dropdownmenu/commit/07b437b365aaabc5a05e4d7adb7086f50186b3bc)
+
+#### [v2.4.3](https://github.com/collective/volto-dropdownmenu/compare/v2.4.2...v2.4.3)
+
+> 31 August 2022
+
+- fix: a11y handle dropdown navigation [`b8304c1`](https://github.com/collective/volto-dropdownmenu/commit/b8304c1990698e0c957679edadeb58a18ffc539d)
+- Release 2.4.3 [`b0f92e7`](https://github.com/collective/volto-dropdownmenu/commit/b0f92e7af65952ae5bcff29bde97c3edb9edf6af)
+
 #### [v2.4.2](https://github.com/collective/volto-dropdownmenu/compare/v2.4.1...v2.4.2)
 
 > 25 May 2022
 
+- Release 2.4.2 [`0cb2f7c`](https://github.com/collective/volto-dropdownmenu/commit/0cb2f7c2faf7735f44e9f37764c821f7b7ddd8b0)
 - feat: added mobile-menu-opend class to body when mobile menu is opened [`659960c`](https://github.com/collective/volto-dropdownmenu/commit/659960c07782af2b0fe7d0686029bfea2ee0bac2)
 
 #### [v2.4.1](https://github.com/collective/volto-dropdownmenu/compare/v2.4.0...v2.4.1)

package/README.md

@@ -1,6 +1,6 @@
 # volto-dropdownmenu
 
-Volto addon for a customizable dropdown menu.  
+Volto addon for a customizable dropdown menu.
 Intended to be used with [collective.volto.dropdownmenu](https://github.com/collective/collective.volto.dropdownmenu)
 
 To be used with mrs-developer, see [Volto docs](https://docs.voltocms.com/customizing/add-ons/) for further usage informations.
@@ -9,7 +9,9 @@ Created with [voltocli](https://github.com/nzambello/voltocli).
 
 ## Usage
 
-> If you're using Volto < 12, then use [v1.3.0](https://github.com/collective/volto-dropdownmenu/tree/v1.3.0)
+> If you are using Volto < 16, then use [v2.4.3](https://github.com/collective/volto-dropdownmenu/tree/v2.4.3)
+>
+> If you are using Volto < 12, then use [v1.3.0](https://github.com/collective/volto-dropdownmenu/tree/v1.3.0)
 
 Simply load the addon in your project, then edit the configuration in `/controlpanel/dropdown-menu-settings`.
 Example configuration to be saved in Plone [here](./menuConfigurationExample.json).

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
-  const presets = ['razzle/babel'];
+  const presets = ['razzle'];
   const plugins = [
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "volto-dropdownmenu",
-  "version": "2.4.2",
+  "version": "3.0.0",
   "description": "Volto addon for a customizable dropdown menu",
   "main": "src/index.js",
   "repository": "https://github.com/collective/volto-dropdownmenu.git",
   "author": "collective",
   "license": "MIT",
   "devDependencies": {
-    "release-it": "*"
+    "@plone/scripts": "^2.0.0",
+    "release-it": "^14.10.1"
   },
   "scripts": {
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
     "release": "release-it"
   },
   "dependencies": {
-    "react-outside-click-handler": "1.3.0",
-    "@plone/scripts": "*"
+    "react-outside-click-handler": "1.3.0"
   },
   "peerDependencies": {
-    "@plone/volto": ">=14.0.0"
+    "@plone/volto": ">=16.0.0-alpha.38"
   }
 }

package/src/components/DropdownMenu.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import { Segment, Container, Icon, Grid, Button } from 'semantic-ui-react';
@@ -48,6 +48,24 @@ const DropdownMenu = ({ menu, open = false, closeMenu }) => {
     }
   }
 
+  const lastLinkEventListener = (e) => {
+    if (e.code === 'Tab') {
+      document
+        .querySelector(
+          '.dropdown-menu-wrapper.open button.dropdown-close-button',
+        )
+        .focus();
+    }
+  };
+
+  useEffect(() => {
+    const links = document.querySelectorAll('.dropdown-menu-wrapper.open a');
+    const lastLink = links[links.length - 1];
+    if (lastLink) {
+      lastLink.addEventListener('keydown', lastLinkEventListener);
+    }
+  });
+
   return (
     <div
       className={cx('dropdown-menu-wrapper', {