@woosmap/ui 4.228.9 → 4.230.0

package/package.json

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

package/src/components/Button/Button.js

@@ -21,6 +21,7 @@ export default class Button extends Component {
             className,
             disabled,
             label,
+            ariaLabel,
             onClick,
             isLoading,
             active,
@@ -53,7 +54,7 @@ export default class Button extends Component {
             <button
                 ref={this.elementRef}
                 type={submitType ? 'submit' : 'button'}
-                aria-label={label}
+                aria-label={ariaLabel}
                 disabled={disabled}
                 onClick={isLoading || disabled ? undefined : onClick}
                 {...rest}
@@ -78,6 +79,7 @@ Button.defaultProps = {
     type: 'primary',
     className: '',
     label: '',
+    ariaLabel: null,
     icon: null,
     iconSize: 22,
     isLoading: false,
@@ -118,6 +120,7 @@ Button.propTypes = {
     isLoading: PropTypes.bool,
     active: PropTypes.bool,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     icon: PropTypes.string,
     iconSize: PropTypes.number,
     className: PropTypes.string,

package/src/components/Demo/DistanceDemo.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -27,28 +27,36 @@ it('render distance demo', () => {
 it('test transport button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('mode=driving&\\')).toBeVisible();
-    fireEvent.click(screen.getByAltText('Cycling'));
+    act(() => {
+        fireEvent.click(screen.getByAltText('Cycling'));
+    });
     expect(screen.getByText('mode=cycling&\\')).toBeVisible();
 });
 
 it('test metrics button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('units=metric&\\')).toBeVisible();
-    fireEvent.click(screen.getByLabelText('Imperial'));
+    act(() => {
+        fireEvent.click(screen.getByText('Imperial'));
+    });
     expect(screen.getByText('units=imperial&\\')).toBeVisible();
 });
 
 it('test method button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('method=distance&\\')).toBeVisible();
-    fireEvent.click(screen.getByLabelText('Fastest'));
+    act(() => {
+        fireEvent.click(screen.getByText('Fastest'));
+    });
     expect(screen.getByText('method=time&\\')).toBeVisible();
 });
 
 it('test language button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('language=en&\\')).toBeVisible();
-    fireEvent.click(screen.getByTitle('Italian'));
+    act(() => {
+        fireEvent.click(screen.getByTitle('Italian'));
+    });
     expect(screen.getByText('language=it&\\')).toBeVisible();
 });
 
@@ -56,7 +64,9 @@ it('test alternative route checkbox', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('alternatives=false"')).toBeVisible();
     const [checkbox] = screen.getByText('Alternative routes').parentElement.querySelectorAll('input');
-    fireEvent.click(checkbox);
+    act(() => {
+        fireEvent.click(checkbox);
+    });
     expect(screen.getByText('alternatives=true"')).toBeVisible();
 });
 

package/src/components/Demo/SkeletonDemo.test.js

@@ -35,7 +35,7 @@ it('calls navigator.clipboard.writeText function when click on copy button if if
             id="skeleton-test"
         />,
     );
-    fireEvent.click(screen.getByLabelText('Copy'));
+    fireEvent.click(screen.getByText('Copy'));
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
         'curl "https://api.woosmap.com/localities/autocomplete/?input=paris"',
     );
@@ -45,7 +45,7 @@ it('calls navigator.clipboard.writeText function when click on copy button if if
 it('calls copy exec command when click on copy button if navigator.clipboard not supported', () => {
     render(<SkeletonDemo noheader id="skeleton-test" />);
     document.execCommand = jest.fn();
-    fireEvent.click(screen.getByLabelText('Copy'));
+    fireEvent.click(screen.getByText('Copy'));
     expect(document.execCommand).toHaveBeenCalledWith('copy');
 });
 

package/src/components/Dropdown/Dropdown.js

@@ -370,6 +370,7 @@ class Dropdown extends Component {
             disabled,
             className,
             label,
+            ariaLabel,
             btnFace,
             btnSize,
             btnFaceIcon,
@@ -405,6 +406,7 @@ class Dropdown extends Component {
                         size={btnSize}
                         iconSize={btnFaceIconSize}
                         label={label}
+                        ariaLabel={ariaLabel}
                         testId={testId}
                         onMouseEnter={this.onMouseEnter}
                         onMouseLeave={this.onMouseLeave}
@@ -424,6 +426,7 @@ Dropdown.defaultProps = {
     disableCloseOutside: false,
     onDoubleClick: null,
     label: null,
+    ariaLabel: null,
     className: null,
     closeCb: null,
     openOnMouseEnter: false,
@@ -443,6 +446,7 @@ Dropdown.propTypes = {
     disableCloseOutside: PropTypes.bool,
     openOnMouseEnter: PropTypes.bool,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     className: PropTypes.string,

package/src/components/Dropdown/Dropdown.test.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { act } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
-import { act } from 'react-dom/test-utils';
 import Dropdown from './Dropdown';
 
 it('renders a Dropdown component ', () => {

package/src/components/DynamicTag/DynamicTag.test.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen, getByRole, fireEvent } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 import '@testing-library/jest-dom/extend-expect';
 
 import DynamicTag from './DynamicTag';

package/src/components/Input/Input.js

@@ -9,7 +9,7 @@ export default class Input extends Component {
         super(props);
         this.inputId = uniqueId();
         this.inputRef = React.createRef();
-        this.state = { showPassword: false, value: null };
+        this.state = { showPassword: false, value: '' };
     }
 
     componentDidMount() {
@@ -146,7 +146,7 @@ export default class Input extends Component {
                     onFocus,
                     onKeyDown: this.onKeyDown,
                     type: type === 'password' && showPassword ? 'text' : type,
-                    value: value !== undefined ? value : stateValue,
+                    value: value !== undefined ? value : stateValue || '',
                     size: length,
                     disabled,
                     onChange: this.onChange,
@@ -172,7 +172,7 @@ export default class Input extends Component {
                         <Icon
                             icon={showPassword ? 'eye-crossed-out' : 'eye'}
                             size={iconSize}
-                            className={{ showed: showPassword }}
+                            className={showPassword ? 'showed' : ''}
                         />
                     </span>
                 )}

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

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { act } from 'react-dom/test-utils';
 
 import Modal from './Modal';
 

package/src/components/Panel/Panel.test.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { act } from 'react-dom/test-utils';
 import userEvent from '@testing-library/user-event';
 
 import Panel from './Panel';

package/src/components/PasswordStrengthBar/PasswordStrengthBar.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -23,23 +23,33 @@ const barColors = [grey, red, orange, blue, green];
 describe('PasswordStrengthBar', () => {
     describe('Color changing / complexity', () => {
         it('renders all bars in grey when password is too short', async () => {
-            render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+            });
         });
 
         it('renders the first bar in red and the others in grey when password is weak', async () => {
-            render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+            });
         });
 
         it('renders the two first bars in orange and others in grey when password is okay', async () => {
-            render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+            });
         });
 
         it('renders the three first bars in blue and the last in grey when password is good', async () => {
-            render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+            });
         });
 
         it('renders all bars in green when password is strong', async () => {
-            render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+            });
         });
     });
 });

package/src/components/Popover/Popover.js

@@ -65,11 +65,17 @@ Popover.defaultProps = {
 
 function withLayer(MyComponent) {
     function WrappedComponent(props) {
+        const {
+            forwardedRef,
+            container = null,
+            placement = 'bottom-center',
+            disableClickOutside = false,
+            ...rest
+        } = props;
         const [isOpen, setOpen] = React.useState(false);
         function close() {
             setOpen(false);
         }
-        const { forwardedRef, container, placement, disableClickOutside, ...rest } = props;
         const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
             isOpen,
             container,
@@ -95,17 +101,17 @@ function withLayer(MyComponent) {
             />
         );
     }
-    WrappedComponent.defaultProps = {
-        container: null,
-        placement: 'bottom-center',
-        disableClickOutside: false,
-    };
     WrappedComponent.propTypes = {
         forwardedRef: PropTypes.object.isRequired,
         container: PropTypes.string,
         placement: PropTypes.string,
         disableClickOutside: PropTypes.bool,
     };
+    WrappedComponent.defaultProps = {
+        container: null,
+        placement: 'bottom-center',
+        disableClickOutside: false,
+    };
     return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
 }
 

package/src/components/Popover/Popover.test.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { act } from 'react-dom/test-utils';
 
 import Button from '../Button/Button';
 import Popover from './Popover';
@@ -32,11 +31,13 @@ it('renders a Popover component ', () => {
 it('Button click should make it visible', () => {
     const ref = React.createRef();
     const testId = 'popover-content';
-    render(
-        <Popover content="My popover" ref={ref}>
-            <Button onClick={() => {}} label="my button" />
-        </Popover>,
-    );
+    act(() => {
+        render(
+            <Popover content="My popover" ref={ref}>
+                <Button onClick={() => {}} label="my button" />
+            </Popover>,
+        );
+    });
     try {
         screen.getByTestId(testId);
         expect('Popover displayed').toBeFalsy();

package/src/components/ServiceMessage/ServiceMessage.test.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 import '@testing-library/jest-dom/extend-expect';
 import ServiceMessage from './ServiceMessage';
 

package/src/components/withFormValidation/withFormValidation.test.js

@@ -41,7 +41,7 @@ it('renders a withFormValidation component ', () => {
 
 it('validates min length', () => {
     let error = validationStrategy('minLength', { minLength: 6 }, 'short');
-    expect(error).toEqual('Should be at least 6 char long');
+    expect(error).toEqual('Should be at least 6 char long__plural');
     error = validationStrategy('minLength', { minLength: 6 }, 'longvalue');
     expect(error).toBeFalsy();
 });
@@ -50,7 +50,7 @@ it('validates max length', () => {
     let error = validationStrategy('maxLength', { maxLength: 6 }, 'short');
     expect(error).toBeFalsy();
     error = validationStrategy('maxLength', { maxLength: 6 }, 'tooolong');
-    expect(error).toEqual('Should be at most 6 char long');
+    expect(error).toEqual('Should be at most 6 char long__plural');
 });
 
 it('validates required', () => {

package/.idea/encodings.xml

@@ -1,6 +0,0 @@
-<?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

@@ -1,30 +0,0 @@
-<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="16">
-            <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" />
-            <item index="4" class="java.lang.String" itemvalue="schedule" />
-            <item index="5" class="java.lang.String" itemvalue="tzlocal" />
-            <item index="6" class="java.lang.String" itemvalue="pydantic" />
-            <item index="7" class="java.lang.String" itemvalue="django" />
-            <item index="8" class="java.lang.String" itemvalue="django-cors-middleware" />
-            <item index="9" class="java.lang.String" itemvalue="timezonefinder" />
-            <item index="10" class="java.lang.String" itemvalue="application_kit" />
-            <item index="11" class="java.lang.String" itemvalue="requests" />
-            <item index="12" class="java.lang.String" itemvalue="PLY" />
-            <item index="13" class="java.lang.String" itemvalue="ddtrace" />
-            <item index="14" class="java.lang.String" itemvalue="humanize" />
-            <item index="15" class="java.lang.String" itemvalue="types-redis" />
-          </list>
-        </value>
-      </option>
-    </inspection_tool>
-  </profile>
-</component>

package/.idea/inspectionProfiles/profiles_settings.xml

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

package/.idea/misc.xml

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

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?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

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

package/.idea/ui.iml

@@ -1,8 +0,0 @@
-<?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>
-</module>

package/.idea/vcs.xml

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