@woosmap/ui 2.62.0 → 2.63.0

package/package.json

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

package/src/components/Popover/Popover.js

@@ -58,11 +58,11 @@ function withLayer(MyComponent) {
         function close() {
             setOpen(false);
         }
-        const { forwardedRef, container, placement, ...rest } = props;
+        const { forwardedRef, container, placement, disableClickOutside, ...rest } = props;
         const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
             isOpen,
             container,
-            onOutsideClick: close, // close the menu when the user clicks outside
+            onOutsideClick: disableClickOutside ? null : close, // close the menu when the user clicks outside
             onDisappear: close, // close the menu when the menu gets scrolled out of sight
             overflowContainer: true, // keep the menu positioned inside the container
             auto: true, // automatically find the best placement
@@ -87,11 +87,13 @@ 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,
     };
     return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
 }

package/src/components/Popover/Popover.stories.js

@@ -3,6 +3,12 @@ import Popover from './Popover';
 import ConfirmationPopover from './ConfirmationPopover';
 import Button from '../Button/Button';
 
+const toggle = (ref) => {
+    if (ref.current) {
+        ref.current.toggle();
+    }
+};
+
 const Story = {
     title: 'base/Popover',
     component: Popover,
@@ -12,15 +18,10 @@ export default Story;
 
 const Template = () => {
     const popoverRef = React.createRef();
-    function toggle() {
-        if (popoverRef.current) {
-            popoverRef.current.toggle();
-        }
-    }
     return (
         <div style={{ paddingLeft: '50px' }}>
             <Popover ref={popoverRef} content="My popover">
-                <Button label="my button" onClick={toggle} />
+                <Button label="my button" onClick={() => toggle(popoverRef)} />
             </Popover>
         </div>
     );
@@ -34,15 +35,10 @@ const TemplateConfirmPopover = (args) => {
     const confirmCb = () => {
         // confirm action
     };
-    function toggleConfirm() {
-        if (popoverConfirmRef.current) {
-            popoverConfirmRef.current.toggle();
-        }
-    }
     return (
         <div style={{ paddingLeft: '50px' }}>
             <ConfirmationPopover ref={popoverConfirmRef} text={text} confirmCb={confirmCb}>
-                <Button label="my button" onClick={toggleConfirm} />
+                <Button label="my button" onClick={() => toggle(popoverConfirmRef)} />
             </ConfirmationPopover>
         </div>
     );
@@ -51,3 +47,16 @@ export const ConfirmationPopoverTemplate = TemplateConfirmPopover.bind({});
 ConfirmationPopoverTemplate.args = {
     text: 'Do you confirm?',
 };
+
+const TemplatePopoverNoClickOutside = () => {
+    const popoverRef = React.createRef();
+
+    return (
+        <div style={{ paddingLeft: '50px' }}>
+            <Popover ref={popoverRef} content="My popover, no click outside" disableClickOutside>
+                <Button label="my button 2" onClick={() => toggle(popoverRef)} />
+            </Popover>
+        </div>
+    );
+};
+export const TemplatePopoverClickOutsideDisabled = TemplatePopoverNoClickOutside.bind({});