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

package/esm/MetricComponent/Form/Header/Usage/Usage.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../../shared/theme/index.js";
+import { useToggleWithCollapse } from "../../hooks/useToggleWithCollapse.js";
+import { UsagesOverlay } from "./UsagesOverlay.js";
+const useStyles = makeStyles()((theme) => {
+    return {
+        root: {
+            marginTop: 2,
+            whiteSpace: "nowrap",
+        },
+        usedIn: {
+            marginLeft: 2,
+            color: theme.globals.colors.defaultStateBlank,
+        },
+        link: {
+            marginBottom: 2,
+            textDecoration: "underline",
+            color: theme.globals.colors.link,
+            "&:focus": {
+                color: theme.globals.colors.link,
+            },
+        },
+    };
+});
+export function Usage({ data, onOpenUsage, insightOpenType, metricOpenType, activeInsight, onInsightClick, onMetricClick, }) {
+    const { insights = [], measures = [] } = data;
+    const { classes, cx } = useStyles();
+    const [metricsOpened, toggleMetrics] = useToggleWithCollapse(measures.length);
+    const [insightsOpened, toggleInsights] = useToggleWithCollapse(insights.length);
+    const [isOpenedUsages, setOpen] = useState(false);
+    const intl = useIntl();
+    const toggleOpenUsagesOverlay = () => {
+        setOpen(!isOpenedUsages);
+        if (onOpenUsage) {
+            onOpenUsage();
+        }
+    };
+    const toggleSectionUsages = (type) => {
+        switch (type) {
+            case "insights":
+                toggleInsights();
+                break;
+            case "metrics":
+                toggleMetrics();
+                break;
+            default:
+                break;
+        }
+    };
+    if (measures.length == 0 && insights.length == 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: cx(classes.root, "s-objectUsage"), children: [_jsx("span", { className: classes.usedIn, children: _jsx(FormattedMessage, { id: "metricComponent.objectUsage.usedIn" }) }), _jsx(Button, { className: cx(classes.link, "gd-button-link"), tagName: "a", value: createTitle(intl, measures.length, insights.length), onClick: toggleOpenUsagesOverlay }), isOpenedUsages && (_jsx(UsagesOverlay, { data: data, insightsOpened: insightsOpened, metricsOpened: metricsOpened, onToggle: toggleSectionUsages, onClose: toggleOpenUsagesOverlay, activeInsight: activeInsight, insightOpenType: insightOpenType, onInsightClick: onInsightClick, metricOpenType: metricOpenType, onMetricClick: onMetricClick }))] }));
+}
+function createTitle(intl, metricsCount, insightsCount) {
+    const titleParts = [];
+    if (metricsCount > 0) {
+        titleParts.push(intl.formatMessage({ id: "metricComponent.objectUsage.metricsCount" }, { count: metricsCount }));
+    }
+    if (insightsCount > 0) {
+        titleParts.push(intl.formatMessage({ id: "metricComponent.objectUsage.insightsCount" }, { count: insightsCount }));
+    }
+    return titleParts.join(", ");
+}

package/esm/MetricComponent/Form/Header/Usage/UsageItems.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from "react";
+import { type IInsight, type IMetadataObject } from "@gooddata/sdk-model";
+interface IUsageItemsProps {
+    active?: IInsight | IMetadataObject;
+    objects?: IInsight[] | IMetadataObject[];
+    openType: "external" | "internal";
+    onObjectClick?: (object: IInsight | IMetadataObject) => void;
+}
+export declare function UsageItems({ active, objects, onObjectClick, openType, }: PropsWithChildren<IUsageItemsProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UsageItems.d.ts.map

package/esm/MetricComponent/Form/Header/Usage/UsageItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageItems.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/Header/Usage/UsageItems.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAE5D,OAAO,EACH,KAAK,QAAQ,EACb,KAAK,eAAe,EAIvB,MAAM,qBAAqB,CAAC;AA6C7B,UAAU,gBAAgB;IACtB,MAAM,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACpC,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;IACzC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,eAAe,KAAK,IAAI,CAAC;CAChE;AASD,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,OAAY,EACZ,aAAa,EACb,QAAQ,GACX,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,2CAoBrC"}

package/esm/MetricComponent/Form/Header/Usage/UsageItems.js

@@ -0,0 +1,88 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useCallback } from "react";
+import { areObjRefsEqual, isInsight, isMeasureMetadataObject, } from "@gooddata/sdk-model";
+import { IconExternalLink, IconInsight, Item } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../../shared/theme/index.js";
+const useStyles = makeStyles()((theme) => {
+    return {
+        item: {
+            padding: "4px !important",
+            cursor: "initial",
+            "&:hover": {
+                svg: {
+                    display: "block",
+                },
+            },
+        },
+        active: {
+            p: {
+                fontWeight: "bold",
+                color: theme.globals.colors.active,
+                "svg path": {
+                    fill: theme.globals.colors.active,
+                },
+                "&:hover": {
+                    color: theme.globals.colors.active,
+                },
+            },
+        },
+        hoverUnderline: {
+            cursor: "pointer",
+            "&:hover": {
+                textDecoration: "underline",
+            },
+        },
+        icon: {
+            display: "none",
+            marginLeft: 8,
+        },
+    };
+});
+export function UsageItems({ active, objects = [], onObjectClick, openType, }) {
+    const getClassNames = useClassNames(active, onObjectClick);
+    return (_jsx(_Fragment, { children: objects.map((object, i) => {
+            const [className, active] = getClassNames(object);
+            return (_jsx(Item, { className: className, onClick: () => !active && onObjectClick?.(object), children: _jsx(UsageItem, { active: active, object: object, openType: openType, onObjectClick: onObjectClick }) }, i));
+        }) }));
+}
+function UsageItem({ active, object, onObjectClick, openType }) {
+    return (_jsxs("p", { children: [_jsx(IconInsight, {}), _jsx(UsageTitle, { object: object }), _jsx(UsageExternalIcon, { openType: openType, onObjectClick: onObjectClick, active: active })] }));
+}
+function UsageTitle({ object }) {
+    if (isInsight(object)) {
+        return _jsx(_Fragment, { children: object.insight.title });
+    }
+    if (isMeasureMetadataObject(object)) {
+        return _jsx(_Fragment, { children: object.title });
+    }
+    throw new Error(`Unsupported object type.`);
+}
+function UsageExternalIcon({ onObjectClick, openType, active, }) {
+    const { classes } = useStyles();
+    if (onObjectClick && openType === "external" && !active) {
+        return _jsx(IconExternalLink, { width: 12, height: 12, color: "#464e56", className: classes.icon });
+    }
+    return null;
+}
+function useClassNames(active, onObjectClick) {
+    const { classes, cx } = useStyles();
+    return useCallback((object) => {
+        const isInsightObject = isInsight(object);
+        const isMetricObject = isMeasureMetadataObject(object);
+        const isActiveObject = isActive(object, active);
+        return [
+            cx(isInsightObject && "s-usage-insight-item", isMetricObject && "s-usage-metric-item", classes.item, isActiveObject && classes.active, onObjectClick && !isActiveObject && classes.hoverUnderline),
+            isActiveObject,
+        ];
+    }, [active, cx, classes.item, classes.active, classes.hoverUnderline, onObjectClick]);
+}
+function isActive(object, active) {
+    if (isInsight(object) && isInsight(active)) {
+        return areObjRefsEqual(object.insight, active.insight);
+    }
+    if (isMeasureMetadataObject(object) && isMeasureMetadataObject(active)) {
+        return areObjRefsEqual(object, active);
+    }
+    return false;
+}

package/esm/MetricComponent/Form/Header/Usage/UsagesOverlay.d.ts

@@ -0,0 +1,17 @@
+import { type IMeasureReferencing } from "@gooddata/sdk-backend-spi";
+import { type IInsight, type IMetadataObject } from "@gooddata/sdk-model";
+type UsagesOverlayProps = {
+    data: IMeasureReferencing;
+    metricsOpened: boolean;
+    insightsOpened: boolean;
+    onToggle: (type: "metrics" | "insights") => void;
+    onClose: () => void;
+    activeInsight?: IInsight;
+    insightOpenType?: "external" | "internal";
+    onInsightClick?: (object: IInsight) => void;
+    metricOpenType?: "external" | "internal";
+    onMetricClick?: (object: IMetadataObject) => void;
+};
+export declare function UsagesOverlay({ data, metricsOpened, insightsOpened, onToggle, onClose, activeInsight, insightOpenType, onInsightClick, metricOpenType, onMetricClick, }: UsagesOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UsagesOverlay.d.ts.map

package/esm/MetricComponent/Form/Header/Usage/UsagesOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsagesOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/Header/Usage/UsagesOverlay.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAa,MAAM,qBAAqB,CAAC;AA6GrF,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,UAAU,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,eAAe,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,OAAO,EACP,aAAa,EACb,eAA4B,EAC5B,cAAc,EACd,cAA2B,EAC3B,aAAa,GAChB,EAAE,kBAAkB,2CA2HpB"}

package/esm/MetricComponent/Form/Header/Usage/UsagesOverlay.js

@@ -0,0 +1,119 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useCallback } from "react";
+import { FormattedMessage } from "react-intl";
+import { isInsight } from "@gooddata/sdk-model";
+import { Bubble, BubbleHoverTrigger, Header, IconQuestionMark, Item, ItemsWrapper, Overlay, } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../../shared/theme/index.js";
+import { UsageItems } from "./UsageItems.js";
+const useStyles = makeStyles()((theme, _params, classes) => {
+    return {
+        root: {
+            marginTop: 2,
+            whiteSpace: "nowrap",
+        },
+        overlay: {
+            ".gd-menu-wrapper.gd-menu-wrapper-small-spacing": {
+                width: 300,
+                marginLeft: 4,
+                padding: 0,
+                border: "1px solid #c9d5e0",
+            },
+            ".gd-list-item.gd-list-item-header, .gd-list-item.gd-list-item-header:hover": {
+                borderRadius: "3px 3px 0 0",
+                padding: "10px 12px !important",
+                background: "var(--gd-palette-complementary-2, #ebeff4) !important",
+                fontWeight: "800 !important",
+                fontSize: "11px !important",
+                display: "flex",
+                alignItems: "center",
+                [`.${classes.trigger}`]: {
+                    flex: "0 0 auto",
+                    marginLeft: 4,
+                    marginBottom: -4,
+                },
+            },
+        },
+        overlayList: {
+            padding: "10px 10px 10px 0",
+        },
+        overlayItem: {
+            maxHeight: 355,
+            overflowY: "auto",
+            padding: 0,
+            marginBottom: 15,
+            marginLeft: 25,
+            ".gd-icon-left": {
+                "&:before": {
+                    marginLeft: 4,
+                    color: "#b2bfcb",
+                },
+                p: {
+                    marginLeft: 8,
+                    fontSize: 13,
+                    fontWeight: 600,
+                },
+            },
+            p: {
+                paddingTop: 0,
+                paddingBottom: 0,
+                marginTop: 0,
+                marginBottom: 0,
+                marginLeft: 0,
+                flex: "1 0 auto",
+                display: "flex",
+                alignItems: "center",
+                svg: {
+                    marginRight: 8,
+                },
+            },
+            "&:last-child": {
+                marginBottom: 0,
+            },
+        },
+        overlayItemHeader: {
+            marginBottom: 2,
+            marginLeft: 0,
+        },
+        item: {
+            p: {
+                marginLeft: 0,
+            },
+        },
+        trigger: {},
+        spacer: {
+            flex: "1 0 auto",
+        },
+        noHover: {
+            cursor: "pointer",
+            "&:hover": {
+                color: theme.globals.colors.defaultText,
+                background: theme.globals.colors.defaultWhite,
+            },
+        },
+    };
+});
+export function UsagesOverlay({ data, metricsOpened, insightsOpened, onToggle, onClose, activeInsight, insightOpenType = "external", onInsightClick, metricOpenType = "external", onMetricClick, }) {
+    const { insights = [], measures = [] } = data;
+    const metricsCount = measures.length;
+    const insightsCount = insights.length;
+    const { classes, cx } = useStyles();
+    const headerClasses = ["gd-icon-left", "gd-list-item", "gd-menu-item"];
+    const onInsightClickHandler = useCallback((object) => {
+        if (isInsight(object) && onInsightClick) {
+            onInsightClick(object);
+            if (onClose) {
+                onClose();
+            }
+        }
+    }, [onInsightClick, onClose]);
+    const onMetricClickHandler = useCallback((object) => {
+        if (!isInsight(object) && onMetricClick) {
+            onMetricClick(object);
+            if (onClose) {
+                onClose();
+            }
+        }
+    }, [onMetricClick, onClose]);
+    return (_jsx(Overlay, { alignTo: `.${classes.root}`, alignPoints: [{ align: "bl tl" }], closeOnMouseDrag: true, closeOnOutsideClick: true, onClose: onClose, className: classes.overlay, children: _jsxs(ItemsWrapper, { smallItemsSpacing: true, children: [_jsxs(Header, { children: [_jsx(FormattedMessage, { id: "metricComponent.objectUsage.usedIn.title" }), _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, eventsOnBubble: true, className: classes.trigger, children: [_jsx(IconQuestionMark, { color: "#94a1ad" }), _jsx(Bubble, { className: "bubble-dark", alignPoints: [{ align: "tc bl", offset: { x: 0, y: 0 } }], children: _jsx(FormattedMessage, { id: "metricComponent.objectUsage.usedIn.titleTooltip" }) })] }), _jsx("div", { className: classes.spacer })] }), _jsxs("div", { className: classes.overlayList, children: [metricsCount > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: cx(classes.overlayItem, classes.overlayItemHeader), children: _jsx(Item, { className: cx(...headerClasses, classes.noHover, metricsOpened ? "gd-icon-navigatedown" : "gd-icon-navigateright"), onClick: () => onToggle("metrics"), children: _jsxs("p", { children: [_jsx(FormattedMessage, { id: "metricComponent.objectUsage.metrics" }), " (", metricsCount, ")"] }) }) }), metricsOpened && (_jsx("div", { className: classes.overlayItem, children: _jsx(UsageItems, { objects: measures, onObjectClick: onMetricClick && onMetricClickHandler, openType: metricOpenType }) }))] })), insightsCount > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: cx(classes.overlayItem, classes.overlayItemHeader), children: _jsx(Item, { className: cx(...headerClasses, classes.noHover, insightsOpened ? "gd-icon-navigatedown" : "gd-icon-navigateright"), onClick: () => onToggle("insights"), children: _jsxs("p", { children: [_jsx(FormattedMessage, { id: "metricComponent.objectUsage.insights" }), " (", insightsCount, ")"] }) }) }), insightsOpened && (_jsx("div", { className: classes.overlayItem, children: _jsx(UsageItems, { active: activeInsight, objects: insights, onObjectClick: onInsightClick && onInsightClickHandler, openType: insightOpenType }) }))] }))] })] }) }, classes.root));
+}

package/esm/MetricComponent/Form/Header/share/MetricAccessChip.d.ts

@@ -0,0 +1,9 @@
+import type { ObjectShareLevel } from "@gooddata/sdk-ui-ext";
+export interface IMetricAccessChipProps {
+    level: ObjectShareLevel | undefined;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    onClick: () => void;
+}
+export declare function MetricAccessChip({ level, isLoading, isOpen, onClick }: IMetricAccessChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricAccessChip.d.ts.map

package/esm/MetricComponent/Form/Header/share/MetricAccessChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricAccessChip.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/Header/share/MetricAccessChip.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA2B7D,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAwC7F"}

package/esm/MetricComponent/Form/Header/share/MetricAccessChip.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId } from "react";
+import { defineMessages, useIntl } from "react-intl";
+import { UiButton, UiSkeleton, UiTooltip } from "@gooddata/sdk-ui-kit";
+const messages = defineMessages({
+    privateLabel: { id: "metricComponent.editMetric.access.private" },
+    privateTooltip: { id: "metricComponent.editMetric.access.private.tooltip" },
+    sharedLabel: { id: "metricComponent.editMetric.access.shared" },
+    sharedTooltip: { id: "metricComponent.editMetric.access.shared.tooltip" },
+    workspaceLabel: { id: "metricComponent.editMetric.access.workspace" },
+    workspaceTooltip: { id: "metricComponent.editMetric.access.workspace.tooltip" },
+    ariaLabel: { id: "metricComponent.editMetric.access.ariaLabel" },
+    fallbackLabel: { id: "metricComponent.editMetric.share" },
+});
+const LEVELS = {
+    PRIVATE: { icon: "invisible", label: messages.privateLabel, tooltip: messages.privateTooltip },
+    SHARED: { icon: "users", label: messages.sharedLabel, tooltip: messages.sharedTooltip },
+    WORKSPACE: {
+        icon: "building",
+        label: messages.workspaceLabel,
+        tooltip: messages.workspaceTooltip,
+    },
+};
+export function MetricAccessChip({ level, isLoading, isOpen, onClick }) {
+    const intl = useIntl();
+    const tooltipId = useId();
+    const variant = level ? LEVELS[level] : undefined;
+    const text = intl.formatMessage(variant?.label ?? messages.fallbackLabel);
+    const anchor = isLoading ? (_jsx(UiSkeleton, { inline: true, itemWidth: 70, itemHeight: 16 })) : (_jsx(UiButton
+    // Inside the editor's <form>, so without this the button would submit it.
+    , { 
+        // Inside the editor's <form>, so without this the button would submit it.
+        type: "button", variant: "tertiary", iconBefore: variant?.icon, iconBeforeSize: 14, label: text, isSelected: isOpen, onClick: onClick, dataTestId: "s-metric-share-button", accessibilityConfig: {
+            ariaLabel: variant ? intl.formatMessage(messages.ariaLabel, { level: text }) : undefined,
+            ariaDescribedBy: variant ? tooltipId : undefined,
+        } }));
+    return (_jsx(UiTooltip, { id: tooltipId, disabled: !variant || isLoading, arrowPlacement: "top", offset: 10, triggerBy: ["hover", "focus"], hoverOpenDelay: 300, inlineAnchor: true, content: variant ? intl.formatMessage(variant.tooltip) : "", anchor: anchor }));
+}

package/esm/MetricComponent/Form/Header/share/MetricShare.d.ts

@@ -0,0 +1,17 @@
+import { type IObjectShareDraft } from "@gooddata/sdk-ui-ext";
+import { type IMeasureDef } from "../../../metric/metricHelpers.js";
+export interface IMetricShareProps {
+    metric: IMeasureDef;
+    /** Whether this user may share this metric. Already accounts for the feature flag. */
+    canShare?: boolean;
+    /** Access drafted so far, kept by the tab. */
+    draftAccess?: IObjectShareDraft;
+    /** Required only to share a metric that does not exist yet; a saved one needs no draft. */
+    onDraftAccessChange?: (draftAccess: IObjectShareDraft | undefined) => void;
+}
+/**
+ * The Share control and its dialog. A metric being created has no ref, so the dialog runs in
+ * draft mode and the tab keeps the draft; a saved metric writes directly.
+ */
+export declare function MetricShare({ metric, canShare, draftAccess, onDraftAccessChange }: IMetricShareProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MetricShare.d.ts.map

package/esm/MetricComponent/Form/Header/share/MetricShare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricShare.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/Header/share/MetricShare.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,iBAAiB,EAA2C,MAAM,sBAAsB,CAAC;AAGvG,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAIpE,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,2FAA2F;IAC3F,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9E;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,iBAAiB,kDAiDpG"}

package/esm/MetricComponent/Form/Header/share/MetricShare.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { isMeasureMetadataObject } from "@gooddata/sdk-model";
+import { ObjectShareDialog, useObjectAccessLevel } from "@gooddata/sdk-ui-ext";
+import { useFeaturesAndSettings } from "../../../FeaturesAndSettings/index.js";
+import { MetricAccessChip } from "./MetricAccessChip.js";
+/**
+ * The Share control and its dialog. A metric being created has no ref, so the dialog runs in
+ * draft mode and the tab keeps the draft; a saved metric writes directly.
+ */
+export function MetricShare({ metric, canShare, draftAccess, onDraftAccessChange }) {
+    const intl = useIntl();
+    const { defaultMetricVisibility } = useFeaturesAndSettings();
+    const [isOpen, setIsOpen] = useState(false);
+    const saved = isMeasureMetadataObject(metric) ? metric : undefined;
+    // The metric's own ref: the form splits the workspace prefix out of `id`, so a ref
+    // rebuilt from `id` can address another object.
+    const target = saved ? { kind: "measure", ref: saved.ref } : undefined;
+    // An unsaved metric can only be shared by drafting, and a draft needs somewhere to live.
+    // Decided before the read, so nothing is fetched for a chip that will not be rendered.
+    const isShareable = Boolean(canShare) && (Boolean(saved) || Boolean(onDraftAccessChange));
+    const { level, isLoading, onSummaryChange } = useObjectAccessLevel({
+        target,
+        enabled: isShareable,
+        draft: draftAccess,
+        initialDraftGeneralAccess: defaultMetricVisibility,
+    });
+    if (!isShareable) {
+        return null;
+    }
+    // Same placeholder the title field shows, for an unnamed metric.
+    const title = metric.title?.trim() || intl.formatMessage({ id: "metricComponent.editMetricForm.namePlaceholder" });
+    return (_jsxs(_Fragment, { children: [_jsx(MetricAccessChip, { level: level, isLoading: isLoading, isOpen: isOpen, onClick: () => setIsOpen(true) }), isOpen ? (_jsx(ObjectShareDialog, { isOpen: true, onClose: () => setIsOpen(false), objectTitle: title, target: target, draft: saved === undefined, initialDraft: draftAccess, onDraftChange: onDraftAccessChange, onSummaryChange: onSummaryChange, initialDraftGeneralAccess: defaultMetricVisibility })) : null] }));
+}

package/esm/MetricComponent/Form/Header/share/useApplyMetricAccess.d.ts

@@ -0,0 +1,10 @@
+import { type IMeasureMetadataObject } from "@gooddata/sdk-model";
+import { type IObjectShareDraft } from "@gooddata/sdk-ui-ext";
+/** Posts a drafted access for a metric that now exists, reporting a refusal. Never rejects. */
+export declare function useWriteMetricAccess(): (saved: IMeasureMetadataObject, draft: IObjectShareDraft) => Promise<void>;
+/**
+ * The editor's own save path. The draft is read when the write happens, not when this hook
+ * ran — a save can fire from a handler built before the user's last change.
+ */
+export declare function useApplyMetricAccess(draftAccess: IObjectShareDraft | undefined, onApplied: () => void): (saved: IMeasureMetadataObject) => Promise<void>;
+//# sourceMappingURL=useApplyMetricAccess.d.ts.map

package/esm/MetricComponent/Form/Header/share/useApplyMetricAccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useApplyMetricAccess.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/Header/share/useApplyMetricAccess.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,KAAK,iBAAiB,EAA6B,MAAM,sBAAsB,CAAC;AAQzF,+FAA+F;AAC/F,wBAAgB,oBAAoB,IAAI,CACpC,KAAK,EAAE,sBAAsB,EAC7B,KAAK,EAAE,iBAAiB,KACvB,OAAO,CAAC,IAAI,CAAC,CAcjB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAChC,WAAW,EAAE,iBAAiB,GAAG,SAAS,EAC1C,SAAS,EAAE,MAAM,IAAI,GACtB,CAAC,KAAK,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAkBlD"}

package/esm/MetricComponent/Form/Header/share/useApplyMetricAccess.js

@@ -0,0 +1,39 @@
+// (C) 2026 GoodData Corporation
+import { useCallback, useRef } from "react";
+import { defineMessages } from "react-intl";
+import { useApplyObjectPermissions } from "@gooddata/sdk-ui-ext";
+import { useToastMessage } from "@gooddata/sdk-ui-kit";
+// `defineMessages` rather than an inline `{ id }`: the locale checker only reads the former.
+const messages = defineMessages({
+    shareFailed: { id: "metricComponent.editMetric.shareFailed" },
+});
+/** Posts a drafted access for a metric that now exists, reporting a refusal. Never rejects. */
+export function useWriteMetricAccess() {
+    const applyPermissions = useApplyObjectPermissions();
+    const { addError } = useToastMessage();
+    return useCallback(async (saved, draft) => {
+        // The metric's own ref, never one rebuilt from `id` — the form splits its prefix out.
+        const ok = await applyPermissions({ kind: "measure", ref: saved.ref }, draft);
+        if (!ok) {
+            addError(messages.shareFailed);
+        }
+    }, [applyPermissions, addError]);
+}
+/**
+ * The editor's own save path. The draft is read when the write happens, not when this hook
+ * ran — a save can fire from a handler built before the user's last change.
+ */
+export function useApplyMetricAccess(draftAccess, onApplied) {
+    const writeAccess = useWriteMetricAccess();
+    const latest = useRef(draftAccess);
+    latest.current = draftAccess;
+    return useCallback(async (saved) => {
+        const draft = latest.current;
+        if (!draft) {
+            return;
+        }
+        // Dropped whatever the outcome, so the next save cannot send it again.
+        onApplied();
+        await writeAccess(saved, draft);
+    }, [writeAccess, onApplied]);
+}

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorEditor.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from "react";
+import { type IMetadataObject } from "@gooddata/sdk-model";
+import { type IMaqlEditorApi } from "../../../MaqlEditor/maql/MaqlEditor.js";
+export interface IMaqlEditorEditorProps {
+    ref?: Ref<IMaqlEditorApi | null>;
+    titles?: boolean;
+    onMetricOpen?: (object: IMetadataObject) => void;
+    onRun?: () => void;
+}
+export declare const MaqlEditorEditor: import("react").ForwardRefExoticComponent<Omit<IMaqlEditorEditorProps, "ref"> & import("react").RefAttributes<IMaqlEditorApi>>;
+//# sourceMappingURL=MaqlEditorEditor.d.ts.map

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlEditorEditor.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlEditorField/MaqlEditorEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,GAAG,EAOX,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAgB3D,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,wCAAwC,CAAC;AAgCzF,MAAM,WAAW,sBAAsB;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyCD,eAAO,MAAM,gBAAgB,gIAmD3B,CAAC"}

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorEditor.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState, } from "react";
+import { isEmpty } from "lodash-es";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { IconArrowDown, IconArrowUp, IconAttribute, IconClose, IconDataset, IconFact, IconFunction, IconKeyword, IconLabel, IconMetric, IconQuestionMark, } from "@gooddata/sdk-ui-kit";
+import { MaqlEditor } from "../../../MaqlEditor/maql/MaqlEditor.js";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { FormField } from "../data.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+import { useMetricFormStatus } from "../hooks/useMetricFormStatus.js";
+import { Placeholder } from "../MaqlEditorUtils/Placeholder.js";
+import { getMaqlValue, useMaqlField } from "../maqlFieldFunctions.js";
+import { events } from "./MaqlEditorField.events.js";
+import { useDocumentationLinkContextMenuProcessing, useDocumentationLinkProcessing, } from "./suggestionDetailsFunctions.js";
+const useStyles = makeStyles()(() => ({
+    root: {
+        flex: "1 1 auto",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+}));
+function serializeReactElementToSvg(element) {
+    // Create a temporary container element
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    // Render the React element synchronously using flushSync
+    flushSync(() => {
+        root.render(element);
+    });
+    // Get the rendered HTML
+    const html = container.innerHTML;
+    // Clean up
+    root.unmount();
+    return {
+        base64: btoa(html),
+        width: element.props.width,
+        height: element.props.height,
+    };
+}
+const icons = Object.fromEntries(Object.entries({
+    fact: _jsx(IconFact, { width: 18, height: 16 }),
+    metric: _jsx(IconMetric, { width: 18, height: 14 }),
+    dataset: _jsx(IconDataset, { width: 18, height: 14 }),
+    label: _jsx(IconLabel, { width: 18, height: 16 }),
+    attribute: _jsx(IconAttribute, { width: 18, height: 7 }),
+    keyword: _jsx(IconKeyword, { width: 18, height: 16 }),
+    function: _jsx(IconFunction, { width: 18, height: 16 }),
+    detail: _jsx(IconQuestionMark, { color: "#94a1ad", width: 16, height: 16 }),
+    prev: _jsx(IconArrowUp, { width: 10, height: 13 }),
+    next: _jsx(IconArrowDown, { width: 10, height: 14 }),
+    close: _jsx(IconClose, { width: 12, height: 12 }),
+}).map(([key, component]) => [key, serializeReactElementToSvg(component)]));
+export const MaqlEditorEditor = forwardRef(function MaqlEditorEditor({ onMetricOpen, onRun, titles }, ref) {
+    const { classes, cx } = useStyles();
+    const { value, valid, element, isReadOnly, onBlur, onChange } = useMetricFormField(FormField.expression);
+    const [autofocus, setAutofocus] = useState(false);
+    const [autohints, setAutoHints] = useAutohint(!valid);
+    const isMaqlEditorEmpty = isEmpty(getMaqlValue(value));
+    const [onChanged, onValidation] = useMaqlField(value, onChange);
+    const onBlurHandler = useBlur(value, onBlur, setAutoHints, setAutofocus);
+    const onMetricOpenHandler = useCallback(
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+    (_, object) => onMetricOpen?.(object), [onMetricOpen]);
+    const onEditorMount = useEditorMount();
+    const onEditorUpdate = useEditorUpdate(onRun);
+    useImperativeHandle(element, () => ({
+        focus: () => setAutofocus(true),
+    }));
+    return (_jsxs("div", { className: cx(classes.root), children: [_jsx(Placeholder, { visible: isMaqlEditorEmpty, readonly: isReadOnly, selector: ".monaco-editor .view-lines .view-line" }), _jsx(MaqlEditor, { autohint: autohints, decorators: titles, autofocus: autofocus, readonly: isReadOnly, defaultValue: getMaqlValue(value), icons: icons, onBlur: onBlurHandler, onValid: onValidation, onChange: onChanged, onEditorMount: onEditorMount, onEditorUpdate: onEditorUpdate, onMetricOpen: onMetricOpenHandler, ref: ref })] }));
+});
+function useTrackMonacoCommands() {
+    const { editorToggleSuggestionDetailsEvent } = useEvents(events);
+    return useCallback(({ commandId }) => {
+        if (commandId === "toggleSuggestionDetails") {
+            editorToggleSuggestionDetailsEvent();
+        }
+    }, [editorToggleSuggestionDetailsEvent]);
+}
+function useBlur(value, onBlur, setAutoHints, setAutofocus) {
+    const { metricDefinitionCreatedEvent } = useEvents(events);
+    return useCallback(() => {
+        if (getMaqlValue(value).length > 0) {
+            metricDefinitionCreatedEvent();
+        }
+        onBlur();
+        setAutoHints(false);
+        setAutofocus(false);
+    }, [value, onBlur, setAutoHints, setAutofocus, metricDefinitionCreatedEvent]);
+}
+function useEditorMount() {
+    const processDocumentationClick = useDocumentationLinkProcessing();
+    const processDocumentationContextMenu = useDocumentationLinkContextMenuProcessing();
+    const trackMonacoCommands = useTrackMonacoCommands();
+    return useCallback((editor) => {
+        const disposable = [];
+        // @ts-expect-error command service is not in public API
+        disposable.push(editor._commandService.onDidExecuteCommand(trackMonacoCommands));
+        document.body.addEventListener("click", processDocumentationClick);
+        document.body.addEventListener("contextmenu", processDocumentationContextMenu);
+        return () => {
+            document.body.removeEventListener("click", processDocumentationClick);
+            document.body.removeEventListener("contextmenu", processDocumentationContextMenu);
+            disposable.forEach((dispose) => dispose.dispose());
+        };
+    }, [processDocumentationClick, processDocumentationContextMenu, trackMonacoCommands]);
+}
+function useEditorUpdate(onRun) {
+    return useCallback((editor, monaco) => {
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyR, () => onRun?.());
+    }, [onRun]);
+}
+function useAutohint(invalid) {
+    const [autohints, setAutoHints] = useState(false);
+    const { submitCount } = useMetricFormStatus();
+    useEffect(() => {
+        if (submitCount > 0) {
+            setAutoHints(invalid);
+        }
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [submitCount]);
+    return [autohints, setAutoHints];
+}

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorField.d.ts

@@ -0,0 +1,9 @@
+import { type IMetadataObject } from "@gooddata/sdk-model";
+export interface IMaqlEditorFieldProps {
+    isSQL: boolean;
+    onSQL?: () => void;
+    onRun?: () => void;
+    onMetricOpen?: (object: IMetadataObject) => void;
+}
+export declare function MaqlEditorField({ isSQL, onSQL, onRun, onMetricOpen }: IMaqlEditorFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaqlEditorField.d.ts.map

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlEditorField.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlEditorField/MaqlEditorField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAgC3D,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACpD;AAQD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,qBAAqB,2CAsD3F"}