@longline/aqua-ui 1.0.221 → 1.0.223

package/formatters/DivisionFormatter/index.d.ts

@@ -0,0 +1 @@
+export * from './DivisionFormatter';

package/formatters/DivisionFormatter/index.js

@@ -0,0 +1 @@
+export * from './DivisionFormatter';

package/hooks/useOutsideClose/index.d.ts

@@ -0,0 +1 @@
+export * from './useOutsideClose';

package/hooks/useOutsideClose/index.js

@@ -0,0 +1 @@
+export * from './useOutsideClose';

package/hooks/useOutsideClose/useOutsideClose.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+type UseOutsideCloseOptions = {
+    /**
+     * Whether the outside-close behavior is active (the component that uses
+     * this is open)
+     */
+    open: boolean;
+    /**
+     * Refs that should be considered "inside"
+     */
+    refs: React.RefObject<HTMLElement>[];
+    /**
+     * Callback when the user clicks outside (or pressed Escape if enabled)
+     */
+    onClose: () => void;
+    /**
+     * Whether Escape should also trigger `onClose`.
+     * @default false
+     */
+    escapeToClose?: boolean;
+    /**
+     * Whether blur (focus leaving all refs) should trigger `onClose`.
+     * @default false
+     */
+    blurToClose?: boolean;
+};
+/**
+ * React hook that closes a component (via `onClose`) when the user interacts
+ * outside of one or more referenced elements. Commonly used for dropdowns,
+ * popovers, tooltips, or modals.
+ *
+ * ## Features
+ * - Detects clicks outside the provided refs and calls `onClose`.
+ * - Optionally closes on `Escape` key press (`escapeToClose`).
+ * - Optionally closes when focus leaves all refs (`blurToClose`).
+ * - No-op when `active` is `false` (no listeners attached).
+ *
+ * ## Usage
+ * ```tsx
+ * const toggleRef = useRef<HTMLButtonElement>(null);
+ * const menuRef = useRef<HTMLDivElement>(null);
+ *
+ * useOutsideClose({
+ *   open: isOpen,
+ *   refs: [toggleRef, menuRef],
+ *   onClose: () => setIsOpen(false),
+ *   escapeToClose: true,
+ *   blurToClose: true,
+ * });
+ *
+ * return (
+ *   <div>
+ *     <button ref={toggleRef} onClick={() => setIsOpen(v => !v)}>Toggle</button>
+ *     {isOpen && <div ref={menuRef}>Menu content</div>}
+ *   </div>
+ * );
+ * ```
+ *
+ * ## Parameters
+ * @param {Object} options - Configuration object.
+ * @param {boolean} options.open - Whether the hook is active. If `false`, no listeners are attached.
+ * @param {React.RefObject<HTMLElement>[]} options.refs - Elements that are considered "inside".
+ *        Interactions within these elements will not trigger `onClose`.
+ * @param {() => void} options.onClose - Callback fired when the user clicks outside, presses Escape
+ *        (if enabled), or tabs focus away (if enabled).
+ * @param {boolean} [options.escapeToClose=false] - If `true`, pressing Escape will call `onClose`.
+ * @param {boolean} [options.blurToClose=false] - If `true`, moving focus outside all refs will call `onClose`.
+ *
+ * ## Notes
+ * - This hook attaches global listeners to `document` while active and cleans them up automatically.
+ * - The hook works with any number of refs. Make sure you pass **stable refs** (e.g. from `useRef`),
+ *   not inline ref callbacks.
+ */
+declare function useOutsideClose({ open, refs, onClose, escapeToClose, blurToClose, }: UseOutsideCloseOptions): void;
+export { useOutsideClose };

package/hooks/useOutsideClose/useOutsideClose.js

@@ -0,0 +1,104 @@
+import * as React from "react";
+/**
+ * React hook that closes a component (via `onClose`) when the user interacts
+ * outside of one or more referenced elements. Commonly used for dropdowns,
+ * popovers, tooltips, or modals.
+ *
+ * ## Features
+ * - Detects clicks outside the provided refs and calls `onClose`.
+ * - Optionally closes on `Escape` key press (`escapeToClose`).
+ * - Optionally closes when focus leaves all refs (`blurToClose`).
+ * - No-op when `active` is `false` (no listeners attached).
+ *
+ * ## Usage
+ * ```tsx
+ * const toggleRef = useRef<HTMLButtonElement>(null);
+ * const menuRef = useRef<HTMLDivElement>(null);
+ *
+ * useOutsideClose({
+ *   open: isOpen,
+ *   refs: [toggleRef, menuRef],
+ *   onClose: () => setIsOpen(false),
+ *   escapeToClose: true,
+ *   blurToClose: true,
+ * });
+ *
+ * return (
+ *   <div>
+ *     <button ref={toggleRef} onClick={() => setIsOpen(v => !v)}>Toggle</button>
+ *     {isOpen && <div ref={menuRef}>Menu content</div>}
+ *   </div>
+ * );
+ * ```
+ *
+ * ## Parameters
+ * @param {Object} options - Configuration object.
+ * @param {boolean} options.open - Whether the hook is active. If `false`, no listeners are attached.
+ * @param {React.RefObject<HTMLElement>[]} options.refs - Elements that are considered "inside".
+ *        Interactions within these elements will not trigger `onClose`.
+ * @param {() => void} options.onClose - Callback fired when the user clicks outside, presses Escape
+ *        (if enabled), or tabs focus away (if enabled).
+ * @param {boolean} [options.escapeToClose=false] - If `true`, pressing Escape will call `onClose`.
+ * @param {boolean} [options.blurToClose=false] - If `true`, moving focus outside all refs will call `onClose`.
+ *
+ * ## Notes
+ * - This hook attaches global listeners to `document` while active and cleans them up automatically.
+ * - The hook works with any number of refs. Make sure you pass **stable refs** (e.g. from `useRef`),
+ *   not inline ref callbacks.
+ */
+function useOutsideClose(_a) {
+    var open = _a.open, refs = _a.refs, onClose = _a.onClose, _b = _a.escapeToClose, escapeToClose = _b === void 0 ? false : _b, _c = _a.blurToClose, blurToClose = _c === void 0 ? false : _c;
+    // Events get added to the component only when it opens, and removed
+    // when it closes. This way, components aren't listening for document-wide
+    // events when they're closed.
+    React.useEffect(function () {
+        // If component isn't open, then do nothing:
+        if (!open)
+            return undefined;
+        // When the HTML document gets clicked, see if the click in side one of 
+        // the HTML elements that were passed in. If so, do nothing. It outside 
+        // these elements, close the component. 
+        var handleClick = function (e) {
+            var target = e.target;
+            var clickedInside = refs.some(function (ref) { return ref.current && ref.current.contains(target); });
+            if (!clickedInside) {
+                onClose();
+            }
+        };
+        // When the ESC key is pressed (and this feature has been enabled),
+        // close the component.
+        var handleKeyDown = function (e) {
+            if (escapeToClose && e.key === "Escape") {
+                onClose();
+            }
+        };
+        var handleBlur = function (e) {
+            if (!blurToClose)
+                return;
+            var target = e.relatedTarget; // where focus is going
+            var focusedInside = refs.some(function (ref) { return ref.current && target && ref.current.contains(target); });
+            if (!focusedInside) {
+                onClose();
+            }
+        };
+        // Add event listeners:
+        document.addEventListener("mousedown", handleClick);
+        if (escapeToClose) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+        if (blurToClose) {
+            document.addEventListener("focusin", handleBlur); // focusin bubbles
+        }
+        // Remove event listeners:
+        return function () {
+            document.removeEventListener("mousedown", handleClick);
+            if (escapeToClose) {
+                document.removeEventListener("keydown", handleKeyDown);
+            }
+            if (blurToClose) {
+                document.removeEventListener("focusin", handleBlur);
+            }
+        };
+    }, [open, refs, onClose, escapeToClose, blurToClose]);
+}
+export { useOutsideClose };

package/inputs/DateInput/DateInput.js

@@ -30,6 +30,7 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { Selector } from './Selector';
 import { Body } from './Body';
+import { useOutsideClose } from '../../hooks/useOutsideClose';
 var DateInputBase = function (props) {
     var wrapperRef = React.useRef(null);
     var bodyRef = React.useRef(null);
@@ -47,21 +48,13 @@ var DateInputBase = function (props) {
     };
     var _a = React.useState(function () { return parseDate(props.value, null); }), value = _a[0], setValue = _a[1];
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    // Add (and remove) document-wide event listener for mousedown.
-    React.useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
-    }, []);
-    //
-    // Handle document-wide mousedown event by closing the Selector.
-    // (This only happens if there actually is a Selector).
-    //
-    var handleClickOutside = function (e) {
-        var elem = e.target;
-        if (wrapperRef.current && bodyRef.current && !wrapperRef.current.contains(elem) && !bodyRef.current.contains(elem)) {
-            setOpen(false);
-        }
-    };
+    useOutsideClose({
+        open: open,
+        refs: [wrapperRef, bodyRef],
+        onClose: function () { return setOpen(false); },
+        escapeToClose: true,
+        blurToClose: true
+    });
     // Open the dropdown.
     var doOpen = function () {
         setOpen(true);

package/inputs/Dropdown/Dropdown.js

@@ -81,6 +81,7 @@ import { Selector } from './Selector';
 import { Pill } from './Pill';
 import { ListRow } from '../../containers/List/ListRow';
 import { ListCell } from '../../containers/List';
+import { useOutsideClose } from '../../hooks/useOutsideClose';
 var sameWidth = {
     name: "sameWidth",
     enabled: true,
@@ -107,27 +108,10 @@ var DropdownBase = function (props) {
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     // Current search query.
     var _c = React.useState(null), search = _c[0], setSearch = _c[1];
-    // A mousedown event listener is attached to the document. When the document
-    // is clicked anywhere but this Dropdown, the Dropdown closes.
-    React.useEffect(function () {
-        // Listen for document-wide mousedown/keydown events when Dropdown mounts.
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            // Clean up document-wide mousedown/keydown events when Dropdown unmounts.
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
     // When value props changes, change local state value also.
     React.useEffect(function () {
         setValue(props.value);
     }, [props.value]);
-    // Handle document-wide mousedown event by closing the Dropdown.
-    var handleClickOutside = function (event) {
-        var elem = event.target;
-        if (wrapperRef.current && bodyRef.current && !wrapperRef.current.contains(elem) && !bodyRef.current.contains(elem)) {
-            doClose();
-        }
-    };
     // Open the dropdown.
     var doOpen = function () {
         setOpen(true);
@@ -160,6 +144,13 @@ var DropdownBase = function (props) {
             setTimeout(props.onClose, 300);
         }
     };
+    useOutsideClose({
+        open: open,
+        refs: [wrapperRef, bodyRef],
+        onClose: doClose,
+        escapeToClose: true,
+        blurToClose: true
+    });
     // The selector was clicked, open the Dropdown, or close
     // it if it was open.
     var handleSelectorClicked = function () {

package/inputs/MonthRange/MonthRange.js

@@ -30,33 +30,22 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { Selector } from './Selector';
 import { Body } from './Body';
+import { useOutsideClose } from '../../hooks/useOutsideClose';
 var MonthRangeBase = function (props) {
     var wrapperRef = React.useRef(null);
     var bodyRef = React.useRef(null);
     var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    // Add (and remove) document-wide event listener for mousedown.
-    React.useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
-    }, []);
-    //
-    // Handle document-wide mousedown event by closing the Selector.
-    // (This only happens if there actually is a Selector).
-    //
-    var handleClickOutside = function (e) {
-        var elem = e.target;
-        if (wrapperRef.current && bodyRef.current && !wrapperRef.current.contains(elem) && !bodyRef.current.contains(elem)) {
-            setOpen(false);
-        }
-    };
-    // Open the dropdown.
-    var doOpen = function () {
-        setOpen(true);
-    };
+    useOutsideClose({
+        open: open,
+        refs: [wrapperRef, bodyRef],
+        onClose: function () { return setOpen(false); },
+        escapeToClose: true,
+        blurToClose: true
+    });
     var handleToggle = function () {
         if (!open) {
-            doOpen();
+            setOpen(true);
             // Update popper position.
             if (update)
                 update();
@@ -76,7 +65,7 @@ var MonthRangeBase = function (props) {
         if (props.ghost)
             return;
         if (e.key == ' ' && !open)
-            doOpen();
+            setOpen(true);
         if (e.key == 'Escape' && open)
             setOpen(false);
     };

package/map/controls/Geocoder/Geocoder.js

@@ -32,6 +32,7 @@ import { GeocoderEntry } from './GeocoderEntry';
 import { GeocoderList } from './GeocoderList';
 import { GeocoderSelector } from './GeocoderSelector';
 import { MapControl } from '../base/MapControl';
+import { useOutsideClose } from '../../../hooks/useOutsideClose';
 var GeocoderBase = function (props) {
     var wrapperRef = React.useRef(null);
     var map = useMap().current;
@@ -54,6 +55,13 @@ var GeocoderBase = function (props) {
         if (wrapperRef)
             wrapperRef.current.querySelector('input').focus();
     };
+    useOutsideClose({
+        open: features.length > 0,
+        refs: [wrapperRef],
+        onClose: clear,
+        escapeToClose: true,
+        blurToClose: true
+    });
     //
     // Call mapbox geocoder API, and store results in state.
     //
@@ -82,15 +90,6 @@ var GeocoderBase = function (props) {
         }
         setTimer(window.setTimeout(function () { return lookup(q); }, 350));
     };
-    //
-    // Handle document-wide mousedown event by closing the list.
-    //
-    var handleClickOutside = function () {
-        var elem = event.target;
-        if (wrapperRef && !wrapperRef.current.contains(elem)) {
-            clear();
-        }
-    };
     var handleChange = function (newq) {
         setQ(newq);
         lookupDebounced(newq);
@@ -130,14 +129,6 @@ var GeocoderBase = function (props) {
                 break;
         }
     };
-    React.useEffect(function () {
-        // Listen for document-wide mousedown event when control mounts.
-        document.addEventListener('mousedown', handleClickOutside);
-        // Clean up document-wide mousedown event when control unmounts.
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    });
     return (React.createElement(MapControl, { x: props.x, y: props.y },
         React.createElement("div", { className: props.className, onKeyDown: function (e) { return handleKeyDown(e); }, ref: wrapperRef },
             React.createElement(GeocoderSelector, { placeholder: props.placeholder, searchIcon: props.searchIcon, value: q, onChange: handleChange }),

package/map/controls/Geocoder/GeocoderEntry.js

@@ -5,10 +5,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 /** @module @ignore */
 import * as React from 'react';
 import styled from 'styled-components';
-import { ListRow } from '../../../containers/List';
+import { ListCell, ListRow } from '../../../containers/List';
 var GeocoderEntry = function (props) {
     return React.createElement(ListRow, { onClick: props.onClick, active: props.selected },
-        React.createElement("div", { style: { width: '100%' } },
+        React.createElement(ListCell, null,
             React.createElement(ResultText, null, props.feature.properties.name_preferred),
             React.createElement(ResultPlace, null, props.feature.properties.full_address)));
 };

package/map/controls/Geocoder/GeocoderList.js

@@ -11,7 +11,7 @@ import { List } from '../../../containers/List';
  */
 var GeocoderListBase = function (props) {
     return React.createElement("div", { className: props.className },
-        React.createElement(List, { tall: true, maxItems: 5, contract: true }, props.children));
+        React.createElement(List, { maxItems: 5, contract: true }, props.children));
 };
 var GeocoderList = styled(GeocoderListBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  left: 0;\n  ", "\n  ", "\n  \n"], ["\n  position: absolute;\n  width: 100%;\n  left: 0;\n  ", "\n  ", "\n  \n"])), function (p) { return !p.upwards && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    top: 42px;\n  "], ["\n    top: 42px;\n  "]))); }, function (p) { return p.upwards && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 42px;\n  "], ["\n    bottom: 42px;\n  "]))); });
 export { GeocoderList };

package/modules/CountryDropdown/CountryDropdown.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IDropdownProps } from '../../inputs/Dropdown';
+/**
+ * A dropdown preconfigured for country selection. Shows country flags.
+ */
+declare const CountryDropdown: (props: IDropdownProps) => React.JSX.Element;
+export { CountryDropdown };

package/modules/CountryDropdown/CountryDropdown.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { Dropdown } from '../../inputs/Dropdown';
+import { Countries } from '../../formatters/CountryFormatter/Countries';
+import { CountryFormatter } from '../../formatters/CountryFormatter';
+/**
+ * A dropdown preconfigured for country selection. Shows country flags.
+ */
+var CountryDropdown = function (props) {
+    var _a = React.useState(null), q = _a[0], setQ = _a[1];
+    var data = Object.keys(Countries)
+        .filter(function (c) { return Countries[c][0].toLocaleLowerCase().includes((q || "").toLocaleLowerCase()); });
+    return (React.createElement(Dropdown, __assign({ data: data, onSearch: setQ, placeholder: props.placeholder || "Country", label: function (item) { return React.createElement(CountryFormatter, { type: 'both', value: item }); } }, props),
+        React.createElement(Dropdown.Column, null, function (item) { return React.createElement(CountryFormatter, { type: 'both', value: item }); })));
+};
+export { CountryDropdown };

package/modules/CountryDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './CountryDropdown';

package/modules/CountryDropdown/index.js

@@ -0,0 +1 @@
+export * from './CountryDropdown';

package/modules/DivisionDropdown/DivisionDropdown.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IDropdownProps } from '../../inputs/Dropdown';
+interface IProps extends IDropdownProps {
+    country: string;
+}
+/**
+ * A dropdown preconfigured for division selection (for a particular country).
+ */
+declare const DivisionDropdown: (props: IProps) => React.JSX.Element;
+export { DivisionDropdown };

package/modules/DivisionDropdown/DivisionDropdown.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { Dropdown } from '../../inputs/Dropdown';
+import { DivisionUtil } from '../../formatters/DivisionFormatter/DivisionUtil';
+/**
+ * A dropdown preconfigured for division selection (for a particular country).
+ */
+var DivisionDropdown = function (props) {
+    var _a = React.useState(null), q = _a[0], setQ = _a[1];
+    // Get current country's divisions.
+    var divisions = DivisionUtil.getDivisions(props.country);
+    // Apply search query to divisions, then sort by division name.
+    var data = Object.keys(divisions)
+        .filter(function (d) { return divisions[d].toLocaleLowerCase().includes((q || "").toLocaleLowerCase()); })
+        .sort(function (a, b) { return divisions[a].localeCompare(divisions[b], 'en'); });
+    return (React.createElement(Dropdown, __assign({ data: data, onSearch: setQ, placeholder: props.placeholder || "Province", label: function (item) { return divisions[item]; } }, props),
+        React.createElement(Dropdown.Column, null, function (item) { return divisions[item]; })));
+};
+export { DivisionDropdown };

package/modules/DivisionDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './DivisionDropdown';

package/modules/DivisionDropdown/index.js

@@ -0,0 +1 @@
+export * from './DivisionDropdown';

package/modules/Filter/Filter.js

@@ -30,30 +30,18 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { FilterButton } from '../../controls/FilterButton';
 import { GlassPane } from '../../containers/GlassPane';
+import { useOutsideClose } from '../../hooks/useOutsideClose';
 var FilterBase = function (props) {
     var buttonRef = React.useRef(null);
     var paneRef = React.useRef(null);
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    React.useEffect(function () {
-        // Listen for document-wide mousedown/keydown events when panel mounts.
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleKeyDown);
-        return function () {
-            // Clean up document-wide mousedown/keydown events when panel unmounts.
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
-    var handleClickOutside = function (e) {
-        var elem = e.target;
-        if (buttonRef.current && paneRef.current && !buttonRef.current.contains(elem) && !paneRef.current.contains(elem)) {
-            setOpen(false);
-        }
-    };
-    var handleKeyDown = function (e) {
-        if (e.key == 'Escape')
-            setOpen(false);
-    };
+    useOutsideClose({
+        open: open,
+        refs: [paneRef, buttonRef],
+        onClose: function () { return setOpen(false); },
+        escapeToClose: true,
+        blurToClose: true
+    });
     var _b = usePopper(buttonRef.current, paneRef.current, {
         placement: 'bottom-end',
         modifiers: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.221",
+  "version": "1.0.223",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",

package/services/Dialog/Dialog.js

@@ -32,6 +32,7 @@ import { DialogFooter } from './DialogFooter';
 import { AlertDialog } from './AlertDialog';
 import { ConfirmDialog } from './ConfirmDialog';
 import { XhrDialog } from './XhrDialog';
+import { useOutsideClose } from '../../hooks/useOutsideClose';
 /**
  * A Dialog is an overlay window that is shown when the Dialog’s `open`
  * attribute is set to `true`. The calling code is responsible for setting
@@ -48,26 +49,21 @@ var DialogBase = function (props) {
         preEnter: true,
         unmountOnExit: true
     }), _b = _a[0], status = _b.status, isMounted = _b.isMounted, isEnter = _b.isEnter, toggle = _a[1];
+    var close = function () {
+        if (!props.canClose && !props.onClose)
+            return;
+        props.onClose();
+    };
+    useOutsideClose({
+        open: props.open,
+        refs: [windowRef],
+        onClose: close,
+        escapeToClose: true,
+        blurToClose: true
+    });
     React.useEffect(function () {
         toggle(props.open);
     }, [props.open]);
-    // Listen for document-wide mousedown event when component mounts.
-    React.useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            // Clean up document-wide mousedown event when component unmounts.
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    });
-    // Handle document-wide mousedown event by sending a dialog close event.
-    // When clicking outside of it, a Dialog can close only if its canClose
-    // prop is not set to false.
-    var handleClickOutside = function (event) {
-        var elem = event.target;
-        if (windowRef.current && !windowRef.current.contains(elem) && props.onClose && props.canClose !== false) {
-            props.onClose();
-        }
-    };
     return (React.createElement(React.Fragment, null, isMounted && React.createElement(React.Fragment, null,
         createPortal(React.createElement(DialogBackground, { status: status }), document.body),
         createPortal(React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef, status: status }, props.children), document.body))));