@gooddata/sdk-ui-kit 11.52.0-alpha.5 → 11.52.0-alpha.6

package/esm/Datepicker/Datepicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2020-2026 GoodData Corporation
-import { PureComponent, createRef, } from "react";
+import { PureComponent, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import classNames from "classnames";
 import { format, isSameDay, isValid, parse } from "date-fns";
 import { de, enAU, enGB, enUS, es, fi, fr, frCA, id, it, ja, ko, nl, pl, pt, ptBR, ru, sl, th, tr, uk, vi, zhCN, } from "date-fns/locale";
@@ -81,191 +81,147 @@ function convertWeekStart(weekStart) {
             throw new Error(`Unknown week start ${weekStart}`);
     }
 }
-export class WrappedDatePicker extends PureComponent {
-    rootRef = null;
-    datePickerContainerRef = createRef();
-    inputRef = createRef();
-    datePickerId = uuid();
-    static defaultProps = {
-        className: "",
-        date: new Date(),
-        placeholder: "",
-        onChange: () => { },
-        onBlur: () => { },
-        resetOnInvalidValue: false,
-        size: "",
-        tabIndex: 0,
-        alignPoints: [{ align: "bl tl" }, { align: "br tr" }, { align: "tl bl" }, { align: "tr br" }],
-        onAlign: () => { },
-        dateFormat: DEFAULT_DATE_FORMAT,
-        weekStart: "Sunday",
-    };
-    constructor(props) {
-        super(props);
-        const { alignPoints, date, dateFormat } = props;
-        this.state = {
-            align: alignPoints?.[0]?.align ?? "bl tl",
-            selectedDate: date,
-            monthDate: date,
-            inputValue: formatDate(date || new Date(), dateFormat ?? DEFAULT_DATE_FORMAT),
-            isOpen: false,
-        };
-        this.handleDayChanged = this.handleDayChanged.bind(this);
-        this.handleMonthChanged = this.handleMonthChanged.bind(this);
-        this.handleInputChanged = this.handleInputChanged.bind(this);
-        this.handleInputBlur = this.handleInputBlur.bind(this);
-        this.alignDatePicker = this.alignDatePicker.bind(this);
-        this.setComponentRef = this.setComponentRef.bind(this);
-        this.handleWrapperClick = this.handleWrapperClick.bind(this);
-        this.handleClickOutside = this.handleClickOutside.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.handleCustomDayClick = this.handleCustomDayClick.bind(this);
-    }
-    componentDidMount() {
-        const { date, dateFormat } = this.props;
-        this.setState({ selectedDate: this.updateDate(date || new Date()) });
-        this.setState({ inputValue: formatDate(date || new Date(), dateFormat ?? DEFAULT_DATE_FORMAT) });
-        window.addEventListener("resize", this.resizeHandler);
-        document.addEventListener("mousedown", this.handleClickOutside);
-    }
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        const { props } = this;
-        const propsDate = props.date?.getTime() ?? 0;
-        const nextPropsDate = nextProps.date?.getTime() ?? 0;
-        if (propsDate !== nextPropsDate) {
-            const selectedDate = this.updateDate(nextProps.date || new Date());
-            this.setState({ selectedDate });
-            this.setState({ monthDate: selectedDate });
-            this.setState({ inputValue: formatDate(selectedDate, props.dateFormat ?? DEFAULT_DATE_FORMAT) });
-        }
-    }
-    componentWillUnmount() {
-        window.removeEventListener("resize", this.resizeHandler);
-        document.removeEventListener("mousedown", this.handleClickOutside);
+function normalizeDate(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+const DEFAULT_ALIGN_POINTS = [
+    { align: "bl tl" },
+    { align: "br tr" },
+    { align: "tl bl" },
+    { align: "tr br" },
+];
+// evaluated once per module load, mirroring the original static defaultProps
+const DEFAULT_DATE = new Date();
+function WrappedDatePickerCore({ accessibilityConfig, date: dateProp, className = "", placeholder = "", onChange, onBlur, onValidateInput, resetOnInvalidValue = false, size = "", tabIndex = 0, alignPoints: alignPointsProp, onAlign, dateFormat: dateFormatProp, weekStart: weekStartProp, onDateInputKeyDown, intl, }) {
+    // these props are nullable at runtime (untyped callers do pass null explicitly), so plain default
+    // values are not enough - the class component guarded every usage with `||`, `??` or optional calls
+    const date = dateProp || DEFAULT_DATE;
+    const alignPoints = alignPointsProp ?? DEFAULT_ALIGN_POINTS;
+    const dateFormat = dateFormatProp ?? DEFAULT_DATE_FORMAT;
+    const weekStart = weekStartProp ?? "Sunday";
+    const rootRef = useRef(null);
+    const datePickerContainerRef = useRef(null);
+    const inputRef = useRef(null);
+    const datePickerId = useMemo(() => uuid(), []);
+    const [align, setAlign] = useState(alignPoints[0]?.align ?? "bl tl");
+    const [selectedDate, setSelectedDate] = useState(() => normalizeDate(date));
+    const [monthDate, setMonthDate] = useState(date);
+    const [inputValue, setInputValue] = useState(() => formatDate(date, dateFormat));
+    const [isOpen, setIsOpen] = useState(false);
+    // resync the derived state whenever the date coming from the props changes
+    const [prevDateTime, setPrevDateTime] = useState(date.getTime());
+    if (date.getTime() !== prevDateTime) {
+        const newlySelectedDate = normalizeDate(date);
+        setPrevDateTime(date.getTime());
+        setSelectedDate(newlySelectedDate);
+        setMonthDate(newlySelectedDate);
+        setInputValue(formatDate(newlySelectedDate, dateFormat));
     }
-    handleClickOutside(event) {
-        if (this.datePickerContainerRef.current &&
-            !this.datePickerContainerRef.current.contains(event.target) &&
-            this.inputRef.current &&
-            !this.inputRef.current.contains(event.target)) {
-            this.setState({ isOpen: false });
+    const alignDatePicker = useCallback(() => {
+        const container = datePickerContainerRef.current?.parentElement;
+        if (!alignPoints || !container || !rootRef.current) {
+            return;
         }
-    }
-    componentDidUpdate(_prevProps, prevState) {
-        if (this.state.isOpen && !prevState.isOpen) {
-            this.alignDatePicker();
+        const optimalAlignment = getOptimalAlignment({
+            targetRegion: elementRegion(rootRef.current),
+            selfRegion: elementRegion(container),
+            alignPoints,
+        });
+        const { align: optimalAlign } = optimalAlignment.alignment;
+        setAlign(optimalAlign);
+        onAlign?.(optimalAlign);
+    }, [alignPoints, onAlign]);
+    // keeps the debounced resize handler and the "just opened" effect stable while still
+    // calling the up-to-date alignment logic, the same way the class instance method did
+    const alignDatePickerRef = useRef(alignDatePicker);
+    // must run before the "just opened" layout effect below, hence useLayoutEffect
+    useLayoutEffect(() => {
+        alignDatePickerRef.current = alignDatePicker;
+    }, [alignDatePicker]);
+    const resizeHandler = useMemo(() => debounce(() => alignDatePickerRef.current(), 100), []);
+    useEffect(() => {
+        window.addEventListener("resize", resizeHandler);
+        return () => {
+            resizeHandler.cancel();
+            window.removeEventListener("resize", resizeHandler);
+        };
+    }, [resizeHandler]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (datePickerContainerRef.current &&
+                !datePickerContainerRef.current.contains(event.target) &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        if (isOpen) {
+            alignDatePickerRef.current();
         }
-    }
-    setComponentRef(ref) {
-        this.rootRef = ref;
-    }
-    getInputClasses() {
-        return classNames("input-text", "small-12", this.props.size, `gd-datepicker-input-${this.datePickerId}`);
-    }
-    getComponentClasses() {
-        return classNames("gd-datepicker", this.props.className, this.props.size, "gd-datepicker-input", this.state.isOpen ? "gd-datepicker-focused" : "");
-    }
-    getOverlayWrapperClasses() {
-        const [inputAnchorPoint, pickerAnchorPoint] = this.state.align.split(" ");
-        return classNames("gd-datepicker-picker", "gd-datepicker-OverlayWrapper", `gd-datepicker-OverlayWrapper-${inputAnchorPoint}-xx`, `gd-datepicker-OverlayWrapper-xx-${pickerAnchorPoint}`);
-    }
-    resizeHandler = debounce(() => this.alignDatePicker(), 100);
-    updateDate(date) {
-        return this.normalizeDate(date);
-    }
-    handleInputBlur(e) {
-        this.props.onBlur?.(e.target.value);
-    }
-    handleInputChanged(e) {
+    }, [isOpen]);
+    const handleInputBlur = useCallback((e) => {
+        onBlur?.(e.target.value);
+    }, [onBlur]);
+    const handleInputChanged = useCallback((e) => {
         const { value } = e.target;
-        const parsedDate = parseDate(value, this.props.dateFormat ?? DEFAULT_DATE_FORMAT);
-        this.props.onValidateInput?.(value);
-        this.setState({ inputValue: value });
+        const parsedDate = parseDate(value, dateFormat);
+        onValidateInput?.(value);
+        setInputValue(value);
         if (parsedDate) {
-            this.setState({
-                selectedDate: parsedDate,
-                monthDate: parsedDate,
-            }, () => {
-                if (this.state.selectedDate) {
-                    this.props.onChange?.(this.state.selectedDate);
-                }
-            });
+            setSelectedDate(parsedDate);
+            setMonthDate(parsedDate);
+            onChange?.(parsedDate);
+            return;
         }
-        else {
-            if (this.props.resetOnInvalidValue) {
-                this.setState({
-                    selectedDate: this.state.selectedDate,
-                    monthDate: this.state.selectedDate,
-                });
-                return;
-            }
-            this.setState({
-                selectedDate: undefined,
-                monthDate: undefined,
-            }, () => {
-                // Signal invalid state by passing null
-                this.props.onChange?.(null);
-            });
+        if (resetOnInvalidValue) {
+            setMonthDate(selectedDate);
+            return;
         }
-    }
-    handleDayChanged(newlySelectedDate) {
+        setSelectedDate(undefined);
+        setMonthDate(undefined);
+        // Signal invalid state by passing null
+        onChange?.(null);
+    }, [dateFormat, onChange, onValidateInput, resetOnInvalidValue, selectedDate]);
+    const handleDayChanged = useCallback((newlySelectedDate) => {
         if (!newlySelectedDate) {
-            this.setState({ isOpen: false });
+            setIsOpen(false);
             return;
         }
-        if (this.state.selectedDate && isSameDay(this.state.selectedDate, newlySelectedDate)) {
-            this.setState({ isOpen: false });
+        if (selectedDate && isSameDay(selectedDate, newlySelectedDate)) {
+            setIsOpen(false);
             return;
         }
-        this.inputRef.current?.focus();
-        this.props.onValidateInput?.(formatDate(newlySelectedDate, this.props.dateFormat ?? DEFAULT_DATE_FORMAT));
-        this.setState({
-            selectedDate: newlySelectedDate,
-            monthDate: newlySelectedDate,
-            inputValue: formatDate(newlySelectedDate, this.props.dateFormat ?? DEFAULT_DATE_FORMAT),
-            isOpen: false,
-        }, () => {
-            this.props.onChange?.(newlySelectedDate);
-        });
-    }
-    handleMonthChanged(month) {
-        this.inputRef.current?.focus();
-        this.setState({ monthDate: month });
-    }
-    handleCustomDayClick = (day, _modifiers) => {
+        inputRef.current?.focus();
+        onValidateInput?.(formatDate(newlySelectedDate, dateFormat));
+        setSelectedDate(newlySelectedDate);
+        setMonthDate(newlySelectedDate);
+        setInputValue(formatDate(newlySelectedDate, dateFormat));
+        setIsOpen(false);
+        onChange?.(newlySelectedDate);
+    }, [dateFormat, onChange, onValidateInput, selectedDate]);
+    const handleMonthChanged = useCallback((month) => {
+        inputRef.current?.focus();
+        setMonthDate(month);
+    }, []);
+    const handleCustomDayClick = useCallback((day, _modifiers) => {
         // Handle all day clicks, including outside days
-        this.handleDayChanged(day);
-    };
-    normalizeDate(date) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-    }
-    alignDatePicker() {
-        const { alignPoints } = this.props;
-        const container = this.datePickerContainerRef.current?.parentElement;
-        if (!alignPoints || !container || !this.rootRef) {
-            return;
-        }
-        const optimalAlignment = getOptimalAlignment({
-            targetRegion: elementRegion(this.rootRef),
-            selfRegion: elementRegion(container),
-            alignPoints,
-        });
-        const { align } = optimalAlignment.alignment;
-        this.setState({
-            align,
-        }, () => {
-            this.props.onAlign?.(align);
-        });
-    }
-    onKeyDown(e) {
+        handleDayChanged(day);
+    }, [handleDayChanged]);
+    const handleKeyDown = useCallback((e) => {
         if (e.key === "Escape" || e.key === "Tab") {
-            this.setState({ isOpen: false });
+            setIsOpen(false);
         }
         if (isEnterKey(e)) {
-            this.props.onDateInputKeyDown?.(e);
+            onDateInputKeyDown?.(e);
         }
-    }
-    handleWrapperClick(e) {
+    }, [onDateInputKeyDown]);
+    const handleWrapperClick = useCallback((e) => {
         const { classList } = e.target;
         /**
          * Prevent default fixes bug BB-332 but prevents in closing other dropdowns (Bug BB-1102)
@@ -274,19 +230,25 @@ export class WrappedDatePicker extends PureComponent {
         if (e.target && classList?.contains(DATEPICKER_OUTSIDE_DAY_SELECTOR)) {
             e.preventDefault();
         }
-    }
-    render() {
-        const { inputValue, selectedDate, monthDate, isOpen } = this.state;
-        const { accessibilityConfig, placeholder, intl, tabIndex } = this.props;
-        const classNamesProps = {
-            root: this.getOverlayWrapperClasses(),
+    }, []);
+    const handleInputClick = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const dayPickerClassNames = useMemo(() => {
+        const [inputAnchorPoint, pickerAnchorPoint] = align.split(" ");
+        return {
+            root: classNames("gd-datepicker-picker", "gd-datepicker-OverlayWrapper", `gd-datepicker-OverlayWrapper-${inputAnchorPoint}-xx`, `gd-datepicker-OverlayWrapper-xx-${pickerAnchorPoint}`),
         };
-        return (_jsxs("div", { "data-testid": "datepicker", className: this.getComponentClasses(), ref: this.setComponentRef, onClick: this.handleWrapperClick, children: [
-                _jsx("input", { autoComplete: "off", "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-label": accessibilityConfig?.ariaLabel ||
-                        intl.formatMessage({ id: "datePicker.accessibility.label" }), "aria-describedby": accessibilityConfig?.ariaDescribedBy, onKeyDown: this.onKeyDown, tabIndex: tabIndex, onClick: () => this.setState({ isOpen: true }), ref: this.inputRef, value: inputValue, className: this.getInputClasses(), placeholder: placeholder, onChange: this.handleInputChanged, onBlur: this.handleInputBlur }), isOpen ? (_jsx("div", { id: `datepicker-popup-${this.datePickerId}`, role: "dialog", ref: this.datePickerContainerRef, children: _jsx(DayPicker, { classNames: classNamesProps, locale: convertLocale(intl.locale), showOutsideDays: true, mode: "single", selected: selectedDate, month: monthDate, onMonthChange: this.handleMonthChanged, weekStartsOn: convertWeekStart(this.props.weekStart ?? "Sunday"), onDayClick: this.handleCustomDayClick }) })) : null, _jsx("span", { className: "gd-datepicker-icon gd-icon-calendar" })
-            ] }));
-    }
+    }, [align]);
+    const componentClasses = classNames("gd-datepicker", className, size, "gd-datepicker-input", isOpen ? "gd-datepicker-focused" : "");
+    const inputClasses = classNames("input-text", "small-12", size, `gd-datepicker-input-${datePickerId}`);
+    return (_jsxs("div", { "data-testid": "datepicker", className: componentClasses, ref: rootRef, onClick: handleWrapperClick, children: [
+            _jsx("input", { autoComplete: "off", "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-label": accessibilityConfig?.ariaLabel ||
+                    intl.formatMessage({ id: "datePicker.accessibility.label" }), "aria-describedby": accessibilityConfig?.ariaDescribedBy, onKeyDown: handleKeyDown, tabIndex: tabIndex, onClick: handleInputClick, ref: inputRef, value: inputValue, className: inputClasses, placeholder: placeholder, onChange: handleInputChanged, onBlur: handleInputBlur }), isOpen ? (_jsx("div", { id: `datepicker-popup-${datePickerId}`, role: "dialog", ref: datePickerContainerRef, children: _jsx(DayPicker, { classNames: dayPickerClassNames, locale: convertLocale(intl.locale), showOutsideDays: true, mode: "single", selected: selectedDate, month: monthDate, onMonthChange: handleMonthChanged, weekStartsOn: convertWeekStart(weekStart), onDayClick: handleCustomDayClick }) })) : null, _jsx("span", { className: "gd-datepicker-icon gd-icon-calendar" })
+        ] }));
 }
+export const WrappedDatePicker = memo(WrappedDatePickerCore);
+WrappedDatePicker.displayName = "WrappedDatePicker";
 const DatePickerWithIntl = injectIntl(WrappedDatePicker);
 /**
  * @internal

package/esm/Form/InputWithNumberFormat.d.ts

@@ -1,7 +1,6 @@
 import { type ChangeEvent } from "react";
 import { type IInputPureProps } from "./InputPure.js";
 import { type Separators } from "./typings.js";
-export declare const MAX_NUMBER: number;
 /**
  * @internal
  */

package/esm/Form/InputWithNumberFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputWithNumberFormat.d.ts","sourceRoot":"","sources":["../../src/Form/InputWithNumberFormat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAsD,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,KAAK,eAAe,EAAa,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,eAAO,MAAM,UAAU,QAAW,CAAC;AA6DnC;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;CAC3B;AAED;;GAEG;AAEH,MAAM,WAAW,2BAA2B;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AAEH,MAAM,WAAW,2BACb,SAAQ,8BAA8B,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzE,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAChF;AAUD;;GAEG;AACH,eAAO,MAAM,qBAAqB,mEAsEhC,CAAC"}
+{"version":3,"file":"InputWithNumberFormat.d.ts","sourceRoot":"","sources":["../../src/Form/InputWithNumberFormat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAsD,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,KAAK,eAAe,EAAa,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAmD/C;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;CAC3B;AAED;;GAEG;AAEH,MAAM,WAAW,2BAA2B;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AAEH,MAAM,WAAW,2BACb,SAAQ,8BAA8B,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzE,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAChF;AAUD;;GAEG;AACH,eAAO,MAAM,qBAAqB,mEAsEhC,CAAC"}

package/esm/Form/InputWithNumberFormat.js

@@ -4,20 +4,9 @@ import { memo, useEffect, useRef, useState } from "react";
 import { memoize } from "lodash-es";
 import { InputPure } from "./InputPure.js";
 import { DEFAULT_SEPARATORS, formatNumberWithSeparators } from "./numberFormat.js";
-// Highest number (BIGINT) according to gooddata documentation help.gooddata.com object-datatypes
-export const MAX_NUMBER = 10 ** 15;
-// Max number of digits right to decimal point according to gooddata documentation help.gooddata.com object-datatypes
-const MAX_DECIMAL_POINT_NUMBERS = 6;
 const getDanglingDecimalPointRegExp = memoize((decimal) => new RegExp(`\\${decimal}$`));
-const getFormatValidationRegExp = memoize(({ thousand, decimal }) => new RegExp(`^-?(\\d|\\${thousand})*(\\${decimal}\\d*)?$`));
-const parseStandardNumberString = (numberString) => {
-    const belowDecimal = numberString.split(".")[1];
-    const roundedNumberString = belowDecimal && belowDecimal.length >= MAX_DECIMAL_POINT_NUMBERS
-        ? parseFloat(numberString).toFixed(MAX_DECIMAL_POINT_NUMBERS)
-        : numberString;
-    const number = parseFloat(roundedNumberString);
-    return number === 0 ? 0 : number;
-};
+// A half-typed exponent ("1e", "1e+") stays valid so it can be entered one character at a time.
+const buildValidationRegExp = ({ thousand, decimal }) => new RegExp(`^-?(\\d|\\${thousand})*(\\${decimal}\\d*)?([eE][-+]?\\d*)?$`);
 // Removes thousand separators while keeping the decimal separator intact, so the value can be
 // edited as plain digits (no separators popping in/out) while the input is focused.
 const removeThousandSeparators = (value, { thousand } = DEFAULT_SEPARATORS) => value.split(thousand).join("");
@@ -27,7 +16,7 @@ const convertFormattedStringToStandard = (formattedString, { thousand, decimal }
     const withStandardDecimalPoint = withoutDanglingDecimalPoint.split(decimal).join(".");
     return withStandardDecimalPoint.length > 0 ? withStandardDecimalPoint : null;
 };
-const parse = (value, separators = DEFAULT_SEPARATORS) => {
+const parse = (value, separators) => {
     if (value === null || value === "" || value === "-") {
         return null;
     }
@@ -35,11 +24,16 @@ const parse = (value, separators = DEFAULT_SEPARATORS) => {
     if (numberString === null) {
         return null;
     }
-    return parseStandardNumberString(numberString);
+    const number = parseFloat(numberString);
+    return number === 0 ? 0 : number;
 };
-const isValid = (value, separators = DEFAULT_SEPARATORS) => {
+// The wire layer draws the same line: it throws on Infinity/NaN.
+const isValid = (value, separators) => {
+    if (!buildValidationRegExp(separators).test(value)) {
+        return false;
+    }
     const parsed = parse(value, separators);
-    return getFormatValidationRegExp(separators).test(value) && Math.abs(parsed ?? 0) <= MAX_NUMBER;
+    return parsed === null || Number.isFinite(parsed);
 };
 // Coerces input value to number for formatting (handles string/number/null/undefined)
 const toNumberValue = (value) => {
@@ -51,7 +45,7 @@ const toNumberValue = (value) => {
 /**
  * @internal
  */
-export const InputWithNumberFormat = memo(function InputWithNumberFormat({ separators, value: propValue, onChange, onFocus, onBlur, ...restProps }) {
+export const InputWithNumberFormat = memo(function InputWithNumberFormat({ separators = DEFAULT_SEPARATORS, value: propValue, onChange, onFocus, onBlur, ...restProps }) {
     const inputRef = useRef(null);
     const [value, setValue] = useState(() => formatNumberWithSeparators(toNumberValue(propValue), separators));
     const [isFocused, setIsFocused] = useState(false);

package/esm/sdk-ui-kit.d.ts

@@ -7017,6 +7017,8 @@ export declare interface IUiComboboxInputProps {
     accessibilityConfig?: IAccessibilityConfigBase;
     /** Visible placeholder. */
     placeholder?: string;
+    /** Marks the field invalid: error-colored border plus `aria-invalid`. */
+    isError?: boolean;
     /** Form field name forwarded to the underlying input. */
     name?: string;
     autoFocus?: boolean;
@@ -8116,6 +8118,7 @@ export declare type IUiMenuInteractiveItem<T extends IUiMenuItemData = object> =
     stringTitle: string;
     isDisabled?: boolean;
     isSelected?: boolean;
+    selectionRole?: "radio" | "checkbox";
     isDestructive?: boolean;
     tooltip?: ReactNode;
     tooltipWidth?: number;
@@ -9004,6 +9007,8 @@ export declare interface IUiTextInputProps {
     onIconAfter?: IUiTextInputIconAfterButton;
     /** Accessibility config forwarded to the input element. */
     accessibilityConfig?: IAccessibilityConfigBase;
+    /** Marks the field invalid: error-colored border plus `aria-invalid`. */
+    isError?: boolean;
     disabled?: boolean;
     autoFocus?: boolean;
     /** Forwarded to the input element. Use for autocomplete / combobox patterns. */
@@ -11374,7 +11379,7 @@ export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLa
  *
  * @internal
  */
-export declare function UiTextInput({ type, value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled, autoFocus, onKeyDown, onFocus, onBlur, onClick, dataTestId, inputRef, wrapperRef, name, autoComplete, autoCapitalize, autoCorrect }: IUiTextInputProps): JSX.Element;
+export declare function UiTextInput({ type, value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, isError, disabled, autoFocus, onKeyDown, onFocus, onBlur, onClick, dataTestId, inputRef, wrapperRef, name, autoComplete, autoCapitalize, autoCorrect }: IUiTextInputProps): JSX.Element;
 
 /**
  * Interpolation values accepted by `react-intl`'s `formatMessage`, **narrowed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.52.0-alpha.5",
+  "version": "11.52.0-alpha.6",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -76,11 +76,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-spi": "11.52.0-alpha.5",
-    "@gooddata/sdk-ui": "11.52.0-alpha.5",
-    "@gooddata/sdk-model": "11.52.0-alpha.5",
-    "@gooddata/sdk-ui-theme-provider": "11.52.0-alpha.5",
-    "@gooddata/util": "11.52.0-alpha.5"
+    "@gooddata/sdk-backend-spi": "11.52.0-alpha.6",
+    "@gooddata/sdk-model": "11.52.0-alpha.6",
+    "@gooddata/sdk-ui-theme-provider": "11.52.0-alpha.6",
+    "@gooddata/sdk-ui": "11.52.0-alpha.6",
+    "@gooddata/util": "11.52.0-alpha.6"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -129,11 +129,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/oxlint-config": "11.52.0-alpha.5",
-    "@gooddata/eslint-config": "11.52.0-alpha.5",
-    "@gooddata/reference-workspace": "11.52.0-alpha.5",
-    "@gooddata/stylelint-config": "11.52.0-alpha.5",
-    "@gooddata/sdk-backend-mockingbird": "11.52.0-alpha.5"
+    "@gooddata/eslint-config": "11.52.0-alpha.6",
+    "@gooddata/oxlint-config": "11.52.0-alpha.6",
+    "@gooddata/reference-workspace": "11.52.0-alpha.6",
+    "@gooddata/sdk-backend-mockingbird": "11.52.0-alpha.6",
+    "@gooddata/stylelint-config": "11.52.0-alpha.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiMenu/UiMenu.scss

@@ -143,7 +143,7 @@
         }
     }
 
-    &__item-wrapper .gd-ui-kit-tooltip__anchor {
+    &__item-wrapper .gd-ui-kit-tooltip__anchor:not(.gd-ui-kit-tooltip__anchor--inline) {
         width: 100%;
     }
 

package/src/@ui/UiTextInput/UiTextInput.scss

@@ -29,6 +29,13 @@
             background-color: var(--gd-palette-complementary-2);
             cursor: not-allowed;
         }
+
+        // Repeated with :focus-within to outweigh the focus rule above, so the border stays error-colored
+        // while the field is being corrected.
+        &--error,
+        &--error:focus-within {
+            border-color: var(--gd-palette-error-base);
+        }
     }
 
     &__icon-before {

package/styles/css/main.css

@@ -1958,7 +1958,7 @@
   outline: auto 5px Highlight; /* For Firefox */
   outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
 }
-.gd-ui-kit-menu__item-wrapper .gd-ui-kit-tooltip__anchor {
+.gd-ui-kit-menu__item-wrapper .gd-ui-kit-tooltip__anchor:not(.gd-ui-kit-tooltip__anchor--inline) {
   width: 100%;
 }
 .gd-ui-kit-menu__item {
@@ -3608,6 +3608,9 @@
   background-color: var(--gd-palette-complementary-2);
   cursor: not-allowed;
 }
+.gd-ui-kit-text-input__field--error, .gd-ui-kit-text-input__field--error:focus-within {
+  border-color: var(--gd-palette-error-base);
+}
 .gd-ui-kit-text-input__icon-before {
   display: inline-flex;
   align-items: center;