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

package/esm/MetricComponent/Form/EditMetricCenterForm.js

@@ -0,0 +1,157 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { memo, useCallback, useReducer, useState } from "react";
+import { defineMessages } from "react-intl";
+import { useToastMessage } from "@gooddata/sdk-ui-kit";
+import { useFormValues } from "../../shared/Form/useFormValues.js";
+import { useProp } from "../../shared/hooks/useProp.js";
+import { makeStyles } from "../../shared/theme/index.js";
+import { useFeaturesAndSettings } from "../FeaturesAndSettings/index.js";
+import { useCatalog } from "./hooks/useCatalog.js";
+import { useExecute } from "./hooks/useExecute.js";
+import { useExplain } from "./hooks/useExplain.js";
+import { MaqlEditorField } from "./MaqlEditorField/MaqlEditorField.js";
+import { getMaqlValue } from "./maqlFieldFunctions.js";
+import { MaqlResult } from "./MaqlResult/MaqlResult.js";
+import { MaqlSql } from "./MaqlResult/MaqlSql.js";
+const useStyles = makeStyles()((theme) => {
+    return {
+        maqlBlock: {
+            flex: "1 1 auto",
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+        },
+        maqlExpression: {
+            flex: "1 1 auto",
+        },
+        maqlResult: {
+            flex: "0 0 auto",
+        },
+        sqlBlock: {
+            flex: "1 1 auto",
+            position: "relative",
+            width: "50%",
+            maxWidth: "50%",
+        },
+        line: {
+            width: "100%",
+            height: 1,
+            background: theme.globals.colors.defaultBorderDarker,
+        },
+    };
+});
+const messages = defineMessages({
+    copyOk: {
+        id: "metricComponent.editMetric.metric.sql.copy_to_clipboard.ok",
+    },
+    copyError: {
+        id: "metricComponent.editMetric.metric.sql.copy_to_clipboard.error",
+    },
+});
+export const MaqlResultArea = "maql_result";
+function EditMetricCenterFormComponent({ sqlOpen = false, computedFor = null, defaultAttributes = [], defaultDisplay, onMetricClick, onSettingsChange, }) {
+    const { classes } = useStyles();
+    const { canShowResults, canShowSql } = useFeaturesAndSettings();
+    const { expression } = useFormValues();
+    const { attributes, setAttributes } = useAttributes(defaultAttributes, onSettingsChange);
+    const { display, setDisplay } = useDisplay(defaultDisplay, onSettingsChange);
+    const run = useRun(computedFor, onSettingsChange);
+    const sql = useSqlOpen(sqlOpen, onSettingsChange);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.maqlBlock, children: [_jsx("div", { className: classes.maqlExpression, children: _jsx(MaqlEditorField, { isSQL: sql.isSQL, onMetricOpen: onMetricClick, onSQL: () => sql.setSQL(true), onRun: () => run.setComputed(getMaqlValue(expression)) }) }), canShowResults && (_jsx(EditMetricData, { run: run, attributes: attributes, setAttributes: setAttributes, display: display, setDisplay: setDisplay }))] }), canShowSql && _jsx(EditMetricSql, { attributes: attributes, sql: sql })] }));
+}
+export const EditMetricCenterForm = memo(EditMetricCenterFormComponent);
+function EditMetricSql({ attributes, sql, }) {
+    const { classes } = useStyles();
+    const measure = useFormValues();
+    const onCopyDone = useCopyStatus();
+    const { isSQL, sqlId, setSQL } = sql;
+    const explain = useExplain(measure, { attributes }, [sqlId]);
+    if (!isSQL) {
+        return null;
+    }
+    return (_jsx("div", { className: classes.sqlBlock, children: _jsx(MaqlSql, { explain: explain, onCopy: onCopyDone, onClose: () => setSQL(false) }) }));
+}
+function EditMetricData({ attributes, setAttributes, run, display, setDisplay, }) {
+    const { classes } = useStyles();
+    const measure = useFormValues();
+    const { computed, setComputed } = run;
+    const { result, status } = useCatalog(measure, attributes, [computed]);
+    const catalogLoading = status === "loading" || status === "pending";
+    const execute = useExecute(computed ? { ...measure, expression: computed } : null, { attributes, ...display }, [computed, measure.format]);
+    if (!execute) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.line }), _jsx("div", { className: classes.maqlResult, "data-area": MaqlResultArea, children: _jsx(MaqlResult, { execute: execute, attributes: attributes, catalogLoading: catalogLoading, catalog: result, onContext: setAttributes, display: display, onDisplay: setDisplay, onContextOpen: () => setComputed(getMaqlValue(measure.expression)) }) })] }));
+}
+function useCopyStatus() {
+    const { addSuccess, addError } = useToastMessage();
+    return useCallback((state) => {
+        if (state) {
+            addSuccess(messages.copyOk);
+        }
+        else {
+            addError(messages.copyError);
+        }
+    }, [addError, addSuccess]);
+}
+function useSqlOpen(sqlOpen, onSettingsChange) {
+    const { expression } = useFormValues();
+    const expressionCurrent = getMaqlValue(expression);
+    const [expressionSaved, setExpression] = useState(expressionCurrent);
+    const [isSQL, setSQL] = useProp(sqlOpen);
+    const [sqlId, generateId] = useReducer(rand, rand());
+    return {
+        isSQL,
+        sqlId,
+        setSQL: (sqlOpen) => {
+            if (sqlOpen && expressionSaved !== expression) {
+                setExpression(expression);
+                generateId();
+            }
+            setSQL(sqlOpen);
+            if (onSettingsChange) {
+                onSettingsChange({ sqlOpen });
+            }
+        },
+    };
+}
+function useRun(computedFor, onSettingsChange) {
+    const [computed, setComputed] = useProp(computedFor);
+    return {
+        computed,
+        setComputed: (computedFor) => {
+            setComputed(computedFor);
+            if (onSettingsChange) {
+                onSettingsChange({ computedFor });
+            }
+        },
+    };
+}
+function useAttributes(attrs, onSettingsChange) {
+    const [attributes, setAttributes] = useProp(attrs);
+    return {
+        attributes,
+        setAttributes: (attributes) => {
+            setAttributes(attributes);
+            if (onSettingsChange) {
+                onSettingsChange({ attributes });
+            }
+        },
+    };
+}
+function useDisplay(disp, onSettingsChange) {
+    const [display, setDisplay] = useProp(disp);
+    return {
+        display,
+        setDisplay: (display) => {
+            setDisplay(display);
+            if (onSettingsChange) {
+                onSettingsChange({ display });
+            }
+        },
+    };
+}
+function rand() {
+    return Math.random().toString(36).slice(2);
+}

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

@@ -0,0 +1,45 @@
+import { type Ref } from "react";
+import { type IMeasureReferencing } from "@gooddata/sdk-backend-spi";
+import { type IInsight, type IMetadataObject, type ISeparators, type IWorkspacePermissions } from "@gooddata/sdk-model";
+import { type IObjectShareDraft } from "@gooddata/sdk-ui-ext";
+import { type IMeasureDef, type IMeasureSetting } from "../metric/metricHelpers.js";
+import { type FormField } from "./data.js";
+export interface IEditMetricDialogFormApi {
+    close: () => void;
+    save: () => Promise<void>;
+    saveAs: () => Promise<void>;
+    saveForce: (data?: Partial<IMeasureDef>) => Promise<void>;
+}
+export interface IEditMetricDialogFormProps {
+    metric: IMeasureDef;
+    setting: IMeasureSetting;
+    permissions: IWorkspacePermissions;
+    initialFocus?: FormField;
+    usage?: IMeasureReferencing;
+    regenerateId?: boolean;
+    showCloseButton?: boolean;
+    ref?: Ref<IEditMetricDialogFormApi | undefined>;
+    onSave: (metric: IMeasureDef, force?: boolean) => Promise<void>;
+    onSaveAs: (metric: IMeasureDef) => Promise<void>;
+    onDelete: () => void;
+    onClose: (metric: Partial<IMeasureDef>, valid: boolean) => void;
+    onCancel: () => void;
+    onDirtyChanged?: (dirty: boolean) => void;
+    onValueChange?: (metric: IMeasureDef, valid: boolean) => void;
+    onSettingsChange?: (setting: Partial<IMeasureSetting>) => void;
+    activeInsight?: IInsight;
+    insightOpenType?: "external" | "internal";
+    onInsightClick?: (object: IInsight) => void;
+    metricOpenType?: "external" | "internal";
+    onMetricClick?: (object: IMetadataObject) => void;
+    isWhiteLabeled?: boolean;
+    separators?: ISeparators;
+    useReferences?: boolean;
+    currencyFormatOverride?: string | null;
+    enableMetricFormatOverrides?: boolean;
+    /** Access drafted so far, kept by the tab. */
+    draftAccess?: IObjectShareDraft;
+    onDraftAccessChange?: (draftAccess: IObjectShareDraft | undefined) => void;
+}
+export declare const EditMetricContentForm: import("react").ForwardRefExoticComponent<Omit<IEditMetricDialogFormProps, "ref"> & import("react").RefAttributes<IEditMetricDialogFormApi | undefined>>;
+//# sourceMappingURL=EditMetricContentForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricContentForm.d.ts","sourceRoot":"","sources":["../../../src/MetricComponent/Form/EditMetricContentForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EACH,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAK7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAQ9D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIpF,OAAO,EAAE,KAAK,SAAS,EAA8B,MAAM,WAAW,CAAC;AAkEvE,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,qBAAqB,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,wBAAwB,GAAG,SAAS,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC/D,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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9E;AAID,eAAO,MAAM,qBAAqB,0JA0JhC,CAAC"}

package/esm/MetricComponent/Form/EditMetricContentForm.events.d.ts

@@ -0,0 +1,13 @@
+import { type IEvent } from "../../shared/eventing/EventContext.js";
+declare function metricNameCreatedEvent(): IEvent;
+declare function metricIdCreatedEvent(): IEvent;
+declare function metricIdEditEvent(): IEvent;
+declare function metricDescriptionAddedEvent(): IEvent;
+export declare const events: {
+    metricNameCreatedEvent: typeof metricNameCreatedEvent;
+    metricIdCreatedEvent: typeof metricIdCreatedEvent;
+    metricIdEditEvent: typeof metricIdEditEvent;
+    metricDescriptionAddedEvent: typeof metricDescriptionAddedEvent;
+};
+export {};
+//# sourceMappingURL=EditMetricContentForm.events.d.ts.map

package/esm/MetricComponent/Form/EditMetricContentForm.events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetricContentForm.events.d.ts","sourceRoot":"","sources":["../../../src/MetricComponent/Form/EditMetricContentForm.events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAGpE,iBAAS,sBAAsB,IAAI,MAAM,CAKxC;AAED,iBAAS,oBAAoB,IAAI,MAAM,CAKtC;AAED,iBAAS,iBAAiB,IAAI,MAAM,CAKnC;AAED,iBAAS,2BAA2B,IAAI,MAAM,CAK7C;AAED,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC"}

package/esm/MetricComponent/Form/EditMetricContentForm.events.js

@@ -0,0 +1,32 @@
+// (C) 2021-2026 GoodData Corporation
+import { EventCategories, Events } from "../../shared/eventing/events.js";
+function metricNameCreatedEvent() {
+    return {
+        action: Events.metricNameCreated,
+        category: EventCategories.metricComponent,
+    };
+}
+function metricIdCreatedEvent() {
+    return {
+        action: Events.metricIdCreated,
+        category: EventCategories.metricComponent,
+    };
+}
+function metricIdEditEvent() {
+    return {
+        action: Events.metricIdEdit,
+        category: EventCategories.metricComponent,
+    };
+}
+function metricDescriptionAddedEvent() {
+    return {
+        action: Events.metricDescriptionAdded,
+        category: EventCategories.metricComponent,
+    };
+}
+export const events = {
+    metricNameCreatedEvent,
+    metricIdCreatedEvent,
+    metricIdEditEvent,
+    metricDescriptionAddedEvent,
+};

package/esm/MetricComponent/Form/EditMetricContentForm.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { forwardRef, useMemo, useRef } from "react";
+import classNames from "classnames";
+import { canEditMetric, canShareMetric, isMeasureMetadataObject, isMeasureMetadataObjectDefinition, } from "@gooddata/sdk-model";
+import { FormMode } from "../../shared/Form/data.js";
+import { FormProvider } from "../../shared/Form/Form.js";
+import { handler, useApi } from "../../shared/hooks/useApi.js";
+import { makeStyles } from "../../shared/theme/index.js";
+import { useFeaturesAndSettings } from "../FeaturesAndSettings/index.js";
+import { transformToMetricDefinition } from "../metric/transformer.js";
+import { CloseButton } from "./CloseButton/CloseButton.js";
+import { EditMetricCenterForm } from "./EditMetricCenterForm.js";
+import { EditMetricContentFooter } from "./Footer/EditMetricContentFooter.js";
+import { EditMetricContentHeader } from "./Header/EditMetricContentHeader.js";
+import { MetricTagsField } from "./Header/MetricTagsField.js";
+import { useInvalidFocus } from "./hooks/useInvalidFocus.js";
+import { useMetricValidation } from "./hooks/useMetricValidation.js";
+import { EditMetricContentNumberFormat } from "./NumberFormat/EditMetricContentNumberFormat.js";
+const useStyles = makeStyles()((theme) => {
+    const headerSize = 107;
+    const footerSize = 138;
+    return {
+        root: {
+            width: "100%",
+            height: "100%",
+            "*": {
+                boxSizing: "border-box",
+            },
+        },
+        form: {
+            width: "100%",
+            height: "100%",
+            backgroundColor: theme.globals.colors.defaultWhite,
+            display: "flex",
+            minHeight: `calc(50vh + ${headerSize}px + ${footerSize}px)`,
+            flexDirection: "column",
+        },
+        line: {
+            width: "100%",
+            height: 1,
+            background: theme.globals.colors.defaultBorderDarker,
+        },
+        smallLine: {
+            height: 1,
+            background: theme.globals.colors.line,
+            margin: "0 20px",
+            "&:last-child": {
+                display: "none",
+            },
+        },
+        space: {
+            height: 16,
+        },
+        headerBlock: { flex: "0 0 auto" },
+        centerBlock: { flex: "1 1 auto", display: "flex" },
+        footerBlock: { flex: "0 0 auto" },
+        footerContent: {
+            display: "flex",
+            alignItems: "center",
+            padding: "0 20px",
+            gap: 20,
+            flexWrap: "wrap",
+        },
+        tagsSection: {
+            display: "flex",
+            alignItems: "center",
+            minWidth: 200,
+            flex: "1 1 auto",
+        },
+    };
+});
+const FormComponent = FormProvider;
+export const EditMetricContentForm = forwardRef(function EditMetricContentForm({ metric, setting, permissions, initialFocus, usage, regenerateId, showCloseButton = true, onSave, onSaveAs, onDelete, onClose, onCancel, onDirtyChanged, onValueChange, onSettingsChange, metricOpenType, onMetricClick, activeInsight, insightOpenType, onInsightClick, isWhiteLabeled, separators, useReferences, currencyFormatOverride, enableMetricFormatOverrides, draftAccess, onDraftAccessChange, }, ref) {
+    const { classes } = useStyles();
+    const { enableMetricPermissions } = useFeaturesAndSettings();
+    const comp = useRef(undefined);
+    const locked = metric.isLocked || false;
+    const { computedFor, sqlOpen, display, attributes } = setting;
+    const invalidFocusHandler = useInvalidFocus();
+    const metricValidationHandler = useMetricValidation(locked, {
+        allowEmptyCurrencyFormat: Boolean(currencyFormatOverride),
+        validateCurrencyMetricType: Boolean(enableMetricFormatOverrides),
+    });
+    const isDefinition = isMeasureMetadataObjectDefinition(metric);
+    const canCreate = permissions.canCreateMetric;
+    // a metric that has not been saved yet carries no object-level permissions; creating it is
+    // gated by canCreate below, not by canEdit
+    const metricPermissions = isMeasureMetadataObject(metric) ? metric.permissions : undefined;
+    const canEdit = canEditMetric(metricPermissions, permissions, enableMetricPermissions);
+    const canShare = isDefinition
+        ? enableMetricPermissions && canCreate
+        : canShareMetric(metricPermissions, permissions, enableMetricPermissions);
+    useApi(ref, {
+        close: handler(comp, (api) => api.close()),
+        save: handler(comp, (api) => api.save()),
+        saveForce: handler(comp, (api, data) => api.saveForce(data)),
+        saveAs: handler(comp, (api) => api.saveAs()),
+    }, [comp]);
+    // Ensure metricType is explicitly included in form data (in case it's not enumerable)
+    const formData = useMemo(() => ({
+        ...metric,
+        metricType: metric.metricType,
+    }), [metric]);
+    return (_jsx(FormComponent, { ref: comp, data: formData, transformer: transformToMetricDefinition, invalidFocus: invalidFocusHandler, validator: metricValidationHandler, editable: isDefinition ? canCreate : canEdit, writeable: canCreate, locked: locked, mode: isDefinition ? FormMode.New : FormMode.Edit, initialFocus: initialFocus, onDirtyChanged: onDirtyChanged, onValueChange: onValueChange, onSave: onSave, onSaveAs: onSaveAs, onClose: onClose, children: _jsx("form", { onSubmit: () => comp.current?.save(), className: classes.root, children: _jsxs("div", { className: classNames(classes.form, "edit-metric-form-content"), children: [_jsxs("div", { className: classes.headerBlock, children: [_jsx(EditMetricContentHeader, { metric: metric, canShare: canShare, draftAccess: draftAccess, onDraftAccessChange: onDraftAccessChange, usage: usage, separators: separators, regenerateId: regenerateId, activeInsight: activeInsight, insightOpenType: insightOpenType, onInsightClick: onInsightClick, metricOpenType: metricOpenType, onMetricClick: onMetricClick, useReferences: useReferences }), showCloseButton && _jsx(CloseButton, { onClick: () => comp.current?.close() }), _jsx("div", { className: classes.line })] }), _jsx("div", { className: classes.centerBlock, children: _jsx(EditMetricCenterForm, { defaultAttributes: attributes, defaultDisplay: display, computedFor: computedFor, sqlOpen: sqlOpen, onMetricClick: onMetricClick, onSettingsChange: onSettingsChange }) }), _jsxs("div", { className: classes.footerBlock, children: [_jsx("div", { className: classes.line }), _jsx("div", { className: classes.space }), _jsxs("div", { className: classes.footerContent, children: [_jsx("div", { children: _jsx(EditMetricContentNumberFormat, { separators: separators, currencyFormatOverride: currencyFormatOverride, enableMetricFormatOverrides: enableMetricFormatOverrides }) }), _jsx("div", { className: classes.tagsSection, children: _jsx(MetricTagsField, {}) })] }), _jsx("div", { className: classes.space }), _jsx("div", { className: classes.smallLine }), _jsx(EditMetricContentFooter, { onCancel: onCancel, onDelete: onDelete, isWhiteLabeled: isWhiteLabeled })] })] }) }) }));
+});

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

@@ -0,0 +1,16 @@
+import { type ISeparators } from "@gooddata/sdk-model";
+export interface IEditableRowProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    readOnly?: boolean;
+    onHeightChange?: (height: number) => void;
+    autoResize?: boolean;
+    useReferences?: boolean;
+    separators?: ISeparators;
+}
+declare function EditableRowComponent({ value, onChange, placeholder, className, autoResize, onHeightChange, useReferences, separators, }: IEditableRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const EditableRow: import("react").MemoExoticComponent<typeof EditableRowComponent>;
+export {};
+//# sourceMappingURL=EditableRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableRow.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/EditableRow/EditableRow.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA6DvD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC5B;AAED,iBAAS,oBAAoB,CAAC,EAC1B,KAAU,EACV,QAAQ,EACR,WAAgB,EAChB,SAAS,EACT,UAAU,EACV,cAAc,EACd,aAAqB,EACrB,UAAU,GACb,EAAE,iBAAiB,2CA+CnB;AAED,eAAO,MAAM,WAAW,kEAA6B,CAAC"}

package/esm/MetricComponent/Form/EditableRow/EditableRow.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { memo, useCallback, useLayoutEffect, useRef, useState } from "react";
+import cx from "classnames";
+// we need this version of classnames, tss version work differently
+import { RichTextWithTooltip } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+const useStyles = makeStyles()((theme) => {
+    return {
+        root: {
+            display: "flex",
+            width: "100%",
+        },
+        richText: {
+            [".gd-bubble-trigger"]: {
+                width: "100%",
+            },
+            minHeight: "29px",
+            maxHeight: "250px",
+            border: "1px solid transparent",
+            padding: "4px 4px",
+            color: theme.globals.colors.subtitle,
+            lineHeight: "19px",
+            cursor: "pointer",
+            "&:hover": {
+                border: `1px solid ${theme.tabs.colors.border}`,
+            },
+            textarea: {
+                lineHeight: "19px",
+                padding: 0,
+                fontFamily: theme.fonts.main,
+                color: theme.globals.colors.subtitle,
+                "&::placeholder": {
+                    color: theme.tabs.colors.placeholder,
+                },
+            },
+            "&.active": {
+                border: `1px solid ${theme.tabs.colors.border}`,
+            },
+        },
+        richTextFit: {
+            textarea: { verticalAlign: "top" },
+        },
+        richTextView: {
+            lineHeight: "19px",
+            color: theme.globals.colors.subtitle,
+            overflow: "auto",
+            "p, ul": { color: theme.globals.colors.description, marginBottom: 0 },
+            a: { marginBottom: 0 },
+        },
+        richTextViewEmpty: {
+            lineHeight: "19px",
+            color: theme.tabs.colors.placeholder,
+        },
+    };
+});
+const richTextTooltipAlignPoints = [
+    { align: "bl tl", offset: { x: 6, y: 4 } },
+    { align: "tl bl", offset: { x: 6, y: -4 } },
+];
+function EditableRowComponent({ value = "", onChange, placeholder = "", className, autoResize, onHeightChange, useReferences = false, separators, }) {
+    const { classes } = useStyles();
+    const [richTextEditMode, setRichTextEditMode] = useState(false);
+    const handleRichTextClick = useCallback(() => {
+        setRichTextEditMode(true);
+    }, []);
+    const handleRichTextBlur = useCallback(() => {
+        setRichTextEditMode(false);
+    }, []);
+    const element = useRef(null);
+    useLayoutEffect(() => {
+        if (onHeightChange && element?.current) {
+            onHeightChange(element.current.clientHeight);
+        }
+    });
+    return (_jsx("div", { className: cx(classes.root, className), ref: element, children: _jsx("div", { className: cx(classes.richText, {
+                active: richTextEditMode,
+                [classes.richTextView]: !richTextEditMode && value,
+                [classes.richTextFit]: autoResize,
+            }), onClick: handleRichTextClick, onBlur: handleRichTextBlur, children: _jsx(RichTextWithTooltip, { value: value, renderMode: richTextEditMode ? "edit" : "view", editRows: 5, autoResize: autoResize, showTooltip: richTextEditMode, editPlaceholder: placeholder, emptyElement: _jsx("div", { className: classes.richTextViewEmpty, children: placeholder }), tooltipAlignPoints: richTextTooltipAlignPoints, onChange: onChange, separators: separators, referencesEnabled: useReferences }) }) }));
+}
+export const EditableRow = memo(EditableRowComponent);

package/esm/MetricComponent/Form/EditableRow/EditableRowError.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+export interface IEditableRowErrorProps {
+    showError?: boolean;
+    errorMessage?: ReactElement | string;
+    showWarning?: boolean;
+    warningMessage?: ReactElement | string;
+    errorId?: string;
+    alignTo?: HTMLElement | null;
+    align?: string;
+    warningId?: string;
+}
+export declare function EditableRowError({ showError, errorMessage, showWarning, warningMessage, errorId, warningId, alignTo, align, }: IEditableRowErrorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditableRowError.d.ts.map

package/esm/MetricComponent/Form/EditableRow/EditableRowError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableRowError.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/EditableRow/EditableRowError.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,sBAAsB;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,cAAc,EACd,OAAO,EACP,SAAS,EACT,OAAO,EACP,KAAe,GAClB,EAAE,sBAAsB,2CAyBxB"}

package/esm/MetricComponent/Form/EditableRow/EditableRowError.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bubble } from "@gooddata/sdk-ui-kit";
+export function EditableRowError({ showError, errorMessage, showWarning, warningMessage, errorId, warningId, alignTo, align = "bc tc", }) {
+    return (_jsxs(_Fragment, { children: [showError && errorMessage && (_jsx(Bubble, { id: errorId, className: "bubble-negative s-editable-row-error", alignTo: alignTo, alignPoints: [{ align }], children: errorMessage })), showWarning && warningMessage && !showError && (_jsx(Bubble, { id: warningId, className: "bubble-warning s-editable-row-warning", alignTo: alignTo, alignPoints: [{ align }], children: warningMessage }))] }));
+}

package/esm/MetricComponent/Form/EditableRow/InlineEditableValue.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement, type Ref } from "react";
+export interface IInlineEditableValueHandle {
+    focus: () => void;
+}
+export interface IInlineEditableValueProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: (e?: FocusEvent) => void;
+    onChangeValueTransformer?: (value: string) => string | null;
+    onEditEndsValueTransformer?: (value: string) => string;
+    prefix?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    size?: "small" | "large";
+    minWidth?: number;
+    revealOnHover?: boolean;
+    readOnly?: boolean;
+    showError?: boolean;
+    errorMessage?: ReactElement | string;
+    showWarning?: boolean;
+    warningMessage?: ReactElement | string;
+    className?: string;
+    ref?: Ref<IInlineEditableValueHandle>;
+}
+/** A value edited in place, in a box always as wide as its value. */
+export declare const InlineEditableValue: import("react").ForwardRefExoticComponent<Omit<IInlineEditableValueProps, "ref"> & import("react").RefAttributes<IInlineEditableValueHandle>>;
+//# sourceMappingURL=InlineEditableValue.d.ts.map

package/esm/MetricComponent/Form/EditableRow/InlineEditableValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditableValue.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/EditableRow/InlineEditableValue.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,YAAY,EAEjB,KAAK,GAAG,EAKX,MAAM,OAAO,CAAC;AA2Df,MAAM,WAAW,0BAA0B;IACvC,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC5D,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,0BAA0B,CAAC,CAAC;CACzC;AAKD,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,+IA4I/B,CAAC"}

package/esm/MetricComponent/Form/EditableRow/InlineEditableValue.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { forwardRef, useId, useImperativeHandle, useState, } from "react";
+import cx from "classnames";
+import { useFocus } from "../../../shared/hooks/useFocus.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { EditableRowError } from "./EditableRowError.js";
+const useStyles = makeStyles()((theme, { minWidth }) => ({
+    root: {
+        ...theme.globals.normalItemStyle,
+        display: "inline-flex",
+        alignItems: "center",
+        maxWidth: "100%",
+        minWidth,
+        border: "1px solid transparent",
+        cursor: "text",
+        "&.small": { ...theme.globals.smallItemStyle },
+        "&.readOnly": { cursor: "default" },
+        "&.is-active": { borderColor: theme.globals.colors.editableRowHover },
+        "&.is-warning": { borderColor: theme.globals.colors.warning },
+        "&.is-error": { borderColor: theme.globals.colors.negative },
+    },
+    prefix: {
+        flex: "0 0 auto",
+        whiteSpace: "pre",
+    },
+    field: {
+        position: "relative",
+        flex: "1 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        alignSelf: "stretch",
+    },
+    sizer: {
+        display: "block",
+        whiteSpace: "pre",
+        visibility: "hidden",
+        pointerEvents: "none",
+    },
+    input: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        margin: 0,
+        padding: 0,
+        border: 0,
+        outline: 0,
+        background: "transparent",
+        font: "inherit",
+        color: "inherit",
+        textOverflow: "ellipsis",
+        "&::placeholder": { color: theme.globals.colors.placeholder },
+    },
+}));
+// A size="small" box with no minimum height collapses without a line box to measure.
+const ZERO_WIDTH_SPACE = "\u200B";
+/** A value edited in place, in a box always as wide as its value. */
+export const InlineEditableValue = forwardRef(function InlineEditableValue({ value = "", onChange, onBlur, onChangeValueTransformer, onEditEndsValueTransformer, prefix, placeholder = "", ariaLabel, size = "large", minWidth = 40, revealOnHover = true, readOnly, showError, errorMessage, showWarning, warningMessage, className, }, ref) {
+    const [rootElement, setRootElement] = useState(null);
+    const [inputElement, setInputElement] = useState(null);
+    const [focusRequested, setFocusRequested] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const { classes } = useStyles({ minWidth });
+    useImperativeHandle(ref, () => ({ focus: () => setFocusRequested(true) }));
+    // Applied once the input is visible rather than straight away, so a click that asks
+    // for the focus cannot take it back.
+    useFocus(inputElement, focusRequested);
+    const id = useId();
+    const errorId = `${id}-error`;
+    const warningId = `${id}-warning`;
+    // Both surface only while the user is at the field. Validation focuses the field it
+    // rejected, so a failed save still shows its error.
+    const atField = !readOnly && (isHovered || isFocused);
+    const errorVisible = atField && Boolean(showError);
+    const warningVisible = atField && Boolean(showWarning) && !showError;
+    const describedBy = [
+        errorVisible && errorMessage ? errorId : undefined,
+        warningVisible && warningMessage ? warningId : undefined,
+    ]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const handleChange = (next) => {
+        const changeValue = onChangeValueTransformer ? onChangeValueTransformer(next) : next;
+        if (changeValue !== null) {
+            onChange(changeValue);
+        }
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        setFocusRequested(false);
+        if (readOnly) {
+            return;
+        }
+        // Always reported: the form marks the field touched and clears its focus
+        // tracking from here. Committed only on a real change, so leaving a generated
+        // id untouched does not count as editing it.
+        const transformed = onEditEndsValueTransformer?.(value) ?? value;
+        onBlur?.(e.nativeEvent);
+        if (transformed !== value) {
+            onChange(transformed);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.currentTarget.blur();
+        }
+    };
+    if (readOnly && value.length === 0) {
+        return null;
+    }
+    return (_jsxs("span", { ref: setRootElement, className: cx(classes.root, size, className, "s-editable_row", {
+            readOnly,
+            "is-active": !readOnly && ((revealOnHover && isHovered) || isFocused),
+            "is-error": errorVisible,
+            "is-warning": warningVisible,
+        }), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [prefix ? _jsx("span", { className: classes.prefix, children: prefix }) : null, _jsxs("span", { className: classes.field, children: [_jsx("span", { "aria-hidden": true, className: classes.sizer, children: value || placeholder || ZERO_WIDTH_SPACE }), _jsx("input", { ref: setInputElement, type: "text", className: cx(classes.input, "s-editable_row_input"), value: value, placeholder: placeholder, readOnly: readOnly, "aria-label": ariaLabel, "aria-invalid": showError, "aria-describedby": describedBy, onChange: (e) => handleChange(e.target.value.toString()), onKeyDown: handleKeyDown, onFocus: () => {
+                            setIsFocused(true);
+                            // Focus asked for from code offers the value for replacement; a
+                            // click keeps the caret where the user put it.
+                            if (focusRequested) {
+                                inputElement?.select();
+                            }
+                        }, onBlur: handleBlur })] }), rootElement ? (_jsx(EditableRowError, { alignTo: rootElement, showError: errorVisible, errorMessage: errorMessage, errorId: errorId, showWarning: warningVisible, warningMessage: warningMessage, warningId: warningId })) : null] }));
+});