@gooddata/sdk-ui-kit 11.52.0-alpha.4 → 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/Dialog/StylingEditorDialog/StylingEditorDialog.d.ts

@@ -34,6 +34,15 @@ export interface IStylingEditorDialogProps<T extends StylingPickerItemContent> e
      * submission and display it, or undefined when the content is valid.
      */
     validateDefinition?: (content: T) => string | undefined;
+    /**
+     * Optional non-blocking check of the parsed definition content.
+     *
+     * @remarks
+     * Called only when the definition is valid JSON. Return a localized message to display it as a
+     * warning, or undefined when there is nothing to report. Unlike {@link IStylingEditorDialogProps.validateDefinition}
+     * this never prevents submission — use it for content that applies but degrades the result.
+     */
+    validateDefinitionWarning?: (content: T) => string | undefined;
 }
 /**
  * @internal

package/esm/Dialog/StylingEditorDialog/StylingEditorDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StylingEditorDialog.d.ts","sourceRoot":"","sources":["../../../src/Dialog/StylingEditorDialog/StylingEditorDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAOnF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAEH,KAAK,+BAA+B,EACvC,MAAM,gCAAgC,CAAC;AAGxC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,aAAa,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,wBAAwB;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,wBAAwB,CACzE,SAAQ,+BAA+B,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,CAAC;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,EAAE,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;CAC3D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,wBAAwB,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAM1G"}
+{"version":3,"file":"StylingEditorDialog.d.ts","sourceRoot":"","sources":["../../../src/Dialog/StylingEditorDialog/StylingEditorDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAQnF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAEH,KAAK,+BAA+B,EACvC,MAAM,gCAAgC,CAAC;AAGxC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,aAAa,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,wBAAwB;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,wBAAwB,CACzE,SAAQ,+BAA+B,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,CAAC;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,EAAE,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACxD;;;;;;;OAOG;IACH,yBAAyB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;CAClE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,wBAAwB,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAM1G"}

package/esm/Dialog/StylingEditorDialog/StylingEditorDialog.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2022-2026 GoodData Corporation
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import cx from "classnames";
 import { useIntl } from "react-intl";
 import { IntlWrapper } from "@gooddata/sdk-ui";
 import { Button } from "../../Button/Button.js";
+import { Message } from "../../Messages/Message.js";
 import { Typography } from "../../Typography/Typography.js";
 import { useId } from "../../utils/useId.js";
 import { Dialog } from "../Dialog.js";
@@ -17,49 +18,48 @@ import { StylingExample } from "./StylingExample.js";
 export function StylingEditorDialog(props) {
     return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(StylingEditorDialogCore, { ...props }) }));
 }
-function StylingEditorDialogCore({ title, tooltip, link, stylingItem, examples, exampleToColorPreview, onClose, onSubmit, onCancel, disableSubmit, showProgressIndicator, showBackButton, onHelpClick, onExit = () => { }, className, onInvalidDefinition = () => { }, validateDefinition, }) {
+function StylingEditorDialogCore({ title, tooltip, link, stylingItem, examples, exampleToColorPreview, onClose, onSubmit, onCancel, disableSubmit, showProgressIndicator, showBackButton, onHelpClick, onExit = () => { }, className, onInvalidDefinition = () => { }, validateDefinition, validateDefinitionWarning, }) {
     const intl = useIntl();
     const providedExamples = !!examples && examples.length !== 0 && !!exampleToColorPreview;
     const initialNameField = stylingItem?.name ?? "";
     const initialDefinitionField = stylingItem?.content ? JSON.stringify(stylingItem?.content, null, 4) : "";
     const [nameField, setNameField] = useState(initialNameField);
     const [definitionField, setDefinitionField] = useState(initialDefinitionField);
-    const fieldsChanged = useMemo(() => {
+    const parsedDefinition = useMemo(() => {
         try {
-            const parsedDefinition = JSON.parse(definitionField);
-            const formattedDefinition = JSON.stringify(parsedDefinition, null, 4);
-            return nameField !== initialNameField || formattedDefinition !== initialDefinitionField;
+            return { ok: true, content: JSON.parse(definitionField) };
         }
         catch {
+            return { ok: false };
+        }
+    }, [definitionField]);
+    const fieldsChanged = useMemo(() => {
+        if (!parsedDefinition.ok) {
             // initial state of the fields is presumed to be valid,
             // so if JSON throws error, definition was changed
             return true;
         }
-    }, [nameField, initialNameField, definitionField, initialDefinitionField]);
+        const formattedDefinition = JSON.stringify(parsedDefinition.content, null, 4);
+        return nameField !== initialNameField || formattedDefinition !== initialDefinitionField;
+    }, [parsedDefinition, nameField, initialNameField, initialDefinitionField]);
     const validName = useMemo(() => nameField !== "", [nameField]);
-    const validDefinition = useMemo(() => {
-        try {
-            JSON.parse(definitionField);
-            return true;
-        }
-        catch {
-            return false;
-        }
-    }, [definitionField]);
-    // Content-level validation (e.g. theme color values) runs only on well-formed JSON.
-    const definitionContentError = useMemo(() => {
-        if (!validateDefinition || !validDefinition) {
+    const validDefinition = parsedDefinition.ok;
+    // A callback that throws must not crash the dialog, so it degrades to "nothing to report" and
+    // the user can keep working.
+    const runContentCheck = useCallback((check, name) => {
+        if (!check || !parsedDefinition.ok) {
             return undefined;
         }
         try {
-            return validateDefinition(JSON.parse(definitionField));
+            return check(parsedDefinition.content);
         }
         catch (error) {
-            // a buggy validator must not crash the dialog; degrade gracefully and let the user proceed
-            console.error("StylingEditorDialog: the provided validateDefinition callback threw.", error);
+            console.error(`StylingEditorDialog: the provided ${name} callback threw.`, error);
             return undefined;
         }
-    }, [validateDefinition, validDefinition, definitionField]);
+    }, [parsedDefinition]);
+    const definitionContentError = useMemo(() => runContentCheck(validateDefinition, "validateDefinition"), [runContentCheck, validateDefinition]);
+    const definitionContentWarning = useMemo(() => runContentCheck(validateDefinitionWarning, "validateDefinitionWarning"), [runContentCheck, validateDefinitionWarning]);
     const validFields = useMemo(() => validName && validDefinition && !definitionContentError, [validName, validDefinition, definitionContentError]);
     const isSubmitDisabled = useMemo(() => !validFields || !fieldsChanged || disableSubmit, [validFields, fieldsChanged, disableSubmit]);
     const emptyDefinition = useMemo(() => definitionField === "", [definitionField]);
@@ -89,10 +89,10 @@ function StylingEditorDialogCore({ title, tooltip, link, stylingItem, examples,
         stylingItem?.ref,
         intl,
     ]);
-    const getFinalStylingItem = (original, definition, name) => {
+    const getFinalStylingItem = (original, content, name) => {
         return {
             ...(original || {}),
-            content: JSON.parse(definition),
+            content,
             name,
         };
     };
@@ -111,13 +111,18 @@ function StylingEditorDialogCore({ title, tooltip, link, stylingItem, examples,
                     _jsxs("form", { className: "gd-styling-editor-dialog-content-form", onSubmit: (e) => e.preventDefault(), children: [
                             _jsxs("label", { className: "gd-styling-editor-dialog-content-form-input", children: [intl.formatMessage({ id: "stylingEditor.dialog.name" }), _jsx("input", { "aria-label": "Styling item name", className: "gd-input-field s-input-field", type: "text", value: nameField, onChange: (e) => setNameField(e.target.value) })
                                 ] }), _jsxs("label", { className: "gd-styling-editor-dialog-content-form-textarea", children: [intl.formatMessage({ id: "stylingEditor.dialog.definition" }), _jsx("textarea", { "aria-label": "Styling item definition", className: "gd-input-field s-textarea-field", wrap: "off", value: definitionField, onChange: (e) => setDefinitionField(e.target.value) })
-                                ] })
-                        ] }), providedExamples ? (_jsxs("div", { className: cx("gd-styling-editor-dialog-content-examples", "s-gd-styling-editor-dialog-content-examples"), children: [
+                                ] }), definitionContentWarning && !definitionContentError ? (_jsx(Message, { type: "warning", className: "gd-styling-editor-dialog-content-form-warning s-styling-editor-warning", children: definitionContentWarning })) : null] }), providedExamples ? (_jsxs("div", { className: cx("gd-styling-editor-dialog-content-examples", "s-gd-styling-editor-dialog-content-examples"), children: [
                             _jsx(BubbleHeaderSeparator, { title: intl.formatMessage({ id: "stylingEditor.dialog.examples" }), message: tooltip }), _jsx("div", { className: "gd-styling-editor-dialog-content-examples-list", children: examples.map((example, index) => (_jsx(StylingExample, { name: example.name ?? "", colors: exampleToColorPreview(example.content), onClick: () => {
                                         setNameField(example.name ?? "");
                                         setDefinitionField(JSON.stringify(example.content, null, 4));
                                     } }, index))) })
-                        ] })) : null] }), _jsx(StylingEditorDialogFooter, { disableSubmit: isSubmitDisabled, showProgressIndicator: showProgressIndicator, link: link, errorMessage: errorMessage, onSubmit: () => onSubmit?.(getFinalStylingItem(stylingItem, definitionField, nameField)), onCancel: () => {
+                        ] })) : null] }), _jsx(StylingEditorDialogFooter, { disableSubmit: isSubmitDisabled, showProgressIndicator: showProgressIndicator, link: link, errorMessage: errorMessage, onSubmit: () => {
+                    // Submission is disabled while the definition does not parse, so this only
+                    // narrows the type rather than guarding a reachable state.
+                    if (parsedDefinition.ok) {
+                        onSubmit?.(getFinalStylingItem(stylingItem, parsedDefinition.content, nameField));
+                    }
+                }, onCancel: () => {
                     onExit?.(nameField, definitionField);
                     onCancel?.();
                 }, onHelpClick: onHelpClick })

package/esm/Dropdown/DropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAMvF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,wBAAwB,GAAG;QAAE,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;KAAE,CAAC;IAEjG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAElC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC3B,EAAE,EACF,SAAS,EACT,mBAAmB,EAEnB,KAAK,EACL,KAAa,EACb,QAAQ,EAER,MAAM,EACN,OAAc,EACd,QAAQ,EACR,WAAmB,EACnB,OAAO,EACP,QAAQ,EACR,UAAU,EACV,SAAS,EACZ,EAAE,oBAAoB,2CAuDtB"}
+{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAMvF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,wBAAwB,GAAG;QAAE,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;KAAE,CAAC;IAEjG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAElC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC3B,EAAE,EACF,SAAS,EACT,mBAAmB,EAEnB,KAAK,EACL,KAAa,EACb,QAAQ,EAER,MAAM,EACN,OAAc,EACd,QAAQ,EACR,WAAmB,EACnB,OAAO,EACP,QAAQ,EACR,UAAU,EACV,SAAS,EACZ,EAAE,oBAAoB,2CA4DtB"}

package/esm/Dropdown/DropdownButton.js

@@ -29,6 +29,11 @@ export function DropdownButton({ id, className, accessibilityConfig, value, titl
             ariaLabel,
             ariaLabelledBy,
             ariaDescribedBy,
+            // Without a dropdownId the popup id is unknown, but the trigger is still a combobox,
+            // so it has to expose its expanded state - callers commonly pass only isOpen - along
+            // with any explicitly controlled id.
+            ariaExpanded: effectiveAriaExpanded,
+            ariaControls,
             role: role ?? "combobox",
         });
     return (_jsx(Button, { id: id, accessibilityConfig: buttonAccessibilityConfig, title: title && typeof title === "string" ? title : undefined, className: buttonClasses, value: value, iconLeft: iconLeft, iconRight: isOpen ? "gd-icon-navigateup" : "gd-icon-navigatedown", disabled: disabled, onClick: onClick, ref: buttonRef, children: children }));

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,KAAK,eAAe,EAA8C,MAAM,cAAc,CAAC;AAyBhG;;GAEG;AACH,eAAO,MAAM,SAAS,kGAokBpB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,KAAK,eAAe,EAA8C,MAAM,cAAc,CAAC;AAyBhG;;GAEG;AACH,eAAO,MAAM,SAAS,kGAskBpB,CAAC"}