@gooddata/sdk-ui-metric-component 0.0.0-stage → 11.65.0-alpha.5

package/esm/MetricComponent/Form/MaqlResult/MaqlSql.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useRef } from "react";
+import { ErrorComponent } from "@gooddata/sdk-ui";
+import { LoadingSpinner } from "@gooddata/sdk-ui-kit";
+import { SqlEditor } from "../../../MaqlEditor/sql/SqlEditor.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { HeaderAction, MaqlSqlHeader } from "./MaqlSqlHeader.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        background: theme.globals.colors.editorBackground,
+        borderLeft: `1px solid ${theme.globals.colors.defaultBorderDarker}`,
+    },
+    headerHolder: {
+        flex: "0 0 auto",
+        display: "flex",
+        height: 36,
+    },
+    contentHolder: {
+        flex: "1 1 auto",
+        display: "flex",
+        position: "relative",
+    },
+    loading: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginLeft: "-16px",
+        marginTop: "-16px",
+    },
+}));
+export function MaqlSql({ explain, onClose, onCopy }) {
+    const { classes, cx } = useStyles();
+    const { sql, status, error } = explain;
+    const api = useRef(null);
+    return (_jsxs("div", { className: cx(classes.root), children: [_jsx("div", { className: cx(classes.headerHolder), children: _jsx(MaqlSqlHeader, { canCopy: !!explain.sql, onAction: (action) => {
+                        switch (action) {
+                            case HeaderAction.Copy:
+                                if (onCopy) {
+                                    onCopy(api.current?.copy() ?? false);
+                                }
+                                break;
+                            case HeaderAction.Close:
+                                if (onClose) {
+                                    onClose();
+                                }
+                                break;
+                        }
+                    } }) }), _jsxs("div", { className: cx(classes.contentHolder), children: [(status === "loading" || status === "pending") && (_jsx(LoadingSpinner, { className: cx(classes.loading, "large") })), status === "success" && sql && (_jsx(SqlEditor, { defaultValue: sql, readonly: true, inline: false, ref: api })), status === "error" && error && (_jsx(ErrorComponent, { message: error.name, description: error.message }))] })] }));
+}

package/esm/MetricComponent/Form/MaqlResult/MaqlSqlHeader.d.ts

@@ -0,0 +1,10 @@
+export declare enum HeaderAction {
+    Close = "close",
+    Copy = "copy"
+}
+export interface IMaqlSqlHeader {
+    canCopy?: boolean;
+    onAction?: (action: HeaderAction) => void;
+}
+export declare function MaqlSqlHeader({ canCopy, onAction }: IMaqlSqlHeader): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaqlSqlHeader.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/MaqlSqlHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlSqlHeader.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlResult/MaqlSqlHeader.tsx"],"names":[],"mappings":"AA8BA,oBAAY,YAAY;IACpB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAED,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C;AAWD,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA8BlE"}

package/esm/MetricComponent/Form/MaqlResult/MaqlSqlHeader.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { FormattedMessage, defineMessages, useIntl } from "react-intl";
+import { IconCopy } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { PartHeader } from "../PartHeader/PartHeader.js";
+import { PartHeaderButton } from "../PartHeader/PartHeaderButton.js";
+const useStyles = makeStyles()((theme) => {
+    return {
+        close: {
+            marginRight: "-15px",
+            ".gd-button-icon": {
+                fontSize: "14px",
+            },
+        },
+        copy: {
+            "&.disabled": {
+                opacity: 0.5,
+            },
+            "&:hover:not(.disabled) svg path": {
+                fill: theme.globals.colors.active,
+            },
+        },
+    };
+});
+export var HeaderAction;
+(function (HeaderAction) {
+    HeaderAction["Close"] = "close";
+    HeaderAction["Copy"] = "copy";
+})(HeaderAction || (HeaderAction = {}));
+const messages = defineMessages({
+    close: {
+        id: "metricComponent.editMetric.metric.sql.close",
+    },
+    copy: {
+        id: "metricComponent.editMetric.metric.sql.copy_to_clipboard",
+    },
+});
+export function MaqlSqlHeader({ canCopy, onAction }) {
+    const intl = useIntl();
+    const { classes } = useStyles();
+    return (_jsx(PartHeader, { className: "s-maql_sql_header", TitleContent: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.sql" }), TitleTooltip: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.sql.tooltip" }), buttons: [
+            _jsx(PartHeaderButton, { onClick: () => onAction?.(HeaderAction.Copy), tooltip: intl.formatMessage(messages.copy), disabled: !canCopy, elementIconLeft: _jsx(IconCopy, { width: 14, height: 15 }), sClassName: "s-copy_to_clipboard_button", className: classes.copy }, 0),
+            _jsx(PartHeaderButton, { onClick: () => onAction?.(HeaderAction.Close), tooltip: intl.formatMessage(messages.close), iconLeft: "gd-icon-cross", sClassName: "s-close_button", className: classes.close }, 1),
+        ] }));
+}

package/esm/MetricComponent/Form/MaqlResult/components/AttributesSelect.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type ICatalogAttribute } from "@gooddata/sdk-model";
+import { type IDropdownButtonRenderProps } from "@gooddata/sdk-ui-kit";
+export type IAttributesSelectProps = {
+    opener: (props: IDropdownButtonRenderProps) => ReactNode;
+    loading?: boolean;
+    all?: ICatalogAttribute[];
+    attributes?: ICatalogAttribute[];
+    preselected?: ICatalogAttribute[];
+    onApply?: (attrs: ICatalogAttribute[]) => void;
+    onCancel?: () => void;
+    onOpen?: () => void;
+};
+export declare function AttributesSelect({ all, attributes, preselected, loading, opener, onApply, onCancel, onOpen, }: IAttributesSelectProps): ReactElement;
+//# sourceMappingURL=AttributesSelect.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/components/AttributesSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributesSelect.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/MaqlResult/components/AttributesSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAkC,KAAK,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAoEvG,MAAM,MAAM,sBAAsB,GAAG;IACjC,MAAM,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAWF,wBAAgB,gBAAgB,CAAC,EAC7B,GAAQ,EACR,UAAe,EACf,WAAgB,EAChB,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GACT,EAAE,sBAAsB,GAAG,YAAY,CAgGvC"}

package/esm/MetricComponent/Form/MaqlResult/components/AttributesSelect.js

@@ -0,0 +1,171 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2022-2026 GoodData Corporation
+import { useCallback, useMemo, useState } from "react";
+import classNames from "classnames";
+import { debounce, isEqual } from "lodash-es";
+import { defineMessages, useIntl } from "react-intl";
+import { LoadingComponent } from "@gooddata/sdk-ui";
+import { Button, Dropdown, DropdownList } from "@gooddata/sdk-ui-kit";
+import { useProp } from "../../../../shared/hooks/useProp.js";
+import { makeStyles } from "../../../../shared/theme/index.js";
+import { AttributeDropdownListItem } from "./AttributesSelectItem.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {},
+    header: {
+        lineHeight: "11px",
+        fontSize: "11px",
+        textTransform: "uppercase",
+        padding: 10,
+        color: theme.globals.colors.defaultStateBlank,
+        background: theme.globals.colors.dropdownHeaderBackground,
+    },
+    line: {
+        height: 1,
+        background: theme.globals.colors.defaultBorderDarker,
+        margin: "0 10px",
+    },
+    unrelated: {
+        fontSize: "12px",
+        padding: "5px 10px",
+        color: theme.globals.colors.defaultStateBlank,
+    },
+    list: {},
+    dropdown: {
+        position: "relative",
+    },
+    dropdownItem: {
+        position: "relative",
+        height: "100%",
+        display: "flex",
+        "& > span": {
+            zIndex: 9,
+            flex: "0 0 auto",
+            display: "block",
+            marginRight: "-25px",
+            width: "25px",
+            textAlign: "right",
+            fontSize: "12px",
+            fontWeight: "bold",
+        },
+        "& > div": {
+            flex: "1 1 auto",
+            paddingLeft: "30px",
+        },
+    },
+    buttons: {
+        display: "flex",
+        margin: "10px",
+        justifyContent: "flex-end",
+    },
+    loading: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 100,
+        background: "white",
+    },
+}));
+const messages = defineMessages({
+    context: {
+        id: "metricComponent.editMetric.metric.result.context",
+    },
+    unrelated: {
+        id: "metricComponent.editMetric.metric.result.context.unrelated",
+    },
+});
+export function AttributesSelect({ all = [], attributes = [], preselected = [], loading, opener, onApply, onCancel, onOpen, }) {
+    const intl = useIntl();
+    const { cx, classes } = useStyles();
+    const { items, search, onSearch } = useSearch(attributes);
+    const { selected, changed, toggleSelected, resetSelected } = useSelected(preselected);
+    const sorted = useSorted(items, selected);
+    const { onStateChangeHandler, onApplyHandler, onCancelHandler } = useCallbacks(selected, resetSelected, onApply, onCancel, onOpen);
+    return (_jsx(Dropdown, { closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, className: classes.root, alignPoints: [{ align: "tr br" }, { align: "tr tr" }, { align: "cr cl" }], renderButton: opener, onOpenStateChanged: onStateChangeHandler, renderBody: ({ closeDropdown }) => (_jsxs("div", { className: classes.list, children: [_jsx("div", { className: classes.header, children: intl.formatMessage(messages.context) }), _jsxs("div", { className: classes.dropdown, children: [loading && _jsx(LoadingComponent, { className: cx("large", classes.loading) }), _jsx(DropdownList, { items: sorted, searchFieldSize: "small", showSearch: true, onSearch: onSearch, searchString: search, searchPlaceholder: intl.formatMessage({
+                                id: "metricComponent.editMetric.metric.context.search",
+                            }), renderItem: (props) => {
+                                const isSelected = !!selected?.includes(props.item);
+                                return (_jsxs("div", { className: classes.dropdownItem, children: [isSelected && _jsxs("span", { children: [selected.indexOf(props.item) + 1, "."] }), _jsx(AttributeDropdownListItem, { ...props, selected: isSelected, onSelect: toggleSelected })] }));
+                            } })] }), all.length > attributes.length && (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.line }), _jsx("div", { className: classes.unrelated, children: intl.formatMessage(messages.unrelated, {
+                                unrelated: all.length - attributes.length,
+                            }) })] })), _jsx("div", { className: classes.line }), _jsxs("div", { className: classes.buttons, children: [_jsx(Button, { disabled: loading, value: intl.formatMessage({
+                                id: "metricComponent.editMetric.metric.context.cancel",
+                            }), onClick: () => {
+                                onCancelHandler();
+                                closeDropdown();
+                            }, className: classNames("gd-button-secondary", "s-button-cancel") }), _jsx(Button, { value: intl.formatMessage({
+                                id: "metricComponent.editMetric.metric.context.apply",
+                            }), onClick: () => {
+                                onApplyHandler();
+                                closeDropdown();
+                            }, disabled: !changed, className: classNames("gd-button-action", "s-button-apply", !changed && "disabled") })] })] })) }));
+}
+function useSearch(attributes) {
+    const [search, setSearch] = useState("");
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    const onSearch = useCallback(debounce((query) => {
+        setSearch(query);
+    }, 250), []);
+    const items = useMemo(() => search
+        ? attributes.filter((a) => a.attribute.title.toLowerCase().includes(search.toLowerCase()))
+        : attributes, [attributes, search]);
+    return {
+        onSearch,
+        search,
+        items,
+    };
+}
+function useSelected(preselected) {
+    const [selected, setSelected] = useProp(preselected);
+    const changed = useMemo(() => !isEqual(selected.slice().sort(), preselected.slice().sort()), [preselected, selected]);
+    const toggleSelected = useCallback((attr) => {
+        if (selected.includes(attr)) {
+            setSelected(selected.filter((attribute) => attr !== attribute));
+        }
+        else {
+            setSelected([...selected, attr]);
+        }
+    }, [selected, setSelected]);
+    const resetSelected = useCallback(() => {
+        setSelected(preselected);
+    }, [preselected, setSelected]);
+    return {
+        changed,
+        selected,
+        toggleSelected,
+        resetSelected,
+    };
+}
+function useSorted(attributes, selected) {
+    return useMemo(() => {
+        return [...selected, ...attributes.filter((a) => !selected.includes(a))];
+    }, [attributes, selected]);
+}
+function useCallbacks(selected, resetSelected, onApply, onCancel, onOpen) {
+    const onCancelHandler = useCallback(() => {
+        resetSelected();
+        if (onCancel) {
+            onCancel();
+        }
+    }, [resetSelected, onCancel]);
+    const onOpenHandler = useCallback(() => {
+        if (onOpen) {
+            onOpen();
+        }
+    }, [onOpen]);
+    const onApplyHandler = useCallback(() => onApply?.(selected), [selected, onApply]);
+    const onStateChangeHandler = useCallback((isOpen) => {
+        if (isOpen) {
+            onOpenHandler();
+        }
+        else {
+            onCancelHandler();
+        }
+    }, [onCancelHandler, onOpenHandler]);
+    return {
+        onStateChangeHandler,
+        onApplyHandler,
+        onCancelHandler,
+    };
+}

package/esm/MetricComponent/Form/MaqlResult/components/AttributesSelectItem.d.ts

@@ -0,0 +1,10 @@
+import { type ICatalogAttribute } from "@gooddata/sdk-model";
+import { type IRenderListItemProps } from "@gooddata/sdk-ui-kit";
+export interface IAttributeDropdownListItemProps extends IRenderListItemProps<ICatalogAttribute> {
+    selected: boolean;
+    onSelect?: (item: ICatalogAttribute) => void;
+    onMouseOver?: (item: ICatalogAttribute) => void;
+    onMouseOut?: (item: ICatalogAttribute) => void;
+}
+export declare function AttributeDropdownListItem(props: IAttributeDropdownListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AttributesSelectItem.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/components/AttributesSelectItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributesSelectItem.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/MaqlResult/components/AttributesSelectItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE,MAAM,WAAW,+BAAgC,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,+BAA+B,2CAyC/E"}

package/esm/MetricComponent/Form/MaqlResult/components/AttributesSelectItem.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useMemo } from "react";
+import cx from "classnames";
+import { simplifyText } from "@gooddata/util";
+export function AttributeDropdownListItem(props) {
+    const { item, selected, onSelect, onMouseOver, onMouseOut } = props;
+    const itemId = useMemo(() => `attr-filter-item-${Math.random().toString(36).slice(2)}`, []);
+    const className = cx("gd-list-item", "attribute-filter-item", "has-only-visible", {
+        "is-selected": selected,
+        [`s-${simplifyText(item.defaultDisplayForm.title)}`]: true,
+    });
+    function handleSelect() {
+        onSelect?.(item);
+    }
+    function handleMouseOver() {
+        onMouseOver?.(item);
+    }
+    function handleMouseOut() {
+        onMouseOut?.(item);
+    }
+    return (_jsx("div", { className: className, onClick: handleSelect, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, title: item.defaultDisplayForm.title, children: _jsxs("label", { className: "input-checkbox-label", children: [_jsx("input", { id: itemId, type: "checkbox", className: "input-checkbox", readOnly: true, checked: props.selected }), _jsx("span", { className: "input-label-text", children: item.defaultDisplayForm.title })] }) }));
+}

package/esm/MetricComponent/Form/MaqlResult/components/LimitSelect.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type IDropdownButtonRenderProps } from "@gooddata/sdk-ui-kit";
+export type ILimitSelectProps = {
+    opener: (props: IDropdownButtonRenderProps) => ReactNode;
+    limit?: 10 | 100 | 1000 | 10000;
+    ranking?: "top" | "bottom";
+    onApply?: (limit: 10 | 100 | 1000 | 10000, ranking: "top" | "bottom") => void;
+    onCancel?: () => void;
+};
+export declare function LimitSelect({ ranking, limit, opener, onApply, onCancel, }: ILimitSelectProps): ReactElement;
+//# sourceMappingURL=LimitSelect.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/components/LimitSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitSelect.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/MaqlResult/components/LimitSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAMhF,OAAO,EAKH,KAAK,0BAA0B,EAElC,MAAM,sBAAsB,CAAC;AAmD9B,MAAM,MAAM,iBAAiB,GAAG;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;IACzD,KAAK,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EACxB,OAAe,EACf,KAAU,EACV,MAAM,EACN,OAAO,EACP,QAAQ,GACX,EAAE,iBAAiB,GAAG,YAAY,CAuGlC"}

package/esm/MetricComponent/Form/MaqlResult/components/LimitSelect.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2022-2026 GoodData Corporation
+import { useCallback, useMemo } from "react";
+import classNames from "classnames";
+import { isEqual } from "lodash-es";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, Dropdown, DropdownButton, DropdownList, SingleSelectListItem, } from "@gooddata/sdk-ui-kit";
+import { useProp } from "../../../../shared/hooks/useProp.js";
+import { makeStyles } from "../../../../shared/theme/index.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        display: "flex",
+    },
+    dropdown: {
+        display: "flex",
+    },
+    filter: {
+        margin: 10,
+        gap: 10,
+        display: "flex",
+        color: theme.globals.colors.defaultText,
+        fontSize: "12px",
+    },
+    rows: {
+        display: "flex",
+        alignItems: "center",
+        marginRight: 20,
+    },
+    title: {
+        display: "flex",
+        alignItems: "center",
+        fontSize: "12px",
+        color: theme.globals.colors.defaultGreyedText,
+    },
+    header: {
+        lineHeight: "11px",
+        fontSize: "11px",
+        textTransform: "uppercase",
+        padding: 10,
+        color: theme.globals.colors.defaultStateBlank,
+        background: theme.globals.colors.dropdownHeaderBackground,
+    },
+    line: {
+        height: 1,
+        background: theme.globals.colors.defaultBorderDarker,
+        margin: "0 10px",
+    },
+    list: {},
+    buttons: {
+        display: "flex",
+        margin: "10px",
+        justifyContent: "flex-end",
+    },
+}));
+export function LimitSelect({ ranking = "top", limit = 10, opener, onApply, onCancel, }) {
+    const intl = useIntl();
+    const { cx, classes } = useStyles();
+    const { selectedLimit, selectedRanking, resetSelected, changed, setRanking, setLimit } = useSelected(limit, ranking);
+    const { onStateChangeHandler, onApplyHandler, onCancelHandler } = useCallbacks(selectedLimit, selectedRanking, resetSelected, onApply, onCancel);
+    return (_jsxs("div", { className: cx(classes.root), children: [_jsxs("label", { className: cx(classes.title), children: [_jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.result.context.displayTitle" }), ":"] }), _jsx(Dropdown, { closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, className: classes.dropdown, alignPoints: [{ align: "tr br" }], renderButton: opener, onOpenStateChanged: onStateChangeHandler, renderBody: ({ closeDropdown }) => (_jsxs("div", { className: classes.list, children: [_jsx("div", { className: classes.header, children: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.result.context.displayTitle" }) }), _jsxs("div", { className: classes.filter, children: [_jsx(SimpleSelect, { items: [
+                                        {
+                                            label: intl.formatMessage({
+                                                id: "metricComponent.editMetric.metric.result.context.displayTop",
+                                            }),
+                                            value: "top",
+                                        },
+                                        {
+                                            label: intl.formatMessage({
+                                                id: "metricComponent.editMetric.metric.result.context.displayBottom",
+                                            }),
+                                            value: "bottom",
+                                        },
+                                    ], selected: selectedRanking, onSelect: (sel) => setRanking(sel) }), _jsx(SimpleSelect, { items: [
+                                        { label: "10", value: 10 },
+                                        { label: "100", value: 100 },
+                                        { label: "1 000", value: 1000 },
+                                        { label: "10 000", value: 10000 },
+                                    ], selected: selectedLimit, onSelect: (sel) => setLimit(sel) }), _jsx("div", { className: classes.rows, children: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.result.context.displayRows" }) })] }), _jsx("div", { className: classes.filter, children: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.result.context.display.explain" }) }), _jsx("div", { className: classes.line }), _jsxs("div", { className: classes.buttons, children: [_jsx(Button, { value: intl.formatMessage({
+                                        id: "metricComponent.editMetric.metric.context.cancel",
+                                    }), onClick: () => {
+                                        onCancelHandler();
+                                        closeDropdown();
+                                    }, className: classNames("gd-button-secondary", "s-button-cancel") }), _jsx(Button, { value: intl.formatMessage({
+                                        id: "metricComponent.editMetric.metric.context.apply",
+                                    }), onClick: () => {
+                                        onApplyHandler();
+                                        closeDropdown();
+                                    }, disabled: !changed, className: classNames("gd-button-action", "s-button-apply", !changed && "disabled") })] })] })) })] }));
+}
+function SimpleSelect({ items, selected, onSelect }) {
+    const selectedItem = items.find((item) => item.value === selected);
+    return (_jsx(Dropdown, { renderBody: ({ isMobile, closeDropdown }) => (_jsx(DropdownList, { width: 150, items: items, isMobile: isMobile, renderItem: ({ item }) => (_jsx(SingleSelectListItem, { title: item.label, isSelected: item.value === selectedItem?.value, onClick: () => {
+                    if (onSelect) {
+                        onSelect(item.value);
+                    }
+                    closeDropdown();
+                } })) })), renderButton: ({ openDropdown, isOpen }) => (_jsx(DropdownButton, { value: selectedItem?.label, isOpen: isOpen, onClick: openDropdown })) }));
+}
+function useSelected(preselectedLimit, preselectedRanking) {
+    const [selectedLimit, setLimit] = useProp(preselectedLimit);
+    const [selectedRanking, setRanking] = useProp(preselectedRanking);
+    const changed = useMemo(() => !isEqual(selectedLimit, preselectedLimit) || !isEqual(selectedRanking, preselectedRanking), [preselectedLimit, preselectedRanking, selectedLimit, selectedRanking]);
+    const resetSelected = useCallback(() => {
+        setLimit(preselectedLimit);
+        setRanking(preselectedRanking);
+    }, [preselectedLimit, preselectedRanking, setLimit, setRanking]);
+    return {
+        changed,
+        selectedLimit,
+        setLimit,
+        selectedRanking,
+        setRanking,
+        resetSelected,
+    };
+}
+function useCallbacks(selectedLimit, selectedRanking, resetSelected, onApply, onCancel) {
+    const onCancelHandler = useCallback(() => {
+        resetSelected();
+        if (onCancel) {
+            onCancel();
+        }
+    }, [resetSelected, onCancel]);
+    const onApplyHandler = useCallback(() => onApply?.(selectedLimit, selectedRanking), [onApply, selectedLimit, selectedRanking]);
+    const onStateChangeHandler = useCallback((isOpen) => {
+        if (!isOpen) {
+            onCancelHandler();
+        }
+    }, [onCancelHandler]);
+    return {
+        onStateChangeHandler,
+        onApplyHandler,
+        onCancelHandler,
+    };
+}

package/esm/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.d.ts

@@ -0,0 +1,10 @@
+import { type ISeparators } from "@gooddata/sdk-model";
+interface IEditMetricContentNumberFormatProps {
+    separators?: ISeparators;
+    currencyFormatOverride?: string | null;
+    enableMetricFormatOverrides?: boolean;
+}
+declare function EditMetricContentNumberFormatComponent({ separators, currencyFormatOverride, enableMetricFormatOverrides, }: IEditMetricContentNumberFormatProps): import("react/jsx-runtime").JSX.Element;
+export declare const EditMetricContentNumberFormat: import("react").MemoExoticComponent<typeof EditMetricContentNumberFormatComponent>;
+export {};
+//# sourceMappingURL=EditMetricContentNumberFormat.d.ts.map

package/esm/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricContentNumberFormat.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA0DvD,UAAU,mCAAmC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACzC;AAOD,iBAAS,sCAAsC,CAAC,EAC5C,UAAU,EACV,sBAAsB,EACtB,2BAAmC,GACtC,EAAE,mCAAmC,2CAoErC;AAED,eAAO,MAAM,6BAA6B,oFAA+C,CAAC"}

package/esm/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.events.d.ts

@@ -0,0 +1,7 @@
+import { type IEvent } from "../../../shared/eventing/EventContext.js";
+declare function metricFormatChangedEvent(format: string): IEvent;
+export declare const events: {
+    metricFormatChangedEvent: typeof metricFormatChangedEvent;
+};
+export {};
+//# sourceMappingURL=EditMetricContentNumberFormat.events.d.ts.map

package/esm/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricContentNumberFormat.events.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAGvE,iBAAS,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAMxD;AAED,eAAO,MAAM,MAAM;;CAElB,CAAC"}

package/esm/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.events.js

@@ -0,0 +1,12 @@
+// (C) 2021-2026 GoodData Corporation
+import { EventCategories, Events } from "../../../shared/eventing/events.js";
+function metricFormatChangedEvent(format) {
+    return {
+        action: Events.metricFormatChanged,
+        category: EventCategories.metricComponent,
+        label: format,
+    };
+}
+export const events = {
+    metricFormatChangedEvent,
+};

package/esm/MetricComponent/Form/NumberFormat/EditMetricContentNumberFormat.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { memo, useCallback } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, MeasureNumberFormat, useCurrencyFormatDefaults, useMetricTypePresets, } from "@gooddata/sdk-ui-kit";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { MetricTypeField } from "../Header/MetricTypeField.js";
+import { useMetricFormatState } from "../hooks/useMetricFormatState.js";
+import { events } from "./EditMetricContentNumberFormat.events.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        display: "flex",
+        alignItems: "center",
+        gap: 20,
+    },
+    label: {
+        fontSize: "14px",
+        marginRight: "10px",
+        color: theme.globals.colors.description,
+    },
+    formatSection: {
+        display: "flex",
+        alignItems: "center",
+    },
+}));
+function ToggleButton({ isOpened, toggleDropdown, selectedPreset, isReadOnly, }) {
+    const { cx } = useStyles();
+    const iconRight = isOpened ? "gd-icon-navigateup" : "gd-icon-navigatedown";
+    return (_jsx("div", { className: cx("s-metric_number_format_button_wrapper"), onMouseUp: (e) => !isReadOnly && toggleDropdown(e), children: _jsx(Button, { disabled: isReadOnly, className: "gd-button gd-button-secondary", title: selectedPreset.name, value: selectedPreset.name, iconRight: iconRight }) }));
+}
+const DEFAULT_SEPARATORS = {
+    thousand: ",",
+    decimal: ".",
+};
+function EditMetricContentNumberFormatComponent({ separators, currencyFormatOverride, enableMetricFormatOverrides = false, }) {
+    const { classes } = useStyles();
+    const intl = useIntl();
+    // Get metric type from form state
+    const { metricType } = useMetricFormatState({
+        enableMetricFormatOverrides,
+        currencyFormatOverride,
+        presets: [],
+    });
+    // Get presets and templates based on metric type using SDK hook
+    const { presets, templates } = useMetricTypePresets({
+        metricType: enableMetricFormatOverrides ? metricType : undefined,
+        currencyFormatOverride,
+        formatMessage: (descriptor) => intl.formatMessage(descriptor),
+    });
+    // Get format state (normalized format, bootstrap config, etc.)
+    const { normalizedFormat, isFormatMissing, inheritPreset, isReadOnly, setFormat, currencyFormatDefaultsConfig, } = useMetricFormatState({
+        enableMetricFormatOverrides,
+        currencyFormatOverride,
+        presets,
+    });
+    // Handle currency format defaults (auto-bootstrapping)
+    useCurrencyFormatDefaults({
+        ...currencyFormatDefaultsConfig,
+        onFormatChange: setFormat,
+    });
+    const onPresetChange = usePresetChange(presets, setFormat);
+    const MyToggleButton = useCallback((props) => (_jsx(ToggleButton, { ...props, isReadOnly: isReadOnly })), [isReadOnly]);
+    return (_jsxs("div", { className: classes.root, children: [enableMetricFormatOverrides ? _jsx(MetricTypeField, {}) : null, _jsxs("div", { className: classes.formatSection, children: [_jsx("div", { className: classes.label, children: _jsx(FormattedMessage, { id: "metricComponent.numberFormat.label" }) }), _jsx(MeasureNumberFormat, { locale: intl.locale, toggleButton: MyToggleButton, presets: presets, separators: separators ?? DEFAULT_SEPARATORS, templates: templates, selectedFormat: inheritPreset && isFormatMissing ? inheritPreset.format : (normalizedFormat ?? null), setFormat: onPresetChange })] })] }));
+}
+export const EditMetricContentNumberFormat = memo(EditMetricContentNumberFormatComponent);
+/**
+ * Hook that handles preset selection and tracks events.
+ */
+function usePresetChange(presets, setValue) {
+    const { metricFormatChangedEvent } = useEvents(events);
+    return useCallback((format) => {
+        const preset = presets.find((p) => p.format === format || (format === null && p.localIdentifier === "inherit"));
+        if (preset?.localIdentifier === "inherit") {
+            setValue(null);
+            metricFormatChangedEvent("inherit");
+        }
+        else {
+            setValue(format);
+            metricFormatChangedEvent(preset ? preset.localIdentifier : "custom");
+        }
+    }, [metricFormatChangedEvent, presets, setValue]);
+}

package/esm/MetricComponent/Form/OtherMetrics/OtherMetricsContext.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type IMeasureMetadataObject } from "@gooddata/sdk-model";
+export interface IOtherMetrics {
+    otherMetrics: IMeasureMetadataObject[];
+    loading: boolean;
+}
+export declare const OtherMetricsContext: import("react").Context<IOtherMetrics>;
+export declare function OtherMetricsProvider({ defaultId, defaultPrefix, children, }: {
+    defaultId: string;
+    defaultPrefix: string;
+    children: ReactNode;
+}): ReactElement;
+//# sourceMappingURL=OtherMetricsContext.d.ts.map

package/esm/MetricComponent/Form/OtherMetrics/OtherMetricsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtherMetricsContext.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/OtherMetrics/OtherMetricsContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAKlE,MAAM,WAAW,aAAa;IAC1B,YAAY,EAAE,sBAAsB,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,wCAG9B,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,EACjC,SAAS,EACT,aAAa,EACb,QAAQ,GACX,EAAE;IACC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,YAAY,CAIf"}