@woosmap/ui 2.55.0 → 2.56.0

package/package.json

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

package/src/components/Dropdown/Dropdown.js

@@ -10,17 +10,13 @@ function mapChildrenWithProps(children, childrenRefs, closeCb) {
     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,
-                    ref:
-                        !child.type.prototype || (child.type.prototype && child.type.prototype.render)
-                            ? (elem) => {
-                                  // eslint-disable-next-line no-param-reassign
-                                  childrenRefs[index] = elem;
-                              }
-                            : undefined,
+                    ref: (elem) => {
+                        // eslint-disable-next-line no-param-reassign
+                        childrenRefs[index] = elem;
+                    },
                 });
             }
             return child;
@@ -101,7 +97,7 @@ class DropdownMenuSection extends Component {
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
         return (
             <div className="dropdown__menu__section">
-                {title && <div className="dropdown__menu__section__title">{title}</div>}
+                {title && <div className="dropdown__menu__item dropdown__menu__item__title">{title}</div>}
                 <ul {...rest}>{childrenWithProps}</ul>
             </div>
         );
@@ -138,7 +134,7 @@ class DropdownItem extends Component {
     render() {
         const { children, closeCb, testId, ...rest } = this.props;
         return (
-            <li className={cl('dropdown__item')} data-testid={testId} {...rest}>
+            <li className={cl('dropdown__menu__item')} data-testid={testId} {...rest}>
                 {children}
             </li>
         );
@@ -170,7 +166,7 @@ class DropdownButtonItem extends Component {
     render() {
         const { onClick, btnIcon, btnLabel, isImportant, closeCb, ...rest } = this.props;
         return (
-            <li className={cl('dropdown__item')}>
+            <li className={cl('dropdown__menu__item')}>
                 <Button
                     className={cl({ 'btn--dropdown-item--important': isImportant })}
                     type="dropdown-item"
@@ -224,7 +220,7 @@ class DropdownConfirmButtonItem extends Component {
         const { onConfirm, btnIcon, btnLabel, closeCb, confirmLabel, isImportant, placement, ...rest } = this.props;
         // onConfirm and closeCb are put in this list to remove them from ...rest.
         return (
-            <li className={cl('dropdown__item')}>
+            <li className={cl('dropdown__menu__item')}>
                 <ConfirmationPopover
                     ref={this.confirmRef}
                     text={confirmLabel}
@@ -353,7 +349,7 @@ class Dropdown extends Component {
 
         return (
             <div
-                ref={openOnMouseEnter ? null : this.clickOutsideRef}
+                ref={this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
                 onMouseEnter={this.onMouseEnter}

package/src/components/Dropdown/Dropdown.styl

@@ -3,7 +3,7 @@
 	display inline-block
 	&__separator
 		width 100%
-		border-bottom .1rem solid $secondary-light
+		border-bottom .1rem solid $borderColor
 	&__menu
 		box()
 		display none
@@ -51,30 +51,31 @@
 			left auto
 
 
+		&__item
+			flexMiddle()
+			ellipsis()
+			height $buttonHeight + .6rem
+			.popover__child
+				width 100%
+			> :not(.btn):not(.popover__child)
+				flexMiddle()
+				ellipsis()
+				height $buttonHeight + .6rem
+				padding 0 $padding
+				width 100%
+				cursor default
+				&:hover
+					background-color $primary10
+			&:first-child
+				> *
+					border-radius $borderRadius $borderRadius 0 0
+			&:last-child
+				> *
+					border-radius 0 0 $borderRadius $borderRadius
+			&__title
+				padding 0 $padding 0 $padding
 	&.open
 		.dropdown__menu
 			display block
 			&--section
-				display flex
-
-	&__item
-		flexMiddle()
-		ellipsis()
-		height $buttonHeight + .6rem
-		.popover__child
-			width 100%
-		> :not(.btn):not(.popover__child)
-			flexMiddle()
-			ellipsis()
-			height $buttonHeight + .6rem
-			padding 0 $padding
-			width 100%
-			cursor default
-			&:hover
-				background-color $primary10
-		&:first-child
-			> *
-				border-radius $borderRadius $borderRadius 0 0
-		&:last-child
-			> *
-				border-radius 0 0 $borderRadius $borderRadius
+				display flex