@longline/aqua-ui 1.0.339 → 1.0.340

package/inputs/Dropdown/Dropdown.js

@@ -13,42 +13,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -97,18 +61,21 @@ var sameWidth = {
         state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
     }
 };
+// Default number of items shown before the body scrolls; shared by base and wrapper.
+var DEFAULT_MAX_ITEMS = 6;
 var DropdownBase = function (props) {
+    var _a;
     // Current value. Keeps track of current value without waiting for new 
     // value from form, in case there is no form parent.
-    var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
+    var _b = React.useState(props.value), value = _b[0], setValue = _b[1];
     // Ref to wrapper:
     var wrapperRef = React.useRef(null);
     // Ref to scrollable body content:
     var bodyRef = React.useRef(null);
     // Is dropdown currently open?
-    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
     // Current search query.
-    var _c = React.useState(null), search = _c[0], setSearch = _c[1];
+    var _d = React.useState(null), search = _d[0], setSearch = _d[1];
     // When value props changes, change local state value also.
     React.useEffect(function () {
         setValue(props.value);
@@ -126,8 +93,10 @@ var DropdownBase = function (props) {
         // If a search box is present, move focus to it:
         if (props.onSearch) {
             setTimeout(function () {
+                if (!bodyRef.current)
+                    return;
                 var input = bodyRef.current.querySelector('input');
-                input.focus();
+                input === null || input === void 0 ? void 0 : input.focus();
                 // In IE/Chrome, body content scrolls up a little when setting focus
                 // to search input. Scroll it back to top.
                 bodyRef.current.children[0].scrollTop = 0;
@@ -136,9 +105,10 @@ var DropdownBase = function (props) {
     };
     // Close the dropdown.
     var doClose = function () {
+        var _a;
         setOpen(false);
         // Focus was on popper; restore focus to Dropdown.
-        wrapperRef.current.focus();
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         // When the dropdown is closed, an onClose event may be fired.
         // It is fired 300ms after dropdown closure to give the close
         // animation a chance to run, before any changes are made
@@ -178,12 +148,13 @@ var DropdownBase = function (props) {
         c = c.toLowerCase();
         // Go through all (non-null) data records:
         var idx = (props.data || []).filter(function (r) { return r != null; }).findIndex(function (row) {
+            var _a, _b;
             // Build a list of strings contained in the data row:
             var strings = [];
             // If data row is an object, convert all its keys to string.
             if (typeof row === 'object' && row != null) {
                 for (var p in row)
-                    strings.push(row[p].toString());
+                    strings.push((_b = (_a = row[p]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '');
                 // If data row is not an object, just convert its value to a string.
             }
             else {
@@ -230,6 +201,7 @@ var DropdownBase = function (props) {
     // A key was pressed while the selector had focus.
     // 
     var handleKeyDown = function (e) {
+        var _a;
         if (props.disabled || props.ghost)
             return;
         var key = e.key;
@@ -257,7 +229,7 @@ var DropdownBase = function (props) {
         }
         // The keys after this check won't have any effect if onSearch has
         // focus.
-        if (!wrapperRef.current.contains(document.activeElement))
+        if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)))
             return;
         if (key == ' ') {
             e.stopPropagation();
@@ -334,13 +306,13 @@ var DropdownBase = function (props) {
     };
     // Remove item from selection.
     var handleDelete = function (item) {
-        // Find item in value array:
-        var array = value;
+        // Copy the value array before mutating it (never splice state in place).
+        var array = __spreadArray([], value, true);
         var index = array.findIndex(function (x) { return match(x, item); });
         // Remove item from selection:
         array.splice(index, 1);
         // Set new selection:
-        updateValueAndClose(__spreadArray([], array, true));
+        updateValueAndClose(array);
     };
     var handleClear = function () {
         if (props.multiple) {
@@ -350,16 +322,16 @@ var DropdownBase = function (props) {
             updateValueAndClose(null);
         }
     };
-    // Search is debounced by 350ms:
-    var doSearch = function (value) { return props.onSearch(value); };
-    var doSearchBebounced = AwesomeDebouncePromise(doSearch, 350);
-    var handleSearch = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            setSearch(value);
-            doSearchBebounced(value);
-            return [2 /*return*/];
-        });
-    }); };
+    // Search is debounced by 350ms. The debounced function is created once (via
+    // useMemo) so it actually coalesces keystrokes; a ref keeps it pointing at
+    // the latest onSearch. (Recreating it each render defeated debouncing.)
+    var onSearchRef = React.useRef(props.onSearch);
+    onSearchRef.current = props.onSearch;
+    var doSearchDebounced = React.useMemo(function () { return AwesomeDebouncePromise(function (value) { var _a; return (_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, value); }, 350); }, []);
+    var handleSearch = function (value) {
+        setSearch(value);
+        doSearchDebounced(value);
+    };
     // Determine body rows:
     var getBodyChildren = function () {
         var columns = React.Children.map(props.children, function (child) {
@@ -405,9 +377,10 @@ var DropdownBase = function (props) {
     }
     // If Dropdown is clicked, then click Selector.
     var handleClickDropdown = function () {
-        wrapperRef.current.children[0].click();
+        if (wrapperRef.current)
+            wrapperRef.current.children[0].click();
     };
-    var _d = usePopper(wrapperRef.current, bodyRef.current, {
+    var _e = usePopper(wrapperRef.current, bodyRef.current, {
         placement: props.direction == 'down' ? 'bottom' : 'top',
         modifiers: [
             {
@@ -418,10 +391,10 @@ var DropdownBase = function (props) {
             },
             sameWidth
         ]
-    }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Dropdown", className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
-        React.createElement(Selection, { open: open, error: props.error, disabled: props.disabled, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
-        createPortal(React.createElement(Body, { ref: bodyRef, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth, styles: styles, attributes: attributes }, getBodyChildren()), document.body)));
+    }), styles = _e.styles, attributes = _e.attributes, update = _e.update;
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Dropdown", className: props.className, style: props.style, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
+        React.createElement(Selection, { open: open, error: props.error, disabled: props.disabled, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : undefined, placeholder: showPlaceholder }, label),
+        createPortal(React.createElement(Body, { ref: bodyRef, open: open, transparent: props.transparent, maxItems: (_a = props.maxItems) !== null && _a !== void 0 ? _a : DEFAULT_MAX_ITEMS, onSearch: props.onSearch ? handleSearch : undefined, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth, styles: styles, attributes: attributes }, getBodyChildren()), document.body)));
 };
 var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  // Dropdown has a minimum width. \n  width: 250px;\n  // A fluid Dropdown occupies all available horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"], ["\n  position: relative;\n  // Dropdown has a minimum width. \n  width: 250px;\n  // A fluid Dropdown occupies all available horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"
     /**
@@ -460,7 +433,7 @@ var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2
  * ```
  */
 var Dropdown = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.clearable, clearable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.transparent, transparent = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, _j = _a.resetOnOpen, resetOnOpen = _j === void 0 ? false : _j, _k = _a.gap, gap = _k === void 0 ? 16 : _k, _l = _a.maxItems, maxItems = _l === void 0 ? 6 : _l, _m = _a.tall, tall = _m === void 0 ? false : _m, _o = _a.label, label = _o === void 0 ? function (item) { return item; } : _o, _p = _a.match, match = _p === void 0 ? 'json' : _p, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label", "match"]);
+    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.clearable, clearable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.transparent, transparent = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, _j = _a.resetOnOpen, resetOnOpen = _j === void 0 ? false : _j, _k = _a.gap, gap = _k === void 0 ? 16 : _k, _l = _a.maxItems, maxItems = _l === void 0 ? DEFAULT_MAX_ITEMS : _l, _m = _a.tall, tall = _m === void 0 ? false : _m, _o = _a.label, label = _o === void 0 ? function (item) { return item; } : _o, _p = _a.match, match = _p === void 0 ? 'json' : _p, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label", "match"]);
     return (React.createElement(DropdownStyled, __assign({ direction: direction, fluid: fluid, clearable: clearable, disabled: disabled, transparent: transparent, error: error, multiple: multiple, resetOnOpen: resetOnOpen, gap: gap, maxItems: maxItems, tall: tall, label: label, match: match }, props)));
 };
 Dropdown.displayName = 'Dropdown';

package/inputs/Dropdown/Pill.js

@@ -18,6 +18,6 @@ var PillBase = function (props) {
             React.createElement("use", { xlinkHref: SVG.Icons.Cross }))));
 };
 var Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;  \n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;  \n"])));
-var Pill = styled(PillBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position:\n  position: relative;\n  margin-right: 4px;\n  flex: flex-shrink;\n  min-width: 60px;\n  overflow: hidden;\n  \n  // Layout:\n  display: inline-flex;\n  height: 20px;\n  gap: 2px;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 3px 0 8px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    width: 14px;\n    height: 14px;    \n    min-width: 14px;\n    fill: ", ";\n    transition: \n      fill ", "ms ease,\n      background-color ", "ms ease;\n    border-radius: 50%;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color:  ", ";\n    outline-offset: -1px;\n    &>svg {\n      fill: #fff;\n      background-color: ", ";\n    }\n  }\n"], ["\n  // Position:\n  position: relative;\n  margin-right: 4px;\n  flex: flex-shrink;\n  min-width: 60px;\n  overflow: hidden;\n  \n  // Layout:\n  display: inline-flex;\n  height: 20px;\n  gap: 2px;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 3px 0 8px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    width: 14px;\n    height: 14px;    \n    min-width: 14px;\n    fill: ", ";\n    transition: \n      fill ", "ms ease,\n      background-color ", "ms ease;\n    border-radius: 50%;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color:  ", ";\n    outline-offset: -1px;\n    &>svg {\n      fill: #fff;\n      background-color: ", ";\n    }\n  }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.negative; }, function (p) { return p.theme.colors.neutral[10]; });
+var Pill = styled(PillBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position:\n  position: relative;\n  margin-right: 4px;\n  min-width: 60px;\n  overflow: hidden;\n  \n  // Layout:\n  display: inline-flex;\n  height: 20px;\n  gap: 2px;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 3px 0 8px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    width: 14px;\n    height: 14px;    \n    min-width: 14px;\n    fill: ", ";\n    transition: \n      fill ", "ms ease,\n      background-color ", "ms ease;\n    border-radius: 50%;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color:  ", ";\n    outline-offset: -1px;\n    &>svg {\n      fill: ", ";\n      background-color: ", ";\n    }\n  }\n"], ["\n  // Position:\n  position: relative;\n  margin-right: 4px;\n  min-width: 60px;\n  overflow: hidden;\n  \n  // Layout:\n  display: inline-flex;\n  height: 20px;\n  gap: 2px;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 3px 0 8px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    width: 14px;\n    height: 14px;    \n    min-width: 14px;\n    fill: ", ";\n    transition: \n      fill ", "ms ease,\n      background-color ", "ms ease;\n    border-radius: 50%;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color:  ", ";\n    outline-offset: -1px;\n    &>svg {\n      fill: ", ";\n      background-color: ", ";\n    }\n  }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.negative; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.neutral[10]; });
 export { Pill };
 var templateObject_1, templateObject_2;

package/inputs/Dropdown/Selection.js

@@ -8,7 +8,7 @@ import styled, { css } from 'styled-components';
 import { SVG } from '../../svg';
 import { InputWrapper } from '../Input/InputWrapper';
 var Selection = function (props) {
-    return (React.createElement(InputWrapper, { fluid: true, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, onClick: props.onClick, onClear: props.onClear, icon: props.onClear ? null : SVG.Icons.Caret, iconPosition: 'right' },
+    return (React.createElement(InputWrapper, { fluid: true, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, onClick: props.onClick, onClear: props.onClear, icon: props.onClear ? undefined : SVG.Icons.Caret, iconPosition: 'right' },
         React.createElement(Inner, { tabIndex: -1, "$multiple": props.multiple, "$placeholder": props.placeholder }, props.children)));
 };
 var Inner = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n  // Multiple selections use a flexbox for individual overflows: \n  ", "\n  // Add ellipsis to selection text:\n  ", "  \n"], ["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n  // Multiple selections use a flexbox for individual overflows: \n  ", "\n  // Add ellipsis to selection text:\n  ", "  \n"])), function (p) { return p.$placeholder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: rgb(from ", " r g b / 50%);\n  "], ["\n    color: rgb(from ", " r g b / 50%);\n  "])), function (p) { return p.theme.colors.primary[3]; }); }, function (p) { return p.$multiple && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n  "], ["\n    display: flex;\n  "]))); }, function (p) { return !p.$multiple && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["text-overflow: ellipsis;"], ["text-overflow: ellipsis;"]))); });

package/inputs/Editor/Editor.d.ts

@@ -68,6 +68,11 @@ interface IEditorProps extends ITestable {
      * Listeners are notified whenever the user interacts with the Editor.
      */
     onChange?: (value: any) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Editor: {
     ({ fluid, error, disabled, transparent, ghost, allowFullscreen, codeButtons, ...props }: IEditorProps): React.JSX.Element;

package/inputs/Editor/Editor.js

@@ -97,19 +97,27 @@ var EditorBase = function (props) {
         return function () { return document.removeEventListener('fullscreenchange', handleFullscreenChange); };
     }, []);
     var handleToggleFullscreen = function () {
+        var _a;
         if (document.fullscreenElement) {
             document.exitFullscreen();
         }
         else {
-            wrapperRef.current.requestFullscreen();
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
         }
     };
     var editor = useEditor({
         extensions: extensions,
         content: sanitizeEditorHTML(props.value),
         injectCSS: false,
+        editable: !props.disabled && !props.ghost,
         onUpdate: handleUpdate
     });
+    // Keep TipTap's editable state in sync: CSS pointer-events only blocks the
+    // mouse, so without this a disabled/ghosted editor could still be edited via
+    // the keyboard.
+    React.useEffect(function () {
+        editor === null || editor === void 0 ? void 0 : editor.setEditable(!props.disabled && !props.ghost);
+    }, [props.disabled, props.ghost, editor]);
     React.useEffect(function () {
         // If props.value is exactly what the editor just emitted, this is a
         // round-trip from our own onChange — skip sanitizing and re-setting
@@ -118,7 +126,7 @@ var EditorBase = function (props) {
         if (props.value === lastEmittedRef.current)
             return;
         var safeValue = sanitizeEditorHTML(props.value);
-        if (editor.getHTML() !== safeValue) {
+        if (editor && editor.getHTML() !== safeValue) {
             editor.commands.setContent(safeValue, true, { preserveWhitespace: "full" });
         }
     }, [props.value]);
@@ -128,16 +136,18 @@ var EditorBase = function (props) {
         if (r == null || r == contentEditableRef.current)
             return;
         contentEditableRef.current = r.querySelector('.tiptap');
-        EditorRegistry.addEditor(contentEditableRef.current, editor);
+        if (contentEditableRef.current && editor)
+            EditorRegistry.addEditor(contentEditableRef.current, editor);
     };
     // Upon unmount, an editor is removed from the EditorRegistry.
     React.useEffect(function () { return function () {
-        EditorRegistry.removeEditor(contentEditableRef.current);
+        if (contentEditableRef.current)
+            EditorRegistry.removeEditor(contentEditableRef.current);
     }; }, []);
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
-        React.createElement("div", { "data-testid": props['data-testid'] || "Editor", className: props.className, ref: wrapperRef },
+        React.createElement("div", { "data-testid": props['data-testid'] || "Editor", className: props.className, style: props.style, ref: wrapperRef },
             React.createElement(OverlayScrollbarsComponent, { className: "scroller ".concat(fullscreen ? 'fullscreen' : ''), defer: true, options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } } },
-                !props.disabled && !props.ghost &&
+                !props.disabled && !props.ghost && editor &&
                     React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, textAIurl: props.textAIurl, speechAIurl: props.speechAIurl, authToken: props.authToken }),
                 React.createElement(EditorContent, { editor: editor, ref: setRef })))));
 };

package/inputs/Editor/buttons/SpeechAIButton.js

@@ -6,6 +6,8 @@ var SpeechAIButton = function (props) {
     var fromRef = useRef(null);
     var transcriptRef = useRef("");
     var onTranscript = function (text) {
+        if (fromRef.current == null)
+            return;
         var _a = props.editor, state = _a.state, view = _a.view;
         var transaction = state.tr
             .insertText(text, fromRef.current, fromRef.current + transcriptRef.current.length);

package/inputs/Editor/buttons/TextAIButton.d.ts

@@ -11,18 +11,5 @@ interface IProps {
      */
     authToken?: string;
 }
-/**
- * `TextAIButton` provides a menu button that allows the user to run various
- * AI-powered text transformations on selected editor content.
- *
- * Available transformations include:
- * - Summarizing selected content
- * - Extracting key points
- * - Translating
- *
- * When triggered, the selected content is cut, sent to the configured Text AI
- * back-end, and replaced with the transformed version. Streaming support
- * allows real-time insertion with animated progress.
- */
 declare const TextAIButton: (props: IProps) => React.JSX.Element;
 export { TextAIButton };

package/inputs/Editor/buttons/TextAIButton.js

@@ -34,7 +34,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { marked } from 'marked';
 import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';
 import { useTextAIStream } from '../../../hooks/useTextAIStream';
@@ -52,12 +52,15 @@ import { TextAIMenu } from './TextAIMenu';
  * back-end, and replaced with the transformed version. Streaming support
  * allows real-time insertion with animated progress.
  */
+// The DOM parser is stateless, so a single shared instance is reused across
+// renders and stream chunks.
+var domParser = new DOMParser();
 var TextAIButton = function (props) {
-    var streamTextAI = useTextAIStream(props.url, props.authToken).stream;
-    var _a = useState(false), streaming = _a[0], setStreaming = _a[1];
-    // The DOM parser is only created once, then used many times as content
-    // is streamed in.
-    var domParser = new DOMParser();
+    var _a = useTextAIStream(props.url, props.authToken), streamTextAI = _a.stream, cancel = _a.cancel;
+    var _b = useState(false), streaming = _b[0], setStreaming = _b[1];
+    // Abort any in-flight stream when the button unmounts, so onText doesn't run
+    // against a torn-down editor.
+    useEffect(function () { return cancel; }, [cancel]);
     /**
      * Copy the selected content, then remove it. The selection may be empty.
      * @returns {string} The plain text that was selected and removed.
@@ -138,11 +141,13 @@ var TextAIButton = function (props) {
         // Remove the node from the document.
         var _a = props.editor, state = _a.state, view = _a.view;
         var node = state.doc.nodeAt(nodePos);
+        if (node == null)
+            return;
         var tr = state.tr.delete(nodePos, nodePos + node.nodeSize);
         view.dispatch(tr);
     };
     var stream = function (prompt) { return __awaiter(void 0, void 0, void 0, function () {
-        var id, text;
+        var id, text_1, e_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -152,29 +157,40 @@ var TextAIButton = function (props) {
                 case 1:
                     // Create initial node.
                     _a.sent();
-                    text = "";
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 5, , 6]);
+                    text_1 = "";
                     return [4 /*yield*/, streamTextAI(prompt, function (chunk) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
-                                        text += chunk;
+                                        text_1 += chunk;
                                         removeNode(id);
-                                        return [4 /*yield*/, addNode(id, text, true)];
+                                        return [4 /*yield*/, addNode(id, text_1, true)];
                                     case 1:
                                         _a.sent();
                                         return [2 /*return*/];
                                 }
                             });
                         }); })];
-                case 2:
+                case 3:
                     _a.sent();
                     // Replace the node one more time, this time without a blinking <mark>
                     // cursor.
                     removeNode(id);
-                    return [4 /*yield*/, addNode(id, text, false)];
-                case 3:
+                    return [4 /*yield*/, addNode(id, text_1, false)];
+                case 4:
                     _a.sent();
-                    return [2 /*return*/];
+                    return [3 /*break*/, 6];
+                case 5:
+                    e_1 = _a.sent();
+                    // On failure, remove the dangling stream node rather than leaving the
+                    // placeholder in the document.
+                    removeNode(id);
+                    console.warn('Text AI stream failed:', e_1);
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
             }
         });
     }); };

package/inputs/Editor/buttons/TextAIMenu.js

@@ -23,7 +23,7 @@ var TextAIMenu = function (props) {
             React.createElement("div", { style: { minWidth: '150px' } },
                 React.createElement(List, { maxItems: 4, contract: true },
                     React.createElement(ListRow, { disabled: selectionIsEmpty, onClick: function () { return handleClick(function (text) {
-                            return "Produce a list of the key points in the following text, returning only the result: \n\n".concat(text);
+                            return "Summarize the following text, returning only the result: \n\n".concat(text);
                         }); } }, "Summarize"),
                     React.createElement(ListRow, { disabled: selectionIsEmpty, onClick: function () { return handleClick(function (text) {
                             return "Produce a list of the key points in the following text, returning only the result: \n\n".concat(text);

package/inputs/Editor/menu/MenuBar.d.ts

@@ -32,5 +32,5 @@ interface IProps {
     /** Fired when fullscreen mode must be toggled. */
     onToggleFullscreen: () => void;
 }
-declare const MenuBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const MenuBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element | null, keyof React.Component<any, {}, any>>;
 export { MenuBar };

package/inputs/Editor/menu/MenuBar.js

@@ -31,7 +31,7 @@ var MenuBarBase = function (props) {
                 React.createElement(MenuSeparator, null),
                 React.createElement(CodeButton, { editor: props.editor }),
                 React.createElement(CodeBlockButton, { editor: props.editor })),
-            (props.textAIurl || props.allowFullscreen) && React.createElement(MenuSeparator, null),
+            (props.textAIurl || props.speechAIurl || props.allowFullscreen) && React.createElement(MenuSeparator, null),
             props.textAIurl &&
                 React.createElement(TextAIButton, { url: props.textAIurl, editor: props.editor, authToken: props.authToken }),
             props.speechAIurl &&

package/inputs/Editor/menu/MenuButton.js

@@ -46,7 +46,7 @@ var MenuButtonBase = function (props) {
             }
         ]
     }), styles = _a.styles, attributes = _a.attributes, update = _a.update;
-    return (React.createElement("button", { className: props.className, disabled: props.disabled, onClick: props.onClick, ref: buttonRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    return (React.createElement("button", { className: props.className, disabled: props.disabled, onClick: props.onClick, ref: buttonRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-label": typeof props.hint === 'string' ? props.hint : undefined },
         React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
         buttonRef.current && createPortal(React.createElement(MenuButtonHint, { keys: props.keys, ref: hintRef, styles: styles, attributes: attributes }, props.hint), buttonRef.current)));
 };

package/inputs/Input/Clear.js

@@ -6,7 +6,7 @@ var Clear = function (props) {
     var theme = useTheme();
     var handleClick = function (e) {
         // Stop propagation, or color/date controls will open on click.
-        e.stopPropagation();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
         props.onClick();
     };
     return (React.createElement(Icon, { size: 17, url: SVG.Icons.Cross, circle: true, color: theme.colors.primary[3], onClick: handleClick }));

package/inputs/Input/Input.d.ts

@@ -129,6 +129,11 @@ interface IInputProps extends ITestable {
      * Listeners are notified when the Input receives focus.
      */
     onFocus?: () => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Input: {
     (props: IInputProps): React.JSX.Element;

package/inputs/Input/Input.js

@@ -35,8 +35,9 @@ var InputBase = function (props) {
     };
     // When input is cleared, its value is set to NULL.
     var handleClear = function () {
+        var _a;
         setValue("");
-        inputRef.current.focus();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         if (props.onChange) {
             props.onChange(null);
         }
@@ -57,8 +58,9 @@ var InputBase = function (props) {
     }, []);
     // Handle hotkey check.
     var handleKeyDown = function (e) {
+        var _a, _b;
         // If not the hotkey, then abort.
-        if (e.key.toLowerCase() != props.hotKey.toLowerCase())
+        if (!props.hotKey || e.key.toLowerCase() != props.hotKey.toLowerCase())
             return;
         // Check modifier keys:
         if (props.hotKeyCtrl && !e.ctrlKey)
@@ -68,13 +70,13 @@ var InputBase = function (props) {
         if (props.hotKeyShift && !e.shiftKey)
             return;
         // It's our key. Focus the input.
-        inputRef.current.focus();
-        inputRef.current.select();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
     };
-    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
+    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : undefined, onToggleReveal: props.revealable ? handleToggleReveal : undefined, revealed: revealed, unit: props.unit, style: props.style },
         React.createElement("input", { "data-testid": props['data-testid'] || "Input", className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
 };
-var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), p.theme.colors.neutral[50]); });
+var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), p.theme.colors.neutral[50]); });
 var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };
 Input.displayName = 'Input';
 export { Input };

package/inputs/Input/InputWrapper.d.ts

@@ -18,6 +18,8 @@ interface IProps extends ITestable {
      */
     iconPosition?: 'left' | 'right';
     unit?: React.ReactNode;
+    /** Optional inline styles applied to the wrapper's outer element. */
+    style?: React.CSSProperties;
     onClear?: () => void;
     onClick?: () => void;
     revealed?: boolean;

package/inputs/Input/InputWrapper.js

@@ -42,7 +42,7 @@ var InputWrapperBase = function (props) {
     else if (props.icon != null) {
         icon = (React.createElement(Icon, __assign({ size: 17, color: (_a = props.icon.color) !== null && _a !== void 0 ? _a : theme.colors.primary[3] }, props.icon)));
     }
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "InputWrapper", className: props.className, onClick: props.onClick },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "InputWrapper", className: props.className, style: props.style, onClick: props.onClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         icon && !props.ghost && props.iconPosition == 'left' && icon,
         React.createElement(Content, null, props.children),

package/inputs/Input/Reveal.js

@@ -6,7 +6,7 @@ var Reveal = function (props) {
     var theme = useTheme();
     var handleClick = function (e) {
         // Stop propagation, or color/date controls will open on click.
-        e.stopPropagation();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
         props.onClick();
     };
     return (React.createElement(Icon, { size: 17, url: props.revealed ? SVG.Icons.EyeClosed : SVG.Icons.Eye, color: theme.colors.primary[3], onClick: handleClick }));

package/inputs/MonthRange/Body.d.ts

@@ -23,6 +23,6 @@ interface IProps {
     attributes: any;
 }
 declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & 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<IProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
 export { Body };

package/inputs/MonthRange/Calendar.d.ts

@@ -5,9 +5,9 @@ interface IProps {
     /** Calendar year */
     year: number;
     /** Selected start date */
-    start: Date;
+    start: Date | null;
     /** Selected end date */
-    end: Date;
+    end: Date | null;
     /** Fired when calendar changes year */
     onChangeYear: (year: number) => void;
     /** Fired when month is clicked. */