@woosmap/ui 3.28.0 → 3.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Dropdown/Dropdown.js

@@ -6,14 +6,14 @@ import Button from '../Button/Button';
 import ConfirmationPopover from '../Popover/ConfirmationPopover';
 import withClickOutside from '../withClickOutside/withClickOutside';
 
-function mapChildrenWithProps(children, childrenRefs, closeCb) {
+function mapChildrenWithProps(children, childrenRefs, props) {
     if (children) {
         return React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
                 // only add ref to non functional components
                 return React.cloneElement(child, {
                     ...child.props,
-                    closeCb,
+                    ...props,
                     ref:
                         !child.type.prototype || (child.type.prototype && child.type.prototype.render)
                             ? (elem) => {
@@ -49,8 +49,8 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, testId, isSection, ...rest } = this.props;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        const { direction, children, closeCb, onMouseEnter, onMouseLeave, testId, isSection, ...rest } = this.props;
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         if (isSection) {
             return (
                 <div className="dropdown__container">
@@ -58,6 +58,9 @@ class DropdownMenu extends Component {
                         role="menu"
                         className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
                         data-testid={testId}
+                        tabIndex="-1"
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
                         {...rest}
                     >
                         {childrenWithProps}
@@ -66,7 +69,14 @@ class DropdownMenu extends Component {
             );
         }
         return (
-            <ul role="menu" className={cl('dropdown__menu', direction)} data-testid={testId} {...rest}>
+            <ul
+                role="menu"
+                className={cl('dropdown__menu', direction)}
+                data-testid={testId}
+                {...rest}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
                 {childrenWithProps}
             </ul>
         );
@@ -76,6 +86,8 @@ class DropdownMenu extends Component {
 DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
+    onMouseEnter: null,
+    onMouseLeave: null,
     testId: 'dropdown-menu',
     isSection: false,
 };
@@ -83,6 +95,8 @@ DropdownMenu.defaultProps = {
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     testId: PropTypes.string,
     isSection: PropTypes.bool,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
@@ -100,7 +114,7 @@ class DropdownMenuSection extends Component {
 
     render() {
         const { title, children, closeCb, ...rest } = this.props;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         return (
             <div className="dropdown__menu__section">
                 {title && <div className="dropdown__menu__item dropdown__menu__item__title">{title}</div>}
@@ -351,15 +365,17 @@ class Dropdown extends Component {
             ...rest
         } = this.props;
         const { open } = this.state;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, this.handleClickOutside);
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, {
+            closeCb: this.handleClickOutside,
+            onMouseEnter: this.onMouseEnter,
+            onMouseLeave: this.onMouseLeave,
+        });
 
         return (
             <div
                 ref={openOnMouseEnter ? null : this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
             >
                 <Button
                     disabled={disabled}
@@ -371,6 +387,8 @@ class Dropdown extends Component {
                     iconSize={btnFaceIconSize}
                     label={label}
                     testId={testId}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}
                 />
                 {childrenWithProps}
             </div>