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

package/esm/MetricComponent/Form/Footer/EditMetricContentFooter.d.ts

@@ -0,0 +1,9 @@
+export interface IEditMetricContentFooterProps {
+    onCancel: () => void;
+    onDelete: () => void;
+    isWhiteLabeled?: boolean;
+}
+declare function EditMetricContentFooterComponent({ onDelete, onCancel, isWhiteLabeled, }: IEditMetricContentFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare const EditMetricContentFooter: import("react").MemoExoticComponent<typeof EditMetricContentFooterComponent>;
+export {};
+//# sourceMappingURL=EditMetricContentFooter.d.ts.map

package/esm/MetricComponent/Form/Footer/EditMetricContentFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricContentFooter.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Footer/EditMetricContentFooter.tsx"],"names":[],"mappings":"AA+DA,MAAM,WAAW,6BAA6B;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,iBAAS,gCAAgC,CAAC,EACtC,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,6BAA6B,2CAoF/B;AAED,eAAO,MAAM,uBAAuB,8EAAyC,CAAC"}

package/esm/MetricComponent/Form/Footer/EditMetricContentFooter.events.d.ts

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

package/esm/MetricComponent/Form/Footer/EditMetricContentFooter.events.d.ts.map

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

package/esm/MetricComponent/Form/Footer/EditMetricContentFooter.events.js

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

package/esm/MetricComponent/Form/Footer/EditMetricContentFooter.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { memo } from "react";
+import classNames from "classnames";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, IconQuestionMark, LoadingSpinner } from "@gooddata/sdk-ui-kit";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { FormMode } from "../../../shared/Form/data.js";
+import { useFormHandlers } from "../../../shared/Form/useFormHandlers.js";
+import { howToCreateMetricLink } from "../../../shared/links.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { useMetricFormStatus } from "../hooks/useMetricFormStatus.js";
+import { events } from "./EditMetricContentFooter.events.js";
+import { EditMetricSaveMessage } from "./EditMetricSaveMessage.js";
+const useStyles = makeStyles()((theme) => {
+    return {
+        root: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: 20,
+        },
+        helpText: {
+            marginLeft: 6,
+        },
+        help: {
+            display: "flex",
+            color: theme.globals.colors.defaultStateBlank,
+            cursor: "pointer",
+            alignItems: "center",
+            textDecoration: "none",
+            "svg path": {
+                fill: theme.globals.colors.dropdownButton,
+            },
+            "&:hover": {
+                ".${helpText}": {
+                    textDecoration: "underline",
+                    color: theme.globals.colors.dropdownButtonHover,
+                },
+                "svg path": {
+                    fill: theme.globals.colors.dropdownButtonHover,
+                },
+            },
+        },
+        spinner: {
+            display: "inline-block",
+            position: "relative",
+            top: 4,
+            right: 16,
+        },
+    };
+});
+function EditMetricContentFooterComponent({ onDelete, onCancel, isWhiteLabeled = false, }) {
+    const { classes, cx } = useStyles();
+    const intl = useIntl();
+    const { mode, isLocked, isEditable, isWriteable, isSaving, isSaveAsDisabled, isSaveDisabled } = useMetricFormStatus();
+    const { onSave, onSaveAs } = useFormHandlers();
+    const { howToCreateClickEvent } = useEvents(events);
+    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: "links", children: isWriteable && isEditable && !isWhiteLabeled && (_jsxs("a", { className: cx(classes.help, "s-help_link"), href: howToCreateMetricLink, onClick: () => howToCreateClickEvent(), target: "_blank", rel: "noreferrer", children: [_jsx(IconQuestionMark, {}), _jsx("div", { className: classes.helpText, children: _jsx(FormattedMessage, { id: "metricComponent.editMetric.helpText" }) })] })) }), _jsxs("div", { className: "buttons", children: [isSaving && _jsx(LoadingSpinner, { className: cx(classes.spinner, "small") }), mode === FormMode.Edit && !isLocked && isEditable && (_jsx(Button, { type: "button", tagName: "a", value: intl.formatMessage({ id: "metricComponent.editMetric.delete" }), onClick: onDelete, className: "gd-button-link-dimmed s-button-delete" })), _jsx(Button, { value: isEditable
+                            ? intl.formatMessage({ id: "metricComponent.editMetric.cancel" })
+                            : intl.formatMessage({ id: "metricComponent.editMetric.close" }), onClick: onCancel, className: "gd-button-secondary s-button-close" }), mode === FormMode.Edit && isWriteable && (_jsx(EditMetricSaveMessage, { onClick: onSaveAs, text: intl.formatMessage({ id: "metricComponent.editMetric.saveAsNew" }), className: "gd-button", children: _jsx(Button, { value: intl.formatMessage({ id: "metricComponent.editMetric.saveAsNew" }), onClick: onSaveAs, className: classNames("gd-button-secondary", "s-button-save-as", isSaveAsDisabled && "disabled") }) })), !isLocked && isEditable && (_jsx(EditMetricSaveMessage, { onClick: onSave, text: intl.formatMessage({ id: "metricComponent.editMetric.save" }), className: "gd-button", children: _jsx(Button, { value: intl.formatMessage({ id: "metricComponent.editMetric.save" }), onClick: onSave, className: classNames("gd-button-action", "s-button-save", isSaveDisabled && "disabled") }) }))] })] }));
+}
+export const EditMetricContentFooter = memo(EditMetricContentFooterComponent);

package/esm/MetricComponent/Form/Footer/EditMetricSaveMessage.d.ts

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from "react";
+export interface IEditMetricSaveMessageProps {
+    onClick?: () => void;
+    text?: string;
+    className?: string;
+}
+export declare function EditMetricSaveMessage({ onClick, text, children, className, }: PropsWithChildren<IEditMetricSaveMessageProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditMetricSaveMessage.d.ts.map

package/esm/MetricComponent/Form/Footer/EditMetricSaveMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricSaveMessage.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Footer/EditMetricSaveMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAoB/C,MAAM,WAAW,2BAA2B;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,qBAAqB,CAAC,EAClC,OAAO,EACP,IAAa,EACb,QAAQ,EACR,SAAS,GACZ,EAAE,iBAAiB,CAAC,2BAA2B,CAAC,2CAkDhD"}

package/esm/MetricComponent/Form/Footer/EditMetricSaveMessage.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { FormattedMessage } from "react-intl";
+import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { useMetricFormStatus } from "../hooks/useMetricFormStatus.js";
+const useStyles = makeStyles()(() => {
+    return {
+        root: {
+            a: {
+                cursor: "pointer",
+            },
+        },
+    };
+});
+export function EditMetricSaveMessage({ onClick, text = "text", children, className, }) {
+    const { classes } = useStyles();
+    const { isError, validation } = useMetricFormStatus();
+    const { critical, specials } = validation;
+    const { isEmpty } = specials;
+    return (_jsx("span", { className: className, children: _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 100, eventsOnBubble: true, className: "gd-button save-button-trigger", children: [children, isError && (_jsxs(Bubble, { className: classNames(isEmpty ? "bubble-dark" : "bubble-negative", classes.root, "s-save-message"), alignPoints: [{ align: "tc br", offset: { x: 0, y: -5 } }], children: [!isEmpty && (_jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "metricComponent.editMetricForm.errorsOnSave.start", values: { save: text.toLowerCase() } }), " ", _jsx("a", { onClick: onClick, children: _jsx(FormattedMessage, { id: "metricComponent.editMetricForm.errorsOnSave.count", values: { count: critical.length } }) }), "."] })), isEmpty && (_jsx(FormattedMessage, { id: "metricComponent.editMetricForm.errorsOnSave.empty", values: { save: text.toLowerCase() } }))] }))] }) }));
+}

package/esm/MetricComponent/Form/Header/EditMetricContentHeader.d.ts

@@ -0,0 +1,28 @@
+import { type IMeasureReferencing } from "@gooddata/sdk-backend-spi";
+import { type IInsight, type IMetadataObject, type ISeparators } from "@gooddata/sdk-model";
+import { type IObjectShareDraft } from "@gooddata/sdk-ui-ext";
+import { type IMeasureDef } from "../../metric/metricHelpers.js";
+export interface IEditMetricContentHeaderProps {
+    regenerateId?: boolean;
+    usage?: IMeasureReferencing;
+    separators?: ISeparators;
+    className?: string;
+    onDescriptionHeightChange?: (height: number) => void;
+    activeInsight?: IInsight;
+    insightOpenType?: "external" | "internal";
+    onInsightClick?: (object: IInsight) => void;
+    metricOpenType?: "external" | "internal";
+    onMetricClick?: (object: IMetadataObject) => void;
+    useReferences?: boolean;
+    /** The metric being edited, for the share dialog's target and title. */
+    metric?: IMeasureDef;
+    /** Whether this user may share this metric. */
+    canShare?: boolean;
+    /** Access drafted so far, kept by the tab. */
+    draftAccess?: IObjectShareDraft;
+    onDraftAccessChange?: (draftAccess: IObjectShareDraft | undefined) => void;
+}
+declare function EditMetricContentHeaderComponent({ regenerateId, usage, separators, onDescriptionHeightChange, metricOpenType, onMetricClick, activeInsight, insightOpenType, onInsightClick, useReferences, metric, canShare, draftAccess, onDraftAccessChange, }: IEditMetricContentHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const EditMetricContentHeader: import("react").MemoExoticComponent<typeof EditMetricContentHeaderComponent>;
+export {};
+//# sourceMappingURL=EditMetricContentHeader.d.ts.map

package/esm/MetricComponent/Form/Header/EditMetricContentHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricContentHeader.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/EditMetricContentHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC5F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI9D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAuCjE,MAAM,WAAW,6BAA6B;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,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;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wEAAwE;IACxE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9E;AAED,iBAAS,gCAAgC,CAAC,EACtC,YAAY,EACZ,KAAK,EACL,UAAU,EACV,yBAAyB,EACzB,cAAc,EACd,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,EACb,MAAM,EACN,QAAQ,EACR,WAAW,EACX,mBAAmB,GACtB,EAAE,6BAA6B,2CAiD/B;AAED,eAAO,MAAM,uBAAuB,8EAAyC,CAAC"}

package/esm/MetricComponent/Form/Header/EditMetricContentHeader.events.d.ts

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

package/esm/MetricComponent/Form/Header/EditMetricContentHeader.events.d.ts.map

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

package/esm/MetricComponent/Form/Header/EditMetricContentHeader.events.js

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

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

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { memo } from "react";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { useMetricFormStatus } from "../hooks/useMetricFormStatus.js";
+import { events } from "./EditMetricContentHeader.events.js";
+import { LockedBubble } from "./LockedBubble.js";
+import { MetricDescriptionField } from "./MetricDescriptionField.js";
+import { MetricIdField } from "./MetricIdField.js";
+import { MetricTitleField } from "./MetricTitleField.js";
+import { MetricShare } from "./share/MetricShare.js";
+import { Usage } from "./Usage/Usage.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        padding: "20px 20px 20px 16px",
+    },
+    firstRow: {
+        display: "flex",
+        alignItems: "center",
+        marginBottom: 5,
+        marginRight: 30,
+        gap: 10,
+    },
+    locked: {
+        display: "flex",
+        alignItems: "center",
+    },
+    metaRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        marginBottom: 5,
+        paddingLeft: 5,
+    },
+    description: {
+        display: "flex",
+        color: theme.globals.colors.description,
+    },
+}));
+function EditMetricContentHeaderComponent({ regenerateId, usage, separators, onDescriptionHeightChange, metricOpenType, onMetricClick, activeInsight, insightOpenType, onInsightClick, useReferences, metric, canShare, draftAccess, onDraftAccessChange, }) {
+    const { classes, cx } = useStyles();
+    const { metricUsageClick } = useEvents(events);
+    const { isLocked } = useMetricFormStatus();
+    const meta = (_jsxs(_Fragment, { children: [_jsx(MetricIdField, { regenerateId: regenerateId }), usage ? (_jsx(Usage, { data: usage, onOpenUsage: metricUsageClick, activeInsight: activeInsight, insightOpenType: insightOpenType, onInsightClick: onInsightClick, metricOpenType: metricOpenType, onMetricClick: onMetricClick })) : null] }));
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.firstRow, children: [isLocked && (_jsx("div", { className: cx(classes.locked), children: _jsx(LockedBubble, {}) })), _jsx(MetricTitleField, {}), metric ? (_jsx(MetricShare, { metric: metric, canShare: canShare, draftAccess: draftAccess, onDraftAccessChange: onDraftAccessChange })) : null] }), _jsx("div", { className: classes.metaRow, children: meta }), _jsx(MetricDescriptionField, { className: classes.description, onDescriptionHeightChange: onDescriptionHeightChange, separators: separators, useReferences: useReferences })] }));
+}
+export const EditMetricContentHeader = memo(EditMetricContentHeaderComponent);

package/esm/MetricComponent/Form/Header/LockedBubble.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from "react";
+export declare function LockedBubble(): ReactElement;
+//# sourceMappingURL=LockedBubble.d.ts.map

package/esm/MetricComponent/Form/Header/LockedBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockedBubble.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/LockedBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAe1C,wBAAgB,YAAY,IAAI,YAAY,CAW3C"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormattedMessage } from "react-intl";
+import { Bubble, BubbleHoverTrigger, IconLock } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+const useStyles = makeStyles()(() => ({
+    root: {
+        paddingTop: 5,
+        paddingRight: 5,
+    },
+}));
+export function LockedBubble() {
+    const { classes } = useStyles();
+    return (_jsxs(BubbleHoverTrigger, { className: classes.root, showDelay: 0, hideDelay: 0, children: [_jsx(IconLock, { className: "s-lockedIcon" }), _jsx(Bubble, { className: "bubble-primary", alignPoints: [{ align: "bc tl" }], children: _jsx(FormattedMessage, { id: "metricComponent.editMetric.protectedMetric" }) })] }));
+}

package/esm/MetricComponent/Form/Header/MetricDescriptionField.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+import { type ISeparators } from "@gooddata/sdk-model";
+export interface IMetricDescriptionFieldProps {
+    className?: string;
+    onDescriptionHeightChange?: (height: number) => void;
+    useReferences?: boolean;
+    separators?: ISeparators;
+}
+export declare function MetricDescriptionField({ onDescriptionHeightChange, className, useReferences, separators, }: IMetricDescriptionFieldProps): ReactElement | null;
+//# sourceMappingURL=MetricDescriptionField.d.ts.map

package/esm/MetricComponent/Form/Header/MetricDescriptionField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricDescriptionField.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/MetricDescriptionField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAevD,MAAM,WAAW,4BAA4B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,sBAAsB,CAAC,EACnC,yBAAyB,EACzB,SAAS,EACT,aAAa,EACb,UAAU,GACb,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAqBpD"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { FormField } from "../data.js";
+import { EditableRow } from "../EditableRow/EditableRow.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+const useStyles = makeStyles()(() => ({
+    row: {
+        "& > div": {
+            width: "100%",
+        },
+    },
+}));
+export function MetricDescriptionField({ onDescriptionHeightChange, className, useReferences, separators, }) {
+    const intl = useIntl();
+    const { classes, cx } = useStyles();
+    const { value, isReadOnly, onChange } = useMetricFormField(FormField.description);
+    return (_jsx("div", { className: cx(className, "s-edit_dialog_description"), children: _jsx(EditableRow, { readOnly: isReadOnly, className: classes.row, placeholder: getDescriptionPlaceholder(intl), autoResize: true, onHeightChange: onDescriptionHeightChange, value: value, onChange: onChange, useReferences: useReferences, separators: separators }) }));
+}
+function getDescriptionPlaceholder(intl) {
+    return intl.formatMessage({
+        id: "metricComponent.editMetric.descriptionPlaceholder",
+    });
+}

package/esm/MetricComponent/Form/Header/MetricIdField.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from "react";
+export interface IMetricIdFieldProps {
+    regenerateId?: boolean;
+    className?: string;
+}
+export declare function MetricIdField({ className, regenerateId }: IMetricIdFieldProps): ReactElement | null;
+/** Trimmed value if the id pattern allows it or it is empty, otherwise null to reject it. */
+export declare function passOnlyValidOrEmpty(value: string): string | null;
+//# sourceMappingURL=MetricIdField.d.ts.map

package/esm/MetricComponent/Form/Header/MetricIdField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricIdField.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/MetricIdField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,OAAO,CAAC;AAkCvD,MAAM,WAAW,mBAAmB;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CA0CnG;AAED,6FAA6F;AAC7F,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAOjE"}

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useCallback } from "react";
+import { isEmpty } from "lodash-es";
+import { useIntl } from "react-intl";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { validateIdPattern } from "../../metric/idValidator.js";
+import { FormField } from "../data.js";
+import { InlineEditableValue } from "../EditableRow/InlineEditableValue.js";
+import { events } from "../EditMetricContentForm.events.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+import { useUniqIdGenerator } from "../hooks/useUniqIdGenerator.js";
+const ROW_HEIGHT = 29;
+const ID_MIN_WIDTH = 64;
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        display: "flex",
+        minWidth: 0,
+        alignItems: "center",
+        color: theme.globals.colors.defaultStateBlank,
+        lineHeight: "21px",
+        flexShrink: 1,
+        marginRight: 5,
+        minHeight: ROW_HEIGHT,
+    },
+    idRow: {
+        color: theme.globals.colors.link,
+        minHeight: ROW_HEIGHT,
+    },
+}));
+export function MetricIdField({ className, regenerateId }) {
+    const { classes, cx } = useStyles();
+    const intl = useIntl();
+    const { value, element, error, valid, isReadOnly, isLocked, defaultValues, onBlur, onChange } = useMetricFormField(FormField.id);
+    const prefix = useMetricFormField(FormField.prefix);
+    const onBlurHandler = useBlurEventsCallback(defaultValues.id, onBlur);
+    const defaultId = useUniqIdGenerator(regenerateId);
+    const { trimOrSetDefaultIfEmpty } = useIdSanitizers(defaultId);
+    // The row holds before an id exists, so it fills in as the title is typed. Nothing to
+    // show and nothing to type into would render a bare "ID:".
+    if (isEmpty(value) && isEmpty(defaultId) && (isLocked || isReadOnly)) {
+        return null;
+    }
+    return (_jsxs("div", { className: cx(classes.root, className, "s-edit_dialog_id"), children: ["ID:", " ", _jsx(InlineEditableValue, { prefix: prefix.value, className: classes.idRow, size: "small", minWidth: ID_MIN_WIDTH, revealOnHover: false, placeholder: defaultId, ariaLabel: intl.formatMessage({ id: "metricComponent.editMetric.id.ariaLabel" }), onChangeValueTransformer: passOnlyValidOrEmpty, onEditEndsValueTransformer: trimOrSetDefaultIfEmpty, readOnly: isLocked || isReadOnly, errorMessage: error?.message, showError: !valid, value: value, onBlur: onBlurHandler, onChange: onChange, ref: element })] }));
+}
+/** Trimmed value if the id pattern allows it or it is empty, otherwise null to reject it. */
+export function passOnlyValidOrEmpty(value) {
+    const idValue = value.trim();
+    if (isEmpty(idValue) || validateIdPattern(idValue)) {
+        return idValue;
+    }
+    return null;
+}
+function useIdSanitizers(defaultId) {
+    const trimOrSetDefaultIfEmpty = useCallback((value) => {
+        const idValue = value.trim();
+        if (isEmpty(idValue)) {
+            return defaultId;
+        }
+        else {
+            return idValue;
+        }
+    }, [defaultId]);
+    return { trimOrSetDefaultIfEmpty };
+}
+function useBlurEventsCallback(id, onBlur) {
+    const { metricIdCreatedEvent, metricIdEditEvent } = useEvents(events);
+    return useCallback((e) => {
+        if (isEmpty(id)) {
+            metricIdCreatedEvent();
+        }
+        else {
+            metricIdEditEvent();
+        }
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [metricIdCreatedEvent, metricIdEditEvent, onBlur, id]);
+}

package/esm/MetricComponent/Form/Header/MetricTagsField.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+export interface IMetricTagsFieldProps {
+    className?: string;
+}
+declare function MetricTagsFieldComponent({ className }: IMetricTagsFieldProps): ReactElement | null;
+export declare const MetricTagsField: import("react").MemoExoticComponent<typeof MetricTagsFieldComponent>;
+export {};
+//# sourceMappingURL=MetricTagsField.d.ts.map

package/esm/MetricComponent/Form/Header/MetricTagsField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricTagsField.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/MetricTagsField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAA8B,MAAM,OAAO,CAAC;AA8BtE,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iBAAS,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA2E3F;AAED,eAAO,MAAM,eAAe,sEAAiC,CAAC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2025-2026 GoodData Corporation
+import { memo, useCallback, useMemo } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useBackendStrict, useCancelablePromise, useWorkspaceStrict } from "@gooddata/sdk-ui";
+import { UiTags } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { FormField } from "../data.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+import { useMetricFormStatus } from "../hooks/useMetricFormStatus.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+    },
+    label: {
+        fontSize: "14px",
+        color: theme.globals.colors.description,
+    },
+    labelWithTags: {
+        marginRight: "8px",
+    },
+    labelWithoutTags: {
+        marginRight: "4px",
+    },
+}));
+function MetricTagsFieldComponent({ className }) {
+    const { classes, cx } = useStyles();
+    const intl = useIntl();
+    const backend = useBackendStrict();
+    const workspace = useWorkspaceStrict();
+    const { isLocked } = useMetricFormStatus();
+    const { value: tags = [], onChange, isReadOnly } = useMetricFormField(FormField.tags);
+    // Fetch available tags from the backend
+    const catalogTags = useCancelablePromise({
+        promise: () => backend.workspace(workspace).genAI().getAnalyticsCatalog().getTags(),
+        onError: (error) => console.error(error),
+    }, [backend, workspace]);
+    const itemTags = useMemo(() => {
+        const tagsArray = tags || [];
+        return tagsArray.map((tag) => ({
+            id: tag,
+            label: tag,
+            isDeletable: !isLocked && !isReadOnly,
+        }));
+    }, [tags, isLocked, isReadOnly]);
+    const tagOptions = useMemo(() => (catalogTags.result?.tags || []).map((tag) => ({ id: tag, label: tag })), [catalogTags.result?.tags]);
+    const canEdit = !isLocked && !isReadOnly;
+    const hasTags = tags?.length > 0;
+    const handleTagAdd = useCallback((tag) => {
+        const newTags = [...new Set([...(tags || []), tag.label])];
+        onChange(newTags);
+    }, [tags, onChange]);
+    const handleTagRemove = useCallback((tag) => {
+        const newTags = (tags || []).filter((t) => t !== tag.label);
+        onChange(newTags);
+    }, [tags, onChange]);
+    return (_jsxs("div", { className: cx(classes.root, className, "s-edit_dialog_tags"), children: [_jsx("div", { className: cx(classes.label, hasTags ? classes.labelWithTags : classes.labelWithoutTags), children: _jsx(FormattedMessage, { id: "metricComponent.tags.label" }) }), _jsx(UiTags, { tags: itemTags, tagOptions: tagOptions, canCreateTag: canEdit, canDeleteTags: canEdit, mode: "multi-line", onTagAdd: handleTagAdd, onTagRemove: handleTagRemove, addLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.addLabel" }), nameLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.nameLabel" }), cancelLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.cancelLabel" }), saveLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.saveLabel" }), removeLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.removeLabel" }), moreLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.more" }), noTagsLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.noTags" }), closeLabel: intl.formatMessage({ id: "metricComponent.tags.manager.label.close" }) })] }));
+}
+export const MetricTagsField = memo(MetricTagsFieldComponent);

package/esm/MetricComponent/Form/Header/MetricTitleField.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+export interface IMetricTitleFieldProps {
+    className?: string;
+}
+declare function MetricTitleFieldComponent({ className }: IMetricTitleFieldProps): ReactElement | null;
+export declare const MetricTitleField: import("react").MemoExoticComponent<typeof MetricTitleFieldComponent>;
+export {};
+//# sourceMappingURL=MetricTitleField.d.ts.map

package/esm/MetricComponent/Form/Header/MetricTitleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricTitleField.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/MetricTitleField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAoB7D,MAAM,WAAW,sBAAsB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iBAAS,yBAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CAgC7F;AAED,eAAO,MAAM,gBAAgB,uEAAkC,CAAC"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { memo, useCallback } from "react";
+import { useIntl } from "react-intl";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { FormField } from "../data.js";
+import { InlineEditableValue } from "../EditableRow/InlineEditableValue.js";
+import { events } from "../EditMetricContentForm.events.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+import { useTitleExistsCheck } from "../hooks/useTitleExistsCheck.js";
+const useStyles = makeStyles()(() => ({
+    root: {
+        display: "flex",
+        flexShrink: 1,
+        minWidth: 0,
+    },
+}));
+function MetricTitleFieldComponent({ className }) {
+    const { classes, cx } = useStyles();
+    const intl = useIntl();
+    const titleExists = useTitleExistsCheck();
+    const { value, element, error, valid, isReadOnly, isLocked, onBlur, onChange } = useMetricFormField(FormField.title);
+    const onBlurHandler = useBlurEventsCallback(onBlur);
+    return (_jsx("div", { className: cx(classes.root, className, "s-edit_dialog_title"), children: _jsx(InlineEditableValue, { placeholder: intl.formatMessage({
+                id: "metricComponent.editMetricForm.namePlaceholder",
+            }), ariaLabel: intl.formatMessage({ id: "metricComponent.editMetric.name.ariaLabel" }), readOnly: isLocked || isReadOnly, showWarning: titleExists, warningMessage: intl.formatMessage({
+                id: "metricComponent.editMetricForm.titleExists",
+            }), onEditEndsValueTransformer: (s) => s.trim(), errorMessage: error?.message, showError: !valid, value: value, onBlur: onBlurHandler, onChange: onChange, ref: element }) }));
+}
+export const MetricTitleField = memo(MetricTitleFieldComponent);
+function useBlurEventsCallback(onBlur) {
+    const { metricNameCreatedEvent } = useEvents(events);
+    return useCallback((e) => {
+        metricNameCreatedEvent();
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [metricNameCreatedEvent, onBlur]);
+}

package/esm/MetricComponent/Form/Header/MetricTypeField.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+export interface IMetricTypeFieldProps {
+    className?: string;
+}
+declare function MetricTypeFieldComponent({ className }: IMetricTypeFieldProps): ReactElement | null;
+export declare const MetricTypeField: import("react").MemoExoticComponent<typeof MetricTypeFieldComponent>;
+export {};
+//# sourceMappingURL=MetricTypeField.d.ts.map

package/esm/MetricComponent/Form/Header/MetricTypeField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricTypeField.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/Header/MetricTypeField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAA8B,MAAM,OAAO,CAAC;AA+BtE,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iBAAS,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAyD3F;AAED,eAAO,MAAM,eAAe,sEAAiC,CAAC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2025-2026 GoodData Corporation
+import { memo, useCallback, useMemo } from "react";
+import { FormattedMessage, defineMessage, useIntl } from "react-intl";
+import { Button, Dropdown, DropdownList, SingleSelectListItem } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { FormField } from "../data.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+    },
+    label: {
+        fontSize: "14px",
+        color: theme.globals.colors.description,
+    },
+    dropdownButton: {
+        minWidth: 120,
+    },
+}));
+const METRIC_TYPE_OPTIONS = [
+    { value: undefined, labelKey: defineMessage({ id: "metricComponent.metricType.unspecified" }).id },
+    { value: "CURRENCY", labelKey: defineMessage({ id: "metricComponent.metricType.currency" }).id },
+];
+function MetricTypeFieldComponent({ className }) {
+    const { classes, cx } = useStyles();
+    const intl = useIntl();
+    const { value, isReadOnly, isLocked, setValue } = useMetricFormField(FormField.metricType);
+    const metricTypeValue = value;
+    const selectedOption = useMemo(() => METRIC_TYPE_OPTIONS.find((opt) => opt.value === metricTypeValue) ?? METRIC_TYPE_OPTIONS[0], [metricTypeValue]);
+    const handleChange = useCallback((newValue) => {
+        setValue(newValue);
+    }, [setValue]);
+    const disabled = isLocked || isReadOnly;
+    return (_jsxs("div", { className: cx(classes.root, className, "s-metric-type-field"), children: [_jsx("div", { className: classes.label, children: _jsx(FormattedMessage, { id: "metricComponent.metricType.label" }) }), _jsx(Dropdown, { alignPoints: [{ align: "bl tl" }, { align: "tl bl" }], renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { width: 200, items: METRIC_TYPE_OPTIONS, renderItem: ({ item }) => (_jsx(SingleSelectListItem, { title: intl.formatMessage({ id: item.labelKey }), isSelected: item.value === metricTypeValue, onClick: () => {
+                            handleChange(item.value);
+                            closeDropdown();
+                        } })) })), renderButton: ({ toggleDropdown, isOpen }) => (_jsx(Button, { className: cx("gd-button-secondary", classes.dropdownButton), value: intl.formatMessage({ id: selectedOption.labelKey }), iconRight: isOpen ? "gd-icon-navigateup" : "gd-icon-navigatedown", onClick: toggleDropdown, disabled: disabled })) })] }));
+}
+export const MetricTypeField = memo(MetricTypeFieldComponent);

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

@@ -0,0 +1,13 @@
+import { type IMeasureReferencing } from "@gooddata/sdk-backend-spi";
+import { type IInsight, type IMetadataObject } from "@gooddata/sdk-model";
+export interface IUsageProps {
+    data: IMeasureReferencing;
+    onOpenUsage?: () => void;
+    activeInsight?: IInsight;
+    insightOpenType?: "external" | "internal";
+    onInsightClick?: (object: IInsight) => void;
+    metricOpenType?: "external" | "internal";
+    onMetricClick?: (object: IMetadataObject) => void;
+}
+export declare function Usage({ data, onOpenUsage, insightOpenType, metricOpenType, activeInsight, onInsightClick, onMetricClick, }: IUsageProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Usage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Usage.d.ts","sourceRoot":"","sources":["../../../../../src/MetricComponent/Form/Header/Usage/Usage.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA8B1E,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,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;AAED,wBAAgB,KAAK,CAAC,EAClB,IAAI,EACJ,WAAW,EACX,eAAe,EACf,cAAc,EACd,aAAa,EACb,cAAc,EACd,aAAa,GAChB,EAAE,WAAW,kDA4Db"}