@woosmap/ui 2.53.0 → 2.57.0

package/package.json

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

package/src/components/CopyClipboardButton/CopyClipboardButton.js

@@ -17,25 +17,26 @@ export default class CopyClipboardButton extends Component {
     }
 
     copy = () => {
-        const { text, getText } = this.props;
+        const { text, getText, copyCallback } = this.props;
         const { copied } = this.state;
 
         const textToCopy = text || (getText ? getText() : null);
 
         if (textToCopy !== null && copy(textToCopy) && !copied) {
-            this.setState({ copied: true });
+            this.setState({ copied: true }, copyCallback);
             this.copyTimeout = setTimeout(() => this.setState({ copied: false }), 1000);
         }
     };
 
     render() {
-        const { type, noLabel, label, copiedLabel, copiedIcon, icon, getText, testId, ...rest } = this.props;
+        const { type, noLabel, label, copiedLabel, copiedIcon, icon, getText, testId, copyCallback, ...rest } =
+            this.props;
         const { copied } = this.state;
         return (
             <Button
                 type={type}
-                label={copied && label ? copiedLabel : label}
-                icon={copied ? copiedIcon : icon}
+                label={copied && copiedLabel ? copiedLabel : label}
+                icon={copied && copiedIcon ? copiedIcon : icon}
                 onClick={this.copy}
                 {...rest}
                 testId={testId}
@@ -54,6 +55,7 @@ CopyClipboardButton.defaultProps = {
     text: null,
     getText: null,
     testId: 'copy-clipboard-button',
+    copyCallback: () => {},
 };
 
 CopyClipboardButton.propTypes = {
@@ -66,4 +68,5 @@ CopyClipboardButton.propTypes = {
     copiedLabel: PropTypes.string,
     copiedIcon: PropTypes.string,
     icon: PropTypes.string,
+    copyCallback: PropTypes.func,
 };

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

@@ -7,6 +7,17 @@ const Story = {
 };
 
 export default Story;
-const Template = () => <CopyClipboardButton type="primary" text="Text to be copied" />;
+const Template = () => (
+    <div className="flex-column mbib">
+        <CopyClipboardButton type="primary" text="Text to be copied" />
+        <CopyClipboardButton
+            label="withCallback"
+            copiedLabel={null}
+            copiedIcon={null}
+            text="Text to be copied"
+            copyCallback={() => console.log('copy callback')}
+        />
+    </div>
+);
 export const Default = Template.bind({});
 Default.args = {};

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

@@ -23,3 +23,10 @@ it('copies the content from callback', () => {
     userEvent.click(container.firstChild);
     expect(document.execCommand).toHaveBeenCalledWith('copy');
 });
+
+it('copies the content and send a call back', () => {
+    const cb = jest.fn();
+    const { container } = render(<CopyClipboardButton text="text" copyCallback={cb} />);
+    userEvent.click(container.firstChild);
+    expect(cb).toHaveBeenCalledWith();
+});

package/src/components/Dropdown/Dropdown.js

@@ -49,13 +49,15 @@ class DropdownMenu extends Component {
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
         if (isSection) {
             return (
-                <div
-                    role="menu"
-                    className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
-                    data-testid={testId}
-                    {...rest}
-                >
-                    {childrenWithProps}
+                <div className="dropdown__container">
+                    <div
+                        role="menu"
+                        className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
+                        data-testid={testId}
+                        {...rest}
+                    >
+                        {childrenWithProps}
+                    </div>
                 </div>
             );
         }
@@ -97,7 +99,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>
         );
@@ -134,7 +136,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>
         );
@@ -166,7 +168,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"
@@ -220,7 +222,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}

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