@longline/aqua-ui 1.0.221 → 1.0.223

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/CountryFormatter/CountryFormatter.d.ts

@@ -13,7 +13,7 @@ interface ICountryFormatterProps {
     type?: 'flag' | 'name' | 'both';
 }
 /**
- * The `Country` formatter takes a country code or name and produces either
+ * The `CountryFormatter` takes a country code or name and produces either
  * an emoji flag, the country name, or both, depending on the `type` prop.
  */
 declare const CountryFormatter: {

package/formatters/CountryFormatter/CountryFormatter.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { CountryUtil } from './CountryUtil';
 /**
- * The `Country` formatter takes a country code or name and produces either
+ * The `CountryFormatter` takes a country code or name and produces either
  * an emoji flag, the country name, or both, depending on the `type` prop.
  */
 var CountryFormatter = function (_a) {

package/formatters/DivisionFormatter/DivisionFormatter.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IDivisionFormatterProps {
+    /**
+     * The division code (e.g. "CA-NS") to format.
+     */
+    value: string;
+}
+/**
+ * The `DivisionFormatter` takes a country code or name and produces either
+ * an emoji flag, the country name, or both, depending on the `type` prop.
+ */
+declare const DivisionFormatter: ({ value }: IDivisionFormatterProps) => React.JSX.Element;
+export { DivisionFormatter };

package/formatters/DivisionFormatter/DivisionFormatter.js

@@ -0,0 +1,18 @@
+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';
+import { DivisionUtil } from './DivisionUtil';
+/**
+ * The `DivisionFormatter` takes a country code or name and produces either
+ * an emoji flag, the country name, or both, depending on the `type` prop.
+ */
+var DivisionFormatter = function (_a) {
+    var value = _a.value;
+    return React.createElement(Name, null, DivisionUtil.getDivisionName(value));
+};
+var Name = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;  \n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;  \n"])));
+export { DivisionFormatter };
+var templateObject_1;

package/formatters/DivisionFormatter/DivisionUtil.d.ts

@@ -0,0 +1,21 @@
+interface IIsoDivisionsMap {
+    [key: string]: string;
+}
+declare class DivisionUtil {
+    private static data;
+    /**
+     * Get all country codes.
+     * @returns List of ISO country codes.
+     */
+    static getCountries: () => string[];
+    /**
+     * Given a country code (e.g. `NL`) return its divisions.
+     * @param countryCode e.g. `NL`
+     * @returns Object with mapping key->name of divisions
+     */
+    static getDivisions: (countryCode: string) => IIsoDivisionsMap;
+    static getCountryName: (countryCode: string) => string;
+    private static divisionDict;
+    static getDivisionName: (divisionCode: string) => string;
+}
+export { DivisionUtil };