@longline/aqua-ui 1.0.222 → 1.0.224

package/containers/InfoBox/InfoBox.d.ts

@@ -58,5 +58,6 @@ interface IInfoBoxProps {
 declare const InfoBox: {
     ({ width, minHeight, padded, scroll, ...props }: IInfoBoxProps): React.JSX.Element;
     displayName: string;
+    Row: (props: import("./elements/Row").IInfoBoxRowProps) => React.JSX.Element;
 };
 export { InfoBox, IInfoBoxProps };

package/containers/InfoBox/InfoBox.js

@@ -28,6 +28,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { Content } from './elements/Content';
 import { Footer } from './elements/Footer';
+import { InfoBoxRow } from './elements/Row';
 /**
  * An `InfoBox` is a glass pane with an optional header and footer.
  */
@@ -79,5 +80,6 @@ var InfoBox = function (_a) {
     return React.createElement(InfoBoxStyled, __assign({ width: width, minHeight: minHeight, padded: padded, scroll: scroll }, props));
 };
 InfoBox.displayName = "InfoBox";
+InfoBox.Row = InfoBoxRow;
 export { InfoBox };
 var templateObject_1;

package/containers/InfoBox/elements/Row.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IInfoBoxRowProps {
+    /** Name to show. */
+    name: React.ReactNode;
+    /** Value to show. */
+    value: React.ReactNode;
+}
+/**
+ * An `InfoBoxRow` shows a name-value combination, in row format.
+ */
+declare const InfoBoxRow: (props: IInfoBoxRowProps) => React.JSX.Element;
+export { InfoBoxRow, IInfoBoxRowProps };

package/containers/InfoBox/elements/Row.js

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+/**
+ * An `InfoBoxRow` shows a name-value combination, in row format.
+ */
+var InfoBoxRow = function (props) {
+    return React.createElement(Wrapper, null,
+        React.createElement(Name, null, props.name),
+        React.createElement(Value, null, props.value));
+};
+var Name = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  flex: 1;\n  min-width: 65px;\n"], ["\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  flex: 1;\n  min-width: 65px;\n"])));
+var Value = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 700;\n  text-align: right;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;  \n"], ["\n  font-weight: 700;\n  text-align: right;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;  \n"])));
+var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  white-space: nowrap;\n  gap: 16px;\n  height: 28px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  white-space: nowrap;\n  gap: 16px;\n  height: 28px;\n  align-items: center;\n"])));
+export { InfoBoxRow };
+var templateObject_1, templateObject_2, templateObject_3;

package/containers/Openable/Openable.d.ts

@@ -17,6 +17,9 @@ interface IOpenableProps {
      * @default 250
      */
     width?: number;
+    /**
+     * Fired when Openable must close.
+     */
     onClose: () => void;
 }
 declare const Openable: {

package/containers/Openable/Openable.js

@@ -28,31 +28,20 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
+import { useOutsideClose } from '../../hooks/useOutsideClose';
 var Openable = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 250 : _b, props = __rest(_a, ["width"]);
+    var _b;
+    var _c = _a.width, width = _c === void 0 ? 250 : _c, props = __rest(_a, ["width"]);
     var toggleRef = React.useRef(null);
     var paneRef = React.useRef(null);
-    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 (toggleRef.current && paneRef.current && !toggleRef.current.contains(elem) && !paneRef.current.contains(elem)) {
-            props.onClose();
-        }
-    };
-    var handleKeyDown = function (e) {
-        if (e.key == 'Escape')
-            props.onClose();
-    };
-    var _c = usePopper(toggleRef.current, paneRef.current, {
+    useOutsideClose({
+        open: props.open,
+        refs: [toggleRef, paneRef],
+        onClose: props.onClose,
+        escapeToClose: true,
+        blurToClose: true
+    });
+    var _d = usePopper(toggleRef.current, paneRef.current, {
         placement: 'bottom-end',
         modifiers: [
             {
@@ -62,13 +51,15 @@ var Openable = function (_a) {
                 },
             }
         ]
-    }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
+    }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
     React.useEffect(function () {
         update === null || update === void 0 ? void 0 : update();
     }, [props.open]);
     return (React.createElement("div", { ref: toggleRef },
         props.toggle,
-        createPortal(React.createElement(Pane, __assign({ "$open": props.open, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && props.content), document.body)));
+        createPortal(React.createElement(Pane, __assign({ "$open": props.open, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), props.open && props.content), // If in fullscreen mode, Openable must portal into fullscreen element,
+        // else content will be hidden.
+        (_b = document.fullscreenElement) !== null && _b !== void 0 ? _b : document.body)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"])), function (p) { return p.$open ? 'block' : 'none'; }, function (p) { return p.$width; });
 Openable.displayName = "Openable";

package/controls/ListView/ColumnsManager/ColumnsManager.js

@@ -20,31 +20,16 @@ import { SourceColumns } from './SourceColumns';
 import { OrderColumns } from './OrderColumns';
 import { SecondaryButton } from '../../SecondaryButton';
 import { SVG } from '../../../svg';
+import { useOutsideClose } from '../../../hooks/useOutsideClose';
 var ColumnsManagerBase = function (props) {
     var wrapperRef = React.useRef(null);
-    // A mousedown event listener is attached to the document. When the document
-    // is clicked anywhere but this panel, the panel closes.
-    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 handleKeyDown = function (e) {
-        if (e.key == 'Escape')
-            props.onClose();
-    };
-    // Handle document-wide mousedown event by closing the panel.
-    var handleClickOutside = function (event) {
-        var elem = event.target;
-        if (wrapperRef.current && !wrapperRef.current.contains(elem)) {
-            props.onClose();
-        }
-    };
+    useOutsideClose({
+        open: true,
+        refs: [wrapperRef],
+        onClose: props.onClose,
+        escapeToClose: true,
+        blurToClose: true
+    });
     return (React.createElement("div", { className: props.className, ref: wrapperRef },
         React.createElement(GlassPane, { animated: true, bordered: true },
             React.createElement(Content, null,

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/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.222",
+  "version": "1.0.224",
   "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))));