@dynatrace/strato-components 3.6.0 → 3.7.1

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

@@ -1,6 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import {
+  Children,
+  Fragment,
+  useCallback
+} from "react";
 import { useIntl } from "react-intl";
+import { isElement } from "react-is";
 import {
   CopyIcon,
   DotMenuIcon,
@@ -10,12 +15,50 @@ import { dqlEditorActionsMenuMessages } from "./actions-menu-messages.js";
 import * as styles from "./ActionsMenu.sty.js";
 import { Button } from "../../../buttons/button/Button.js";
 import { DQL_DOCUMENTATION_URL } from "../../../core/external-links.js";
+import { devLog } from "../../../core/utils/logging.js";
+import { Group } from "../../../navigation/menu/Group.js";
+import { Intent } from "../../../navigation/menu/Intent.js";
+import { Item } from "../../../navigation/menu/Item.js";
+import { Label } from "../../../navigation/menu/Label.js";
+import { Link } from "../../../navigation/menu/Link.js";
 import { Menu } from "../../../navigation/menu/Menu.js";
-const ActionsMenu = () => null;
+import { Sub } from "../../../navigation/menu/Sub.js";
+const ALLOWED_MENU_CHILDREN = /* @__PURE__ */ new Set([
+  Item,
+  Group,
+  Label,
+  Link,
+  Intent,
+  Sub
+]);
+function isWrapperElement(child) {
+  return child.type === Fragment || child.type === "div";
+}
+function getValidChildren(children) {
+  const validChildren = [];
+  for (const child of Children.toArray(children)) {
+    if (isElement(child)) {
+      if (isWrapperElement(child)) {
+        validChildren.push(...getValidChildren(child.props.children));
+        continue;
+      }
+      if (ALLOWED_MENU_CHILDREN.has(child.type)) {
+        validChildren.push(child);
+        continue;
+      }
+    }
+    devLog(
+      "Only Menu component items are supported as children of DQLEditor.ActionsMenu."
+    );
+  }
+  return validChildren;
+}
+const ActionsMenu = (props) => null;
 ActionsMenu.displayName = "DQLEditor.ActionsMenu";
 const ActionsMenuInternal = ({
   getValue,
-  size
+  size,
+  children
 }) => {
   const intl = useIntl();
   const copyToClipboard = useCallback(async () => {
@@ -24,6 +67,33 @@ const ActionsMenuInternal = ({
     } catch {
     }
   }, [getValue]);
+  const validChildren = getValidChildren(children);
+  const copyQueryMenuItem = /* @__PURE__ */ jsxs(
+    Menu.Item,
+    {
+      onSelect: () => {
+        copyToClipboard().catch(() => void 0);
+      },
+      "data-dt-name": "CopyQuery",
+      children: [
+        /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
+        intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)
+      ]
+    }
+  );
+  const openDocumentationMenuItem = /* @__PURE__ */ jsxs(
+    Menu.Link,
+    {
+      href: DQL_DOCUMENTATION_URL,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-dt-name": "OpenDocumentation",
+      children: [
+        /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(ExternalLinkIcon, {}) }),
+        intl.formatMessage(dqlEditorActionsMenuMessages.openDocumentation)
+      ]
+    }
+  );
   return /* @__PURE__ */ jsx("div", { className: styles.actionsMenuWrapper({ size }), children: /* @__PURE__ */ jsxs(Menu, { children: [
     /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(
       Button,
@@ -38,34 +108,11 @@ const ActionsMenuInternal = ({
       }
     ) }),
     /* @__PURE__ */ jsxs(Menu.Content, { children: [
-      /* @__PURE__ */ jsx(Menu.Group, { children: /* @__PURE__ */ jsxs(
-        Menu.Item,
-        {
-          onSelect: () => {
-            copyToClipboard().catch(() => void 0);
-          },
-          "data-dt-name": "CopyQuery",
-          children: [
-            /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
-            intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Menu.Group, { children: /* @__PURE__ */ jsxs(
-        Menu.Link,
-        {
-          href: DQL_DOCUMENTATION_URL,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          "data-dt-name": "OpenDocumentation",
-          children: [
-            /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(ExternalLinkIcon, {}) }),
-            intl.formatMessage(
-              dqlEditorActionsMenuMessages.openDocumentation
-            )
-          ]
-        }
-      ) })
+      /* @__PURE__ */ jsxs(Menu.Group, { children: [
+        copyQueryMenuItem,
+        validChildren
+      ] }),
+      /* @__PURE__ */ jsx(Menu.Group, { children: openDocumentationMenuItem })
     ] })
   ] }) });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/actions-menu/ActionsMenu.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  CopyIcon,\n  DotMenuIcon,\n  ExternalLinkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { dqlEditorActionsMenuMessages } from './actions-menu-messages.js';\nimport * as styles from './ActionsMenu.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\n\n/**\n * Slot component that enables the actions menu in the DQLEditor.\n *\n * Rendering this component as a child of `DQLEditor` displays a kebab menu\n * with built-in actions (Copy query, Open documentation).\n * @public\n */\n// TODO (APPDEV-17376): Introduce ActionsMenuProps with `children` to support custom menu items rendered between the built-in actions.\nexport const ActionsMenu = (): null => null;\n(ActionsMenu as typeof ActionsMenu & { displayName: string }).displayName =\n  'DQLEditor.ActionsMenu';\n\n/**\n * Props for the `ActionsMenuInternal` component.\n * @internal\n */\nexport interface ActionsMenuInternalProps {\n  /**\n   * Returns the editor's current content, copied to clipboard when the copy action is triggered.\n   */\n  getValue: () => string;\n  /**\n   * The editor's size variant affecting the trigger button and positioning.\n   */\n  size: 'default' | 'condensed';\n}\n\n/**\n * Internal component that renders the DQLEditor actions menu.\n * @internal\n */\nexport const ActionsMenuInternal = ({\n  getValue,\n  size,\n}: ActionsMenuInternalProps) => {\n  const intl = useIntl();\n  // getValue() is called at copy time (not at render time) so it always reads\n  // the current editor content from the ref, regardless of re-renders.\n  const copyToClipboard = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(getValue());\n    } catch {\n      // For now, we silently ignore clipboard write errors.\n    }\n  }, [getValue]);\n\n  return (\n    <div className={styles.actionsMenuWrapper({ size })}>\n      <Menu>\n        <Menu.Trigger>\n          <Button\n            variant=\"default\"\n            size={size}\n            aria-label={intl.formatMessage(\n              dqlEditorActionsMenuMessages.triggerLabel,\n            )}\n            data-dt-name=\"OpenActionsMenu\"\n          >\n            <Button.Prefix>\n              <DotMenuIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.Group>\n            <Menu.Item\n              onSelect={() => {\n                copyToClipboard().catch(() => void 0);\n              }}\n              data-dt-name=\"CopyQuery\"\n            >\n              <Menu.Prefix>\n                <CopyIcon />\n              </Menu.Prefix>\n              {intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)}\n            </Menu.Item>\n          </Menu.Group>\n          <Menu.Group>\n            <Menu.Link\n              href={DQL_DOCUMENTATION_URL}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              data-dt-name=\"OpenDocumentation\"\n            >\n              <Menu.Prefix>\n                <ExternalLinkIcon />\n              </Menu.Prefix>\n              {intl.formatMessage(\n                dqlEditorActionsMenuMessages.openDocumentation,\n              )}\n            </Menu.Link>\n          </Menu.Group>\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
-  "mappings": "AA0Ec,cAMF,YANE;AA1Ed,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAC7C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AAUd,MAAM,cAAc,MAAY;AACtC,YAA6D,cAC5D;AAqBK,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AAGrB,QAAM,kBAAkB,YAAY,YAAY;AAC9C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,SAAS,CAAC;AAAA,IAChD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,oBAAC,SAAI,WAAW,OAAO,mBAAmB,EAAE,KAAK,CAAC,GAChD,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,cAAY,KAAK;AAAA,UACf,6BAA6B;AAAA,QAC/B;AAAA,QACA,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA;AAAA,IACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACC;AAAA,0BAAC,KAAK,OAAL,EACC;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM;AACd,4BAAgB,EAAE,MAAM,MAAM,MAAM;AAAA,UACtC;AAAA,UACA,gBAAa;AAAA,UAEb;AAAA,gCAAC,KAAK,QAAL,EACC,8BAAC,YAAS,GACZ;AAAA,YACC,KAAK,cAAc,6BAA6B,SAAS;AAAA;AAAA;AAAA,MAC5D,GACF;AAAA,MACA,oBAAC,KAAK,OAAL,EACC;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,gBAAa;AAAA,UAEb;AAAA,gCAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,YACC,KAAK;AAAA,cACJ,6BAA6B;AAAA,YAC/B;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;",
+  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  useCallback,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport {\n  CopyIcon,\n  DotMenuIcon,\n  ExternalLinkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { dqlEditorActionsMenuMessages } from './actions-menu-messages.js';\nimport * as styles from './ActionsMenu.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport { Group } from '../../../navigation/menu/Group.js';\nimport { Intent } from '../../../navigation/menu/Intent.js';\nimport { Item } from '../../../navigation/menu/Item.js';\nimport { Label } from '../../../navigation/menu/Label.js';\nimport { Link } from '../../../navigation/menu/Link.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Sub } from '../../../navigation/menu/Sub.js';\n\n// Menu slot components allowed as children of `DQLEditor.ActionsMenu`\nconst ALLOWED_MENU_CHILDREN = new Set<unknown>([\n  Item,\n  Group,\n  Label,\n  Link,\n  Intent,\n  Sub,\n]);\n\n/**\n * Type guard for transparent wrappers (fragments and divs) whose children are\n * flattened and validated individually.\n */\nfunction isWrapperElement(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment || child.type === 'div';\n}\n\n/**\n * Iterates over child nodes and keeps only supported Menu slot components.\n */\nfunction getValidChildren(children: ReactNode): ReactNode[] {\n  const validChildren: ReactNode[] = [];\n  for (const child of Children.toArray(children)) {\n    if (isElement(child)) {\n      if (isWrapperElement(child)) {\n        // Flatten fragments and divs so their children are validated individually.\n        validChildren.push(...getValidChildren(child.props.children));\n        continue;\n      }\n      if (ALLOWED_MENU_CHILDREN.has(child.type)) {\n        validChildren.push(child);\n        continue;\n      }\n    }\n    devLog(\n      'Only Menu component items are supported as children of DQLEditor.ActionsMenu.',\n    );\n  }\n\n  return validChildren;\n}\n\n/**\n * Slot component that enables the actions menu in the DQLEditor.\n *\n * Rendering this component as a child of `DQLEditor` displays a kebab menu\n * with built-in actions (Copy query, Open documentation). Custom menu items can be\n * passed as children and will be rendered between the two built-in actions.\n * @public\n */\nexport const ActionsMenu = (props: WithChildren): null => null;\n(ActionsMenu as typeof ActionsMenu & { displayName: string }).displayName =\n  'DQLEditor.ActionsMenu';\n\n/**\n * Props for the `ActionsMenuInternal` component.\n * @internal\n */\nexport interface ActionsMenuInternalProps extends PropsWithChildren {\n  /**\n   * Returns the editor's current content, copied to clipboard when the copy action is triggered.\n   */\n  getValue: () => string;\n  /**\n   * The editor's size variant affecting the trigger button and positioning.\n   */\n  size: 'default' | 'condensed';\n}\n\n/**\n * Internal component that renders the DQLEditor actions menu.\n * @internal\n */\nexport const ActionsMenuInternal = ({\n  getValue,\n  size,\n  children,\n}: ActionsMenuInternalProps) => {\n  const intl = useIntl();\n  // getValue() is called at copy time (not at render time) so it always reads\n  // the current editor content from the ref, regardless of re-renders.\n  const copyToClipboard = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(getValue());\n    } catch {\n      // For now, we silently ignore clipboard write errors.\n    }\n  }, [getValue]);\n\n  const validChildren = getValidChildren(children);\n\n  const copyQueryMenuItem = (\n    <Menu.Item\n      onSelect={() => {\n        copyToClipboard().catch(() => void 0);\n      }}\n      data-dt-name=\"CopyQuery\"\n    >\n      <Menu.Prefix>\n        <CopyIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)}\n    </Menu.Item>\n  );\n\n  const openDocumentationMenuItem = (\n    <Menu.Link\n      href={DQL_DOCUMENTATION_URL}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-dt-name=\"OpenDocumentation\"\n    >\n      <Menu.Prefix>\n        <ExternalLinkIcon />\n      </Menu.Prefix>\n      {intl.formatMessage(dqlEditorActionsMenuMessages.openDocumentation)}\n    </Menu.Link>\n  );\n\n  return (\n    <div className={styles.actionsMenuWrapper({ size })}>\n      <Menu>\n        <Menu.Trigger>\n          <Button\n            variant=\"default\"\n            size={size}\n            aria-label={intl.formatMessage(\n              dqlEditorActionsMenuMessages.triggerLabel,\n            )}\n            data-dt-name=\"OpenActionsMenu\"\n          >\n            <Button.Prefix>\n              <DotMenuIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.Group>\n            {copyQueryMenuItem}\n            {validChildren}\n          </Menu.Group>\n          <Menu.Group>{openDocumentationMenuItem}</Menu.Group>\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
+  "mappings": "AA8HI,SAOI,KAPJ;AA9HJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAC7C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,WAAW;AAGpB,MAAM,wBAAwB,oBAAI,IAAa;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMD,SAAS,iBACP,OAC0C;AAC1C,SAAO,MAAM,SAAS,YAAY,MAAM,SAAS;AACnD;AAKA,SAAS,iBAAiB,UAAkC;AAC1D,QAAM,gBAA6B,CAAC;AACpC,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,UAAU,KAAK,GAAG;AACpB,UAAI,iBAAiB,KAAK,GAAG;AAE3B,sBAAc,KAAK,GAAG,iBAAiB,MAAM,MAAM,QAAQ,CAAC;AAC5D;AAAA,MACF;AACA,UAAI,sBAAsB,IAAI,MAAM,IAAI,GAAG;AACzC,sBAAc,KAAK,KAAK;AACxB;AAAA,MACF;AAAA,IACF;AACA;AAAA,MACE;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAUO,MAAM,cAAc,CAAC,UAA8B;AACzD,YAA6D,cAC5D;AAqBK,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AAGrB,QAAM,kBAAkB,YAAY,YAAY;AAC9C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,SAAS,CAAC;AAAA,IAChD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,QAAM,oBACJ;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC,UAAU,MAAM;AACd,wBAAgB,EAAE,MAAM,MAAM,MAAM;AAAA,MACtC;AAAA,MACA,gBAAa;AAAA,MAEb;AAAA,4BAAC,KAAK,QAAL,EACC,8BAAC,YAAS,GACZ;AAAA,QACC,KAAK,cAAc,6BAA6B,SAAS;AAAA;AAAA;AAAA,EAC5D;AAGF,QAAM,4BACJ;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,gBAAa;AAAA,MAEb;AAAA,4BAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,QACC,KAAK,cAAc,6BAA6B,iBAAiB;AAAA;AAAA;AAAA,EACpE;AAGF,SACE,oBAAC,SAAI,WAAW,OAAO,mBAAmB,EAAE,KAAK,CAAC,GAChD,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,cAAY,KAAK;AAAA,UACf,6BAA6B;AAAA,QAC/B;AAAA,QACA,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA;AAAA,IACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACC;AAAA,2BAAC,KAAK,OAAL,EACE;AAAA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,KAAK,OAAL,EAAY,qCAA0B;AAAA,OACzC;AAAA,KACF,GACF;AAEJ;",
   "names": []
 }

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

@@ -1,11 +1,13 @@
 import "./ActionsMenu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var actionsMenuWrapper = _7a468({ defaultClassName: "_1okebta2-3-6-0", variantClassNames: { size: { "default": "_1okebta3-3-6-0", condensed: "_1okebta4-3-6-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWithActionsMenu = _7a468({ defaultClassName: "_1okebta5-3-6-0", variantClassNames: { size: { "default": "_1okebta6-3-6-0", condensed: "_1okebta7-3-6-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWrapper = _7a468({ defaultClassName: "_1okebta0-3-6-0", variantClassNames: { fullHeight: { true: "_1okebta1-3-6-0" } }, defaultVariants: { fullHeight: false }, compoundVariants: [] });
+var actionsMenuWrapper = _7a468({ defaultClassName: "_1okebta2-3-7-1", variantClassNames: { size: { "default": "_1okebta3-3-7-1", condensed: "_1okebta4-3-7-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-7-1", condensed: "_1okebta6-3-7-1" };
+var editorWrapper = "_1okebta0-3-7-1";
+var editorWrapperFullHeight = "_1okebta1-3-7-1";
 export {
   actionsMenuWrapper,
   editorWithActionsMenu,
-  editorWrapper
+  editorWrapper,
+  editorWrapperFullHeight
 };
 //# sourceMappingURL=ActionsMenu.sty.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/actions-menu/ActionsMenu.css.ts"],
-  "sourcesContent": ["import './ActionsMenu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsMenuWrapper = _7a468({defaultClassName:'_1okebta2-3-6-0',variantClassNames:{size:{'default':'_1okebta3-3-6-0',condensed:'_1okebta4-3-6-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWithActionsMenu = _7a468({defaultClassName:'_1okebta5-3-6-0',variantClassNames:{size:{'default':'_1okebta6-3-6-0',condensed:'_1okebta7-3-6-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWrapper = _7a468({defaultClassName:'_1okebta0-3-6-0',variantClassNames:{fullHeight:{true:'_1okebta1-3-6-0'}},defaultVariants:{fullHeight:false},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5M,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/M,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './ActionsMenu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsMenuWrapper = _7a468({defaultClassName:'_1okebta2-3-7-1',variantClassNames:{size:{'default':'_1okebta3-3-7-1',condensed:'_1okebta4-3-7-1'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWithActionsMenu = {'default':'_1okebta5-3-7-1',condensed:'_1okebta6-3-7-1'};\nexport var editorWrapper = '_1okebta0-3-7-1';\nexport var editorWrapperFullHeight = '_1okebta1-3-7-1';"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5M,IAAI,wBAAwB,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;AACpF,IAAI,gBAAgB;AACpB,IAAI,0BAA0B;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./SuggestionPart.css";
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-6-0";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-7-1";
 export {
   suggestionPartSectionInfoCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionPart.css.ts"],
-  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-6-0';"],
+  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;",
   "names": []
 }

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

@@ -0,0 +1,36 @@
+.cm-tooltip.cm-tooltip-autocomplete {
+  container-type: inline-size;
+  container-name: _cpuf060-3-7-1;
+}
+._cpuf061-3-7-1 {
+  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);
+  padding-top: var(--dt-spacings-size-8, 8px);
+  padding-bottom: var(--dt-spacings-size-8, 8px);
+  padding-left: var(--dt-spacings-size-16, 16px);
+  padding-right: var(--dt-spacings-size-16, 16px);
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--dt-spacings-size-16, 16px);
+}
+._cpuf062-3-7-1 {
+  align-items: center;
+  gap: var(--dt-spacings-size-16, 16px);
+}
+._cpuf063-3-7-1 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}
+@container _cpuf060-3-7-1 (max-width: 289px) {
+  ._cpuf061-3-7-1 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dt-spacings-size-8, 8px);
+  }
+  ._cpuf062-3-7-1 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dt-spacings-size-8, 8px);
+  }
+}

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

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { dqlEditorMessages as messages } from "./messages.js";
+import * as styles from "./SuggestionsInfoSection.sty.js";
+import { DQL_DOCUMENTATION_URL } from "../../../core/external-links.js";
+import { Flex } from "../../../layouts/flex/Flex.js";
+import { ExternalLink } from "../../../typography/external-link/ExternalLink.js";
+import { Text } from "../../../typography/text/Text.js";
+const SuggestionsInfoSection = () => {
+  const intl = useIntl();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: styles.container,
+      "data-dt-name": "SuggestionsInfoSection",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { className: styles.shortcutsGroup, children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { textStyle: "small-emphasized", children: "Esc" }),
+            /* @__PURE__ */ jsx(Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(messages.closePanel) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { textStyle: "small-emphasized", children: "Ctrl+Space" }),
+            /* @__PURE__ */ jsx(Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(messages.openPanel) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ExternalLink, { href: DQL_DOCUMENTATION_URL, "data-dt-name": "DqlSyntax", children: intl.formatMessage(messages.dqlSyntaxLink) })
+      ]
+    }
+  );
+};
+export {
+  SuggestionsInfoSection
+};
+//# sourceMappingURL=SuggestionsInfoSection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionsInfoSection.tsx"],
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { dqlEditorMessages as messages } from './messages.js';\nimport * as styles from './SuggestionsInfoSection.sty.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../typography/text/Text.js';\n\nexport const SuggestionsInfoSection = () => {\n  const intl = useIntl();\n\n  return (\n    <Flex\n      className={styles.container}\n      data-dt-name=\"SuggestionsInfoSection\"\n      flexWrap=\"wrap\"\n      justifyContent=\"space-between\"\n    >\n      <Flex className={styles.shortcutsGroup}>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Esc</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.closePanel)}\n          </Text>\n        </Flex>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Ctrl+Space</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.openPanel)}\n          </Text>\n        </Flex>\n      </Flex>\n\n      <ExternalLink href={DQL_DOCUMENTATION_URL} data-dt-name=\"DqlSyntax\">\n        {intl.formatMessage(messages.dqlSyntaxLink)}\n      </ExternalLink>\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAoBQ,SACE,KADF;AApBR,SAAS,eAAe;AAExB,SAAS,qBAAqB,gBAAgB;AAC9C,YAAY,YAAY;AACxB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAEd,MAAM,yBAAyB,MAAM;AAC1C,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,UAAS;AAAA,MACT,gBAAe;AAAA,MAEf;AAAA,6BAAC,QAAK,WAAW,OAAO,gBACtB;AAAA,+BAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,iBAAG;AAAA,YACtC,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,UAAU,GACzC;AAAA,aACF;AAAA,UACA,qBAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,wBAAU;AAAA,YAC7C,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,SAAS,GACxC;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,gBAAa,MAAM,uBAAuB,gBAAa,aACrD,eAAK,cAAc,SAAS,aAAa,GAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import "./SuggestionsInfoSection.css";
+var container = "_cpuf061-3-7-1";
+var shortcutLabel = "_cpuf063-3-7-1";
+var shortcutsGroup = "_cpuf062-3-7-1";
+export {
+  container,
+  shortcutLabel,
+  shortcutsGroup
+};
+//# sourceMappingURL=SuggestionsInfoSection.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionsInfoSection.css.ts"],
+  "sourcesContent": ["import './SuggestionsInfoSection.css';\nexport var container = '_cpuf061-3-7-1';\nexport var shortcutLabel = '_cpuf063-3-7-1';\nexport var shortcutsGroup = '_cpuf062-3-7-1';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
+  "names": []
+}

package/esm/editors/dql-editor/dql/dql-language.js

@@ -6,6 +6,7 @@ import { dqlLinter } from "./dql-linter.js";
 import { dql } from "./dql.js";
 import { openAutocomplete } from "./open-autocomplete.js";
 import { suggestionAutocompletion } from "./suggestion-autocompletions.js";
+import { suggestionsInfoSectionExtension } from "./suggestions-info-section-extension.js";
 const VALIDATION_DELAY = 500;
 function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityInfo) {
   const language = StreamLanguage.define(dql);
@@ -80,7 +81,8 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
             startCompletion(update.view);
           }
         });
-      })
+      }),
+      ...readOnly ? [] : [suggestionsInfoSectionExtension]
     ],
     autocompleteOptions: readOnly ? void 0 : {
       activateOnTyping: false,

package/esm/editors/dql-editor/dql/dql-language.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/dql-language.ts"],
-  "sourcesContent": ["import { closeCompletion, startCompletion } from '@codemirror/autocomplete';\nimport { StreamLanguage } from '@codemirror/language';\nimport { linter, setDiagnostics } from '@codemirror/lint';\nimport { EditorView } from '@codemirror/view';\n\nimport { EditorLanguageConfiguration } from '../../base-code-editor/configuration/configuration.js';\nimport type { DQLEditorValidityInfo } from '../dql-editor-types.js';\nimport { dqlLinter } from './dql-linter.js';\nimport { dql } from './dql.js';\nimport { openAutocomplete } from './open-autocomplete.js';\nimport { suggestionAutocompletion } from './suggestion-autocompletions.js';\n\nconst VALIDATION_DELAY = 500;\n\n/**\n * @internal\n * Gets editor configuration for DQL.\n **/\nexport function getDqlConfig(\n  readOnly: boolean,\n  onValidationStart?: () => void,\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void,\n  setValidityInfo?: (validityInfo: DQLEditorValidityInfo[]) => void,\n): EditorLanguageConfiguration {\n  const language = StreamLanguage.define(dql);\n\n  return {\n    language,\n    extendWith: [\n      language.data.of({\n        commentTokens: {\n          block: {\n            open: '/*',\n            close: '*/',\n          },\n          line: '//',\n        },\n        closeBrackets: {\n          brackets: ['(', '[', '{', '\"'],\n          before: ')]}:;>|',\n          stringPrefixes: [],\n        },\n      }),\n      EditorView.domEventObservers({\n        // Clear lint decorations when composition starts. Lint spans in the DOM\n        // corrupt CodeMirror's DOM reconciliation during IME / dead-key composition.\n        // The linter re-runs automatically after composition ends since the\n        // composed character is a document change.\n        compositionstart: (_event, view) => {\n          closeCompletion(view);\n          view.dispatch(setDiagnostics(view.state, []));\n        },\n      }),\n      linter(\n        async (view) => {\n          const editorContent = view.state.doc.toString();\n\n          const validityResult = await dqlLinter(\n            editorContent,\n            onValidationStart,\n            onValidationEnd,\n          );\n\n          if (view.composing) {\n            return [];\n          }\n\n          setValidityInfo?.(validityResult);\n          return validityResult;\n        },\n        {\n          delay: VALIDATION_DELAY,\n        },\n      ),\n      EditorView.updateListener.of((update) => {\n        const isTyping =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('input.type'),\n          );\n\n        const isDeleting =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('delete.backward'),\n          );\n\n        const isFocused = update.focusChanged && update.view.hasFocus;\n\n        if (!(isTyping || isDeleting || isFocused)) {\n          return;\n        }\n\n        if (update.view.composing) {\n          return;\n        }\n\n        void openAutocomplete(\n          {\n            isTyping,\n            isDeleting,\n            isFocused,\n          },\n          update.state,\n        ).then((shouldComplete) => {\n          if (shouldComplete) {\n            startCompletion(update.view);\n          }\n        });\n      }),\n    ],\n    autocompleteOptions: readOnly\n      ? undefined\n      : {\n          activateOnTyping: false,\n          optionClass: (completion) =>\n            completion.label.length === 0 ? 'cm-empty-option' : '',\n          providers: [suggestionAutocompletion],\n        },\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,sBAAsB;AAC/B,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAI3B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAEzC,MAAM,mBAAmB;AAMlB,SAAS,aACd,UACA,mBACA,iBACA,iBAC6B;AAC7B,QAAM,WAAW,eAAe,OAAO,GAAG;AAE1C,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,MACV,SAAS,KAAK,GAAG;AAAA,QACf,eAAe;AAAA,UACb,OAAO;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,UACT;AAAA,UACA,MAAM;AAAA,QACR;AAAA,QACA,eAAe;AAAA,UACb,UAAU,CAAC,KAAK,KAAK,KAAK,GAAG;AAAA,UAC7B,QAAQ;AAAA,UACR,gBAAgB,CAAC;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,MACD,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAK3B,kBAAkB,CAAC,QAAQ,SAAS;AAClC,0BAAgB,IAAI;AACpB,eAAK,SAAS,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC;AAAA,QAC9C;AAAA,MACF,CAAC;AAAA,MACD;AAAA,QACE,OAAO,SAAS;AACd,gBAAM,gBAAgB,KAAK,MAAM,IAAI,SAAS;AAE9C,gBAAM,iBAAiB,MAAM;AAAA,YAC3B;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAEA,cAAI,KAAK,WAAW;AAClB,mBAAO,CAAC;AAAA,UACV;AAEA,4BAAkB,cAAc;AAChC,iBAAO;AAAA,QACT;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,WAAW,eAAe,GAAG,CAAC,WAAW;AACvC,cAAM,WACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,YAAY;AAAA,QACtC;AAEF,cAAM,aACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,iBAAiB;AAAA,QAC3C;AAEF,cAAM,YAAY,OAAO,gBAAgB,OAAO,KAAK;AAErD,YAAI,EAAE,YAAY,cAAc,YAAY;AAC1C;AAAA,QACF;AAEA,YAAI,OAAO,KAAK,WAAW;AACzB;AAAA,QACF;AAEA,aAAK;AAAA,UACH;AAAA,YACE;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO;AAAA,QACT,EAAE,KAAK,CAAC,mBAAmB;AACzB,cAAI,gBAAgB;AAClB,4BAAgB,OAAO,IAAI;AAAA,UAC7B;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,IACA,qBAAqB,WACjB,SACA;AAAA,MACE,kBAAkB;AAAA,MAClB,aAAa,CAAC,eACZ,WAAW,MAAM,WAAW,IAAI,oBAAoB;AAAA,MACtD,WAAW,CAAC,wBAAwB;AAAA,IACtC;AAAA,EACN;AACF;",
+  "sourcesContent": ["import { closeCompletion, startCompletion } from '@codemirror/autocomplete';\nimport { StreamLanguage } from '@codemirror/language';\nimport { linter, setDiagnostics } from '@codemirror/lint';\nimport { EditorView } from '@codemirror/view';\n\nimport { EditorLanguageConfiguration } from '../../base-code-editor/configuration/configuration.js';\nimport type { DQLEditorValidityInfo } from '../dql-editor-types.js';\nimport { dqlLinter } from './dql-linter.js';\nimport { dql } from './dql.js';\nimport { openAutocomplete } from './open-autocomplete.js';\nimport { suggestionAutocompletion } from './suggestion-autocompletions.js';\nimport { suggestionsInfoSectionExtension } from './suggestions-info-section-extension.js';\n\nconst VALIDATION_DELAY = 500;\n\n/**\n * @internal\n * Gets editor configuration for DQL.\n **/\nexport function getDqlConfig(\n  readOnly: boolean,\n  onValidationStart?: () => void,\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void,\n  setValidityInfo?: (validityInfo: DQLEditorValidityInfo[]) => void,\n): EditorLanguageConfiguration {\n  const language = StreamLanguage.define(dql);\n\n  return {\n    language,\n    extendWith: [\n      language.data.of({\n        commentTokens: {\n          block: {\n            open: '/*',\n            close: '*/',\n          },\n          line: '//',\n        },\n        closeBrackets: {\n          brackets: ['(', '[', '{', '\"'],\n          before: ')]}:;>|',\n          stringPrefixes: [],\n        },\n      }),\n      EditorView.domEventObservers({\n        // Clear lint decorations when composition starts. Lint spans in the DOM\n        // corrupt CodeMirror's DOM reconciliation during IME / dead-key composition.\n        // The linter re-runs automatically after composition ends since the\n        // composed character is a document change.\n        compositionstart: (_event, view) => {\n          closeCompletion(view);\n          view.dispatch(setDiagnostics(view.state, []));\n        },\n      }),\n      linter(\n        async (view) => {\n          const editorContent = view.state.doc.toString();\n\n          const validityResult = await dqlLinter(\n            editorContent,\n            onValidationStart,\n            onValidationEnd,\n          );\n\n          if (view.composing) {\n            return [];\n          }\n\n          setValidityInfo?.(validityResult);\n          return validityResult;\n        },\n        {\n          delay: VALIDATION_DELAY,\n        },\n      ),\n      EditorView.updateListener.of((update) => {\n        const isTyping =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('input.type'),\n          );\n\n        const isDeleting =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('delete.backward'),\n          );\n\n        const isFocused = update.focusChanged && update.view.hasFocus;\n\n        if (!(isTyping || isDeleting || isFocused)) {\n          return;\n        }\n\n        if (update.view.composing) {\n          return;\n        }\n\n        void openAutocomplete(\n          {\n            isTyping,\n            isDeleting,\n            isFocused,\n          },\n          update.state,\n        ).then((shouldComplete) => {\n          if (shouldComplete) {\n            startCompletion(update.view);\n          }\n        });\n      }),\n      ...(readOnly ? [] : [suggestionsInfoSectionExtension]),\n    ],\n    autocompleteOptions: readOnly\n      ? undefined\n      : {\n          activateOnTyping: false,\n          optionClass: (completion) =>\n            completion.label.length === 0 ? 'cm-empty-option' : '',\n          providers: [suggestionAutocompletion],\n        },\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,sBAAsB;AAC/B,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAI3B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAEhD,MAAM,mBAAmB;AAMlB,SAAS,aACd,UACA,mBACA,iBACA,iBAC6B;AAC7B,QAAM,WAAW,eAAe,OAAO,GAAG;AAE1C,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,MACV,SAAS,KAAK,GAAG;AAAA,QACf,eAAe;AAAA,UACb,OAAO;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,UACT;AAAA,UACA,MAAM;AAAA,QACR;AAAA,QACA,eAAe;AAAA,UACb,UAAU,CAAC,KAAK,KAAK,KAAK,GAAG;AAAA,UAC7B,QAAQ;AAAA,UACR,gBAAgB,CAAC;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,MACD,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAK3B,kBAAkB,CAAC,QAAQ,SAAS;AAClC,0BAAgB,IAAI;AACpB,eAAK,SAAS,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC;AAAA,QAC9C;AAAA,MACF,CAAC;AAAA,MACD;AAAA,QACE,OAAO,SAAS;AACd,gBAAM,gBAAgB,KAAK,MAAM,IAAI,SAAS;AAE9C,gBAAM,iBAAiB,MAAM;AAAA,YAC3B;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAEA,cAAI,KAAK,WAAW;AAClB,mBAAO,CAAC;AAAA,UACV;AAEA,4BAAkB,cAAc;AAChC,iBAAO;AAAA,QACT;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,WAAW,eAAe,GAAG,CAAC,WAAW;AACvC,cAAM,WACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,YAAY;AAAA,QACtC;AAEF,cAAM,aACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,iBAAiB;AAAA,QAC3C;AAEF,cAAM,YAAY,OAAO,gBAAgB,OAAO,KAAK;AAErD,YAAI,EAAE,YAAY,cAAc,YAAY;AAC1C;AAAA,QACF;AAEA,YAAI,OAAO,KAAK,WAAW;AACzB;AAAA,QACF;AAEA,aAAK;AAAA,UACH;AAAA,YACE;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO;AAAA,QACT,EAAE,KAAK,CAAC,mBAAmB;AACzB,cAAI,gBAAgB;AAClB,4BAAgB,OAAO,IAAI;AAAA,UAC7B;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,MACD,GAAI,WAAW,CAAC,IAAI,CAAC,+BAA+B;AAAA,IACtD;AAAA,IACA,qBAAqB,WACjB,SACA;AAAA,MACE,kBAAkB;AAAA,MAClB,aAAa,CAAC,eACZ,WAAW,MAAM,WAAW,IAAI,oBAAoB;AAAA,MACtD,WAAW,CAAC,wBAAwB;AAAA,IACtC;AAAA,EACN;AACF;",
   "names": []
 }

package/esm/editors/dql-editor/dql/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "react-intl";
+const dqlEditorMessages = defineMessages({
+  openPanel: {
+    defaultMessage: "Open",
+    id: "QPVwTdDxajDwh62B",
+    description: "Label next to the Ctrl+Space keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers."
+  },
+  closePanel: {
+    defaultMessage: "Close",
+    id: "i7ML7nsvim1vfXlT",
+    description: "Label next to the Esc keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers."
+  },
+  dqlSyntaxLink: {
+    defaultMessage: "DQL syntax",
+    id: "anCkyfyzovTz3qtv",
+    description: "Link text in the DQL editor autocomplete info section, pointing to the external DQL syntax documentation."
+  }
+});
+export {
+  dqlEditorMessages
+};
+//# sourceMappingURL=messages.js.map

package/esm/editors/dql-editor/dql/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const dqlEditorMessages = defineMessages({\n  openPanel: {\n    defaultMessage: 'Open',\n    id: 'QPVwTdDxajDwh62B',\n    description:\n      'Label next to the Ctrl+Space keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers.',\n  },\n  closePanel: {\n    defaultMessage: 'Close',\n    id: 'i7ML7nsvim1vfXlT',\n    description:\n      'Label next to the Esc keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers.',\n  },\n  dqlSyntaxLink: {\n    defaultMessage: 'DQL syntax',\n    id: 'anCkyfyzovTz3qtv',\n    description:\n      'Link text in the DQL editor autocomplete info section, pointing to the external DQL syntax documentation.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,oBAAoB,eAAe;AAAA,EAC9C,WAAW;AAAA,IACT,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,YAAY;AAAA,IACV,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,eAAe;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

package/esm/editors/dql-editor/dql/suggestions-info-section-extension.js

@@ -0,0 +1,98 @@
+import { completionStatus } from "@codemirror/autocomplete";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import Borders from "@dynatrace/strato-design-tokens/borders";
+import BoxShadows from "@dynatrace/strato-design-tokens/box-shadows";
+import Colors from "@dynatrace/strato-design-tokens/colors";
+import Spacings from "@dynatrace/strato-design-tokens/spacings";
+import { SuggestionsInfoSection } from "./SuggestionsInfoSection.js";
+const SUGGESTIONS_INFO_ATTR = "data-dql-suggestions-info";
+function findTooltipElement() {
+  return document.querySelector(".cm-tooltip-autocomplete");
+}
+const suggestionsInfoSectionTheme = EditorView.baseTheme({
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    background: "transparent !important",
+    boxShadow: "none !important",
+    padding: "0 !important",
+    borderRadius: "0 !important",
+    display: "flex !important",
+    flexDirection: "column",
+    gap: Spacings.Size4,
+    // Override the fixed `width: 500px` from the base editor config with a
+    // responsive width, so the tooltip shrinks on narrow viewports. This is
+    // what allows the container query in `SuggestionsInfoSection.css.ts` to
+    // actually fire and reflow the info section to a column layout.
+    width: `min(500px, calc(100vw - ${Spacings.Size16}))`
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    background: Colors.Background.Surface.Default,
+    borderRadius: Borders.Radius.Surface.Subdued,
+    boxShadow: BoxShadows.Surface.Floating.Rest,
+    padding: `${Spacings.Size4} !important`,
+    flex: "0 1 auto",
+    minHeight: 0
+  },
+  // Pin the info section to the bottom regardless of DOM insertion order:
+  // CodeMirror sometimes appends new children (e.g. the rebuilt `ul`) after our
+  // section, leaving it visually above the suggestions. Setting a higher `order`
+  // value forces flex to render it last while the `ul` keeps the default 0.
+  [`.cm-tooltip.cm-tooltip-autocomplete > [${SUGGESTIONS_INFO_ATTR}]`]: {
+    order: 1
+  }
+});
+const suggestionsInfoSectionPlugin = ViewPlugin.fromClass(
+  class {
+    container = null;
+    root = null;
+    update(update) {
+      const status = completionStatus(update.state);
+      if (status === null) {
+        this.unmount();
+        return;
+      }
+      queueMicrotask(() => {
+        if (this.container?.isConnected) {
+          return;
+        }
+        this.unmount();
+        const tooltipEl = findTooltipElement();
+        if (tooltipEl) {
+          this.mount(tooltipEl);
+        }
+      });
+    }
+    mount(tooltipEl) {
+      this.container = document.createElement("div");
+      this.container.setAttribute(SUGGESTIONS_INFO_ATTR, "");
+      tooltipEl.appendChild(this.container);
+      this.root = createRoot(this.container);
+      this.root.render(
+        createElement(
+          IntlProvider,
+          { locale: "en", defaultLocale: "en", messages: {} },
+          createElement(SuggestionsInfoSection)
+        )
+      );
+    }
+    unmount() {
+      this.root?.unmount();
+      this.root = null;
+      this.container?.remove();
+      this.container = null;
+    }
+    destroy() {
+      this.unmount();
+    }
+  }
+);
+const suggestionsInfoSectionExtension = [
+  suggestionsInfoSectionTheme,
+  suggestionsInfoSectionPlugin
+];
+export {
+  suggestionsInfoSectionExtension
+};
+//# sourceMappingURL=suggestions-info-section-extension.js.map

package/esm/editors/dql-editor/dql/suggestions-info-section-extension.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/suggestions-info-section-extension.ts"],
+  "sourcesContent": ["import { completionStatus } from '@codemirror/autocomplete';\nimport { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';\nimport { createElement } from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport { IntlProvider } from 'react-intl';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport BoxShadows from '@dynatrace/strato-design-tokens/box-shadows';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { SuggestionsInfoSection } from './SuggestionsInfoSection.js';\n\nconst SUGGESTIONS_INFO_ATTR = 'data-dql-suggestions-info';\n\nfunction findTooltipElement(): HTMLElement | null {\n  return document.querySelector<HTMLElement>('.cm-tooltip-autocomplete');\n}\n\n// Strips the floating-box styling from the autocomplete tooltip container and\n// reapplies it to the suggestion list (`ul`) so the suggestion list and the\n// info section render as two visually independent floating boxes with a gap.\nconst suggestionsInfoSectionTheme = EditorView.baseTheme({\n  '.cm-tooltip.cm-tooltip-autocomplete': {\n    background: 'transparent !important',\n    boxShadow: 'none !important',\n    padding: '0 !important',\n    borderRadius: '0 !important',\n    display: 'flex !important',\n    flexDirection: 'column',\n    gap: Spacings.Size4,\n    // Override the fixed `width: 500px` from the base editor config with a\n    // responsive width, so the tooltip shrinks on narrow viewports. This is\n    // what allows the container query in `SuggestionsInfoSection.css.ts` to\n    // actually fire and reflow the info section to a column layout.\n    width: `min(500px, calc(100vw - ${Spacings.Size16}))`,\n  },\n  '.cm-tooltip.cm-tooltip-autocomplete > ul': {\n    background: Colors.Background.Surface.Default,\n    borderRadius: Borders.Radius.Surface.Subdued,\n    boxShadow: BoxShadows.Surface.Floating.Rest,\n    padding: `${Spacings.Size4} !important`,\n    flex: '0 1 auto',\n    minHeight: 0,\n  },\n  // Pin the info section to the bottom regardless of DOM insertion order:\n  // CodeMirror sometimes appends new children (e.g. the rebuilt `ul`) after our\n  // section, leaving it visually above the suggestions. Setting a higher `order`\n  // value forces flex to render it last while the `ul` keeps the default 0.\n  [`.cm-tooltip.cm-tooltip-autocomplete > [${SUGGESTIONS_INFO_ATTR}]`]: {\n    order: 1,\n  },\n});\n\nconst suggestionsInfoSectionPlugin = ViewPlugin.fromClass(\n  class {\n    private container: HTMLElement | null = null;\n    private root: Root | null = null;\n\n    update(update: ViewUpdate) {\n      const status = completionStatus(update.state);\n\n      if (status === null) {\n        this.unmount();\n        return;\n      }\n\n      // Defer to ensure CodeMirror has finished creating the tooltip DOM.\n      queueMicrotask(() => {\n        if (this.container?.isConnected) {\n          return;\n        }\n        this.unmount();\n\n        const tooltipEl = findTooltipElement();\n        if (tooltipEl) {\n          this.mount(tooltipEl);\n        }\n      });\n    }\n\n    private mount(tooltipEl: HTMLElement) {\n      this.container = document.createElement('div');\n      this.container.setAttribute(SUGGESTIONS_INFO_ATTR, '');\n      tooltipEl.appendChild(this.container);\n\n      this.root = createRoot(this.container);\n      this.root.render(\n        createElement(\n          IntlProvider,\n          { locale: 'en', defaultLocale: 'en', messages: {} },\n          createElement(SuggestionsInfoSection),\n        ),\n      );\n    }\n\n    private unmount() {\n      this.root?.unmount();\n      this.root = null;\n      this.container?.remove();\n      this.container = null;\n    }\n\n    destroy() {\n      this.unmount();\n    }\n  },\n);\n\nexport const suggestionsInfoSectionExtension = [\n  suggestionsInfoSectionTheme,\n  suggestionsInfoSectionPlugin,\n];\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,YAAY,kBAA8B;AACnD,SAAS,qBAAqB;AAC9B,SAAS,kBAAwB;AACjC,SAAS,oBAAoB;AAE7B,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB,OAAO,cAAc;AAErB,SAAS,8BAA8B;AAEvC,MAAM,wBAAwB;AAE9B,SAAS,qBAAyC;AAChD,SAAO,SAAS,cAA2B,0BAA0B;AACvE;AAKA,MAAM,8BAA8B,WAAW,UAAU;AAAA,EACvD,uCAAuC;AAAA,IACrC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,OAAO,2BAA2B,SAAS,MAAM;AAAA,EACnD;AAAA,EACA,4CAA4C;AAAA,IAC1C,YAAY,OAAO,WAAW,QAAQ;AAAA,IACtC,cAAc,QAAQ,OAAO,QAAQ;AAAA,IACrC,WAAW,WAAW,QAAQ,SAAS;AAAA,IACvC,SAAS,GAAG,SAAS,KAAK;AAAA,IAC1B,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,CAAC,0CAA0C,qBAAqB,GAAG,GAAG;AAAA,IACpE,OAAO;AAAA,EACT;AACF,CAAC;AAED,MAAM,+BAA+B,WAAW;AAAA,EAC9C,MAAM;AAAA,IACI,YAAgC;AAAA,IAChC,OAAoB;AAAA,IAE5B,OAAO,QAAoB;AACzB,YAAM,SAAS,iBAAiB,OAAO,KAAK;AAE5C,UAAI,WAAW,MAAM;AACnB,aAAK,QAAQ;AACb;AAAA,MACF;AAGA,qBAAe,MAAM;AACnB,YAAI,KAAK,WAAW,aAAa;AAC/B;AAAA,QACF;AACA,aAAK,QAAQ;AAEb,cAAM,YAAY,mBAAmB;AACrC,YAAI,WAAW;AACb,eAAK,MAAM,SAAS;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEQ,MAAM,WAAwB;AACpC,WAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,WAAK,UAAU,aAAa,uBAAuB,EAAE;AACrD,gBAAU,YAAY,KAAK,SAAS;AAEpC,WAAK,OAAO,WAAW,KAAK,SAAS;AACrC,WAAK,KAAK;AAAA,QACR;AAAA,UACE;AAAA,UACA,EAAE,QAAQ,MAAM,eAAe,MAAM,UAAU,CAAC,EAAE;AAAA,UAClD,cAAc,sBAAsB;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IAEQ,UAAU;AAChB,WAAK,MAAM,QAAQ;AACnB,WAAK,OAAO;AACZ,WAAK,WAAW,OAAO;AACvB,WAAK,YAAY;AAAA,IACnB;AAAA,IAEA,UAAU;AACR,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;AAEO,MAAM,kCAAkC;AAAA,EAC7C;AAAA,EACA;AACF;",
+  "names": []
+}

package/esm/editors/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/editors/index.ts"],
-  "sourcesContent": ["export { BaseCodeEditor as _BaseCodeEditor } from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  BaseCodeEditorProps as _BaseCodeEditorProps,\n  BaseCodeEditorRef as _BaseCodeEditorRef,\n} from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  AutocompleteProvider as _AutocompleteProvider,\n  AutocompletionResult as _AutocompletionResult,\n  Suggestion as _Suggestion,\n} from './base-code-editor/auto-completion/autocompletion.extension.js';\nexport type { ListAutocompletionConfig as _ListAutocompletionConfig } from './base-code-editor/auto-completion/list/list-autocompletion-types.js';\nexport type {\n  AutocompletionOptions as _AutocompletionOptions,\n  EditorLanguageConfiguration as _EditorLanguageConfiguration,\n} from './base-code-editor/configuration/configuration.js';\nexport { getAutocompleteExtensions as _getAutocompleteExtensions } from './base-code-editor/configuration/language-extensions.js';\nexport type { GutterConfiguration } from './base-code-editor/configuration/getDefaultConfigurations.js';\nexport type { IntlProps as _IntlProps } from './base-code-editor/utils/render-node.js';\nexport { CodeEditor } from './code-editor/CodeEditor.js';\nexport type {\n  CodeEditorProps,\n  CodeEditorRef,\n} from './code-editor/CodeEditor.js';\nexport { codeEditorLanguages as _codeEditorLanguages } from './code-editor/languages/languages.js';\nexport { DQLEditor } from './dql-editor/DQLEditor.js';\nexport type { DQLEditorValidityInfo } from './dql-editor/dql-editor-types.js';\nexport type { DQLEditorProps, DQLEditorRef } from './dql-editor/DQLEditor.js';\nexport { getDqlConfig as _getDqlConfig } from './dql-editor/dql/dql-language.js';\nexport { useValidityInfo as _useValidityInfo } from './dql-editor/useValidityInfo.js';\n"],
-  "mappings": "AAAA,SAA2B,sBAAuB;AAelD,SAAsC,iCAAkC;AAGxE,SAAS,kBAAkB;AAK3B,SAAgC,2BAA4B;AAC5D,SAAS,iBAAiB;AAG1B,SAAyB,oBAAqB;AAC9C,SAA4B,uBAAwB;",
+  "sourcesContent": ["export { BaseCodeEditor as _BaseCodeEditor } from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  BaseCodeEditorBaseProps as _BaseCodeEditorBaseProps,\n  BaseCodeEditorControlledProps as _BaseCodeEditorControlledProps,\n  BaseCodeEditorProps as _BaseCodeEditorProps,\n  BaseCodeEditorRef as _BaseCodeEditorRef,\n  BaseCodeEditorUncontrolledProps as _BaseCodeEditorUncontrolledProps,\n} from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  AutocompleteProvider as _AutocompleteProvider,\n  AutocompletionResult as _AutocompletionResult,\n  Suggestion as _Suggestion,\n} from './base-code-editor/auto-completion/autocompletion.extension.js';\nexport type { ListAutocompletionConfig as _ListAutocompletionConfig } from './base-code-editor/auto-completion/list/list-autocompletion-types.js';\nexport type {\n  AutocompletionOptions as _AutocompletionOptions,\n  EditorLanguageConfiguration as _EditorLanguageConfiguration,\n} from './base-code-editor/configuration/configuration.js';\nexport { getAutocompleteExtensions as _getAutocompleteExtensions } from './base-code-editor/configuration/language-extensions.js';\nexport type { GutterConfiguration } from './base-code-editor/configuration/getDefaultConfigurations.js';\nexport type { IntlProps as _IntlProps } from './base-code-editor/utils/render-node.js';\nexport { CodeEditor } from './code-editor/CodeEditor.js';\nexport type {\n  CodeEditorBaseProps,\n  CodeEditorControlledProps,\n  CodeEditorProps,\n  CodeEditorRef,\n  CodeEditorUncontrolledProps,\n} from './code-editor/CodeEditor.js';\nexport { codeEditorLanguages as _codeEditorLanguages } from './code-editor/languages/languages.js';\nexport { DQLEditor } from './dql-editor/DQLEditor.js';\nexport type { DQLEditorValidityInfo } from './dql-editor/dql-editor-types.js';\nexport type {\n  DQLEditorBaseProps,\n  DQLEditorControlledProps,\n  DQLEditorProps,\n  DQLEditorRef,\n  DQLEditorUncontrolledProps,\n} from './dql-editor/DQLEditor.js';\nexport { getDqlConfig as _getDqlConfig } from './dql-editor/dql/dql-language.js';\nexport { useValidityInfo as _useValidityInfo } from './dql-editor/useValidityInfo.js';\n"],
+  "mappings": "AAAA,SAA2B,sBAAuB;AAkBlD,SAAsC,iCAAkC;AAGxE,SAAS,kBAAkB;AAQ3B,SAAgC,2BAA4B;AAC5D,SAAS,iBAAiB;AAS1B,SAAyB,oBAAqB;AAC9C,SAA4B,uBAAwB;",
   "names": []
 }

package/esm/filters/filter/MoreMenu.js

@@ -11,8 +11,8 @@ import { Item } from "./Item.js";
 import { FilterBarActions } from "./types/filter-state.types.js";
 import { getTextFromNode } from "./utils/getTextFromNode.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useId } from "../../core/hooks/useId.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { Select } from "../../forms/select/Select.js";
 import { Flex } from "../../layouts/flex/Flex.js";