@longline/aqua-ui 1.0.339 → 1.0.340

package/controls/SpeechRecognizer/SpeechRecognizer.d.ts

@@ -1,4 +1,11 @@
 import * as React from 'react';
+interface ISpeechRecognizerProps {
+    /**
+     * BCP 47 language tag used for recognition, e.g. `en-US` or `nl-NL`.
+     * @default en-US
+     */
+    lang?: string;
+}
 /**
  * A floating action button that enables speech-to-text input.
  *
@@ -27,7 +34,8 @@ import * as React from 'react';
  * Supported in Chrome, Edge, and Safari. Not supported in Firefox.
  */
 declare const SpeechRecognizer: {
-    (): React.JSX.Element;
+    (props: ISpeechRecognizerProps): React.JSX.Element | null;
     displayName: string;
 };
 export { SpeechRecognizer };
+export type { ISpeechRecognizerProps };

package/controls/SpeechRecognizer/SpeechRecognizer.js

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { Fab } from '../Fab';
 import { SVG } from '../../svg';
 import { EditorRegistry } from './EditorRegistry';
-var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+var SpeechRecognition = typeof window !== 'undefined'
+    ? (window.SpeechRecognition || window.webkitSpeechRecognition)
+    : undefined;
 /**
  * A floating action button that enables speech-to-text input.
  *
@@ -30,7 +32,7 @@ var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecogniti
  * Requires `SpeechRecognition` or `webkitSpeechRecognition` API.
  * Supported in Chrome, Edge, and Safari. Not supported in Firefox.
  */
-var SpeechRecognizer = function () {
+var SpeechRecognizer = function (props) {
     var _a = React.useState(false), listening = _a[0], setListening = _a[1];
     var recognitionRef = React.useRef(null);
     var focusedElementRef = React.useRef(null);
@@ -69,20 +71,24 @@ var SpeechRecognizer = function () {
         setListening(false);
     };
     React.useEffect(function () {
+        var _a;
         // Initialize speech recognition
         if (!SpeechRecognition) {
             console.warn('SpeechRecognition API not supported in this browser.');
-            return;
+            return undefined;
         }
         var recognition = new SpeechRecognition();
         recognition.interimResults = true;
         recognition.continuous = true;
-        recognition.lang = 'en-US';
+        recognition.lang = (_a = props.lang) !== null && _a !== void 0 ? _a : 'en-US';
         recognition.onresult = handleResult;
         recognition.onend = handleEnd;
-        recognition.onerror = function (e) { };
+        // Reset the listening state on error, otherwise the UI can stay stuck
+        // showing "Listening" after a network / no-speech / not-allowed error.
+        recognition.onerror = function () { setListening(false); };
         recognitionRef.current = recognition;
-    }, []);
+        return function () { recognition.abort(); };
+    }, [props.lang]);
     React.useEffect(function () {
         if (listening && recognitionRef.current) {
             try {
@@ -100,9 +106,10 @@ var SpeechRecognizer = function () {
     // Track focused input, textarea or Editor.
     React.useEffect(function () {
         var handleFocus = function (e) {
+            var _a;
             if (e.target instanceof HTMLInputElement ||
                 e.target instanceof HTMLTextAreaElement ||
-                (e.target instanceof HTMLDivElement && e.target.contentEditable)) {
+                (e.target instanceof HTMLDivElement && e.target.isContentEditable)) {
                 var el = e.target;
                 focusedElementRef.current = el;
                 initialRef.current = true;
@@ -114,7 +121,7 @@ var SpeechRecognizer = function () {
                 }
                 // Abort recognition in progress.
                 try {
-                    recognitionRef.current.abort();
+                    (_a = recognitionRef.current) === null || _a === void 0 ? void 0 : _a.abort();
                 }
                 catch (err) {
                     console.warn(err);
@@ -132,7 +139,7 @@ var SpeechRecognizer = function () {
             window.removeEventListener('focusout', handleBlur);
         };
     }, []);
-    var handleClick = function (e) {
+    var handleClick = function () {
         setListening(function (prev) { return !prev; });
     };
     // If speechrecongition is not supported, don't render button at all,

package/controls/TabBar/TabBar.d.ts

@@ -54,6 +54,11 @@ interface ITabBarProps extends ITestable {
      * If set, draw a bottom border.
      */
     line?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A horizontal tab navigation bar with animated underline indicator.

package/controls/TabBar/TabBar.js

@@ -28,10 +28,13 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Tab } from './Tab';
 import { Underliner } from './Underliner';
+// Default prop values, referenced both by the TabBarBase fallbacks and the
+// TabBar wrapper below.
+var DEFAULT_ACTIVE = 0;
 var TabBarBase = function (props) {
     var _a;
     // TabBar keeps its own internal "active" index state.
-    var _b = React.useState((_a = props.active) !== null && _a !== void 0 ? _a : 0), active = _b[0], setActive = _b[1];
+    var _b = React.useState((_a = props.active) !== null && _a !== void 0 ? _a : DEFAULT_ACTIVE), active = _b[0], setActive = _b[1];
     var underlinerRef = React.useRef(null);
     var barRef = React.useRef(null);
     var sliderRef = React.useRef(null);
@@ -54,6 +57,8 @@ var TabBarBase = function (props) {
      */
     var startX = React.useRef(0);
     var handleMouseDown = function (e) {
+        if (!sliderRef.current)
+            return;
         dragging.current = true;
         wasDragging.current = false; // Reset flag on fresh mouse down
         // We store the current mouse position on the screen,
@@ -64,6 +69,8 @@ var TabBarBase = function (props) {
     var handleMouseMove = function (event) {
         if (!dragging.current)
             return;
+        if (!sliderRef.current || !barRef.current)
+            return;
         // Use the current mouse position to determine the
         // new scroll position of the slider.
         var dMouse = event.screenX - mouseX.current;
@@ -80,7 +87,7 @@ var TabBarBase = function (props) {
         // Apply new scroll position:
         sliderRef.current.style.left = "".concat(x, "px");
     };
-    var handleMouseUp = function (event) {
+    var handleMouseUp = function () {
         dragging.current = false;
         setTimeout(function () { wasDragging.current = false; }, 100); // Slight delay to allow click cancel
     };
@@ -106,7 +113,8 @@ var TabBarBase = function (props) {
     // If active prop changes, update internal active tab index.
     //
     React.useEffect(function () {
-        setActive(props.active);
+        var _a;
+        setActive((_a = props.active) !== null && _a !== void 0 ? _a : DEFAULT_ACTIVE);
     }, [props.active]);
     //
     // Use refs to move underliner under active tab.
@@ -190,8 +198,8 @@ var TabBarBase = function (props) {
         setActive(idx);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, idx);
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "TabBar", className: props.className, ref: barRef, "aria-orientation": "horizontal" },
-        React.createElement(Slider, { ref: sliderRef, onMouseDown: handleMouseDown },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "TabBar", className: props.className, style: props.style, ref: barRef, role: "tablist", "aria-orientation": "horizontal" },
+        React.createElement(Slider, { ref: sliderRef, role: "presentation", onMouseDown: handleMouseDown },
             React.Children.map(props.children, function (child, idx) {
                 return React.cloneElement(child, {
                     key: idx,
@@ -302,7 +310,7 @@ var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __
  * For tab content panels, use the `Tabs` container instead.
  */
 var TabBar = function (_a) {
-    var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, props = __rest(_a, ["active", "ghost", "disabled", "align", "size"]);
+    var _b = _a.active, active = _b === void 0 ? DEFAULT_ACTIVE : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, props = __rest(_a, ["active", "ghost", "disabled", "align", "size"]);
     return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled, align: align, size: size }, props));
 };
 TabBar.Tab = Tab;

package/controls/TabBar/Underliner.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var UnderlinerBase = React.forwardRef(function (props, ref) {
-    return React.createElement("div", { "data-testid": "TabBar.Underliner", className: props.className, ref: ref });
+    return React.createElement("div", { "data-testid": "TabBar.Underliner", className: props.className, ref: ref, "aria-hidden": "true" });
 });
 /**
  * Underliner passes a reference to itself back to its parent.

package/controls/TertiaryButton/TertiaryButton.d.ts

@@ -12,10 +12,11 @@ interface ITertiaryButtonProps extends ITestable {
      */
     disabled?: boolean;
     /**
-     * Fired when the button is clicked. The click event is passed along so
-     * that it can be used to prevent the default action or stop propagation.
+     * Fired when the button is clicked. The click event is passed along so it can
+     * be inspected or used to stop propagation. Handlers that don't need the event
+     * can omit the parameter.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
     /**
      * If set, this button will have the primary color.
      * @default false
@@ -31,6 +32,11 @@ interface ITertiaryButtonProps extends ITestable {
      * exists that offers preset paths. This may also be a full `IIconProps`.
      */
     icon?: string | IIconProps;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A lightweight button for contextual actions within components.

package/controls/TertiaryButton/TertiaryButton.js

@@ -27,6 +27,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { Icon } from '../Icon';
+// Default prop value, referenced both by the styled fallback and the wrapper.
+var DEFAULT_MIN_WIDTH = "92px";
 var TertiaryButtonBase = React.forwardRef(function (props, ref) {
     var theme = useTheme();
     var icon = function () {
@@ -39,7 +41,7 @@ var TertiaryButtonBase = React.forwardRef(function (props, ref) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: props.primary ? theme.colors.neutral[100] : theme.colors.primary[3] }, props.icon));
     };
-    return (React.createElement("button", { "data-testid": props['data-testid'] || "TertiaryButton", ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "TertiaryButton", ref: ref, className: props.className, style: props.style, type: "button", disabled: props.disabled, onClick: props.onClick },
         icon(),
         props.children));
 });
@@ -78,7 +80,7 @@ var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templ
      * | `minWidth` | Minimum button width (default: "92px") |
      * | `disabled` | Prevents interaction |
      */
-])), function (p) { return p.minWidth ? p.minWidth : "92px"; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      box-shadow: none;\n    "], ["\n      background-color: ", ";\n      box-shadow: none;\n    "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    cursor: auto;\n    box-shadow: none;\n    pointer-events: none;\n  "], ["\n    background-color: ", ";\n    cursor: auto;\n    box-shadow: none;\n    pointer-events: none;\n  "])), p.theme.colors.neutral[50]); });
+])), function (p) { var _a; return (_a = p.minWidth) !== null && _a !== void 0 ? _a : DEFAULT_MIN_WIDTH; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      box-shadow: none;\n    "], ["\n      background-color: ", ";\n      box-shadow: none;\n    "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    cursor: auto;\n    box-shadow: none;\n    pointer-events: none;\n  "], ["\n    background-color: ", ";\n    cursor: auto;\n    box-shadow: none;\n    pointer-events: none;\n  "])), p.theme.colors.neutral[50]); });
 /**
  * A lightweight button for contextual actions within components.
  *
@@ -114,7 +116,7 @@ var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templ
  * | `disabled` | Prevents interaction |
  */
 var TertiaryButton = React.forwardRef(function (_a, ref) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.minWidth, minWidth = _c === void 0 ? "92px" : _c, props = __rest(_a, ["disabled", "minWidth"]);
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.minWidth, minWidth = _c === void 0 ? DEFAULT_MIN_WIDTH : _c, props = __rest(_a, ["disabled", "minWidth"]);
     return React.createElement(TertiaryButtonStyled, __assign({ ref: ref, disabled: disabled, minWidth: minWidth }, props));
 });
 TertiaryButton.displayName = "TertiaryButton";

package/controls/ToggleButton/ToggleButton.d.ts

@@ -27,9 +27,15 @@ interface IToggleButtonProps extends ITestable {
      */
     url: string;
     /**
-     * Fired when the button is clicked.
+     * Fired when the button is clicked. The click event is passed along so it can
+     * be inspected or used to stop propagation.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * An icon button that visually indicates on/off or active/inactive state.

package/controls/ToggleButton/ToggleButton.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 var ToggleButtonBase = React.forwardRef(function (props, ref) {
-    return React.createElement("button", { "data-testid": props['data-testid'] || "ToggleButton", className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
+    return React.createElement("button", { "data-testid": props['data-testid'] || "ToggleButton", className: props.className, style: props.style, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
         React.createElement(Icon, { url: props.url }));
 });
 var ToggleButtonStyled = styled(ToggleButtonBase).attrs(function (p) {

package/controls/View/View.d.ts

@@ -44,6 +44,11 @@ interface IViewProps extends ITestable {
      * Badged views don't support label text ellipsizing.
      */
     badge?: number;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A read-only display field for showing labeled data.

package/controls/View/View.js

@@ -31,7 +31,7 @@ import { ScrollingContent } from './ScrollingContent';
 import { EllipsizedContent } from './EllipsizedContent';
 import { Ghost } from '../Ghost';
 var ViewBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "View", className: props.className },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "View", className: props.className, style: props.style },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
             props.label,

package/formatters/CountryFormatter/CountryFormatter.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 interface ICountryFormatterProps {
     /**
-     * The country code (e.g. "FR") or name (e.g. "France") to format.
+     * The country code (e.g. "FR") or name (e.g. "France") to format. `null`
+     * renders nothing.
      */
-    value: string;
+    value: string | null;
     /**
      * The type of output to return. This can be either `flag` (to show a flag),
      * `name` (to show the country name), or `both` (to show both the flag and

package/formatters/CountryFormatter/CountryUtil.d.ts

@@ -30,7 +30,7 @@ declare class CountryUtil {
      * @param value - Country name or 2-letter ISO code.
      * @returns The matching ISO code, or `null` if ambiguous or not found.
      */
-    static nameToCode: (value: string) => string;
+    static nameToCode: (value: string | null) => string | null;
     /**
      * Returns the primary name associated with a given ISO country code.
      *
@@ -45,7 +45,7 @@ declare class CountryUtil {
      * @param locale - Locale code (e.g. "pt"). Defaults to "en".
      * @returns Country name, or `null` if not matched.
      */
-    static getName: (value: string, locale?: string) => string;
+    static getName: (value: string | null, locale?: string) => string | null;
     /**
      * Returns the Unicode flag emoji for a given country name or ISO code.
      *
@@ -54,6 +54,6 @@ declare class CountryUtil {
      * @param value - Country name or ISO code.
      * @returns Flag emoji string, or `null` if not matched.
      */
-    static getFlag: (value: string) => string;
+    static getFlag: (value: string | null) => string | null;
 }
 export { CountryUtil };

package/formatters/DateTimeFormatter/DateTimeFormatter.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 interface IDateTimeFormatterProps {
     /**
-     * Input date. This can either be a `Date` or a `string`, e.g. `2025-09-22T10:05:41.074Z`.
+     * Input date. This can either be a `Date` or a `string`, e.g.
+     * `2025-09-22T10:05:41.074Z`. `null` renders nothing.
      */
-    value: string | Date;
+    value: string | Date | null;
     /**
      * Optional `Locale`, e.g. `es`
      */
@@ -74,13 +75,13 @@ interface IProps extends IDateTimeFormatterProps, IDateTimeFormatterAnimateProps
  */
 declare const DateTimeFormatter: {
     ({ type, ...props }: IProps): React.JSX.Element;
-    LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
-    ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
-    LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
-    ShortDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
-    LongTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
-    ShortTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
-    DistanceDate: React.MemoExoticComponent<({ value, animated, locale }: IDateTimeFormatterProps & IDateTimeFormatterAnimateProps) => React.JSX.Element>;
-    Month: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+    LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
+    ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
+    LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
+    ShortDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
+    LongTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
+    ShortTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
+    DistanceDate: React.MemoExoticComponent<({ value, animated, locale }: IDateTimeFormatterProps & IDateTimeFormatterAnimateProps) => React.JSX.Element | null>;
+    Month: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 };
 export { DateTimeFormatter, IDateTimeFormatterProps, IDateTimeFormatterAnimateProps, IProps };

package/formatters/DateTimeFormatter/elements/Custom.d.ts

@@ -32,5 +32,5 @@ interface IProps {
  * }}/>
  * ```
  */
-declare const Custom: React.MemoExoticComponent<({ value, locale, format }: IDateTimeFormatterProps & IProps) => React.JSX.Element>;
+declare const Custom: React.MemoExoticComponent<({ value, locale, format }: IDateTimeFormatterProps & IProps) => React.JSX.Element | null>;
 export { Custom };

package/formatters/DateTimeFormatter/elements/DistanceDate.d.ts

@@ -11,5 +11,5 @@ import { IDateTimeFormatterAnimateProps, IDateTimeFormatterProps } from '../Date
  * <DateTimeFormatter.Distance value={someDate} animated strict locale={fr} />
  * ```
  */
-declare const DistanceDate: React.MemoExoticComponent<({ value, animated, locale }: IDateTimeFormatterProps & IDateTimeFormatterAnimateProps) => React.JSX.Element>;
+declare const DistanceDate: React.MemoExoticComponent<({ value, animated, locale }: IDateTimeFormatterProps & IDateTimeFormatterAnimateProps) => React.JSX.Element | null>;
 export { DistanceDate };

package/formatters/DateTimeFormatter/elements/LongDate.d.ts

@@ -20,5 +20,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.LongDate value="2023-01-01" locale="es" />
  * ```
  */
-declare const LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { LongDate };

package/formatters/DateTimeFormatter/elements/LongDateTime.d.ts

@@ -23,5 +23,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.LongDateTime value="2023-01-01T14:30:45" locale="fr" />
  * ```
  */
-declare const LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { LongDateTime };

package/formatters/DateTimeFormatter/elements/LongTime.d.ts

@@ -19,5 +19,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.LongTime value="2023-01-01T14:30:45" />
  * ```
  */
-declare const LongTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const LongTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { LongTime };

package/formatters/DateTimeFormatter/elements/Month.d.ts

@@ -22,5 +22,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.Month value="2025-05-28" locale="fr" />
  * ```
  */
-declare const Month: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const Month: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { Month };

package/formatters/DateTimeFormatter/elements/ShortDate.d.ts

@@ -22,5 +22,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.ShortDate value="2025-05-28" locale="fr" />
  * ```
  */
-declare const ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { ShortDate };

package/formatters/DateTimeFormatter/elements/ShortDateTime.d.ts

@@ -21,5 +21,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.ShortDateTime value="2025-05-28T14:30:45" locale="fr" />
  * ```
  */
-declare const ShortDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const ShortDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { ShortDateTime };

package/formatters/DateTimeFormatter/elements/ShortTime.d.ts

@@ -16,5 +16,5 @@ import { IDateTimeFormatterProps } from '../DateTimeFormatter';
  * <DateTimeFormatter.ShortTime value="2023-05-28T14:30:00" locale="fr" />
  * ```
  */
-declare const ShortTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
+declare const ShortTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element | null>;
 export { ShortTime };

package/formatters/DivisionFormatter/DivisionFormatter.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface IDivisionFormatterProps {
     /**
-     * The division code (e.g. "CA-NS") to format.
+     * The division code (e.g. "CA-NS") to format. `null` renders nothing.
      */
-    value: string;
+    value: string | null;
 }
 /**
  * Displays the full name of a country subdivision (state, province, region).

package/formatters/DivisionFormatter/DivisionFormatter.js

@@ -32,7 +32,7 @@ import { DivisionUtil } from './DivisionUtil';
  */
 var DivisionFormatter = function (_a) {
     var value = _a.value;
-    return React.createElement(Name, null, DivisionUtil.getDivisionName(value));
+    return React.createElement(Name, null, value == null ? null : DivisionUtil.getDivisionName(value));
 };
 var Name = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 DivisionFormatter.displayName = 'DivisionFormatter';

package/formatters/DivisionFormatter/DivisionUtil.d.ts

@@ -14,7 +14,7 @@ declare class DivisionUtil {
      * @returns Object with mapping key->name of divisions
      */
     static getDivisions: (countryCode: string) => IIsoDivisionsMap;
-    static getCountryName: (countryCode: string) => string;
+    static getCountryName: (countryCode: string) => string | null;
     private static divisionDict;
     static getDivisionName: (divisionCode: string) => string;
 }

package/formatters/DivisionFormatter/DivisionUtil.js

@@ -5081,14 +5081,16 @@ var DivisionUtil = /** @class */ (function () {
     };
     DivisionUtil.divisionDict = null;
     DivisionUtil.getDivisionName = function (divisionCode) {
+        var _b;
         // If we don't have a division dictionary yet, build one.
         if (!_a.divisionDict) {
-            _a.divisionDict = {};
+            var dict_1 = {};
             Object.values(_a.data).forEach(function (v) {
-                Object.assign(_a.divisionDict, v.divisions);
+                Object.assign(dict_1, v.divisions);
             });
+            _a.divisionDict = dict_1;
         }
-        return _a.divisionDict[divisionCode];
+        return (_b = _a.divisionDict[divisionCode]) !== null && _b !== void 0 ? _b : '';
     };
     return DivisionUtil;
 }());

package/formatters/FilesizeFormatter/FilesizeFormatter.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 interface IFilesizeFormatterProps {
     /**
      * File size in bytes. This can be a number or a string that can be parsed
-     * to a number.
+     * to a number. `null` renders nothing.
      */
-    value: number | string;
+    value: number | string | null;
     /**
      * Unit type, `si` (base 1000) or `binary` (base 1024)
      * @default 'si'
@@ -52,7 +52,7 @@ interface IFilesizeFormatterProps {
  * ```
  */
 declare const FilesizeFormatter: {
-    ({ value, unit, locale, decimals, }: IFilesizeFormatterProps): React.JSX.Element;
+    ({ value, unit, locale, decimals, }: IFilesizeFormatterProps): React.JSX.Element | null;
     displayName: string;
 };
 export { FilesizeFormatter, IFilesizeFormatterProps };

package/formatters/GIS/CoordinateFormatter.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface ICoordinateFormatterProps {
     /**
-     * Value to format.
+     * Value to format. `null` renders the fallback string.
      */
-    value: number | string;
+    value: number | string | null;
     /**
      * Type of coordinate: 'latitude' or 'longitude'.
      * Latitude values must be between -90 and 90 degrees.

package/formatters/GIS/LatitudeFormatter.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface ILatitudeFormatterProps {
     /**
-     * Value to format.
+     * Value to format. `null` renders the fallback string.
      */
-    value: number | string;
+    value: number | string | null;
     /**
      * String to show if formatting fails.
      * @default "(no coordinates)"

package/formatters/GIS/LongitudeFormatter.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface ILongitudeFormatterProps {
     /**
-     * Value to format.
+     * Value to format. `null` renders the fallback string.
      */
-    value: number | string;
+    value: number | string | null;
     /**
      * String to show if formatting fails.
      * @default "(no coordinates)"

package/formatters/HumanFormatter/HumanFormatter.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface IHumanFormatterProps {
-    /** Input value to be humanized (e.g., 10000 → 10K) */
-    value: number | string;
+    /** Input value to be humanized (e.g., 10000 → 10K). `null` renders nothing. */
+    value: number | string | null;
     /**
      * Locale string (e.g., 'en-US', 'de-DE')
      * @default 'en'
@@ -43,7 +43,7 @@ interface IHumanFormatterProps {
  * ```
  */
 declare const HumanFormatter: {
-    ({ value, locale, decimals }: IHumanFormatterProps): React.JSX.Element;
+    ({ value, locale, decimals }: IHumanFormatterProps): React.JSX.Element | null;
     displayName: string;
 };
 export { HumanFormatter, IHumanFormatterProps };

package/formatters/NumberFormatter/NumberFormatter.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface INumberFormatterProps {
     /**
-     * Value to format. This can be a string or a number.
+     * Value to format. This can be a string or a number. `null` renders nothing.
      */
-    value: number | string;
+    value: number | string | null;
     /**
      * Number of fixed fractional digits.
      * @default 2
@@ -42,7 +42,7 @@ interface INumberFormatterProps {
  * ```
  */
 declare const NumberFormatter: {
-    ({ value, decimals, locale }: INumberFormatterProps): React.JSX.Element;
+    ({ value, decimals, locale }: INumberFormatterProps): React.JSX.Element | null;
     displayName: string;
 };
 export { NumberFormatter, INumberFormatterProps };