@longline/aqua-ui 1.0.338 → 1.0.340

package/inputs/Slider/Slider.d.ts

@@ -4,80 +4,133 @@ interface ISliderProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
-     * Current value.
+     * Current (controlled) value. Values outside `min`..`max` are clamped, and
+     * snapped to the nearest tick when `snapToTicks` is set. Changing this prop
+     * repositions the knob.
+     * @default min
      */
     value?: number;
     /**
-     * If set, `Slider` will fill all horizontal space available to it.
+     * If set, `Slider` fills all horizontal space available to it. Otherwise the
+     * control has a fixed minimum width of 200px.
      * @default false
      */
     fluid?: boolean;
     /**
-     * Minimum value.
+     * Minimum value, mapped to the left end of the track.
      * @default 0
      */
     min?: number;
     /**
-     * Maximum value.
+     * Maximum value, mapped to the right end of the track.
      * @default 100
      */
     max?: number;
     /**
-     * If set, `onChange` is called continuously while the slide is being moved.
-     * If not, `onChange` is called only when the slider is released.
+     * If set, `onChange` fires continuously while the knob is being dragged.
+     * If not, `onChange` fires only once, when the knob is released.
+     * Keyboard changes always notify regardless of this setting.
      * @default false
      */
     immediate?: boolean;
     /**
-     * Sets the value change when an arrow key is pressed. If omitted,
-     * `delta` will be 10% of the value range.
+     * Amount the value changes for a single arrow-key press. `PageUp`/`PageDown`
+     * move by three times this amount. If omitted, `delta` defaults to 10% of
+     * the value range (`max - min`). Ignored when `snapToTicks` is set, in which
+     * case each key press moves one tick.
      */
     delta?: number;
     /**
-     * Should ticks be displayed? If so, how many?
+     * Number of evenly spaced ticks to render along the track. Ticks are also
+     * used as snap points when `snapToTicks` is set. `0` or `1` disables ticks.
      * @default 0
      */
     ticks?: number;
     /**
-     * If set, ticks are hidden.
+     * If set, ticks are not rendered even when `ticks` is greater than zero.
+     * Snapping (`snapToTicks`) still uses the tick positions.
+     * @default false
      */
     hideTicks?: boolean;
     /**
-     * Should the control snap to ticks (if present)?
+     * If set, the value snaps to the nearest tick while dragging and on keyboard
+     * input. Has no effect unless `ticks` is greater than 1.
      * @default false
      */
     snapToTicks?: boolean;
     /**
-     * A disabled `Slider` cannot be interacted with.
+     * A disabled `Slider` is greyed out and cannot be interacted with.
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Adds left and right padding.
+     * Adds horizontal (left and right) padding so the knob and value tooltip are
+     * not clipped at the extremes of the track.
+     * @default false
      */
     padded?: boolean;
     /**
-     * A `Slider` can be in an `error` state.
+     * Shows the `Slider` in an error state (track, fill and knob turn red).
+     * @default false
      */
     error?: boolean;
     /**
-     * Custom text color
+     * Custom color for the value label shown in the knob's teardrop. Defaults to
+     * the theme's primary color.
      */
     color?: string;
     /**
-     * An optional formatter that takes the current slider value (a number)
-     * and returns a string. This can be used to divide values by 100,
-     * for example.
+     * Optional formatter that takes the current value (a number) and returns the
+     * string shown in the knob's teardrop tooltip and exposed as the ARIA value
+     * text. Useful to add units or rescale — e.g. dividing by 100 to show a
+     * fraction, or appending `"%"` or `"px"`.
      */
     formatter?: (value: number) => string;
     /**
-     * Event is triggered when slider's value changes.
+     * Called with the new value when it changes. Fires on release by default, or
+     * continuously during a drag when `immediate` is set; keyboard changes always
+     * notify.
      */
     onChange?: (value: number) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
- * Sliders allow users to view and select a value (or range) along a track.
- * They're ideal for adjusting settings such as volume and brightness, or for
- * applying image filters.
+ * A `Slider` lets users view and pick a single numeric value along a horizontal
+ * track by dragging the knob or using the keyboard. It's ideal for adjusting
+ * settings such as volume or brightness, or for applying image filters.
+ *
+ * The value is bounded by `min`/`max` (default `0`..`100`) and can optionally
+ * snap to evenly spaced `ticks`. A `formatter` controls how the value is
+ * rendered in the knob's tooltip. By default `onChange` fires once, on release;
+ * set `immediate` to be notified continuously while dragging.
+ *
+ * The control is keyboard-accessible: arrow keys move by `delta`,
+ * `PageUp`/`PageDown` move by three times `delta`, and `Home`/`End` jump to the
+ * minimum/maximum. It exposes the `role="slider"` ARIA contract, keeping
+ * `aria-valuenow`/`aria-valuetext` in sync as the value changes.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic, controlled
+ * <Slider value={volume} onChange={setVolume}/>
+ *
+ * // Custom range, notified while dragging
+ * <Slider min={0} max={10} value={rating} immediate onChange={setRating}/>
+ *
+ * // Ticks with snapping and a formatted tooltip
+ * <Slider
+ *   ticks={5}
+ *   snapToTicks
+ *   value={amount}
+ *   formatter={v => `${v}%`}
+ *   onChange={setAmount}
+ * />
+ * ```
  */
 declare const Slider: {
     ({ min, max, fluid, ...props }: ISliderProps): React.JSX.Element;

package/inputs/Slider/Slider.js

@@ -26,11 +26,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { css, keyframes } from 'styled-components';
+// Default value range, shared by the base and the export wrapper.
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
 var SliderBase = function (props) {
+    var _a, _b, _c, _d;
+    // Defaults supplied by the export wrapper below.
+    var min = (_a = props.min) !== null && _a !== void 0 ? _a : DEFAULT_MIN;
+    var max = (_b = props.max) !== null && _b !== void 0 ? _b : DEFAULT_MAX;
     // Current value. This is not the same as props.value: it is the value
     // while the knob is being dragged. Upon release, this value is called back
     // with onChange. Or continuously, if `immediate` is set.
-    var value = React.useRef(props.value);
+    var value = React.useRef((_c = props.value) !== null && _c !== void 0 ? _c : min);
+    // Reference: outer (focusable) element, used to keep ARIA value in sync.
+    var wrapperRef = React.useRef(null);
     // Reference: track body
     var trackRef = React.useRef(null);
     // Reference: track fill.
@@ -54,20 +63,29 @@ var SliderBase = function (props) {
         if (!props.ticks || props.ticks <= 1)
             return value;
         // If ticks are present, then clamp x-position to ticks:
-        var section = (props.max - props.min) / (props.ticks - 1);
-        return Math.round((value - props.min) / section) * section + props.min;
+        var section = (max - min) / (props.ticks - 1);
+        return Math.round((value - min) / section) * section + min;
     };
     //
     // Change current value. If notify is set, also call onChange.
     //
     var setValue = function (v, notify) {
-        value.current = Math.round(snapToTicks(clamp(v, props.min, props.max)));
+        value.current = Math.round(snapToTicks(clamp(v, min, max)));
         // Calculate position in 0..1 range:
-        var pos = (value.current - props.min) / (props.max - props.min);
+        var pos = (value.current - min) / (max - min);
         // Set knob position as a percentage:
-        knobRef.current.style.left = "".concat(pos * 100, "%");
-        trackFillRef.current.style.width = "".concat(pos * 100, "%");
-        tearValueRef.current.textContent = props.formatter ? props.formatter(value.current) : value.current.toString();
+        if (knobRef.current)
+            knobRef.current.style.left = "".concat(pos * 100, "%");
+        if (trackFillRef.current)
+            trackFillRef.current.style.width = "".concat(pos * 100, "%");
+        if (tearValueRef.current)
+            tearValueRef.current.textContent = props.formatter ? props.formatter(value.current) : value.current.toString();
+        // Keep the ARIA value in sync (the control updates imperatively while dragging).
+        if (wrapperRef.current) {
+            wrapperRef.current.setAttribute('aria-valuenow', String(value.current));
+            if (props.formatter)
+                wrapperRef.current.setAttribute('aria-valuetext', props.formatter(value.current));
+        }
         if (notify && props.onChange)
             props.onChange(value.current);
     };
@@ -75,17 +93,18 @@ var SliderBase = function (props) {
     var getDelta = function () {
         // If ticks are present and snapToTicks is on, then snap to ticks:
         if (props.snapToTicks && props.ticks && props.ticks > 1) {
-            return (props.max - props.min) / (props.ticks - 1);
+            return (max - min) / (props.ticks - 1);
         }
         // If a custom delta was specified, use it:
         if (props.delta)
             return props.delta;
         // If no custom delta was specified, then use 10% of value range:
-        return (props.max - props.min) / 10;
+        return (max - min) / 10;
     };
     // When the value or the range changes, reposition the knob.
     React.useEffect(function () {
-        setValue(props.value);
+        var _a;
+        setValue((_a = props.value) !== null && _a !== void 0 ? _a : min);
     }, [props.value, props.min, props.max, props.ticks, props.snapToTicks]);
     // Mouseup and mousemove and document-wide events. They are only relevant
     // when dragging is on.
@@ -98,11 +117,13 @@ var SliderBase = function (props) {
         };
     });
     var handleMouseEvent = function (clientX) {
+        if (!trackRef.current)
+            return;
         var rect = trackRef.current.getBoundingClientRect();
         // Calculate x-position in range 0..1:
         var x = clamp((clientX - rect.left) / trackRef.current.offsetWidth, 0, 1);
         // Derive value from x-position:
-        var v = Math.round((props.max - props.min) * x + props.min);
+        var v = Math.round((max - min) * x + min);
         // Set new value. If props.immediate, then call onChange immediately.
         setValue(v, props.immediate);
     };
@@ -126,6 +147,9 @@ var SliderBase = function (props) {
         }
     };
     var handleKeyDown = function (e) {
+        // Prevent the page from scrolling on keys the slider consumes.
+        if (['ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.key))
+            e.preventDefault();
         switch (e.key) {
             case 'ArrowLeft':
                 setValue(value.current - getDelta(), true);
@@ -135,11 +159,11 @@ var SliderBase = function (props) {
                 break;
             // Home moves to minimum:
             case "Home":
-                setValue(props.min, true);
+                setValue(min, true);
                 break;
             // End moves to maximum.
             case "End":
-                setValue(props.max, true);
+                setValue(max, true);
                 break;
             // PageUp/PageDown take 3x size steps:
             case "PageUp":
@@ -154,7 +178,7 @@ var SliderBase = function (props) {
         // Create a number of ticks and return them.
         return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Slider", className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Slider", className: props.className, style: props.style, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0, ref: wrapperRef, role: "slider", "aria-orientation": "horizontal", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": (_d = props.value) !== null && _d !== void 0 ? _d : min, "aria-disabled": props.disabled },
         React.createElement(Track, { ref: trackRef },
             React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
             props.ticks && props.hideTicks != true && renderTicks(),
@@ -179,18 +203,76 @@ var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTempl
 var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"], ["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
 var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 52px;\n  padding-bottom: 14px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 52px;\n  padding-bottom: 14px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"
     /**
-     * Sliders allow users to view and select a value (or range) along a track.
-     * They're ideal for adjusting settings such as volume and brightness, or for
-     * applying image filters.
+     * A `Slider` lets users view and pick a single numeric value along a horizontal
+     * track by dragging the knob or using the keyboard. It's ideal for adjusting
+     * settings such as volume or brightness, or for applying image filters.
+     *
+     * The value is bounded by `min`/`max` (default `0`..`100`) and can optionally
+     * snap to evenly spaced `ticks`. A `formatter` controls how the value is
+     * rendered in the knob's tooltip. By default `onChange` fires once, on release;
+     * set `immediate` to be notified continuously while dragging.
+     *
+     * The control is keyboard-accessible: arrow keys move by `delta`,
+     * `PageUp`/`PageDown` move by three times `delta`, and `Home`/`End` jump to the
+     * minimum/maximum. It exposes the `role="slider"` ARIA contract, keeping
+     * `aria-valuenow`/`aria-valuetext` in sync as the value changes.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic, controlled
+     * <Slider value={volume} onChange={setVolume}/>
+     *
+     * // Custom range, notified while dragging
+     * <Slider min={0} max={10} value={rating} immediate onChange={setRating}/>
+     *
+     * // Ticks with snapping and a formatted tooltip
+     * <Slider
+     *   ticks={5}
+     *   snapToTicks
+     *   value={amount}
+     *   formatter={v => `${v}%`}
+     *   onChange={setAmount}
+     * />
+     * ```
      */
 ])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    padding-left: 20px;\n    padding-right: 20px;\n  "], ["\n    padding-left: 20px;\n    padding-right: 20px;\n  "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "], ["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "])), Knob, Pulse, Knob, Knob); });
 /**
- * Sliders allow users to view and select a value (or range) along a track.
- * They're ideal for adjusting settings such as volume and brightness, or for
- * applying image filters.
+ * A `Slider` lets users view and pick a single numeric value along a horizontal
+ * track by dragging the knob or using the keyboard. It's ideal for adjusting
+ * settings such as volume or brightness, or for applying image filters.
+ *
+ * The value is bounded by `min`/`max` (default `0`..`100`) and can optionally
+ * snap to evenly spaced `ticks`. A `formatter` controls how the value is
+ * rendered in the knob's tooltip. By default `onChange` fires once, on release;
+ * set `immediate` to be notified continuously while dragging.
+ *
+ * The control is keyboard-accessible: arrow keys move by `delta`,
+ * `PageUp`/`PageDown` move by three times `delta`, and `Home`/`End` jump to the
+ * minimum/maximum. It exposes the `role="slider"` ARIA contract, keeping
+ * `aria-valuenow`/`aria-valuetext` in sync as the value changes.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic, controlled
+ * <Slider value={volume} onChange={setVolume}/>
+ *
+ * // Custom range, notified while dragging
+ * <Slider min={0} max={10} value={rating} immediate onChange={setRating}/>
+ *
+ * // Ticks with snapping and a formatted tooltip
+ * <Slider
+ *   ticks={5}
+ *   snapToTicks
+ *   value={amount}
+ *   formatter={v => `${v}%`}
+ *   onChange={setAmount}
+ * />
+ * ```
  */
 var Slider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
+    var _b = _a.min, min = _b === void 0 ? DEFAULT_MIN : _b, _c = _a.max, max = _c === void 0 ? DEFAULT_MAX : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
     return React.createElement(SliderStyled, __assign({ min: min, max: max, fluid: fluid }, props));
 };
 Slider.displayName = 'Slider';

package/inputs/Textarea/Textarea.d.ts

@@ -1,10 +1,5 @@
 import * as React from 'react';
 import { ITestable } from '../../Types';
-/**
- * Textarea validates itself using the HTML validation API whenever its
- * content changes. Listeners can use onValidate to obtain the resulting
- * ValidityState.
- */
 interface ITextareaProps extends ITestable {
     /** @ignore */
     className?: string;
@@ -70,6 +65,11 @@ interface ITextareaProps extends ITestable {
      * Listeners are notified whenever the user interacts with the Textarea.
      */
     onChange?: (value: any) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,

package/inputs/Textarea/Textarea.js

@@ -34,14 +34,15 @@ var TextareaBase = function (props) {
         }
     };
     var toggleFullscreen = function () {
+        var _a;
         if (document.fullscreenElement) {
             document.exitFullscreen();
         }
         else {
-            textareaRef.current.requestFullscreen();
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
         }
     };
-    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
+    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex, style: props.style },
         React.createElement("textarea", { "data-testid": props['data-testid'] || "Textarea", className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
         props.fullscreen &&
             React.createElement(FullscreenToggle, { onClick: toggleFullscreen },

package/map/Map/Map.d.ts

@@ -128,8 +128,8 @@ interface IMapProps extends ITestable {
      */
     onMouseLeave?: (e: MapMouseEvent) => void;
 }
-declare const ViewStateContext: React.Context<ViewState>;
-declare const useViewState: () => ViewState;
+declare const ViewStateContext: React.Context<ViewState | null>;
+declare const useViewState: () => ViewState | null;
 declare const Map: {
     ({ longitude, latitude, zoom, pitch, bearing, logoPosition, interactiveLayerIds, noRotate, preserveDrawingBuffer, minZoom, maxZoom, fadeDuration, doubleClickZoom, ...props }: IMapProps): React.JSX.Element;
     displayName: string;

package/map/Map/Map.js

@@ -74,21 +74,24 @@ var useViewState = function () {
  * The map's current ViewState is tracked in local state, and fed into a context provider.
  * The ViewState can be retrieved by child components using `useViewState()`.
  */
+// Default view-state prop values, referenced both by the MapBase fallbacks and
+// the Map wrapper below.
+var DEFAULT_LONGITUDE = -64.6;
+var DEFAULT_LATITUDE = 44.02;
+var DEFAULT_ZOOM = 11;
+var DEFAULT_PITCH = 0;
+var DEFAULT_BEARING = 0;
 var MapBase = function (props) {
+    var _a, _b, _c, _d, _e;
     var theme = useTheme();
-    var _a = React.useState({
-        longitude: props.longitude,
-        latitude: props.latitude,
-        zoom: props.zoom,
-        pitch: props.pitch,
-        bearing: props.bearing,
+    var _f = React.useState({
+        longitude: (_a = props.longitude) !== null && _a !== void 0 ? _a : DEFAULT_LONGITUDE,
+        latitude: (_b = props.latitude) !== null && _b !== void 0 ? _b : DEFAULT_LATITUDE,
+        zoom: (_c = props.zoom) !== null && _c !== void 0 ? _c : DEFAULT_ZOOM,
+        pitch: (_d = props.pitch) !== null && _d !== void 0 ? _d : DEFAULT_PITCH,
+        bearing: (_e = props.bearing) !== null && _e !== void 0 ? _e : DEFAULT_BEARING,
         padding: props.padding || { top: 0, bottom: 0, left: 0, right: 0 }
-    }), viewState = _a[0], setViewState = _a[1];
-    // TODO: REMOVE THIS!
-    // React.useEffect(() => {
-    //   // Clears entire Mapbox tile cache for testing of clipping strategy.
-    //   MapboxGL.clearStorage();
-    // }, []);  
+    }), viewState = _f[0], setViewState = _f[1];
     var loadImage = function (url) {
         return new Promise(function (res, rej) {
             var img = new Image();
@@ -169,7 +172,7 @@ var MapBase = function (props) {
     };
     React.useEffect(function () {
         if (!props.clipped)
-            return;
+            return undefined;
         var originalFetch = window.fetch;
         window.fetch = function () {
             var args = [];
@@ -201,6 +204,9 @@ var MapBase = function (props) {
                 });
             });
         };
+        // Restore the original fetch when the clipped map unmounts, so the global
+        // override doesn't leak into the rest of the app.
+        return function () { window.fetch = originalFetch; };
     }, []);
     var handleLoad = function (e) {
         var map = e.target;
@@ -229,7 +235,7 @@ var MapBase = function (props) {
 };
 var Controls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
 var Map = function (_a) {
-    var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.logoPosition, logoPosition = _g === void 0 ? 'top-right' : _g, _h = _a.interactiveLayerIds, interactiveLayerIds = _h === void 0 ? [] : _h, _j = _a.noRotate, noRotate = _j === void 0 ? false : _j, _k = _a.preserveDrawingBuffer, preserveDrawingBuffer = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, _o = _a.fadeDuration, fadeDuration = _o === void 0 ? 300 : _o, _p = _a.doubleClickZoom, doubleClickZoom = _p === void 0 ? true : _p, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "logoPosition", "interactiveLayerIds", "noRotate", "preserveDrawingBuffer", "minZoom", "maxZoom", "fadeDuration", "doubleClickZoom"]);
+    var _b = _a.longitude, longitude = _b === void 0 ? DEFAULT_LONGITUDE : _b, _c = _a.latitude, latitude = _c === void 0 ? DEFAULT_LATITUDE : _c, _d = _a.zoom, zoom = _d === void 0 ? DEFAULT_ZOOM : _d, _e = _a.pitch, pitch = _e === void 0 ? DEFAULT_PITCH : _e, _f = _a.bearing, bearing = _f === void 0 ? DEFAULT_BEARING : _f, _g = _a.logoPosition, logoPosition = _g === void 0 ? 'top-right' : _g, _h = _a.interactiveLayerIds, interactiveLayerIds = _h === void 0 ? [] : _h, _j = _a.noRotate, noRotate = _j === void 0 ? false : _j, _k = _a.preserveDrawingBuffer, preserveDrawingBuffer = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, _o = _a.fadeDuration, fadeDuration = _o === void 0 ? 300 : _o, _p = _a.doubleClickZoom, doubleClickZoom = _p === void 0 ? true : _p, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "logoPosition", "interactiveLayerIds", "noRotate", "preserveDrawingBuffer", "minZoom", "maxZoom", "fadeDuration", "doubleClickZoom"]);
     return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, logoPosition: logoPosition, interactiveLayerIds: interactiveLayerIds, noRotate: noRotate, preserveDrawingBuffer: preserveDrawingBuffer, minZoom: minZoom, maxZoom: maxZoom, fadeDuration: fadeDuration, doubleClickZoom: doubleClickZoom }, props));
 };
 Map.displayName = 'Map';

package/map/PositionsManager/PositionBox.js

@@ -24,15 +24,19 @@ var PositionBox = function (props) {
         };
     });
     var handleMouseMove = function (ev) {
-        if (dragging)
+        if (dragging && dragOffset.current)
             props.onMove(ev.clientX - dragOffset.current[0], ev.clientY - dragOffset.current[1]);
     };
     var handleMouseUp = function () {
         setDragging(false);
     };
     var handleStartDrag = function (ev) {
-        var x = wrapperRef.current.parentElement.offsetLeft;
-        var y = wrapperRef.current.parentElement.offsetTop;
+        var _a;
+        var parent = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent)
+            return;
+        var x = parent.offsetLeft;
+        var y = parent.offsetTop;
         dragOffset.current = [ev.clientX - x - 9, ev.clientY - y - 38];
         setDragging(true);
     };

package/map/PositionsManager/PositionsManager.js

@@ -40,10 +40,16 @@ var PositionsManager = function (_a) {
     var store = storage == 'session' ? sessionStorage : localStorage;
     // Retrieve positions from storage. Returns [] if no data in store.
     var loadPositionsFromStorage = function () {
-        var json = store.getItem(STORAGE_KEY);
-        if (json == null)
+        try {
+            var json = store.getItem(STORAGE_KEY);
+            if (json == null)
+                return [];
+            return JSON.parse(json);
+        }
+        catch (_a) {
+            // Ignore corrupt/unavailable storage.
             return [];
-        return JSON.parse(json);
+        }
     };
     // Save positions to store.
     var savePositionsToStorage = function (positions) {
@@ -55,13 +61,16 @@ var PositionsManager = function (_a) {
         // Ctrl key must be held down.
         if (!ev.originalEvent.ctrlKey)
             return;
+        var m = map.current;
+        if (!m)
+            return;
         // Add click coordinates to positions list.
         setPositions(function (positions) {
             // Allow no more than 3 saved positions.
             if (positions.length >= maxPositions)
                 return positions;
             // Add new position to positions list.
-            var position = { lng: ev.lngLat.lng, lat: ev.lngLat.lat, zoom: map.current.getZoom() };
+            var position = { lng: ev.lngLat.lng, lat: ev.lngLat.lat, zoom: m.getZoom() };
             var newPositions = __spreadArray([position], positions, true);
             // Store new positions list in store.
             savePositionsToStorage(newPositions);
@@ -71,31 +80,42 @@ var PositionsManager = function (_a) {
     // Add a CTRL+click handler to the map, and removes
     // it on unmount. 
     React.useEffect(function () {
-        map.current.on('click', handleRegisterCoordinate);
-        return function () { map.current.off('contextmenu', handleRegisterCoordinate); };
+        var m = map.current;
+        if (!m)
+            return undefined;
+        m.on('click', handleRegisterCoordinate);
+        return function () { m.off('click', handleRegisterCoordinate); };
     }, []);
     var handleMovePosition = function (idx, x, y) {
-        var _a = map.current.unproject([x, y]), lng = _a.lng, lat = _a.lat;
-        var position = { lng: lng, lat: lat, zoom: map.current.getZoom() };
+        var m = map.current;
+        if (!m)
+            return;
+        var _a = m.unproject([x, y]), lng = _a.lng, lat = _a.lat;
+        var position = { lng: lng, lat: lat, zoom: m.getZoom() };
         var head = positions.slice(0, idx);
         var tail = positions.slice(idx + 1);
         var newPositions = __spreadArray(__spreadArray(__spreadArray([], head, true), [position], false), tail, true);
         setPositions(newPositions);
-        savePositionsToStorage(positions);
+        savePositionsToStorage(newPositions);
     };
     var handleDeletePosition = function (idx) {
-        positions.splice(idx, 1);
-        setPositions(__spreadArray([], positions, true));
-        savePositionsToStorage(positions);
+        var newPositions = positions.filter(function (_, i) { return i !== idx; });
+        setPositions(newPositions);
+        savePositionsToStorage(newPositions);
     };
     var handleFocus = function (idx) {
         var position = positions[idx];
+        if (!map.current)
+            return;
         map.current.easeTo({
             center: [position.lng, position.lat],
             zoom: position.zoom
         });
     };
-    return (React.createElement(React.Fragment, null, positions.reverse().map(function (position, idx) {
+    return (React.createElement(React.Fragment, null, positions.slice().reverse().map(function (position, revIdx) {
+        // Map the display (reversed) index back to the canonical index so the
+        // move/delete/focus handlers target the correct entry.
+        var idx = positions.length - 1 - revIdx;
         return React.createElement(PositionBox, { key: idx, coord: position, onMove: function (x, y) { return handleMovePosition(idx, x, y); }, onDelete: function () { return handleDeletePosition(idx); }, onFocus: function () { return handleFocus(idx); } });
     })));
 };

package/map/controls/CompassButton/CompassButton.js

@@ -34,7 +34,7 @@ import { Key } from '../../../controls/Key';
 var CompassButtonBase = function (props) {
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "CompassButton", onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "CompassButton", ariaLabel: "Reset bearing and pitch", onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, props),
         React.createElement("div", { style: { transform: "rotateX(".concat(props.visualizePitch ? viewState.pitch : 0, "deg)") } },
             React.createElement("svg", { style: { transform: "rotateZ(".concat(-viewState.bearing, "deg)") }, xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 1000 1000" },
                 React.createElement("polygon", { className: "tip", points: "100,1000 500,0 900,1000 500,700 " }),

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -59,7 +59,7 @@ var FullscreenButton = function (_a) {
             window.document.exitFullscreen();
         }
     };
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "FullscreenButton", disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "FullscreenButton", ariaLabel: "Toggle fullscreen", disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" }))));
 };