@canonical/react-components 0.37.6 → 0.37.7

package/dist/components/Navigation/NavigationMenu/NavigationMenu.js

@@ -65,24 +65,20 @@ var NavigationMenu = function NavigationMenu(_ref) {
   var closeMenu = (0, _react.useCallback)(function () {
     return setIsOpen(false);
   }, [setIsOpen]);
-
-  var _useClickOutside = (0, _hooks.useClickOutside)(closeMenu),
-      _useClickOutside2 = _slicedToArray(_useClickOutside, 2),
-      menuRef = _useClickOutside2[0],
-      menuId = _useClickOutside2[1];
-
+  var menuRef = (0, _hooks.useClickOutside)(closeMenu);
+  var menuId = (0, _hooks.useId)();
   return /*#__PURE__*/_react.default.createElement("li", _extends({}, props, {
     className: (0, _classnames.default)(props.className, "p-navigation__item--dropdown-toggle", {
       "is-active": isOpen
-    })
+    }),
+    ref: menuRef
   }), /*#__PURE__*/_react.default.createElement("button", {
     "aria-controls": menuId,
     className: "p-navigation__link u-no-margin--right",
     onClick: function onClick(evt) {
       evt.preventDefault();
       setIsOpen(!isOpen);
-    },
-    ref: menuRef
+    }
   }, label), /*#__PURE__*/_react.default.createElement("ul", {
     "aria-hidden": !isOpen,
     className: (0, _classnames.default)("p-navigation__dropdown", {

package/dist/components/Pagination/PaginationButton/PaginationButton.js

@@ -25,7 +25,8 @@ var PaginationButton = function PaginationButton(_ref) {
       "p-pagination__link--next": direction === "forward"
     }),
     disabled: disabled,
-    onClick: onClick
+    onClick: onClick,
+    type: "button"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "p-icon--chevron-down"
   }, label)));

package/dist/components/Pagination/PaginationItem/PaginationItem.js

@@ -23,7 +23,8 @@ var PaginationItem = function PaginationItem(_ref) {
       "is-active": isActive
     }),
     onClick: onClick,
-    "aria-current": isActive ? "page" : undefined
+    "aria-current": isActive ? "page" : undefined,
+    type: "button"
   }, number));
 };
 

package/dist/hooks/useClickOutside.d.ts

@@ -1,7 +1,6 @@
 import { MutableRefObject } from "react";
 /**
  * Handle clicks outside an element.
- * @returns An id and ref to pass to the element to handle clicks
- * outside of.
+ * @returns A ref to pass to the element to handle clicks outside of.
  */
-export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => [MutableRefObject<E>, string];
+export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => MutableRefObject<E>;

package/dist/hooks/useClickOutside.js

@@ -7,35 +7,31 @@ exports.useClickOutside = void 0;
 
 var _react = require("react");
 
-var _useId = require("./useId");
-
 /**
  * Handle clicks outside an element.
- * @returns An id and ref to pass to the element to handle clicks
- * outside of.
+ * @returns A ref to pass to the element to handle clicks outside of.
  */
 var useClickOutside = function useClickOutside(onClickOutside) {
-  var wrapperRef = (0, _react.useRef)(null);
-  var id = (0, _useId.useId)();
+  var ref = (0, _react.useRef)(null);
   var handleClickOutside = (0, _react.useCallback)(function (evt) {
-    var _evt$target, _wrapperRef$current;
+    var _evt$target, _ref$current;
 
     var target = evt.target; // The target might be something like an SVG node which doesn't provide
     // the class name as a string.
 
     var isValidTarget = typeof (evt === null || evt === void 0 ? void 0 : (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.className) === "string";
 
-    if (!isValidTarget || wrapperRef.current && !((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(target)) && target.id !== id) {
+    if (!isValidTarget || ref.current && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && ref.current !== target) {
       onClickOutside();
     }
-  }, [id, onClickOutside]);
+  }, [onClickOutside]);
   (0, _react.useEffect)(function () {
     document.addEventListener("click", handleClickOutside, false);
     return function () {
       return document.removeEventListener("click", handleClickOutside, false);
     };
   }, [handleClickOutside]);
-  return [wrapperRef, id];
+  return ref;
 };
 
 exports.useClickOutside = useClickOutside;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.6",
+  "version": "0.37.7",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -83,7 +83,7 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.7.0",
     "typescript": "4.7.4",
-    "vanilla-framework": "3.7.0",
+    "vanilla-framework": "3.8.1",
     "wait-on": "5.3.0",
     "webpack": "5.74.0"
   },
@@ -107,7 +107,7 @@
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "vanilla-framework": "3.7.0"
+    "vanilla-framework": "3.8.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",