@longline/aqua-ui 1.0.339 → 1.0.340

package/formatters/PhoneFormatter/PhoneFormatter.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface IPhoneFormatterProps {
     /**
-     * Phone number in E.164 format, e.g. `"+351910306792"`.
+     * Phone number in E.164 format, e.g. `"+351910306792"`. `null` renders nothing.
      */
-    value: string;
+    value: string | null;
 }
 /**
  * Displays a phone number alongside the flag of the country its international
@@ -18,7 +18,7 @@ interface IPhoneFormatterProps {
  * ```
  */
 declare const PhoneFormatter: {
-    ({ value }: IPhoneFormatterProps): React.JSX.Element;
+    ({ value }: IPhoneFormatterProps): React.JSX.Element | null;
     displayName: string;
 };
 export { PhoneFormatter };

package/formatters/StringFormatter/StringFormatter.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface IStringFormatterProps {
-    /** String to format */
-    value: string;
+    /** String to format. `null` renders nothing. */
+    value: string | null;
     /** Type of formatting */
     type: 'capitalize' | 'capitalizeWords' | 'upper' | 'lower' | 'reverse' | 'snake' | 'kebab';
 }
@@ -32,7 +32,7 @@ interface IStringFormatterProps {
  * ```
  */
 declare const StringFormatter: {
-    ({ value, type }: IStringFormatterProps): React.JSX.Element;
+    ({ value, type }: IStringFormatterProps): React.JSX.Element | null;
     displayName: string;
 };
 export { StringFormatter, IStringFormatterProps };

package/formatters/StringFormatter/StringFormatter.js

@@ -10,10 +10,7 @@ var capitalize = function (str) {
 var capitalizeWords = function (str) {
     return str
         .split(/\s+/)
-        .map(function (word) {
-        var _a = Array.from(word), first = _a[0], rest = _a.slice(1);
-        return first.toLocaleUpperCase() + rest.join('');
-    })
+        .map(capitalize)
         .join(' ');
 };
 /** Formatters map */

package/helper/DMS.d.ts

@@ -27,7 +27,7 @@ declare class DMS {
      * // Returns: "(no coordinates)" (out of range)
      * ```
      */
-    static toDMSString(value: number | string, defaultStr: string, max: number, positive: string, negative: string): string;
+    static toDMSString(value: number | string | null, defaultStr: string, max: number, positive: string, negative: string): string;
     /**
      * Convert a decimal latitude or longitude value to degrees,
      * minutes, and seconds.

package/helper/DMS.js

@@ -30,8 +30,8 @@ var DMS = /** @class */ (function () {
      * ```
      */
     DMS.toDMSString = function (value, defaultStr, max, positive, negative) {
-        // Convert value to number if it is a string:
-        var num = typeof value === 'number' ? value : parseFloat(value);
+        // Convert value to number if it is a string; null falls through to NaN.
+        var num = typeof value === 'number' ? value : (value == null ? NaN : parseFloat(value));
         // Return default string if value is not a number or out of range:
         if (isNaN(num) || num < -max || num > max)
             return defaultStr;

package/hooks/useOutsideClose/useOutsideClose.js

@@ -48,6 +48,13 @@ import * as React from "react";
  */
 function useOutsideClose(_a) {
     var open = _a.open, refs = _a.refs, onClose = _a.onClose, _b = _a.escapeToClose, escapeToClose = _b === void 0 ? false : _b, _c = _a.blurToClose, blurToClose = _c === void 0 ? false : _c;
+    // Keep the latest refs/onClose in refs so the listener effect doesn't depend
+    // on them. Consumers typically pass an inline refs array and inline onClose,
+    // which would otherwise re-attach the document listeners on every render.
+    var refsRef = React.useRef(refs);
+    refsRef.current = refs;
+    var onCloseRef = React.useRef(onClose);
+    onCloseRef.current = onClose;
     // Events get added to the component only when it opens, and removed
     // when it closes. This way, components aren't listening for document-wide
     // events when they're closed.
@@ -55,30 +62,32 @@ function useOutsideClose(_a) {
         // If component isn't open, then do nothing:
         if (!open)
             return undefined;
-        // When the HTML document gets clicked, see if the click is inside one of 
-        // the HTML elements that were passed in. If so, do nothing. It outside 
-        // these elements, close the component. 
+        // When the HTML document gets clicked, see if the click is inside one of
+        // the HTML elements that were passed in. If so, do nothing. If outside
+        // these elements, close the component.
         var handleClick = function (e) {
             var target = e.target;
-            var clickedInside = refs.some(function (ref) { return ref.current && ref.current.contains(target); });
+            var clickedInside = refsRef.current.some(function (ref) { return ref.current && ref.current.contains(target); });
             if (!clickedInside) {
-                onClose();
+                onCloseRef.current();
             }
         };
         // When the ESC key is pressed (and this feature has been enabled),
         // close the component.
         var handleKeyDown = function (e) {
             if (escapeToClose && e.key === "Escape") {
-                onClose();
+                onCloseRef.current();
             }
         };
+        // On focusout, relatedTarget is the element receiving focus. Close if focus
+        // is moving outside all refs (or is being lost entirely).
         var handleBlur = function (e) {
             if (!blurToClose)
                 return;
             var target = e.relatedTarget; // where focus is going
-            var focusedInside = refs.some(function (ref) { return ref.current && target && ref.current.contains(target); });
+            var focusedInside = refsRef.current.some(function (ref) { return ref.current && target && ref.current.contains(target); });
             if (!focusedInside) {
-                onClose();
+                onCloseRef.current();
             }
         };
         // Add event listeners:
@@ -87,7 +96,7 @@ function useOutsideClose(_a) {
             document.addEventListener("keydown", handleKeyDown);
         }
         if (blurToClose) {
-            document.addEventListener("focusin", handleBlur); // focusin bubbles
+            document.addEventListener("focusout", handleBlur); // focusout bubbles
         }
         // Remove event listeners:
         return function () {
@@ -96,9 +105,9 @@ function useOutsideClose(_a) {
                 document.removeEventListener("keydown", handleKeyDown);
             }
             if (blurToClose) {
-                document.removeEventListener("focusin", handleBlur);
+                document.removeEventListener("focusout", handleBlur);
             }
         };
-    }, [open, refs, onClose, escapeToClose, blurToClose]);
+    }, [open, escapeToClose, blurToClose]);
 }
 export { useOutsideClose };

package/hooks/useSpeechAIRecorder/useSpeechAIRecorder.js

@@ -44,7 +44,7 @@ import { SpeechManager } from './SpeechManager';
 // code in a template string, compile that into a blob, and then use that
 // instead. This way, no separate JS file needs to be deployed with AquaUI.
 // 
-var moduleScript = /* js */ "\nconst MAX_16BIT_INT = 32767\nclass AudioProcessor extends AudioWorkletProcessor {\n  constructor() {\n    super();\n\n    // Input is browser sample rate (typically 48000 Hz in Firefox)\n    // This variable is globally available inside the AudioWorkletProcessor\n    // scope.\n    this.inputSampleRate = sampleRate;\n    console.log('Detected input sample rate:', sampleRate);\n    this.targetSampleRate = 16000;\n    this.ratio = this.inputSampleRate / this.targetSampleRate;\n\n    // Buffer of input samples for resampling\n    this.buffer = [];\n\n    // Number of samples per output chunk\n    this.chunkSize = 1600; // ~100ms at 16kHz\n  }\n\n  /**\n   * Resample the input buffer to the target sample rate using linear interpolation.\n   */\n  resample(inputBuffer) {\n    const outputLength = Math.floor(inputBuffer.length / this.ratio);\n    const output = new Float32Array(outputLength);\n\n    for (let i = 0; i < outputLength; i++) {\n      const idx = i * this.ratio;\n      const idxInt = Math.floor(idx);\n      const idxFrac = idx - idxInt;\n\n      const sample1 = inputBuffer[idxInt] || 0;\n      const sample2 = inputBuffer[idxInt + 1] || 0;\n      output[i] = sample1 + (sample2 - sample1) * idxFrac;\n    }\n\n    return output;\n  }\n\n  /**\n   * Converts Float32 PCM [-1, 1] to 16-bit signed PCM\n   */\n  floatTo16BitPCM(float32Array) {\n    const int16Array = new Int16Array(float32Array.length);\n    for (let i = 0; i < float32Array.length; i++) {\n      let s = Math.max(-1, Math.min(1, float32Array[i]));\n      int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;\n    }\n    return int16Array;\n  }\n\n  /**\n   * Called automatically by browser on each audio frame (128 samples per channel).\n   */\n  process(inputs, outputs, parameters) {\n    try {\n      const input = inputs[0];\n      if (!input || input.length === 0) return true;\n\n      // Read from mono channel\n      const channelData = input[0];\n      this.buffer.push(...channelData);\n\n      // Only process if we have enough input to produce a full output chunk\n      const neededInputSamples = this.chunkSize * this.ratio;\n      if (this.buffer.length >= neededInputSamples) {\n        const inputForChunk = this.buffer.slice(0, neededInputSamples);\n        const resampled = this.resample(inputForChunk);\n        const pcm = this.floatTo16BitPCM(resampled);\n\n        this.port.postMessage({ audio_data: pcm }); // Send Int16Array to main thread\n\n        // Remove consumed input samples\n        this.buffer = this.buffer.slice(neededInputSamples);\n      }\n\n      return true; // Keep processor alive\n    } catch (error) {\n      console.error(error)\n      return false\n    }\n  }\n}\n\nregisterProcessor('audio-processor', AudioProcessor);\n";
+var moduleScript = /* js */ "\nconst MAX_16BIT_INT = 32767\nclass AudioProcessor extends AudioWorkletProcessor {\n  constructor() {\n    super();\n\n    // Input is browser sample rate (typically 48000 Hz in Firefox)\n    // This variable is globally available inside the AudioWorkletProcessor\n    // scope.\n    this.inputSampleRate = sampleRate;\n    this.targetSampleRate = 16000;\n    this.ratio = this.inputSampleRate / this.targetSampleRate;\n\n    // Buffer of input samples for resampling\n    this.buffer = [];\n\n    // Number of samples per output chunk\n    this.chunkSize = 1600; // ~100ms at 16kHz\n  }\n\n  /**\n   * Resample the input buffer to the target sample rate using linear interpolation.\n   */\n  resample(inputBuffer) {\n    const outputLength = Math.floor(inputBuffer.length / this.ratio);\n    const output = new Float32Array(outputLength);\n\n    for (let i = 0; i < outputLength; i++) {\n      const idx = i * this.ratio;\n      const idxInt = Math.floor(idx);\n      const idxFrac = idx - idxInt;\n\n      const sample1 = inputBuffer[idxInt] || 0;\n      const sample2 = inputBuffer[idxInt + 1] || 0;\n      output[i] = sample1 + (sample2 - sample1) * idxFrac;\n    }\n\n    return output;\n  }\n\n  /**\n   * Converts Float32 PCM [-1, 1] to 16-bit signed PCM\n   */\n  floatTo16BitPCM(float32Array) {\n    const int16Array = new Int16Array(float32Array.length);\n    for (let i = 0; i < float32Array.length; i++) {\n      let s = Math.max(-1, Math.min(1, float32Array[i]));\n      int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;\n    }\n    return int16Array;\n  }\n\n  /**\n   * Called automatically by browser on each audio frame (128 samples per channel).\n   */\n  process(inputs, outputs, parameters) {\n    try {\n      const input = inputs[0];\n      if (!input || input.length === 0) return true;\n\n      // Read from mono channel\n      const channelData = input[0];\n      this.buffer.push(...channelData);\n\n      // Only process if we have enough input to produce a full output chunk\n      const neededInputSamples = this.chunkSize * this.ratio;\n      if (this.buffer.length >= neededInputSamples) {\n        const inputForChunk = this.buffer.slice(0, neededInputSamples);\n        const resampled = this.resample(inputForChunk);\n        const pcm = this.floatTo16BitPCM(resampled);\n\n        this.port.postMessage({ audio_data: pcm }); // Send Int16Array to main thread\n\n        // Remove consumed input samples\n        this.buffer = this.buffer.slice(neededInputSamples);\n      }\n\n      return true; // Keep processor alive\n    } catch (error) {\n      console.error(error)\n      return false\n    }\n  }\n}\n\nregisterProcessor('audio-processor', AudioProcessor);\n";
 /**
  * useSpeechAIRecorder
  *
@@ -132,6 +132,7 @@ var useSpeechAIRecorder = function (url, onTranscript, authToken) {
                     return [4 /*yield*/, audioContext.audioWorklet.addModule(scriptUrl)];
                 case 2:
                     _a.sent();
+                    URL.revokeObjectURL(scriptUrl);
                     node = new AudioWorkletNode(audioContext, 'audio-processor');
                     source.connect(node);
                     node.connect(audioContext.destination); // Required to keep node alive in some browsers
@@ -225,7 +226,6 @@ var useSpeechAIRecorder = function (url, onTranscript, authToken) {
                     }
                     // Turn off any other speech recording through the SpeechManager singleton.
                     // Register this stream as the current one.
-                    console.log("START SESSION");
                     SpeechManager.startNewSession(function () {
                         cleanup();
                     });
@@ -246,7 +246,6 @@ var useSpeechAIRecorder = function (url, onTranscript, authToken) {
                     turnsRef.current = {};
                     // WebSocket connection established
                     ws.onopen = function () {
-                        console.log('WebSocket connected.');
                         // Start recording and streaming chunks
                         startRecording(function (audioChunk) {
                             if (ws.readyState === WebSocket.OPEN) {
@@ -261,7 +260,13 @@ var useSpeechAIRecorder = function (url, onTranscript, authToken) {
                     };
                     // Handle messages from AssemblyAI
                     ws.onmessage = function (event) {
-                        var msg = JSON.parse(event.data);
+                        var msg;
+                        try {
+                            msg = JSON.parse(event.data);
+                        }
+                        catch (_a) {
+                            return; // Ignore non-JSON / binary frames.
+                        }
                         if (msg.type === 'Turn') {
                             var turn_order = msg.turn_order, transcript = msg.transcript;
                             turnsRef.current[turn_order] = transcript;
@@ -276,9 +281,7 @@ var useSpeechAIRecorder = function (url, onTranscript, authToken) {
                     ws.onerror = function (err) {
                         console.error('WebSocket error:', err);
                     };
-                    ws.onclose = function () {
-                        console.log('WebSocket closed.');
-                    };
+                    ws.onclose = function () { };
                     return [2 /*return*/];
             }
         });

package/index.js

@@ -0,0 +1 @@
+"use strict";

package/inputs/DateInput/Body.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     /**
      * Current value.
      */
-    value: Date;
+    value: Date | null;
     /**
      * Is control currently open?
      */
@@ -27,6 +27,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/DateInput/Body.js

@@ -34,23 +34,27 @@ var BodyBase = React.forwardRef(function (props, ref) {
     var handleDayClick = function (date) {
         props.onSelect(date);
     };
-    // 
+    //
     // Moves current view by specified number of months.
-    // 
+    //
     var handleMove = function (months) {
-        date.setMonth(date.getMonth() + months);
-        setDate(new Date(date));
+        var d = new Date(date);
+        d.setMonth(d.getMonth() + months);
+        setDate(d);
     };
     var handlePrevYear = function () { return handleMove(-12); };
     var handleNextYear = function () { return handleMove(12); };
     var handlePrevMonth = function () { return handleMove(-1); };
     var handleNextMonth = function () { return handleMove(1); };
     var handleMonth = function (month) {
-        date.setMonth(month);
-        setDate(new Date(date));
+        var d = new Date(date);
+        d.setMonth(month);
+        setDate(d);
     };
     var handleYear = function (year) {
-        date.setFullYear(year);
+        var d = new Date(date);
+        d.setFullYear(year);
+        setDate(d);
     };
     return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: props.className, tabIndex: -1, ref: ref, onMouseDown: function (e) { return e.stopPropagation(); } }),
         React.createElement(Navbar, { date: date, onPrevYear: handlePrevYear, onNextYear: handleNextYear, onPrevMonth: handlePrevMonth, onNextMonth: handleNextMonth, onMonth: handleMonth, onYear: handleYear }),

package/inputs/DateInput/Calendar.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     /** Current date. Will be highlighted. */
     date: Date;
     /** Selected date. Will be highlighted. */
-    selectedDate: Date;
+    selectedDate: Date | null;
     /** If set, don't allow picking days beyond today. */
     nofuture?: boolean;
     /** Fired when a date is clicked. */

package/inputs/DateInput/Calendar.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { Day } from './Day';
 var CalendarBase = function (props) {
+    var _a;
     // Returns true if two dates are equal.
     var isDateEqual = function (d1, d2) {
         return (d1.getFullYear() === d2.getFullYear() &&
@@ -26,10 +27,7 @@ var CalendarBase = function (props) {
         start.setDate(start.getDate() - 1);
     }
     // Create a date for the last day of the month.
-    var month = props.date.getMonth() + 1;
-    if (month > 12)
-        month = 1;
-    var end = new Date(props.date.getFullYear(), month, 0);
+    var end = new Date(props.date.getFullYear(), props.date.getMonth() + 1, 0);
     // Move forward until it's a Sunday.
     while (end.getDay() !== 0) {
         end.setDate(end.getDate() + 1);
@@ -45,7 +43,7 @@ var CalendarBase = function (props) {
     // Build array of days.
     var days = [];
     while (start.getTime() < end.getTime()) {
-        days.push(React.createElement(Day, { key: start.getTime(), grey: start.getMonth() != props.date.getMonth() || (props.nofuture && start > today), selected: props.selectedDate && isDateEqual(props.selectedDate, start), today: isDateEqual(today, start), day: start.getDate(), onClick: (!props.nofuture || start <= today) ? handleClick.bind(_this, new Date(start.getTime())) : null }));
+        days.push(React.createElement(Day, { key: start.getTime(), grey: start.getMonth() != props.date.getMonth() || (((_a = props.nofuture) !== null && _a !== void 0 ? _a : false) && start > today), selected: !!props.selectedDate && isDateEqual(props.selectedDate, start), today: isDateEqual(today, start), day: start.getDate(), onClick: (!props.nofuture || start <= today) ? handleClick.bind(_this, new Date(start.getTime())) : undefined }));
         start.setDate(start.getDate() + 1);
     }
     return (React.createElement("div", { "data-testid": "Calendar", className: props.className },

package/inputs/DateInput/DateInput.d.ts

@@ -58,13 +58,21 @@ interface IDateInputProps extends ITestable {
      */
     noTabIndex?: boolean;
     /**
-     * Listeners are notified whenever the user interacts with the Input.
+     * Listeners are notified whenever the user interacts with the Input. The new
+     * value is passed (a `Date`, or `null` when cleared).
      */
-    onChange?: (value: any) => void;
+    onChange?: (value: Date | null) => void;
     /**
-     * Listeners are notified when the Input receives focus.
+     * Listeners are notified when the Input receives focus (from outside the
+     * component; internal focus moves between the day/month/year fields do not
+     * re-fire it).
      */
     onFocus?: () => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const DateInput: {
     ({ direction, noTabIndex, disabled, transparent, fluid, error, clearable, nofuture, ...props }: IDateInputProps): React.JSX.Element;

package/inputs/DateInput/DateInput.js

@@ -41,7 +41,7 @@ var DateInputBase = function (props) {
             return def;
         if (str instanceof Date)
             return str;
-        var date = new Date(props.value);
+        var date = new Date(str);
         if (isNaN(date.getDate()))
             return def;
         return date;
@@ -91,6 +91,14 @@ var DateInputBase = function (props) {
         if (e.key == 'Escape' && open)
             setOpen(false);
     };
+    var handleFocus = function (e) {
+        if (!props.onFocus)
+            return;
+        // Only notify when focus enters from outside the component, not when it
+        // moves between the internal day/month/year fields.
+        if (!e.currentTarget.contains(e.relatedTarget))
+            props.onFocus();
+    };
     var _c = usePopper(wrapperRef.current, bodyRef.current, {
         placement: props.direction == 'down' ? 'bottom-start' : 'top-start',
         modifiers: [
@@ -102,8 +110,8 @@ var DateInputBase = function (props) {
             }
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "DateInput", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
-        React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, noTabIndex: props.noTabIndex, onChange: handleChange, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleChange(null); } : null, onCalendar: handleToggle }),
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "DateInput", tabIndex: -1, className: props.className, style: props.style, onKeyDown: handleKeyDown, onFocus: handleFocus, ref: wrapperRef },
+        React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, noTabIndex: props.noTabIndex, onChange: handleChange, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleChange(null); } : undefined, onCalendar: handleToggle }),
         createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, nofuture: props.nofuture, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
 };
 var DateInputStyled = styled(DateInputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  // DateInput has a minimum width.\n  width: 250px;\n  // A fluid DateInput occupies full horizontal width.\n  ", "  \n"], ["\n  position: relative;\n  // DateInput has a minimum width.\n  width: 250px;\n  // A fluid DateInput occupies full horizontal width.\n  ", "  \n"])), function (p) { return p.fluid && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); });

package/inputs/DateInput/Day.d.ts

@@ -22,7 +22,7 @@ interface IProps {
      * Triggered when Day is clicked. If this property is not set,
      * then the Day will have no hover circle.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
 }
 /**
  * A `Day` is a day on the calendar. It is rendered with

package/inputs/DateInput/InfiniteList.js

@@ -32,10 +32,13 @@ var InfiniteListBase = function (props) {
     // Create an initial list of start-10...start+10:
     var _a = React.useState(function () { return makeValues(props.value); }), values = _a[0], setValues = _a[1];
     React.useEffect(function () {
-        initialElementRef.current.scrollIntoView({ behavior: 'instant', block: 'center' });
+        var _a;
+        (_a = initialElementRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'instant', block: 'center' });
         observer.current = new IntersectionObserver(intersect, { root: listRef.current, rootMargin: '0px', threshold: 0.5 });
     }, []);
     var intersect = function (entries, observer) {
+        if (!listRef.current)
+            return;
         if (entries.length > 0 && entries[0].isIntersecting) {
             // Is this the first element in the list?
             var isFirst = listRef.current.firstChild == entries[0].target;
@@ -63,14 +66,14 @@ var InfiniteListBase = function (props) {
     };
     React.useEffect(function () {
         // If values have changed, then start observing new top and bottom element:
-        if (observer.current) {
+        if (observer.current && listRef.current) {
             observer.current.disconnect();
             observer.current.observe(listRef.current.children[0]);
             observer.current.observe(listRef.current.children[RANGE * 2]);
         }
     }, [values]);
     return (React.createElement("div", { className: props.className, ref: listRef }, values.map(function (n) {
-        return React.createElement(Item, { className: n.toString(), key: n, "$active": props.value === n, ref: n == props.value ? initialElementRef : null, onClick: function () { return props.onClick(n); } }, n);
+        return React.createElement(Item, { key: n, "$active": props.value === n, ref: n == props.value ? initialElementRef : null, onClick: function () { return props.onClick(n); } }, n);
     })));
 };
 var Item = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  height: 42px;\n  padding-left: 28px;\n  padding-right: 28px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font: ", ";\n  &:hover {\n    background-color: ", ";\n  }  \n  ", "\n  &:active {\n    background-color: rgb(from ", " r g b / 65%) !important;\n    color: ", ";\n  }\n"], [" \n  height: 42px;\n  padding-left: 28px;\n  padding-right: 28px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font: ", ";\n  &:hover {\n    background-color: ", ";\n  }  \n  ", "\n  &:active {\n    background-color: rgb(from ", " r g b / 65%) !important;\n    color: ", ";\n  }\n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.$active && css(templateObject_1 || (templateObject_1 = __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.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; });

package/inputs/DateInput/Navbar.js

@@ -9,11 +9,12 @@ import { SimpleList } from './SimpleList';
 import { InfiniteList } from './InfiniteList';
 var NavbarBase = function (props) {
     var _a = React.useState(null), mode = _a[0], setMode = _a[1];
-    // Listen for document-wide keypress.
+    // Listen for document-wide keypress. Re-bind only when mode changes (the
+    // handler closes over mode), rather than on every render.
     React.useEffect(function () {
         document.addEventListener('keydown', handleKeyDown);
         return function () { return document.removeEventListener('keydown', handleKeyDown); };
-    });
+    }, [mode]);
     // Close nav if ESC is pressed.
     var handleKeyDown = function (e) {
         if (e.key == 'Escape' && mode != null) {

package/inputs/DateInput/NumericInput.js

@@ -17,6 +17,9 @@ import * as React from 'react';
 import styled from 'styled-components';
 var NumericInputBase = React.forwardRef(function (props, ref) {
     var handleKeyDown = function (e) {
+        // Allow keyboard shortcuts (copy/paste/select-all, etc.).
+        if (e.ctrlKey || e.metaKey)
+            return;
         if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key))
             return;
         if (e.key == 'Backspace')

package/inputs/DateInput/Selector.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     /**
      * Current input value.
      */
-    value: Date;
+    value: Date | null;
     /**
      * Marks input as disabled. Disabled inputs cannot be interacted with.
      * @default false

package/inputs/DateInput/Selector.js

@@ -29,6 +29,7 @@ var Selector = function (props) {
     // click on Save) arrives before React's effect phase — losing the
     // most-recent keystroke.
     var emit = function (d, m, y) {
+        var _a;
         var numDay = parseInt(d);
         var numMonth = parseInt(m);
         var numYear = parseInt(y);
@@ -37,22 +38,24 @@ var Selector = function (props) {
         var date = new Date(numYear, numMonth - 1, numDay);
         // Overwrite year, because Date.new converts 0-99 to 1900-1999.
         date.setFullYear(numYear);
-        props.onChange(date);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, date);
     };
     var handleDayChange = function (v) { setDay(v); emit(v, month, year); };
     var handleMonthChange = function (v) { setMonth(v); emit(day, v, year); };
     var handleYearChange = function (v) { setYear(v); emit(day, month, v); };
     // Move focus to month input.
     var focusMonth = function () {
-        monthRef.current.focus();
-        monthRef.current.select();
+        var _a, _b;
+        (_a = monthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = monthRef.current) === null || _b === void 0 ? void 0 : _b.select();
     };
     // Move focus to year input.
     var focusYear = function () {
-        yearRef.current.focus();
-        yearRef.current.select();
+        var _a, _b;
+        (_a = yearRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = yearRef.current) === null || _b === void 0 ? void 0 : _b.select();
     };
-    return (React.createElement(InputWrapper, { fluid: true, error: props.error, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, onClear: (props.clearable && props.value) ? props.onClear : null, icon: { url: SVG.Icons.Calendar, color: theme.colors.primary[3], onClick: props.onCalendar }, iconPosition: 'right' },
+    return (React.createElement(InputWrapper, { fluid: true, error: props.error, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, onClear: (props.clearable && props.value) ? props.onClear : undefined, icon: { url: SVG.Icons.Calendar, color: theme.colors.primary[3], onClick: props.onCalendar }, iconPosition: 'right' },
         React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "dd", value: day, onChange: handleDayChange, onBlur: focusMonth }),
         "/",
         React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "mm", value: month, onChange: handleMonthChange, ref: monthRef, onBlur: focusYear }),

package/inputs/Dropdown/Body.d.ts

@@ -13,7 +13,7 @@ interface IProps {
     /** Search callback (optional) */
     onSearch?: (q: string) => void;
     /** Current search value */
-    search?: string;
+    search?: string | null;
     /** If set, list items will be extra tall. */
     tall?: boolean;
     /** Minimum body width for narrow dropdowns. */
@@ -22,6 +22,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/Dropdown/Column.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface IProps {
     /** @ignore */
     className?: string;
-    children: (item: any) => void;
+    children: (item: any) => React.ReactNode;
     /**
      * Column width. Defaults to 1.
      * @default 1

package/inputs/Dropdown/Dropdown.d.ts

@@ -113,6 +113,11 @@ interface IDropdownProps extends ITestable {
      * is closed.
      */
     onClose?: () => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or