@woosmap/ui 3.136.0 → 3.136.3

package/.idea/encodings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="PROJECT" charset="UTF-8" />
+  </component>
+</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,18 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="4">
+            <item index="0" class="java.lang.String" itemvalue="Fabric" />
+            <item index="1" class="java.lang.String" itemvalue="PyYAML" />
+            <item index="2" class="java.lang.String" itemvalue="Jinja2" />
+            <item index="3" class="java.lang.String" itemvalue="github3.py" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

package/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

package/.idea/ui.iml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
+      </list>
+    </option>
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.136.0",
+  "version": "3.136.3",
   "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()

package/src/components/Modal/Modal.js

@@ -21,9 +21,12 @@ class Modal extends Component {
         this.handleEscFunction('add');
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         const { isLoading } = this.state;
-        const { hasErrors } = this.props;
+        const { closesWithEscape: prevClosesWithEscape } = prevProps;
+        const { hasErrors, closesWithEscape } = this.props;
+        if (closesWithEscape && !prevClosesWithEscape) this.handleEscFunction('add');
+        else if (!closesWithEscape && prevClosesWithEscape) this.handleEscFunction();
         if (hasErrors && isLoading) {
             this.setLoading(false);
         }
@@ -43,10 +46,8 @@ class Modal extends Component {
 
     handleEscFunction = (key) => {
         const { closesWithEscape } = this.props;
-        if (closesWithEscape) {
-            if (key === 'add') document.addEventListener('keydown', this.escFunction, false);
-            else document.removeEventListener('keydown', this.escFunction, false);
-        }
+        if (closesWithEscape && key === 'add') document.addEventListener('keydown', this.escFunction);
+        else document.removeEventListener('keydown', this.escFunction);
     };
 
     escFunction = (event) => {

package/src/components/Modal/Modal.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import Modal from './Modal';
 import ConfirmationModal from './ConfirmationModal';
 import Button from '../Button/Button';
@@ -83,11 +83,13 @@ export const ModalConfirmation = TemplateConfirmationModal.bind({});
 Default.args = {};
 
 const TemplateEscapeModal = () => {
-    const modalRef = React.createRef();
+    const [escEnabled, setEscEnabled] = useState(true);
+    const modalRef = useRef(null);
     return (
         <div style={{ paddingLeft: '50px' }}>
-            <Button onClick={() => modalRef.current.open()} label="Open modal" />
-            <Modal ref={modalRef} closesWithEscape title="My modal">
+            <Button onClick={() => setEscEnabled(!escEnabled)} label="Toggle escape" />
+            <Button onClick={() => modalRef.current?.open()} label="Open modal" />
+            <Modal ref={modalRef} closesWithEscape={escEnabled} title="My modal">
                 content
             </Modal>
         </div>

package/src/components/Modal/Modal.test.js

@@ -57,7 +57,7 @@ it('is hidden after clicking validate', () => {
 it('is closing after escaping if it is set to be closed with it', () => {
     const modalRef = React.createRef();
     const closeCb = jest.fn();
-    render(
+    const { rerender } = render(
         <Modal ref={modalRef} closesWithEscape closeCb={closeCb}>
             content
         </Modal>
@@ -68,6 +68,30 @@ it('is closing after escaping if it is set to be closed with it', () => {
     expect(closeCb).not.toHaveBeenCalled();
     fireEvent.keyDown(document, { keyCode: 27 });
     expect(closeCb).toHaveBeenCalled();
+    closeCb.mockReset();
+
+    rerender(
+        <Modal ref={modalRef} closesWithEscape={false} closeCb={closeCb}>
+            content
+        </Modal>
+    );
+    act(() => {
+        modalRef.current.open();
+    });
+    fireEvent.keyDown(document, { keyCode: 27 });
+    expect(closeCb).not.toHaveBeenCalled();
+    closeCb.mockReset();
+
+    rerender(
+        <Modal ref={modalRef} closesWithEscape closeCb={closeCb}>
+            content
+        </Modal>
+    );
+    act(() => {
+        modalRef.current.open();
+    });
+    fireEvent.keyDown(document, { keyCode: 27 });
+    expect(closeCb).toHaveBeenCalled();
 });
 
 it('is closing after click outside if it is set to bet closed with it', () => {