@longline/aqua-ui 1.0.339 → 1.0.340

package/map/markers/ClusterMarker/ClusterMarker.d.ts

@@ -31,7 +31,12 @@ interface IClusterMarkerProps {
     /**
      * Fired when the marker is clicked.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, merged after (and so
+     * overriding) the computed size.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `ClusterMarker` may be used with an `HtmlMarkerLayer`, or as a component on its own.

package/map/markers/ClusterMarker/ClusterMarker.js

@@ -27,7 +27,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from 'styled-components';
 import { HumanFormatter } from '../../../formatters/HumanFormatter';
+// Default prop values, referenced both by the ClusterMarkerBase fallbacks and
+// the ClusterMarker wrapper below.
+var DEFAULT_RADIUS = 24;
+var DEFAULT_VALUE = 0;
 var ClusterMarkerBase = function (props) {
+    var _a, _b, _c;
     /**
      * Create a <path> for a donut segment.
      * @param start Start angle (0-1)
@@ -61,16 +66,20 @@ var ClusterMarkerBase = function (props) {
         return Colors[idx % 5];
     };
     var renderValueRings = function () {
+        var _a;
         var value = 0;
+        if (!props.ringValues)
+            return null;
+        var radius = (_a = props.radius) !== null && _a !== void 0 ? _a : DEFAULT_RADIUS;
         // Calculate total value of ringfields:
         var totalValue = props.ringValues.reduce(function (acc, f) { return f + acc; }, 0);
         // Prevent div0:
-        if (totalValue == 0)
+        if (totalValue === 0)
             return null;
         var rings = [];
         props.ringValues.forEach(function (ringValue, idx) {
             var relativeValue = ringValue / totalValue;
-            rings.push(donutSegment(idx, value, value + relativeValue, props.radius, props.radius - 4, getRingColor(idx)));
+            rings.push(donutSegment(idx, value, value + relativeValue, radius, radius - 4, getRingColor(idx)));
             value += relativeValue;
         });
         return rings;
@@ -78,14 +87,14 @@ var ClusterMarkerBase = function (props) {
     var handleClick = function (e) {
         e.stopPropagation();
         if (props.onClick)
-            props.onClick();
+            props.onClick(e);
     };
     // Radius is passed in as inline style, to avoid generating 1000s of styled-component classes.
-    return (React.createElement("div", { className: props.className, style: { width: "".concat(props.radius * 2, "px"), height: "".concat(props.radius * 2, "px") }, onClick: handleClick },
+    return (React.createElement("div", { className: props.className, style: __assign({ width: "".concat(((_a = props.radius) !== null && _a !== void 0 ? _a : DEFAULT_RADIUS) * 2, "px"), height: "".concat(((_b = props.radius) !== null && _b !== void 0 ? _b : DEFAULT_RADIUS) * 2, "px") }, props.style), onClick: handleClick },
         props.ringValues &&
             React.createElement("svg", null, renderValueRings()),
         React.createElement("span", null,
-            React.createElement(HumanFormatter, { value: props.value, decimals: props.decimals }))));
+            React.createElement(HumanFormatter, { value: (_c = props.value) !== null && _c !== void 0 ? _c : DEFAULT_VALUE, decimals: props.decimals }))));
 };
 var ClusterMarkerStyled = styled(ClusterMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n\n  // Appearance:\n  border-radius: 50%;\n  background-color: rgb(255 255 255 / 100%);\n  box-shadow: \n    0 0 0 6px rgb(255 255 255 / 44%),  // outer ring small\n    0 0 0 12px rgb(255 255 255 / 20%), // outer ring big\n    inset 0px 0 0px 4px #fff,        // inner white ring\n    inset 0px 7px 3px 0px rgba(0, 0, 0, 0.25); // inner dropshadow\n  cursor: ", ";\n  outline: none;\n  user-select: none;\n\n  & > svg {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 100%;\n    height: 100%;\n    margin-left: -50%;\n    margin-top: -50%;\n  }\n\n  & > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    // Content:\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #3C698A;\n    font: normal 700 12px/12px \"Roboto Condensed\";\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n\n  // Appearance:\n  border-radius: 50%;\n  background-color: rgb(255 255 255 / 100%);\n  box-shadow: \n    0 0 0 6px rgb(255 255 255 / 44%),  // outer ring small\n    0 0 0 12px rgb(255 255 255 / 20%), // outer ring big\n    inset 0px 0 0px 4px #fff,        // inner white ring\n    inset 0px 7px 3px 0px rgba(0, 0, 0, 0.25); // inner dropshadow\n  cursor: ", ";\n  outline: none;\n  user-select: none;\n\n  & > svg {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 100%;\n    height: 100%;\n    margin-left: -50%;\n    margin-top: -50%;\n  }\n\n  & > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    // Content:\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #3C698A;\n    font: normal 700 12px/12px \"Roboto Condensed\";\n  }\n"
     /**
@@ -98,7 +107,7 @@ var ClusterMarkerStyled = styled(ClusterMarkerBase)(templateObject_1 || (templat
  *
  */
 var ClusterMarker = function (_a) {
-    var _b = _a.radius, radius = _b === void 0 ? 24 : _b, _c = _a.relativeSize, relativeSize = _c === void 0 ? 0 : _c, _d = _a.value, value = _d === void 0 ? 0 : _d, _e = _a.decimals, decimals = _e === void 0 ? 0 : _e, props = __rest(_a, ["radius", "relativeSize", "value", "decimals"]);
+    var _b = _a.radius, radius = _b === void 0 ? DEFAULT_RADIUS : _b, _c = _a.relativeSize, relativeSize = _c === void 0 ? 0 : _c, _d = _a.value, value = _d === void 0 ? DEFAULT_VALUE : _d, _e = _a.decimals, decimals = _e === void 0 ? 0 : _e, props = __rest(_a, ["radius", "relativeSize", "value", "decimals"]);
     var step = Math.log10(Math.max(1, value));
     var r = radius + step * relativeSize;
     return React.createElement(ClusterMarkerStyled, __assign({ radius: r, value: value, decimals: decimals }, props));

package/map/markers/RiskMarker/RiskMarker.d.ts

@@ -5,7 +5,7 @@ interface IRiskMarkerProps {
     /**
      * Fired when marker is clicked.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
     /** Is the marker currently selected? */
     active?: boolean;
     /** Are there actions pending? */
@@ -14,6 +14,10 @@ interface IRiskMarkerProps {
     value?: number;
     /** Risk color */
     color?: string;
+    /**
+     * Optional inline styles applied to the outer element.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as

package/map/markers/RiskMarker/RiskMarker.js

@@ -16,14 +16,14 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var RiskMarkerBase = function (props) {
+    var _a;
     var handleClick = function (e) {
         e.stopPropagation();
         if (props.onClick) {
-            props.onClick();
+            props.onClick(e);
         }
     };
-    var size = 80;
-    return (React.createElement("div", { className: "".concat(props.className, " ").concat(props.value > 0 ? 'audited ' : 'unaudited ', " ").concat(props.actioned ? 'actioned ' : '', " ").concat(props.active ? 'active ' : ''), style: { width: "".concat(size, "px"), height: "".concat(size, "px") }, onClick: handleClick },
+    return (React.createElement("div", { className: "".concat(props.className, " ").concat(((_a = props.value) !== null && _a !== void 0 ? _a : 0) > 0 ? 'audited ' : 'unaudited ', " ").concat(props.actioned ? 'actioned ' : '', " ").concat(props.active ? 'active ' : ''), style: props.style, onClick: handleClick },
         React.createElement("span", null, props.value),
         React.createElement("svg", { viewBox: "0 0 60 60" },
             React.createElement("path", { className: "background", fill: "#808080", fillOpacity: "0.7", d: "M19.0156 38.625C22.0352 35.6761 23.5975 38.9978 29.8862 38.9978C36.1437 38.9978 37.7209 35.8054 40.9297 38.6875C44.667 34.9361 50.4414 33.5238 50.4414 27.781C50.4414 16.3436 41.2634 7.07178 29.9414 7.07178C18.6195 7.07178 9.44141 16.3436 9.44141 27.781C9.44141 33.5662 15.2294 34.8675 19.0156 38.625Z" }),
@@ -37,7 +37,7 @@ var RiskMarkerBase = function (props) {
             React.createElement("path", { className: "no-action", fill: props.color, d: "M42.3623 11.1596C42.366 11.1624 42.3702 11.1646 42.374 11.1673C42.0952 10.9667 41.8147 10.7682 41.5257 10.5811C41.526 10.5812 41.5255 10.5811 41.5257 10.5811C41.524 10.5874 41.5205 10.5932 41.5185 10.5995C38.2075 8.45041 34.2622 7.17529 30.0006 7.17529C25.7501 7.17529 21.815 8.44472 18.5087 10.5835L18.5072 10.5811C12.7877 14.2844 8.97314 20.6539 8.97314 27.9018C8.97314 33.595 11.3058 38.7493 15.0775 42.4946L19.0258 38.6037C16.2649 35.8544 14.557 32.0755 14.557 27.9018C14.557 22.7029 17.2828 18.0472 21.3201 15.3016C23.7952 13.6421 26.7811 12.6672 30.0005 12.6672C33.2389 12.6672 36.2422 13.6518 38.7257 15.3292C38.722 15.3333 38.719 15.338 38.715 15.342C42.7762 18.0838 45.443 22.6843 45.443 27.9018C45.443 32.1043 43.7145 35.9088 40.9199 38.6627L44.8682 42.5537C48.6733 38.8039 51.027 33.6237 51.027 27.9017C51.0272 21.0153 47.6086 14.9265 42.3623 11.1596Z" }),
             React.createElement("path", { className: "action", fill: "#fff", d: "M30 13.9319C33.017 13.9319 35.4628 11.5697 35.4628 8.65588C35.4628 5.74203 33.017 3.37988 30 3.37988C26.983 3.37988 24.5374 5.74203 24.5374 8.65588C24.5374 11.5697 26.983 13.9319 30 13.9319Z" }))));
 };
-var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  width: 60px;\n  height: 60px;\n  // Translate icon so that pin is exactly at center of lat/lng.\n  transform: translateX(0.5px) translateY(-34px);\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }  \n\n  & > span {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #476988;\n    pointer-events: none; // Don't capture SVG's mouse events\n    margin-bottom: 5px;\n  }\n\n  & > svg {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    cursor: pointer;\n    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n  }\n\n  // By default, all first-level paths/g in marker are hidden.\n  & > svg > * { visibility: hidden; }\n     \n  // Unhide and color parts based on marker class.\n  &.unaudited {\n    .farm { visibility: visible; }\n    .arrow { visibility: visible; }\n    &:hover {\n      .farm-stroke { visibility: visible; fill: #888; }\n    }\n  }\n\n  &.audited {\n    .farm { visibility: visible; fill: #fff; }\n    .arrow { visibility: visible; fill: #fff; }\n    .no-action { visibility: visible; }\n    .background { visibility: visible; }\n    &:hover {\n      .background { fill: #fff; }\n    }\n  }\n\n  &.actioned {\n    .no-action { visibility: hidden; }\n    .audit { visibility: visible; }\n    .action { visibility: visible; }\n    .action-shadow { visibility: visible; }\n  }\n\n  &.active {\n    span {\n      color: #fff;\n    }\n    .farm { fill: #273C44; }\n    .farm-stroke { visibility: visible; fill: #fff; }\n    .background { fill: #808080; }\n    &:hover {\n      .background { fill: #808080; }\n    }\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  width: 60px;\n  height: 60px;\n  // Translate icon so that pin is exactly at center of lat/lng.\n  transform: translateX(0.5px) translateY(-34px);\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }  \n\n  & > span {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #476988;\n    pointer-events: none; // Don't capture SVG's mouse events\n    margin-bottom: 5px;\n  }\n\n  & > svg {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    cursor: pointer;\n    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n  }\n\n  // By default, all first-level paths/g in marker are hidden.\n  & > svg > * { visibility: hidden; }\n     \n  // Unhide and color parts based on marker class.\n  &.unaudited {\n    .farm { visibility: visible; }\n    .arrow { visibility: visible; }\n    &:hover {\n      .farm-stroke { visibility: visible; fill: #888; }\n    }\n  }\n\n  &.audited {\n    .farm { visibility: visible; fill: #fff; }\n    .arrow { visibility: visible; fill: #fff; }\n    .no-action { visibility: visible; }\n    .background { visibility: visible; }\n    &:hover {\n      .background { fill: #fff; }\n    }\n  }\n\n  &.actioned {\n    .no-action { visibility: hidden; }\n    .audit { visibility: visible; }\n    .action { visibility: visible; }\n    .action-shadow { visibility: visible; }\n  }\n\n  &.active {\n    span {\n      color: #fff;\n    }\n    .farm { fill: #273C44; }\n    .farm-stroke { visibility: visible; fill: #fff; }\n    .background { fill: #808080; }\n    &:hover {\n      .background { fill: #808080; }\n    }\n  }\n"
+var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  width: 80px;\n  height: 80px;\n  // Translate icon so that pin is exactly at center of lat/lng.\n  transform: translateX(0.5px) translateY(-34px);\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }  \n\n  & > span {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #476988;\n    pointer-events: none; // Don't capture SVG's mouse events\n    margin-bottom: 5px;\n  }\n\n  & > svg {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    cursor: pointer;\n    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n  }\n\n  // By default, all first-level paths/g in marker are hidden.\n  & > svg > * { visibility: hidden; }\n     \n  // Unhide and color parts based on marker class.\n  &.unaudited {\n    .farm { visibility: visible; }\n    .arrow { visibility: visible; }\n    &:hover {\n      .farm-stroke { visibility: visible; fill: #888; }\n    }\n  }\n\n  &.audited {\n    .farm { visibility: visible; fill: #fff; }\n    .arrow { visibility: visible; fill: #fff; }\n    .no-action { visibility: visible; }\n    .background { visibility: visible; }\n    &:hover {\n      .background { fill: #fff; }\n    }\n  }\n\n  &.actioned {\n    .no-action { visibility: hidden; }\n    .audit { visibility: visible; }\n    .action { visibility: visible; }\n    .action-shadow { visibility: visible; }\n  }\n\n  &.active {\n    span {\n      color: #fff;\n    }\n    .farm { fill: #273C44; }\n    .farm-stroke { visibility: visible; fill: #fff; }\n    .background { fill: #808080; }\n    &:hover {\n      .background { fill: #808080; }\n    }\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  width: 80px;\n  height: 80px;\n  // Translate icon so that pin is exactly at center of lat/lng.\n  transform: translateX(0.5px) translateY(-34px);\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }  \n\n  & > span {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #476988;\n    pointer-events: none; // Don't capture SVG's mouse events\n    margin-bottom: 5px;\n  }\n\n  & > svg {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    cursor: pointer;\n    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n  }\n\n  // By default, all first-level paths/g in marker are hidden.\n  & > svg > * { visibility: hidden; }\n     \n  // Unhide and color parts based on marker class.\n  &.unaudited {\n    .farm { visibility: visible; }\n    .arrow { visibility: visible; }\n    &:hover {\n      .farm-stroke { visibility: visible; fill: #888; }\n    }\n  }\n\n  &.audited {\n    .farm { visibility: visible; fill: #fff; }\n    .arrow { visibility: visible; fill: #fff; }\n    .no-action { visibility: visible; }\n    .background { visibility: visible; }\n    &:hover {\n      .background { fill: #fff; }\n    }\n  }\n\n  &.actioned {\n    .no-action { visibility: hidden; }\n    .audit { visibility: visible; }\n    .action { visibility: visible; }\n    .action-shadow { visibility: visible; }\n  }\n\n  &.active {\n    span {\n      color: #fff;\n    }\n    .farm { fill: #273C44; }\n    .farm-stroke { visibility: visible; fill: #fff; }\n    .background { fill: #808080; }\n    &:hover {\n      .background { fill: #808080; }\n    }\n  }\n"
     /**
      * A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as
      * component on its own.

package/modules/CountryDropdown/CountryDropdown.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import * as React from 'react';
 import { Dropdown } from '../../inputs/Dropdown';
 import { Countries } from '../../formatters/CountryFormatter/Countries';
@@ -27,7 +36,7 @@ var CountryDropdown = function (props) {
     var _a = React.useState(null), q = _a[0], setQ = _a[1];
     var localizedNames = getCountries(props.locale);
     var sortedKeys = React.useMemo(function () {
-        return countryKeys.sort(function (a, b) { return localizedNames[a].localeCompare(localizedNames[b]); });
+        return __spreadArray([], countryKeys, true).sort(function (a, b) { return localizedNames[a].localeCompare(localizedNames[b]); });
     }, [localizedNames]);
     var data = sortedKeys
         .filter(function (c) { return !props.countries || props.countries.includes(c.toUpperCase()); })

package/modules/Filter/Filter.d.ts

@@ -12,6 +12,11 @@ interface IFilterProps extends ITestable {
      * @default 250
      */
     width?: number;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `Filter` is a combination of a filter button and a panel. The panel is

package/modules/Filter/Filter.js

@@ -32,10 +32,14 @@ import { ToggleButton } from '../../controls/ToggleButton';
 import { GlassPane } from '../../containers/GlassPane';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
 import { SVG } from '../../svg';
+// Default prop value, referenced both by the FilterBase fallback and the
+// Filter wrapper below.
+var DEFAULT_WIDTH = 250;
 var FilterBase = function (props) {
+    var _a;
     var buttonRef = React.useRef(null);
     var paneRef = React.useRef(null);
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     useOutsideClose({
         open: open,
         refs: [paneRef, buttonRef],
@@ -43,7 +47,7 @@ var FilterBase = function (props) {
         escapeToClose: true,
         blurToClose: false
     });
-    var _b = usePopper(buttonRef.current, paneRef.current, {
+    var _c = usePopper(buttonRef.current, paneRef.current, {
         placement: 'bottom-end',
         modifiers: [
             {
@@ -53,16 +57,16 @@ var FilterBase = function (props) {
                 },
             }
         ]
-    }), styles = _b.styles, attributes = _b.attributes, update = _b.update;
+    }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
     var toggleOpen = function () {
         setOpen(!open);
         // Update popper.
         if (update)
             update();
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Filter", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Filter", className: props.className, style: props.style },
         React.createElement(ToggleButton, { url: SVG.Icons.Filter, ref: buttonRef, active: props.active, open: open, onClick: toggleOpen }),
-        createPortal(React.createElement(Pane, __assign({ "data-test-id": "Filter.Pane", "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(GlassPane, { padded: true, bordered: true }, props.children)), document.body)));
+        createPortal(React.createElement(Pane, __assign({ "data-testid": "Filter.Pane", "$open": open, "$width": (_a = props.width) !== null && _a !== void 0 ? _a : DEFAULT_WIDTH, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(GlassPane, { padded: true, bordered: true }, props.children)), 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"
     /**
@@ -77,7 +81,7 @@ var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObje
  * be clipped.
  */
 var Filter = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 250 : _b, props = __rest(_a, ["width"]);
+    var _b = _a.width, width = _b === void 0 ? DEFAULT_WIDTH : _b, props = __rest(_a, ["width"]);
     return React.createElement(FilterBase, __assign({ width: width }, props));
 };
 Filter.displayName = "Filter";

package/modules/Globe/Globe.d.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 interface IGlobeProps {
     /** @ignore */
     className?: string;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Globe: {
     (props: IGlobeProps): React.JSX.Element;

package/modules/Globe/Globe.js

@@ -76,7 +76,6 @@ var GlobeBase = function (props) {
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer.current);
         var positions = getFibonacciSpherePoints(NUM_POINTS, 1.0, false);
         numPoints.current = positions.length / 3;
-        console.log("Total points after water subtraction", numPoints.current);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
     };
     var draw = function (gl) {
@@ -129,10 +128,11 @@ var GlobeBase = function (props) {
         createBuffer(gl.current);
         animationID.current = window.requestAnimationFrame(animate);
         return function () {
-            window.cancelAnimationFrame(animationID.current);
+            if (animationID.current !== null)
+                window.cancelAnimationFrame(animationID.current);
         };
-    });
-    return (React.createElement("canvas", { className: props.className, ref: canvasRef, width: "1024", height: "768" }));
+    }, []);
+    return (React.createElement("canvas", { className: props.className, style: props.style, ref: canvasRef, width: "1024", height: "768" }));
 };
 var GlobeStyled = styled(GlobeBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n"], ["\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n"])));
 var Globe = function (props) { return React.createElement(GlobeStyled, __assign({}, props)); };

package/modules/MainMenu/Item.d.ts

@@ -32,9 +32,16 @@ interface IProps extends ITestable {
      */
     disabled?: boolean;
     /**
-     * If set, this callback it triggered when the item is clicked.
+     * If set, this callback is triggered when the item is clicked. Receives the
+     * mouse event. The Item itself is presentational (not keyboard-focusable);
+     * for keyboard access, wrap it in a focusable element such as a link.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Item: {
     ({ active, secondary, noExpand, disabled, ...props }: IProps): React.JSX.Element;

package/modules/MainMenu/Item.js

@@ -32,15 +32,16 @@ var BUTTON_SIZE = 50;
 // The width x height of an icon inside the button.
 var ICON_SIZE = 26;
 var ItemBase = function (props) {
-    var _a;
     // The <Content> element contains the actual menu text. The width of this
     // element depends on the length of the text. It is this width that must
     // be used for the animation.
-    var content = React.useRef();
-    var _b = useSpring(function () { return ({
+    var content = React.useRef(null);
+    var _a = useSpring(function () { return ({
         from: { maxWidth: BUTTON_SIZE }
-    }); }), springs = _b[0], api = _b[1];
+    }); }), springs = _a[0], api = _a[1];
     var handleMouseEnter = function () {
+        if (!content.current)
+            return;
         api.start({
             from: {
                 maxWidth: BUTTON_SIZE,
@@ -58,6 +59,8 @@ var ItemBase = function (props) {
         });
     };
     var handleMouseLeave = function () {
+        if (!content.current)
+            return;
         api.start({
             from: {
                 maxWidth: content.current.scrollWidth + 24 + 13,
@@ -74,7 +77,7 @@ var ItemBase = function (props) {
             }
         });
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "MainMenu.Item", tabIndex: -1, className: props.className, onMouseEnter: !props.noExpand ? handleMouseEnter : null, onMouseLeave: !props.noExpand ? handleMouseLeave : null, onClick: (_a = props.onClick) !== null && _a !== void 0 ? _a : null },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MainMenu.Item", tabIndex: -1, className: props.className, style: props.style, onMouseEnter: !props.noExpand ? handleMouseEnter : undefined, onMouseLeave: !props.noExpand ? handleMouseLeave : undefined, onClick: props.onClick },
         React.createElement(Animatable, { style: __assign({}, springs) },
             React.createElement(Content, { ref: content },
                 React.createElement(Svg, null,

package/modules/MainMenu/MainMenu.d.ts

@@ -5,6 +5,11 @@ interface IMainMenuProps extends ITestable {
     className?: string;
     /** @ignore */
     children?: React.ReactNode;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `MainMenu` is always positioned on the left side of its container, and

package/modules/MainMenu/MainMenu.js

@@ -48,7 +48,7 @@ var MainMenuBase = function (props) {
             primaryItems.push(child);
         }
     });
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "MainMenu", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MainMenu", className: props.className, style: props.style, role: "navigation", "aria-label": "Main menu" },
         React.createElement(Top, { "data-testid": "MainMenu.Top" }, primaryItems),
         React.createElement(Bottom, { "data-testid": "MainMenu.Bottom" }, secondaryItems)));
 };

package/modules/ParticleGlobe/GL.d.ts

@@ -1,6 +1,6 @@
 declare class GL {
     static createProgram: (gl: WebGLRenderingContext, vertexSource: string, fragmentSource: string) => WebGLProgram;
-    static createRGBATexture: (gl: WebGLRenderingContext, size: number, content: Uint8Array, interpolated: boolean) => WebGLTexture;
+    static createRGBATexture: (gl: WebGLRenderingContext, size: number, content: Uint8Array | null, interpolated: boolean) => WebGLTexture;
     static createImageTexture: (gl: WebGLRenderingContext, image: HTMLImageElement, interpolation: boolean) => WebGLTexture;
     static createFrameBuffer: (gl: WebGLRenderingContext, texture: WebGLTexture) => WebGLFramebuffer;
 }

package/modules/ParticleGlobe/ParticleGlobe.d.ts

@@ -86,6 +86,11 @@ interface IParticleGlobeProps {
      * @default false
      */
     responsive?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const ParticleGlobe: {
     ({ numParticles, globe, trails, pointSize, angleX, angleY, deltaX, deltaY, outlines, minLifetime, maxLifetime, glow, landmass, brightness, speedFactor, responsive, gradientStops, ...props }: IParticleGlobeProps): React.JSX.Element;