@longline/aqua-ui 1.0.338 → 1.0.340

package/containers/Anchor/Anchor.d.ts

@@ -49,6 +49,11 @@ interface IAnchorProps extends ITestable {
      * @default false
      */
     adapt?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Often, a panel must open somewhere when a button or icon is clicked. This panel

package/containers/Anchor/Anchor.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
 /**
  * Often, a panel must open somewhere when a button or icon is clicked. This panel
@@ -14,6 +25,8 @@ var Anchor = function (props) {
     var anchorRef = React.useRef(null);
     var contentRef = React.useRef(null);
     var findScrollingParentRecursive = function (node) {
+        if (!node)
+            return null;
         var overflowY = window.getComputedStyle(node).overflowY;
         if (overflowY == 'scroll' || overflowY == 'auto')
             return node;
@@ -24,12 +37,15 @@ var Anchor = function (props) {
     // Return my nearest parent that's scrolling (frames are not supported). If
     // no parent is found, null is returned.
     var findScrollingParent = function () {
-        return findScrollingParentRecursive(anchorRef.current.parentElement);
+        var _a, _b;
+        return findScrollingParentRecursive((_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null);
     };
     // Returns true if this control is in the lower half of its scrolling parent.
     // (if direction == parent), or in the lower half of the viewport if no 
     // scrolling parent is found.
     var isInLowerViewport = function () {
+        if (!anchorRef.current)
+            return false;
         var scrollingParent = findScrollingParent();
         if (scrollingParent == null || props.relativeToParent) {
             return anchorRef.current.getBoundingClientRect().top > window.innerHeight / 2;
@@ -46,6 +62,8 @@ var Anchor = function (props) {
     // (if direction == parent), or in the right half of the viewport if no 
     // scrolling parent is found.  
     var isInRightViewport = function () {
+        if (!anchorRef.current)
+            return false;
         var scrollingParent = findScrollingParent();
         if (scrollingParent == null || props.relativeToParent) {
             return anchorRef.current.getBoundingClientRect().left > window.innerWidth / 2;
@@ -101,13 +119,7 @@ var Anchor = function (props) {
     React.useEffect(function () {
         updatePosition();
     }, [props.horizontal, props.vertical]);
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Anchor", ref: anchorRef, style: {
-            position: 'absolute',
-            left: (_a = props.left) !== null && _a !== void 0 ? _a : 'auto',
-            top: (_b = props.top) !== null && _b !== void 0 ? _b : 'auto',
-            bottom: (_c = props.bottom) !== null && _c !== void 0 ? _c : 'auto',
-            right: (_d = props.right) !== null && _d !== void 0 ? _d : 'auto',
-        } },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Anchor", ref: anchorRef, className: props.className, style: __assign({ position: 'absolute', left: (_a = props.left) !== null && _a !== void 0 ? _a : 'auto', top: (_b = props.top) !== null && _b !== void 0 ? _b : 'auto', bottom: (_c = props.bottom) !== null && _c !== void 0 ? _c : 'auto', right: (_d = props.right) !== null && _d !== void 0 ? _d : 'auto' }, props.style) },
         React.createElement("div", { ref: contentRef, style: { position: 'absolute', visibility: 'hidden', transition: 'top 250ms ease, left 250ms ease' } }, props.children)));
 };
 Anchor.displayName = 'Anchor';

package/containers/Dock/Dock.d.ts

@@ -30,6 +30,11 @@ interface IDockProps extends ITestable {
      * @default 16
      */
     gap?: number;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `Dock` is a place where `Dockable` components live. Dockables have a lat/lng location on

package/containers/Dock/Dock.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var DockBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "Dock", className: props.className, role: "presentation" }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Dock", className: props.className, style: props.style, role: "presentation" }, props.children);
 };
 var DockStyled = styled(DockBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"
     /**

package/containers/Dock/Dockable.d.ts

@@ -57,6 +57,11 @@ interface IDockableProps extends ITestable {
      * @default 60
      */
     hysteresis?: number;
+    /**
+     * Optional inline styles applied to the outer element, merged after (and so
+     * overriding) the component's own positioning styles.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `Dockable` is fixed to a lat/lng on the `Map`. It must be a child of `Dock`. When a Dockable

package/containers/Dock/Dockable.js

@@ -28,8 +28,15 @@ import * as React from 'react';
 import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { useViewState } from '../../map/Map';
+// Default prop values, referenced both by the DockableBase fallbacks and the
+// Dockable wrapper below.
+var DEFAULT_LONGITUDE = 0;
+var DEFAULT_LATITUDE = 0;
+var DEFAULT_OFFSET_X = 0;
+var DEFAULT_OFFSET_Y = 0;
+var DEFAULT_HYSTERESIS = 60;
 var DockableBase = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     // Reference to Dockable div:
     var containerRef = React.useRef(null);
     // Using the ViewState will cause this component to be rerendered when the 
@@ -40,13 +47,14 @@ var DockableBase = function (props) {
     var mapWidth = map.current.getContainer().clientWidth;
     var mapHeight = map.current.getContainer().clientHeight;
     // Convert Dockable's lat/lng to pixel coordinates:
-    var _e = map.current.project([props.longitude, props.latitude]), x = _e.x, y = _e.y;
+    var _k = map.current.project([(_a = props.longitude) !== null && _a !== void 0 ? _a : DEFAULT_LONGITUDE, (_b = props.latitude) !== null && _b !== void 0 ? _b : DEFAULT_LATITUDE]), x = _k.x, y = _k.y;
     // Get size of Dockable:
-    var myWidth = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
-    var myHeight = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+    var myWidth = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0;
+    var myHeight = (_f = (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 0;
     // Is Dockable currently offscreen (boolean)?
-    var offsetX = props.offsetX;
-    var offsetY = props.offsetY;
+    var offsetX = (_g = props.offsetX) !== null && _g !== void 0 ? _g : DEFAULT_OFFSET_X;
+    var offsetY = (_h = props.offsetY) !== null && _h !== void 0 ? _h : DEFAULT_OFFSET_Y;
+    var hysteresis = (_j = props.hysteresis) !== null && _j !== void 0 ? _j : DEFAULT_HYSTERESIS;
     var swapHorizontally = props.swappable === 'horizontal' || props.swappable === 'both';
     var swapVertically = props.swappable === 'vertical' || props.swappable === 'both';
     var possibleXs = swapHorizontally
@@ -64,20 +72,20 @@ var DockableBase = function (props) {
     // Horizontal hysteresis:
     React.useEffect(function () {
         var center = mapWidth / 2;
-        if (x > center + props.hysteresis) {
+        if (x > center + hysteresis) {
             wasRightRef.current = true;
         }
-        else if (x < center - props.hysteresis) {
+        else if (x < center - hysteresis) {
             wasRightRef.current = false;
         }
     }, [x, mapWidth]);
     // Vertical hysteresis:
     React.useEffect(function () {
         var center = mapHeight / 2;
-        if (y > center + props.hysteresis) {
+        if (y > center + hysteresis) {
             wasBottomRef.current = true;
         }
-        else if (y < center - props.hysteresis) {
+        else if (y < center - hysteresis) {
             wasBottomRef.current = false;
         }
     }, [y, mapHeight]);
@@ -103,7 +111,7 @@ var DockableBase = function (props) {
         style.left = "".concat(x + offsetX, "px");
         style.top = "".concat(y + offsetY, "px");
     }
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Dockable", style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Dockable", style: __assign(__assign({}, style), props.style), className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
 };
 var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  z-index: ", ";\n  ", "\n"], ["\n  color: white;\n  z-index: ", ";\n  ", "\n"
     /**
@@ -122,7 +130,7 @@ var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4
  * When a `Dockable` is out of the viewport, it gains the `.offscreen` CSS class.
  */
 var Dockable = function (_a) {
-    var _b = _a.longitude, longitude = _b === void 0 ? 0 : _b, _c = _a.latitude, latitude = _c === void 0 ? 0 : _c, _d = _a.offsetX, offsetX = _d === void 0 ? 0 : _d, _e = _a.offsetY, offsetY = _e === void 0 ? 0 : _e, _f = _a.swappable, swappable = _f === void 0 ? 'none' : _f, _g = _a.alwaysDocked, alwaysDocked = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, _j = _a.hysteresis, hysteresis = _j === void 0 ? 60 : _j, props = __rest(_a, ["longitude", "latitude", "offsetX", "offsetY", "swappable", "alwaysDocked", "zIndex", "hysteresis"]);
+    var _b = _a.longitude, longitude = _b === void 0 ? DEFAULT_LONGITUDE : _b, _c = _a.latitude, latitude = _c === void 0 ? DEFAULT_LATITUDE : _c, _d = _a.offsetX, offsetX = _d === void 0 ? DEFAULT_OFFSET_X : _d, _e = _a.offsetY, offsetY = _e === void 0 ? DEFAULT_OFFSET_Y : _e, _f = _a.swappable, swappable = _f === void 0 ? 'none' : _f, _g = _a.alwaysDocked, alwaysDocked = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, _j = _a.hysteresis, hysteresis = _j === void 0 ? DEFAULT_HYSTERESIS : _j, props = __rest(_a, ["longitude", "latitude", "offsetX", "offsetY", "swappable", "alwaysDocked", "zIndex", "hysteresis"]);
     return React.createElement(DockableStyled, __assign({ longitude: longitude, latitude: latitude, offsetX: offsetX, offsetY: offsetY, swappable: swappable, alwaysDocked: alwaysDocked, zIndex: zIndex, hysteresis: hysteresis }, props));
 };
 Dockable.displayName = 'Dockable';

package/containers/DragBar/DragBar.d.ts

@@ -25,6 +25,11 @@ interface IDragBarProps extends ITestable {
      * @default smooth
      */
     behavior?: ScrollBehavior;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `DragBar` presents its content in a horizontally scrollable container,

package/containers/DragBar/DragBar.js

@@ -28,6 +28,10 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { Icon } from '../../controls/Icon';
 import { SVG } from '../../svg';
+// Default prop value, referenced both by the DragBarBase fallback and the
+// DragBar wrapper below.
+var DEFAULT_HEIGHT = 40;
+var DEFAULT_NAVIGATION_DELTA = 100;
 var DragBarBase = function (props) {
     var scrollerRef = React.useRef(null);
     var posRef = React.useRef({ top: 0, left: 0, x: 0, y: 0 });
@@ -35,9 +39,12 @@ var DragBarBase = function (props) {
         // Mouse-up event removes itself and move-event when mouse is released:
         document.removeEventListener('mousemove', handleMouseMove);
         document.removeEventListener('mouseup', handleMouseUp);
-        scrollerRef.current.style.cursor = 'auto';
+        if (scrollerRef.current)
+            scrollerRef.current.style.cursor = 'auto';
     };
     var handleMouseMove = function (e) {
+        if (!scrollerRef.current)
+            return;
         // How far the mouse has been moved
         var dx = e.clientX - posRef.current.x;
         var dy = e.clientY - posRef.current.y;
@@ -46,6 +53,8 @@ var DragBarBase = function (props) {
         scrollerRef.current.scrollLeft = posRef.current.left - dx;
     };
     var handleMouseDown = function (e) {
+        if (!scrollerRef.current)
+            return;
         posRef.current = {
             // The current scroll
             left: scrollerRef.current.scrollLeft,
@@ -59,6 +68,8 @@ var DragBarBase = function (props) {
         document.addEventListener('mouseup', handleMouseUp);
     };
     var handleNavigate = function (delta) {
+        if (!scrollerRef.current)
+            return;
         scrollerRef.current.scrollBy({
             left: delta,
             behavior: props.behavior
@@ -71,14 +82,14 @@ var DragBarBase = function (props) {
             behavior: props.behavior
         });
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "DragBar", className: props.className },
-        props.navigation && React.createElement(NavButton, { onClick: function () { return handleNavigate(-props.navigationDelta); } },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "DragBar", className: props.className, style: props.style },
+        props.navigation && React.createElement(NavButton, { onClick: function () { var _a; return handleNavigate(-((_a = props.navigationDelta) !== null && _a !== void 0 ? _a : DEFAULT_NAVIGATION_DELTA)); } },
             React.createElement(Icon, { url: SVG.Icons.Chevron })),
         React.createElement(Scroller, { onMouseDown: handleMouseDown, ref: scrollerRef },
             React.createElement(Content, null, React.Children.map(props.children, function (c) {
                 return React.createElement(Item, { onClick: handleClickItem }, React.cloneElement(c));
             }))),
-        props.navigation && React.createElement(NavButton, { onClick: function () { return handleNavigate(props.navigationDelta); } },
+        props.navigation && React.createElement(NavButton, { onClick: function () { var _a; return handleNavigate((_a = props.navigationDelta) !== null && _a !== void 0 ? _a : DEFAULT_NAVIGATION_DELTA); } },
             React.createElement(Icon, { rotated: 180, url: SVG.Icons.Chevron }))));
 };
 var Item = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
@@ -112,7 +123,7 @@ var DragBarStyled = styled(DragBarBase)(templateObject_5 || (templateObject_5 =
  * set in pixels.
  */
 var DragBar = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 40 : _b, _c = _a.navigation, navigation = _c === void 0 ? false : _c, _d = _a.navigationDelta, navigationDelta = _d === void 0 ? 100 : _d, _e = _a.behavior, behavior = _e === void 0 ? 'smooth' : _e, props = __rest(_a, ["height", "navigation", "navigationDelta", "behavior"]);
+    var _b = _a.height, height = _b === void 0 ? DEFAULT_HEIGHT : _b, _c = _a.navigation, navigation = _c === void 0 ? false : _c, _d = _a.navigationDelta, navigationDelta = _d === void 0 ? DEFAULT_NAVIGATION_DELTA : _d, _e = _a.behavior, behavior = _e === void 0 ? 'smooth' : _e, props = __rest(_a, ["height", "navigation", "navigationDelta", "behavior"]);
     return React.createElement(DragBarStyled, __assign({ height: height, navigation: navigation, navigationDelta: navigationDelta, behavior: behavior }, props));
 };
 DragBar.displayName = "DragBar";

package/containers/Form/Field.d.ts

@@ -92,9 +92,6 @@ interface IFieldProps {
  * provides a `dirty` prop to the Field. When the Form is dirty, so are its
  * fields, and any validation errors are shown, pristine or not.
  *
- * For dark backgrounds, fields may set their contrast prop to true to use
- * lighter error colors.
- *
  * Fields have a `label` and a `hint`. Both are optional. These elements are
  * displayed in different ways based on the field's `wrapper`. Unwrapped Fields
  * do not display label or hint. Other wrappers are `simple` and `box`.

package/containers/Form/Field.js

@@ -33,16 +33,13 @@ import { useForm } from './context/useForm';
  * provides a `dirty` prop to the Field. When the Form is dirty, so are its
  * fields, and any validation errors are shown, pristine or not.
  *
- * For dark backgrounds, fields may set their contrast prop to true to use
- * lighter error colors.
- *
  * Fields have a `label` and a `hint`. Both are optional. These elements are
  * displayed in different ways based on the field's `wrapper`. Unwrapped Fields
  * do not display label or hint. Other wrappers are `simple` and `box`.
  */
 var Field = function (props) {
     var form = useForm();
-    var ghost = props.ghost || (form && form.ghost);
+    var ghost = !!(props.ghost || (form && form.ghost));
     var _a = React.useState(true), pristine = _a[0], setPristine = _a[1];
     // Current validation. onValidate is only called when validation state changes.
     // Perform validation immediately:
@@ -105,7 +102,7 @@ var Field = function (props) {
         if (rules.before && !rules.before.message)
             rules.before.message = "Date must be before ".concat(rules.before.date, ".");
         if (rules.after && !rules.after.message)
-            rules.after.message = "Date must be before ".concat(rules.after.date, ".");
+            rules.after.message = "Date must be after ".concat(rules.after.date, ".");
     }, [props.rules]);
     //
     // Perform validation when field value changes.
@@ -152,7 +149,7 @@ var Field = function (props) {
             return React.createElement(Hint, null, props.hint);
         return null;
     };
-    var dirty = form ? form.dirty : !pristine;
+    var dirty = form ? !!form.dirty : !pristine;
     var hasError = (!pristine || dirty) && validation != null;
     switch (props.wrapper) {
         case 'simple':

package/containers/Form/Form.js

@@ -28,33 +28,11 @@ var Form = function (props) {
     // change then.
     var _a = React.useState(true), valid = _a[0], setValid = _a[1];
     var handleChange = function (name, value, forceupdate) {
-        // Break up field name into fields:
-        // E.g. if name is "investigators[0].name"
-        var fields = name.split('.');
-        // .. fields will be: 
-        // * field[0] = "investigators[0]"
-        // * fields[1] = "name"
-        // Start off at the main data object:
-        var current = {};
-        // Loop through fields:
-        fields.forEach(function (field) {
-            // If field has brackets, then set current to 
-            // object that the array index points to:
-            var bracketIdx = field.indexOf('[');
-            if (bracketIdx != -1) {
-                var fieldName = field.substring(0, bracketIdx);
-                var index = parseInt(field.substring(bracketIdx + 1, field.length - 1));
-                current = current[fieldName][index];
-            }
-            // If there are no brackets (which would be the 
-            // case for the last field) then assign the new
-            // value to current.
-            else {
-                current[field] = value;
-            }
-        });
-        // Inform parent of data change:
-        props.onChange(current, forceupdate);
+        var _a;
+        // Field names are flat keys. The change is emitted as a partial object
+        // ({ [name]: value }) which the parent merges into its form data (see the
+        // onChange contract). Nested/array field names are not supported.
+        props.onChange((_a = {}, _a[name] = value, _a), forceupdate);
     };
     var handleValidate = function (name, _valid) {
         validations.current.set(name, _valid);
@@ -69,15 +47,6 @@ var Form = function (props) {
             props.onValidate(isValid);
         }
     };
-    // Test code to show currently-focused element:
-    /*
-      const showActive = () => {
-      console.log(document.activeElement);
-      setTimeout(() => {
-        showActive();
-      }, 1000);
-    }
-    setTimeout(() => { showActive(); }, 1000); */
     return (React.createElement(FormContext.Provider, { value: {
             onChange: handleChange,
             onValidate: handleValidate,

package/containers/Form/Validation.d.ts

@@ -207,6 +207,6 @@ declare class Validation {
      * Verify that value is after date.
      */
     private static validateAfter;
-    static getValidation: (value: any, rules: IValidationProps) => React.ReactNode;
+    static getValidation: (value: any, rules?: IValidationProps) => React.ReactNode;
 }
 export { IValidationProps, Validation };

package/containers/Form/Validation.js

@@ -19,7 +19,7 @@ var Validation = /** @class */ (function () {
      * Verify that value is an integer number.
      */
     Validation.validateInt = function (value) {
-        if (!value)
+        if (value == null || value === '')
             return true;
         var regex = /^[-+]?[0-9]+$/;
         return regex.test(value);
@@ -31,7 +31,7 @@ var Validation = /** @class */ (function () {
      */
     Validation.validateFloat = function (value, separator) {
         if (separator === void 0) { separator = '.'; }
-        if (!value)
+        if (value == null || value === '')
             return true;
         var regex = new RegExp("^[-+]?[0-9]+(\\".concat(separator, "[0-9]+)?$"));
         return regex.test(value);
@@ -40,7 +40,7 @@ var Validation = /** @class */ (function () {
      * Verify that value has a minimum numerical value.
      */
     Validation.validateMin = function (value, min) {
-        if (!value)
+        if (value == null || value === '')
             return true;
         return parseInt(value) >= min;
     };
@@ -48,7 +48,7 @@ var Validation = /** @class */ (function () {
      * Verify that value has a maximum numerical value.
      */
     Validation.validateMax = function (value, max) {
-        if (!value)
+        if (value == null || value === '')
             return true;
         return parseInt(value) <= max;
     };
@@ -56,7 +56,7 @@ var Validation = /** @class */ (function () {
      * Verify that value falls in a numerical range (inclusive).
      */
     Validation.validateBetween = function (value, min, max) {
-        if (!value)
+        if (value == null || value === '')
             return true;
         var num = parseInt(value);
         return num >= min && num <= max;
@@ -223,7 +223,7 @@ var Validation = /** @class */ (function () {
                 return rules.before.message;
         }
         if (rules.after != null) {
-            if (!Validation.validateBefore(value, rules.after.date))
+            if (!Validation.validateAfter(value, rules.after.date))
                 return rules.after.message;
         }
         return null;

package/containers/Form/context/FormContext.d.ts

@@ -4,7 +4,6 @@ interface IFormContext {
     onValidate: (name: string, valid: boolean) => void;
     dirty?: boolean;
     ghost?: boolean;
-    data?: any;
 }
-declare const FormContext: React.Context<IFormContext>;
+declare const FormContext: React.Context<IFormContext | null>;
 export { IFormContext, FormContext };

package/containers/Form/context/useForm.d.ts

@@ -1,5 +1,5 @@
 /**
  * Returns the Form Context.
  */
-declare const useForm: () => import("./FormContext").IFormContext;
+declare const useForm: () => import("./FormContext").IFormContext | null;
 export { useForm };

package/containers/Form/elements/BoxWrapper.js

@@ -19,6 +19,8 @@ var BoxWrapperBase = function (props) {
     // To do so, it looks for the first child control with tabIndex=0.
     // 
     var handleClick = function (e) {
+        if (!wrapper.current)
+            return;
         // Find a child element with tabIndex set, and focus/click it.
         var clickableChild = wrapper.current.querySelectorAll("[tabIndex='0']")[0];
         if (clickableChild instanceof HTMLElement) {

package/containers/GlassPane/GlassPane.d.ts

@@ -11,10 +11,15 @@ interface IGlassPaneProps extends ITestable {
      */
     bordered?: boolean;
     /**
-     * If set, adds 16px of inner padding to the pane.
+     * If set, adds 15px of inner padding to the pane.
      * @default false
      */
     padded?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
     /**
      * If true, fades in and blurs smoothly on mount via a CSS transition.
      * @default false
@@ -31,7 +36,7 @@ interface IGlassPaneProps extends ITestable {
  *
  * ### Props
  * - `bordered`: Adds a shiny border.
- * - `padded`: Adds 16px of inner padding.
+ * - `padded`: Adds 15px of inner padding.
  * - `animated`: Animates on mount.
  *
  * By default, there is no internal padding (though some can be added with `padded`). The panel's

package/containers/GlassPane/GlassPane.js

@@ -42,7 +42,7 @@ var GlassPaneBase = React.memo(function (props) {
             return function () { };
         }
     }, [props.animated]);
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "GlassPane", className: "".concat(props.className, " ").concat(mounted ? 'mounted' : '') }, props.children));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "GlassPane", className: "".concat(props.className, " ").concat(mounted ? 'mounted' : ''), style: props.style }, props.children));
 });
 var GRADIENT_0 = "rgb(255,255,255,0.6)";
 var GRADIENT_1 = "rgb(255,255,255,0.3)";
@@ -57,7 +57,7 @@ var GlassPaneStyled = styled(GlassPaneBase)(templateObject_2 || (templateObject_
      *
      * ### Props
      * - `bordered`: Adds a shiny border.
-     * - `padded`: Adds 16px of inner padding.
+     * - `padded`: Adds 15px of inner padding.
      * - `animated`: Animates on mount.
      *
      * By default, there is no internal padding (though some can be added with `padded`). The panel's
@@ -79,7 +79,7 @@ var GlassPaneStyled = styled(GlassPaneBase)(templateObject_2 || (templateObject_
  *
  * ### Props
  * - `bordered`: Adds a shiny border.
- * - `padded`: Adds 16px of inner padding.
+ * - `padded`: Adds 15px of inner padding.
  * - `animated`: Animates on mount.
  *
  * By default, there is no internal padding (though some can be added with `padded`). The panel's

package/containers/InfoBox/InfoBox.d.ts

@@ -37,6 +37,11 @@ interface IInfoBoxProps extends ITestable {
      * @default false
      */
     scroll?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * `InfoBox` is a layout container that presents structured content inside a

package/containers/InfoBox/InfoBox.js

@@ -33,7 +33,7 @@ import { InfoBoxRow } from './elements/Row';
  * An `InfoBox` is a glass pane with an optional header and footer.
  */
 var InfoBoxBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "InfoBox", className: props.className, role: "region", "aria-label": "Information" },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "InfoBox", className: props.className, style: props.style, role: "region", "aria-label": "Information" },
         React.createElement(Content, { header: props.header, padded: props.padded, minHeight: props.minHeight, scroll: props.scroll }, props.children),
         props.footer && React.createElement(Footer, null, props.footer));
 };

package/containers/List/List.d.ts

@@ -30,6 +30,11 @@ interface IListProps extends ITestable {
      * If set, list items are extra tall.
      */
     tall?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A List presents a series of `ListRow` elements, each containing `ListCell`

package/containers/List/List.js

@@ -19,7 +19,7 @@ import { Input } from '../../inputs/Input';
  * other code, using the ref, can scroll list items into view.
  */
 var List = React.forwardRef(function (props, ref) {
-    return React.createElement(ListStyled, { "data-testid": props['data-testid'] || "List", className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
+    return React.createElement(ListStyled, { "data-testid": props['data-testid'] || "List", className: props.className, style: props.style, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
         props.onSearch &&
             React.createElement(SearchBox, { onClick: function (e) { return e.stopPropagation(); } },
                 React.createElement(Input, { icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),

package/containers/List/ListCell.d.ts

@@ -9,6 +9,11 @@ interface IProps extends ITestable {
     width?: number | string;
     /** Text alignment. Defaults to 'left'. */
     align?: 'left' | 'right';
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const ListCell: {
     (props: IProps): React.JSX.Element;

package/containers/List/ListCell.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListCellBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "ListCell", className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "ListCell", className: props.className, style: props.style }, props.children);
 };
 var ListCellStyled = styled(ListCellBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.width && typeof p.width === 'string' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.width && typeof p.width !== 'string' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["flex: ", ";"], ["flex: ", ";"])), p.width); }, function (p) { return !p.width && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))); }, function (p) { return p.align === 'right' ? 'right' : 'left'; });
 var ListCell = function (props) { return React.createElement(ListCellStyled, __assign({}, props)); };

package/containers/List/ListRow.d.ts

@@ -14,8 +14,13 @@ interface IProps extends ITestable {
      * color.
      */
     disabled?: boolean;
-    /** Triggered when row is clicked. */
-    onClick?: (e?: React.MouseEvent) => void;
+    /** Triggered when row is clicked. Receives the originating mouse event. */
+    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 ListRow: {
     (props: IProps): React.JSX.Element;

package/containers/List/ListRow.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListRowBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "ListRow", className: props.className, onClick: props.disabled ? null : function (e) { return props.onClick(e); } }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "ListRow", className: props.className, style: props.style, onClick: props.disabled ? undefined : function (e) { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e); } }, props.children);
 };
 var ListRowStyled = styled(ListRowBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  ", "\n\n  ", "\n"], ["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  ", "\n\n  ", "\n"])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return (p.onClick && !p.disabled) ? 'pointer' : 'auto'; }, function (p) { return p.gap; }, function (p) { return !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:hover {\n      background-color: ", ";\n    }\n\n    // Background color on pressed:\n    ", "\n\n    ", "\n  "], ["\n    &:hover {\n      background-color: ", ";\n    }\n\n    // Background color on pressed:\n    ", "\n\n    ", "\n  "])), function (p) { return p.theme.colors.neutral[95]; }, p.onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:active {\n        background-color: rgb(from ", " r g b / 65%) !important;\n        color: ", ";\n      }\n    "], ["\n      &:active {\n        background-color: rgb(from ", " r g b / 65%) !important;\n        color: ", ";\n      }\n    "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }), p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: rgb(from ", " r g b / 45%) !important;\n      color: ", ";\n    "], ["\n      background-color: rgb(from ", " r g b / 45%) !important;\n      color: ", ";\n    "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; })); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[50]; }); });
 var ListRow = function (props) { return React.createElement(ListRowStyled, __assign({}, props)); };