@woosmap/ui 3.136.0 → 3.138.0

package/package.json

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

package/src/components/CopyClipboardButton/CopyClipboardButton.js

@@ -16,10 +16,12 @@ export default class CopyClipboardButton extends Component {
         }
     }
 
-    copy = () => {
-        const { text, getText, copyCallback } = this.props;
+    copy = (e) => {
+        const { text, getText, copyCallback, stopPropagation } = this.props;
         const { copied } = this.state;
 
+        if (stopPropagation) e.stopPropagation();
+
         const textToCopy = text || (getText ? getText() : null);
 
         if (textToCopy !== null && copy(textToCopy) && !copied) {
@@ -29,13 +31,27 @@ export default class CopyClipboardButton extends Component {
     };
 
     render() {
-        const { type, noLabel, label, copiedLabel, copiedIcon, icon, getText, testId, copyCallback, ...rest } =
-            this.props;
+        const {
+            type,
+            noLabel,
+            label: propsLabel,
+            copiedLabel,
+            copiedIcon,
+            icon,
+            getText,
+            testId,
+            copyCallback,
+            stopPropagation,
+            ...rest
+        } = this.props;
         const { copied } = this.state;
+        let label;
+        if (noLabel) label = '';
+        else label = copied && copiedLabel ? copiedLabel : propsLabel;
         return (
             <Button
                 type={type}
-                label={copied && copiedLabel ? copiedLabel : label}
+                label={label}
                 icon={copied && copiedIcon ? copiedIcon : icon}
                 onClick={this.copy}
                 {...rest}
@@ -56,6 +72,7 @@ CopyClipboardButton.defaultProps = {
     getText: null,
     testId: 'copy-clipboard-button',
     copyCallback: () => {},
+    stopPropagation: false,
 };
 
 CopyClipboardButton.propTypes = {
@@ -69,4 +86,5 @@ CopyClipboardButton.propTypes = {
     copiedIcon: PropTypes.string,
     icon: PropTypes.string,
     copyCallback: PropTypes.func,
+    stopPropagation: PropTypes.bool,
 };

package/src/components/CopyClipboardButton/CopyToClipboard.stories.js

@@ -10,6 +10,7 @@ export default Story;
 const Template = () => (
     <div className="flex-column mbib">
         <CopyClipboardButton type="primary" text="Text to be copied" />
+        <CopyClipboardButton type="primary" text="Text to be copied" noLabel />
         <CopyClipboardButton
             label="withCallback"
             copiedLabel={null}

package/src/components/CopyClipboardButton/CopyToClipboard.test.js

@@ -10,6 +10,11 @@ it('renders a CopyClipboardButton component ', () => {
     expect(getByTestId('copy-clipboard-button')).toHaveClass('btn');
 });
 
+it('renders a CopyClipboardButton component without label', () => {
+    const { getByTestId } = render(<CopyClipboardButton text="Text" noLabel />);
+    expect(getByTestId('copy-clipboard-button')).toHaveClass('btn--no-label');
+});
+
 it('copies the content', () => {
     const { container } = render(<CopyClipboardButton text="Text to be copied" />);
     document.execCommand = jest.fn();

package/src/components/Dropdown/Dropdown.js

@@ -42,45 +42,21 @@ class DropdownMenu extends Component {
     constructor(props) {
         super(props);
         this.childrenRefs = {};
-        this.menuRef = React.createRef();
-        this.state = {
-            directionInBounds: props.direction,
-        };
     }
 
-    componentDidUpdate(_, prevState) {
-        if (this.menuRef.current) {
-            const { directionInBounds } = this.state;
-            const { directionInBounds: prevDirectionInBounds } = prevState;
-            const { top, bottom } = this.menuRef.current.getBoundingClientRect();
-            const { innerHeight } = window;
-            if (innerHeight > top && !prevDirectionInBounds.includes('s')) {
-                this.setDirectionInBounds(directionInBounds.replace('n', 's'));
-            }
-            if (innerHeight < bottom && !prevDirectionInBounds.includes('n')) {
-                this.setDirectionInBounds(directionInBounds.replace('s', 'n'));
-            }
-        }
-    }
-
-    setDirectionInBounds = (direction) => {
-        this.setState({ directionInBounds: direction });
-    };
-
     close = () => {
         closeChildren(this.childrenRefs);
     };
 
     render() {
         const { direction, children, closeCb, onMouseEnter, onMouseLeave, testId, isSection, ...rest } = this.props;
-        const { directionInBounds } = this.state;
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         if (isSection) {
             return (
-                <div className="dropdown__container" ref={this.menuRef}>
+                <div className="dropdown__container">
                     <div
                         role="menu"
-                        className={cl('dropdown__menu', directionInBounds, 'dropdown__menu--section')}
+                        className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
                         data-testid={testId}
                         tabIndex="-1"
                         onMouseEnter={onMouseEnter}
@@ -95,12 +71,11 @@ class DropdownMenu extends Component {
         return (
             <ul
                 role="menu"
-                className={cl('dropdown__menu', directionInBounds)}
+                className={cl('dropdown__menu', direction)}
                 data-testid={testId}
                 {...rest}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
-                ref={this.menuRef}
             >
                 {childrenWithProps}
             </ul>
@@ -124,7 +99,7 @@ DropdownMenu.propTypes = {
     onMouseLeave: PropTypes.func,
     testId: PropTypes.string,
     isSection: PropTypes.bool,
-    direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w', 'nw']),
+    direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
 };
 
 class DropdownMenuSection extends Component {

package/src/components/Dropdown/Dropdown.styl

@@ -41,13 +41,6 @@
 			left 0
 			margin-bottom .3rem
 
-		&.nw
-			top auto
-			bottom 100%
-			right 0
-			left auto
-			margin-bottom .3rem
-
 		&.s
 			right 50%
 			left auto
@@ -57,10 +50,6 @@
 			right 0
 			left auto
 
-		&.se
-			right auto
-			left 0
-
 
 		&__item
 			flexMiddle()