@dynatrace/strato-components 3.7.0 → 3.8.0

package/editors/code-editor/CodeEditor.d.ts

@@ -1,91 +1,24 @@
 import { Language } from '@codemirror/language';
 import { Extension } from '@codemirror/state';
-import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
-import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
-import type { DataTestId } from '../../core/types/data-props.js';
-import type { FormControlStateProps } from '../../core/types/form-control-state.js';
-import type { MaskingProps } from '../../core/types/masking-props.js';
-import type { StylingProps } from '../../core/types/styling-props.js';
 import type { AutocompleteProvider } from '../base-code-editor/auto-completion/autocompletion.extension.js';
 import type { ListAutocompletionConfig } from '../base-code-editor/auto-completion/list/list-autocompletion-types.js';
+import { type SharedBaseCodeEditorProps } from '../base-code-editor/BaseCodeEditor.js';
 import type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';
 import type { GutterConfiguration } from '../base-code-editor/configuration/getDefaultConfigurations.js';
 /**
  * Props for the `CodeEditor` component.
  * @public
  */
-export interface CodeEditorBaseProps extends FormControlStateProps, StylingProps, DataTestId, AriaLabelingProps, MaskingProps, BehaviorTrackingProps {
+export interface CodeEditorBaseProps extends SharedBaseCodeEditorProps {
     /**
      * The language for syntax highlighting and autocompletion.
      * @defaultValue 'other'
      */
     language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';
-    /**
-     * The ID for the DOM element.
-     */
-    id?: string;
-    /**
-     * Callback that is called when the value in the editor changes.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Displayed initially in the editor when there is no other content.
-     */
-    placeholder?: string;
-    /**
-     * Whether spellcheck should be enabled.
-     * @defaultValue false
-     */
-    spellCheck?: boolean;
-    /**
-     * If set to true, the code editor uses the full height available in its parent.
-     * @defaultValue false
-     */
-    fullHeight?: boolean;
-    /**
-     * The start indices (character position) that should be folded initially in uncontrolled scenarios.
-     */
-    defaultFolding?: number[];
-    /**
-     * The start indices (character position) that should be folded initially in controlled scenarios.
-     */
-    folding?: number[];
-    /**
-     * Callback that is called when folding changes.
-     */
-    onFoldingChange?: (values: number[]) => void;
-    /**
-     * Whether the input is readonly.
-     * @defaultValue false
-     */
-    readOnly?: boolean;
-    /**
-     * Whether long lines should be wrapped.
-     * @defaultValue false
-     */
-    lineWrap?: boolean;
-    /**
-     * Callback that is called when the editor loses focus.
-     */
-    onBlur?: (e: FocusEvent) => void;
-    /**
-     * Callback that is called when the editor receives focus.
-     */
-    onFocus?: (e: FocusEvent) => void;
     /**
      * Provides the gutter configuration to display a marker next to the fold gutter.
      */
     gutterConfiguration?: GutterConfiguration;
-    /**
-     * Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins.
-     * @defaultValue 'default'
-     */
-    size?: 'default' | 'condensed';
-    /**
-     * If set to true, `aria-required` will be set to true on the input element.
-     * @defaultValue false
-     */
-    required?: boolean;
 }
 /**
  * Props for the `CodeEditor` in controlled usage.
@@ -111,6 +44,11 @@ export type CodeEditorUncontrolledProps = {
      * The default value of the editor for uncontrolled usage.
      */
     defaultValue?: string;
+    /**
+     * `isControlled` has no effect without `value`.
+     * @deprecated [APPDEV-17404] BREAKING-CHANGE: Will be removed when controlled behaviour becomes the default.
+     */
+    isControlled?: never;
 };
 /**
  * Props for the `CodeEditor` component.

package/editors/code-editor/CodeEditor.js

@@ -23,15 +23,18 @@ __export(CodeEditor_exports, {
 module.exports = __toCommonJS(CodeEditor_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react_error_boundary = require("react-error-boundary");
 var import_react_intl = require("react-intl");
 var import_codeEditorMessages = require("./codeEditorMessages.js");
 var import_languages = require("./languages/languages.js");
+var import_ErrorFallback = require("../../core/components/error-fallback/ErrorFallback.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
+var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
 var import_BaseCodeEditor = require("../base-code-editor/BaseCodeEditor.js");
 const COMPONENT_NAME = "CodeEditor";
-const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
+const CodeEditorInner = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
   const {
     id,
@@ -53,6 +56,9 @@ const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
     gutterConfiguration,
     size = "default",
     required = false,
+    // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    isControlled = false,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
@@ -89,6 +95,7 @@ const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
       gutterConfiguration,
       size,
       required,
+      isControlled,
       className: consumerClassName,
       style: consumerStyle,
       "data-testid": dataTestId,
@@ -101,6 +108,20 @@ const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
     }
   );
 });
+const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
+  const stratoLogger = (0, import_react.useMemo)(
+    () => import_sdk_logger.createStratoLogger.bind({ id: props.id })(COMPONENT_NAME),
+    [props.id]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_error_boundary.ErrorBoundary,
+    {
+      onError: (error) => stratoLogger.error(error?.message, error),
+      FallbackComponent: (fallbackProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ErrorFallback.ErrorFallback, { ...fallbackProps }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditorInner, { ...props, ref })
+    }
+  );
+});
 function getLanguageConfig(languageConfig, readOnly) {
   return {
     language: languageConfig.language,
@@ -111,4 +132,5 @@ function getLanguageConfig(languageConfig, readOnly) {
     extendWith: languageConfig.extendWith
   };
 }
+CodeEditorInner.displayName = COMPONENT_NAME;
 CodeEditor.displayName = COMPONENT_NAME;

package/editors/dql-editor/DQLEditor.d.ts

@@ -1,68 +1,11 @@
 import type { DQLEditorValidityInfo } from './dql-editor-types.js';
-import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
-import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
-import type { DataTestId } from '../../core/types/data-props.js';
-import type { FormControlStateProps } from '../../core/types/form-control-state.js';
-import type { MaskingProps } from '../../core/types/masking-props.js';
-import type { StylingProps } from '../../core/types/styling-props.js';
 import type { WithChildren } from '../../core/types/with-children.js';
+import { type SharedBaseCodeEditorProps } from '../base-code-editor/BaseCodeEditor.js';
 /**
  * Props for the `DQLEditor` component.
  * @public
  */
-export interface DQLEditorBaseProps extends FormControlStateProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps, WithChildren {
-    /**
-     * The ID for the DOM element.
-     */
-    id?: string;
-    /**
-     * Handler that is called when the value changes.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Displayed initially in the editor when there is no other content.
-     */
-    placeholder?: string;
-    /**
-     * Whether spellcheck should be enabled.
-     * @defaultValue false
-     */
-    spellCheck?: boolean;
-    /**
-     * If set to true, the DQL editor uses the full height available in its parent.
-     * @defaultValue false
-     */
-    fullHeight?: boolean;
-    /**
-     * The start indices (character position) that should be folded initially in uncontrolled scenarios.
-     */
-    defaultFolding?: number[];
-    /**
-     * The start indices (character position) that should be folded initially in controlled scenarios.
-     */
-    folding?: number[];
-    /**
-     * Callback that is called when folding changes.
-     */
-    onFoldingChange?: (values: number[]) => void;
-    /**
-     * Whether the input is readonly.
-     * @defaultValue false
-     */
-    readOnly?: boolean;
-    /**
-     * Whether long lines should be wrapped.
-     * @defaultValue false
-     */
-    lineWrap?: boolean;
-    /**
-     * Callback that is called when the editor loses focus.
-     */
-    onBlur?: (e: FocusEvent) => void;
-    /**
-     * Callback that is called when the editor receives focus.
-     */
-    onFocus?: (e: FocusEvent) => void;
+export interface DQLEditorBaseProps extends SharedBaseCodeEditorProps, WithChildren {
     /**
      * Callback fired when DQL validation starts.
      * This can be used for setting a status that validation is in progress.
@@ -78,16 +21,6 @@ export interface DQLEditorBaseProps extends FormControlStateProps, AriaLabelingP
      * This can be used to get the validation result from outside the editor.
      */
     onValidityChange?: (validityInfo: DQLEditorValidityInfo[]) => void;
-    /**
-     * Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins.
-     * @defaultValue 'default'
-     */
-    size?: 'default' | 'condensed';
-    /**
-     * If set to true, `aria-required` will be set to true on the input element.
-     * @defaultValue false
-     */
-    required?: boolean;
 }
 /**
  * Props for the `DQLEditor` in controlled usage.
@@ -111,6 +44,11 @@ export type DQLEditorUncontrolledProps = {
     value?: never;
     /** The initial contents of the editor for uncontrolled usage. */
     defaultValue?: string;
+    /**
+     * `isControlled` has no effect without `value`.
+     * @deprecated [APPDEV-17404] BREAKING-CHANGE: Will be removed when controlled behaviour becomes the default.
+     */
+    isControlled?: never;
 };
 /**
  * Props for the `DQLEditor` component.

package/editors/dql-editor/DQLEditor.js

@@ -33,15 +33,19 @@ module.exports = __toCommonJS(DQLEditor_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_error_boundary = require("react-error-boundary");
 var import_react_intl = require("react-intl");
 var actionsMenuStyles = __toESM(require("./actions-menu/ActionsMenu.sty.js"));
 var import_ActionsMenu = require("./actions-menu/ActionsMenu.js");
 var import_dql_language = require("./dql/dql-language.js");
 var import_useValidationCallbacks = require("./useValidationCallbacks.js");
 var import_useValidityInfo = require("./useValidityInfo.js");
+var import_ErrorFallback = require("../../core/components/error-fallback/ErrorFallback.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
+var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
+var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
 var import_is_slot = require("../../core/utils/is-slot.js");
 var import_BaseCodeEditor = require("../base-code-editor/BaseCodeEditor.js");
 const COMPONENT_NAME = "DQLEditor";
@@ -74,6 +78,9 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
       onBlur,
       size = "default",
       required,
+      // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      isControlled = false,
       children,
       className: consumerClassName,
       style: consumerStyle,
@@ -85,6 +92,11 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
     const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
     const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
+    const internalEditorRef = (0, import_react.useRef)(null);
+    const mergedEditorRef = (0, import_useMergeRefs.useMergeRefs)([
+      internalEditorRef,
+      forwardedRef
+    ]);
     const internalValueRef = (0, import_react.useRef)(value ?? defaultValue ?? "");
     (0, import_react.useEffect)(() => {
       if (value !== void 0) {
@@ -99,6 +111,17 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
       [onChange]
     );
     const getInternalValue = (0, import_react.useCallback)(() => internalValueRef.current, []);
+    const [formatDqlFn, setFormatDqlFn] = (0, import_react.useState)(void 0);
+    (0, import_react.useEffect)(() => {
+      Promise.resolve().then(() => __toESM(require(
+        /* webpackIgnore: true */
+        "@dynatrace-sdk/dqlint"
+      ))).then(({ formatDql }) => {
+        setFormatDqlFn(() => formatDql);
+      }).catch(() => {
+        setFormatDqlFn(void 0);
+      });
+    }, []);
     const [editorConfig, setEditorConfig] = (0, import_react.useState)();
     const [fireValidationStart, fireValidationEnd] = (0, import_useValidationCallbacks.useValidationCallbacks)(
       onValidationStart,
@@ -129,11 +152,14 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
       actionsMenuStyles.editorWithActionsMenu[size]
     ) : consumerClassName;
     const valueProps = value !== void 0 ? { value } : { defaultValue };
+    const handleFormat = () => {
+      internalEditorRef.current?.format?.();
+    };
     const editor = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_BaseCodeEditor.BaseCodeEditor,
       {
         id,
-        ref: forwardedRef,
+        ref: mergedEditorRef,
         onChange: handleChange,
         placeholder,
         controlState,
@@ -150,6 +176,8 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
         onBlur,
         size,
         required,
+        format: formatDqlFn,
+        isControlled,
         className: editorClassName,
         style: consumerStyle,
         "data-testid": dataTestId,
@@ -171,7 +199,15 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
           ),
           children: [
             editor,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenuInternal, { getValue: getInternalValue, size, children: actionsMenuChildren })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ActionsMenu.ActionsMenuInternal,
+              {
+                getValue: getInternalValue,
+                size,
+                onFormat: formatDqlFn ? handleFormat : void 0,
+                children: actionsMenuChildren
+              }
+            )
           ]
         }
       );
@@ -179,6 +215,20 @@ const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
     return editor;
   }
 );
-const DQLEditor = Object.assign(DQLEditorFwd, {
+const DQLEditorWithErrorBoundary = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
+  const stratoLogger = (0, import_react.useMemo)(
+    () => import_sdk_logger.createStratoLogger.bind({ id: props.id })(COMPONENT_NAME),
+    [props.id]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_error_boundary.ErrorBoundary,
+    {
+      onError: (error) => stratoLogger.error(error?.message, error),
+      FallbackComponent: (fbProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ErrorFallback.ErrorFallback, { ...fbProps }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DQLEditorFwd, { ...props, ref })
+    }
+  );
+});
+const DQLEditor = Object.assign(DQLEditorWithErrorBoundary, {
   ActionsMenu: import_ActionsMenu.ActionsMenu
 });

package/editors/dql-editor/actions-menu/ActionsMenu.css

@@ -1,28 +1,38 @@
-._1okebta0-3-7-0 {
+._1okebta0-3-8-0 {
   position: relative;
   width: 100%;
 }
-._1okebta1-3-7-0 {
+._1okebta1-3-8-0 {
   display: flex;
   flex-grow: 1;
   max-height: 100%;
   min-height: 100%;
 }
-._1okebta2-3-7-0 {
+._1okebta2-3-8-0 {
   position: absolute;
   z-index: var(--dt-elevations-default, 1);
+  top: 0;
+  right: 0;
 }
-._1okebta3-3-7-0 {
-  top: var(--dt-spacings-size-8, 8px);
-  right: var(--dt-spacings-size-8, 8px);
+._1okebta3-3-8-0 {
+  top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
+  right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1okebta4-3-7-0 {
-  top: var(--dt-spacings-size-4, 4px);
-  right: var(--dt-spacings-size-4, 4px);
+._1jgl8s50-3-8-0 ._1okebta3-3-8-0 {
+  top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
+  right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
 }
-._1okebta5-3-7-0 .cm-editor {
-  padding-right: var(--dt-spacings-size-40, 40px);
+._1okebta4-3-8-0 {
+  top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
+  right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1okebta6-3-7-0 .cm-editor {
-  padding-right: var(--dt-spacings-size-28, 28px);
+._1jgl8s50-3-8-0 ._1okebta4-3-8-0 {
+  top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
+  right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
+}
+._1okebta5-3-8-0 .cm-editor {
+  padding-right: calc(var(--dt-spacings-size-40, 40px) + var(--dt-spacings-size-4, 4px));
+}
+._1okebta6-3-8-0 .cm-editor {
+  padding-right: calc(var(--dt-spacings-size-28, 28px) + var(--dt-spacings-size-4, 4px));
 }

package/editors/dql-editor/actions-menu/ActionsMenu.d.ts

@@ -4,8 +4,8 @@ import type { WithChildren } from '../../../core/types/with-children.js';
  * Slot component that enables the actions menu in the DQLEditor.
  *
  * Rendering this component as a child of `DQLEditor` displays a kebab menu
- * with built-in actions (Copy query, Open documentation). Custom menu items can be
- * passed as children and will be rendered between the two built-in actions.
+ * with built-in actions (Copy query, Format query, Open documentation). Custom menu items
+ * can be passed as children and will be rendered between the built-in actions.
  * @public
  */
 export declare const ActionsMenu: (props: WithChildren) => null;
@@ -22,9 +22,13 @@ export interface ActionsMenuInternalProps extends PropsWithChildren {
      * The editor's size variant affecting the trigger button and positioning.
      */
     size: 'default' | 'condensed';
+    /**
+     * When provided, a "Format query" item is shown in the menu.
+     */
+    onFormat?: () => void;
 }
 /**
  * Internal component that renders the DQLEditor actions menu.
  * @internal
  */
-export declare const ActionsMenuInternal: ({ getValue, size, children, }: ActionsMenuInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionsMenuInternal: ({ getValue, size, children, onFormat, }: ActionsMenuInternalProps) => import("react/jsx-runtime").JSX.Element;

package/editors/dql-editor/actions-menu/ActionsMenu.js

@@ -83,7 +83,8 @@ ActionsMenu.displayName = "DQLEditor.ActionsMenu";
 const ActionsMenuInternal = ({
   getValue,
   size,
-  children
+  children,
+  onFormat
 }) => {
   const intl = (0, import_react_intl.useIntl)();
   const copyToClipboard = (0, import_react.useCallback)(async () => {
@@ -119,6 +120,10 @@ const ActionsMenuInternal = ({
       ]
     }
   );
+  const formatQueryMenuItem = onFormat ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Item, { onSelect: onFormat, "data-dt-name": "FormatQuery", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CodeIcon, {}) }),
+    intl.formatMessage(import_actions_menu_messages.dqlEditorActionsMenuMessages.formatQuery)
+  ] }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.actionsMenuWrapper({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Button.Button,
@@ -135,6 +140,7 @@ const ActionsMenuInternal = ({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Group, { children: [
         copyQueryMenuItem,
+        formatQueryMenuItem,
         validChildren
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Group, { children: openDocumentationMenuItem })

package/editors/dql-editor/actions-menu/ActionsMenu.sty.d.ts

@@ -3,12 +3,24 @@ export declare const editorWrapperFullHeight: string;
 export declare const actionsMenuWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         default: {
-            top: string;
-            right: string;
+            top: `calc(${string} + ${string})`;
+            right: `calc(${string} + ${string})`;
+            selectors: {
+                [x: string]: {
+                    top: `calc(${string} + ${string})`;
+                    right: `calc(${string} + ${string})`;
+                };
+            };
         };
         condensed: {
-            top: string;
-            right: string;
+            top: `calc(${string} + ${string})`;
+            right: `calc(${string} + ${string})`;
+            selectors: {
+                [x: string]: {
+                    top: `calc(${string} + ${string})`;
+                    right: `calc(${string} + ${string})`;
+                };
+            };
         };
     };
 }>;

package/editors/dql-editor/actions-menu/ActionsMenu.sty.js

@@ -23,9 +23,10 @@ __export(ActionsMenu_css_exports, {
   editorWrapperFullHeight: () => editorWrapperFullHeight
 });
 module.exports = __toCommonJS(ActionsMenu_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_ActionsMenu_css_ts_vanilla = require("./ActionsMenu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-7-0", variantClassNames: { size: { "default": "_1okebta3-3-7-0", condensed: "_1okebta4-3-7-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWithActionsMenu = { "default": "_1okebta5-3-7-0", condensed: "_1okebta6-3-7-0" };
-var editorWrapper = "_1okebta0-3-7-0";
-var editorWrapperFullHeight = "_1okebta1-3-7-0";
+var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-8-0", variantClassNames: { size: { "default": "_1okebta3-3-8-0", condensed: "_1okebta4-3-8-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-8-0", condensed: "_1okebta6-3-8-0" };
+var editorWrapper = "_1okebta0-3-8-0";
+var editorWrapperFullHeight = "_1okebta1-3-8-0";

package/editors/dql-editor/actions-menu/actions-menu-messages.d.ts

@@ -14,4 +14,9 @@ export declare const dqlEditorActionsMenuMessages: {
         id: string;
         description: string;
     };
+    formatQuery: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
 };

package/editors/dql-editor/actions-menu/actions-menu-messages.js

@@ -36,5 +36,10 @@ const dqlEditorActionsMenuMessages = (0, import_react_intl.defineMessages)({
     defaultMessage: "Open documentation",
     id: "XmYqCKn9iEfBoSSL",
     description: "Menu item label to open the DQL documentation in a new browser tab."
+  },
+  formatQuery: {
+    defaultMessage: "Format query",
+    id: "7/hGI/teTlqSMko6",
+    description: "Menu item label to format the DQL query."
   }
 });

package/editors/dql-editor/dql/SuggestionPart.css

@@ -1,4 +1,4 @@
-._yhio8f0-3-7-0 {
+._yhio8f0-3-8-0 {
   display: inline;
   margin-right: 0.5ch;
 }

package/editors/dql-editor/dql/SuggestionPart.sty.js

@@ -21,4 +21,4 @@ __export(SuggestionPart_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionPart_css_exports);
 var import_SuggestionPart_css_ts_vanilla = require("./SuggestionPart.css");
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-7-0";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-8-0";

package/editors/dql-editor/dql/SuggestionsInfoSection.css

@@ -1,8 +1,8 @@
 .cm-tooltip.cm-tooltip-autocomplete {
   container-type: inline-size;
-  container-name: _cpuf060-3-7-0;
+  container-name: _cpuf060-3-8-0;
 }
-._cpuf061-3-7-0 {
+._cpuf061-3-8-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
@@ -15,20 +15,20 @@
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf062-3-7-0 {
+._cpuf062-3-8-0 {
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf063-3-7-0 {
+._cpuf063-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-@container _cpuf060-3-7-0 (max-width: 289px) {
-  ._cpuf061-3-7-0 {
+@container _cpuf060-3-8-0 (max-width: 289px) {
+  ._cpuf061-3-8-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);
   }
-  ._cpuf062-3-7-0 {
+  ._cpuf062-3-8-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);

package/editors/dql-editor/dql/SuggestionsInfoSection.js

@@ -36,6 +36,7 @@ var import_messages = require("./messages.js");
 var styles = __toESM(require("./SuggestionsInfoSection.sty.js"));
 var import_external_links = require("../../../core/external-links.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
+var import_textStyle_css = require("../../../styles/textStyle.sty.js");
 var import_ExternalLink = require("../../../typography/external-link/ExternalLink.js");
 var import_Text = require("../../../typography/text/Text.js");
 const SuggestionsInfoSection = () => {
@@ -58,7 +59,15 @@ const SuggestionsInfoSection = () => {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(import_messages.dqlEditorMessages.openPanel) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalLink.ExternalLink, { href: import_external_links.DQL_DOCUMENTATION_URL, "data-dt-name": "DqlSyntax", children: intl.formatMessage(import_messages.dqlEditorMessages.dqlSyntaxLink) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ExternalLink.ExternalLink,
+          {
+            href: import_external_links.DQL_DOCUMENTATION_URL,
+            className: (0, import_textStyle_css.textStyle)({ textStyle: "small" }),
+            "data-dt-name": "DqlSyntax",
+            children: intl.formatMessage(import_messages.dqlEditorMessages.dqlSyntaxLink)
+          }
+        )
       ]
     }
   );

package/editors/dql-editor/dql/SuggestionsInfoSection.sty.js

@@ -23,6 +23,6 @@ __export(SuggestionsInfoSection_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsInfoSection_css_exports);
 var import_SuggestionsInfoSection_css_ts_vanilla = require("./SuggestionsInfoSection.css");
-var container = "_cpuf061-3-7-0";
-var shortcutLabel = "_cpuf063-3-7-0";
-var shortcutsGroup = "_cpuf062-3-7-0";
+var container = "_cpuf061-3-8-0";
+var shortcutLabel = "_cpuf063-3-8-0";
+var shortcutsGroup = "_cpuf062-3-8-0";