@longline/aqua-ui 1.0.339 → 1.0.340

package/modules/ParticleGlobe/ParticleGlobe.js

@@ -47,7 +47,20 @@ import { RgbColor } from '../../helper/RgbColor';
 var VERTEX_TEXTURE_SIZE = 2048; // horizontal and vertical resolution
 var UV_TEXTURE_SIZE = 1024;
 var OUTPUT_TEXTURE_SIZE = 2048;
+// Prop defaults (shared by the base fallbacks and the export wrapper):
+var DEFAULT_NUM_PARTICLES = 100000;
+var DEFAULT_TRAILS = 0;
+var DEFAULT_POINT_SIZE = 1;
+var DEFAULT_ANGLE_X = 15;
+var DEFAULT_ANGLE_Y = 0;
+var DEFAULT_DELTA_X = 0;
+var DEFAULT_DELTA_Y = 0.02;
+var DEFAULT_MIN_LIFETIME = 60;
+var DEFAULT_MAX_LIFETIME = 1000;
+var DEFAULT_GLOW = 0;
+var DEFAULT_SPEED_FACTOR = 1000.0;
 var ParticleGlobeBase = function (props) {
+    var _a, _b;
     var wrapperRef = React.useRef(null);
     var canvasRef = React.useRef(null);
     var gl = React.useRef(null);
@@ -79,19 +92,20 @@ var ParticleGlobeBase = function (props) {
     var sphereElementCount = React.useRef(0);
     // Other:
     var animationID = React.useRef(null);
-    var angleX = React.useRef(props.angleX);
-    var angleY = React.useRef(props.angleY);
+    var angleX = React.useRef((_a = props.angleX) !== null && _a !== void 0 ? _a : DEFAULT_ANGLE_X);
+    var angleY = React.useRef((_b = props.angleY) !== null && _b !== void 0 ? _b : DEFAULT_ANGLE_Y);
     var frame = React.useRef(0);
     var swap = React.useRef(false);
     var mouseX = React.useRef(0);
     var mouseY = React.useRef(0);
     var createSourceTexture = function (gl, size) {
+        var _a;
         // Prepare x,y positions for vertices;
         // Reserve 2 bytes for X-position, and 2 bytes for Y-position,
         // so a total of 4 bytes per vertex.
         var arr = new Uint8Array(VERTEX_TEXTURE_SIZE * VERTEX_TEXTURE_SIZE * 4);
         arr.fill(255);
-        for (var i = 0; i < props.numParticles; i++) {
+        for (var i = 0; i < ((_a = props.numParticles) !== null && _a !== void 0 ? _a : DEFAULT_NUM_PARTICLES); i++) {
             var x = Math.random();
             var y = Math.random();
             // Multiply this by 65536 to occupy two bytes.
@@ -114,11 +128,12 @@ var ParticleGlobeBase = function (props) {
         return GL.createImageTexture(gl, image, true);
     };
     var createPointsBuffer = function (gl) {
+        var _a;
         pointsBuffer.current = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer.current);
         var positions = [];
         // Create vertex indices: 0, 1, 2, ...
-        for (var i = 0; i < props.numParticles; i++)
+        for (var i = 0; i < ((_a = props.numParticles) !== null && _a !== void 0 ? _a : DEFAULT_NUM_PARTICLES); i++)
             positions.push(i);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
     };
@@ -205,16 +220,17 @@ var ParticleGlobeBase = function (props) {
         sphereElementCount.current = positions.length / 3;
     };
     var drawVertices = function (gl, sourceTexture) {
+        var _a, _b, _c, _d;
         var program = pointsProgram.current;
         gl.useProgram(program);
         // Random seed:
         gl.uniform1i(gl.getUniformLocation(program, "u_frame"), frame.current);
         gl.uniform1f(gl.getUniformLocation(program, "u_seed"), Math.random());
         // Particle lifetime:
-        gl.uniform1f(gl.getUniformLocation(program, "u_minlifetime"), props.minLifetime);
-        gl.uniform1f(gl.getUniformLocation(program, "u_maxlifetime"), props.maxLifetime);
+        gl.uniform1f(gl.getUniformLocation(program, "u_minlifetime"), (_a = props.minLifetime) !== null && _a !== void 0 ? _a : DEFAULT_MIN_LIFETIME);
+        gl.uniform1f(gl.getUniformLocation(program, "u_maxlifetime"), (_b = props.maxLifetime) !== null && _b !== void 0 ? _b : DEFAULT_MAX_LIFETIME);
         // Speed factor:
-        gl.uniform1f(gl.getUniformLocation(program, "u_speedfactor"), props.speedFactor);
+        gl.uniform1f(gl.getUniformLocation(program, "u_speedfactor"), (_c = props.speedFactor) !== null && _c !== void 0 ? _c : DEFAULT_SPEED_FACTOR);
         // Texture:
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
@@ -229,7 +245,7 @@ var ParticleGlobeBase = function (props) {
         gl.vertexAttribPointer(aIndex, 1, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(aIndex);
         gl.disable(gl.BLEND);
-        gl.drawArrays(gl.POINTS, 0, props.numParticles);
+        gl.drawArrays(gl.POINTS, 0, (_d = props.numParticles) !== null && _d !== void 0 ? _d : DEFAULT_NUM_PARTICLES);
     };
     var drawTexture = function (gl, texture, blend, flip, brightness) {
         if (blend === void 0) { blend = true; }
@@ -264,15 +280,17 @@ var ParticleGlobeBase = function (props) {
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     };
     var drawOutput = function (gl, texture) {
+        var _a, _b, _c;
         var program = outputProgram.current;
         gl.useProgram(program);
         // Stops - fill up to 12 stops by using values > 1 for filler stops.
         // e.g. [0.0, 0.5, 1.0, 2.0....] means that only the first 3 stops are used.
-        var stops = __spreadArray([], props.gradientStops.map(function (s) { return s.pos; }), true);
+        var gradientStops = (_a = props.gradientStops) !== null && _a !== void 0 ? _a : [];
+        var stops = __spreadArray([], gradientStops.map(function (s) { return s.pos; }), true);
         while (stops.length < 12)
             stops.push(2.0);
         gl.uniform1fv(gl.getUniformLocation(program, 'u_gradientStops'), new Float32Array(stops));
-        var colors = props.gradientStops.map(function (s) { return RgbColor.toRGBA(s.color); }).flat();
+        var colors = gradientStops.map(function (s) { return RgbColor.toRGBA(s.color); }).flat();
         gl.uniform4fv(gl.getUniformLocation(program, 'u_gradientColors'), new Float32Array(colors));
         // The vertex atlas texture goes in:
         gl.activeTexture(gl.TEXTURE0);
@@ -284,7 +302,7 @@ var ParticleGlobeBase = function (props) {
         gl.uniform1i(gl.getUniformLocation(program, "u_uvtexture"), 1);
         gl.uniform1f(gl.getUniformLocation(program, "u_uvresolution"), UV_TEXTURE_SIZE);
         // Point size:
-        gl.uniform1f(gl.getUniformLocation(program, "u_pointsize"), props.pointSize);
+        gl.uniform1f(gl.getUniformLocation(program, "u_pointsize"), (_b = props.pointSize) !== null && _b !== void 0 ? _b : DEFAULT_POINT_SIZE);
         // Vertex indices:
         var aIndex = gl.getAttribLocation(program, "a_index");
         gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer.current);
@@ -293,7 +311,7 @@ var ParticleGlobeBase = function (props) {
         // Draw points:
         gl.enable(gl.BLEND);
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.drawArrays(gl.POINTS, 0, props.numParticles);
+        gl.drawArrays(gl.POINTS, 0, (_c = props.numParticles) !== null && _c !== void 0 ? _c : DEFAULT_NUM_PARTICLES);
     };
     var drawOutline = function (gl) {
         var program = outlineProgram.current;
@@ -371,6 +389,7 @@ var ParticleGlobeBase = function (props) {
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     };
     var draw = function (gl) {
+        var _a;
         frame.current++;
         swap.current = !swap.current;
         // Draw into swapping framebuffer:
@@ -378,7 +397,7 @@ var ParticleGlobeBase = function (props) {
         gl.bindFramebuffer(gl.FRAMEBUFFER, swap.current ? fbo2.current : fbo1.current);
         gl.clearColor(0.0, 0.0, 0.0, 1.0); // clear to transparent
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-        drawVertices(gl, swap.current ? texture1.current : texture2.current);
+        drawVertices(gl, (swap.current ? texture1.current : texture2.current));
         // Draw result into "out" framebuffer:
         gl.viewport(0, 0, OUTPUT_TEXTURE_SIZE, OUTPUT_TEXTURE_SIZE);
         gl.bindFramebuffer(gl.FRAMEBUFFER, fboOut.current);
@@ -387,10 +406,10 @@ var ParticleGlobeBase = function (props) {
             gl.clear(gl.COLOR_BUFFER_BIT);
         }
         else {
-            if (frame.current % props.trails == 0)
+            if (frame.current % ((_a = props.trails) !== null && _a !== void 0 ? _a : DEFAULT_TRAILS) == 0)
                 drawFade(gl);
         }
-        drawOutput(gl, swap.current ? texture2.current : texture1.current);
+        drawOutput(gl, (swap.current ? texture2.current : texture1.current));
         if (props.outlines) {
             drawOutline(gl);
         }
@@ -422,39 +441,45 @@ var ParticleGlobeBase = function (props) {
         }
     };
     var handleMouseMove = function (e) {
+        if (!wrapperRef.current)
+            return;
         mouseX.current = e.clientX / wrapperRef.current.clientWidth * 2.0 - 1.0;
         mouseY.current = e.clientY / wrapperRef.current.clientHeight * 2.0 - 1.0;
     };
     var animate = function () {
+        var _a, _b;
         draw(gl.current);
-        angleX.current = (angleX.current + props.deltaX) % 360;
-        angleY.current = (angleY.current + props.deltaY) % 360;
+        angleX.current = (angleX.current + ((_a = props.deltaX) !== null && _a !== void 0 ? _a : DEFAULT_DELTA_X)) % 360;
+        angleY.current = (angleY.current + ((_b = props.deltaY) !== null && _b !== void 0 ? _b : DEFAULT_DELTA_Y)) % 360;
         animationID.current = requestAnimationFrame(animate);
     };
     var setup = function (uvImage, nightImage) {
         if (!canvasRef.current)
             return;
         gl.current = canvasRef.current.getContext("webgl");
-        pointsProgram.current = GL.createProgram(gl.current, PointsVertexShader, PointsFragmentShader);
-        outputProgram.current = GL.createProgram(gl.current, OutputVertexShader, OutputFragmentShader);
-        fadeProgram.current = GL.createProgram(gl.current, FadeVertexShader, FadeFragmentShader);
-        outlineProgram.current = GL.createProgram(gl.current, OutlineVertexShader, OutlineFragmentShader);
-        sphereProgram.current = GL.createProgram(gl.current, SphereVertexShader, SphereFragmentShader);
-        textureProgram.current = GL.createProgram(gl.current, TextureVertexShader, TextureFragmentShader);
-        createPointsBuffer(gl.current);
-        createSquareBuffer(gl.current);
-        createSphere(gl.current, 1, 60, 60);
-        texture1.current = createSourceTexture(gl.current, VERTEX_TEXTURE_SIZE);
-        texture2.current = createEmptyTexture(gl.current, VERTEX_TEXTURE_SIZE);
-        textureUV.current = createUVTexture(gl.current, uvImage);
-        textureOut.current = createEmptyTexture(gl.current, OUTPUT_TEXTURE_SIZE);
+        var context = gl.current;
+        if (!context)
+            return;
+        pointsProgram.current = GL.createProgram(context, PointsVertexShader, PointsFragmentShader);
+        outputProgram.current = GL.createProgram(context, OutputVertexShader, OutputFragmentShader);
+        fadeProgram.current = GL.createProgram(context, FadeVertexShader, FadeFragmentShader);
+        outlineProgram.current = GL.createProgram(context, OutlineVertexShader, OutlineFragmentShader);
+        sphereProgram.current = GL.createProgram(context, SphereVertexShader, SphereFragmentShader);
+        textureProgram.current = GL.createProgram(context, TextureVertexShader, TextureFragmentShader);
+        createPointsBuffer(context);
+        createSquareBuffer(context);
+        createSphere(context, 1, 60, 60);
+        texture1.current = createSourceTexture(context, VERTEX_TEXTURE_SIZE);
+        texture2.current = createEmptyTexture(context, VERTEX_TEXTURE_SIZE);
+        textureUV.current = createUVTexture(context, uvImage);
+        textureOut.current = createEmptyTexture(context, OUTPUT_TEXTURE_SIZE);
         if (props.landmass != 'none')
-            textureLandmass.current = createLandmassTexture(gl.current, nightImage);
-        textureSphere.current = createEmptyTexture(gl.current, OUTPUT_TEXTURE_SIZE);
-        fbo1.current = GL.createFrameBuffer(gl.current, texture1.current);
-        fbo2.current = GL.createFrameBuffer(gl.current, texture2.current);
-        fboOut.current = GL.createFrameBuffer(gl.current, textureOut.current);
-        fboSphere.current = GL.createFrameBuffer(gl.current, textureSphere.current);
+            textureLandmass.current = createLandmassTexture(context, nightImage);
+        textureSphere.current = createEmptyTexture(context, OUTPUT_TEXTURE_SIZE);
+        fbo1.current = GL.createFrameBuffer(context, texture1.current);
+        fbo2.current = GL.createFrameBuffer(context, texture2.current);
+        fboOut.current = GL.createFrameBuffer(context, textureOut.current);
+        fboSphere.current = GL.createFrameBuffer(context, textureSphere.current);
         animationID.current = window.requestAnimationFrame(animate);
     };
     var step2 = function (image) {
@@ -477,19 +502,23 @@ var ParticleGlobeBase = function (props) {
         if (props.responsive)
             document.addEventListener('mousemove', handleMouseMove);
         return function () {
-            window.cancelAnimationFrame(animationID.current);
+            if (animationID.current !== null)
+                window.cancelAnimationFrame(animationID.current);
             document.removeEventListener('mousemove', handleMouseMove);
         };
     }, []);
-    return (React.createElement("div", { className: props.className, ref: wrapperRef },
+    return (React.createElement("div", { className: props.className, style: props.style, ref: wrapperRef },
         React.createElement("canvas", { ref: canvasRef, width: "1024", height: "768" })));
 };
-var ParticleGlobeStyled = styled(ParticleGlobeBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  ", "\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  ", "\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n  ", "\n"])), function (p) { return p.globe && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), p.glow); }, function (p) { return p.globe && css(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n    &:before {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: radial-gradient(circle closest-side at center, black 0%, black calc(100% - ", "px), white calc(100% - ", "px), transparent 100%);\n    }\n  "], [" \n    &:before {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: radial-gradient(circle closest-side at center, black 0%, black calc(100% - ", "px), white calc(100% - ", "px), transparent 100%);\n    }\n  "])), p.glow + 2, p.glow + 2); });
+var ParticleGlobeStyled = styled(ParticleGlobeBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  ", "\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  ", "\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n  ", "\n"])), function (p) { return p.globe && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), p.glow); }, function (p) {
+    var _a, _b;
+    return p.globe && css(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n    &:before {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: radial-gradient(circle closest-side at center, black 0%, black calc(100% - ", "px), white calc(100% - ", "px), transparent 100%);\n    }\n  "], [" \n    &:before {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: radial-gradient(circle closest-side at center, black 0%, black calc(100% - ", "px), white calc(100% - ", "px), transparent 100%);\n    }\n  "])), ((_a = p.glow) !== null && _a !== void 0 ? _a : DEFAULT_GLOW) + 2, ((_b = p.glow) !== null && _b !== void 0 ? _b : DEFAULT_GLOW) + 2);
+});
 var ParticleGlobeWrapper = function (props) {
     return React.createElement(ParticleGlobeStyled, __assign({}, props));
 };
 var ParticleGlobe = function (_a) {
-    var _b = _a.numParticles, numParticles = _b === void 0 ? 100000 : _b, _c = _a.globe, globe = _c === void 0 ? false : _c, _d = _a.trails, trails = _d === void 0 ? 0 : _d, _e = _a.pointSize, pointSize = _e === void 0 ? 1 : _e, _f = _a.angleX, angleX = _f === void 0 ? 15 : _f, _g = _a.angleY, angleY = _g === void 0 ? 0 : _g, _h = _a.deltaX, deltaX = _h === void 0 ? 0 : _h, _j = _a.deltaY, deltaY = _j === void 0 ? 0.02 : _j, _k = _a.outlines, outlines = _k === void 0 ? false : _k, _l = _a.minLifetime, minLifetime = _l === void 0 ? 60 : _l, _m = _a.maxLifetime, maxLifetime = _m === void 0 ? 1000 : _m, _o = _a.glow, glow = _o === void 0 ? 0 : _o, _p = _a.landmass, landmass = _p === void 0 ? 'none' : _p, _q = _a.brightness, brightness = _q === void 0 ? 1.0 : _q, _r = _a.speedFactor, speedFactor = _r === void 0 ? 1000.0 : _r, _s = _a.responsive, responsive = _s === void 0 ? false : _s, _t = _a.gradientStops, gradientStops = _t === void 0 ? [
+    var _b = _a.numParticles, numParticles = _b === void 0 ? DEFAULT_NUM_PARTICLES : _b, _c = _a.globe, globe = _c === void 0 ? false : _c, _d = _a.trails, trails = _d === void 0 ? DEFAULT_TRAILS : _d, _e = _a.pointSize, pointSize = _e === void 0 ? DEFAULT_POINT_SIZE : _e, _f = _a.angleX, angleX = _f === void 0 ? DEFAULT_ANGLE_X : _f, _g = _a.angleY, angleY = _g === void 0 ? DEFAULT_ANGLE_Y : _g, _h = _a.deltaX, deltaX = _h === void 0 ? DEFAULT_DELTA_X : _h, _j = _a.deltaY, deltaY = _j === void 0 ? DEFAULT_DELTA_Y : _j, _k = _a.outlines, outlines = _k === void 0 ? false : _k, _l = _a.minLifetime, minLifetime = _l === void 0 ? DEFAULT_MIN_LIFETIME : _l, _m = _a.maxLifetime, maxLifetime = _m === void 0 ? DEFAULT_MAX_LIFETIME : _m, _o = _a.glow, glow = _o === void 0 ? DEFAULT_GLOW : _o, _p = _a.landmass, landmass = _p === void 0 ? 'none' : _p, _q = _a.brightness, brightness = _q === void 0 ? 1.0 : _q, _r = _a.speedFactor, speedFactor = _r === void 0 ? DEFAULT_SPEED_FACTOR : _r, _s = _a.responsive, responsive = _s === void 0 ? false : _s, _t = _a.gradientStops, gradientStops = _t === void 0 ? [
         { pos: 0.0, color: '#2c425300' },
         { pos: 0.01, color: '#2c425300' },
         { pos: 0.1, color: '#2c4253ff' },

package/modules/Public/Public.d.ts

@@ -29,6 +29,11 @@ interface IProps {
      * Optional additional header content.
      */
     header?: React.ReactNode;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Public: (props: IProps) => React.JSX.Element;
 export { Public };

package/modules/Public/Public.js

@@ -13,15 +13,15 @@ var Public = function (props) {
     var wrapperRef = React.useRef(null);
     var _a = React.useState(false), showHint = _a[0], setShowHint = _a[1];
     useOutsideClose({
-        open: true,
+        open: showHint,
         refs: [wrapperRef],
         onClose: function () { return setShowHint(false); },
         escapeToClose: true,
         blurToClose: false,
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { "data-testid": "Box", ref: wrapperRef },
-            React.createElement(Header, { logoUrl: props.logoUrl, logoAspectRatio: props.logoAspectRatio, onClick: props.hint ? function () { return setShowHint(!showHint); } : null, children: props.header }),
+        React.createElement(Box, { "data-testid": "Box", ref: wrapperRef, style: props.style },
+            React.createElement(Header, { logoUrl: props.logoUrl, logoAspectRatio: props.logoAspectRatio, onClick: props.hint ? function () { return setShowHint(!showHint); } : undefined, children: props.header }),
             React.createElement(Body, { height: props.height },
                 props.hint && React.createElement(Hint, { active: showHint }, props.hint),
                 props.children)),

package/package.json

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

package/services/Auth/Auth.js

@@ -33,14 +33,20 @@ import { AuthContext } from './AuthContext';
  */
 var Auth = function (props) {
     var getInitialState = function () {
-        // Try to load Auth from session storage.
-        var authStr = sessionStorage.getItem('auth');
-        var authData = authStr ? JSON.parse(authStr) : {};
         var initialState = {
-            access_token: null,
-            refresh_token: null
+            access_token: '',
+            refresh_token: ''
         };
-        initialState = __assign(__assign({}, initialState), authData);
+        // Try to load Auth from session storage. Guard against SSR (no
+        // sessionStorage) and corrupt stored JSON.
+        try {
+            var authStr = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('auth') : null;
+            if (authStr)
+                initialState = __assign(__assign({}, initialState), JSON.parse(authStr));
+        }
+        catch (_a) {
+            // Ignore corrupt stored auth and fall back to the empty state.
+        }
         return initialState;
     };
     var _a = React.useState(getInitialState()), data = _a[0], setData = _a[1];
@@ -54,7 +60,7 @@ var Auth = function (props) {
         sessionStorage.setItem('auth', JSON.stringify(newData));
     };
     var signout = function () {
-        setData({ access_token: null, refresh_token: null });
+        setData({ access_token: '', refresh_token: '' });
         // Remove auth from session:
         sessionStorage.removeItem('auth');
     };

package/services/Auth/AuthContext.js

@@ -1,3 +1,11 @@
 import * as React from 'react';
-var AuthContext = React.createContext(null);
+// Default no-op context used when there is no <Auth> provider above. The public
+// IAuthContext shape is unchanged; tokens default to empty strings (not null) so
+// access_token / refresh_token remain non-nullable strings.
+var AuthContext = React.createContext({
+    access_token: '',
+    refresh_token: '',
+    signin: function () { },
+    signout: function () { }
+});
 export { AuthContext };

package/services/Dialog/Dialog.d.ts

@@ -36,6 +36,11 @@ interface IDialogProps extends ITestable {
      * @default null
      */
     onClose?: () => void;
+    /**
+     * Optional inline styles applied to the dialog window, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Dialog: {
     ({ open, canClose, width, inverted, ...props }: IDialogProps): React.JSX.Element;
@@ -88,8 +93,8 @@ declare const Dialog: {
      * <Dialog.Confirm
      *   open={showConfirm}
      *   title="Delete Item"
-     *   onYes={handleDelete}
-     *   onNo={() => setShowConfirm(false)}
+     *   onConfirm={handleDelete}
+     *   onClose={() => setShowConfirm(false)}
      * >
      *   Are you sure you want to delete this item?
      * </Dialog.Confirm>

package/services/Dialog/Dialog.js

@@ -93,21 +93,22 @@ import { useOutsideClose } from '../../hooks/useOutsideClose';
  * a maximum of 400px to ensure proper display on mobile devices.
  */
 var DialogBase = function (props) {
+    var _a;
     var windowRef = React.useRef(null);
-    var _a = useTransitionState({
+    var _b = useTransitionState({
         timeout: 500,
         mountOnEnter: true,
         initialEntered: false,
         preEnter: true,
         unmountOnExit: true
-    }), _b = _a[0], status = _b.status, isMounted = _b.isMounted, isEnter = _b.isEnter, toggle = _a[1];
+    }), _c = _b[0], status = _c.status, isMounted = _c.isMounted, isEnter = _c.isEnter, toggle = _b[1];
     var close = function () {
         if (!props.canClose || !props.onClose)
             return;
         props.onClose();
     };
     useOutsideClose({
-        open: props.open,
+        open: (_a = props.open) !== null && _a !== void 0 ? _a : false,
         refs: [windowRef],
         onClose: close,
         escapeToClose: true,
@@ -118,7 +119,7 @@ var DialogBase = function (props) {
     }, [props.open]);
     return (React.createElement(React.Fragment, null, isMounted && React.createElement(React.Fragment, null,
         createPortal(React.createElement(DialogBackground, { "data-testid": "Dialog.Background", status: status }), document.body),
-        createPortal(React.createElement(DialogWindow, { "data-testid": props['data-testid'] || "Dialog.Window", inverted: props.inverted, width: props.width, ref: windowRef, status: status }, props.children), document.body))));
+        createPortal(React.createElement(DialogWindow, { "data-testid": props['data-testid'] || "Dialog.Window", inverted: props.inverted, width: props.width, style: props.style, ref: windowRef, status: status }, props.children), document.body))));
 };
 var Dialog = function (_a) {
     var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.canClose, canClose = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? 600 : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, props = __rest(_a, ["open", "canClose", "width", "inverted"]);
@@ -161,8 +162,8 @@ Dialog.Alert = AlertDialog;
  * <Dialog.Confirm
  *   open={showConfirm}
  *   title="Delete Item"
- *   onYes={handleDelete}
- *   onNo={() => setShowConfirm(false)}
+ *   onConfirm={handleDelete}
+ *   onClose={() => setShowConfirm(false)}
  * >
  *   Are you sure you want to delete this item?
  * </Dialog.Confirm>

package/services/Dialog/DialogWindow.d.ts

@@ -14,8 +14,10 @@ interface IDialogWindowProps extends ITestable {
      * useTransitionState class
      */
     status: string;
+    /** Optional inline styles applied to the dialog window. */
+    style?: React.CSSProperties;
 }
 declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IDialogWindowProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>> & string & Omit<React.ForwardRefExoticComponent<IDialogWindowProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
 export { DialogWindow };

package/services/Dialog/DialogWindow.js

@@ -9,7 +9,7 @@ var DialogWindowBase = React.forwardRef(function (props, ref) {
         // Stop any keyboard interaction propagating to parent components.
         ev.stopPropagation();
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "DialogWindow", className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "DialogWindow", className: "".concat(props.className, " ").concat(props.status), style: props.style, ref: ref, onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true" }, props.children));
 });
 var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) {
     if (!p.width)

package/services/Dialog/XhrDialog.d.ts

@@ -22,7 +22,7 @@ interface IXhrDialogProps {
     onRetry?: () => void;
     /**
      * Title for dialog.
-     * @default "Network error"
+     * @default "Server error"
      */
     title?: string;
     /**

package/services/Toast/Toast.js

@@ -54,14 +54,16 @@ var ToastBase = function (props) {
             props.onClose();
         }, props.duration);
         return function () {
-            window.clearTimeout(timerHandle.current);
+            if (timerHandle.current !== null)
+                window.clearTimeout(timerHandle.current);
         };
     }, []);
     //
     // Clicking the Action also closes the Toast.
     // 
     var handleAction = function () {
-        props.action();
+        var _a;
+        (_a = props.action) === null || _a === void 0 ? void 0 : _a.call(props);
         props.onClose();
     };
     return (React.createElement(React.Fragment, null, isMounted && React.createElement("div", { className: "".concat(props.className, " ").concat(status) },
@@ -74,7 +76,7 @@ var ToastBase = function (props) {
 var Message = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex: 1;\n  padding-left: 16px;\n  padding-right: 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex: 1;\n  padding-left: 16px;\n  padding-right: 16px;\n"])));
 var CloseButton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  cursor: pointer;\n\n  svg {\n    fill: ", ";\n    width: 20px;\n    height: 20px;\n  }  \n  &:hover {\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  cursor: pointer;\n\n  svg {\n    fill: ", ";\n    width: 20px;\n    height: 20px;\n  }  \n  &:hover {\n    svg {\n      fill: ", ";\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.colors.neutral[100]; });
 var Action = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  color: ", ";\n  cursor: pointer;\n  white-space: nowrap;\n  font: ", ";\n  text-transform: uppercase;\n  transition: color ease-in-out ", "ms;\n  &:hover {\n    color: ", ";\n  }\n  &:last-child {\n    padding-right: 16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  color: ", ";\n  cursor: pointer;\n  white-space: nowrap;\n  font: ", ";\n  text-transform: uppercase;\n  transition: color ease-in-out ", "ms;\n  &:hover {\n    color: ", ";\n  }\n  &:last-child {\n    padding-right: 16px;\n  }\n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.labelCaps; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[2]; });
-var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: #fff;\n  border-radius: ", "px;\n  font: ", ";\n\n  // Content:\n  a {\n    color: ", " !important;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity ", "ms ease;\n  &.preEnter, &.exiting, &.unmounted {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }\n\n"], ["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: #fff;\n  border-radius: ", "px;\n  font: ", ";\n\n  // Content:\n  a {\n    color: ", " !important;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity ", "ms ease;\n  &.preEnter, &.exiting, &.unmounted {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }\n\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.animation.duration * 2; });
+var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", "px;\n  font: ", ";\n\n  // Content:\n  a {\n    color: ", " !important;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity ", "ms ease;\n  &.preEnter, &.exiting, &.unmounted {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }\n\n"], ["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", "px;\n  font: ", ";\n\n  // Content:\n  a {\n    color: ", " !important;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity ", "ms ease;\n  &.preEnter, &.exiting, &.unmounted {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }\n\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.animation.duration * 2; });
 /**
  * A brief notification message that appears temporarily to provide feedback to the user.
  *

package/services/Toast/ToastContainer.js

@@ -34,7 +34,9 @@ var ToastContainerBase = function (props) {
     var handleClose = function (key) {
         toastProvider.remove(key);
     };
-    return (React.createElement("div", { className: props.className }, Object.keys(toastProvider.messages).map(function (key) {
+    return (
+    // Live region so screen readers announce toasts as they appear.
+    React.createElement("div", { className: props.className, "aria-live": "polite" }, Object.keys(toastProvider.messages).map(function (key) {
         return React.createElement(Toast, __assign({ key: key, message: toastProvider.messages[key].message, onClose: function () { return handleClose(key); } }, toastProvider.messages[key].options));
     })));
 };

package/services/Toast/ToastContext.d.ts

@@ -22,6 +22,6 @@ interface IToastContext {
      */
     remove: (key: string) => void;
 }
-declare const ToastContext: React.Context<IToastContext>;
+declare const ToastContext: React.Context<IToastContext | null>;
 export { ToastContext };
 export type { IToastContext };

package/services/Toast/ToastProvider.js

@@ -47,6 +47,8 @@ var ToastProvider = function (_a) {
             // Remove excess messages:
             while (keys.length >= maxToasts) {
                 var oldestKey = keys.shift();
+                if (oldestKey === undefined)
+                    break;
                 var _b = newMessages, _c = oldestKey, _ = _b[_c], rest = __rest(_b, [typeof _c === "symbol" ? _c : _c + ""]);
                 newMessages = rest;
             }

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer copy.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-interface IHtmlMarkerLayerProps {
-    /**
-     * Function that returns a marker component. Properties that `HtmlMarkerLayer`
-     * makes available to the component are passed in as `props`.
-     * e.g. `{(p) => <MyMarker {...p} bordered flashing/>}`
-     */
-    children?: (props: any) => React.ReactNode;
-    /**
-     * ID of the source that's queried.
-     */
-    sourceId: string;
-    /**
-     * Every feature must have a unique ID in its properties. This is used to
-     * tell features apart. If the `source` should ever change, then it is
-     * important that new items have new IDs, so that old markers get removed
-     * correctly. Features that do not have an ID field are not displayed.
-     */
-    idField: string;
-    /**
-     * Minimum zoom level at which to show markers.
-     * @default 0
-     */
-    minZoom?: number;
-    /**
-     * Maximum zoom level at which to show markers.
-     * @default 99
-     */
-    maxZoom?: number;
-}
-declare const HtmlMarkerLayer: {
-    ({ minZoom, maxZoom, ...props }: IHtmlMarkerLayerProps): React.JSX.Element;
-    displayName: string;
-};
-export { HtmlMarkerLayer, IHtmlMarkerLayerProps };