@perses-dev/plugin-system 0.55.0-beta.2 → 0.55.0-beta.3

package/dist/cjs/runtime/DataQueriesProvider/DataQueriesProvider.js

@@ -36,13 +36,14 @@ _export(exports, {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _timeseriesqueries = require("../time-series-queries");
-const _tracequeries = require("../trace-queries");
-const _profilequeries = require("../profile-queries");
 const _alertsqueries = require("../alerts-queries");
+const _jsonqueries = require("../json-queries");
+const _logqueries = require("../log-queries");
+const _profilequeries = require("../profile-queries");
 const _silencesqueries = require("../silences-queries");
+const _timeseriesqueries = require("../time-series-queries");
+const _tracequeries = require("../trace-queries");
 const _UsageMetricsProvider = require("../UsageMetricsProvider");
-const _logqueries = require("../log-queries");
 const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
@@ -86,6 +87,8 @@ function DataQueriesProvider(props) {
     const alertsResults = (0, _alertsqueries.useAlertsQueries)(alertsQueries);
     const silencesQueries = definitions.filter((definition)=>definition.kind === 'SilencesQuery');
     const silencesResults = (0, _silencesqueries.useSilencesQueries)(silencesQueries);
+    const jsonQueries = definitions.filter((definition)=>definition.kind === 'JsonQuery');
+    const jsonResults = (0, _jsonqueries.useJsonQueries)(jsonQueries);
     const refetchAll = (0, _react.useCallback)(()=>{
         timeSeriesResults.forEach((result)=>result.refetch());
         traceResults.forEach((result)=>result.refetch());
@@ -93,13 +96,15 @@ function DataQueriesProvider(props) {
         logResults.forEach((result)=>result.refetch());
         alertsResults.forEach((result)=>result.refetch());
         silencesResults.forEach((result)=>result.refetch());
+        jsonResults.forEach((result)=>result.refetch());
     }, [
         timeSeriesResults,
         traceResults,
         profileResults,
         logResults,
         alertsResults,
-        silencesResults
+        silencesResults,
+        jsonResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
         const mergedQueryResults = [
@@ -108,7 +113,8 @@ function DataQueriesProvider(props) {
             ...(0, _model.transformQueryResults)(profileResults, profileQueries),
             ...(0, _model.transformQueryResults)(logResults, logQueries),
             ...(0, _model.transformQueryResults)(alertsResults, alertsQueries),
-            ...(0, _model.transformQueryResults)(silencesResults, silencesQueries)
+            ...(0, _model.transformQueryResults)(silencesResults, silencesQueries),
+            ...(0, _model.transformQueryResults)(jsonResults, jsonQueries)
         ];
         if (queryOptions?.enabled) {
             for (const result of mergedQueryResults){
@@ -138,6 +144,8 @@ function DataQueriesProvider(props) {
         profileResults,
         silencesQueries,
         silencesResults,
+        jsonQueries,
+        jsonResults,
         timeSeriesQueries,
         timeSeriesResults,
         traceQueries,

package/dist/cjs/runtime/TimeRangeProvider/TimeRangeProvider.js

@@ -38,10 +38,11 @@ _export(exports, {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _spec = require("@perses-dev/spec");
 const _reactquery = require("@tanstack/react-query");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _refreshinterval = require("./refresh-interval");
+const _TimeRangeSettingsProvider = require("./TimeRangeSettingsProvider");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -101,6 +102,7 @@ function useSuggestedStepMs(width) {
 }
 function TimeRangeProvider(props) {
     const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
+    const disableAutoRefresh = (0, _TimeRangeSettingsProvider.useDisableAutoRefreshSetting)();
     const queryClient = (0, _reactquery.useQueryClient)();
     const [absoluteTimeRange, setAbsoluteTimeRange] = (0, _react.useState)((0, _spec.isRelativeTimeRange)(timeRange) ? (0, _spec.toAbsoluteTimeRange)(timeRange) : timeRange);
     const handleSetTimeRange = (0, _react.useCallback)((value)=>{
@@ -109,6 +111,16 @@ function TimeRangeProvider(props) {
     }, [
         setTimeRange
     ]);
+    // When auto-refresh is disabled by admin, leave URL/spec values untouched and no-op changes.
+    const handleSetRefreshInterval = (0, _react.useCallback)((value)=>{
+        if (disableAutoRefresh) {
+            return;
+        }
+        setRefreshInterval(value);
+    }, [
+        disableAutoRefresh,
+        setRefreshInterval
+    ]);
     // Refresh is called when clicking on the refresh button, it refreshes all queries including variables
     const refresh = (0, _react.useCallback)(()=>{
         setAbsoluteTimeRange((0, _spec.isRelativeTimeRange)(timeRange) ? (0, _spec.toAbsoluteTimeRange)(timeRange) : timeRange);
@@ -161,7 +173,9 @@ function TimeRangeProvider(props) {
         queryClient,
         timeRange
     ]);
-    const refreshIntervalInMs = (0, _react.useMemo)(()=>(0, _refreshinterval.getRefreshIntervalInMs)(refreshInterval), [
+    // Gate the timer only — do not rewrite refreshInterval / ?refresh= so re-enabling restores them.
+    const refreshIntervalInMs = (0, _react.useMemo)(()=>disableAutoRefresh ? 0 : (0, _refreshinterval.getRefreshIntervalInMs)(refreshInterval), [
+        disableAutoRefresh,
         refreshInterval
     ]);
     (0, _react.useEffect)(()=>{
@@ -183,7 +197,7 @@ function TimeRangeProvider(props) {
             refresh,
             refreshInterval: refreshInterval,
             refreshIntervalInMs: refreshIntervalInMs,
-            setRefreshInterval: setRefreshInterval
+            setRefreshInterval: handleSetRefreshInterval
         };
     }, [
         absoluteTimeRange,
@@ -191,7 +205,7 @@ function TimeRangeProvider(props) {
         refresh,
         refreshInterval,
         refreshIntervalInMs,
-        setRefreshInterval,
+        handleSetRefreshInterval,
         timeRange
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {

package/dist/cjs/runtime/TimeRangeProvider/TimeRangeProviders.js

@@ -29,10 +29,10 @@ _export(exports, {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _components = require("@perses-dev/components");
-const _TimeRangeProvider = require("./TimeRangeProvider");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _queryparams = require("./query-params");
+const _TimeRangeProvider = require("./TimeRangeProvider");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

package/dist/cjs/runtime/TimeRangeProvider/TimeRangeSettingsProvider.js

@@ -27,6 +27,9 @@ _export(exports, {
     get TimeRangeSettingsProvider () {
         return TimeRangeSettingsProvider;
     },
+    get useDisableAutoRefreshSetting () {
+        return useDisableAutoRefreshSetting;
+    },
     get useShowCustomTimeRangeSetting () {
         return useShowCustomTimeRangeSetting;
     },
@@ -44,8 +47,8 @@ _export(exports, {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
 const _components = require("@perses-dev/components");
+const _react = require("react");
 const DEFAULT_OPTIONS = [
     '5m',
     '15m',
@@ -60,6 +63,7 @@ const DEFAULT_OPTIONS = [
 const defaultTimeRangeSettings = {
     showCustom: true,
     showZoomButtons: true,
+    disableAutoRefresh: false,
     options: DEFAULT_OPTIONS.map((duration)=>(0, _components.buildRelativeTimeOption)(duration))
 };
 const TimeRangeSettingsContext = /*#__PURE__*/ (0, _react.createContext)(defaultTimeRangeSettings);
@@ -94,16 +98,25 @@ function useTimeRangeOptionsSetting(override) {
     }
     return showCustomTimeRange;
 }
+function useDisableAutoRefreshSetting(override) {
+    const disableAutoRefresh = useTimeRangeSettings().disableAutoRefresh;
+    if (override !== undefined) {
+        return override;
+    }
+    return disableAutoRefresh;
+}
 function TimeRangeSettingsProvider(props) {
     const ctx = (0, _react.useMemo)(()=>{
         return {
             showCustom: props.showCustom === undefined ? defaultTimeRangeSettings.showCustom : props.showCustom,
             showZoomButtons: props.showZoomButtons === undefined ? defaultTimeRangeSettings.showZoomButtons : props.showZoomButtons,
+            disableAutoRefresh: props.disableAutoRefresh === undefined ? defaultTimeRangeSettings.disableAutoRefresh : props.disableAutoRefresh,
             options: props.options === undefined ? defaultTimeRangeSettings.options : props.options
         };
     }, [
         props.showCustom,
         props.showZoomButtons,
+        props.disableAutoRefresh,
         props.options
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeSettingsContext.Provider, {

package/dist/cjs/runtime/TimeRangeProvider/query-params.js

@@ -55,10 +55,10 @@ _export(exports, {
         return useTimeZoneParams;
     }
 });
+const _spec = require("@perses-dev/spec");
+const _datefns = require("date-fns");
 const _react = require("react");
 const _usequeryparams = require("use-query-params");
-const _datefns = require("date-fns");
-const _spec = require("@perses-dev/spec");
 /* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
     // '' or []
     if (!input || input.length === 0 && (!allowEmptyString || allowEmptyString && input !== '')) {

package/dist/cjs/runtime/alerts-queries.js

@@ -31,8 +31,8 @@ _export(exports, {
 const _reactquery = require("@tanstack/react-query");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
-const _variables = require("./variables");
 const _utils = require("./utils");
+const _variables = require("./variables");
 const ALERTS_QUERY_KEY = 'AlertsQuery';
 function useAlertsQueries(definitions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();

package/dist/cjs/runtime/annotations.js

@@ -32,11 +32,11 @@ _export(exports, {
     }
 });
 const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
 const _TimeRangeProvider = require("./TimeRangeProvider");
-const _variables = require("./variables");
-const _datasources = require("./datasources");
 const _utils = require("./utils");
+const _variables = require("./variables");
 const ANNOTATION_KEY = 'Annotation';
 function useAnnotationContext() {
     const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();

package/dist/cjs/runtime/index.js

@@ -24,6 +24,7 @@ _export_star(require("./time-series-queries"), exports);
 _export_star(require("./trace-queries"), exports);
 _export_star(require("./profile-queries"), exports);
 _export_star(require("./alerts-queries"), exports);
+_export_star(require("./json-queries"), exports);
 _export_star(require("./silences-queries"), exports);
 _export_star(require("./item-actions"), exports);
 _export_star(require("./DataQueriesProvider"), exports);

package/dist/cjs/runtime/item-actions.js

@@ -28,7 +28,7 @@ const BODY_METHODS = new Set([
 ]);
 function buildWebhookHeaders(action) {
     const headers = {
-        ...action.headers ?? {}
+        ...action.headers
     };
     const contentType = action.contentType ?? 'none';
     const supportsBody = BODY_METHODS.has(action.method);

package/dist/cjs/runtime/json-queries.js

@@ -0,0 +1,70 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get JSON_QUERY_KEY () {
+        return JSON_QUERY_KEY;
+    },
+    get useJsonQueries () {
+        return useJsonQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _variables = require("./variables");
+const JSON_QUERY_KEY = 'JsonQuery';
+function useJsonQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    const variableValues = (0, _variables.useVariableValues)();
+    const context = {
+        variableState: variableValues,
+        datasourceStore
+    };
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition)=>{
+            const queryKey = [
+                'query',
+                JSON_QUERY_KEY,
+                definition,
+                variableValues
+            ];
+            const jsonQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                queryKey,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+                staleTime: Infinity,
+                queryFn: async ({ signal })=>{
+                    const plugin = await getPlugin({
+                        kind: JSON_QUERY_KEY,
+                        name: jsonQueryKind
+                    });
+                    return plugin.getJsonData(definition.spec.plugin.spec, context, signal);
+                },
+                structuralSharing: false
+            };
+        })
+    });
+}

package/dist/cjs/runtime/silences-queries.js

@@ -31,8 +31,8 @@ _export(exports, {
 const _reactquery = require("@tanstack/react-query");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
-const _variables = require("./variables");
 const _utils = require("./utils");
+const _variables = require("./variables");
 const SILENCES_QUERY_KEY = 'SilencesQuery';
 function useSilencesQueries(definitions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();

package/dist/cjs/runtime/time-series-queries.js

@@ -38,9 +38,9 @@ _export(exports, {
     }
 });
 const _reactquery = require("@tanstack/react-query");
-const _TimeRangeProvider = require("./TimeRangeProvider");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
+const _TimeRangeProvider = require("./TimeRangeProvider");
 const _utils = require("./utils");
 const _variables = require("./variables");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';

package/dist/cjs/runtime/trace-queries.js

@@ -32,8 +32,8 @@ const _reactquery = require("@tanstack/react-query");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
 const _TimeRangeProvider = require("./TimeRangeProvider");
-const _variables = require("./variables");
 const _utils = require("./utils");
+const _variables = require("./variables");
 const TRACE_QUERY_KEY = 'TraceQuery';
 function useTraceQueries(definitions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();

package/dist/cjs/schema/panel.js

@@ -28,15 +28,29 @@ _export(exports, {
         return panelEditorSchema;
     }
 });
-const _zod = require("zod");
 const _spec = require("@perses-dev/spec");
+const _zod = require("zod");
+const layoutDefinitionSchema = _zod.z.object({
+    width: _zod.z.number(),
+    height: _zod.z.number(),
+    repeatVariable: _zod.z.object({
+        value: _zod.z.string(),
+        maxPer: _zod.z.number().min(1).max(12).optional(),
+        alignment: _zod.z.enum([
+            'horizontal',
+            'vertical'
+        ]).optional()
+    }).optional()
+}).optional();
 const panelEditorSchema = _zod.z.object({
     groupId: _zod.z.number(),
-    panelDefinition: _spec.panelDefinitionSchema
+    panelDefinition: _spec.panelDefinitionSchema,
+    layoutDefinition: layoutDefinitionSchema
 });
 function buildPanelEditorSchema(pluginSchema) {
     return _zod.z.object({
         groupId: _zod.z.number(),
-        panelDefinition: (0, _spec.buildPanelDefinitionSchema)(pluginSchema)
+        panelDefinition: (0, _spec.buildPanelDefinitionSchema)(pluginSchema),
+        layoutDefinition: layoutDefinitionSchema
     });
 }

package/dist/cjs/test/mock-data.js

@@ -30,6 +30,9 @@ _export(exports, {
     get MOCK_INVALID_PLUGIN_MODULE () {
         return MOCK_INVALID_PLUGIN_MODULE;
     },
+    get MOCK_JSON_DATA () {
+        return MOCK_JSON_DATA;
+    },
     get MOCK_LOG_DATA () {
         return MOCK_LOG_DATA;
     },
@@ -221,6 +224,12 @@ const MOCK_SILENCES_DATA = {
         }
     ]
 };
+const MOCK_JSON_DATA = {
+    data: {
+        status: 'ok',
+        value: 42
+    }
+};
 const MOCK_VALID_PLUGIN_METADATA = {
     kind: 'Panel',
     spec: {

package/dist/cjs/test/setup-tests.js

@@ -10,11 +10,17 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-// Add testing library assertions
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-require("@testing-library/jest-dom/extend-expect");
+const _matchers = /*#__PURE__*/ _interop_require_default(require("@testing-library/jest-dom/matchers"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// Add testing library assertions
+expect.extend(_matchers.default);
 // Always mock e-charts during tests since we don't have a proper canvas in jsdom
-jest.mock('echarts/core');
+vi.mock('echarts/core');

package/dist/cjs/test/test-plugins/ernie/index.js

@@ -86,7 +86,64 @@ const ErnieVariable2 = {
             variableOption2: ''
         })
 };
+const ErnieDatasource = {
+    createClient: ()=>({}),
+    createInitialOptions: ()=>({}),
+    healthCheckPath: '/api/v1/query',
+    OptionsEditorComponent: function ErnieDatasourceEditor({ value, onChange, testConnection }) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
+                    htmlFor: "datasource-url",
+                    children: "ErnieDatasource editor"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                    type: "text",
+                    id: "datasource-url",
+                    value: value.url ?? '',
+                    onChange: (e)=>onChange({
+                            ...value,
+                            url: e.target.value
+                        })
+                }),
+                testConnection && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    onClick: testConnection,
+                    children: "test-connection-trigger"
+                })
+            ]
+        });
+    }
+};
+const ErnieDatasourceNoHealthCheck = {
+    createClient: ()=>({}),
+    createInitialOptions: ()=>({}),
+    OptionsEditorComponent: function ErnieDatasourceNoHealthCheckEditor({ value, onChange, testConnection }) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
+                    htmlFor: "datasource-url",
+                    children: "ErnieDatasourceNoHealthCheck editor"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                    type: "text",
+                    id: "datasource-url",
+                    value: value.url ?? '',
+                    onChange: (e)=>onChange({
+                            ...value,
+                            url: e.target.value
+                        })
+                }),
+                testConnection && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    onClick: testConnection,
+                    children: "test-connection-trigger"
+                })
+            ]
+        });
+    }
+};
 const plugins = {
     'Variable:ErnieVariable1::1.0.0': ErnieVariable1,
-    'Variable:ErnieVariable2::1.0.0': ErnieVariable2
+    'Variable:ErnieVariable2::1.0.0': ErnieVariable2,
+    'Datasource:ErnieDatasource::1.0.0': ErnieDatasource,
+    'Datasource:ErnieDatasourceNoHealthCheck::1.0.0': ErnieDatasourceNoHealthCheck
 };

package/dist/cjs/utils/csv-export.js

@@ -200,7 +200,7 @@ const exportDataAsCSV = ({ data })=>{
             if (!result[dateTime]) {
                 result[dateTime] = {};
             }
-            /* linter complains, so assert result[dateTime] 
+            /* linter complains, so assert result[dateTime]
           It has already been checked by the if statement
       */ result[dateTime][currentSeriesInfo.columnName] = value;
         }

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.d.ts

@@ -1,6 +1,6 @@
-import { DispatchWithoutAction, ReactElement } from 'react';
-import { AnnotationSpec } from '@perses-dev/spec';
 import { Action } from '@perses-dev/client';
+import { AnnotationSpec } from '@perses-dev/spec';
+import { DispatchWithoutAction, ReactElement } from 'react';
 interface AnnotationEditorFormProps {
     initialAnnotationSpec: AnnotationSpec;
     action: Action;

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAclD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAmD5C,UAAU,yBAAyB;IACjC,qBAAqB,EAAE,cAAc,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,GAAG,YAAY,CAuK1C"}
+{"version":3,"file":"AnnotationEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAU5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAqDnF,UAAU,yBAAyB;IACjC,qBAAqB,EAAE,cAAc,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,GAAG,YAAY,CAuK1C"}

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.js

@@ -11,15 +11,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useCallback, useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Box, Typography, TextField, Grid, Divider, Stack, IconButton } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions, OptionsColorPicker, getSubmitText, getTitleAction } from '@perses-dev/components';
-import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import InvertColorsIcon from 'mdi-material-ui/InvertColors';
-import { PluginEditor } from '../../PluginEditor';
+import { useCallback, useState } from 'react';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useValidationSchemas } from '../../../context';
+import { PluginEditor } from '../../PluginEditor';
 import { DEFAULT_ANNOTATION_COLOR } from '../constants';
 import { AnnotationPreview } from './AnnotationPreview';
 function FallbackPreview() {

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';\nimport { Box, Typography, TextField, Grid, Divider, Stack, IconButton } from '@mui/material';\nimport { AnnotationSpec } from '@perses-dev/spec';\nimport {\n  DiscardChangesConfirmationDialog,\n  ErrorAlert,\n  ErrorBoundary,\n  FormActions,\n  OptionsColorPicker,\n  getSubmitText,\n  getTitleAction,\n} from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useQueryClient } from '@tanstack/react-query';\nimport InvertColorsIcon from 'mdi-material-ui/InvertColors';\nimport { Action } from '@perses-dev/client';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { DEFAULT_ANNOTATION_COLOR } from '../constants';\nimport { AnnotationPreview } from './AnnotationPreview';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing annotations</div>;\n}\n\ninterface KindAnnotationEditorFormProps {\n  action: Action;\n  control: Control<AnnotationSpec>;\n  onRunQuery: () => void;\n}\n\nfunction AnnotationPluginControl({ action, control, onRunQuery }: KindAnnotationEditorFormProps): ReactElement {\n  const plugin = useWatch<AnnotationSpec, 'plugin'>({ control, name: 'plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  return (\n    <Controller\n      control={control}\n      name=\"plugin\"\n      render={({ field }) => {\n        return (\n          <PluginEditor\n            withRunQueryButton\n            width=\"100%\"\n            pluginTypes={['Annotation']}\n            pluginKindLabel=\"Source\"\n            value={{\n              selection: {\n                type: 'Annotation',\n                kind: kind ?? 'StaticListAnnotation',\n              },\n              spec: pluginSpec ?? {},\n            }}\n            isReadonly={action === 'read'}\n            onChange={(v) => {\n              field.onChange({ kind: v.selection.kind, spec: v.spec });\n            }}\n            onRunQuery={onRunQuery}\n          />\n        );\n      }}\n    />\n  );\n}\n\ninterface AnnotationEditorFormProps {\n  initialAnnotationSpec: AnnotationSpec;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: AnnotationSpec) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function AnnotationEditorForm({\n  initialAnnotationSpec,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: AnnotationEditorFormProps): ReactElement {\n  const queryClient = useQueryClient();\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { annotationEditorSchema } = useValidationSchemas();\n  const form = useForm<AnnotationSpec>({\n    resolver: zodResolver(annotationEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialAnnotationSpec,\n  });\n\n  /* We use `previewDefinition` to explicitly update the spec\n   * that will be used for preview when running query. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   * Using structuredClone to not have reference issues with nested objects.\n   */\n  const [previewSpec, setPreviewSpec] = useState(structuredClone(form.getValues()));\n\n  const handleRunQuery = useCallback(async () => {\n    const values = form.getValues();\n    if (JSON.stringify(previewSpec) === JSON.stringify(values)) {\n      await queryClient.invalidateQueries({ queryKey: ['annotation', previewSpec] });\n    } else {\n      setPreviewSpec(structuredClone(values));\n    }\n  }, [form, previewSpec, queryClient]);\n\n  const processForm: SubmitHandler<AnnotationSpec> = (data: AnnotationSpec) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(data);\n  };\n\n  function handleCancel(): void {\n    if (JSON.stringify(initialAnnotationSpec) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Annotation</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Stack direction=\"row\" gap={1}>\n              <Controller\n                control={form.control}\n                name=\"display.color\"\n                render={({ field }) => {\n                  const isEnabled = field.value !== undefined;\n                  return (\n                    <>\n                      {isEnabled ? (\n                        <OptionsColorPicker\n                          size=\"medium\"\n                          label=\"annotation\"\n                          color={field.value ?? DEFAULT_ANNOTATION_COLOR}\n                          onColorChange={(color) => field.onChange(color)}\n                          onClear={() => field.onChange(undefined)}\n                        />\n                      ) : (\n                        <IconButton size=\"medium\" onClick={() => field.onChange(DEFAULT_ANNOTATION_COLOR)}>\n                          <InvertColorsIcon />\n                        </IconButton>\n                      )}\n                    </>\n                  );\n                }}\n              />\n\n              <Controller\n                control={form.control}\n                name=\"display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={field.value ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Stack>\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n          <AnnotationPreview spec={previewSpec} sx={{ marginY: 2 }} />\n        </ErrorBoundary>\n\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <AnnotationPluginControl action={action} control={form.control} onRunQuery={handleRunQuery} />\n        </ErrorBoundary>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useCallback","useState","Box","Typography","TextField","Grid","Divider","Stack","IconButton","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","OptionsColorPicker","getSubmitText","getTitleAction","Controller","FormProvider","useForm","useWatch","zodResolver","useQueryClient","InvertColorsIcon","PluginEditor","useValidationSchemas","DEFAULT_ANNOTATION_COLOR","AnnotationPreview","FallbackPreview","div","AnnotationPluginControl","action","control","onRunQuery","plugin","name","kind","pluginSpec","spec","render","field","withRunQueryButton","width","pluginTypes","pluginKindLabel","value","selection","type","isReadonly","onChange","v","AnnotationEditorForm","initialAnnotationSpec","isDraft","onActionChange","onSave","onClose","onDelete","queryClient","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","annotationEditorSchema","form","resolver","mode","defaultValues","previewSpec","setPreviewSpec","structuredClone","getValues","handleRunQuery","values","JSON","stringify","invalidateQueries","queryKey","processForm","data","handleCancel","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","disabled","readOnly","error","helperText","message","event","direction","gap","isEnabled","size","color","onColorChange","onClear","onClick","FallbackComponent","resetKeys","marginY","description","isOpen","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Typography, TextField, Grid, Divider, Stack, IconButton } from '@mui/material';\nimport { Action } from '@perses-dev/client';\nimport {\n  DiscardChangesConfirmationDialog,\n  ErrorAlert,\n  ErrorBoundary,\n  FormActions,\n  OptionsColorPicker,\n  getSubmitText,\n  getTitleAction,\n} from '@perses-dev/components';\nimport { AnnotationSpec } from '@perses-dev/spec';\nimport { useQueryClient } from '@tanstack/react-query';\nimport InvertColorsIcon from 'mdi-material-ui/InvertColors';\nimport { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\n\nimport { useValidationSchemas } from '../../../context';\nimport { PluginEditor } from '../../PluginEditor';\nimport { DEFAULT_ANNOTATION_COLOR } from '../constants';\nimport { AnnotationPreview } from './AnnotationPreview';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing annotations</div>;\n}\n\ninterface KindAnnotationEditorFormProps {\n  action: Action;\n  control: Control<AnnotationSpec>;\n  onRunQuery: () => void;\n}\n\nfunction AnnotationPluginControl({ action, control, onRunQuery }: KindAnnotationEditorFormProps): ReactElement {\n  const plugin = useWatch<AnnotationSpec, 'plugin'>({ control, name: 'plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  return (\n    <Controller\n      control={control}\n      name=\"plugin\"\n      render={({ field }) => {\n        return (\n          <PluginEditor\n            withRunQueryButton\n            width=\"100%\"\n            pluginTypes={['Annotation']}\n            pluginKindLabel=\"Source\"\n            value={{\n              selection: {\n                type: 'Annotation',\n                kind: kind ?? 'StaticListAnnotation',\n              },\n              spec: pluginSpec ?? {},\n            }}\n            isReadonly={action === 'read'}\n            onChange={(v) => {\n              field.onChange({ kind: v.selection.kind, spec: v.spec });\n            }}\n            onRunQuery={onRunQuery}\n          />\n        );\n      }}\n    />\n  );\n}\n\ninterface AnnotationEditorFormProps {\n  initialAnnotationSpec: AnnotationSpec;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: AnnotationSpec) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function AnnotationEditorForm({\n  initialAnnotationSpec,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: AnnotationEditorFormProps): ReactElement {\n  const queryClient = useQueryClient();\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { annotationEditorSchema } = useValidationSchemas();\n  const form = useForm<AnnotationSpec>({\n    resolver: zodResolver(annotationEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialAnnotationSpec,\n  });\n\n  /* We use `previewDefinition` to explicitly update the spec\n   * that will be used for preview when running query. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   * Using structuredClone to not have reference issues with nested objects.\n   */\n  const [previewSpec, setPreviewSpec] = useState(structuredClone(form.getValues()));\n\n  const handleRunQuery = useCallback(async () => {\n    const values = form.getValues();\n    if (JSON.stringify(previewSpec) === JSON.stringify(values)) {\n      await queryClient.invalidateQueries({ queryKey: ['annotation', previewSpec] });\n    } else {\n      setPreviewSpec(structuredClone(values));\n    }\n  }, [form, previewSpec, queryClient]);\n\n  const processForm: SubmitHandler<AnnotationSpec> = (data: AnnotationSpec) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(data);\n  };\n\n  function handleCancel(): void {\n    if (JSON.stringify(initialAnnotationSpec) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Annotation</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Stack direction=\"row\" gap={1}>\n              <Controller\n                control={form.control}\n                name=\"display.color\"\n                render={({ field }) => {\n                  const isEnabled = field.value !== undefined;\n                  return (\n                    <>\n                      {isEnabled ? (\n                        <OptionsColorPicker\n                          size=\"medium\"\n                          label=\"annotation\"\n                          color={field.value ?? DEFAULT_ANNOTATION_COLOR}\n                          onColorChange={(color) => field.onChange(color)}\n                          onClear={() => field.onChange(undefined)}\n                        />\n                      ) : (\n                        <IconButton size=\"medium\" onClick={() => field.onChange(DEFAULT_ANNOTATION_COLOR)}>\n                          <InvertColorsIcon />\n                        </IconButton>\n                      )}\n                    </>\n                  );\n                }}\n              />\n\n              <Controller\n                control={form.control}\n                name=\"display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={field.value ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Stack>\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n          <AnnotationPreview spec={previewSpec} sx={{ marginY: 2 }} />\n        </ErrorBoundary>\n\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <AnnotationPluginControl action={action} control={form.control} onRunQuery={handleRunQuery} />\n        </ErrorBoundary>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["zodResolver","Box","Typography","TextField","Grid","Divider","Stack","IconButton","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","OptionsColorPicker","getSubmitText","getTitleAction","useQueryClient","InvertColorsIcon","useCallback","useState","Controller","FormProvider","useForm","useWatch","useValidationSchemas","PluginEditor","DEFAULT_ANNOTATION_COLOR","AnnotationPreview","FallbackPreview","div","AnnotationPluginControl","action","control","onRunQuery","plugin","name","kind","pluginSpec","spec","render","field","withRunQueryButton","width","pluginTypes","pluginKindLabel","value","selection","type","isReadonly","onChange","v","AnnotationEditorForm","initialAnnotationSpec","isDraft","onActionChange","onSave","onClose","onDelete","queryClient","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","annotationEditorSchema","form","resolver","mode","defaultValues","previewSpec","setPreviewSpec","structuredClone","getValues","handleRunQuery","values","JSON","stringify","invalidateQueries","queryKey","processForm","data","handleCancel","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","disabled","readOnly","error","helperText","message","event","direction","gap","isEnabled","size","color","onColorChange","onClear","onClick","FallbackComponent","resetKeys","marginY","description","isOpen","onDiscardChanges"],"mappings":"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"}