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

package/esm/ChartSorting/ChartSorting.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2022-2026 GoodData Corporation
 import { useCallback, useMemo, useState } from "react";
 import { isEqual } from "lodash-es";
-import { FormattedMessage, injectIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { IntlWrapper } from "@gooddata/sdk-ui";
 import { Button } from "../Button/Button.js";
 import { ChartSortingDropdown } from "./ChartSortingDropdown.js";
 import { ChartSortingDropdownBody } from "./ChartSortingDropdownBody.js";
-function ChartSorting({ currentSort, availableSorts, intl, bucketItems, buttonNode, onCancel, onApply, }) {
+function ChartSorting({ currentSort, availableSorts, bucketItems, buttonNode, onCancel, onApply, }) {
+    const intl = useIntl();
     const [currentSelectedSort, setCurrentSort] = useState(currentSort);
     const handleApply = useCallback(() => {
         onApply(currentSelectedSort);
@@ -22,13 +23,9 @@ function ChartSorting({ currentSort, availableSorts, intl, bucketItems, buttonNo
                 ] })
         ] }));
 }
-/**
- * @internal
- */
-export const ChartSortingWithIntl = injectIntl(ChartSorting);
 /**
  * @internal
  */
 export function ChartSortingDialog(props) {
-    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(ChartSortingWithIntl, { ...props }) }));
+    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(ChartSorting, { ...props }) }));
 }

package/esm/Datepicker/Datepicker.d.ts

@@ -1,12 +1,11 @@
-import { PureComponent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from "react";
-import { type WrappedComponentProps } from "react-intl";
+import { PureComponent, type KeyboardEvent as ReactKeyboardEvent } from "react";
 import { type WeekStart } from "@gooddata/sdk-model";
 import { type IAccessibilityConfigBase } from "../typings/accessibility.js";
 import { type IAlignPoint } from "../typings/positioning.js";
 /**
  * @internal
  */
-export interface IDatePickerOwnProps {
+export interface IDatePickerProps {
     accessibilityConfig?: IAccessibilityConfigBase;
     date?: Date;
     className?: string;
@@ -24,63 +23,13 @@ export interface IDatePickerOwnProps {
     weekStart?: WeekStart;
     onDateInputKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;
 }
-export type DatePickerProps = IDatePickerOwnProps & WrappedComponentProps;
-interface IDatePickerState {
-    align: string;
-    selectedDate: Date | undefined;
-    monthDate: Date | undefined;
-    isOpen: boolean;
-    inputValue: string;
-}
 export declare function parseDate(str: string, dateFormat: string): Date | undefined;
-export declare class WrappedDatePicker extends PureComponent<DatePickerProps, IDatePickerState> {
-    private rootRef;
-    private datePickerContainerRef;
-    private inputRef;
-    private datePickerId;
-    static defaultProps: {
-        className: string;
-        date: Date;
-        placeholder: string;
-        onChange: () => void;
-        onBlur: () => void;
-        resetOnInvalidValue: boolean;
-        size: string;
-        tabIndex: number;
-        alignPoints: {
-            align: string;
-        }[];
-        onAlign: () => void;
-        dateFormat: string;
-        weekStart: "Sunday";
-    };
-    constructor(props: DatePickerProps);
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: DatePickerProps): void;
-    componentWillUnmount(): void;
-    private handleClickOutside;
-    componentDidUpdate(_prevProps: DatePickerProps, prevState: IDatePickerState): void;
-    private setComponentRef;
-    private getInputClasses;
-    private getComponentClasses;
-    private getOverlayWrapperClasses;
-    resizeHandler: import("lodash-es").DebouncedFunc<() => void>;
-    private updateDate;
-    private handleInputBlur;
-    private handleInputChanged;
-    private handleDayChanged;
-    private handleMonthChanged;
-    private handleCustomDayClick;
-    private normalizeDate;
-    private alignDatePicker;
-    private onKeyDown;
-    private handleWrapperClick;
-    render(): ReactNode;
-}
+declare function WrappedDatePickerCore({ accessibilityConfig, date: dateProp, className, placeholder, onChange, onBlur, onValidateInput, resetOnInvalidValue, size, tabIndex, alignPoints: alignPointsProp, onAlign, dateFormat: dateFormatProp, weekStart: weekStartProp, onDateInputKeyDown }: IDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const WrappedDatePicker: import("react").MemoExoticComponent<typeof WrappedDatePickerCore>;
 /**
  * @internal
  */
-export declare class Datepicker extends PureComponent<IDatePickerOwnProps> {
+export declare class Datepicker extends PureComponent<IDatePickerProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/esm/Datepicker/Datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.d.ts","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Datepicker.d.ts","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,aAAa,EACb,KAAK,aAAa,IAAI,kBAAkB,EAS3C,MAAM,OAAO,CAAC;AAkCf,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAO7D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1E;AAuCD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAuB3E;AA2BD,iBAAS,qBAAqB,CAAC,EAC3B,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,SAAc,EACd,WAAgB,EAChB,QAAQ,EACR,MAAM,EACN,eAAe,EACf,mBAA2B,EAC3B,IAAS,EACT,QAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,OAAO,EACP,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,aAAa,EACxB,kBAAkB,EACrB,EAAE,gBAAgB,2CAuQlB;AAED,eAAO,MAAM,iBAAiB,mEAA8B,CAAC;AAG7D;;GAEG;AACH,qBAAa,UAAW,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IAC3C,MAAM,4CAMrB;CACJ"}

package/esm/Datepicker/Datepicker.js

@@ -1,12 +1,12 @@
 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";
 import { debounce } from "lodash-es";
 import { DayPicker } from "react-day-picker";
-import { injectIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import { v4 as uuid } from "uuid";
 import { IntlWrapper } from "@gooddata/sdk-ui";
 import { DEFAULT_DATE_FORMAT } from "../constants/platform.js";
@@ -81,191 +81,148 @@ 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, }) {
+    const intl = useIntl();
+    // 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,25 +231,30 @@ 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" })
+        ] }));
 }
-const DatePickerWithIntl = injectIntl(WrappedDatePicker);
+export const WrappedDatePicker = memo(WrappedDatePickerCore);
+WrappedDatePicker.displayName = "WrappedDatePicker";
 /**
  * @internal
  */
 export class Datepicker extends PureComponent {
     render() {
-        return (_jsx(IntlWrapper, { locale: this.props.locale, children: _jsx(DatePickerWithIntl, { ...this.props }) }));
+        return (_jsx(IntlWrapper, { locale: this.props.locale, children: _jsx(WrappedDatePicker, { ...this.props }) }));
     }
 }

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/index.d.ts

@@ -34,7 +34,7 @@ export { type IYamlEditorProps, YamlEditor } from "./syntaxHighlightingInput/Yam
 export { type IYamlPosition, type YamlCompletionSource, yamlPositionAt, } from "./syntaxHighlightingInput/yamlPosition.js";
 export type { IDropdownButtonAccessibilityConfig, IButtonAccessibilityConfig, IButtonProps, } from "./Button/typings.js";
 export { Button } from "./Button/Button.js";
-export { Datepicker, type IDatePickerOwnProps } from "./Datepicker/Datepicker.js";
+export { Datepicker, type IDatePickerProps } from "./Datepicker/Datepicker.js";
 export type { Separators, LabelSize } from "./Form/typings.js";
 export { Input, type IInputState } from "./Form/Input.js";
 export { InputPure, type IInputPureProps, type IInputPureAccessibilityConfig } from "./Form/InputPure.js";
@@ -305,7 +305,7 @@ export type { OnOpenedChange, IOnOpenedChangeParams, IMenuPositionConfig, MenuAl
 export type { IMenuStateProps, IMenuStateConfig } from "./Menu/MenuState.js";
 export type { IScrollGradientProps } from "./ScrollGradient/typings.js";
 export { ScrollGradient } from "./ScrollGradient/ScrollGradient.js";
-export { ChartSortingDialog, ChartSortingWithIntl, type IChartSortingOwnProps, type IChartSortingProps, } from "./ChartSorting/ChartSorting.js";
+export { ChartSortingDialog, type IChartSortingProps } from "./ChartSorting/ChartSorting.js";
 export { SORT_TARGET_TYPE, type IAvailableSortsGroup, type MeasureSortSuggestion, type ISortTypeItem, type IBucketItemDescriptor, type IBucketItemDescriptors, } from "./ChartSorting/types.js";
 export { StylingSettingWidget, type IStylingSettingWidgetProps, } from "./SettingWidget/StylingSettingWidget/StylingSettingWidget.js";
 export { defaultThemeMetadataObject, defaultColorPaletteMetadataObject, getColorsPreviewFromTheme, getColorsPreviewFromColorPalette, } from "./SettingWidget/StylingSettingWidget/utils.js";