pcln-menu - npm Package Compare versions

Comparing version 4.0.0-beta.0 to 4.0.0-beta.1

dist/cjs/MenuItem/MenuItem.js

@@ -39,9 +39,9 @@ "use strict";
 
-function MenuItem(_ref) {
+var MenuItem = /*#__PURE__*/_react["default"].forwardRef(function MenuItem(_ref, ref) {
   var id = _ref.id,
       selected = _ref.selected,
       children = _ref.children,
+      handleClose = _ref.handleClose,
       onClick = _ref.onClick,
-      handleClose = _ref.handleClose,
-      props = _objectWithoutProperties(_ref, ["id", "selected", "children", "onClick", "handleClose"]);
+      props = _objectWithoutProperties(_ref, ["id", "selected", "children", "handleClose", "onClick"]);
 
@@ -55,5 +55,5 @@ var handleClick = function handleClick() {
     id: id,
+    ref: ref,
     role: "option",
     "aria-selected": selected,
-    autoFocus: selected,
     selected: selected,
@@ -68,12 +68,12 @@ onClick: handleClick
   }));
-}
+});
 
 MenuItem.displayName = 'MenuItem';
 MenuItem.propTypes = {
-  className: _propTypes["default"].string,
+  id: _propTypes["default"].string,
   color: _propTypes["default"].string,
   selected: _propTypes["default"].bool,
   children: _propTypes["default"].node,
-  onClick: _propTypes["default"].func,
-  handleClose: _propTypes["default"].func
+  handleClose: _propTypes["default"].func,
+  onClick: _propTypes["default"].func
 };
@@ -80,0 +80,0 @@ MenuItem.defaultProps = {

dist/cjs/MenuList/MenuList.js

@@ -27,3 +27,3 @@ "use strict";
   componentId: "enbv9e-0"
-})(["font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:scroll;height:", "px;outline:none;& > *{margin-right:4px;margin-bottom:4px;width:", ";}"], function (props) {
+})(["font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:scroll;height:", "px;& > *{margin-right:4px;margin-bottom:4px;width:", ";}"], function (props) {
   return props.height || 300;
@@ -55,7 +55,15 @@ }, function (props) {
   var listRef = (0, _react.useRef)(null);
+  var currentItemRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _currentItemRef$curre;
 
+    currentItemRef === null || currentItemRef === void 0 ? void 0 : (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.focus();
+  }, []);
+
   function handleKeyDown(evt) {
+    var _list$ownerDocument;
+
     var list = listRef.current;
     var key = evt.key;
-    var currentFocus = (list && list.ownerDocument || document).activeElement;
+    var currentFocus = list === null || list === void 0 ? void 0 : (_list$ownerDocument = list.ownerDocument) === null || _list$ownerDocument === void 0 ? void 0 : _list$ownerDocument.activeElement;
 
@@ -85,3 +93,4 @@ if (key === 'ArrowDown') {
       color: child.props.color || color,
-      handleClose: handleClose
+      handleClose: handleClose,
+      ref: child.props.selected ? currentItemRef : null
     });
@@ -96,3 +105,4 @@ }));
   columns: _propTypes["default"].number,
-  height: _propTypes["default"].number
+  height: _propTypes["default"].number,
+  handleClose: _propTypes["default"].func
 };
@@ -99,0 +109,0 @@ MenuList.defaultProps = {

dist/es/MenuItem/MenuItem.js

@@ -18,10 +18,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 });
-
-function MenuItem(_ref) {
+var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, ref) {
   var id = _ref.id,
       selected = _ref.selected,
       children = _ref.children,
+      handleClose = _ref.handleClose,
       onClick = _ref.onClick,
-      handleClose = _ref.handleClose,
-      props = _objectWithoutProperties(_ref, ["id", "selected", "children", "onClick", "handleClose"]);
+      props = _objectWithoutProperties(_ref, ["id", "selected", "children", "handleClose", "onClick"]);
 
@@ -35,5 +34,5 @@ var handleClick = function handleClick() {
     id: id,
+    ref: ref,
     role: "option",
     "aria-selected": selected,
-    autoFocus: selected,
     selected: selected,
@@ -48,12 +47,11 @@ onClick: handleClick
   }));
-}
-
+});
 MenuItem.displayName = 'MenuItem';
 MenuItem.propTypes = {
-  className: PropTypes.string,
+  id: PropTypes.string,
   color: PropTypes.string,
   selected: PropTypes.bool,
   children: PropTypes.node,
-  onClick: PropTypes.func,
-  handleClose: PropTypes.func
+  handleClose: PropTypes.func,
+  onClick: PropTypes.func
 };
@@ -60,0 +58,0 @@ MenuItem.defaultProps = {

dist/es/MenuList/MenuList.js

@@ -1,2 +0,2 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -8,3 +8,3 @@ import styled from 'styled-components';
   componentId: "enbv9e-0"
-})(["font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:scroll;height:", "px;outline:none;& > *{margin-right:4px;margin-bottom:4px;width:", ";}"], function (props) {
+})(["font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:scroll;height:", "px;& > *{margin-right:4px;margin-bottom:4px;width:", ";}"], function (props) {
   return props.height || 300;
@@ -36,7 +36,15 @@ }, function (props) {
   var listRef = useRef(null);
+  var currentItemRef = useRef(null);
+  useEffect(function () {
+    var _currentItemRef$curre;
 
+    currentItemRef === null || currentItemRef === void 0 ? void 0 : (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.focus();
+  }, []);
+
   function handleKeyDown(evt) {
+    var _list$ownerDocument;
+
     var list = listRef.current;
     var key = evt.key;
-    var currentFocus = (list && list.ownerDocument || document).activeElement;
+    var currentFocus = list === null || list === void 0 ? void 0 : (_list$ownerDocument = list.ownerDocument) === null || _list$ownerDocument === void 0 ? void 0 : _list$ownerDocument.activeElement;
 
@@ -66,3 +74,4 @@ if (key === 'ArrowDown') {
       color: child.props.color || color,
-      handleClose: handleClose
+      handleClose: handleClose,
+      ref: child.props.selected ? currentItemRef : null
     });
@@ -77,3 +86,4 @@ }));
   columns: PropTypes.number,
-  height: PropTypes.number
+  height: PropTypes.number,
+  handleClose: PropTypes.func
 };
@@ -80,0 +90,0 @@ MenuList.defaultProps = {

dist/esm/MenuItem/MenuItem.js

@@ -18,10 +18,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 });
-
-function MenuItem(_ref) {
+var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, ref) {
   var id = _ref.id,
       selected = _ref.selected,
       children = _ref.children,
+      handleClose = _ref.handleClose,
       onClick = _ref.onClick,
-      handleClose = _ref.handleClose,
-      props = _objectWithoutProperties(_ref, ["id", "selected", "children", "onClick", "handleClose"]);
+      props = _objectWithoutProperties(_ref, ["id", "selected", "children", "handleClose", "onClick"]);
 
@@ -35,5 +34,5 @@ var handleClick = function handleClick() {
     id: id,
+    ref: ref,
     role: "option",
     "aria-selected": selected,
-    autoFocus: selected,
     selected: selected,
@@ -48,12 +47,11 @@ onClick: handleClick
   }));
-}
-
+});
 MenuItem.displayName = 'MenuItem';
 MenuItem.propTypes = {
-  className: PropTypes.string,
+  id: PropTypes.string,
   color: PropTypes.string,
   selected: PropTypes.bool,
   children: PropTypes.node,
-  onClick: PropTypes.func,
-  handleClose: PropTypes.func
+  handleClose: PropTypes.func,
+  onClick: PropTypes.func
 };
@@ -60,0 +58,0 @@ MenuItem.defaultProps = {

dist/esm/MenuList/MenuList.js

@@ -1,2 +0,2 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -8,3 +8,3 @@ import styled from 'styled-components';
   componentId: "enbv9e-0"
-})(["font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:scroll;height:", "px;outline:none;& > *{margin-right:4px;margin-bottom:4px;width:", ";}"], function (props) {
+})(["font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;overflow-y:scroll;height:", "px;& > *{margin-right:4px;margin-bottom:4px;width:", ";}"], function (props) {
   return props.height || 300;
@@ -36,7 +36,15 @@ }, function (props) {
   var listRef = useRef(null);
+  var currentItemRef = useRef(null);
+  useEffect(function () {
+    var _currentItemRef$curre;
 
+    currentItemRef === null || currentItemRef === void 0 ? void 0 : (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.focus();
+  }, []);
+
   function handleKeyDown(evt) {
+    var _list$ownerDocument;
+
     var list = listRef.current;
     var key = evt.key;
-    var currentFocus = (list && list.ownerDocument || document).activeElement;
+    var currentFocus = list === null || list === void 0 ? void 0 : (_list$ownerDocument = list.ownerDocument) === null || _list$ownerDocument === void 0 ? void 0 : _list$ownerDocument.activeElement;
 
@@ -66,3 +74,4 @@ if (key === 'ArrowDown') {
       color: child.props.color || color,
-      handleClose: handleClose
+      handleClose: handleClose,
+      ref: child.props.selected ? currentItemRef : null
     });
@@ -77,3 +86,4 @@ }));
   columns: PropTypes.number,
-  height: PropTypes.number
+  height: PropTypes.number,
+  handleClose: PropTypes.func
 };
@@ -80,0 +90,0 @@ MenuList.defaultProps = {

package.json

 {
   "name": "pcln-menu",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "main": "dist/cjs/index.js",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35344

increased by5.27%

Lines of code

695

increased by3.58%

No dependency changes